/* APP */
/* Define the lato font family we are going to use */
@font-face {
    font-family: 'Lato';
   	src: url('../fonts/lato/Lato-Regular.eot'); /* IE9 Compat Modes */
    src: url('../fonts/lato/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/lato/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
         url('../fonts/lato/Lato-Regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/lato/Lato-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}
@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato/Lato-Bold.eot'); /* IE9 Compat Modes */
    src: url('../fonts/lato/Lato-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/lato/Lato-Bold.woff2') format('woff2'), /* Modern Browsers */
         url('../fonts/lato/Lato-Bold.woff') format('woff'), /* Modern Browsers */
         url('../fonts/lato/Lato-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}
:root{
	/* colour palette */
	--off_white_1: #F9F9F9;
	--off_white_2: #EDEDED;
	--off_white_3: #BDBDBD;

	--off_black_1: #222222;
	--off_black_2: #414141;
	--off_black_3: #616161;

	--main_colour_standard: #00ABC0;
	--main_colour_extra_light: #B1EAF1;
	--main_colour_light: #83D6DF;
	--main_colour_dark: #0096A6;

	--main_contrast_standard: #36464E;
	--main_contrast_extra_light: #8B9EA7;
	--main_contrast_light_1: #607D8B;
	--main_contrast_light_2: #455A64;
	--main_contrast_dark: #253137;

	--error_dark_1: #F04124;
	--error_dark_2: #DE2B0F;

	--accent1_standard: #3D67CE;
	--accent1_light: #426FD9;
	--accent1_dark: #2647A0;

	--accent2_standard: #F59898;
	--accent2_light: #FFD1D1;
	--accent2_dark: #ED9090;

	--accent3_standard: #F0DB5C;
	--accent3_light: #FEF2CD;
	--accent3_dark: #DDCCAA;
}

@keyframes sideupLogoIn {
	from {opacity: 0.0;}
    to {opacity: 1;}
}

.sce-header-module-icon {
	height: 45px;
	width: 40px;
}

/* Thin grey line above tabs */
.skin-sup #sce-app-view-container {
	border-bottom-color: white;
	background-color: white;
}
.skin-sup #sce-app-view-container:empty {
	background-image: url('../img/lea-logo.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 40% auto;

	animation-name: sideupLogoIn;
    animation-duration: 2s;
    animation-delay: 0.1s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
.skin-sup #sce-app-main-content #sce-app-toggle-nav {
	color: white;
	background-color: var(--main_contrast_standard);
	border-radius: 0;
	-webkit-border-radius: 0;
	width: 1.25rem;
}
.skin-sup #sce-app-main-content {
	padding-right: 0;
}
.skin-sup #sce-app-main-content #sce-app-toggle-nav .fa {
	position: initial;
	top: 49%;
}
.skin-sup a.sce-app-link.disabled {
	color: grey;
}
.skin-sup .sce-app-nav a.sce-app-link.disabled {
	display: none;
}
.skin-sup .sce-app-nav {
	background-color: var(--main_contrast_standard);
	padding-left: 0px;
	padding-right: 0px;
	color: white;;
}

/* sce-app-nav (accordion) */
.skin-sup .sce-app-nav .accordion {
	margin-bottom: 0;
	text-transform: uppercase;
}
.skin-sup .sce-app-nav .accordion .accordion-navigation,
.skin-sup .sce-app-nav .accordion dd {
	display: block;
	margin-bottom: 0 !important;
}
/* Background for select dd item in accordion left menu */
/* .skin-sup .sce-app-nav .accordion .accordion-navigation.active > a,
.skin-sup .sce-app-nav .accordion dd.active > a {
	background: var(--main_contrast_light_2);
} */
.skin-sup .sce-app-nav .accordion .accordion-navigation > a,
.skin-sup .sce-app-nav .accordion dd > a {
	background: var(--main_contrast_standard);
	color: white;
	padding: 0.5rem;
	padding-left: 1.5em;
	display: block;
	font-family: 'Lato', Helvetica, Roboto, Arial, sans-serif;
	font-size: 0.875rem;
	border-bottom: solid 1px;
	border-bottom-color: var(--main_contrast_dark);
}
.sce-mq-medium .skin-sup .sce-app-nav .accordion .accordion-navigation > a,
.sce-mq-medium .skin-sup .sce-app-nav .accordion dd > a {
	padding-left: 1em;
}
.skin-sup .sce-app-nav .accordion dd.active > a {
	background-color: var(--main_contrast_light_2);
}
.skin-sup .sce-app-nav .accordion dd.active .side-nav li {
	background-color: var(--main_contrast_light_1);
}
.skin-sup .sce-app-nav .accordion dd.active .side-nav li a:not(.button):hover {
	background-color: var(--main_contrast_light_1);
}
.skin-sup .sce-app-nav .accordion .accordion-navigation > a:hover,
.skin-sup .sce-app-nav .accordion dd > a:hover {
	background: var(--main_contrast_light_2);
}
.skin-sup .sce-app-nav .accordion .accordion-navigation > .content,
.skin-sup .sce-app-nav .accordion dd > .content {
	display: none;
	padding: 0.7rem;
}
.skin-sup .sce-app-nav .accordion .accordion-navigation > .content.active,
.skin-sup .sce-app-nav .accordion dd > .content.active {
	display: block;
	background: var(--main_contrast_standard);
	padding: 0rem;
}
.skin-sup .sce-app-nav .side-nav li.divider {
	border-color: var(--main_contrast_dark);
}

/* sce-password and popup to change user (costco) */
.skin-sup .password-titlebar,
.skin-sup .switch-groups-titlebar {
	height: 3rem;
	line-height: 2rem;
	background-color: var(--main_contrast_standard);
	color: white;
    padding-top: 0.65rem;
    text-transform: uppercase;
}
.skin-sup .sce-password-close-icon,
.skin-sup .sce-switch-groups-close-icon {
	padding-top: 0.2rem;
}
.skin-sup .password-errors,
.skin-sup .password-titlebar,
.skin-sup .password-box,
.skin-sup .sce-password-confirm.button,
.skin-sup .switch-groups-titlebar,
.skin-sup .switch-groups-box,
.skin-sup .sce-switch-groups-confirm.button {
	font-family: 'Lato', Helvetica, Roboto, Arial, sans-serif;
    font-size: .875rem;
}
.skin-sup .password-errors-icon,
.skin-sup .switch-groups-errors-icon {
    font-size: 1.125rem;
    vertical-align: text-bottom;
}
.skin-sup .sce-password-confirm.button,
.skin-sup .sce-switch-groups-confirm.button {
	border-radius: 0;
    padding-top: .75rem;
    padding-right: 1rem;
    padding-bottom: .75rem;
    padding-left: 1rem;
    font-size: .875rem;
    text-transform: uppercase;
    background-color: var(--main_colour_light);
    color: white;
}
.skin-sup .switch-groups-box {
	padding: 1rem;
}

/* BREADCRUMB */
.skin-sup .sce-breadcrumb {
	height: inherit;
	text-transform: capitalize;
	font-size: 0.875rem;
	background-color: var(--main_colour_standard);
	border: none;
	margin-bottom: 0;
	/*test*/
	overflow: hidden;
	width: 100%;
	border-bottom: solid 2px var(--main_colour_dark);
}
.skin-sup .sce-breadcrumb:empty{
	display: none;
}
.skin-sup .sce-breadcrumb li {
	float: left;
	margin: 0 6px 0 14px;
	background: var(--main_colour_dark);
	padding: 4px 8px;
	border-top: solid 2px var(--main_colour_standard);
	border-bottom: solid 2px var(--main_colour_standard);
	float: left;
	text-decoration: none;
	color: white;
	position: relative;
}
.skin-sup .sce-breadcrumb li:nth-child(1) {
	margin: 0;
	border: 0;
	padding: 4px 12px;
}
.skin-sup .sce-breadcrumb li:nth-child(2) {
	margin-left: 2px;
}
.skin-sup .sce-breadcrumb li:nth-child(2):not(:last-of-type):before {
	background: var(--main_colour_dark);
}
.skin-sup .sce-breadcrumb li:not(:first-of-type):not(:nth-child(2)):not(:last-of-type):before {
	content: "";
	position: absolute;
	top: 50%;
	margin-top: -18px;
	border-width: 18px 6px 18px 11px;
	border-style: solid;
	border-color: var(--main_colour_dark) var(--main_colour_dark) var(--main_colour_dark) transparent;
	left: -17px;
}
.skin-sup .sce-breadcrumb li:not(:first-of-type):not(:last-of-type)::after{
	content: "";
	position: absolute;
	top: 50%;
	margin-top: -18px;
	border-top: 18px solid transparent;
	border-bottom: 18px solid transparent;
	border-left: 11px solid var(--main_colour_dark);
	right: -11px;
}
.skin-sup .sce-breadcrumb li:nth-child(1):last-of-type {
	background-color: var(--main_colour_standard);
	padding: 6px 12px;
	text-transform: uppercase;
}
.skin-sup .sce-breadcrumb li:nth-child(1):not(:last-of-type) {
	border-top: solid 2px var(--main_colour_standard);
	border-bottom: solid 2px var(--main_colour_standard);
}
.skin-sup .sce-breadcrumb li:not(:first-of-type):last-of-type {
	background-color: var(--main_colour_standard);
	text-transform: uppercase;
}
.skin-sup .sce-breadcrumb .current,
.skin-sup .sce-breadcrumb .current:hover{
	font-weight: bold;
	background: none;
}
.skin-sup .sce-breadcrumb .current::after,
.skin-sup .sce-breadcrumb .current::before{
	content: normal;
}
.skin-sup .sce-breadcrumb [data-breadcrumb-close] {
	padding: 8px 4px 4px;
}
.skin-sup .sce-breadcrumb > li > a > i {
	padding-right: 0.25rem;
}
.skin-sup .sce-breadcrumb > li > a:link,
.skin-sup .sce-breadcrumb > li > a:visited {
	color: white;
}
.skin-sup .sce-breadcrumb > li > a:hover,
.skin-sup .sce-breadcrumb > li > a:focus {
	color: var(--off_black_2);
}
.skin-sup .sce-breadcrumb > li .sce-filter-condition {
	color: var(--main_colour_dark);
}
.skin-sup .sce-breadcrumb > li.active .sce-filter-condition {
	color: orange;
}
.skin-sup .sce-breadcrumb > li.active > a:first-of-type {
	color: white;
}
.skin-sup .sce-breadcrumb > li.active > a:link:not(:first-of-type),
.skin-sup .sce-breadcrumb > li.active > a:visited:not(:first-of-type) {
	color: var(--off_black_3);
}
.skin-sup .sce-breadcrumb > li.active > a:hover:not(:first-of-type),
.skin-sup .sce-breadcrumb > li.active > a:focus:not(:first-of-type) {
	color: var(--off_black_2);
}
.skin-sup .sce-breadcrumb [data-breadcrumb-close] .fa-times {
	font-size: 20px;
	color: white;
	padding-right: 8px;
}

/* DATATABLE - base */
.skin-sup .yui3-datatable-scroll-liner,
.skin-sup .yui3-datatable-sort-liner {
    text-align: center;
    font-weight: normal;
    font-size: 0.875rem;
}
.skin-sup .yui3-datatable-table {
	font-family: 'Lato', Helvetica, Roboto, Arial, sans-serif;
	border: none;
}
.skin-sup .yui3-datatable-caption {
	color: var(--off_black_3);
	font: italic 85%/1 arial, sans-serif;
}
.skin-sup .yui3-datatable-cell {
	/* border-left: 1px solid var(--off_white_3); /* inner column border */
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: solid 1px var(--off_white_2);
}
.skin-sup .yui3-datatable-header,
.skin-sup .yui3-datatable-footer,
.skin-sup .yui3-datatable-footer th,
.skin-sup .yui3-datatable-footer td {
	/* border-left: 1px solid var(--off_white_3); /* inner column border */
	padding-top: 10px;
	padding-bottom: 10px;
}
.skin-sup .yui3-datatable-scroll-columns .yui3-datatable-header {
	padding: 0;
}
.skin-sup .yui3-datatable-scroll-columns .yui3-datatable-header .yui3-datatable-scroll-liner {
	padding: 10px 10px;
}
.skin-sup .yui3-datatable-header,
.skin-sup .yui3-datatable-footer {
	/* header gradient */
	background: white url(../../../../assets/skins/sam/sprite.png) repeat-x 0 0;
	background-image:-webkit-linear-gradient(transparent 40%, rgba(0,0,0,0.21));
	background-image:-moz-linear-gradient(top,transparent 40%,rgba(0,0,0,0.21));
	background-image: -ms-linear-gradient(transparent 40%, rgba(0,0,0,0.21));
	background-image: -o-linear-gradient(transparent 40%, rgba(0,0,0,0.21));
	background-image: linear-gradient(transparent 40%, rgba(0,0,0,0.21));
	/* Not using an IE gradient because it doesn't support color stops */
	color: var(--off_black_3);
	font-weight: normal;
	text-align: left;
	text-shadow: 0 1px 1px white;
	vertical-align: bottom;
	white-space: nowrap;
}
.skin-sup .yui3-datatable-cell {
	background-color: transparent;
}
.skin-sup .yui3-datatable-even .yui3-datatable-cell {
	background-color: white;
}
.skin-sup .yui3-datatable-odd .yui3-datatable-cell {
    background-color: var(--off_white_2);
}
.skin-sup .yui3-datatable tr.yui3-datatable-sel-selected td {
    background-color: var(--main_colour_light) !important;
}
.skin-sup .yui3-datatable-sel-selected {
	color: var(--off_black_2);
}
.skin-sup .yui3-datatable-sel-selected a {
	color: var(--main_colour_dark);
}
.skin-sup .yui3-datatable-cell {
    font-size: 90% !important;
    color: var(--off_black_2);
}
.skin-sup .yui3-datatable-header,
.skin-sup .yui3-datatable-footer {
    background: none repeat scroll 0% 0% var(--off_white_2) !important;
}
.skin-sup .yui3-datatable-y-scroller-container {
    background: none repeat scroll 0% 0% white !important;
}
.skin-sup .yui3-datatable-scroll-columns {
	font-family: 'Lato', Helvetica, Roboto, Arial, sans-serif;
}
.skin-sup .yui3-datatable-x-scroller,
.skin-sup .yui3-datatable-y-scroller-container {
	border-color: var(--off_white_3);
}
.skin-sup .yui3-datatable .yui3-datatable-highlight-row td {
	background-color: var(--accent3_light);
}
.skin-sup .yui3-datatable tr .yui3-datatable-highlight-col {
	background-color: var(--accent3_light);
}
.skin-sup .yui3-datatable tr .yui3-datatable-highlight-cell {
	background-color: var(--accent3_light);
}

/* Message */
.skin-sup .yui3-datatable-message-content {
border-bottom-color: var(--off_white_3);
}

/* DATATABLE - toolbar */
.skin-sup .sce-view-toolbar .sce-toolbar-dropdown-label.disabled {
	display: block;
}
/* if disabled hide when :hover on parent too , override foundation rule */
.sce-mq-medium-up .skin-sup .sce-view-toolbar .has-dropdown.hover > .sce-toolbar-dropdown-label.disabled + ul.dropdown,
.sce-mq-medium-up .skin-sup .sce-view-toolbar .has-dropdown.not-click:hover > .sce-toolbar-dropdown-label.disabled + ul.dropdown {
	display: none;
}

/* DATATABLE - footerview */
.skin-sup .yui3-datatable-footer {
    border-right: 1px solid var(--off_white_3);
}
.skin-sup .yui3-datatable-footer tr {
    border-top: 1px solid black;
}
.skin-sup .yui3-datatable-ft td,
.skin-sup .yui3-datatable-ft th,
.skin-sup .yui3-datatable-footer td,
.skin-sup .yui3-datatable-footer th {
    border-top: 1px solid var(--off_white_3);
}

/* DATATABLE - selection */
/* CSS classes for gallery-datatable-selection module */
.skin-sup .yui3-datatable td.yui3-datatable-sel-highlighted,
.skin-sup .yui3-datatable td.yui3-datatable-sorted.yui3-datatable-sel-highlighted,
.skin-sup .yui3-datatable tr.yui3-datatable-sel-highlighted td,
.skin-sup .yui3-datatable tr.yui3-datatable-sel-highlighted td.yui3-datatable-sorted {
    background-color: var(--accent3_standard);
}
.skin-sup .yui3-datatable td.yui3-datatable-sel-selected,
.skin-sup .yui3-datatable td.yui3-datatable-sorted.yui3-datatable-sel-selected,
.skin-sup .yui3-datatable tr.yui3-datatable-sel-selected td,
.skin-sup .yui3-datatable tr.yui3-datatable-sel-selected td.yui3-datatable-sorted {
    background-color: var(--main_colour_extra_light);
}

/* DATATABLE - sort */
.skin-sup .yui3-datatable-columns .yui3-datatable-sorted,
.skin-sup .yui3-datatable-sortable-column:hover {
    *background: var(--off_white_3) url(../../../../assets/skins/sam/sprite.png) repeat-x 0 -100px;
    background-color: var(--off_white_2);
}
.skin-sup .yui3-datatable-data .yui3-datatable-even .yui3-datatable-sorted {
    background-color: white;
}
.skin-sup .yui3-datatable-data .yui3-datatable-odd .yui3-datatable-sorted {
    background-color: var(--off_white_2);
}

/* FORM */
/* Basic form styles */
.skin-sup .yui3-sceform {
    background-color: white;
    border: none;
}

/* FORM - base */
/*
 Invalid values background colors
 */
/* Inactive tabs */
.skin-sup .sceFormBase .tabs dd > a.invalid {
    background-color: var(--accent2_standard);
}
.skin-sup .sceFormBase .tabs dd > a.invalid:hover {
    background-color: var(--accent2_dark);
}
/* Active tabs */
.skin-sup .sceFormBase .tabs dd.active a.invalid {
    background-color: var(--accent2_light);
}
/* Other menu entries (active)*/
.skin-sup .sceFormBase .f-dropdown li.invalid:hover {
    background-color: var(--accent2_standard);
}
/* Other menu entries*/
.skin-sup .sceFormBase .f-dropdown li.invalid {
    background-color: var(--accent2_light);
}
/* Active accordion */
.skin-sup .sceFormBase .accordion dd > a.invalid:hover {
    background-color: var(--accent2_dark);
}
/* Inactive accordion */
.skin-sup .sceFormBase .accordion dd > a.invalid {
    background-color: var(--accent2_standard);
}
/* Error panel */
.skin-sup .sceFormBase .sceFormBase-validation-errors {
    background-color: var(--error_dark_1);
    border-color: var(--error_dark_2);
    color: white;
    display: none;
}

/*
 Validation tooltip related styles
 */
.skin-sup .sceFormBase .sceFormBase-tooltip .yui3-widget-bd {
    border: 1px solid black;
    background: var(--accent3_light);
}
.skin-sup .sceFormBase .sceFormBase-tooltip .yui3-widget-bd:before {
    border-width: 0 8px 8px;
    border-style: solid;
    border-color: black transparent;
}
/* creates the smaller triangle */
.skin-sup .sceFormBase .sceFormBase-tooltip .yui3-widget-bd:after {
    border-width: 0 8px 8px;
    border-style: solid;
    border-color: var(--off_white_2) transparent;
}

/* ButtonBar is the minimal Foundation subset to replicate the TopBar appearance
   TopBar isn't used because buttons will disappear in mobile version. */
.skin-sup .sceFormBase .buttonBar {
    background: var(--main_colour_standard);
    height: 60px;
}
.skin-sup .sceFormBase .buttonBar a {
    color: white;
    font-size: .8125rem;
    line-height: 60px;
}
.skin-sup .sceFormBase .buttonBar a.disabled {
    color: var(--main_colour_light);
    line-height: 60px;
}
.skin-sup .sceFormBase .buttonBar a:hover:not(.disabled) {
    background: var(--main_colour_light);
    line-height: 60px;
}
.skin-sup .sce-explorer-field-label {
	font-size: 75%;
	border-bottom: thin solid var(--off_white_2);
}
.skin-sup .sce-explorer-field-value {
	font-weight: bold;
}

/* FORM SEARCH */
.skin-sup .yui3-sceformsearch .search-header {
	background-color: var(--off_white_2);
	height: 2.5rem;
	line-height: 2.5rem;
	text-transform: uppercase;
}
.skin-sup .yui3-sceformsearch span {
	color: var(--off_black_3);
}
.skin-sup .yui3-sceformsearch .sce-groupby-view .disabled span {
	color: var(--off_white_3);
}
.skin-sup .yui3-sceformsearch .sce-form-search-resource-path span {
	  color: var(--off_white_3);
}
.skin-sup .yui3-sceformsearch .sce-form-search-resource-path {
	  border-color: var(--off_white_3);
}
.skin-sup .yui3-sceformsearch .button span {
	color: white;
}
.skin-sup .yui3-sceformsearch .search-header label {
	line-height: inherit;
	color: var(--off_black_3);
}
.skin-sup .yui3-sceformsearch .search-toolbar {
	background-color: var(--main_colour_light);
	height: 3.0rem;
	line-height: 3.0rem;
}
.skin-sup .yui3-sceformsearch .sce-form-search-entry-delete {
  color: var(--off_white_2);
}
.skin-sup .yui3-sceformsearch .sce-form-search-entry-delete:hover {
	color: var(--off_black_3);
}
.skin-sup .yui3-sceformsearch .button {
  background-color: var(--main_colour_dark);
}
.skin-sup .yui3-sceformsearch .button span{
  font-size: 0.875rem;
  text-transform: uppercase;
  color: white;
}
.skin-sup .yui3-sceformsearch .sce-form-search-entry-list .button {
  	background-color: var(--main_colour_light);
}
.skin-sup .yui3-sceformsearch .sce-form-search-entry-list .button:hover {
  	background-color: var(--main_colour_dark);
}
.skin-sup .yui3-sceformsearch .sce-groupby-select li.optelem:hover {
  	background-color: var(--off_white_3);
}
.skin-sup .yui3-sceformsearch .sce-groupby-select .disabled li.optelem:hover {
  	background: var(--off_white_2);
}
.skin-sup .yui3-sceformsearch .sce-groupby-select li.optgroup:hover {
  	background-color: var(--off_white_3);
}
.skin-sup .yui3-sceformsearch .sce-groupby-select .disabled li.optgroup:hover {
  	background: var(--off_white_3);
}
.skin-sup .yui3-sceformsearch .sce-groupby-view {
  	background: var(--off_white_2);
}
.skin-sup .yui3-sceformsearch .sce-groupby-view ul li{
	border-color: white;
	background: var(--off_white_2);
}
.skin-sup .yui3-sceformsearch .sce-groupby-view ul li.optgroup {
	background: var(--off_white_3);
}
.skin-sup .yui3-sceformsearch .sce-groupby-view ul li.optgroup {
	background: var(--off_white_3);
}
.skin-sup .yui3-sceformsearch .sce-groupby-view .check-box {
	font-size: 1rem;
}
.skin-sup .yui3-sceformsearch .sce-groupby-view .check-box.fa-check-on {
	color: var(--main_colour_standard);
}
.skin-sup .yui3-sceformsearch .sce-groupby-view .disabled .check-box.fa-check-on {
	color: var(--off_white_3);
}
.skin-sup .yui3-sceformsearch .sce-form-search-dosearch:hover {
	background: var(--main_colour_standard);
}
.skin-sup .yui3-sceformsearch .search-header .groupby-switch-header input:checked + label {
	background: var(--main_colour_standard);
}
.skin-sup .yui3-sceformsearch .search-header .groupby-switch-header label {
	background: var(--off_white_3);
}

/* LINK HANDLER */
.skin-sup .sce-linkhandler-top-bar select {
	background-color: var(--main_colour_standard);
	color: white;
	border-width: 0;
	text-transform: uppercase;
}
.skin-sup .sce-linkhandler-top-bar select:focus {
	outline-width: 0;
}

/* ATTACHMENT PANEL */
.skin-sup .yui3-scepickerattachmenthandler .attachment-viewer {
    max-height: 80vh;
    overflow-y: auto;
}
.skin-sup .yui3-scepickerattachmenthandler .attachment-viewer-toolbar {
  background-color: var(--main_colour_light);
}
.skin-sup .yui3-scepickerattachmenthandler .attachment-viewer-toolbar .button {
	background-color: var(--main_colour_dark);
}
.skin-sup .yui3-scepickerattachmenthandler .attachment-viewer-toolbar .button:hover {
  background: var(--main_colour_standard);
}
.skin-sup .yui3-scepickerattachmenthandler .attachment-viewer-header {
  background-color: var(--off_white_2);
}
.skin-sup .yui3-scepickerattachmenthandler .attachment-viewer-header label {
  color: var(--off_black_3);
}
.skin-sup .yui3-scepickerattachmenthandler .attachment-viewer-body .attachment-preview .attachment-download-button.button {
  background-color: var(--main_colour_light);
}
.skin-sup .yui3-scepickerattachmenthandler .attachment-viewer-body .attachment-preview .attachment-download-button.button:hover {
  background-color: var(--main_colour_dark);
}
.skin-sup .yui3-scepickerattachmenthandler .attachment-viewer-body .attachment-preview .attachment-download-button.button a {
  color: white;
}

/* Resourcemanager - viewComponent */
.skin-sup .sce-resourcemanager .view-component {
	float: left;
}
.skin-sup .sce-resourcemanager .view-component legend {
	background: var(--off_white_1);
	width: 100%;
	height: 2.5rem;
	line-height: 2.5rem;
}
.skin-sup .sce-resourcemanager .view-component fieldset {
	border: 0px;
	margin-bottom: 0px;
	margin-top: 1rem;
 	padding: 1rem 0 0 0;
}
.skin-sup .sce-resourcemanager .view-component .yui3-datatable-x-scroller,
.skin-sup .sce-resourcemanager .view-component .yui3-datatable-y-scroller-container {
	border: 0;
}
.skin-sup .sce-resourcemanager .master-component p,
.skin-sup .sce-resourcemanager .view-component p {
	font-family: 'Lato', Helvetica, Roboto, Arial, sans-serif;
	font-size: 0.875rem;
	line-height: 1.25rem;
	margin-bottom: 0.5rem;
}
.skin-sup .sce-resourcemanager .view-component .sceformbase-container > div > .display-toolbar {
	background-color: var(--main_colour_light);
	height: 3.0rem;
	line-height: 3.0rem;
}

/* Resourcemanager - viewComponent - Accordion */
.skin-sup .sce-resourcemanager .view-component .sce-explorer-group-link {
	float: right;
	font-size: 0.875rem;
	background: transparent;
}
.skin-sup .sce-resourcemanager .view-component .sce-explorer-group,
.skin-sup .sce-resourcemanager .view-component .sce-explorer-group-fields {
	padding-left: 0;
	padding-right: 0;
	margin-bottom: 0;
}
.skin-sup .sce-resourcemanager dd.sce-explorer-group >div.sce-explorer-container-nav +div.content >div.sce-explorer-group >.sce-explorer-group-fields {
	padding-left: 1.75rem;
}
.skin-sup .sce-resourcemanager dd.sce-explorer-group >div.sce-explorer-container-nav {
	background: var(--off_white_1);
	cursor: pointer;
	padding-left: 1rem;
	margin-bottom: 2px;
	height: 2.75rem;
	line-height: 2.75rem;
}
.skin-sup .sce-resourcemanager dd.sce-explorer-group >div.sce-explorer-container-nav >a:not(.sce-explorer-group-link) {
	color: var(--off_black_1);
	font-family: 'Lato', Helvetica, Roboto, Arial, sans-serif;
 	font-size: 0.875rem;
}
.skin-sup .sce-resourcemanager dd.sce-explorer-group >div.sce-explorer-container-nav:hover{
	background-color: var(--main_colour_extra_light);
}
.skin-sup .sce-resourcemanager dd.sce-explorer-group >div.sce-explorer-container-nav > a.sce-explorer-group-link {
 	padding-left: 0.5rem;
  	padding-right: 0.5rem;
  	margin-right: 1.5rem;
}
.skin-sup .sce-resourcemanager dd.sce-explorer-group >div.sce-explorer-container-nav > a.sce-explorer-group-link:hover {
  	background: var(--off_white_2);
}
.skin-sup .sce-resourcemanager dl.sce-explorer-container {
	margin-bottom: 0;
}
.skin-sup .sce-resourcemanager dd.sce-explorer-group >div.sce-explorer-container-nav >span.fa {
    float: left;
	padding-right: 1rem;
	padding-top: 0.75rem;
}
.skin-sup .sce-resourcemanager dd.sce-explorer-group >div.content.active {
	display: block;
	background: white;
}
.skin-sup .sce-resourcemanager dd.sce-explorer-group >div.content {
	display: none;
	padding-top: 0.875rem;
	padding-left: 0;
	padding-right: 0.875rem;
	padding-bottom: 0;
}
.skin-sup .sce-resourcemanager dd.sce-explorer-group >div.sce-explorer-container-nav +div.content {
	padding-top: 0;
	padding-left: 1rem;
}
.skin-sup .sce-resourcemanager .sce-explorer-accordion-label {
	text-transform: uppercase;
	font-weight: bold;
}

/* LINKHANDLER */
.skin-sup .yui3-scelinkhandler {
    background-color: white;
}
.skin-sup .yui3-scelinkhandler-content {
    -webkit-box-shadow: 0 0 5px var(--off_black_2);
    -moz-box-shadow: 0 0 5px var(--off_black_2);
    box-shadow: 0 0 5px var(--off_black_2);
    border-color: black;
    background: white;
}
.skin-sup .yui3-scelinkhandler .yui3-widget-hd {
    color: white;
    background-color: var(--accent1_standard);
    background: -moz-linear-gradient(0% 100% 90deg, var(--accent1_dark) 7%, var(--accent1_standard) 50%, var(--accent1_light) 100%);
    background: -webkit-gradient(linear, left bottom, left top, from(var(--accent1_dark)), color-stop(0.07, var(--accent1_dark)), color-stop(0.5, var(--accent1_standard)), to(var(--accent1_light)));
}
.skin-sup .yui3-scelinkhandler .yui3-widget-ft {
    background: var(--main_colour_extra_light);
}
.skin-sup .yui3-scelinkhandler .yui3-widget-hd .yui3-button-close {
    /* Reset base button styles */
    background: transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    /* IE < 8 :( */
    *font-size: 0;
    *color: var(--accent1_light);
    *background: url(../../sprite_icons.png) no-repeat 1px 1px;
}
.skin-sup .yui3-aclist-content {
	background: white;
	border-color: var(--off_white_3);
	-moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.58);
	-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.58);
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.58);
}
.skin-sup .yui3-aclist-item-hover {
	background: var(--main_colour_light);
}
.skin-sup .yui3-aclist-item-active {
	background: var(--main_colour_light);
	color: white;
}

