/* Form Validation List Items */

.o-form-invalidlist {
	background-color:red;
	display:inline-block;
	padding: 0px 10px;
	margin: 0px 5px 5px 0px;
	vertical-align: baseline;
 	border-radius: 4px;
	line-height: 20px;
	list-style: none;
}

.o-form-invalidlist-title {
	background-color: none;
	color: red;
	font-weight: bold;
	display:inline-block;
	padding: 0px 10px;
	margin: 0px 5px 5px 0px !important;
	vertical-align: middle;
 	border-radius: 4px;
	line-height: 20px;
	list-style: none;
}

.o-form-invalidlist-img {
	background-color: red;
	padding: 2px;
	border-radius: 50%;
	vertical-align: middle !important;
	margin: 0px 5px 0px 0px;
	width: 14px;
	height: 14px;
}

/* Form Contact Buttons (at the top) */

.c-contactform-topbtn {
padding: 2px !important;
padding-right: 5px !important;
margin-left: 5px;
height: 10px !important;
line-height: 12px;
}

/* Some extra styling for the Tab Status Bar buttons / list items */

/* Don't use this one
.c-tabstatusbar-list {
	background: linear-gradient(0deg, rgba(240,240,240,1) 0%, rgba(255,255,255,1) 100%);
	padding: 4px;
}
*/

.c-tabstatusbar-list ul li {
padding: 4px 10px !important;
margin-bottom: 0px !important;
margin: 4px 4px 0px 0px !important;
}

.c-tabstatusbar-list-errors ul li {
padding: 4px 10px !important;
}

/** FORM STYLES **/

.tab-content input, select, textarea {
	border: 2px solid rgba(0,0,0,0.1) !important;
	margin-bottom: 2px;
	padding: 2px;
	border-radius: 5px;
}

.formfield {
	border: 2px solid rgba(0,0,0,0.1) !important;
	margin-bottom: 2px;
	padding: 2px;
	height: 23px;
	border-radius: 5px;
	background-color: #fff;
}

.c-listfind-container input, .c-listfind-container select, .c-listfind-container textarea  {
	border: 2px solid rgba(0,0,0,0.1) !important;
	margin-bottom: 6px;
	margin-right: 8px;
	padding: 2px;
	height: 18px;
	border-radius: 5px;
	background-color: #fff;
}

.c-listfind-container select {
	height: 26px;
	width: 75px;
	max-width: 150px;
	padding: 0px;
}

.task-select {
	border: 2px solid rgba(0,0,0,0.1) !important;
	margin-bottom: 2px;
	padding: 2px;
	height: 23px;
}

/*
.tab-content .formbutton {
	border: 1px solid rgba(0,0,0,0.1) !important;
	border-top: none !important;
	padding-left: 8px;
	padding-right: 8px;
}
*/

.formselect {
  margin-bottom: 4px !important;
  margin-top: 4px !important;
  margin: 4px !important;
  background-color: #FCFCFC;
  border-radius: 4px;
}

.tab-content select {
	height: 28px !important;
}

.tab-content input:invalid, select:invalid, textarea:invalid {
  border: solid #F88379 2px !important;
}


.tab-content input:required:valid, select:required:valid, textarea:required:valid {
    border: solid #CCC 2px !important;
}

.tab-content input:focus, select:focus, textarea:focus,input:required:valid:focus, select:required:valid:focus, textarea:required:valid:focus {
	border: solid #888 2px !important;
}

.c-listfind-container input:invalid, .c-listfind-container select:invalid, .c-listfind-container textarea:invalid {
  border: solid #F88379 2px !important;
}


.c-listfind-container input:required:valid, .c-listfind-container select:required:valid, .c-listfind-container textarea:required:valid {
    border: solid #CCC 2px !important;
}

.c-listfind-container input:focus, .c-listfind-container select:focus, .c-listfind-container textarea:focus,input:required:valid:focus, .c-listfind-container select:required:valid:focus, .c-listfind-container textarea:required:valid:focus {
	border: solid #f8f8f8 2px !important;
}

