/**** EXTERNAL FONTS ****/
/*embedded original url for improved caching: https://fonts.googleapis.com/css?family=Bree%20Serif%7COpen%20Sans*/
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(imgs/open-sans-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(imgs/open-sans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/**** RESET ****/
:root { font-size: 13px; /*rem units are relative to this*/ }
* { font-family: "Open Sans", Calibri, sans-serif; -webkit-text-size-adjust: 100%; }
body { color: black; background-color: #F4F6F8; margin: 0; padding: 0; font-size: 13px; /*rem units are relative to this*/ }
tr { vertical-align: top; }
form { margin: 0; }
input, textarea, select, .input-appearance { min-height: 16px; line-height: 16px; border-width: 1px; border-style: solid; border-radius: 3px; border-top-color: #979797; border-left-color: #979797; border-right-color: #D9D9D9; border-bottom-color: #D9D9D9; padding: 4px 1px 5px 3px; font-family: "Open Sans", Calibri, sans-serif; font-size: 1em; background-color: #FFFFFF; }
input:focus, textarea:focus, select:focus { outline: none; border-color: #606060; }
.gm-style div[role="button"]:focus, .gm-style div[role="dialog"]:focus { outline: none; } /*remove outline from clicked markers and infowindows in javascript maps*/
button { font-family: "Open Sans", Calibri, sans-serif; }
select[size] { padding: 0; }
select[size] option { padding: 4px 0 4px 4px; }
input::placeholder, textarea::placeholder, ::placeholder, ::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder { font-family: "Open Sans", Calibri, sans-serif; color: #C0C0C0; }
input[type="text"] { padding: 6px 1px 7px 3px; }
input[type="radio"], input[type="checkbox"] { min-height: auto; }
input[type="radio"]:focus, input[type="checkbox"]:focus { outline: none; }
textarea { overflow-y: auto; resize: none; }
sup { font-size: 70%; }
figure { margin: 0; }
figcaption { font-style: italic; font-size: 90%; color: #808080; }
xmp { font-size: 8pt; font-family: Consolas, monospace; }

/**** PREVENT SCALING WHEN FOCUSSING TEXT BOXES ON MOBILE ****/
@media screen and (max-device-width: 767px) {
  * { font-size: 16px; /*rem units are relative to this, also 16px means input boxes no longer scale on focus, and all other text is consistent in size with inputs*/ }
  input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="password"], textarea { font-size: 16px; }
  .fui-entity-button, .formfield-accessory { line-height: normal!important; }
}

/**** LAYOUT ****/
nav.main::-webkit-scrollbar { width: 0; height: 0; }
nav.main { display: none; width: 5rem; position: fixed; top: 0; left: 0; bottom: 0; padding-bottom: 60px; z-index: 2; background: linear-gradient(180deg, #14BBBB 0%, #14BBBB 5rem, #14264B 30rem, #14264B 100%); overflow-x: hidden; overflow-y: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
nav.main a.close { display: none; }
nav.main > ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: left; clear: both; }
nav.main > ul > li { width: 100%; min-width: 3rem; max-width: 5rem; }
nav.main > ul > li.logo { display: block; font-weight: bold; text-transform: uppercase; margin-bottom: 1rem; padding-bottom: 1px; text-align: center; color: #ececec; background: #303C58; letter-spacing: 0.3ch; width: 100%; height: 5rem; min-height: 5rem; }
nav.main > ul > li.logo span { display: block; height: 100%; background: transparent none no-repeat 20% 50%; }
nav.main > ul > li > h3 { display: block; margin: 3rem 0 0.4rem 0; padding: 0; white-space: nowrap; font-size: 90%; font-weight: bold; text-transform: uppercase; text-align: center; color: #C0C0C0; }
nav.main > ul > li > a { display: flex; align-items: center; height: 5rem; color: #FFFFFF; text-decoration: none; white-space: nowrap; transition: background-color 400ms ease-out; -webkit-tap-highlight-color: rgba(100, 200, 255, 0.6); }
nav.main > ul > li.minor > a { height: 3rem; }
nav.main > ul > li > a > svg { flex-basis: 70%; /*needed for MS Edge*/ min-width: 1.7rem; max-height: 1.7rem; margin: 0 auto; padding: 0 1.5rem; color: #ececec; transition: color 200ms ease; }
nav.main > ul > li > a > span { display: none; flex-basis: 30%; /*needed for MS Edge*/ }

nav.main.open { display: block; left: auto; right: 0; width: 16rem; }
nav.main.open a.close { display: block; float: right; padding: 10px; }
nav.main.open a.close > svg { width: 2.5em; color: #ececec; }
nav.main.open > ul > li { max-width: none; }
nav.main.open > ul > li > h3 { padding: 0 1.5rem; text-align: left; }
nav.main.open > ul > li > a > svg { flex-basis: 20%; padding: 0 0.6rem 0 1.8rem; }
nav.main.open > ul > li > a > span { display: block; flex-basis: 80%; }
nav.main.open > ul > li.logo { display: none; }

main { display: block; }
header { width: 100%; height: 5rem; background-color: white; border-bottom: 1px solid #d0d0e0; }
header > ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: row; align-items: center; height: 100%; }
header > ul > li { width: 100%; min-width: 4rem; max-width: 5rem; flex: 1; }
header > ul > li.search { flex: 5; max-width: 100%; }
header > ul > li.search > input { display: block; width: 100%; height: 5rem; border: none; box-sizing: border-box; padding: 0; }
header > ul > li.search > input::placeholder { color: #C0C0D0; }
header > ul > li.search > input:focus { outline-width: 0; }
header > ul > li.next-group { border-left: 1px solid #d0d0e0; }
header > ul > li > a { display: flex; align-items: center; height: 5rem; transition: background-color 400ms ease-out; -webkit-tap-highlight-color: rgba(100, 200, 255, 0.3); }
header > ul > li > a > svg { flex-basis: 70%; /*needed for MS Edge*/ min-width: 1.6rem; max-height: 1.6rem; margin: 0 auto; color: #364665; transition: color 200ms ease; }
article { display: block; padding: 1rem; background-color: #F4F6F8; }
body.body-popup article { padding-bottom: 0; }
@media (hover: hover) {
  /*layout: disable hover effects on iphones and android*/
  nav.main > ul > li > a:hover { background-color: rgba(20, 187, 187, 0.6); transition: none; }
  nav.main > ul > li > a:hover svg { color: #AFF3F2; }
  header > ul > li > a:hover { background-color: rgba(20, 187, 187, 0.15); transition: none; }
  header > ul > li > a:hover svg { color: #435D91; }
}
@media only screen and (min-width: 770px) 
{
  /*layout: rules for tablets*/
  nav.main { display: block; }
  nav.main.open { left: 0; right: auto; width: 5rem; }
  nav.main.open a.close { display: none; }
  nav.main.open > ul > li { max-width: 5rem; }
  nav.main.open > ul > li > h3 { padding: 0; text-align: center; }
  nav.main.open > ul > li > a > svg { flex-basis: 70%; /*needed for MS Edge*/ padding: 0 1.5rem; }
  nav.main.open > ul > li > a > span { display: none; flex-basis: 30%; }
  nav.main.open > ul > li.logo { display: block; }
  main { margin-left: 5rem; }
  header { }
  header > ul > li.menu-toggle { display: none; }
  header > ul > li.search > input { }
  header > ul > li > a { }
}
@media only screen and (min-width: 1130px) 
{
  /*layout: rules for desktops*/
  nav.main { width: 16rem; }
  nav.main.open { width: 16rem; }
  nav.main > ul > li { max-width: none; }
  nav.main.open > ul > li { max-width: none; }
  nav.main > ul > li > h3 { padding: 0 1.5rem; text-align: left; }
  nav.main.open > ul > li > h3 { padding: 0 1.5rem; text-align: left; }
  nav.main > ul > li > a > svg { flex-basis: 20%; padding: 0 0.6rem 0 1.8rem; }
  nav.main.open > ul > li > a > svg { flex-basis: 20%; padding: 0 0.6rem 0 1.8rem; }
  nav.main > ul > li > a > span { display: block; flex-basis: 80%; }
  nav.main.open > ul > li > a > span { display: block; flex-basis: 80%; }
  main { margin-left: 16rem; }
}
@media only screen and (min-width: 1800px) 
{
  /*layout: rules for large workstations*/
  body { background-color: #E5EDFD; }
  nav.main { left: auto; }
  nav.main.open { left: auto; }
  div.page { min-height: 100vh; background-color: #F4F6F8; max-width: 1800px; margin: 0 auto; box-shadow: 0 0 20px 20px rgba(1,1,1,.2); }
}

/**** LAYOUT FOR POPUPS ****/
body.body-popup { margin-bottom: 0; }
body.body-popup nav.main { display: none; }
body.body-popup main { margin-bottom: 0; padding-bottom: 0; }
body.body-popup main header { display: none; }
body.body-popup-scroll { overflow-y: auto; }
body.body-popup-thin { }

/**** BASIC APPEARANCE ****/
button { color: #FFFFFF; background-color: #14BABA; cursor: pointer; margin: 0; padding: 9px 20px; border: 1px solid #14ACAA; border-radius: 3px; outline: none; }
button:hover { background-color: #14ACAA; }
button:focus { border-color: #139B99; }
button.std { min-width: 60px; }
button.std-wide { min-width: 116px; }
button.std-disabled { min-width: 60px; border-color: #EAEAEA; background-color: #F6F6F6; color: #C0C0C0; }
img.img-disabled { filter:alpha(opacity=50); }
.hideonscreen { display: none; }
h1 { font-size: 13pt; font-weight: bold; margin: 12px 0 0 0; padding: 0; }
h2 { font-size: 11pt; font-weight: bold; margin: 8px 0; padding: 0; }
h3 { font-size: 9pt; font-weight: bold; }
h4 { font-size: 8pt; font-weight: bold; }
ul.hint { margin: 0px; padding-left: 20px; list-style-image: url(../../imgs/hint.gif); font-size: 0.95em; color: #808080; }
ul.hint-red { margin: 0px; padding-left: 20px; list-style-image: url(../../imgs/hint-red.gif); font-size: 0.95em; }
li.hint { margin-bottom: 8px; }
a { text-decoration: none; color: #3366FF; }
a:hover { text-decoration: underline; }
a:focus { outline: none; }
a.disabled { color: #C0C0C0; cursor: default; }
a.disabled:hover { text-decoration: none; }
a.delete-icon { display: inline-block; width: 11px; height: 11px; background: transparent url(../../imgs/icon-delete.png) no-repeat 0 0; }
a.download-icon { display: inline-block; width: 11px; height: 11px; background: transparent url(imgs/download.gif) no-repeat 0 0; }
a.sequence-icon { display: inline-block; width: 11px; height: 11px; background: transparent url(imgs/sequence.gif) no-repeat 0 0; cursor: ns-resize; }
a.button { color: #FFFFFF; background-color: #14BABA; padding: 9px 20px; border: 1px solid #14ACAA; border-radius: 3px; outline: none; white-space: nowrap; }
a.button:hover { background-color: #14ACAA; }
a.button-disabled { color: #C0C0C0; background-color: #FEFEFE; border-color: #F0F0F0; cursor: default; }
a.button-disabled:hover { background-color: #FEFEFE; text-decoration: none; }
.inlineselect-text-active { color: #FFFFFF; }
.inlineselect-text-inactive { color: #3366FF; }
button.splitbutton { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; }
div.splitbutton { position: relative; display: inline-block; text-align: left; }
div.splitbutton > button { border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 0.6em; padding-right: 0.7em; }
div.splitbutton > button > svg { width: 10px; height: 10px; }
div.splitbutton > div { display: none; position: absolute; right: 0; z-index: 1; min-width: 230px; padding: 2em 0; background-color: #EAEEF2; box-shadow: rgba(0,0,0,0.2) 4px 4px 10px; }
div.splitbutton > div > a { display: block; padding: 7px 10px 7px 22px; color: black; }
div.splitbutton > div > a:hover { background-color: #14BABA; color: #FFFFFF; text-decoration: none; }
div.splitbutton > div > a.splitbuttondefault { background-image: url(imgs/tick.png); background-repeat: no-repeat; background-position: 3px 9px; }
div.splitbutton:hover > div { display: block; }
.bg-light { background-color: #F6F6F6; }
.bg-light-ex { background-color: #F4F6F8; }
.bg-white { background-color: #FFFFFF; }
.bg-orange { background-color: #EF9618; }
.bg-green { background-color: #63C363; }
.highlight { background-color: #FFD257; }
.highlight-light { background-color: #E0F8F8; }
.del { color: #CC2222; text-decoration: line-through; }
.ins { color: #22AA22; text-decoration: underline; }
del { color: #CC2222; text-decoration: line-through; }
ins { color: #22AA22; text-decoration: underline; }
.al { text-align: left; }
.ac { text-align: center; }
.ar { text-align: right; }
.nowrap { white-space: nowrap; }
.text-light { color: #808080; }
.text-light-ex { color: #C0C0C0; }
.text-white { color: #FFFFFF; }
.text-green { color: #3BCA02; }
.text-orange { color: #EF9618; }
.text-pink { color: #E101AA; }
.text-red { color: #FF0000; }
.text-redish { color: #D37575; }
.text-brown { color: #A58105; }
.text-small { font-size: 7.5pt; }
.i { font-style: italic; }
.b { font-weight: bold; }
.lab { color: #808080; }
.warning { color: #CC0000; }
.highlightwarning { color: #FF0000; background-color: #FFF0F0; }
span.searchText { background-color: #FFD265; }
#SearchAutocomplete { border: 1px solid #808080; background-color: #F6F6F6; }
#searchnavA { display: none; }
table.calckey { border: 1px solid #DCDCDC; background-color: #FFFFFF; width: 100%; height: 100%; }
td.calckey { text-align: center; vertical-align: middle; cursor: pointer; }
table.calckey-active { border: 1px solid #0A246A; background-color: #B6BDD2; width: 100%; height: 100%; }
span.rank-sort { padding-left: 6px; width: 9px; height: 11px; background-image: url(../../imgs/rank-sort.gif); background-repeat: no-repeat; cursor: pointer; }
span.sort-asc { padding-left: 8px; width: 8px; height: 9px; background-image: url(../../imgs/sort-asc.gif); background-repeat: no-repeat; }
span.sort-desc { padding-left: 8px; width: 8px; height: 9px; background-image: url(../../imgs/sort-desc.gif); background-repeat: no-repeat; }
.loading { min-height: 40px; background: transparent url(../../imgs/wait.gif) no-repeat 20px 20px; }
.tabheader { min-height: 39px; margin: 30px 0 10px 0; }
.tabheader-blank { min-height: 20px; margin-top: 0; }
.tabheader > h1 { float: left; margin-top: 4px; }
.tabheader > .actionbar { float: right; text-align: right; }
.tabheader > .actionbar > div { display: inline-block; margin: 0 0 0 20px; }
.tabheader > .actionbar > div.primary { margin-left: 0; }
.tabheader > .actionbar > div a { display: inline-block; padding: 10px 18px; border-radius: 3px; }
.tabheader > .actionbar > div a:hover { background-color: #FAFAFA; }
.tabheader > .actionbar > div a.button:hover { background-color: #14ACAA; }
.tabheader > .actionbar > div.primary a { display: block; min-width: 60px; border: 1px solid #14ACAA; padding: 10px 18px; background-color: #14BABA; color: #FFFFFF; text-align: center; }
.tabheader > .actionbar > div.primary a.button-disabled { color: #C0C0C0; background-color: #FEFEFE; border-color: #F0F0F0; }
.tabheader > .actionbar > div.primary img { display: none; }
.tabheader > .actionbar #TabHeaderEx img { display: none; }
.tabheader::after { clear: both; content: ""; display: table; }
.body-popup .tabheader { margin-top: 10px; }
.tabsubheader { margin-bottom: 8px; }
.tabsubheader > h3 { float: left; margin-top: 4px; font-size: 8pt; }
.tabsubheader > .actionbar { float: right; text-align: right; }
.tabsubheader::after { clear: both; content: ""; display: table; }
.email-viewer { background-color: #FFFFFF; }
.email-viewer article { background-color: #FFFFFF; }
svg.file-drop-target { color: #14BABA; }

/**** DIALOGS ****/
.dialog { position: fixed; overflow: hidden; z-index: 3; background-color: #F4F6F8; border: 1px solid #C0C0C0; -webkit-box-shadow: 2px 2px 10px #808080; -moz-box-shadow: 2px 2px 10px #808080; box-shadow: 2px 2px 10px #808080; }
.dialog .content { position: absolute; left: 0; top: 0; right: 0; bottom: 52px; overflow: auto; -webkit-overflow-scrolling: touch; }
.dialog .content iframe { position: absolute; width: 100%; height: 100%; border-width: 0; }
.dialog .buttons { position: absolute; right: 0; bottom: 0; left: 0; }
.dialog .buttons>div { float: left; margin-left: 16px; }
.dialog .buttons>div:first-child { float: right; }
.dialog button { float: left; min-width: 80px; margin-bottom: 8px; margin-left: 8px; }
.dialog .buttons>div:first-child button { margin-left: 0; margin-right: 8px; }
.dialog-buttonless .content { bottom: 0; }
.blurred { }
div.shim { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 2; background-color: transparent; background-color: rgba(200, 200, 200, 0.5); }
.moxie-shim { display: none; } /*from plplugin (file upload) - without this rule scroll bars appear in dialogs*/
@media only screen and (max-width: 767px) 
{
  /*make dialogs fullscreen on phones*/
  div.shim { background-color: rgba(0, 0, 0, 0.6); }
  .dialog { left: 20px!important; right: 20px!important; top: 20px!important; bottom: 20px!important; width: auto!important; height: auto!important; max-height: 640px; margin: auto 0; }
}

/**** FORMS ****/
div.formfield-caption { color: #808080; }
div.formfield-readonly { border: 1px solid #DCDCDC; padding: 3px 2px 2px 2px; overflow: hidden; background-color: #FFFFFF; }
div.formfield-readonly-boolean { padding: 0 3px 0 3px; overflow: hidden; }
div.formfield-inline { padding: 2px 2px 0 2px; overflow: hidden; }
div.formfield-unknown { border: 1px solid #DCDCDC; padding: 2px 2px 0 2px; overflow: hidden; background-color: #FFFFFF; color: #FF5555; font-weight: bold; }
div.formfield-hidden { border: 1px solid #DCDCDC; padding: 2px 2px 0 2px; overflow: hidden; background-image: url(../../imgs/checker-board.gif); color: #808080; font-style: italic; }
div.formfield-design { border: 1px solid #DCDCDC; padding: 2px 2px 0 2px; overflow: hidden; background-color: #FFE7FF; }
div.formfield-taborder { text-align: right; font-size: 6pt; color: #A0A0A0; }
div.form-userinfo { text-align: right; color: #808080; font-style: italic; }
img.icon-design { cursor: pointer; z-index: 1; }
button.formfield-accessory { line-height: 16px; margin-top: 0; padding: 6px 12px 7px 12px; border-radius: 3px; }
.formfield-readonly p { margin: 0px; }
table.formfield-editor { border: 1px solid #979797; border-right-color: #D9D9D9; border-bottom-color: #D9D9D9; }
div.formfield-editor { height: 100%; overflow-y: auto; outline: none; }
div.formfield-editor p { margin: 0px; }
span.formfield-required { color: #D00000; cursor: default; }
div.formshape1 { border-top: 1px solid #808080; border-bottom: 1px solid #808080; background-color: #F6F6F6; } 
#ButtonRowA { margin-top: 40px; }
#ButtonRowB { margin-top: -62px!important; }
#ButtonRowC { margin-top: -50px!important; position: absolute; }
.page-popup #ButtonRowC { margin-top: 0!important; margin-bottom: 30px; position: static; display: block!important; }

/**** FORMS VERSION 2 ****/
button.form { min-width: 110px; padding: 11px 20px; }
button.form-accept { }
button.form-cancel { border-color: #E6E6E6; background-color: #FFFFFF; color: #148281; }
button.form-cancel:hover { background-color: #FAFAFA; }
button.form-cancel:focus { border-color: #D0D0D0; }
button.form-delete { border-color: #F68080; background-color: #FFFBFB; color: #F64242; }
button.form-delete:hover { background-color: #E50B0B; color: #FFFFFF; }
button.form-delete:focus { border-color: #FF0000; }
button.form-small { min-width: auto; padding: 6px 12px; border-color: #E6E6E6; background-color: #FFFFFF; color: #3366FF; font-size: 0.9em; }
button.form-small:hover { background-color: #FAFAFA; }
.fui-form { margin-top: 20px; }
.fui-form input, .fui-form select, .fui-form textarea { display: inline-block; }
.fui-form input[type="radio"] { margin-top: 3px!important; }
.fui-form input[type="checkbox"] { margin-top: 3px!important; }
.fui-form .fui-bool input[type="checkbox"] { margin-top: 9px!important; }
.fui-form-footer-links { margin: -40px 0 48px 0; }
.fui-form-readonly { }
.fui-userinfo { padding: 4px 0 10px 0; color: #808080; font-style: italic; }
.fui-above { display: block; }
.fui-section { margin: 0 0 10px 0; padding: 4px 0; }
.fui-section-alt { }
.body-popup .fui-section:last-child { margin-bottom: 0; }
.fui-columns { width: 100%; display: table; border-collapse: collapse; table-layout: fixed; }
.fui-column { width: 50%; display: table-cell; padding: 0 10px 0 10px; }
.fui-column:first-child { padding-left: 0; }
.fui-column:last-child { padding-right: 0; }
.fui-column:last-child > .fui-group:first-child > table.fui-fields:first-child > tbody > tr:first-child > td:first-child > div.tabsubheader { margin-top: 0; }
.fui-group { margin: 0 0 50px 0; padding: 4px 0; }
.body-popup .fui-group { margin-bottom: 20px; }
.fui-group:last-child { margin-bottom: 0; }
.fui-group-alt { }
.fui-group h5 { margin: 0; padding: 4px 0; font-size: 8pt; font-weight: bold; }
.fui-fields { width: 100%; border-collapse: collapse; }
.fui-fields>tbody>tr>td { width: 130px; padding: 3px 6px 7px 0; }
.fui-form-wide-labels .fui-fields>tbody>tr>td { width: 160px; }
.fui-fields>tbody>tr>td:last-child { width: auto; padding: 0 10px 7px 0; }
.fui-fields>tbody>tr:last-child>td { padding-bottom: 0; }
.fui-fields>tbody>tr>td>label { display: inline-block; padding-top: 2px; color: #808080; }
.fui-fields input, .fui-fields textarea { box-sizing: border-box; background: linear-gradient(rgba(235,235,235,1.0) 0px, rgba(255,255,255,1.0) 3px); }
.fui-fields input.fui-colour-wheel { max-width: 120px; min-height: 27px; padding: 1px 3px; line-height: 19px; }
.fui-fields select { box-sizing: border-box; border: 1px solid #808080; }
.fui-fields table.fui-html { box-sizing: border-box; border: 1px solid #808080; }
.fui-design { position: relative; border: 1px solid #E8DAA8; padding: 4px 0 4px 2px; box-sizing: border-box; background-color: #F2EBCE; }
.fui-design-drag { }
.fui-design-edit { position: absolute; right: 0; top: 0; width: 8px; height: 8px; background-color: #D9C88F; }
.fui-design-taborder { position: absolute; right: 1px; bottom: 0; font-size: 6pt; color: #C2AF6E; }
.fui-url { padding-left: 20px; background-image: url(../../imgs/icon-webpage.gif); background-repeat: no-repeat; background-position: 1px -2px; }
.fui-email { padding-left: 20px; background-image: url(../../imgs/icon-email.gif); background-repeat: no-repeat; background-position: 1px -2px; }
.fui-readonly { min-height: 27px; border: 1px solid white; border-radius: 3px; box-sizing: border-box; padding: 4px 1px 5px 3px; line-height: 16px; background-color: #FFFFFF; }
.fui-transparent { border-color: transparent; background-color: transparent; }
.fui-upper { text-transform: uppercase; }
.fui-str { min-width: 100px; }
.fui-text { min-width: 100px; }
.fui-html { min-width: 100px; }
.fui-date { min-width: 100px; }
.fui-time { min-width: 100px; }
.fui-int { min-width: 80px; }
.fui-float { min-width: 80px; }
.fui-lookuplist { min-width: 100px; }
.fui-lookuplist-multiselect { float: left; min-width: 80px; padding-top: 5px; }
.fui-lookuplist-multiselect > div { clear: both; padding: 0 4px 6px 0; }
.fui-lookuplist-multiselect > div > input { float: left; margin: 0; padding: 0; }
.fui-lookuplist-multiselect > div > label { display: block; margin-left: 20px; }
.fui-entitydisplaylist { padding: 0 7px 20px 1px; background-color: #FFFFFF; }
.fui-entity { min-width: 40px; width: 100%; }
.fui-entity-button { line-height: 16px; margin-top: 0; padding: 6px 12px 7px 12px; border-radius: 3px; }
.fui-icon { margin-top: 6px; padding-left: 2px; vertical-align: top; cursor: pointer; }
.fui-fields .tabsubheader { margin: 40px 0 0 0; }
.fui-fields .tabsubheader h3 { margin: 4px 0; }
.fui-tip { white-space: nowrap; }
.fui-tip > div { display: inline-table; }
.fui-tip-at-100 { position: relative; margin-right: 18px; }
.fui-fields .tip-indicator { position: relative; display: inline-block; margin-top: 6px; margin-left: 4px; vertical-align: top; }
.fui-fields .fui-tip-at-100 .tip-indicator { position: absolute; top: 6px; right: -18px; margin-top: 0; }
.fui-form-advsearch .fui-fields>tbody>tr>td:first-child { width: 180px; }
.fui-file-upload-progress { height: 4px; background-color: #14BBBB; } 
.fui-file-thumbnail { width: 80px; height: 80px; background-color: #E0E0E0; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; }
.fui-file-fullimagethumbnail { background-color: #EAEAEA; background-size: contain; background-position: 50% 50%; }
.fui-colour-palette { padding: 12px 0 8px 0; overflow: auto; }
.fui-colour-palette > div { float: left; display: block; width: 15px; height: 15px; margin: 0 1px 1px 0; border: 1px solid transparent; cursor: pointer; }
.fui-colour-palette > div:hover { border-color: #FFFFFF; }
div.button-row { clear: both; position: relative; min-width: 300px; min-height: 40px; padding-top: 20px; }
div.button-row>div { position: absolute; left: 20%; right: 20%; white-space: nowrap; text-align: center; }
div.button-row>div:first-child { left: 0; right: auto; }
div.button-row>div:last-child { left: auto; right: 0; }
div.button-row button { display: inline; margin: 0 4px; }
div.button-row>div:first-child button { margin: 0; }
div.button-row>div:last-child button { margin: 0; }
.fui-form div.dashboard-item { margin-right: 0; }
@media only screen and (max-width: 767px) 
{
  /*collapse table columns into a single column on phones*/
  .fui-columns { display: block; }
  .fui-columns > tbody { display: block; }
  .fui-columns > tbody > tr { display: block; }
  .fui-column { display: block; width: 100%; padding-left: 0; padding-right: 0; }
  /*.fui-group:last-child { margin-bottom: 50px; }
  .page-popup .fui-group:last-child { margin-bottom: 0; }*/
  #ButtonRowA { text-align: right!important; }
  #ButtonRowB { margin-top: -66px!important; text-align: left!important; }
  #ButtonRowC { display: none; }
}

/**** TIPS ****/
a.tip-indicator { display: block; width: 14px; height: 16px; background: transparent url(imgs/tip-indicator.png) no-repeat 50% 50%; outline: 0; }
.tip-window { position: relative; padding: 8px 12px; margin: 1em 0 3em; z-index: 10; background-color: #FFF39F; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; box-shadow: 2px 2px 5px #A0A0A0; white-space: normal; }
.tip-window::before { content: ""; position: absolute; bottom: -20px; width: 1px; height: 1px; display: block; }
.tip-window::after { content: ""; position: absolute; top: -10px; right: 27px; z-index: 10; border-width: 0 10px 10px; border-style: solid; border-color: #FFF39F transparent; display: block; width: 0; }
.tip-window p { margin: 0; padding: 2px 0; }
#FormContainer .tip-window { position: absolute; display: block; margin-left: -180px; margin-top: 25px; width: 200px; }

/**** TABS ****/
#tabs { width: 100%; overflow-x: auto; overflow-y: hidden; margin: 1em 0 0 0; -webkit-overflow-scrolling: touch; }
#tabs::-webkit-scrollbar { height: 7px; }
#tabs::-webkit-scrollbar-track { background: #F0F0F0; }
#tabs::-webkit-scrollbar-thumb { background: #EBEBEB; }
#tabs::-webkit-scrollbar-thumb:hover { background: #A0A0A0; }
#tabs ul { padding: 0; list-style: none; display: table-row; }
#tabs li { display: table-cell; margin: 0; padding: 0; width: 10%; }
#tabs a { display: block; margin: 0; padding: 0; text-decoration: none; cursor: pointer; font-size: 13px; }
#tabs a span { display: block; padding: 2em 1em 0.7em 1em; color: #404040; white-space: nowrap; text-align: center; }
#tabs a span sup { padding-left: 3px; color: #808080; }
#tabs li.empty span { color: #808080; }
#tabs a:hover span { color: #00000; }
#tabs a:hover { border-bottom: 5px solid #7384A5; background-color: #EEF1F4; }
#tabs #current a { border-bottom: 5px solid #374665; }
#tabs #current a:hover { background-color: inherit; }
.tab-content { padding: 20px 10px; overflow-x: auto; background-color: #FFFFFF; }
.tab-links { padding: 0 0 20px 0; }
@media only screen and (min-width: 770px) 
{
  /*layout: rules for tablets*/
  #tabs li { width: auto; } /*on phones tabs stretch to fill the width, but on tablets and above they are left aligned*/
  #tabs a span { padding-left: 3em; padding-right: 3em; }
  .tab-content { overflow-x: auto; }
}

/**** TABLES ****/
table.layout { border-collapse: collapse; width: 100%; }
table.layout td { vertical-align: top; padding: 0; }
table.layout>tr>td { vertical-align: top; padding: 0; }
table.layout>tbody>tr>td { vertical-align: top; padding: 0; }
@media only screen and (max-width: 769px) 
{
  /*rules for phones*/
  table.layout-can-stack { display: block; }
  table.layout-can-stack > tbody { display: block; }
  table.layout-can-stack > tbody > tr { display: block; }
  table.layout-can-stack > tbody > tr > td { display: block; width: 100%; padding-left: 0; padding-right: 0; }
}
table.std { border-collapse: collapse; border: 1px solid transparent; border-radius: 3px; width: 100%; margin-bottom: 20px; background-color: #FFFFFF; }
table.std tr.alt { }
table.std tr.alt2 { background-color: #F4F4F5; }
table.std td { padding: 7px 4px 6px 4px; vertical-align: top; }
table.std tr:first-child td { border-top: none; }
table.std td:first-child { }
table.std td.not-first-child { }
table.std td.label { color: #808080; }
table.std td.fieldlabel { color: #808080; padding-top: 12px; }
table.std td.msg { color: #808080; padding: 20px 4px; }
table.std thead tr { }
table.std thead td { padding: 40px 4px 10px 4px; font-size: 8pt; font-weight: bold; }
table.std thead td.icon { padding: 37px 1px 0 1px; }
table.std thead tr a { color: #000000; font-size: 8pt; }
table.std thead tr a.sortasc { padding-right: 9px; background: transparent url(../../imgs/sort-asc.gif) no-repeat scroll right top; }
table.std thead tr a.sortdesc { padding-right: 9px; background: transparent url(../../imgs/sort-desc.gif) no-repeat scroll right top; }
table.std tfoot tr { }
table.std tfoot tr:first-child td { padding: 32px 4px 16px 4px; font-size: 8pt; font-weight: bold; }
table.std tfoot.inline tr:first-child td { padding-top: 12px; }
table.std tfoot td { font-weight: bold; }
table.std tr.subhead { vertical-align: bottom; }
table.std tr.subhead td { min-height: 32px !important; height: 32px; padding-top: 3em; vertical-align: bottom; font-weight: bold; font-size: 8pt; color: #808080; }
table.std tr.subhead:first-child td { padding-top: 0.5em; }
table.std td.icon { width: 1%; padding: 7px 1px 0 1px; }
table.std td.icon img { border: 0; width: 14px; height: 16px; }
table.std td.nowrap { white-space: nowrap; }
table.std1 { border-collapse: collapse; border-radius: 3px; width: 100%; }
table.std1 td { padding: 4px; vertical-align: top; }
table.std1 td.label { color: #808080; }
table.std1 td.fieldlabel { color: #808080; padding-top: 8px; }
table.std1 td.msg { color: #808080; padding: 20px; }
table.std2 { border: 1px solid #DCDCDC; }
table.std3 { background-color: transparent; }
table.std4 { table-layout: fixed; }
table.std4 td.icon { width: 20px; }
table.std4 td { white-space: nowrap; overflow: hidden; }
table.std5 thead td { padding-top: 8px; }
table.inline { border: 0; margin-bottom: 0; }
table.inline td:first-child { border-left: 0; }
table.inline thead td { border-top: 0; }
table.input-grid td { border-top-color: rgba(255, 255, 255, 0); }
table.inlineselect { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #979797; border-right-color: #D9D9D9; border-bottom-color: #D9D9D9; border-radius: 3px; background-color: #FFFFFF; outline: none; }
table.inlineselect:focus { border-color: #606060; }
table.inlineselect td { padding: 4px 4px 5px 4px; border: none; }
.fui-fields table.inlineselect td { white-space: normal; }
table.searchfooter td { padding: 24px 32px; font-size: 9pt; }
table.std > tbody > tr.drag-over-lower > td { border-bottom: 1px solid #14BABA; }
table.std > tbody > tr.drag-over-upper > td { border-top: 1px solid #14BABA; }

/**** DASHBOARD ****/
div.dashboard { width: 100%; min-width: 300px; }
div.dashboard-column { float: left; width: 50%; }
div.dashboard-item { margin-right: 20px; }
div.dashboard-item-loading { background: transparent url(../../imgs/wait.gif) no-repeat 20px 20px; }
@media screen and (max-width: 1100px) {
  div.dashboard-column { width: 100%; }
}
div.dashboard-item a.dashboard-item-download { display: inline-block; width: 11px; height: 11px; background: transparent url(imgs/dashboard-item-download.gif) no-repeat 0 0; }
div.dashboard-customise { }
div.dashboard-customise div.dashboard-item { position: relative; max-height: 400px; overflow: hidden; }
div.dashboard-customise div.dashboard-item-overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(100, 100, 100, 0.5); background: linear-gradient(rgba(100,100,100,0.5) 320px, rgba(255,255,255,1.0) 400px); }
div.dashboard-customise div.dashboard-item-overlay-drag { position: absolute; width: 40px; height: 40px; left: 50%; top: 50%; margin: -20px 0 0 -20px; background: #404040 url(imgs/dashboard-drag.gif) no-repeat 50% 50%; cursor: move; }
div.dashboard-customise a.dashboard-item-overlay-edit { position: absolute; width: 40px; height: 40px; top: 10px; right: 10px; background: #404040 url(imgs/dashboard-edit.gif) no-repeat 50% 50%; }
div.dashboard-customise div.dashboard-item-overlay-is-moving { border: 3px dashed #808080; }
div.dashboard-customise div.dashboard-drop { visibility: hidden; height: 12px; margin-bottom: 20px; margin-right: 20px; background-color: #CBB93D; border: 3px dashed #808080; }
div.dashboard-customise div.dashboard-drop-active { visibility: visible; }
div.dashboard-customise div.dashboard-drop-disable { visibility: hidden; }
div.dashboard-customise div.dashboard-drop-over { background-color: #7AFE70; border-color: #06D806; }
div.dashboard-customise a.dashboard-item-add { display: inline-block; margin: 0 0 10px 4px; padding: 14px 10px 14px 50px; background: transparent url(imgs/dashboard-add.gif) no-repeat 0% 50%; }

/**** DASHBOARD EDIT ****/
div.dashboardedit { width: 100%; min-width: 500px; }
div.dashboardedit-preview-container { position: relative; float: right; width: 50%; min-height: 600px; }
div.dashboardedit-preview-area { position: absolute; top: 30px; right: 0; bottom: 0; left: 0; overflow: auto; }
div.dashboardedit-preview { min-height: 60px; margin: 16px 16px 16px 0; }
div.dashboardedit-preview-loading { background: transparent url(../../imgs/wait.gif) no-repeat 20px 20px; }
div.dashboardedit-templates { float: left; width: 50%; }
div.dashboardedit-options { float: left; clear: left; width: 50%; }
div.dashboardedit-option { display: none; clear: both; padding-top: 16px; }
div.dashboardedit-option-available { display: block; }
div.dashboardedit-option>h6 { display: block; float: left; width: 30%; margin: 0; font-size: 100%; padding: 0; font-weight: normal; color: #808080; }
div.dashboardedit-option>div { display: block; float: right; width: 70%; padding-bottom: 8px; }
div.dashboardedit-option>div input[type=radio] { float: left; clear: left; margin: 0 0 10px 0; }
div.dashboardedit-option>div input[type=checkbox] { float: left; clear: left; margin: 0 0 10px 0; }
div.dashboardedit-option>div label { display: block; margin: 0 0 10px 20px; }
div.dashboardedit div.button-row { width: 50%; }

/**** PRINTING ****/
@media print {
  .hideonprint { display: none; }
  .hideonscreen { display: block; }
}

/**** WIDGETS (css grid dashboard, -ms prefix is for IE11 support) ****/
.widget-dashboard { display: -ms-grid; display: grid; gap: 13px; margin-bottom: 13px; }
.widget-table { display: block; width: 100%; table-layout: fixed; border-collapse: collapse; }
.widget-table > tbody { display: block; }
.widget-table > tbody > tr { display: block; }
.widget-table > tbody > tr > td { display: block; padding: 0; }
.widget { position: relative; min-height: 200px; margin-bottom: 13px; padding-bottom: 20px; background-color: #FFFFFF; }
.widget > h3 { margin: 0; padding: 10px 0 10px 10px; text-transform: uppercase; font-size: 90%; font-weight: bold; color: #808080; }
.widget > a.toggle { position: absolute; top: 4px; right: 4px; padding: 8px; }
.widget > a.toggle:hover { background-color: rgba(20, 187, 187, 0.15); }
.widget > a.toggle > svg { display: block; width: 16px; height: 16px; fill: #808080; }
.widget > div.links { line-height: 2em; }
.widget > div.links > a { display: inline-block; padding: 0 10px; border-right: 1px solid #EAEAEA; }
.widget > div.links > a:last-child { border-right: none; }
.widget > div.links > a.download-icon { background-position: 50%; padding: 0 12px; }
.widget > div.links.links-right { text-align: right; padding-right: 10px; }
.widget > div.links.links-top-right { position: absolute; top: 0; right: 0; margin: 15px 5px 0 0; line-height: normal; }
.widget-dashboard .widget { margin-bottom: 0; padding-bottom: 0; }
.widget.widget-transparent { background-color: transparent; }
.widget .widget-inset { padding: 0 10px 0 10px; }
.widget .widget-scroll-overflow { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media only screen and (min-width: 770px) 
{
  .widget-table { display: table; }
  .widget-table > tbody { display: table-row-group; }
  .widget-table > tbody > tr { display: table-row; }
  .widget-table > tbody > tr > td { display: table-cell; padding: 0 7px 13px 6px; }
  .widget-table > tbody > tr > td:first-child { padding-left: 0; }
  .widget-table > tbody > tr > td:last-child { padding-right: 0; }
  .widget > div.links { position: absolute; top: 0; right: 0; margin: 15px 5px 0 0; line-height: normal; }
}

/*layout 2 mobile (collapses into 1-1)*/
.widget-dashboard.layout-2 { -ms-grid-columns: 1fr;
                             -ms-grid-rows: auto 13px auto;
                             grid-template-columns: 1fr;
                             grid-template-areas: "cell1"
                                                  "cell2";  
                             }
.widget-dashboard.layout-2 .cell1 { grid-area: cell1; -ms-grid-column: 1; }
.widget-dashboard.layout-2 .cell2 { grid-area: cell2; -ms-grid-column: 1; -ms-grid-row: 3; }
/*layout 2 desktop (row 1 has 2 cells)*/
@media only screen and (min-width: 770px) 
{
  .widget-dashboard.layout-2 { -ms-grid-columns: 1fr 13px 1fr;
                               -ms-grid-rows: auto;
                               grid-template-columns: 1fr 1fr;
                               grid-template-areas: "cell1 cell2";
                               }
  .widget-dashboard.layout-2 .cell1 { -ms-grid-column: 1; }
  .widget-dashboard.layout-2 .cell2 { -ms-grid-column: 3; }
}                        

/*layout 4-1 mobile (collapses into 2-2-1)*/
.widget-dashboard.layout-4-1 { -ms-grid-columns: 1fr 13px 1fr;
                               -ms-grid-rows: auto 13px auto 13px auto;
                               grid-template-columns: 1fr 1fr;
                               grid-template-areas: "cell1 cell2"
                                                    "cell3 cell4"
                                                    "cell5 cell5";  
                             }
.widget-dashboard.layout-4-1 .cell1 { grid-area: cell1; -ms-grid-column: 1; }
.widget-dashboard.layout-4-1 .cell2 { grid-area: cell2; -ms-grid-column: 3; }
.widget-dashboard.layout-4-1 .cell3 { grid-area: cell3; -ms-grid-column: 1; -ms-grid-row: 3; }
.widget-dashboard.layout-4-1 .cell4 { grid-area: cell4; -ms-grid-column: 3; -ms-grid-row: 3; }
.widget-dashboard.layout-4-1 .cell5 { grid-area: cell5; -ms-grid-column: 1; -ms-grid-row: 5; -ms-grid-column-span: 3; }
/*layout 4-1 desktop (row 1 has 4 cells, row 2 has 1 cell)*/
@media only screen and (min-width: 770px) 
{
  .widget-dashboard.layout-4-1 { -ms-grid-columns: 1fr 13px 1fr 13px 1fr 13px 1fr;
                                 -ms-grid-rows: auto 13px auto;
                                 grid-template-columns: 1fr 1fr 1fr 1fr;
                                 grid-template-areas: "cell1 cell2 cell3 cell4"
                                                      "cell5 cell5 cell5 cell5";
                               }
  .widget-dashboard.layout-4-1 .cell1 { -ms-grid-column: 1; }
  .widget-dashboard.layout-4-1 .cell2 { -ms-grid-column: 3; }
  .widget-dashboard.layout-4-1 .cell3 { -ms-grid-column: 5; -ms-grid-row: 1; }
  .widget-dashboard.layout-4-1 .cell4 { -ms-grid-column: 7; -ms-grid-row: 1; }
  .widget-dashboard.layout-4-1 .cell5 { -ms-grid-column: 1; -ms-grid-row: 3; -ms-grid-column-span: 7; }
}                        

/* tagger */
.tagger { padding: 2px 0; min-height: 16px; line-height: 16px; border-width: 1px; border-style: solid; border-radius: 3px; border-top-color: #979797; border-left-color: #979797; border-right-color: #D9D9D9; border-bottom-color: #D9D9D9; background-color: #FFFFFF; }
.tagger > ul { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: left; width: 100%; margin: 5px 0 -19px 0; padding: 3px 6px 4px 6px; box-sizing: border-box; list-style: none; }
.tagger > ul > li { margin-bottom: 15px; padding-right: 6px; }
.tagger > ul > li > span { padding: 4px 4px 4px 8px; border-radius: 3px; background-color: #B2E2E1; white-space: nowrap; color: black; }
.tagger > ul > li a.close { margin-left: 4px; padding: 4px; color: black; text-decoration: none; }
.tagger > ul > li a.close:hover { color: white; }
.tagger > ul > li.tagger-new { flex-grow: 1; margin: -4px 0 19px 0; }
.tagger > ul > li.tagger-new input { width: 100%; min-width: 30px; padding-left: 0; border: none; outline: none; box-shadow: none; background: transparent; }
.tagger > ul > li.tagger-new input::-webkit-calendar-picker-indicator { display: none; } /*hides the auto-complete down arrow*/
.tagger > ul > li.tagger-completion { position: absolute; z-index: 100; }
.tagger.wrap > ul { flex-wrap: wrap; justify-content: start; }
.tagger.wrap > ul > li > span { white-space: normal; }