/* PAGINATOR */
.skin-sup .yui3-pagview-link-page-active {
    background-color: var(--main_colour_dark);
    color: white !important;
    font-weight: bold;
}
.skin-sup .yui3-pagview-container {
  background-color: var(--main_colour_light);
}
.skin-sup .yui3-pagview-input-page {
	border-radius: 85px;
}

/* PICKER - base */
.skin-sup input.hasError {
	border-color: red;
}
.skin-sup select.hasError {
	border-color: red;
}
.skin-sup .moreInfoTooltip {
	background: var(--main_colour_dark);
	border-color: var(--accent1_dark);
	border: none;
	border-radius: 0px 0px 0px 0px;
	font-family: 'Lato', Helvetica, Roboto, Arial, sans-serif;
	padding: 0.6rem 0.75rem;
}
.skin-sup .moreInfoTooltip label {
	color: var(--main_colour_light);
	text-transform: uppercase;
	font-size: 0.875rem;
}
.skin-sup .moreInfoTooltip span {
	color: white;
	font-size: 0.75rem;
}
.skin-sup .moreInfoTooltip div {
	padding-bottom: 8px;
}
.skin-sup .error {
	border-color: red;
}
.skin-sup .popupValidation {
	border-color: var(--accent3_dark);
	background: var(--off_white_1);
	color: var(--off_black_2);
}
.skin-sup .popupValidation:before {
	border-color: var(--accent3_dark) transparent;
}
/* creates the smaller triangle */
.skin-sup .popupValidation:after {
	border-color: white transparent;
}