input.formfield:focus, select.formfield:focus, textarea.formfield:focus,input.formfield:required:valid:focus, select.formfield:required:valid:focus, textarea.formfield:required:valid:focus {
	border: solid #888 2px !important;
}

input.task-select:focus, select.task-select:focus, textarea.task-select:focus,input.task-select:required:valid:focus, select.task-select:required:valid:focus, textarea.task-select:required:valid:focus {
	border: solid #888 2px !important;
}

select.formfield {
	min-width: 22px;
	min-height: 22px !important;
	background-color: #fff;
}

.moduletitle select {
	background-color: #fff;
}

input.formfield {
	background-color: #fff;
}

input:disabled, select:disabled, textarea:disabled {
	background-color: #F5F5F5;
	color: #999;
}

input:read-only, textarea:read-only {
	background-color: #F5F5F5;
	color: #999;
}

/* New Formbutton Styles - Need to remove these from elsewhere */

.formbutton, input.formbutton {
	border: solid 1px rgba(0,0,0,0.2) !important;
	box-shadow:inset 0px 1px 1px 0px rgba(255,255,255,0.4) !important;
	background-color:var(--secondary-hub-colour)!important;
	background-image: linear-gradient(0deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%) !important;
	border-radius:4px !important;
	border:1px solid rgba(0,0,0,0.2) !important;
	display:inline-block !important;
	cursor:pointer !important;
	color:#ffffff !important;
	font-size:12px !important;
	font-weight:bold !important;
	font-family: arial !important;
	line-height: 0.95em !important;
	letter-spacing: 0.5px !important;
	padding: 6px 12px 4px 12px !important;
	text-decoration:none !important;
	text-shadow:0px 1px 1px rgba(0,0,0,0.1) !important;
}

span.formbutton, a.formbutton {
	height: 10px;
}

.formbutton:hover {
  background: none !important;
  background-color: #444 !important;
  color: #fff !important;
}


/* Title Button - For use in Entry Titles */

.c-title-button, input.c-title-button, input[type="submit"].c-title-button, button.c-title-button {
	height: 24px;
	border: solid 1px rgba(0,0,0,0.2) !important;
	box-shadow:inset 0px 1px 1px 0px rgba(255,255,255,0.4) !important;
	background-color:var(--secondary-hub-colour)!important;
	background-image: linear-gradient(0deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%) !important;
	border-radius:4px !important;
	border:1px solid rgba(0,0,0,0.2) !important;
	display:inline-block !important;
	cursor:pointer !important;
	color:#ffffff !important;
	font-size:12px !important;
	font-weight:bold !important;
	font-family: arial !important;
	line-height: 0.95em !important;
	letter-spacing: 0.5px !important;
	padding:6px 8px !important;
	text-decoration:none !important;
	text-shadow:0px 1px 1px rgba(0,0,0,0.1) !important;
}

span.c-title-button, a.c-title-button {
	height: auto !important;
	padding-bottom: 5px !important;
}

/*
input.c-title-button, input[type="submit"].c-title-button, button.c-title-button {
}
*/

.c-title-button:hover, input.c-title-button:hover, input[type="submit"].c-title-button:hover, button.c-title-button:hover {
	text-decoration: none;
	background: linear-gradient(0deg, rgba(240,240,240,0.1) 0%, rgba(255,255,255,0.2) 100%) !important;
	background-color: #333 !important;
	border: solid 1px #222 !important;
}

a.c-title-button:link, a.c-title-button:visited, input.c-title-button, input[type="submit"].c-title-button, button.c-title-button {
	color: #fff !important;
	text-decoration: none !important;
}

a.c-title-button:hover, a.c-title-button:active, input.c-title-button:hover, input[type="submit"].c-title-button:hover, button.c-title-button:hover  {
	color: #fff !important;
	text-decoration: none !important;
}

a.c-title-button i {
	color: #fff !important;
}