/* PICKER - listhandler */
.skin-sup .yui3-scepickerlisthandler {
    background-color: white;
}
.skin-sup .yui3-scepickerlisthandler-content {
    -webkit-box-shadow: 0 0 5px var(--off_black_2);
    -moz-box-shadow: 0 0 5px var(--off_black_2);
    box-shadow: 0 0 5px var(--off_black_2);
    border-color: black;
    background: white;
}
.skin-sup .yui3-scepickerlisthandler .yui3-widget-hd {
    color: white;
    background-color: var(--accent1_standard);
    background: -moz-linear-gradient(
        0% 100% 90deg,
        var(--accent1_dark) 7%,
        var(--accent1_standard) 50%,
        var(--accent1_light) 100%
    );
    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        from(var(--accent1_dark)),
        color-stop(0.07, var(--accent1_dark)),
        color-stop(0.5, var(--accent1_standard)),
        to(var(--accent1_light))
    );
}
.skin-sup .yui3-scepickerlisthandler .yui3-widget-ft {
	background: var(--main_colour_extra_light);
}
.skin-sup .yui3-scepickerlisthandler .yui3-widget-hd .yui3-button-close {
    /* Reset base button styles */
    background: transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    /* IE < 8 :( */
    *font-size: 0;
    *color: var(--accent1_light);
    *background: url(../../sprite_icons.png) no-repeat 1px 1px;
}

/* TABLE AND CHART TOOLBAR */
.skin-sup .sce-view-toolbar .top-bar-section li:not(.has-form) {
	background: var(--main_colour_standard);
}
.skin-sup .sce-view-toolbar .top-bar-section li:not(.has-form) a:not(.button) {
	background: var(--main_colour_standard);
}
.skin-sup .sce-view-toolbar .top-bar-section li:not(.has-form) a:not(.button):hover {
	background: var(--main_colour_light);
}
.skin-sup .sce-view-toolbar .top-bar-section li.active:not(.has-form) a:not(.button) {
	color: white;
	background: var(--main_colour_light);
}
.skin-sup .sce-view-toolbar .top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
	background: var(--main_colour_standard);
}
.skin-sup .sce-view-toolbar .top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button):hover {
	background: var(--main_colour_light);
}
.skin-sup .sce-view-toolbar .top-bar-section .dropdown li:not(.has-form):not(.active) >a.disabled {
	background: var(--main_colour_standard);
	color: var(--main_colour_light)
}
.skin-sup .sce-view-toolbar .top-bar-section .dropdown li:hover:not(.has-form):not(.active) >a.disabled {
	background: var(--main_colour_standard);
	color: var(--main_colour_light)
}
.skin-sup .sce-view-toolbar,
.skin-sup .sce-view-toolbar .top-bar,
.skin-sup .sce-view-toolbar .top-bar .title-area,
.skin-sup .sce-view-toolbar .top-bar .top-bar-section {
	background-color: var(--main_colour_standard);
}
.skin-sup .sce-view-toolbar .top-bar {
	min-height: 3.75rem;
}
.skin-sup .sce-view-toolbar .top-bar .title-area,
.skin-sup .sce-view-toolbar .top-bar .title-area .name,
.sce-mq-medium-up .skin-sup .sce-view-toolbar .top-bar .top-bar-section >ul >li,
.sce-mq-medium-up .skin-sup .sce-view-toolbar .top-bar .top-bar-section >ul >li a {
	height: 3.75rem;
	line-height: 3.75rem;
}
.sce-mq-medium-up .skin-sup .sce-view-toolbar .top-bar .top-bar-section ul.dropdown >li,
.sce-mq-medium-up .skin-sup .sce-view-toolbar .top-bar .top-bar-section ul.dropdown >li a {
	height: 2.8125rem;
	line-height: 2.8125rem;
}
.skin-sup .sce-view-toolbar .top-bar-section i {
	font-size: 1.25rem;
	vertical-align: sub;
}
.skin-sup .sce-view-toolbar .top-bar-section ul li > a {
	/* color: white; */
	font-family: 'Lato', Helvetica, Roboto, Arial, sans-serif;
	font-size: 0.875rem;
}
.skin-sup .sce-view-toolbar .top-bar-section ul li > a[data-id="btnExport"].disabled,
.skin-sup .sce-view-toolbar .top-bar-section ul li > a[data-id="btnImport"].disabled {
	display: none;
}
.skin-sup .sce-view-toolbar .top-bar .divider {
    border-color: var(--main_colour_dark);
}
.skin-sup .sce-view-toolbar .top-bar .name h1 a,
.skin-sup .sce-view-toolbar .top-bar .name h2 a,
.skin-sup .sce-view-toolbar .top-bar .name h3 a,
.skin-sup .sce-view-toolbar .top-bar .name h4 a,
.skin-sup .sce-view-toolbar .top-bar .name p a,
.skin-sup .sce-view-toolbar .top-bar .name span a {
	min-height: 3.75rem;
	line-height: 3.75rem;
	height: 100%;
	cursor: default;
	padding: 0 0.9375rem;
}
.skin-sup .sce-view-toolbar .top-bar .top-bar-section > ul > .divider,
.skin-sup .sce-view-toolbar .top-bar .top-bar-section > ul > [role="separator"] {
	border-right-color: var(--main_colour_dark);
}