a.c-title-button:hover i, input.c-title-button:hover i, input[type="submit"].c-title-button:hover i, button.c-title-button:hover i {
	color: #fff !important;
}

.c-title-button:disabled {
	background: none !important;
	background-color: #F5F5F5 !important;
	color: #999 !important;
	border: solid 1px #ccc;
}

.c-title-button:disabled, input.c-title-button:disabled {
	background: none !important;
	background-color: #F5F5F5 !important;
	color: #999 !important;
	border: solid 1px #ccc;
}

.c-title-button:disabled:hover, input.c-title-button:disabled:hover {
	background: none !important;
	background-color: #F5F5F5 !important;
	color: #999 !important;
	border: solid 1px #ccc !important;
}

/* Entry Area Button - Smaller than Title Button */

.c-entry-button, input.c-entry-button, input[type="submit"].c-entry-button, button.c-entry-button {
	height: 24px;
	border: solid 1px rgba(0,0,0,0.2) !important;
	box-shadow:inset 0px 1px 1px 0px rgba(255,255,255,0.4) !important;
	background-color:var(--secondary-hub-colour)!important;
	background-image: linear-gradient(0deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%) !important;
	border-radius:4px !important;
	border:1px solid rgba(0,0,0,0.2) !important;
	display:inline-block !important;
	cursor:pointer !important;
	color:#ffffff !important;
	font-size:12px !important;
	font-weight:bold !important;
	font-family: arial !important;
	line-height: 0.95em !important;
	letter-spacing: 0.5px !important;
	padding:6px 8px !important;
	text-decoration:none !important;
	text-shadow:0px 1px 1px rgba(0,0,0,0.1) !important;
}

span.c-entry-button, a.c-entry-button {
	height: auto !important;
	padding-bottom: 5px !important;
}

.c-entry-button:hover, input.c-entry-button:hover, input[type="submit"].c-entry-button:hover, button.c-entry-button:hover {
text-decoration: none;
background: linear-gradient(0deg, rgba(240,240,240,0.1) 0%, rgba(255,255,255,0.2) 100%) !important;
background-color: #333 !important;
border: solid 1px #222 !important;
}

a.c-entry-button:link, a.c-entry-button:visited, input.c-entry-button, input[type="submit"].c-entry-button, button.c-entry-button {
color: #fff !important;
text-decoration: none !important;
}

a.c-entry-button:hover, a.c-entry-button:active, input.c-entry-button:hover, input[type="submit"].c-entry-button:hover, button.c-entry-button:hover  {
color: #fff !important;
text-decoration: none !important;
}

a.c-entry-button i {
color: #fff;
}

a.c-entry-button:hover i, input.c-entry-button:hover i, input[type="submit"].c-entry-button:hover i, button.c-entry-button:hover i {
color: #fff !important;
}

.c-entry-button:disabled, input.c-entry-button:disabled {
	background: none !important;
	background-color: #F5F5F5 !important;
	color: #999 !important;
	border: solid 1px #ccc;
}

.c-entry-button:disabled:hover, input.c-entry-button:disabled:hover {
	background: none !important;
	background-color: #F5F5F5 !important;
	color: #999 !important;
	border: solid 1px #ccc !important;
}


/* Warning / RED Button */
.c-warning-button, input.c-warning-button, input[type="submit"].c-warning-button, button.c-warning-button {
  height: 24px !important;
	border: solid 1px #a50000 !important;
	box-shadow:inset 0px 1px 1px 0px rgba(255,255,255,0.4) !important;
	background-color: red !important;
	background-image: linear-gradient(0deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%) !important;
	border-radius:4px !important;
	border:1px solid rgba(0,0,0,0.2) !important;
	display:inline-block !important;
	cursor:pointer !important;
	color:#ffffff !important;
	font-size:12px !important;
	font-weight:bold !important;
	font-family: arial !important;
	line-height: 0.95em !important;
	letter-spacing: 0.5px !important;
	padding:6px 8px !important;
	text-decoration:none !important;
	text-shadow:0px 1px 1px rgba(0,0,0,0.1) !important;
}