/* WEBSOCKET - inbox */
.skin-sup .yui3-scewebsocketinbox .sceWebsocketInbox-message {
	background-color: var(--off_white_2);
}
.skin-sup .yui3-scewebsocketinbox .sceWebsocketInbox-list {
	background-color: white;
}
.skin-sup .yui3-scewebsocketinbox .sceWebsocketInbox-list .side-nav li a{
	color: black;
}
.skin-sup .yui3-scewebsocketinbox .sceWebsocketInbox-list .side-nav li a .right{
	font-size:75%;
	color: var(--off_black_3);
}
.skin-sup .yui3-scewebsocketinbox .sceWebsocketInbox-list .side-nav li a:not(.button):hover,
.skin-sup .yui3-scewebsocketinbox .sceWebsocketInbox-list .side-nav li a:not(.button):focus {
	color: black;
}
.skin-sup .yui3-scewebsocketinbox .sceWebsocketInbox-subject {
	font-size:85%;
	color: var(--off_black_3);
}
.skin-sup .yui3-scewebsocketinbox .noSelection {
	font-style: italic;
	color: var(--off_black_3);
}
.skin-sup .yui3-scewebsocketinbox a.selected[data-group-id] {
	/* color defined in $topbar-link-bg-hover */
	background-color: var(--off_black_1);
}

/* WEBSOCKET - menu */
.skin-sup .sceWebsocketMenu .emptyEntry {
	font-style: italic;
}
.skin-sup .sceWebsocketMenu .notification .date{
	font-style: italic;
	font-size: 85%;
}

/* WEBSOCKET - message view */
.skin-sup .sceWebsocketMessageView {
	background: var(--off_white_2);
}
.skin-sup .sceWebsocketMessageView .panel {
	background: white;
}
.skin-sup .sceWebsocketMessageView .heading .icon {
	background: var(--main_colour_dark);
	color: white;
}
.skin-sup .sceWebsocketMessageView .timestamp {
	font-style: italic;
	color: var(--off_black_3);
}

/* MODULE CONTAINER */
.skin-sup #module-container {
	margin-top: 0;
}

/* CONTEXT */
.skin-sup .top-bar-section li:not(.has-form) >[data-sce-edit-context].active:not(.button),
.skin-sup .top-bar-section li:not(.has-form) >[data-sce-edit-context].active:not(.button) a {
	background-color: var(--main_colour_dark);
}
.skin-sup .top-bar .top-bar-section li[data-sce-context] a,
.skin-sup .top-bar .top-bar-section li[data-sce-device] a {
	padding-left: 1.25rem;
	color: white;
}

/* HEADER */
/* splash */
.skin-sup header {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.skin-sup footer {
	font-size: 70%;
	font-family: 'Lato', Helvetica, Roboto, Arial, sans-serif;
	background-color: var(--main_contrast_standard);
	color: var(--off_white_3);
}
.skin-sup.certification footer,
.skin-sup.cert footer {
	background-color: darkorange;
	color: white;
}
.skin-sup.test footer {
	background-color: gold;
	color: white;
}
.skin-sup.development footer,
.skin-sup.dev footer {
	background-color: seagreen;
}
.skin-sup.local footer {
	background-color: steelblue;
}
.skin-sup .top-bar a.sce-app-link.disabled,
.skin-sup .top-bar a.sce-app-link.disabled:link,
.skin-sup .top-bar a.sce-app-link.disabled:visited,
.skin-sup .top-bar a.sce-app-link.disabled:hover,
.skin-sup .top-bar a.sce-app-link.disabled:active {
	color: white;
}
.skin-sup .top-bar .top-bar-section a.sce-app-link {
	font-weight: bold;
}
.sce-mq-medium-up .skin-sup .top-bar .top-bar-section a.sce-app-link {
	text-transform: uppercase;
}
.skin-sup a[data-id="btnMapRefresh"] i {
	font-size: 1.25rem;
	vertical-align: sub;
}
.skin-sup .journeys-menu {
	padding-left: 0.375rem;
	padding-right: 0.375rem;
}

.skin-sup .journeys-menu .button {
	padding: 0.35rem 0.875rem;
}

.skin-sup .journeys-map {
	padding: 0;
}
.skin-sup .journey-navigation {
	margin: 0;
	cursor: pointer;
}

/* Panel */
/* Default yui3 panel styles */
.skin-sup .yui3-panel-content {
  background: white;
}
.skin-sup .map-marker-info div {
	padding-left: 5px;
	padding-right: 5px;
}
.skin-sup .map-marker-info .title {
	color: var(--main_colour_dark);
	padding-top: 3px;
	padding-bottom: 3px;
	font-size: 1.25rem;
	font-weight: 400;
}
.skin-sup .map-marker-info .button {
	border-radius: 0;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	padding-right: 1rem;
	padding-left: 1rem;
	margin-top: 0.75rem;
	margin-bottom: 0;
	background-color: var(--main_colour_light);
	width: 100%;
	text-transform: uppercase;
}
.skin-sup .map-marker-info .footer {
	color: grey;
	padding-top: 2px;
	padding-bottom: 2px;
}
.skin-sup .map-marker-info div:not(.title):not(.footer):not(.event) {
	margin-bottom: 3px;
	border-bottom: solid 1px var(--off_white_2);
	font-size: 0.875rem;
	text-transform: lowercase;
}
.skin-sup .map-marker-info .value {
	float: right;
}
.skin-sup .map-marker-info .event {
	border-bottom: none;
}
.skin-sup .map-marker-info .events-link {
	text-transform: uppercase;
	font-size: 0.875rem;
}

/* counter */
.skin-sup .scecounterbase-container .right .icon {
	font-size: 1.75rem;
	padding-top: 1.75rem;
}
.skin-sup .scecounterbase-container .right .attribute-value {
	padding-right: 0.25rem;
}
.skin-sup .scecounterbase-container .right .attribute-value .value {
	font-size: 2.25rem;
	padding-top: 1rem;
}
.skin-sup .scecounterbase-container.sce-counter-no-icon .attribute-value {
	padding-right: 1rem;
}
.skin-sup .scecounterbase-container.sce-counter-no-icon .attribute-value .value {
	font-size: 2.25rem;
	padding-top: 1rem;
}
.skin-sup .scecounterbase-container.sce-counter-no-icon .attribute-label .label {
	font-size: 1rem;
	text-transform: Capitalize;
}

/* homepage */
.skin-sup .homepage {
	padding-left: 0;
}
.skin-sup .homepage-divider {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: dashed 0.125rem var(--off_white_2);
}
.skin-sup .sce-subnav {
	background-color: var(--main_colour_standard);
	color: white;
}
.skin-sup .sce-subnav .sub-nav.row {
    min-height: 3.75rem;
    overflow: visible;
}
.skin-sup .sce-subnav .top-section {
	margin-left: 0;
	padding-left: 0;
	padding-right: 0;
}
.skin-sup .sce-subnav .sub-nav .button {
	border-radius: 6px;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	padding-right: 1.5rem;
	padding-left: 1.5rem;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	background-color: var(--main_colour_dark);
}
.skin-sup .sce-subnav .homepage .sub-nav a.button:active,
.skin-sup .sce-subnav .homepage .sub-nav a.button:active {
	background-color: var(--main_colour_light);
}
.skin-sup .sce-subnav .homepage .sub-nav a.button span {
	font-size: 0.875rem;
	text-transform: uppercase;
	color: white;
}
.skin-sup .sce-subnav .homepage .sub-nav a.button span.icon {
	font-size: 1rem;
	text-transform: uppercase;
	color: white;
}
/* override foundation rule */
.skin-sup .sce-subnav .homepage .sub-nav li.yui3-aclist-item {
    float: none;
    margin-left: 0;
}
.skin-sup .sce-dashboard-content .homepageSectionTitle {
	background-color: var(--off_white_2);
	height: 2.75rem;
	line-height: 2.75rem;
	padding-left: 1rem;
	text-transform: uppercase;
}
.skin-sup .sce-dashboard-content .homepageSectionTitle .title,
.skin-sup .sce-dashboard-content .homepageSectionTitle .title-count {
	color: var(--off_black_3);
	font-size: 0.875rem;
	font-family: 'Lato', Helvetica, Roboto, Arial, sans-serif;
}
.skin-sup .sce-dashboard-content .homepageSectionTitle .title-count {
	float: right;
}
.skin-sup .sce-dashboard-content .homepageSectionTitle .title-icon {
	color: var(--off_black_3);
	font-size: 1.5rem;
	float: right;
	padding-right: 2rem;
	padding-left: 1rem;
	padding-top: 0.6rem;
}
.skin-sup .performanceLabel {
	height: 3rem;
	line-height: 3rem;
	padding-left: 1rem;
	color: var(--off_black_3);
	background-color: var(--off_white_1);
	margin-top: 0.5rem;
	text-transform: uppercase;
	font-size: 1rem;
	font-weight: bold;
}
.skin-sup .sce-counter-no-icon {
	height: 3rem;
	line-height: 3rem;
	padding-left: 1rem;
	color: var(--off_black_3);
	font-size: 1rem;
	margin-top: 0.5rem;
	background-color: var(--off_white_1);
}
.skin-sup .performanceValue .perfVal {
	float: right;
	color: var(--main_colour_dark);
	font-size: 2.25rem;
	padding-right: 1rem;
}
.skin-sup .perfTrend{
	font-size: 1.5rem;
	vertical-align: sub;
	color: limegreen;
}
.skin-sup .alertBox {
	border-bottom: solid 2px white;
	background-color: var(--main_colour_light);
	padding: 0.875rem 1rem;
	margin-top: 0.125rem;
}
.skin-sup .sce-subnav .top-section input,
.skin-sup .sce-subnav .top-section select {
	margin-top: 0.4rem;
	margin-bottom: 0.4rem;
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
}
.skin-sup .sce-subnav .top-section span.pickerHref {
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}
.skin-sup .chart-box {
	border: solid 0.5rem var(--off_white_1);
	margin-top: 0.5rem;
}

/* comments */
.skin-sup .comments-subnav {
	margin-top: 0;
	margin-bottom: 0.4rem;
	padding-left: 0;
	padding-right: 0;
	height: 3.75rem;
	background-color: var(--main_colour_standard);
	color: white;
}
.skin-sup .comments-submit {
	height: 8rem;
}
.skin-sup .comments-list .commentSpacer,
.skin-sup .comments-list .commentSpacerLeft,
.skin-sup .comments-list .commentSpacerRight {
	height: 0.5rem;
	line-height: 0.5rem;
}
.skin-sup .comments-list .commentBox {
	display: inline-block;
	padding: 0.5rem 1rem;
	border-radius: 0.25rem;
}
.skin-sup .comments-list .commentLeft .commentBox {
	float: left;
	text-align: left;
	background-color: var(--off_white_2);
	margin-right: 10%
}
.skin-sup .comments-list .commentRight .commentBox {
	float: right;
	text-align: right;
	background-color: var(--main_colour_light);
	margin-left: 10%
}
.skin-sup .comments-list .commentLeft .commentBox {
	float: left;
	text-align: left;
	background-color: var(--off_white_2);
	margin-right: 10%
}
.skin-sup .comments-list .commentRight .commentBox.commentUnread {
	background-color: var(--main_colour_standard);
	color: white;
}
.skin-sup .comments-list .commentLeft .commentBox.commentUnread {
	background-color: var(--off_black_3);
	color: white;
}
.skin-sup .comments-list .commentLeft .commentBox.commentUnread .autoCommentBoxLeft{
	border-bottom: solid 1px var(--off_white_2);
}
.skin-sup .comments-list .commentBox.commentUnread .autoComment {
	color: var(--off_white_2);
}
.skin-sup .comments-list .commentSpacerLeft.commentUnread {
	border-color: transparent transparent transparent var(--off_black_3);
}
.skin-sup .comments-list .commentSpacerRight.commentUnread {
	border-color: transparent var(--main_colour_standard) transparent transparent;
}
.skin-sup .comments-list .commentBox.commentUnread .commentTime,
.skin-sup .comments-list .commentBox.commentUnread .commentSender {
	color: var(--off_white_2);
}
.skin-sup .comments-list .commentSpacerLeft {
	content: ' ';
	width: 0;
	height: 0;
	left: 2rem;
	top: -0.5rem;
	border: 0.5rem solid;
	border-color: transparent transparent transparent var(--off_white_2);
}
.skin-sup .comments-list .commentSpacerRight {
	float: right;
	content: ' ';
	width: 0;
	height: 0;
	right: 2rem;
	top: -0.5rem;
	border: 0.5rem solid;
	border-color: transparent var(--main_colour_light) transparent transparent;
}
.skin-sup .comments-list .commentBox .comment {
	display: inline-block;
	text-align: left;
	font-size: 1rem;
	white-space: pre-wrap;
	font-family: 'Lato', Helvetica, Roboto, Arial, sans-serif;
}
.skin-sup .comments-list .commentBox .commentTime,
.skin-sup .comments-list .commentBox .commentSender {
	font-style: italic;
	font-size: 0.875rem;
	color: grey;
	font-family: 'Lato', Helvetica, Roboto, Arial, sans-serif;
}
.skin-sup .comments-list .commentBox .readCheck {
	font-size: 1.2rem;
	vertical-align: text-top;
	color: var(--main_colour_standard);
}
.skin-sup .comments-list .commentBox .autoCommentBoxLeft {
	padding: 0;
	margin: 0;
	border-bottom: solid 1px grey;
}
.skin-sup .comments-list .commentBox .autoCommentBoxRight {
	padding: 0;
	margin: 0;
	border-bottom: solid 1px var(--main_colour_standard);
}
.skin-sup .comments-list .commentBox .autoComment {
	font-size: 0.875rem;
	color: grey;
	font-family: 'Lato', Helvetica, Roboto, Arial, sans-serif;
}
.skin-sup .commentSubmitBox {
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 0.5rem;
	padding-bottom: 0;
}
.skin-sup .commentSendButton.button {
	background-color: var(--main_colour_standard);
	padding: 1rem;
	margin: 0;
	line-height: inherit;
}
.skin-sup .commentSendButton.button.disabled {
	background-color: var(--off_white_2);
	pointer-events: none;
}
.skin-sup .comments-submit .commentSpacer {
	border-top: solid 1px var(--off_white_2);
}
.skin-sup .commentSubmitBox .release-switcher,
.skin-sup .commentSubmitBox .hold-switcher {
	float: right;
}
.skin-sup .commentSubmitBox .release-switcher.hide,
.skin-sup .commentSubmitBox .hold-switcher.hide,
.skin-sup .commentSubmitBox .flag-mail.hide {
	display: none;
	float: right;
}
.skin-sup .commentSubmitBox .release-switcher .switchLabel,
.skin-sup .commentSubmitBox .hold-switcher .switchLabel {
	font-size: 1rem;
	vertical-align: super;
}
.skin-sup .commentSubmitBox .operativeSection {
	padding-left: 0;
	padding-right: 0;
	float: left;
}
.skin-sup .commentSubmitBox .flag-mail {
	float: right;
}
.skin-sup .commentSubmitBox .flag-mail .check-box{
	font-size: 1.6rem;
	vertical-align: super;
	cursor: pointer;
}
.skin-sup .commentSubmitBox .flag-mail .check-box.fa-check-on{
	color: var(--main_colour_standard);
}
.skin-sup .commentSubmitBox .flag-mail .sendMailLabel{
	font-size: 1rem;
	vertical-align: top;
}
.skin-sup .commentSubmitBox .switch input:checked + label {
	background: var(--main_colour_standard);
}
.skin-sup .comments-subnav .purchaseOrderStatus {
	font-size: 0.875rem;
	padding-top: 0.25rem;
	padding-right: 1rem;
	margin-top: 0.25rem;
	margin-left: 0;
	color: white;
}
.skin-sup .comments-subnav .orderStatusIcon {
	font-size: 2rem;
}
.skin-sup .comments-subnav .orderException {
	font-size: 0.875rem;
	vertical-align: text-bottom;
}
.skin-sup .comments-subnav .orderStatus {
	font-size: 0.875rem;
	vertical-align: text-bottom;
	text-transform: capitalize;
}

/* Shipments */
.skin-sup .shipments-subnav {
	background-color: var(--main_colour_standard);
	font-size: 0.875rem;
	font-family: 'Lato', Helvetica, Roboto, Arial, sans-serif;
}
.skin-sup .shipments-subnav .createShipment.button {
	background-color: var(--main_colour_dark);
	color: white;
}
.skin-sup .shipments-subnav .createShipment.button.disabled,
.skin-sup .shipments-subnav .createShipment.button.disabled:hover {
	background-color: var(--off_white_2);
	pointer-events: none;
}
.skin-sup .shipments-subnav .createShipment.button:hover {
	background-color: var(--main_colour_dark);	
}
.skin-sup .shipments-subnav .createShipment.button:active {
	color: var(--main_colour_light);
}
.skin-sup .shipments-subnav .createShipment.button span {
	font-size: 0.875rem;
}
.skin-sup .ship-order {
	font-family: 'Lato', Helvetica, Roboto, Arial, sans-serif;
	font-size: 0.875rem;
}
.skin-sup .orders-list .orderBox {
	padding: 0;
}
.skin-sup .orders-list .orderBox .shipment-header {
	padding-left: 1rem;
	background-color: var(--off_white_1);
	height: 2.75rem;
	line-height: 2.75rem;
}
.skin-sup .orders-list .orderBox .shipment-header .shipments-title {
	border-left: solid 2px white;
}
.skin-sup .orders-list .orderBox .shippingMethodBox,
.skin-sup .orders-list .orderBox .trackingNoBox {
	padding-right: 0;
}
.skin-sup .orders-list .ship-order .shipment-order .items {
	padding-left: 1rem;
}
.skin-sup .orders-list .ship-order .addShipment.button {
	background-color: var(--main_colour_light);
	text-transform: uppercase;
}
.skin-sup .orders-list .ship-order .addShipment.button.disabled {
	background-color: var(--off_white_2);
	pointer-events: none;
}
.skin-sup .orders-list .ship-order .addShipment.button:hover {
	background-color: var(--main_colour_dark);	
}

/* Monitor */
.skin-sup .monitor-subnav {
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	height: 3.75rem;
	background-color: var(--main_colour_standard);
	color: white;
}
.skin-sup .monitorSectionTitle{
	background-color: var(--off_white_2);
	height: 2.75rem;
	line-height: 2.75rem;
	padding-left: 1rem;
	text-transform: uppercase;
}
.skin-sup .monitorSectionTitle .title,
.skin-sup .monitorSectionTitle .title-count {
	color: var(--off_black_3);
	font-size: 0.875rem;
	font-family: 'Lato', Helvetica, Roboto, Arial, sans-serif;
}
.skin-sup .monitorSectionTitle .title-count {
	float: right;
}
.skin-sup .monitorSectionTitle .title-icon {
	color: var(--off_black_3);
	font-size: 1.5rem;
	float: right;
	padding-right: 2rem;
	padding-left: 1rem;
	padding-top: 0.6rem;
}	

/* SECURITY */
.skin-sup .groups-management-subnav {
	background-color: var(--main_colour_standard);	
}
.skin-sup .groups-management-content {
	padding-left: 1rem;
}
.skin-sup .groups-management-buttons,
.skin-sup .groups-management-group-side {
	padding-left: 0;
}
.skin-sup .groups-management-buttons {
	padding-right: 0;
}
.skin-sup .groups-management-user-side {
	font-family: 'Lato', Helvetica, Roboto, Arial, sans-serif;
    color: var(--off_black_3);
    padding: 0;
}
.skin-sup .groups-management-user-side .user-box {
    background-color: var(--off_white_1);
    padding: 1rem;
}
.skin-sup .groups-management-user-side .user-groups-box,
.skin-sup .groups-management-user-side .user-access-permission-box {
    background-color: var(--off_white_1);
    padding-left: 1rem;
    overflow: hidden;
}
.skin-sup .groups-management-user-side .user-access-permission {
	top: 30%;
}
.skin-sup .groups-management-user-side .user-access-permission .check-box.fa-check-on {
	color: var(--main_colour_standard);
}
.skin-sup .groups-management-user-side .user-box .user-info-id,
.skin-sup .groups-management-user-side .user-box .user-info-name {
	border-bottom: solid 1px var(--off_white_3);
	padding-bottom: 0.25rem;
    padding-top: 0.25rem;
}
.skin-sup .groups-management-user-side .user-box .user-info-id,
.skin-sup .groups-management-user-side .user-box .user-info-name,
.skin-sup .groups-management-user-side .user-box .user-info-surname {
	padding: 0.25rem;
}
.skin-sup .groups-management-user-side .user.id-value,
.skin-sup .groups-management-user-side .user.name-value,
.skin-sup .groups-management-user-side .user.surname-value {
    line-height: 1.5rem;
    font-size: 1.2rem;
    color: var(--main_colour_standard);
    text-align: end;
    float: right;
}
.skin-sup .groups-management-user-side .user.id-label,
.skin-sup .groups-management-user-side .user.name-label,
.skin-sup .groups-management-user-side .user.surname-label,
.skin-sup .groups-management-user-side .user.groups-label {
    line-height: 1.5rem;
    font-size: 1rem;
    color: var(--main_colour_standard);
    padding-left: 0;
}
.skin-sup .groups-management-user-side .user-box,
.skin-sup .groups-management-user-side .user-groups-box {
    margin-bottom: 0.5rem;
}
.skin-sup .groups-management-user-side .user-icon-box {
	padding: 0rem;
}
.skin-sup .groups-management-user-side .user-info-box {
	padding: 0rem 0rem 0rem 1rem;
}
.skin-sup .groups-management-user-side .user-info-groups-box {
	overflow-y: auto;
    height: inherit;
   	padding: 1rem 0.65rem 1rem 0.65rem;
}
.skin-sup .groups-management-user-side .user-icon-box .user-icon,
.skin-sup .groups-management-user-side .user-icon-groups-box .user-icon {
	font-size: 2.25rem;
	color: var(--off_black_3);
}
.skin-sup .groups-management-user-side .user-icon-groups-box {
	padding: 1rem 0rem 0rem 0rem;
}
.skin-sup .role-input-box .role-input,
.skin-sup .profile-input-box .profile-input,
.skin-sup .spacer-input-box {
    height: 2.5rem;
}
.skin-sup .spacer-button-box {
	height: 0.05rem;	
}
.skin-sup .spacer-input-box,
.skin-sup .spacer-button-box {
	margin: 0.25rem;
}
.skin-sup .role-input-box .role-input,
.skin-sup .profile-input-box .profile-input {
	background-color: var(--off_white_1);
	border-left: none;
	border-top: none;
	border-right: none;
	border-bottom: solid 1px var(--off_white_3);
}
.skin-sup .role-input-box .yui3-aclist,
.skin-sup .role-input-box .yui3-aclist-content,
.skin-sup .role-input-box .yui3-aclist-list,
.skin-sup .profile-input-box .yui3-aclist,
.skin-sup .profile-input-box .yui3-aclist-content,
.skin-sup .profile-input-box .yui3-aclist-list {
	font-family: 'Lato', Helvetica, Roboto, Arial, sans-serif;
	color: var(--off_black_3);
	background-color: var(--off_white_1);
	-webkit-box-shadow: none;
	box-shadow: none;
	border: none;
}
.skin-sup .user-group-row:hover,
.skin-sup .role-input-box .yui3-aclist-list .yui3-aclist-item-hover,
.skin-sup .profile-input-box .yui3-aclist-list .yui3-aclist-item-hover {
	background-color: var(--main_colour_light);
	color: var(--off_black_3);
}
.skin-sup .user-group-row.selected,
.skin-sup .role-input-box .yui3-aclist-list .yui3-aclist-item-active,
.skin-sup .profile-input-box .yui3-aclist-list .yui3-aclist-item-active {
	background-color: var(--main_colour_light);
	color: var(--off_black_3);
}
.skin-sup .role-input-box .yui3-aclist-list,
.skin-sup .profile-input-box .yui3-aclist-list {
	padding-left: 0.65rem;
	padding-right: 0.65rem;
}
.skin-sup .sce-roles-management-add.button,
.skin-sup .sce-groups-management-remove.button,
.skin-sup .sce-profiles-management-add.button {
	height: inherit;
	width: inherit;
    border-radius: 0;
    padding: 0;
    font-size: .875rem;
	background-color: var(--main_colour_light);
    text-transform: uppercase;
}
.skin-sup .sce-roles-management-add.button.disabled,
.skin-sup .sce-groups-management-remove.button.disabled,
.skin-sup .sce-profiles-management-add.button.disabled {
	background-color: var(--off_white_2);
    text-transform: uppercase;
}
.skin-sup .sce-roles-management-add .add,
.skin-sup .sce-profiles-management-add .add,
.skin-sup .sce-groups-management-remove .remove  {
	font-size: 1.125rem;
	position: absolute;
	top: 43%;
	display: table;
	padding-left: 0.2rem;
}
.skin-sup .button-remove-container {
	padding: 0;
	margin-left: 0.5rem;
}
.skin-sup .button-add-container  {
	padding: 0;
	margin-right: 0.5rem;
}

/* FOUNDATION */
/* Default header styles */
.skin-sup h1, .skin-sup h2, .skin-sup h3,
.skin-sup h4, .skin-sup h5, .skin-sup h6 {
	font-family: 'Lato', Helvetica, Roboto, Arial, sans-serif;
	font-weight: normal;
	font-style: normal;
}
.skin-sup h1 small, .skin-sup h2 small, .skin-sup h3 small,
.skin-sup h4 small, .skin-sup h5 small, .skin-sup h6 small {
	font-family: 'Lato', Helvetica, Roboto, Arial, sans-serif;
	font-size: 60%;
}

/* Default paragraph styles */
.skin-sup p {
	font-family: 'Lato', Helvetica, Roboto, Arial, sans-serif;
	font-weight: normal;
	font-size: 1rem;
	line-height: 1.6;
}
.skin-sup p.lead {
	font-size: 1.21875rem;
}
.skin-sup p aside {
	font-size: 0.875rem;
	font-style: italic;
}

/* Default body styles */
body.skin-sup  {
	font-family: 'Lato', Helvetica, Roboto, Arial, sans-serif;
}

/* Default select styles */
.skin-sup select {
	font-family: 'Lato', Helvetica, Roboto, Arial, sans-serif;
	background-color: white;
	color: var(--off_black_3);
}
.skin-sup select:disabled {
	background-color: var(--off_white_2);
}

/* Default input styles */
.skin-sup input {
	box-shadow: none;
	color: var(--off_black_3);
}

/* Button */
.skin-sup .button {
	background-color: var(--main_colour_dark);
	border-radius: 6px;
}
.skin-sup .button:hover {
	background-color: var(--main_colour_light);
}
.skin-sup .button:active {
	background-color: white;
	color: var(--main_colour_light);
}

/* table */
.skin-sup table thead {
	text-transform: uppercase;
}
    
/* top-bar */
.skin-sup .top-bar .top-bar-section ul li:hover:not(.has-form) >a.disabled {
	background: var(--main_colour_standard);
	color: var(--main_colour_light);
}
.skin-sup .top-bar a.disabled {
    color: var(--main_colour_light);
}
.sce-mq-small .skin-sup .top-bar a.disabled {
	display: none;
}
.skin-sup .top-bar-section .has-dropdown >a:after {
	top: 50%;
}
.skin-sup .top-bar {
	background: var(--main_contrast_standard);
}
.skin-sup .top-bar-section li:not(.has-form) {
	background: var(--main_contrast_standard);
}
.skin-sup .top-bar-section li:not(.has-form) a:not(.button) {
	background: var(--main_contrast_standard);
}
.skin-sup .top-bar-section li.active:not(.has-form) a:not(.button) {
	color: white;
	background: var(--main_contrast_light_2);
}
.skin-sup .top-bar-section > ul > .divider,
.skin-sup .top-bar-section > ul > [role="separator"] {
	border-right-color: var(--main_contrast_dark);
}
.skin-sup header .top-bar-section li:not(.has-dropdown) > a{
	cursor: default;
}
.skin-sup header .top-bar-section li.has-dropdown:not(.has-form) a:not(.button):hover {
	background-color: var(--main_contrast_light_2);
	background: var(--main_contrast_light_2);
}
.skin-sup .top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
	color: white;
	background: var(--main_contrast_standard);
}
.skin-sup .top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button) {
	color: white;
	background-color: var(--main_contrast_light_2);
	background: var(--main_contrast_light_2);
}