span.c-warning-button, a.c-warning-button {
	height: auto !important;
	padding-bottom: 5px !important;
	width: auto !important;
}

a.c-warning-button span {
	padding: 4px 6px 4px 6px !important;
}

/*
input.c-warning-button, input[type="submit"].c-warning-button, button.c-warning-button {
}
*/

.c-warning-button:hover, input.c-warning-button:hover, input[type="submit"].c-warning-button:hover, button.c-warning-button:hover {
text-decoration: none;
background: linear-gradient(0deg, rgba(240,240,240,0.1) 0%, rgba(255,255,255,0.2) 100%) !important;
background-color: #333 !important;
border: solid 1px #222 !important;
}

a.c-warning-button:link, a.c-warning-button:visited, button.c-warning-button {
color: #fff !important;
text-decoration: none !important;
}

a.c-warning-button:hover, a.c-warning-button:active, input.c-warning-button:hover, input[type="submit"].c-warning-button:hover, button.c-warning-button:hover {
color: #fff !important;
text-decoration: none !important;
}

a.c-warning-button i {
color: #fff;
}

a.c-warning-button:hover i, input.c-warning-button:hover i, input[type="submit"].c-warning-button:hover i, button.c-warning-button:hover i {
color: #fff;
}

.c-warning-button:disabled, input.c-warning-button:disabled {
	background: none !important;
	background-color: #F5F5F5 !important;
	color: #999 !important;
	border: solid 1px #ccc;
}

.c-warning-button:disabled:hover, input.c-warning-button:disabled:hover {
	background: none !important;
	background-color: #F5F5F5 !important;
	color: #999 !important;
	border: solid 1px #ccc !important;
}


/* Find Area Button (over grey areas) - Smaller than Title Button - White */

.c-find-button, input.c-find-button, input[type="submit"].c-find-button, button.c-find-button {
	background: linear-gradient(0deg, rgba(240,240,240,0.1) 0%, rgba(255,255,255,0.2) 100%) !important;
	background-color: #fff !important;
	border: solid 1px #ededed !important;
	font-family: "Open Sans", "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
	font-weight: bold;
	display: inline-block;
	color: var(--primary-hub-colour) !important;
	height: auto !important;
	padding: 2px 4px !important;
	cursor: pointer;
	border-radius: 4px !important;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	margin: 2px 4px;
}

input.c-find-button, input[type="submit"].c-find-button, button.c-find-button {
padding-top: 2px !important;
}

.c-find-button:hover, input.c-find-button:hover, input[type="submit"].c-find-button:hover, button.c-find-button:hover {
text-decoration: none;
background: linear-gradient(0deg, rgba(240,240,240,0.1) 0%, rgba(255,255,255,0.2) 100%) !important;
background-color: #fff !important;
border: solid 1px #ededed !important;
-webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
}

a.c-find-button:link, a.c-find-button:visited, input.c-find-button, input[type="submit"].c-find-button, button.c-find-button {
font-weight: bold !important;
color: var(--primary-hub-colour) !important;
text-decoration: none !important;
}

a.c-find-button:hover, a.c-find-button:active, input.c-find-button:hover, input[type="submit"].c-find-button:hover, button.c-find-button:hover  {
color: #333 !important;
text-decoration: none !important;
}

a.c-find-button i, .c-find-button i {
color: var(--primary-hub-colour) !important;
float: left;
margin-right: 2px;
margin-top: 3px;
}

a.c-find-button:hover i, input.c-find-button:hover i, input[type="submit"].c-find-button:hover i, button.c-find-button:hover i {
color: #333 !important;
}


/* Icon / Plain Text Buttons - removes button background, can also be used for plain text buttons */
.c-icon-button {
	background:none !important;
	border: 0px !important;
	color: var(--secondary-hub-colour);
	cursor: pointer;
}

.c-icon-button:hover {
	color: #222 !important;
}

/* Form Labels */