/* MODULE SELECTION */
/* $darker-gray: var(--main_contrast_dark); */
/* $module-bg-color: $darker-gray; */
.sce-mq-medium-up .skin-sup .top-bar-section .dropdown.sideup-topbar-modules-list {
	height: 500px !important;
	height: calc(100vh - 4.8125rem) !important;    /* header (2.8125) - footer(2) */
	background-color: rgba(29,35,38,0.9);
}
.skin-sup .top-bar-section .columns li.has-dropdown.not-click:hover > .sideup-topbar-modules-header {
	background-color: var(--main_contrast_dark);
}
.skin-sup .top-bar-section .columns li.has-dropdown.not-click .sideup-topbar-modules-header:hover {
	background-color: var(--main_contrast_dark);
}
.sce-mq-medium-up .skin-sup .top-bar-section .sideup-topbar-modules-header {
	text-transform: uppercase;
	font-weight: bold;
}
.skin-sup .top-bar-section .dropdown.sideup-topbar-modules-list {
	border-top: 1px solid var(--main_contrast_extra_light);
}
.skin-sup .top-bar-section .dropdown.sideup-topbar-modules-list li:not(.has-form):not(.active) > a:not(.button) {
	background-color: var(--main_contrast_dark);
	color: white;
	border-bottom: 1px solid var(--main_contrast_extra_light);
}
.skin-sup .top-bar-section .dropdown.sideup-topbar-modules-list li:not(.has-form):not(.active):hover > a:not(.button) {
	background-color: var(--main_contrast_light_2);
	border-left: solid 4px var(--main_colour_standard);
}
.skin-sup .top-bar .sceWebsocketMenu .fa-envelope, 
.skin-sup .top-bar .sceWebsocketMenu .fa-bell {
	font-size: 1.25rem;
	color: var(--main_colour_dark);
	vertical-align: text-top;
}
.skin-sup .top-bar-section ul li > a,
.skin-sup .top-bar-section ul li > div {
	color: white;
	font-family: 'Lato', Helvetica, Roboto, Arial, sans-serif;
}
.skin-sup .top-bar-section ul li > a {
	height: 2.8125rem;
}

/* Dropdown menu */
.skin-sup .top-bar-section .dropdown li:hover,
.skin-sup .top-bar-section .dropdown li:focus {
	background: var(--main_contrast_standard);
}

/* side-nav */
.skin-sup .side-nav {
	font-family: 'Lato', Helvetica, Roboto, Arial, sans-serif;
	padding: 0;
}
.skin-sup .side-nav li {
	margin: 0 0 0 0;
	font-size: 0.875rem;
	text-transform: capitalize;	
}
.skin-sup .side-nav li a{
	border-bottom: solid 1px var(--main_contrast_dark);
}
.skin-sup .side-nav li.divider {
	margin: 0 0 0 0;
	font-size: 0.875rem;
	border: none;
}
.skin-sup .side-nav li a:not(.button) {
	padding: 0.4375rem 0.5rem 0.4375rem 1.5em;
	color: white;
}
.sce-mq-medium .skin-sup .side-nav li a:not(.button) {
	padding-left: 1em;
}

/* links in accordion */
.skin-sup .content .side-nav li a:not(.button) {
	padding: 0.4375rem 0.5rem 0.4375rem 2.5em;
}
.sce-mq-medium .skin-sup .content .side-nav li a:not(.button) {
	padding-left: 2em;
}

.skin-sup .side-nav li a:not(.button):hover {
/* Enable once active is managed */
/* .skin-sup .side-nav li a:not(.button):focus */
	background: var(--main_contrast_light_2);
	/* FIXME: to be removed once active works */
	border-left: solid 4px;
	border-left-color: var(--main_colour_standard);
}
/* FIXME: remove comments once active works */
/* .skin-sup .side-nav li a:not(.button):active {
	background: var(--main_contrast_light_2);
	border-left-style: solid;
	border-color: var(--main_colour_light);
} */

/* Labels */
.skin-sup .label {
	font-weight: normal;
	font-family: 'Lato', Helvetica, Roboto, Arial, sans-serif;
	text-align: center;
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
	display: inline-block;
	position: relative;
	margin-bottom: auto;
	padding: 0.25rem 0.5rem 0.25rem;
	font-size: 0.6875rem;
	background-color: white;
	color: var(--main_colour_standard);
}
.skin-sup .label.alert {
	background-color: var(--main_colour_light);
	color: white;
}

/* Tabs */
.skin-sup .tabs dd.active a {
  color: white;
  background-color: var(--main_colour_dark);
}

/* Anchor */
.skin-sup a:not(.button) {
  color: var(--main_colour_standard);
}

/* Scrollbars style */
#sce-app-nav-list::-webkit-scrollbar-track {
	border-radius: 5px;
	box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: var(--main_contrast_light_1);
}
#sce-app-nav-list::-webkit-scrollbar {
    background-color: transparent;
    width: 3px;
    height: 3px;
}
#sce-app-nav-list::-webkit-scrollbar-thumb {
	border-radius: 5px;
	box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: aliceblue;
}
#sce-app-nav-list:hover::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
.skin-sup .sce-app-nav .accordion .accordion-navigation > a, .skin-sup .sce-app-nav .accordion dd > a {
    border-left: 4px solid transparent;
}