/* For labels appearing above form fields e.g. RebateSFT */
.c-form-label {
	display:block;
	margin-bottom: 4px;
	margin-left: 2px;
	color: #333;
}

/* For labels that are in their own column - currently most commonly used */
.c-form-tdlabel {
	background-color: #f5f5f5 !important;
	background-image: linear-gradient(90deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
}

/* Log Events Link */

.c-entry-logeventslink {
	position:relative;
}

 .c-entry-logeventslink a:link span, .c-entry-logeventslink a:visited span {
	color: #fff !important;
  }

  .c-entry-logeventslink a span:hover, .c-entry-logeventslink a:active span {
	color: #fff !important;
	background-color: #333 !important;
  }

  .c-entry-logeventslink span {
	  position:absolute;
	  display:block;
	  background-color: #ccc;
	  width:10px;
	  right:0px;
	  margin-right: -7px;
	  margin-top: -9px;
	  border-bottom-left-radius: 10px;
	  font-size: 8px;
	  padding: 3px;
	  padding-left: 6px;
	  padding-bottom: 3px;
	  padding-top: 2px;
	  text-align: center;
  }


/* AUTOCOMPLETE Dropdown */

.o-autocomplete {
    background-color: rgb(0,0,0,0.9);
    color: #fff;
    padding: 4px;
    overflow-y: scroll;
    margin-left: 4px;
    margin-bottom: 4px;
    width: 240px !important;
  }

.o-autocomplete::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.1);
  background-color: #efefef;
  border-left: 1px solid rgb(0,0,0,0.2);
}

.o-autocomplete::-webkit-scrollbar
{
	width: 8px;
  background-color: #F5F5F5;
}

.o-autocomplete::-webkit-scrollbar-thumb
{
	background-color: var(--secondary-hub-colour);
	border: 1px solid var(--primary-hub-colour);
}

.o-autocomplete div {
padding: 4px 6px 4px 6px;
cursor: pointer;
}

.o-autocomplete div:hover {
background-color: rgb(255,255,255,1);
color: #333;
border-radius: 4px;
}
/* Default HTML5 Date Picker */

/*
::-webkit-datetime-edit { padding: 1em; }
::-webkit-datetime-edit-fields-wrapper { background: silver; }
::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: orange; }
*/

/* Tooltips */

/* List Find / Search Buttons */

.c-listfind-buttons .c-title-button, .c-listfind-buttons .c-warning-button {
	width: 80px;
	min-width: 80px;
	margin-left: 2px;
	margin-right: 2px;
	margin-bottom: 2px;
	display: inline-block;
}

/* Flex Form - Containers */

.c-form-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: stretch;
}

td .c-form-row:first-child {
	margin-top: -4px;
}

.c-form-item {
	width: 230px;
	margin-right: 10px;
	margin-top: 4px;
}

.c-form-item .formfield, .c-form-item input, .c-form-item textarea,  .c-form-item .fs-wrap {
	width: 220px !important;
}

.c-form-item select {
	width: 228px !important;
}

.c-form-item input[type="radio"],
.c-form-item-large input[type="radio"],
.c-form-item-xlarge input[type="radio"],
.c-form-item-small input[type="radio"] {
	width: auto !important;
}

.c-form-item-large {
	width: 510px;
	margin-right: 20px;
	margin-top: 4px;
}

.c-form-item-large .formfield, .c-form-item-large input, .c-form-item-large textarea, .c-form-item-large .fs-wrap {
	width: 490px !important;
}

.c-form-item-large select {
	width: 498px !important;
}

.c-form-item-xlarge {
	width: 100%;
	margin-right: 20px;
	margin-top: 4px;
}

.c-form-item input[type="radio"],
.c-form-item-large input[type="radio"],
.c-form-item-xlarge input[type="radio"],
.c-form-item-small input[type="radio"],
.c-form-item input[type="checkbox"],
.c-form-item-large input[type="checkbox"],
.c-form-item-xlarge input[type="checkbox"],
.c-form-item-small input[type="checkbox"] {
	width: auto !important;
}

.c-form-item-xlarge .formfield, .c-form-item-xlarge input, .c-form-item-xlarge select, .c-form-item-xlarge textarea,  .c-form-item-xlarge .fs-wrap {
	width: 100% !important;
}

.c-form-item-small {
	width: 105px;
	margin-right: 20px;
	margin-top: 4px;
}

.c-form-item-small .formfield, .c-form-item-small input, .c-form-item-small select, .c-form-item-small textarea, .c-form-item-small .fs-wrap {
	width: 100px !important;
}

.c-form-item-xsmall {
	width: 55px;
	margin-right: 20px;
	margin-top: 4px;
}

.c-form-item-xsmall .formfield, .c-form-item-xsmall input, .c-form-item-xsmall select, .c-form-item-xsmall textarea, .c-form-item-xsmall .fs-wrap {
	width: 50px !important;
}

.c-form-item-multi {
	min-width: 230px;
	max-width: 100%;
	margin-right: 10px;
	margin-top: 4px;
}

.c-form-item-multi .formfield, .c-form-item-multi input, .c-form-item-multi select, .c-form-item-multi textarea,  .c-form-item-multi .fs-wrap {
	width: auto !important;
}



/* SlimSelect Modifier Styles */

.c-listfind-fields .ss-main.formfield {
	border: none !important;
	background-color: transparent !important;
	padding:0px !important;
}

.c-listfind-fields .ss-main.formfield .ss-content {
	margin-left: 0px;
}

.c-listfind-fields .ss-main.formfield .ss-search {
	margin:8px;
}

.ss-main .ss-multi-selected, .ss-main .ss-single-selected {
  border-top: 2px solid #AAAFB4 !important;
  border-right: 2px solid #DCE1E6 !important;
  border-bottom: 2px solid #E1EBF0 !important;
  border-left: 2px solid #E1E1EB !important;
  margin-top: 0px !important; /* Used to be 4px */
  margin-bottom: 0px !important; /*used to be 4px */
	margin-left: 0px !important; /* Used to be 4px */
	margin-bottom: 6px !important;
	margin-right: 20px !important; /* This one doesn't work, style below does the job */
	min-height: 30px !important;
}

.ss-main .ss-multi-selected {
	min-height: 28px !important;
}

.ss-main .ss-single-selected {
	min-height: 27px !important;
}

.ss-main.formfield {
	margin-right: 8px !important;
}

.ss-value {
	padding: 4px !important;
}

.ss-main .ss-multi-selected .ss-add {
	margin: 8px 12px 0 5px !important;
}

.ss-main .ss-single-selected .placeholder {
	padding-left: 4px;
}

/* Note Templates */

.o-notetemplate-container {
	border-radius: 6px;
	padding: 10px !important;
}

.o-notetemplate-header {

}

.o-notetemplate-header-title {
	float: left;
	font-size: 20px;
	padding-top: 6px;
}

.o-notetemplate-header-button {
	float: right;
	padding-bottom: 8px;
}

/* CKEditor - Rich Text Editor - Styles */

.cke_top, .cke_bottom {
  background: var(--light-hub-colour) !important;
  background-image: linear-gradient(0deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.8) 100%) !important;
}

.cke_chrome {
  border: 1px solid rgba(0,0,0,0.3) !important;
}

.cke_toolgroup {
  background: var(--light-hub-colour) !important;
  background-image: linear-gradient(0deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,1) 100%) !important;
  border: 1px solid rgba(0,0,0,0.3) !important;
}

.cke_combo_button {
  background: var(--light-hub-colour) !important;
  background-image: linear-gradient(0deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,1) 100%) !important;
  border: 1px solid rgba(0,0,0,0.3) !important;
}

.cke_button_on {
  background: var(--light-hub-colour) !important;
}

.cke_button:hover, .cke_combo_button:hover {
  background: var(--light-hub-colour) !important;
}

/* END Note Templates */