@charset "UTF-8";

/* -----------------------------------------------------------------------------------------
    TEMPUS SERVA CORE CSS
    Version:    5.1
    Author:     TS
    Created:    June 2021
   ----------------------------------------------------------------------------------------- */

:root {

  --themePrimary: #50e2c1;        /* Mint Green */
  --themePrimaryLight: #e0fff8;   /* Light Mint Green */
  --themePrimaryDark: #336666;    /* Dark Green */

  --themeSecondary:#8c2db3;       /* Purple */
  --themeTeritary: #8e9aa7;       /* Blue-tone Grey */

  --themeDark: #333333;           /* Darkest Grey */
  --themeGreyDark: #5a626b;       /* Dark Grey */
  --themeGrey: #ced4da;           /* Blue-tone Grey */
  --themeMediumGrey: #dee2e6;     /* Medium blue-tone Grey */
  --themeLightGrey: #f8f9fc;      /* Light blue-tone Grey*/
  --themeLight: #ffffff;          /* White */
  
/* ----------------------------------------------------------------------------------------- */

  --loginBgColor: var(--themeLight);
  --loginBorderColor: var(--themeMediumGrey);

  --pageColor: var(--themeDark);
  --pageBgColor: var(--themeLightGrey); 
  --pageLinkColor:var(--themeSecondary);

  --pageHeaderColor: var(--themePrimary);
  --pageHeaderSubColor:  var(--themeDark);

  --pageBreadcrumbLinkColor: var(--themeSecondary);
  --pageBreadcrumbTextColor: var(--themeTeritary);

  --headerColor: var(--themeDark);
  --headerBgColor: var(--themePrimary);

  --sidebarColor: var(--themeGreyDark);
  --sidebarBgColor:  var(--themeLight);
  --sidebarOpacity: 0.9;
  --sidebarWidth: 250px;
  --sidebarColorHover: var(--themeGrey);

  --defaultButtonColor: var(--themeGreyDark);
  --defaultButtonBgColor: var(--themeLight);
  --defaultButtonBorderColor: var(--themeGrey);
  --defaultButtonColorHover: var(--themeGreyDark); 
  --defaultButtonBgColorHover:  var(--themePrimaryLight);
  --defaultButtonBorderColorHover: var(--themeGrey);

  --primaryButtonColor: var(--themePrimaryDark);
  --primaryButtonBgColor: var(--themePrimary);
  --primaryButtonBorderColor: var(--themePrimary);
  --primaryButtonColorHover: var(--themePrimary);
  --primaryButtonBgColorHover:  var(--themePrimaryDark);
  --primaryButtonBorderColorHover: var(--themePrimaryDark);

  --toolbarButtonColor: var(--themeLight);
  --toolbarButtonBgColor: var(--themeTeritary);
  --toolbarButtonBorderColor: var( --toolbarButtonBgColor);
  --toolbarButtonColorHover:  var(--themeDark);
  --toolbarButtonBgColorHover: var(--toolbarButtonBgColor);

  --codeunitButtonColor: var(--themeGreyDark);
  --codeunitButtonBgColor: var(--themeLight);
  --codeunitButtonBorderColor: var(--themeGrey);
  --codeunitButtonColorHover: var(--codeunitButtonColor);
  --codeunitButtonBgColorHover: var(--themePrimaryLight);
  --codeunitButtonBorderColorHover: var(--themeTeritary);

  --listButtonColor: var(--themeDark);
  --listButtonBgColor: transparent;
  --listBorderColor: var(--themeMediumGrey); /* List border color */
  --listBgColorHover: var(--themePrimaryLight);

  --formLabel: var(--themeDark);
  --formHelp: var(--themeSecondary);

  --formInputAddonColor: var(--themeTeritary);
  --formInputAddonBgColor: var(--themeTeritary);

  --formTabsColor: var(--themeDark);
  --formTabsBgColor: var(--themeLight);
  --formTabsBorderColor: var(--themeGrey);
  --formTabsColorActive: var(--themeDark);

  --popupHeaderColor: var(--themeLight);
  --popupHeaderBgColor: var(--themeTeritary);

}

/* ------------------------------------------------------------------------------------------ */
/* OFFLINE MODE */
/* ------------------------------------------------------------------------------------------ */

.offlineMode #tsSidenav .card-body a,
.offlineMode #tsMenuPersonal,
.offlineMode #tsDashboardList > .dropdown-menu,
.offlineMode #QuickSearchForm,
.offlineMode .toolBar .btn-group > *,
.offlineMode #pager,
.offlineMode .viewList .btn,
.offlineMode .viewList.clickRecord,
.offlineMode .codeunitButtonMenu { display: none; }

.offlineMode #tsSidenav .card-body .offlineEnabled,
.offlineMode .toolBar .btn-group #menuCreateItem { display: block; }

/* ------------------------------------------------------------------------------------------ */
/* GOOGLE CHARTS */
/* ------------------------------------------------------------------------------------------ */

.googlechart { background-color: transparent; }
.googlechartPivot { background-color: transparent; }

/* ------------------------------------------------------------------------------------------ */
/* MAP STYLES */
/* ------------------------------------------------------------------------------------------ */

.map-canvas { min-height: 300px; }

/* ------------------------------------------------------------------------------------------ */
/* GANTT CHART */
/* ------------------------------------------------------------------------------------------ */

.fn-gantt .bar .fn-label:hover { overflow: visible; }
.fn-gantt .nav-link { padding: 0px; }
.fn-gantt .row { display: block; background: none; }

.fn-gantt .fn-content .leftPanel .row,
.fn-gantt .fn-content .rightPanel .row,
.fn-gantt .fn-content .bottom {
    background: none;
}

.fn-gantt .header { position: relative; }

/* ------------------------------------------------------------------------------------------ */
/* LOG PAGES */
/* ------------------------------------------------------------------------------------------ */

#disableHidden { display: block; text-align: left; padding: 0px; }
#viewLogs .tableList td:first-child { padding: .55rem; width: 20%; max-width: none; }

/* --- Timeline Command --------------------------------------------------------------------- */

.timelineCommand .tableList td:first-child {
      padding: .55rem;
      width: auto;
}

/* --- Measure Command ---------------------------------------------------------------------- */

.measureCommand .viewLogs {
    margin-bottom: 20px;
}

/* --- Access Command ----------------------------------------------------------------------- */

.accessCommand .viewLogs {

}

/* --- Open Command ------------------------------------------------------------------------- */

.openCommand .googlechart {
    padding: 20px;
    margin-bottom: 5px;
    min-height: 300px;
}

/* ------------------------------------------------------------------------------------------ */
/* ERROR PAGE */
/* ------------------------------------------------------------------------------------------ */

main .systemerror {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 100%;
    border-radius: 0.25rem;
	display: block;
}

.tsError {  margin-top: 20px; }

.tsErrorImage, .tsErrorDetails {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    margin-bottom: 20px;
}

.tsErrorImage { text-align: center; }
.tsErrorImage img { max-width: 60%; }
.tsErrorDetails p { font-size: 1rem; color: var(--themeTeritary); font-weight: 100; }
.tsErrorDetails ul, .tsErrorDetails ol { font-size: 1rem; color: var(--themeTeritary); font-weight: 100; }


/* ------------------------------------------------------------------------------------------ */
/* DEPLOY LIVE  */
/* ------------------------------------------------------------------------------------------ */

.syncCommand { 
      padding: 40px; 
}

.syncLineResult { 
    margin-bottom: 20px;
    padding-left: 20px;
}

.syncLineResult li { 
      margin-bottom: .35rem; 
}

.syncLineResult br { display: none; }

.systemmessage {
	font-size: 100%;
	vertical-align: middle;
	padding: 5px 10px;
	line-height: 1rem;
	border-radius: .25rem;
	white-space: normal;
	display: block;
	width: fit-content;
	margin-bottom: 5px;
	background-color: #03d46a;
}

.badge {
    display: inline-block;
    padding: 6px 8px;
    font-size: 80%;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
}

.badge-info {
    color: #fff;
    background-color: var(--themeSecondary);
}

.systemmessage br { display: none; }


/* ------------------------------------------------------------------------------------------ */
/* TABLE MASTER STYLES (Accordion) */
/* ------------------------------------------------------------------------------------------ */


.tableMasterViewLink {
    font-size: 85%;
    margin-left: 0px;
}

.tableMasterViewLink a {
    color: var(--pageLinkColor);
}

.tableMasterDescription {
    margin-left: 0px;
    margin-bottom: .3rem;
    color: var(--pageBreadcrumbTextColor);
}

.tableMasterDescription a {
    margin-left: 40px;
    color: var(--pageLinkColor);
    opacity: 0.6;
}


/* ------------------------------------------------------------------------------------------ */
/* FLAGS */
/* ------------------------------------------------------------------------------------------ */

.flagList {
    position: fixed;
    top: 105px;
    right: 40px;
    cursor: pointer;
}

.flagItem {
    padding: 0.6rem 0.6rem 0.1rem 0.6rem;
    max-width: 300px;
    border-radius: .25rem;
}

.flagColor1 { background: #fb7676; }  
.flagColor2 { background: #ff865a; } 
.flagColor3 { background: #ffec80; } 
.flagColor4 { background: #50e2c1; }
.flagColor5 { background: #97e1f9; }
.flagColor6 { background: #d4b0fd; }
.flagColor7 { background: #ff7cc7; }

/* ------------------------------------------------------------------------------------------ */
/* WYSIWIG EDITOR (Old Editor) */
/* ------------------------------------------------------------------------------------------ */

.nicEditInput > div { width: 100% !important; }
.nicEditInput > div:nth-child(1) > div {
  border-top-left-radius: .25rem; 
  border-top-right-radius: .25rem; 
}
.nicEditInput > div:nth-child(2) {
  border-bottom-left-radius: .25rem; 
  border-bottom-right-radius: .25rem; 
}

.nicEdit-main {
    background-color: #FFFFFF;
    background-color: var(--themeLight);
    padding: 10px;
    cursor: text;
}

/* ------------------------------------------------------------------------------------------ */
/* WYSIWIG EDITOR (New Editor) */
/* ------------------------------------------------------------------------------------------ */

div.cke_chrome { border: 1px sold #ced4da; }

.cke_inner .cke_top {
    border-color: var(--themeMediumGrey);
    background: var(--themeLightGrey);
}

.cke_inner .cke_bottom {
    border-color: var(--themeMediumGrey);
    background: var(--themeLightGrey);
}

.cke_inner a.cke_button_off:hover, 
.cke_inner a.cke_button_off:focus, 
.cke_inner a.cke_button_off:active {
	background: var(--themeMediumGrey);
}

.cke_inner .cke_combo_on a.cke_combo_button,
.cke_inner .cke_combo_off a.cke_combo_button:hover,
.cke_inner .cke_combo_off a.cke_combo_button:focus,
.cke_inner .cke_combo_off a.cke_combo_button:active {
	background: var(--themeMediumGrey);
}

/* ------------------------------------------------------------------------------------------ */

#TempusServaPage { clear: both;}

body {
	background-color: #f8f9fc;
	background-color: var(--pageBgColor);
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: .8rem;
	line-height: 1.42857143;
 	padding: 0px;
	margin:0px;
}

.skiptocontent a {
    display: block;
    outline: none;
    text-align: center;
    border: 0;
    overflow: hidden;
    padding: 0;
    left: 0;
    top: -60px;
    position: absolute;
    width: 100%;
    font-size: 1.3rem;
    line-height: 60px;
    height: 60px;
    overflow-wrap: normal;
    z-index: 9999;"
    -webkit-transition: .35s ease-out;
    transition: .35s ease-out;
}
.skiptocontent a:focus {
    top: 0;
    -webkit-transition: .35s ease-out;
    transition: .35s ease-out;
}

/* ------------------------------------------------------------------------------------------ */
/* BACKGROUND STYLES (Optional) */
/* ------------------------------------------------------------------------------------------ */

body.tsPageBgLogo {
    background-image: url(https://tempusserva.dk/share/background/customer-logo-01.svg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: initial;
    background-size: 200px;
    background-position-x: calc(100% - 40px);
    background-position-y: calc(100% - 50px);
}

body.tsPageBgImage {
    background: url(https://tempusserva.dk/share/background/ts-image-01.png) no-repeat;
    background-position: top left;
    background-size: cover;
}

body.tsPageBgBanner {
    background-image: url(https://tempusserva.dk/share/background/ts-banner-01.png);
    background-repeat: no-repeat;
    background-size: contain;
}

body.tsPageBgPattern {
    background-image: url(https://tempusserva.dk/share/background/ts-pattern-01.png);
    background-repeat: no-repeat;
    background-size: initial;
    background-position: bottom right;
}



/*
#bgContainerA {
    position: fixed;
    left: 0;
    height: 100vh;
    width: 1080px;
    z-index: -1;
    background-image: url(media/hexagon-grid-A.36.png);
    background-repeat: no-repeat;
    background-size: initial;
    background-position: top left;
}

#bgContainerZ {
    position: fixed;
    right: 0;
    height: 100vh;
    width: 1080px;
    z-index: -1;
    background-image: url(media/hexagon-grid-z.35.png);
    background-repeat: no-repeat;
    background-size: initial;
    background-position: bottom right;
}

#bgContainerA, #bgContainerZ { opacity: 0.3; }
*/

h1, h2 {
	color: #50e2c1;
	color: var(--pageHeaderColor);
	font-weight: 100;
}

h1 {
	font-size: 2.2rem;
	line-height: normal;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 66%;
}

h1 > i.fa {
	margin-right: 0.35rem; 
	display: none; /* Hides fa icon in h1 */
}

h2 {
	font-size: 1.8rem;
	margin-top: 0px;
}

h3 {
	color: #333333;
	color: var(--pageHeaderSubColor);
	font-weight: 100;
	font-size: 1.3rem;
	margin-top: 0px;
}

a, a:active, a:hover, a:focus, a:focus-within {
	color: #8c2db3;
	color: var(--pageLinkColor);
	cursor: pointer;
}

a:hover, a:focus, a:focus-within {
	text-decoration: underline;
}

.header {
	width: 100%;
	height: 60px;
	position:fixed;
	margin-bottom: 0px;
	background-color: #50e2c1;
	background-color: var(--headerBgColor);
}

.logo {
	width: 180px;
	height: 50px;
	position: absolute;
	top: 0px;
	left: 0px;
	line-height: 60px;
	margin-left: 60px;
}

.logo {
	background:url(https://www.tempusserva.dk/share/ts-logo_333.svg) no-repeat;
	background-position-x: 0px;
	background-position-y: center;
	opacity:0.6;
	background-size: contain;
	margin-top: 5px;
}

.logo:hover {
	opacity: 0.8;
	transition: 0.3s;
	text-decoration: none;
	cursor: pointer;
}

.tableListHeader a {
    color: #50e2c1;
    color: var( --themePrimary);
    text-decoration: none;
}

.tableListHeader .material-icon {
    font-size: inherit;
    vertical-align: middle;
    margin-right: 3px;
}

h1 .material-icons {
    font-size: inherit;
    vertical-align: middle;
    margin-right: 5px;
}

/* --- Hide icons in Headline -------------------------------------------------------------- */

.tableListHeader .fa { display: none; }
.tableListHeader .material-icons { display: none; }
h1 .material-icons { display: none; }

/* --- Global FA Icon Size ----------------------------------------------------------------- */

#TempusServaPage .fa { 
    font: normal normal normal 1em FontAwesome; 
}

/* ------------------------------------------------------------------------------------------ */
/* LOGIN PAGE */
/* ------------------------------------------------------------------------------------------ */

.LoginPage {
    position: absolute;
    width: 100vw;
    height: 100vh;
    /*background-color: var(--themePrimary);*/
}

.loginPageBg {
	background-color: var(--themePrimary);
}

.formLogin {
    background-color: #FFFFFF;
    background-color: var(--loginBgColor);
    border: 1px solid #dee2e6;
    border-color:var(--loginBorderColor);
    border-radius: 4px;
    width: max(90vw, 40%);
    max-width: 475px;
    min-width: 320px;
    margin: auto auto;
    padding: 30px;
    margin-top: 70px;
    position: relative;
    z-index: 10;
}

.formLogin:has(~ .tsOauth) form {
	margin-bottom: 30px;
}

.loginForgotPasswordLink {
	position: relative;
	top: -50px; 
}

.formLogin .label {
    white-space: wrap;
}

.formLogin .input-group-prepend {
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

.formLogin .input-group-addon {
    padding: 0.5rem .55rem;
}
.formLogin .input-group-addon span.material-icons {
    font-size: 20px;
}

.tsOauth {
	width: max(100vw, 40%);
	margin: auto auto;
	max-width: 475px;
	min-width: 320px;
	padding: 0 30px;
	position: relative;
	z-index: 15;
	margin-top: calc(-30px - 57px);
}

.tsOauth p {
    margin-bottom: 4px;
}

.tsOauth a {
	text-decoration: none;
	margin-right: 4px;
}

.tsOauth img { width: 34px; height: 34px; }

/* ------------------------------------------------------------------------------------------ */
/* BUTTON STYLES */
/* ------------------------------------------------------------------------------------------ */

.codeunitButtonMenu { margin-top: -10px; padding-bottom: 15px; }

.codeunitButtonMenu.btn-group { margin-right: 5px; margin-bottom: 5px; }

a.codeunitButton {
    background-color: #FFFFFF;
    background-color: var(--codeunitButtonBgColor);
    border-color: #ced4da;
    border-color: var(--codeunitButtonBorderColor);
    color: #5a626b;
    color: var(--codeunitButtonColor);
    font-size: 0.9rem;
}

a.codeunitButton:hover,
a.codeunitButton:active,
a.codeunitButton:focus {
    background-color: #e9ecef;
    background-color:var(--codeunitButtonBgColorHover);
    border-color: #c5c5ce;
    border-color: var(--codeunitButtonBorderColorHover);
    color: #5a626b;
    color: var(--codeunitButtonColor);
}

/* --- Button Default ---------------------------------------------------------------------- */

.btn-default {
    color: #5a626b;
    color: var(--defaultButtonColor);
    background-color: #FFFFFF;
    background-color: var(--defaultButtonBgColor);
    border-color: #ced4da;
    border-color: var(--defaultButtonBorderColor);
}

.btn-default a, a.btn-default {
    color: #5a626b;
    color: var(--defaultButtonColor);
    text-decoration: none;
}

.btn-default.active, .btn-default.focus, .btn-default:active, .btn-default:focus, .btn-default:hover, .open>.dropdown-toggle.btn-default {
    color: #5a626b;
    color: var(--defaultButtonColorHover);
    background-color: #e9ecef;
    background-color: var(--defaultButtonBgColorHover);
    border-color: #ced4da;
    border-color: var(--defaultButtonBorderColorHover);
}

/* --- ToolBar Buttons ---------------------------------------------------------------------- */

.toolBar .btn-group { height: 35px;}

.toolBar .btn-default {
	color: #FFFFFF;
	color: var(--toolbarButtonColor);
	background-color: #8e9aa7;
	background-color: var(--toolbarButtonBgColor);
	border-color: #8e9aa7;
	border-color: var(--toolbarButtonBorderColor);
}

.toolBar .btn-default a {
	color: var(--toolbarButtonColor);
	text-decoration: none;
}

.toolBar .btn-default a:hover {
	color: #5a626b;
	color: var(--toolbarButtonColorHover);
	background-color: #8e9aa7;
	background-color: var(--toolbarButtonBgColorHover);
	text-decoration: none;
}

.toolBar .btn-group span:last-of-type {
	margin-left: 5px;
}

.btn-group>.dropdown:not(:first-child)>.btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.btn-group>.dropdown:not(:last-child)>.btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* --- Button Primary ---------------------------------------------------------------------- */

div.swal2-container div.swal2-actions button.swal2-styled,
.btn-primary {
    color: #336666;
    color: var(--primaryButtonColor);
    background-color: #50e2c1;
    background-color: var(--primaryButtonBgColor);
    border-color: #50e2c1;
    border-color: var(--primaryButtonBorderColor);
}

div.swal2-container div.swal2-actions button.swal2-styled a,
.btn-primary a {
    color: #336666;
    color: var(--primaryButtonColor);
    text-decoration: none;
}

div.swal2-container div.swal2-actions button.swal2-styled:hover,
div.swal2-container div.swal2-actions button.swal2-styled:active,
div.swal2-container div.swal2-actions button.swal2-styled:focus,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    color: #003333;
    color: var(--primaryButtonColorHover);
    background-color: #40d2c1;
    background-color: var(--primaryButtonBgColorHover);
    border-color: #40d2c1;
    border-color: var(--primaryButtonBorderColorHover);
    opacity: 1;
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
	color: #003333;
    color: var(--primaryButtonColorHover);
    background-color: #40d2c1;
    background-color: var(--primaryButtonBgColorHover);
    border-color: #40d2c1;
    border-color: var(--primaryButtonBorderColorHover);
    opacity: 1;
}

.btn-text, .btn-text:active {
	color: inherit;
	background-color: transparent;
	border-color: transparent;
	font-size: inherit;
	padding: 0px;
	box-shadow: none;
	outline: 0;
	width: 100%;
	text-align: left;
}

.btn-sm { cursor: pointer; }

[type=reset], [type=submit], button, html [type=button] { -webkit-appearance: none; }

a.btn.updateSubmit.disabled { pointer-events: all; }

/* --- Double icon size Adjustment --------------------------------------------------------- */

.btn .fa:nth-child(2) {
	margin-left: -4px;
	font-size: 75%;
}

.doubleIcon {
	float:left;
    position: relative;
}

.doubleIcon img:nth-child(2) {
    margin-left: -12px;
    zoom: 80%;
}

/* --- viewList Button Styles -------------------------------------------------------------- */

.viewList .btn {
    color: #333333;
    color: var(--listButtonColor);
    background: transparent;
    background-color: transparent;
    background-color: var(--listButtonBgColor);
    border: none;
    border-radius: 4px;
    margin-left: 0px;
    padding: 4px 6px;
}

.viewList .btn:hover {
    background-color: var(--themeMediumGrey);
    background: var(--themeMediumGrey);
    border: none;
}

.viewList .btn:focus {
    background-color: var(--themeGrey);
    background: var(--themeGrey);
    border: none;
}

.viewList .fieldFilter {
    margin-left: 5px;
    margin-top: -3px;
}

.viewList .fa-sort {
   padding-left: 2px;
   padding-right: 2px;
}

/* --- Dashboard viewList Button Styles  --------------------------------------------------- */

.tsDashboardPage .viewList .btn:hover {
    background-color: var(--themeMediumGrey);
    background: var(--themeMediumGrey);
    border: none;
}

tsDashboardPage .viewList .btn:focus {
    background-color: var(--themeGrey);
    background: var(--themeGrey);
    border: none;
}

/* --- Dropdown Item Styles  ---------------------------------------------------------------- */

.dropdown-item {
	color: #5a626b;
	color:var(--themeGreyDark);
}

.dropdown-item:focus, 
.dropdown-item:hover {
    color: #333333;
    background-color: var(--themeLightGrey);
}

.dropdown-item > i { min-width: 16px; }
.dropdown-item > .material-icons { margin-right: 3px; }

/* ------------------------------------------------------------------------------------------ */
/* PERSONAL MENU */
/* ------------------------------------------------------------------------------------------ */

.tsToolbarPersonal {
    padding: 13px 0px 0px 0px;
    height: 60px;
    margin-right: 40px;
    margin-left: 180px;
    margin-top: -60px;
    border-width: .2rem;
    text-align: right;
}

.btn-personal {
    color: #333333;
    color: var(--headerColor);
    background-color: transparent;
    border-color: transparent;
    font-size: 0.9rem;
    height: 32px;
    line-height: 29px;
    padding: 0px 0px 0px 8px;
    opacity: 0.6;
}

.btn-personal:hover {
	opacity: 0.8;
	transition: 0.3s;
}

.toolBarPersonal .btn:active, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.0rem rgba(0,123,255,.25);
}

.avatar {
	width: 30px;
	height: 30px;
	display: inline-block;
	background:url(avatar_333.svg) no-repeat;
	margin-left: 5px;
}

.tsToolbarPersonal .dropdown-menu .personal {
	min-width: 180px;
}

.dropdown-item.personal,
.dropdown-item.language {
	color: #333333;
	color: var(--themeGreyDark);
	font-size: 0.9rem;
}

.tsToolbarPersonal .dropdown-menu .fa {
    color: #333333;
    color: var(--headerColor);
    float: left;
    margin: 4px 8px 0px -8px;
    font: normal normal normal 1rem/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* --- Quick Logout Button  ----------------------------------------------------------------- */

#menuLogoutQuick {
    display: inline-block;
    padding-left: 20px;
}

#menuLogoutQuick .fa { line-height: 4px; }
#menuLogoutQuick { display: none; } /* Hide Quick Logout */

/* --- Language Selector --------------------------------------------------------------------- */

.tsShowNarrow { display: none; }
.tsShowWide { display: inline-block; }

/* ------------------------------------------------------------------------------------------ */
/* APPLICATION NAVIGATION */
/* ------------------------------------------------------------------------------------------ */

#tsSidenav {
    background-color: #FFFFFF; /* White */
    background-color: var(--sidebarBgColor); /* White */
    opacity: 0.9;
    opacity: var( --sidebarOpacity);
    height: 100vh;
    width: 0; /* 0 width - change this with JavaScript */
    position: absolute; /* Absolute: relative to header - Fixed: Stay in place */
    top: 0; /* Stay at the top */
    left: 0;
    overflow-x: hidden; /* Disable horizontal scroll */
    overflow-y: hidden; /* Disable vertical scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

#tsSidenav.tsSidenavOpen,
#tsSidenav:hover:not(.tsSidenavOpen):not(.tsSidenavClose) {
    width: 250px;
    width: var(--sidebarWidth);
    opacity: 0.9;
    opacity: var(--sidebarOpacity);
}

#tsSidenav {
	width: 1px;
	opacity: 0;
}

#tsSidenav:hover:not(.tsSidenavOpen) .closebtn { display: none; }

/* --- Navigation menu links -------------------------------------------------------------- */

#tsSidenav a {
    color: #6f7c83;
    color: var(--sidebarColor);
    padding: 3px 8px 3px 36px;
    text-decoration: none;
    font-weight: 100;
    display: block;
    transition: 0.3s;
    text-align: left;
}

#tsSidenav a:hover {
    color: var(--sidebarColorHover);
    opacity: 1;
    margin-left: 2px;
}

#tsSidenav .card-body a:hover {
    color: var( --pageLinkColor);
}

.burger {
    display: block;
    position: relative;
    height: 60px;
    width: 60px;
    padding: 20px;
    color: var(--headerColor);
    font-size: 20px;
    line-height: 60px;
    cursor: pointer;
    opacity: 0.6;
}

.burger:hover {
    opacity: 0.8;
    transition: 0.3s;
}

#tsSidenav .closebtn {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    font-weight: 600;
}

#tsSidenav .closebtn .material-icons {
    font-size: 28px;
    font-weight: 600;
}

#tsSidenav .closebtn:hover {
    opacity: 1;
    cursor: pointer;
}

/* --- Accordion Style Navigation ------------------------------------------------------------ */

#tsSidenav > #accordion {
    display: block;
    height: 85vh;
    padding-bottom: 20px;
}

/* --- Hide scrollbar, keep functionality ----------------------------------------------------- */

#tsSidenav > #accordion::-webkit-scrollbar { display: none; }
#tsSidenav > #accordion { -ms-overflow-style: none; }

#tsSidenav .card {
    background-color: var(--themeLight);
    border: none;
    min-width: 250px;
    border-radius: .0rem;
}

#tsSidenav .card-header {
    padding: 0.2rem 0.2rem 0.2rem 0.2rem;
    margin-bottom: 0;
    background-color: transparent;
    border-bottom: none;
}

#tsSidenav .card-header:first-child {
    border-radius: 0px;
}

#tsSidenav .card-body {
	padding: 0rem 0.2rem;
}

#tsSidenav .card-header a {
	padding: 22px 8px 4px 15px;
	font-size: .7rem;
	font-weight: 700;
	color: var(--sidebarColor);
	text-transform:uppercase;
	display: block;
	text-align: left;	
}

#tsSidenav .card-body a {
	font-size: .9rem;
}

#tsSidenav .fa, #tsSidenav img {
    float: left;
}

#tsSidenav img {
    width: 20px;
    height: auto;
    margin: 0px 10px 0px 0px;
}

/* --- Optional Sidebar Nav Icons -----------------------------------------------------------

       Optionally you can use Fontawsom and Google Material icons in the sidebar navigation to 
	   enhance the user experience. The icons are placed as inline-block elements with the 
	   relevant "fa" or "material-icons" reference. 
--------------------------------------------------------------------------------------------- */

#tsSidenav .card-header a:hover, 
#tsSidenav .card-header a:focus {
   color: var(--pageBreadcrumbLinkColor);
   margin-left: 2px;
}

#tsSidenav .fa {
   font: normal normal normal 18px/1 FontAwesome;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   display: inline-block;
   margin: 0px;
   width: 25px;
   color: inherit;
}

/* --- Google Icon Styles ------------------------------------------------------------------- */

.card-link .material-icons { 
    vertical-align: middle;
    margin-right: 6px; 
}

.card-body .material-icons {
    font-size: 20px;
    vertical-align: middle;
    margin: 0px 5px 0px 0px;
    color: inherit;
    opacity: inherit;
}

/* ------------------------------------------------------------------------------------------ */
/* VIEW LIST - TABLE STYLES */
/* ------------------------------------------------------------------------------------------ */

.tableForm .viewList {
    max-width: calc(80vw - 50px);
    max-width: 960px;
}

.table-responsive {
    display: table; 
    width: 100%;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    display: block;
    margin-bottom: 1rem;
}

.viewList > table { 
    white-space: nowrap; 
}

.table {
	width: 100%;
    border-collapse: separate;
    border-spacing: 0;
	background-color: var(--pageBgColor);
	margin-bottom: 0rem;
}

.table-bordered td, .table-bordered th {
	border: 1px solid var(--listBorderColor);
	border-color: var(--listBorderColor);
}

.table thead th,
.table tbody tr:first-of-type th {
	text-transform: uppercase;
	padding: .55rem;
	vertical-align: bottom;
	text-align: left;
    border-bottom: 2px solid var(--listBorderColor);
	border-color: var(--listBorderColor);
	
}

/* --- Sticky Table Header ------------------------------------------------------------------ */

.table>tbody>tr>th,
.table>thead>tr>th {
    text-transform: uppercase;
    padding: .55rem;
    vertical-align: bottom;
    background-color: var(--pageBgColor);
    border-bottom: 2px solid var(--listBorderColor);
    border-color: var(--listBorderColor);
    font-size: 0.8rem;
    text-align: left;
}

/* ------------------------------------------------------------------------------------------ */

.table>tbody>tr>th a,
.table>thead>tr>th a {
    font-size: .8rem;
    color: #333333;
    color: var(--pageColor);
    vertical-align: text-top;
}

.table>tbody>tr>th i
.table>thead>tr>th i {
    font-size: 0.9rem;
}

.table>tbody>tr>th.alignRight {
    text-align: right;
}

.table>tbody>tr>td {
    padding: .55rem;
    vertical-align: top;
    text-align: left;
    min-width: 100px;
}

.table.tableImages>tbody>tr>td,
.table.tableVideos>tbody>tr>td {
    padding: .55rem .275rem;
}
.table.tableImages>tbody>tr>td:first-of-type,
.table.tableVideos>tbody>tr>td:first-of-type {
    padding-left: .55rem;
}
.table.tableImages>tbody>tr>td:last-of-type,
.table.tableVideos>tbody>tr>td:last-of-type {
    padding-right: .55rem;
}

.table>tbody>tr>td.alignRight {
    text-align: right;
}

.tableList td:first-child {
    padding: 0px;
    width: 5%;
    min-width: 60px;
}

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #ffffff;
}

/* --- Priority field in viewLists ------------------------------------------------------------ */

#viewList .btn-sort .btn {
    padding-top: 2px;
    padding-bottom: 0;
}

#viewList .btn-sort .btn-sortup {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

#viewList .btn-sort .btn-sortdown {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

#viewList .btn-sort .label {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* --- Progress Bar in viewLists ------------------------------------------------------------ */

.viewList .progress {
   height: 1rem;
   margin-top: 3px;
}

.optionCompactTable .table>tbody>tr>td .progress { margin-top: 0px; }

.viewList .progress-bar {
    color: #e9ecef;
}

/* --- Color Progressions -------------------------------------------------------------------

       To test and/or use one of the predefined color progressions below, simply comment out
	   the progressions you don't need. If you don't change anything Color Progression 04 
	   (Blue to Green) will take effect. 
---------------------------------------------------------------------------------------------- */

/* --- Color Progression 01 (Grayscale) ------------------------------------------------------- */
.viewList .progress20 { background-color: #999999; }
.viewList .progress40 { background-color: #888888; }
.viewList .progress60 { background-color: #777777; }
.viewList .progress80 { background-color: #666666; }
.viewList .progress100 { background-color: #333333; }

/* --- Color Progression 02 (Vivid) ----------------------------------------------------------- */
.viewList .progress20 { background-color: #fb5a1c; }
.viewList .progress40 { background-color: #ffc801; }
.viewList .progress60 { background-color: #9102fd; }
.viewList .progress80 { background-color: #007bff; }
.viewList .progress100 { background-color: #20c997; }

/* --- Color Progression 03 (Orange to Purple) ------------------------------------------------ */
.viewList .progress20 { background-color: #ff8969; }
.viewList .progress40 { background-color: #f8747c; }
.viewList .progress60 { background-color: #e16790; }
.viewList .progress80 { background-color: #be60a1; }
.viewList .progress100 { background-color: #775caf; }

/* --- Color Progression 04 (Blue to Green) --------------------------------------------------- */
.viewList .progress20 { background-color: #407eb3; }
.viewList .progress40 { background-color: #49acd2; }
.viewList .progress60 { background-color: #49bcd6; }
.viewList .progress80 { background-color: #4ad1d8; }
.viewList .progress100 { background-color: #50e2c1; }


/* --- Listview Hover on Row ----------------------------------------------------------------- */

.viewList thead tr:hover { background-color: transparent; }
.viewList tbody tr:hover { background-color: #f0f6f9; cursor: pointer; }
.tableFiles tbody tr:hover { background-color: #f0f6f9; }

/* --- Remove margin bottom on nested tables -------------------------------------------------- */

.table-responsive .table-responsive {
    margin-bottom: 0rem;
}

/* --- ClickRecord Private Styles ------------------------------------------------------------- */

tr .fa {
	opacity: 0.2;
}

tr:hover .fa,
tr .TriState .fa {
  opacity: 1;
}

.btn-private {
	color: #333333;
	color: var(--pageColor);
	padding: 4px 6px;
	margin-left: 0px;
	background: #e0fff8;
	border-radius: 4px;
}

.btn-private:hover {
	background: #b9ffef;
}

.clickRecord, .fieldFilter, .columnFilter, .listSort, .fieldSort {
    color: #333333;
    color: var(--pageColor);
    font-size: .85rem;
    padding: 0rem 0rem 0rem 0rem;
}

.fieldSort a {
	color: #333333;
	color: var(--pageColor);
	text-decoration: none;
}

.clickRecord.btn {
    width: 90%;
    border: none; 
    background: none; 
    display: block; 
    padding-top: 8px; 
    padding-bottom: 9px;  
    margin: 5% 0% 5% 5%;
}

.clickRecord .fa { opacity: 0.2; }


/* --- Green and Red Markers ---------------------------------------------------------------- */

span[style*="green"], span[class*="green"] {
    color: #096f58 !important;
    background: #7efbb7;
    padding: 0px 5px 0px 5px;
    border-radius: 3px;
}

span[style*="red"], span[class*="red"] {
    color: #a7175f !important;
    background: #ffc9d3;
    padding: 0px 5px 0px 5px;
    border-radius: 3px;
}

/* --- Narrow Columns in Lists --------------------------------------------------------------- */

.isNarrow {
    width: 30px;
}

.isNarrow>a:not(.fieldFilter) {
    display: inline-block;
    width: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: text-bottom;
}

/* ------------------------------------------------------------------------------------------- */
/* ALERTS */
/* ------------------------------------------------------------------------------------------- */

.alert-not-urgent, 
.alert-urgent, 
.alert-warning,
.alert {
    padding: 3px 6px 3px 6px;
    margin-left: -6px;
    border-radius: 4px;
}

.alert {
    color: inherit;
    border: 1px solid transparent;
    background-color: transparent;
}

.alert-warning {
    color: #8a6d3b;
    background-color: #fff7cc;
    border-color: #8c6321;
}

.alert-urgent {
    color: #b73838;
    background-color: #fdd7d7;
    border-color: #fdd7d7;
}

.alert-not-urgent {
    color: #467f6d;
    background-color: #a6f9df;
    border-color: #a6f9df;
}

/* ------------------------------------------------------------------------------------------ */
/* PAGINATION */
/* ------------------------------------------------------------------------------------------ */

.pager {
    margin-top: .9rem;
}

.pagerCount {
    margin-left: 10px;
    line-height: 2.2rem;
}

.pagerLink {
    color: #8e9aa7;
    padding-top: 10px;
}

.pagerLink:hover { 
    color: #5a626b; 
}

.pagerPagesize {
    color: #8e9aa7;
}

.pagerPagesize:hover {
    color: #5a626b;
}

.pagerInfo {
	margin-left: 0px;
	margin-right: 5px;
}

.pagerCount {
    margin-left: 8px;
    margin-right: 8px;
    line-height: 2.2rem;
}

.pagerSize {
	margin-right: 8px;
}

.btn-group-sm>.btn, .btn-sm {
    padding: .5rem;
    font-size: .875rem;
    line-height: .85rem;
    min-height: 2rem;
    min-width: 2rem;
}

.pagerSelected {
	color: #8e9aa7;
	background-color: #e9ecef;
}

/* --- Filter Parameter Styles --------------------------------------------------------------- */

.param { padding: 10px 0px 10px 0px; }
.param .label { font-size: 0.8rem; background-color: var(--themePrimary); }
.param .label a { color: var(--themePrimaryDark); }

.label {
    color: #333333;
    color: var(--pageColor);
    display: inline-block;
    padding: 0.3em 0.8em 0.3em;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    margin-right: 0px;
    margin-bottom: 3px;
}

.paramSort .fieldGroup {
    background: none;
    border: none;
    font-size: 100%;
    padding: 0px 2px 3px 2px;
}

.paramSort .fieldGroup:hover {
     color: #333333;
     color: var(--pageColor);
     background: none;
     border: none;
}

/* ------------------------------------------------------------------------------------------ */
/* MAIN (wraps all content below header) */
/* ------------------------------------------------------------------------------------------ */

main {
    transition: margin-left .5s;
    padding: 75px 40px 60px 40px;
    max-width: 1600px; /* Control content width, all other elements respond to this width */
    min-width: 320px;
    margin: auto auto;
}
main.full-width {
    max-width: 100%;
}

/* --- BS3 legacy mainContent wraps all content ---------------------------------------------- */

.mainContent {
    transition: margin-left .5s;
    padding: 75px 40px 20px 40px;
    max-width: 1600px; /* legacy content width. To be deprecated */
    min-width: 375px;
    margin: auto auto;
}

.showCommand main,
.sendCommand main,
.editCommand main { 
    max-width: 1280px; 
}

/* ------------------------------------------------------------------------------------------ */
/* BREADCRUMB */
/* ------------------------------------------------------------------------------------------ */

.breadcrumb {
	color: #8e9aa7;
	color: var(--pageBreadcrumbTextColor);
	padding: 0px;
	margin: 0px 0px 15px 0px;
	list-style: none;
	background-color: transparent;
	border-radius: 4px;
	font-size: 0.7rem;
	white-space: nowrap;
}

.breadcrumb ol { white-space: nowrap; }

.breadcrumb li {
    max-width: 25%;
    text-overflow: ellipsis;
    overflow: hidden;
}

.breadcrumb-item.active {
    color: #6c757d;
}

.breadcrumb-item a {
    color: #8c2db3;
    color: var(--pageBreadcrumbLinkColor);
}

/* --- Hide icons in Breadcrumb -------------------------------------------------------------- */

.breadcrumb-item .material-icons { display: none; }
.breadcrumb-item .fa { display: none; }

/* ------------------------------------------------------------------------------------------- */
/* TOOLBAR MENU */
/* ------------------------------------------------------------------------------------------- */

.container {
	padding:0px;
	width: 100%;
	max-width: none;
}

.toolBar {
	padding: 1rem 0rem 1.5rem 0rem;
	margin-right: 0;
	margin-left: 0;
	margin-top: -3.8rem;
	border-width: .2rem;
	text-align: right;
}

.dropdown-menu {
	padding: .3rem 0rem;
}

.toolBar .dropdown-menu>li>a {
	color: #333333;
	color: var(--pageColor);
	padding: 5px 20px;
}

.dropdown-divider {
    margin: .3rem 0rem;
    border-top: 1px solid #e9ecef;
}

.toolBar .btn {
	font-size: .9rem;
}

.toolBar .btn-group {
	margin-left: 5px; /* not standard - pushes the toolbar button groups appart */
}

.toolBar .btn-group:first-of-type {
    margin-left: 0px;
}

.toolBar .fa {
	padding: 3px 1px;
}

.toolBar .btn:hover {
	color: #5a626b;
}

.toolBar .dropdown-item img {
    margin-left: -10px;
    margin-right: 5px;
}

.toolBar .dropdown-item .fa {
    margin-left: -10px;
    margin-right: 5px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* --- Custom Actions ------------------------------------------------------------------------ */

.customActions {
	padding: 3rem 0rem 1rem 0rem;
	margin-right: 0;
	margin-left: 0;
	margin-top: -3.8rem;
	border-width: .2rem;
	text-align: left;
}

/* ------------------------------------------------------------------------------------------ */
/* DASHBOARD PAGE */
/* ------------------------------------------------------------------------------------------ */

.tsDashboardPage {
    margin-left: -15px;
    margin-right: -15px;
}

.tsDashboardPage > div {
    clear: both; 
}

.zoneNorth {
    margin-top: 0px;
}

.tsWidget {
   border: none;
   background: transparent;
   display: inline-block;
   box-shadow: none;
   float: left;
   margin-bottom: 30px;
}

.tsWidget .btn-default {
    color: #333333;
    color: var(--pageColor);
    background-color: transparent;
    border: 0px;
}

.tsWidget .btn-default:hover {
	background-color: #e6e6e6;
	background-color: var(--themeGrey);
}

.tsWidgetInnerBC {
    border: 1px solid #e0e4e8;
	border-color: var(--listBorderColor);
    background: #ffffff;
    box-shadow: 1px 1px 3px #e0e4e8;
    border-radius: 2px;
    padding: 30px;
}
.tsWidgetInnerBC h3 {
	max-width: 80%;	/* Buttons are to the left */
}

.zoneSouth .tsWidget:last-of-type { margin-bottom: 70px; }

/* --- Dashboard Widget Tests ---------------------------------------------------------------- */

.tsWidgetInnerBC {
    border: 1px solid #e0e4e8;
	border-color: var(--listBorderColor);
    background: #ffffff;
    -webkit-box-shadow: 0 0 35px 0 rgba(154,161,171,.15);
    box-shadow: 0 0 35px 0 rgba(154,161,171,.15);
    border-radius: .25rem;
    padding: 1.5rem;
}

.tsWidgetIcon {
    background-color: #8c2db32e;
    padding: 8px 0px;
    color: #8c2db3;
    border-radius: .25rem;
    position: absolute;
    top: 1.5rem;
    right: 2.5rem;
    text-align: center;
    min-width: 2.1rem;
}

#TempusServaPage .tsWidgetIcon .fa { font-size: 1rem; }

.tsWidgetAmount {
    color: var( --themeDark);
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    margin: .5rem 0rem;
}

.tsWidgetDev { 
    color: #98a6ad; 
    display: inline-block;
    vertical-align: text-bottom;
    width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tsWidgetControl {
    float: right;
    color: #98a6ad;
}

/* ------------------------------------------------------------------------------------------- */

:root { --WidgetHeight: 150px; }
.chart-js-target { height: 300px; }
.tsDsHeight0 { height: fit-content !important; }
.tsDsHeight1 { height: calc(var(--WidgetHeight) * 1); }
.tsDsHeight1 .table-responsive, .tsDsHeight1 .chart-js-target { max-height: calc(var(--WidgetHeight) * 1 - 97px); }
.tsDsHeight2 { height: calc(var(--WidgetHeight) * 2); }
.tsDsHeight2 .table-responsive, .tsDsHeight2 .chart-js-target { max-height: calc(var(--WidgetHeight) * 2 - 97px); }
.tsDsHeight3 { height: calc(var(--WidgetHeight) * 3); }
.tsDsHeight3 .table-responsive, .tsDsHeight3 .chart-js-target { max-height: calc(var(--WidgetHeight) * 3 - 97px); }
.tsDsHeight4 { height: calc(var(--WidgetHeight) * 4); }
.tsDsHeight4 .table-responsive, .tsDsHeight4 .chart-js-target { max-height: calc(var(--WidgetHeight) * 4 - 97px); }
.tsDsHeight5 { height: calc(var(--WidgetHeight) * 5); }
.tsDsHeight5 .table-responsive, .tsDsHeight5 .chart-js-target { max-height: calc(var(--WidgetHeight) * 5 - 97px); }
.tsDsHeight6 { height: calc(var(--WidgetHeight) * 6); }
.tsDsHeight6 .table-responsive, .tsDsHeight6 .chart-js-target { max-height: calc(var(--WidgetHeight) * 6 - 97px); }
.tsDsHeight7 { height: calc(var(--WidgetHeight) * 7); }
.tsDsHeight7 .table-responsive, .tsDsHeight7 .chart-js-target { max-height: calc(var(--WidgetHeight) * 7 - 97px); }
.tsDsHeight8 { height: calc(var(--WidgetHeight) * 8); }
.tsDsHeight8 .table-responsive, .tsDsHeight8 .chart-js-target { max-height: calc(var(--WidgetHeight) * 8 - 97px); }
.tsDsHeight9 { height: calc(var(--WidgetHeight) * 9); }
.tsDsHeight9 .table-responsive, .tsDsHeight9 .chart-js-target { max-height: calc(var(--WidgetHeight) * 9 - 97px); }
.tsDsHeight10 { height: calc(var(--WidgetHeight) * 10); }
.tsDsHeight10 .table-responsive, .tsDsHeight10 .chart-js-target { max-height: calc(var(--WidgetHeight) * 10 - 97px); }
.tsDsHeight11 { height: calc(var(--WidgetHeight) * 11); }
.tsDsHeight11 .table-responsive, .tsDsHeight11 .chart-js-target { max-height: calc(var(--WidgetHeight) * 11 - 97px); }
.tsDsHeight12 { height: calc(var(--WidgetHeight) * 12); }
.tsDsHeight12 .table-responsive, .tsDsHeight12 .chart-js-target { max-height: calc(var(--WidgetHeight) * 12 - 97px); }

/* ------------------------------------------------------------------------------------------- */

.text-success { color: #0acf97!important }
.text-danger { color: #fa5c7c!important }

/* Big centered icon on buttons*/
.tsWidgetButton {
   text-align: center;
   width: auto !important;
}
.tsWidgetButton .fa {
    font-size: 90px;
    display: block;
}

.doubleClickGuard > * {
    animation: rotation 1s linear infinite;
    width: 21px;
    height: 21px;
}
.doubleClickGuard > .material-icons {
    font-size: 21px;
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ------------------------------------------------------------------------------------------- */

#WidgetSpacer, #spacer {
	height: 35px;
}

#tsDashboardList h1 { 
    display: inline-block; 
    max-width: none;
}

#tsDashboardList h1 i {display: none; } 

#tsDashboardList .btn { 
    padding-left: 0px; 
    opacity: 1;
    height: auto;
}

#tsDashboardList .dropdown-toggle::after {
    color: #8e9aa7;
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .3em;
    vertical-align: 2rem;
    content: "";
    border-top: .4em solid;
    border-right: .4em solid transparent;
    border-bottom: 0;
    border-left: .4em solid transparent;
}

#tsDashboardList .dropdown-menu .fa {
    color: #333333;
    color: var(--pageColor);
    float: left;
    margin: 4px 8px 0px -8px;
    font: normal normal normal 1rem/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.tsDashboardPage .table>tbody>tr>th {
    font-size: 0.8rem;
}

.tsWidget .chartSelector { display: none; }
.tsWidget #chartExport { display:none; }

/* --------------------------------------------------------------------------------------------- */

.zoneMenu {
    padding: 1rem 0rem 1.5rem 0rem;
    margin-right: 15px;
    margin-left: 0;
    margin-top: -3.8rem;
    border-width: 0.2rem;
    text-align: right;
}

.zoneMenu > div {
    position: relative;
    display: -ms-inline-flexbox;
    display: inline-flex;
    vertical-align: middle;
    margin-bottom: 4px;
    margin-left: 5px;
}

.zoneMenu .btn { font-size: 0.9rem; }
.zoneMenu span { margin-left: 5px; }


/* ------------------------------------------------------------------------------------------ */
/* PAGE WINDOW LAYOUT  */
/* ------------------------------------------------------------------------------------------ */

.pageWindow {
   display: block;
   background: var(--themeLightGrey);
   padding: 30px;
   border: 1px solid #e0e4e8;
   border-color: var(--listBorderColor);
   border-radius: .25rem;
   margin-bottom: 20px;
   box-shadow: 1px 1px 3px #e0e4e8;	
}

.pageWindowLayout .pageWindowLeft {
    float: left;
    width: 30%;
    background-color: var(--themeLight);
}

.pageWindowLayout .pageWindowRight {
    float: right;
    width: 68%;
    background-color: var(--themeLight);
}

.pageWindowLayout .pageWindowLeft > tr,
.pageWindowLayout .pageWindowRight > tr {
    display: block;
}

.pageWindowLayout .pageWindowLeft > tr > th,
.pageWindowLayout .pageWindowRight > tr > th {
    display: block;
    width: 100%;
    padding: 0px;
}

.pageWindowLayout .tableForm > tbody > tr > td {
    width: 100%;
}

.pageWindowLayout .pageWindowLeft > tr > td,
.pageWindowLayout .pageWindowRight > tr > td {
    display: block;
    padding: 0px;
    padding-bottom: 15px;
}

.pageWindowLayout .pageWindowLeft td:first-child {
    border: 0px solid transparent;
}

.pageWindowLayout .pageWindowLeft .thumbnail { 
    display: inline-block; 
    margin: 5px;
}

.pageWindowLayout .pageWindowLeft .thumbnail + a {
    position: absolute;
    margin: 10px 0px 0px -25px;
}

.pageWindowLayout .pageWindowLeft > tr:last-child > td,
.pageWindowLayout .pageWindowRight > tr:last-child > td {
    display: block;
    padding: 0px;
    padding-bottom: 0px;
}

/* --- Page Window Layout - Image Table ------------------------------------------------------ */

.pageWindowLayout .pageWindow .tableImages { 
    display: block; 
    border: 0px; 
    margin-bottom: 5px; 
    background-color: transparent; 
}
.pageWindowLayout .pageWindow .tableImages tr { 
    display: block; 
    border-bottom: 0px; 
}
.pageWindowLayout .pageWindow .tableImages tr td { 
    display: inline-block;
    float: left; 
    width: fit-content; 
    border: 1px solid var(--themeGrey); 
    padding: 0rem;
    margin: 0rem;
}

/*.tableImages .thumbnail img { width: 100%; min-width: 50px; object-fit: cover; }
.tableImages .thumbnail img { width: 88px; height: 88px; min-width: 50px; object-fit: cover; }*/

.pageWindowLayout tbody#PAGE_0 th { display: none; }

/* --- Page Window Layout - Sub Table ------------------------------------------------------- */

.tableForm .pageWindowRight div.viewList > table {
	display: block;
}

.tableForm .pageWindowRight div.viewList > table thead tr {
    display: table-row;
}

.tableForm .pageWindowRight div.viewList > table thead th {
    display: table-cell;
    padding: .55rem;
}

.tableForm .pageWindowRight div.viewList > table tbody {
    display: table-row-group;
}

.tableForm .pageWindowRight div.viewList > table tbody tr {
    display: table-row;
}

.tableForm .pageWindowRight div.viewList > table tbody td {
    display: table-cell;
    padding: .55rem;
}

.tableForm .pageWindowRight div.viewList > table tbody td:first-child {
    padding: .0rem;
}

.tableForm .pageWindowRight div.viewList > table tbody td.alignRight {
    text-align: left;
}

/* --- Page Window Layout - Status & Save --------------------------------------------------- */

.pageWindowLayout #PAGE_999999,
.pageWindowLayout #PAGE_0 {
	float: right;
	width: 68%;
}

.pageWindowLayout #PAGE_999999 tr,
.pageWindowLayout #PAGE_0 tr {
    display: block;
}

.pageWindowLayout #PAGE_999999 th,
.pageWindowLayout #PAGE_0 th,
.pageWindowLayout #PAGE_999999 td,
.pageWindowLayout #PAGE_0 td {
    display: block;
    width: 100%;
    padding: 0px;
}

.pageWindowLayout #PAGE_999999 td,
.pageWindowLayout #PAGE_0 td {
    margin-bottom: 10px;
}


/* ------------------------------------------------------------------------------------------ */
/* TAB NAVIGATION - In Page Tab Navigation Styles */
/* ------------------------------------------------------------------------------------------ */

/* --- Bootstrap 4 Structure ---------------------------------------------------------------- */

.nav-tabs {
    border-bottom: 1px solid #dee2e6;
	border-color: var(--listBorderColor);
    margin-bottom: 10px;
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-color: #dee2e6;
	border-color: var(--listBorderColor);
    background-color: #fcfcfd;
}

.nav-tabs .nav-link.disabled {
    color: #6c757d;
    background-color: transparent;
    border-color: transparent;
	cursor: default;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #495057;
    background-color: transparent;
    border-color: #dee2e6;
	border-color: var(--listBorderColor);
}

/* --- Pill Style Navigation ----------------------------------------------------------------
       Tab Navigation is used by default. To make use of Pill Style Navigation, simply 
	   comment out the Tab Style Navigation declarations below. 
--------------------------------------------------------------------------------------------- */

.formpageselector { max-width: 70%; }

.tablePageSelector > span > img {
    display: none;
}

.formpageselector a.btn {
    margin: 1px -1px 2px 0px;
}

.tablePageSelectorElement a.btn {
    color: #333333;
    color: var(--pageColor);
    border-color: #ced4da;
    background-color: #FFFFFF;
    font-size: 75%;
	padding: .3rem .5rem;
}

.tablePageSelectorElement a.btn:hover {
    background-color: #f9fafd;
}

.tablePageSelectorElementActive a.btn {
    color: #333333;
    color: var(--pageColor);
    background-color: #f9fafd;
    border-color: #ced4da;
    font-size: 75%;
    padding: .3rem .5rem;
}

/* --- Tab Style Navigation ----------------------------------------------------------------- */

.formpageselector { max-width: 100%; }

.formpageselector .tablePageSelector {
    margin-bottom: 5px;
    padding-bottom: 0px;
    border-bottom: 1px solid #ced4da;
}

.tablePageSelectorElement a.btn {
    color: #333333;
    color: var(--pageColor);
    background-color: #FFFFFF;
    border-color: #ced4da;
    font-size: 75%;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
	padding: .375rem .75rem;
    margin-bottom: -1px;
    margin-left: 0px;
    margin-right: -5px;
}

.tablePageSelectorElement a.btn:hover {
  background: #f9fafd;
}

.tablePageSelectorElementActive a.btn {
    color: #333333;
    color: var(--pageColor);
    background-color: #f9fafd;
	border-color: #ced4da;
    border-bottom: 1px solid #f9fafd;;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
	padding: .375rem .75rem;
    margin-bottom: -1px;
    font-size: 75%;
    margin-left: 0px;
    margin-right: -5px !important;
}

.tablePageSelector > span:first-child {
    margin-left: 0px;
}

.formpageselector {
  border-bottom: none;
  padding: 0px 0px 15px 0px;
  margin-bottom: 0px;
}

.formpageselector table.tablePageSelector td {
  border-bottom: 1px solid #e0e4e8;
  border-color: var(--listBorderColor);
  padding: 0px 0px 3px 0px;
}

.tablePageSelectorElementLeft,
.tablePageSelectorElementLeftActive,
.tablePageSelectorElementRight,
.tablePageSelectorElementRightActive {
    display: none;
}

.tablePageSelector > span > img {
    display: none;
}

.formpageselector { margin-top: 12px; }

.formpageselector a.btn {
    margin-top: -8px;
    margin-right: -5px;
}

.tablePageSelectorFilling { display: none; }

/* ------------------------------------------------------------------------------------------ */
/* ADVANCED TOGGLE */
/* ------------------------------------------------------------------------------------------ */

#advancedToggle {
    display: inline-block;
    float: right;
    margin-right: 50px;
    margin-bottom: 0px;
    position: relative;
    top: 15px;
}

@media screen and (max-width: 800px) {
    #advancedToggle {
        margin-top: -48px;
    }
}

#advancedToggle input {
    display: none;
}

.slider {
    height: 24px;
    width: 46px;
}
.switchheader { 
   position:relative; 
}

@media screen {
    form > .tableForm tr.isAdvanced { display: none; }
}

form.showAdvanced > .tableForm tr.isAdvanced { display: table-row; }

/* --- The Slider Element ------------------------------------------------------------------- */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ced4da;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
  background-color: var(--primaryButtonBgColor);
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(21px);
}

/* --- Rounded Slider Element --------------------------------------------------------------- */

.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}

/* ------------------------------------------------------------------------------------------ */
/* SECTION  NAVIGATION - In Page Acordion Styles */
/* ------------------------------------------------------------------------------------------ */

.tableForm > tbody.sectionHeader > tr { padding-top: 0px; }

.tableForm > tbody > tr > td.sectionTitle {
    border-bottom: 1px solid #ced4da;
    padding: 10px 5px 5px 0px;
    background-color: transparent;
    color: #8c2db3;
    color: var(--pageBreadcrumbLinkColor);
    font-weight: 100;
    font-size: 1.2rem;
    transition: .3s;
}

.tableForm > tbody > tr > td.sectionTitle:hover,
.tsLayoutColumnsTwo .tableForm > tbody > tr > td.sectionTitle:hover {
    color: #333333;
    background-color: #ffffff;
    padding-left: 5px;
    cursor: pointer;
}

.sectionContent {
    border-bottom: 1px solid #ced4da;
}

.tableForm > .sectionContent > tr > td { padding-bottom: 20px; }

/* ------------------------------------------------------------------------------------------ */
/* FORMS */
/* ------------------------------------------------------------------------------------------ */

/* Optional tableFormWrapper - requires a div with the calss of "tabelFormWrapper" wrpping the tableForm */

.headerContent { display: none; }

.tableFormWrapper {
    background-color: #FFFFFF;
    border: 1px solid #dee2e6;
	border-color: var(--listBorderColor);
    border-top: none;
    padding: 0px 20px 0px 20px;
}

.form-control, .custom-select {
    font-size: .9rem;
}

.custom-select { 
    height: auto;
    padding: .375rem .75rem;
}

/* ----------------------------------- Color Picker ---------------------------------------- */

.form-control-color {
    width: 2.5rem;
    height: 2.25rem;
    padding: .25rem;
}

.form-control-color:not(:disabled):not([readonly]) {
    cursor: pointer;
}

.form-control[type='file'] {
    display: inline-block;
    width: auto;
}

.tableForm {
    width: 100%;
    margin-bottom: 40px;
}

.tableForm > tbody > tr > th {
    padding: 5px 10px 10px 0px;
    vertical-align: text-top;
    text-align: left;
    width: 20%;
}

.tableForm > tbody > tr > td {
    padding: 5px 0px 10px 0px;
    width: 80%;
}

.tableForm td .ComplexQuestionOptions {
    padding: 0px;
}

.tableSubtable { margin-bottom: 10px; }
.tableSubtable th { width: auto; }

.input-compound * {
    display: inline-block;
    width: auto;
}

/* --- Merged Field ------------------------------------------------------------- */

.mergedField {
    white-space: nowrap;
}

.mergeFieldPart {
    margin-bottom: 10px;
}

.mergeFieldPart > span:first-child {
    width: 10%;
    min-width: 100px;
}

.mergeFieldPart span {
    padding-right: 20px;
    display: inline-block;
    width: 45%;
}

.mergeFieldPart > span .input-group-addon,  
.mergeFieldPart > span .input-group-append {
    width: 37px;
}

/* --- Fix IE Positioning Error ------------------------------------------------------------- */

.mergedField input {
    display: inline-block;
}

/* --- Triple Button Submit ----------------------------------------------------------------- */

.updateSubmit {
	margin-bottom: 2%;
}

.submitOption {
	max-width: 33%;
	display: inline-block;
	margin-left: 0%;
	margin-right: 0%;
}

.menuFilter .form-control {
	width: auto;
}

.radiooption {
    display: flex;
}

.radiooption input[type="radio"] {
    vertical-align: top;
}

.radiooption label {
    max-width: 90%;
}

.radiogroup { height: auto;  }
.radiogroup br { display: none; }

.tableForm .radiogroup {
    border: none;
    -webkit-box-shadow: none;
    padding-left: 0px;
    background: transparent;
}

.tableForm .radiogroup-wide {
    border: none;
    background-color: transparent;
    padding: 0rem;
    border-top: 1px dotted #ced4da;
    border-bottom: 1px dotted #ced4da;
    border-radius: 0;
    padding-top: 5px;
    padding-left: 5px;
}

.tableForm .radiooption input[type="radio"] {
    vertical-align: text-bottom;
    margin-top: 0px;
    margin-right: .5rem;
}

input[type=checkbox], input[type=radio] {
    margin: 0px;
    line-height: normal;
    width: 20px;
    height: 20px;
    border: none;
    box-shadow: none;
    display: inline-block;
    vertical-align: text-bottom;
    margin-right: .5rem;
}
.FieldValue .switch {
    width: 46px;
    height: 18px;
    margin-right: .5rem;
}

.tableFieldTableValue { 
    vertical-align: top; 
}

p:empty {
    display: none;
}

.widgethelp, 
.formhelp {
    color: #8c2db3;
	color: var(--formHelp);
    display: inline-block;
    padding-top: 4px;
    margin-right: 5px;
    font-size: .7rem;
}	

.FieldNotes { color: #8c2db3; }
.FieldNotes a:hover { color: #642080; }

.FieldNotes i { opacity: 1; }
.FieldNotes i:hover { color: #642080; }

.FieldLabel { 
    white-space: normal;
    font-size: .9rem;
    font-weight: bold;
}

.editCommand select.form-control:not([size]):not([multiple]){
    max-height: 35px;
}

/* --- Checkbox list Adjustment ------------------------------------------------------------ */

.FieldValue p { margin-bottom: .5rem; }
.custom-control:last-of-type { padding-bottom: .5rem; }

/* --- Custom File Upload Button ------------------------------------------------------------ */

.fileinput-button input { max-width: 220px; }
.fileinput-button input {max-width: 100%; position: relative; left: 0;top: 0;}

.fileinput-button {
    width: 100%;
    padding: 6px 0px 0px 0px;
    font-size: 0.9rem;
    margin-bottom: 2px;
    border: 0px;
}

.custom-file-input {
    position: relative;
    width: 100%;
    height: calc(2.25rem + 2px);
    margin: 0;
    opacity: 0;
}

.custom-file {
    position: relative;
    display: inline-block;
    width: 100%;
    height: calc(2.25rem + 2px);
    margin-bottom: .2rem;
    border: 0px;
}

.custom-file-label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    line-height: 1.5;
    color: #495057;
    color: var( --themeDark);
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    font-size: .9rem;
    text-align: left;
}

/* --- File Upload Table (validate) ----------------------------------------------------------- */

.input-group > .uploadFiles { min-width: 100%; }

/* --- File Upload Progress Bar ------------------------------------------------------------- */

.progress {
    display: -ms-flexbox;
    display: flex;
    height: .5rem;
    overflow: hidden;
    font-size: .75rem;
    background-color: #e9ecef;
    border-radius: .25rem;
    margin-bottom: 0px;
}

/* --- File Download or Delete -------------------------------------------------------------- */

.tableFiles { border-bottom: 1px solid var(--listBorderColor); }
.tableFiles img { width: 18px; height: auto; } 

.tableFiles > tbody > tr > td {
    font-size: 0.9rem;
    white-space: nowrap;
	color: var(--themeSecondary);
}

.tableFiles .fa {
	margin-left: 5px;
}

.filedownload {
    display: inline-block;
    vertical-align: middle;
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 5px;
    margin-right: 5px;
}

#VB_DATA_PHOTOS .table { border: 0; }
#VB_DATA_PHOTOS .table>tbody>tr>td { padding: 0; display: inline-table; border: 0px solid transparent; }
#VB_DATA_PHOTOS img { width: auto; height: 100px; }
.files { margin-top: 3px; font-size: 0.8rem; }

.thumbnail { display: inline-block; margin-right: 5px; margin-bottom: 5px; }

.thumbnail + a, .tableVideos .videoPlayerFile + a {
    position: absolute;
    margin-left: -23px;
    margin-top: 3px;
}

.tableVideos .videoPlayerFile .play-arrow-bg,
.tableVideos .videoPlayerFile .play-arrow {
    position: absolute;
    width: 4rem;
    height: 4rem;
    left: 50%;
    top: 50%;
    margin-left: -2rem;
    margin-top: -2rem;
}
.tableVideos .videoPlayerFile .play-arrow {
    padding: 1.25rem;
}
.tableVideos .videoPlayerFile .play-arrow-bg {
    background-color: rgba(50, 50, 50, .4);
    border-radius: 2rem;
    border-width: 0;
}

.tsDeletedFile, .tsDeletedFile a { color: #8e9aa7; text-decoration: none; opacity: 0.6; }
.tsDeletedFile img { opacity: 0.6; }


.tableForm .tableList th:first-child,
.tableForm .tableList td:first-child {
    width: 5%;
    min-width: 60px;
}

.subtable_contact th:last-child,
.subtable_contact td:last-child {
    display: none;
}

.subtable_contact .table>tbody>tr {
    border-bottom: 1px solid #dee2e6;
	border-color: var(--listBorderColor);
}

.subtable_contact .table>tbody>tr:last-child {
    display: none;
}

input[type=checkbox] + span.formhelp {
	margin-top: -25px;
	margin-left: 25px;
}

/* --- Comment Fields ----------------------------------------------------------------------- */

textarea.comment ~ input.comment-checkbox {
    margin-top: .2rem;
}

.commentList table {
    margin-bottom: 10px;
    margin-top: 10px;
    width: 100%;
}
.tsMoreShow {
     display: table-row-group;
}
.tsMoreHide {
    display: none;
}

.tableForm .tsMoreHide td,
.tableForm .tsMoreShow td {
    padding-top: 5px !important;
    padding-bottom: 0px;
    max-width: 100%;
}

.commentuser, .commenttime, .comment-hidden {
    color: #8c2db3;
	color: var(--pageLinkColor);
    font-size: 11px;
    font-weight: 700;
    padding-right: 5px;
}

.commentuser:before {
    font-family: FontAwesome;
    content: "\f007"; /* User Icon */
    margin-right: 5px;
    font-size: 9px;
    color: #ffffff;
    background: #8c2db3;
    background: var(--pageLinkColor);
    padding: 4px 6px;
    border-radius: 12px;
}

.commenttext {
    color: #333333;
    display: block;
    padding-bottom: 10px;
    border-bottom: 1px solid #ced4da;
    white-space: normal;
}

/* ------------------------------------------------------------------------------------------ */

.form-control-sm {
	font-family: "Open Sans",Helvetica,Arial,sans-serif;
	font-size: .8rem;
	padding: .25rem .5rem;	
}
.form-control {
    height: auto;
}

.FieldValue label {
    margin-bottom: 0;
}

#VB_DATA_Revision span { margin-left: 3px; }

/* ------------------------------------------------------------------------------------------ */
/*  CUSTOM CHECK BOX */
/* ------------------------------------------------------------------------------------------ */

/* --- The container - Size 25px ------------------------------------------------------------ */

.tsCheckContainer {
    display: block;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    font-size: .9rem;
    line-height: 25px;  /* Relative to checkbox size*/
    height: 25px; /* Relative to checkbox size*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* --- The container - Size 20px ------------------------------------------------------------ */

.tsCheckContainer {
    line-height: 20px;  /* Relative to checkbox size*/
    height: 20px; /* Relative to checkbox size*/
}

/* --- Hide Browser Default Checkbox --------------------------------------------------------- */

.tsCheckContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* --- Custom Checkbox - size 25px ---.------------------------------------------------------ */

.tsCheckmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    border-radius: .25rem;
    background-color: #EEEEEE;
}

/* --- Custom Checkbox - size 20px ---------------------------------------------------------- */

.tsCheckmark {
    height: 20px;
    width: 20px;
    border-radius: .25rem;
    background-color: #EEEEEE;
}

/* --- Mouse Over Background ---------------------------------------------------------------- */

.tsCheckContainer:hover input ~ .tsCheckmark {
  background-color: #CCCCCC;
}

/* --- Change Background - Checked ---------------------------------------------------------- */

.tsCheckContainer input:checked ~ .tsCheckmark {
  background-color: var(--primaryButtonBgColor);
}

/* --- Check Mark Indicator - Checked ------------------------------------------------------- */

.tsCheckmark::after {
  content: "";
  position: absolute;
  display: none;
}

/* --- Show the checkmark when checked ------------------------------------------------------ */

.tsCheckContainer input:checked ~ .tsCheckmark::after {
  display: block;
}

/* --- Check Mark Indicator - Size: 25px ---------------------------------------------------- */

.tsCheckContainer .tsCheckmark::after {
  left: 9px;
  top: 4px;
  width: 7px;
  height: 14px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* --- Check Mark Indicator - Size: 20px ---------------------------------------------------- */

.tsCheckContainer .tsCheckmark::after {
  left: 7px;
  top: 2px;
  width: 7px;
  height: 13px;
}



/* ------------------------------------------------------------------------------------------ */
/* ADDON STYLES (From Bootstrap 3) */
/* ------------------------------------------------------------------------------------------ */

.input-group .form-control:not(:first-child):not(:last-child),
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child) {
    border-radius: 0;
	border-left: 1px solid #ced4da;
}

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:first-child>.btn-group:not(:first-child)>.btn,
.input-group-btn:first-child>.btn:not(:first-child),
.input-group-btn:last-child>.btn,
.input-group-btn:last-child>.btn-group>.btn,
.input-group-btn:last-child>.dropdown-toggle {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group-addon:last-child {
    border-left: 1px solid #ced4da;
}

.input-group-addon {
    color: #8e9aa7;
    color: var(--formInputAddonColor);
    padding: 9px 12px;
    font-size: 0.9rem; /* 14px */
    font-weight: 400;
    line-height: 1;
    text-align: center;
    background-color: var(--themeLightGrey);
    border: 1px solid #ced4da;
    border-radius: .25rem;
}

.input-group-addon:hover {
	color: #5a626b;
	color: var(--defaultButtonColor);
	background-color: #e9ecef;
	text-decoration: none;
	transition: 0.3s;	
}

.input-group-addon, .input-group-btn {
    width: auto;
    white-space: nowrap;
    vertical-align: middle;
}

.input-group .form-control, .input-group-addon, .input-group-btn {
    display: table-cell;
}

.input-group-addon .fa {
	opacity: 1;
}
.material-icons {
    font-size: 14px;
    vertical-align: text-bottom;
}
.input-group-prepend.input-group-addon, .input-group-addon {
    padding: 0.6rem .65rem;
}

.input-group {
    margin-bottom: 1rem;
}
.tableForm .input-group {
    margin-bottom: 0;
}

/* --- Fix til legacy class (bootstrap 3) --------------------------------------------------- */

.input-group-text {
   padding: 0px;
   color: #8e9aa7;
   background-color: transparent;
   border: none;
   font-size: 0.9rem; 
}
.input-group-addon .input-group-prepend {
    border-right: 0!important;
}

.input-group-addon .input-group-append {
    border-left: 0!important;
}
/* ------------------------------------------------------------------------------------------ */
/* QUICK SEARCH */
/* ------------------------------------------------------------------------------------------ */

#QuickSearchForm {
    float: none;
    display: inline-flex;
    margin-right: 5px;
    margin-left: 0px;
    vertical-align: middle;
}

.toolBar #QuickSearchInput { width: 6vw; height: 35px; transition: 0.3s; }
.toolBar #QuickSearchInput:focus { width: 15vw; }

/* --- Standard Search Field ---------------------------------------------------------------- */

.search .form-control {
	position: relative;
	padding: .325rem .75rem;
	font-size: .8rem;
}

.left-inner-addon i {
    color: #8e9aa7;
    color: var(--formInputAddonColor);
    position: absolute;
    left: .55rem;
    top: .55rem;
    font-size: .9rem;
    pointer-events: none;
}

.ui-autocomplete i { display: none; }

.dialogueSearch tr.advanced {
    display: none;
}
.ui-dialog .ui-dialog-titlebar .switchheader {
    margin-top: 0;
    width: 46px;
    float: right;
    margin-right: 1rem;
}
.ui-dialog .ui-dialog-title {
    width: 80%;
}

/* ------------------------------------------------------------------------------------------ */
/* CALENDAR */
/* ------------------------------------------------------------------------------------------ */

.tsCalendar {
	margin-bottom: 1rem;
	min-height: 50vh;
	min-width: 60%;
}

.tsCalendar,
.tsCalendar th,
.tsCalendar td {
	border: 1px solid #dee2e6;
	border-color: var(--listBorderColor);
}

.tsCalendarOuter {
    background-color: #f8f9fc !important;
    vertical-align: top !important;
}

.tsCalendarActive {
    background-color: #ffffff;
    background-color: var(--themeLight);
    vertical-align: top !important;
}

.tsCalendarActive:hover {
	background-color: #b9ffef;
}

.tsCalendar td {
	width: 1%;
	min-height: 10%;
	padding: .25rem;
}

.tsCalendar td:first-child {
    padding: .25rem;
    width: 1%;
    min-width: fit-content;
}

.tsCalendar tr:first-child {
	height: 0px;
}

.tsCalendar th { font-size: .7rem; text-align: left; padding: .25rem; }
.tsCalendar th::first-letter { text-transform: uppercase; }

.tsCalendar p {
    background: #d4b0fd;
    border-radius: .25rem;
    padding: 2px 5px 2px 5px;
    text-decoration: none;
    font-size: 0.7rem;
    margin-bottom: .25rem;
}

.tsCalendar p:hover {
    background: #b579f9;
}

.tsCalendar a {
    color: #333333;
    color: var(--pageColor);
    display: block;
}

.tsCalendar a:hover {
    color: #333333;
    color: var(--pageColor);
    text-decoration: none;
}

.tsCalendar tr:empty {
    display: none;
}

.tsCalendarDate {
	color: #666666;
	font-size: .7rem;
	margin-bottom: 5px;
}

.tsCalendarNavigation {
	color: #666666;
	vertical-align: top;
	padding: 2px;
	padding-left: 5px;
	padding-right: 5px;
	text-decoration: none;
}

.tsCalendarNavigation:hover {
    color: #333333;
    color: var(--pageColor);
    text-decoration: none;
}

/* --- Hide Linebreaks in Calendar ---------------------------------------------------------- */

.tsCalendar br {
      display: none;
}

/* ------------------------------------------------------------------------------------------ */
/* STATISTICS */
/* ------------------------------------------------------------------------------------------ */

.tableStatistics { 
    margin-bottom: 10px; 
}

.tableStatistics .tableList { table-layout: fixed; }

.tableStatistics .table>thead>tr>th,
.tableStatistics .table>thead>tr>td,
.tableStatistics .table>tbody>tr>th {
    font-size: 0.8rem;
    white-space: nowrap;
	text-align: right;
}

.tableStatistics .tableList th:first-child,
.tableStatistics .tableList td:first-child {
    text-align: left; 
}

.tableStatistics .table>thead>tr>td {
    border-bottom: 2px solid #dee2e6;
	border-color: var(--listBorderColor); 
    font-weight: bold;
    text-transform: uppercase;
    vertical-align: bottom;
    padding: .55rem;
}

.tableStatistics .tableList td:last-child,
.tableStatistics .tableList tr:last-child td {
    text-align: right;
    font-weight: bold;
    color: var(--themePrimary);
}

.tsDiagramHeader { padding-top: 20px; }

.tableStatistics input[type=checkbox], input[type=radio] {
	float:left;
}

.tableStatistics label {
    display: inline-block;
    margin-bottom: .5rem;
    margin-left: .2rem;
    line-height: 1rem;
}

#chartExport {
    height: auto;
    padding: .5rem;
}

.tsReportLine {
	margin-top: 2rem;
}

.tsReportLineItem:first-child {
	margin-bottom: 2rem;
}

.chartSelector {
	margin-top: .5rem;
	margin-bottom: .5rem;
}

.chartItem {
	height: 100%;
	padding: .5rem;
}

.distCommand .table { margin-bottom: 1rem; }
.distCommand .tableList td:first-child { padding: .55rem; }

/* ------------------------------------------------------------------------------------------ */
/* BOARDS */
/* ------------------------------------------------------------------------------------------ */

.blockItem {
   position: relative;
   border: 1px solid #dee2e6;
   border-color: var(--listBorderColor);
   border-radius: .25rem;
   background-color: #FFFFFF;
   padding: 15px;
   margin: 0.5%;
   width: 19%;
}

.blockItem:hover {
      border: 1px solid var(--formTabsBorderColor);
      box-shadow: 1px 3px 25px #dee2e6;
      transition: .6s;
}

.blockItemLine {
   position: relative;
   border: 1px solid #dee2e6;
   border-color: var(--listBorderColor);
   border-radius: .25rem;
   background-color: transparent;
   padding: 10px;
   margin: 10px 0px 10px 0px;
   width: 100%;
}

.blockItemLine:hover {
    background-color: var(--themeLightGrey);
    cursor: grabbing;
}

.blockItem .title { margin-left: 10px; }
.blockItem p { margin-bottom: 0rem; }

.blockItemLine p span:nth-child(1) { font-weight: bold; }

.blockList {
   display: flex;
   flex-wrap: wrap;
   margin-left: -0.5%;
   margin-right: -0.5%;
}

.more .blockItemLine { 
   display: none; 
}

.showMore .more .blockItemLine { 
   display: block; 
}

.showMore .more > p { 
   display: none; 
}

.blockTable th {
  padding: 10px;
}

.blockItem .more > p {
    color: var(--themeTeritary);
    padding-left: 0px;
    cursor: pointer;
}

.blockItem .more > p:hover {
    opacity: .6;
}

.blockTable th, 
.blockTable td {
   vertical-align: top;
   border-bottom: 2px solid grey;
   border-right: 2px solid grey;
}

/* ------------------------------------------------------------------------------------------ */
/* BOARDS TWO DiMENSIONS */
/* ------------------------------------------------------------------------------------------ */

.blockTable {
    width: 100%;
    background-color: #FFFFFF;
}

.blockTable td:first-child { background-color: var(--pageBgColor); }

.blockTable th {
    font-size: .7rem;
    text-transform: uppercase;
    background-color: var(--pageBgColor);
}

.blockTable th, .blockTable td {
    vertical-align: top;
    border-bottom: 10px solid var(--pageBgColor);
    border-right: 10px solid var(--pageBgColor);
    padding: 10px 20px;
}

.blockTable th { 
    text-align: center;
    white-space: nowrap;
    cursor: default; 
}

.blockTable td {
    max-width: 200px;
    cursor: default;
} 

/* ------------------------------------------------------------------------------------------ */
/* ADDITIONAL BOARD & STATS STYLES */
/* ------------------------------------------------------------------------------------------ */

.kanbCommand > main > h3 {
    background-color: #eeeff5;
    padding: 8px 10px 10px 10px;
    border-radius: .25rem;
    color: var( --pageLinkColor);
}

.xtabCommand > main > h3 {
    background-color: transparent;
    padding: 8px 0px 10px 0px;
    border-radius: .25rem;
    color: var( --pageLinkColor);
    min-height: 42px;
}

.kanbCommand h3 a,
.xtabCommand h3 a {
      display: inline-block;
      font-size: 1.1rem;
      padding: 5px 6px;
      margin-left: 5px;
      border-radius: .25rem;
      background-color: #eeeff5;
      float: right;
}

.kanbCommand h3 a:hover,
.xtabCommand h3 a:hover {
    background-color: #dadce4;
}

.optionFullWidth.kanbCommand main { 
      max-width: none; 
      margin-left: 0px; 
}

@media screen and (max-width: 5120px) {  .blockItem { width: 11.5%; } } /* 8 boards up */
@media screen and (max-width: 1920px) {  .blockItem { width: 15.65%; } } /* 6 boards up */
@media screen and (max-width: 1600px) {  .blockItem { width: 19%; } } /* 5 boards up */
@media screen and (max-width: 1366px) {  .blockItem { width: 24%; } } /* 4 boards up */
@media screen and (max-width: 1024px) {  .blockItem { width: 32.33%; } } /* 3 boards up */
@media screen and (max-width: 800px) {  .blockItem { width: 48.9%; } } /* 2 boards up */
@media screen and (max-width: 414px) {  .blockItem { width: 99.9%; } } /* 1 board up */


/* ------------------------------------------------------------------------------------------ */
/* CANVAS */
/* ------------------------------------------------------------------------------------------ */

canvas.drawable,canvas.prerendered {
	width: 100%;
	max-width: 600px;
	background-color: #FFFFFF; 
	border: 1px solid #ced4da; 
}

canvas.drawable {
	cursor: crosshair;
}

img.canvas-bg {
	display: none;
}

canvas.marking {
	background-size: contain;
}

canvas.freehand {
	max-height: 300px; 
}

/* ------------------------------------------------------------------------------------------ */
/* UI DIALOGUES */
/* ------------------------------------------------------------------------------------------ */

.ui-widget {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    background: #f8f9fc;
    min-width: 150px;
}

.ui-widget-header {
    color: #FFFFFF;
    color: var(--popupHeaderColor);
    background: none;
    background-color: #8e9aa7;
    background-color: var(--popupHeaderBgColor);
    border: 1px solid #8e9aa7;
    border-color: var(--popupHeaderBgColor);
    font-size: 0.9rem;
    font-weight: normal;
}

.ui-dialog-titlebar-close {
	color: #333333;
	background-color: #FFFFFF;
	background-color: var(--popupHeaderColor);
	border: 1px solid #FFFFFF;
	border-color: var(--popupHeaderColor);
	border-radius: .2rem;
	margin-right: .2rem;
	font: normal normal normal 14px/1 FontAwesome !important;
	display: inline-block;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

.ui-dialog-titlebar-close:before {
    content: "\f00d";
    font-size: 18px;
    line-height: 16px;
    color: #8e9aa7;
}

.ui-dialog-titlebar-close:hover {
	color: #FFFFFF;
	background-color: #333333;
	background-color: var(--pageColor);
	border: 1px solid #333333;
	border-color: var(--pageColor);
	cursor: pointer;
}
 
.ui-dialog-titlebar-close:focus {
	outline: none;
}

.tableSearch br { 
    display: none; 
}

.tableSearchOperator {
    padding-left: .25rem;
}

.ui-dialog .tableSearchValue {
    padding-left: .25rem;
}

/* --- Ui Widget Form Elements -------------------------------------------------------------- */

.ui-widget .alignRight span {
    display: inline-table;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.ui-widget label {
    margin-bottom: 0rem;
    margin-top: .3rem;
    margin-left: .15rem;
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea {
    height: 1.8rem;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: .85rem;
    padding: .5rem;
}

.ui-widget select { 
    padding: 0px; 
}

.ui-widget input[type=submit] {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    height: unset;
    padding: .375rem .75rem;
}

.ui-widget tr .fa {opacity: 0.5; margin-left: .2rem;}
.ui-widget tr .fa:hover { opacity: 1; }

.ui-dialog input[type=checkbox], .ui-dialog input[type=radio] {
    float: left;
    margin-top: .1rem;
    margin-right: .25rem;    
}

.ui-widget select.form-control:not([size]):not([multiple]) {
    height: 1.8rem;
}

.tsPersonal, .tsPersonalMenu {
    padding: 10px;
}

.ui-widget .input-group-addon {
    padding: 5px 8px;	
}

.ui-widget-content a {
    color: #5a626b;
    color: var(--codeunitButtonColor);
    white-space: nowrap;
}

/* --- UI Slider Horisontal ----------------------------------------------------------------- */

.ui-slider.ui-widget-content {
    border: 1px solid var(--themeGrey);
}

.ui-slider .ui-slider-range {
    background-color: var(--themeSecondary);
}

.ui-slider .ui-slider-handle {
    border: 1px solid var(--themeTeritary);
    background: var(--themeTeritary);
    top: -.25rem;
    margin-left: -.6rem;
}

.ui-slider .ui-slider-handle:focus {
     border: 1px solid var(--themeTeritary);
    text-decoration: none;
    outline: none;
}

/* --- Dialogue View ------------------------------------------------------------------------ */

.ui-dialog .dialogueView input[type=text] {
    height: 2.1rem;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    vertical-align: middle;
    margin-left: 5px;
}

.ui-dialog .dialogueView input[type=text]:focus {
    background-color: #fff;
    background-color: var(--themeLight);
    color: #495057;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.ui-dialog .dialogueView input[type=submit] {
    margin-left: 5px;
}

.ui-dialog .dialogueView .tableOptionHeader { 
    font-weight: bold; 
}

.ui-dialog .dialogueView td {
    vertical-align: top;
    padding: .25rem;
}

.ui-dialog .dialogueView ul {
    margin-left: -0.6rem;
}

/* --- Dialogue Search ---------------------------------------------------------------------- */

.dialogueSearch {
	max-height: 60vh !important;
}

/* --- UI Date Picker ----------------------------------------------------------------------- */

#ui-datepicker-div {
	background-color: var(--themeLightGrey);
	width: 20em;
	padding: 0.3em 0.3em;
}

.ui-datepicker table {
  width: 100%;
  font-size: 0.9em;
  border-collapse: collapse;
  margin: 0 0 0em;
}

.ui-datepicker .ui-datepicker-title {
  color: #FFFFFF;
  margin: 0 2em;
  line-height: 1.8em;
  text-align: center;
}

.ui-datepicker .ui-datepicker-prev {
  position: absolute;
  top: 2px;
  width: 1.4em;
  height: 1.4em;
  margin-top: 3px;
}

.ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 1.4em;
  height: 1.4em;
  margin-top: 3px;
}

.ui-datepicker .ui-datepicker-prev {
	background-color: #FFFFFF;
	background-color: var(--themeLight);
	left: 5px;
}

.ui-datepicker .ui-datepicker-prev-hover {
	background-image: none;
	background-color: #CCCCCC;
	background-color: var(--themeTeritary);
	left: 5px;
}

.ui-datepicker .ui-datepicker-next {
	background-color: #FFFFFF;
	background-color: var(--themeLight);
	right: 5px;
}

.ui-datepicker .ui-datepicker-next-hover {
	background-image: none;
	background-color: #CCCCCC;
	background-color: var(--themeTeritary);
	right: 5px;
}

#ui-datepicker-div .ui-state-default,
.ui-widget-content {
  background: #FFFFFF;
  background: var(--themeLight);
  border: 1px solid var(--themeGrey);
  font-weight: normal;
  color: var(--themeGreyDark);
}

#ui-datepicker-div .ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 1px solid #50e3c2;
  border-color: var(--themePrimary);
  background: #c3fff2;
  color: var(--themeGreyDark);
}

#ui-datepicker-div .ui-state-active {
    border-color: var(--themePrimary);
    background-color: var(--themePrimary);
    color: #FFFFFF;
}

/* --- UI Export Menu ----------------------------------------------------------------------- */

.ui-dialog .windowExport .option {
    display: block;
    margin-top: 5px;
}
.ui-dialog .windowExport .option input[type=checkbox] {
    float: none;
    margin-top: -8px;
}

.ui-dialog .windowExport .btn {
    margin-top: 5px;
}

/* --- UI Personal Menu --------------------------------------------------------------------- */

.tsPersonal h3 {
	color: #333333;
	color: var(--pageColor);
	font-size: 2rem;
}

.tsPersonalRoot .table>tbody>tr>th,
.tsPersonalRoot .table>tbody>tr>th a {
    font-size: 1rem;
}

.tsPersonalRoot .table>tbody>tr>td {
    padding: 0.55rem;
    vertical-align: top;
    text-align: left;
    font-size: 1rem;
}

.tsPersonalFlagList .table>tbody>tr>th:nth-child(3),
.tsPersonalFlagList .table>tbody>tr>td:nth-child(3) {
	width: 60%;
}

/* --- Personal Profile --------------------------------------------------------------------- */

.tsPersonalProfile {
    padding-top: 10px;
}

.tsPersonalRoot .tsPersonalProfile .tableForm {
	font-size: 100%;
	margin-top: 0px;
}

.tsPersonalRoot .tsPersonalProfile .table>tbody>tr>.profileHeader {
    padding: 4px 0px 4px 2px;
    background-color: transparent;
    border: none;
    font-size: 1.2rem;
}

.tsPersonalProfile .form-control {
    margin-bottom: 0px;
    min-width: 180px;
}

.tsPersonalProfile input[type=submit] {
	float: right;
}

.tsPersonalRoot .tsPersonalProfile .profileNote {
    position: absolute;
    left: 20px;
    bottom: 20px;
    font-size: 1rem;
    margin-top: 0px;
    margin-bottom: 0px;
}

/* --- Personal Notes ----------------------------------------------------------------------- */

.tsPersonalRoot .Controls > td > div {
    width: 100%;
}

.tsPersonalRoot .nicEdit-panelContain {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}

/* --- Personal Notifications --------------------------------------------------------------- */

.tsPersonalNotification .form-control {
    font-size: 1.2rem;
    margin-right: 5px;
    margin-bottom: 15px;
}

#userflagComment {
	font-size: 1.3rem;	
}

.tsPersonalMenu img {
	display: none;
}

table.tsNotepad { 
    width: 100%
}

.tsNotepad tr.Bottom td {
    text-align: left;
    padding-top: 10px;
}

#form_usernotifications_IsSent,
#form_usernotifications_CreatedAt { min-width: 100px; }

/* --- Personal Flagged items --------------------------------------------------------------- */

.tsPersonalFlagList .form-control {
    font-size: 1.2rem;
    margin-right: 5px;
    margin-bottom: 15px;
}

/* --- Personal Ticket List ----------------------------------------------------------------- */

.tsPersonalTicketList .form-control {
    font-size: 1.2rem;
    margin-right: 5px;
    margin-bottom: 15px;
}

.xknap {
    margin-top: 10px;
}

#userflagButton_Update {
    margin-left: 5px;
}


/* ------------------------------------------------------------------------------------------ */
/* FOOTER STYLES */
/* ------------------------------------------------------------------------------------------ */

footer, .footer {
    color: #7a878e;
    background-color: #f8f9fc;
    border-top: 1px solid rgba(0,0,0,0.07);
    position: fixed;
    padding: 10px 40px 10px 10px;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
}

.footer a {
	color: #7a878e;
}

/* --- Footer Buttons ----------------------------------------------------------------------- */

.optionFullWidth.listCommand main {
	max-width: none;
    margin-left: 0px;
}

.optionCompactTable .table>thead>tr>th, 
.optionCompactTable .table>tbody>tr>td {
	padding: .35rem;
	font-size: 80%;
}

.optionCompactTable .clickRecord.btn {
	padding-top: 2px;
	padding-bottom: 2px;
	margin-top: 0px;
	margin-bottom: 0px;
}

footer .btn {
    margin-top: -3px;
    margin-right: 5px;
    opacity: 0.6;
    padding: .25rem;
    min-width: 28px;
}

footer .btn:hover {
    opacity: 1.0;
}

.badge-danger { background-color: coral; }

/* --- Users online & Debut Time ------------------------------------------------------------ */

.usersOnline, .debugTime {
	clear: both;
	font-size: 0.8em;
	text-align: center;
	color: var(--themeGrey);
}

/* ------------------------------------------------------------------------------------------ */
/* INFO PANEL */
/* ------------------------------------------------------------------------------------------ */

#infoSidebar {
    display: none;
    background-color: #FFFFFF;
    position: fixed;
    height: 100vh;
    width: 400px;
    right: 0px;
    top: 0px;
}

#infoSidebarButton {
    color: #FFFFFF;
    position: absolute;
    right: 5px;
    font-size: 0.8rem;
    padding: .20rem .35rem;
}

#infoSidebarButton:hover,
#infoSidebarButton:active,
#infoSidebarButton:focus {
    background-color: var(--defaultButtonColorHover);
    border-color: var(--defaultButtonColorHover);
    color: #FFFFFF;
}

.tsSidebar {
    height: 60px;
    background-color: var(--themeTeritary);
    background: linear-gradient(-303deg,#02a79f,#00b2aa 50%,#50e2c1);
}

.tsSidebar .timestamp,
.tsSidebar .statistic { 
    padding: 0px 20px 0px 20px; 
}

.tsSidebar .label, 
.tsSidebar .name, 
.tsSidebar .date {
    display: inline-block; 
    padding: 0px; 
    margin-right: 10px; 
}

.tsSidebar .content { 
    padding: 10px 20px 10px 20px;
}

.tsSidebar .updateSubmit {
    color: var(--themePrimaryDark);
    opacity: 1; 
}

.tsSidebar .updateSubmit:hover {
    color: var(--primaryButtonColorHover);
}

/* --- Google Icon Button ------------------------------------------------------------------- */

.tsSidebar .button {
    width: 60px;
    height: 60px;
    color: #FFFFFF;
    padding: 15px;
    cursor: pointer;
}

.tsSidebar .button:hover {
    opacity: .6;
    transition: .5s;
}

.tsSidebar .button .material-icons { 
    font-size: 28px;
    font-weight: 600; 
}

.tsSidebar .body { padding: 0px; }
.tsSidebar h3 { padding: 20px 20px 0px 20px; }

.tsSidebar ul {
    padding-bottom: 20px;
    padding-right: 20px;
    border-bottom: 1px solid var(--themeGrey);
    margin-bottom: 0px;
}

/* --- Hide scrollbar, keep functionality --------------------------------------------------- */

.tsSidebar .newsList {
    -ms-overflow-style: none;
    height: 85vh;
    overflow: scroll;
}
.tsSidebar .newsList::-webkit-scrollbar {
    display: none;
}

.tsSidebar .newsListHeader {
    font-size: .7rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px 20px 10px 20px;
    color: var(--themePrimaryDark);
    border-bottom: 1px solid var(--themeGrey);
}

.tsSidebar .newsItem {
    color: var(--themePrimaryDark);
    border-bottom: 1px solid var(--themeGrey);
    padding: .7rem 1rem 1rem;
}

.tsSidebar .newsItem .newsHeader {
    font-weight: bold;
    font-size: 1rem;
}

.tsSidebar .newsItem .newsHeader .newsCloseBtn {
    float: right;
}

.tsSidebar .newsItem .newsTimestamp {
    font-weight: 100;
    font-size: .6rem;
    color: var(--themeGrey);
}

.tsSidebar .newsItem .newsContent {
    margin: .5rem 0;
}

.tsSidebar .newsItem .newsAuthor {
    font-weight: 100;
    margin: 0px;
    color: var(--themeGrey);
}

.tsSidebar .newsItem .newsBtns {
    margin-top: .3rem;
}

.tsSidebar .newsItem .newsBtns .btn {
    opacity: 1;
    padding: .25rem .55rem;
}

.tsSidebar .newsItem .newsBtns .newsOkBtn {
    color: var(--primaryButtonColor);
    background-color: var(--primaryButtonBgColor);
}

.tsSidebar .newsItem .newsBtns .newsMoreBtn {
    color: var(--defaultButtonColor);
    background-color: var(--defaultButtonBgColor);
}

/* --- Info Button Alert - New Info Available ----------------------------------------------- */

.infoButtonAlert {
    background-color: coral;
    width: 20px;
    text-align: center;
    border-radius: 10px;
    font-weight: bold;
    color: #FFF;
    position: absolute;
    right: 4px;
    bottom: 19px;
}

/* ------------------------------------------------------------------------------------------ */
/* Z-INDEX CONTROLS */
/* ------------------------------------------------------------------------------------------ */

.toolBar .btn-group { z-index: 1; }
.custom-file-label { z-index: 1; }
.custom-file-input { z-index: 2; }
.viewList thead th:first-child { z-index: 3; } 
.header { z-index: 5; }
.mySidenav { z-index: 10; }
.infoButtonAlert { z-index: 11; }
.burger { z-index: 15; }
#tsSidenav { z-index: 20; }
#footer, footer { z-index: 25; }
#infoSidebarButton { z-index: 30; }
#infoSidebar { z-index: 35; }
.ui-front { z-index: 100!important; }
#ui-datepicker-div { z-index: 101!important; }
#QuickSearchInput:focus { z-index: 999; }

/* ------------------------------------------------------------------------------------------ */
/* FLOW CHART STYLES */
/* ------------------------------------------------------------------------------------------ */

.flowchartName {
    color: #FFFFFF;
    color: var(--themeLight);
    background-color: #8e9aa7;
    background-color: var(--themeTeritary);
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    margin: 0px;
    padding: 5px 8px;
}

.flowchartBody {
    background-color: #f8f9fc;
    border: 1px solid #8e9aa7;
    border-color: var(--themeTeritary);
    position: absolute;
    padding: 0px;
    width: 12%;
}

/* ------------------------------------------------------------------------------------------ */
/* QUESTIONAIRE */
/* ------------------------------------------------------------------------------------------ */

.tsMenuItemQuestionaireLineStart,
.tsMenuItemQuestionaireLineMiddle,
.tsMenuItemQuestionaireLineEnd { display: none; }

.questionaireMessages,
.questionaireProgress {
	font-size: 1rem;
	padding-top: 15px;
	padding-bottom: 15px;
	margin-bottom: 1rem;
}

.questionaireProgress {
	border-top: 1px solid #ced4da;
	border-top: 1px solid var(--themeGrey);
	border-bottom: 1px solid #ced4da;
	border-bottom: 1px solid var(--themeGrey);
}

.languageSelector {
	padding-top: 20px;
	margin-bottom: 10px;
}

.languageSelector img { display: none; }
.questionaireProgress > p { margin-bottom: 0px; }
.questionaireContinue { margin-top: 30px; }
.actionPrev { margin-right: 1em; }
.pageListAdvanced:empty { display: none; }
.progressIcons { display: none; }

.radiogroup-wide .radiooption {
    display: inline-flex;
    margin-right: 1rem;
}

.ComplexQuestion { width: 100%; }

/* --- Interval Option ---------------------------------------------------------------------- */

.intervalNameFirst { 
    padding-right: .5rem; 
}

.intervalNameRight, .intervalOptionEmpty { 
    padding-left: .5rem; 
}

.intervalOption {
  padding-left: 1rem;
  padding-right: 1rem;
}

.intervalOption input {
    margin-right: 0rem;
}

.intervalOption:nth-last-child(2) {
  padding-left: 3.0rem;
  padding-right: 0.25rem;
}

.intervalOption div {
   font-size: 60%;
   color: var(--themeTeritary);
   margin-bottom: .2rem;
   margin-top: -.5rem;
}

/* --- Fieldtype MET ------------------------------------------------------------------------ */

/* Alfa implementation - not functional on mobile */

.fieldtype_MET { 
    display: block;
    width: 100%;
    margin-top: .5rem;
}

.fieldtype_MET .input-group {
	margin-right: 1rem;
}

.fieldtype_MET .input-group input[type=number] {
	width: 5rem; 
}

.fieldtype_MET .checkboxCollection {
    display: block;
    width: 100%;
	margin-right: 2rem;
}

.fieldtype_MET .checkboxCollection input[type=checkbox]  {
	position: relative;
	left: 0rem;
	top: 0.5rem; 
}

.fieldtype_MET .checkboxCollection span  {
	display: inline-block;
	position: relative;
	top: -1rem; 
	text-align: center;
	left: 0.8rem;
	width: .35rem;
	text-transform: uppercase;
	font-size: .7rem;
}

.fieldtype_MET td {
	padding-right: 1rem; 
}

.fieldtype_MET td:first-child {
    display: block;
    margin-bottom: 1rem;
    padding-right: 0rem;
}

.fieldtype_MET .checkboxCollection span:first-child {
    margin-left: -.225rem;
}


/* ------------------------------------------------------------------------------------------ */
/* SectionLayout - One-Column Acordion Styles */
/* ------------------------------------------------------------------------------------------ */

.pageSectionLayout .tableForm > tbody.sectionHeader {
    border-bottom: 1px solid #ced4da;
	border-bottom: 1px solid var(--themeGrey);
}

.pageSectionLayout .tableForm > tbody > tr > td.sectionTitle {
    width: 100%;  
    display: -webkit-flex;  
    display: flex;
    border-bottom: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.pageSectionLayout .tableForm > tbody.sectionContent {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    padding: 15px 0px 15px 0px;
}

.pageSectionLayout .tableForm > tbody.sectionContent > tr {
    width: 100%;
}

.pageSectionLayout .tableForm > tbody > tr > th {
    display: inline-block;
    padding: 0px;
}

.pageSectionLayout .tableForm > tbody > tr > td {
    display: inline-block;
    padding: 0px 0px 10px 0px;
}

.pageSectionLayout .tableForm table.tableFiles th,
.pageSectionLayout .tableForm table.tableFiles td {
        display: table-cell;
        padding: .35rem;
}

.pageSectionLayout .tableForm > tbody > tr > td .ComplexQuestionOptions {
    width: 100%;
}

/* ------------------------------------------------------------------------------------------ */
/* SectionLayout - Two-column Acordion Styles */
/* ------------------------------------------------------------------------------------------ */

.tsLayoutColumnsTwo .pageSectionLayout .tableForm > tbody > tr > td.sectionTitle {
    width: 100%;  
    display: -webkit-flex;  
    display: flex;
    border-bottom: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.tsLayoutColumnsTwo .pageSectionLayout .tableForm > tbody.sectionContent > tr {
    width: 50%;
    display: -webkit-flex;
    display: flex;
    display: inline; /* Stacking of elements */
}

.pageSectionLayout .tableForm > tbody.sectionContent > tr.tsInlineTable {
    width: 100%;
    display: inline;
}

.tsLayoutColumnsTwo .pageSectionLayout .tableForm > tbody > tr > th {
    display: block;
    width: 95%; /* Stacking */
    padding: 0px;
}

.tsLayoutColumnsTwo .pageSectionLayout .tableForm > tbody > tr > td {
    display: block;
    width: 95%; /* Stacking */
    padding: 0px 0px 10px 0px;
}

.tsLayoutColumnsTwo .pageSectionLayout .tableForm table.tableFiles tr {
    display: table-row;
    width: 100%;
}

.tsLayoutColumnsTwo .pageSectionLayout .tableForm table.tableFiles th,
.tsLayoutColumnsTwo .pageSectionLayout .tableForm table.tableFiles td {
    display: table-cell;
    padding: .35rem;
    width: 100%
}

.tsLayoutColumnsTwo .pageSectionLayout .tableForm > tbody > tr > td .ComplexQuestionOptions {
    width: 100%;
}

/* --- Page Section Layout - Image Table ---------------------------------------------------- */

.pageSectionLayout .tableForm .tableImages,
.tsLayoutColumnsTwo .pageSectionLayout .tableForm .tableImages { 
    display: block; 
    border: 0px; 
    margin-bottom: 5px; 
    background-color: transparent; 
}

.pageSectionLayout .tableForm .tableImages tr,
.tsLayoutColumnsTwo .pageSectionLayout .tableForm .tableImages tr { 
    display: block; 
    border-bottom: 0px; 
}

.pageSectionLayout .tableForm .tableImages tr td,
.tsLayoutColumnsTwo .pageSectionLayout .tableForm .tableImages tr td { 
    display: inline-block;
    float: left; 
    width: fit-content; 
    border: 1px solid var(--themeGrey); 
    padding: 0rem;
    margin: 0rem;
}

.pageSectionLayout .tableImages .thumbnail { display: inline-block; margin: 5px; }
.pageSectionLayout .tableImages .thumbnail img { width: 100%; min-width: 50px; object-fit: cover; }

.pageSectionLayout .tableImages .thumbnail img { width: 88px; height: 88px; min-width: 50px; object-fit: cover; }

/* --- Page Section Layout - Status & Save -------------------------------------------------- */

.pageSectionLayout #PAGE_999999 th,
.pageSectionLayout #PAGE_999999 td {
    width: 100%;
}

.pageSectionLayout #PAGE_999999 th {
    margin-top: 10px;
}

.pageSectionLayout #PAGE_0 th,
.pageSectionLayout #PAGE_0 td { 
    width: 100%;
}

.updateSubmit {
    margin-bottom: .25rem;
}

.submitOption {
    max-width: 33%;
    display: inline-block;
    margin-left: 0%;
    margin-right: 0%;
}

/* ------------------------------------------------------------------------------------------ */
/*  Fix til legacy class (Bootstrap 3) */
/* ------------------------------------------------------------------------------------------ */

.input-group-text {
   color: #8e9aa7;
   color: var( --themeTeritary);
   padding: 0px;
   background-color: transparent;
   border: none;
   font-size: 0.9rem;
}

.tsWidget .table { display: table; }

/* --- FA Size Corrections ------------------------------------------------------------------ */

.input-group-addon .fa-sitemap { height: 14px; }
.input-group-addon .fa-download { width: 14px; height: 14px; }
.input-group-addon .fa-phone { height: 14px; }
.input-group-addon .fa-user { height: 14px; }
.dropdown-item .fa-tachometer { margin-top: 2px !important }
.input-validator img { width: 14px; height: 14px; } 

/* --- Number Field Hide Spin button ------------------------------------------------------ */

/*---  Chrome, Safari, Edge, Opera --- */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Firefox --- */
input[type=number] { -moz-appearance: textfield; }

/* ------------------------------------------------------------------------------------------ */
/* Field validation (New) */
/* ------------------------------------------------------------------------------------------ */

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.tsValidateFalse .form-control,
.tsValidateTrue .form-control {
    padding-right: calc(1.5em + .75rem);
    background-repeat: no-repeat;
    background-position: right calc(.375rem + .1875rem) center;
}

.tsValidateTrue .form-control {
    background-image: url(check.svg);
    background-size: calc(.65em + .375rem) calc(.65em + .375rem);
    border-color: #ced4da;
}

.tsValidateTrue select.form-control { background-position: right calc(1.15rem + .1875rem) center; } 

.tsValidateTrue .form-control:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40,167,69,.25);
}

.tsValidateFalse .form-control {
    background-image: url(exclaim.svg);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    border-color: #ced4da;
}

.tsValidateFalse select.form-control { background-position: right calc(1.15rem + .1875rem) center; } 

.tsValidateFalse .form-control:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220,53,69,.25);
}

.tsValidateFalse .custom-file-label,
.tsValidateTrue .custom-file-label {
    padding-right: calc(1.5em + .75rem);
    background-repeat: no-repeat;
    background-position: right calc(5.15rem + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);	
}

.tsValidateFalse .custom-file-label { background-image: url(exclaim.svg); }

.tsValidateFalse .custom-file-label:focus { 
	border: 1px solid #dc3545;
	box-shadow: 0 0 0 0.2rem rgb(220 53 69 / 25%);
}

.tsValidateTrue .custom-file-label { background-image: url(check.svg); }

.tsValidateTrue .custom-file-label:focus {
	border-color: #28a745;
	box-shadow: 0 0 0 0.2rem rgba(40,167,69,.25);
}


/* ------------------------------------------------------------------------------------------ */
/* MEDIA QUERIES - PRINT */
/* ------------------------------------------------------------------------------------------ */

@media print {
    /* ----- General Elements ----- */
    body { background: none; }
    main h1 { color: black; } 
    header, footer, main > nav, .toolBar  { display: none; }
    /* ----- List Elements ----- */
   .pagerPage, .pagerSize, .tableList .btn { display: none; } 
   .tableList tr td:first-child, .tableList tr th:first-child { display: none; } 
    /* ----- Form Elements ----- */
    .form-control, form .btn  { background: none; border: none;  padding: 0px; }
   .codeunitButtonMenu, .formpageselector, .fileinput-button, .progress, .input-group-addon, .btn-primary { display: none; }
    /* ----- Dashboard Elements ----- */   
   #tsDashboardList { display: none; }
}


/* ------------------------------------------------------------------------------------------ */
/* MEDIA QUERIES - MIN-WIDTH DECLARATIONS */
/* ------------------------------------------------------------------------------------------ */


@media only screen and (min-width: 1600px) {
    main {
        margin-left: calc(50% - 800px);
    }
    main.full-width {
        margin-left: 0;
    }
}


@media screen and (min-width: 1280px) {
    .viewList { 
        overflow-y: auto; 
        max-height: calc(80vh - 80px); 
    }

    .table-responsive thead th,
    .table-responsive tbody tr:first-of-type th { 
        position: sticky; 
        top: 0px;
        background-color: var(--pageBgColor);  
    }
}


/* ------------------------------------------------------------------------------------------ */
/* MEDIA QUERIES - MAX-WIDTH DECLARATIONS */
/* ------------------------------------------------------------------------------------------ */

@media screen and (max-width: 1640px)  {
   .flagList { position: inherit; }
   .flagItem { max-width: none; }
}

@media screen and (max-width: 1366px) {

.toolBar .menuItem > span { display: none; } /* Hide Text in Toolbar Buttons */
.toolBar .btn-group .dropdown-toggle > span { display: none; }
.tableSubtable .input-group-addon:first-child { display: none; }
.tableSubtable #VB_DATA_ContactEmail .input-group-addon { display: none; }

.tableSubtable #VB_DATA_ContactEmail .form-control {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

}


@media screen and (max-width: 1200px) {
.tableForm .viewList { max-width: calc(80vw - 50px); }

}


@media screen and (max-width: 1024px) {
	
	#QuickSearchInput:focus { width: 20vw; }
	.tsLayoutColumnsTwo .tableForm .FieldValue { width: 44vw; }
	.fieldtype_MET tbody, .fieldtype_MET tr { display: block; } /* Alfa - not working on mobile */
  
}

/* ------------------------------------------------------------------------------------------ */
/*  SINGLE COLUMN - Change from two-column to single-column layout */
/* ------------------------------------------------------------------------------------------ */

@media screen and (max-width: 800px) {

body.tsPageBgLogo { background-image:none; }
#bgContainerA, #bgContainerZ { display: none; }

main {
    padding-top: 75px;
    padding-right: 4vw;
    padding-left: 4vw;
    padding-bottom: 20px;  
}

#PAGE_0 .submitOption {
    width: 32.5%;
}

#tsDashboardList h1 { max-width: 100%; }
h1 { max-width: 100%; } 


.editCommand .tableForm .FieldValue { max-width: 92vw; } /* Relative to main padding */
.editCommand .tableForm .viewList { max-width: 92vw; }
.editCommand .tableForm .tableFiles { max-width: 92vw; }

.editCommand .tableForm .FieldValue {min-width: 92vw; } /* original 345px */
.tableForm .sectionTitle { min-width: 345px; }

.pageWindowLayout .pageWindow {
	display: block;
	width: 100%;
	max-width: 92vw;
	padding: 3vw;
}

.pageWindowLayout #PAGE_999999,
.pageWindowLayout #PAGE_0 {
    float: none;
    width: 100%;
}

.editCommand .tableForm .pageWindow .FieldValue,
.editCommand .tableForm .pageWindow .viewList,
.editCommand .tableForm .pageWindow .tableForm .custom-file {
    min-width: 85vw;
}

.editCommand .tableForm .pageWindow .viewList,
.editCommand .tableForm .pageWindow .tableFiles { 
    max-width: 85vw; 
}

.tsToolbarPersonal { margin-right: 20px; }
.toolBarPersonal { margin-right: 20px; }
.toolBarPersonal .lastName { display: none; }

.tsShowNarrow { display: inline-block; }	
.tsShowWide { display: none; }

#tsUserFullname { display: none; }

.toolBar { 
    text-align: left; 
    margin-top: -1rem !important; 
    padding-bottom: 1rem; 
}

.toolBar .btn-group {
    margin-left: 0px;
    margin-right: 5px;
}

.toolBar #QuickSearchInput { width: 13vw; }
.toolBar #QuickSearchInput:focus { width: 26vw; }

.codeunitButtonMenu {
    margin-top: -11px;
    padding-bottom: 10px;
}

.zoneMenu {
    text-align: left;
    margin-top: -1rem !important;
    margin-left: 10px;
    padding-bottom: 1rem;
    padding-top: 1.8rem;
}

.formpageselector { max-width: 100%; }
.formpageselector .tablePageSelector { border-bottom: none; }

.formpageselector a.btn {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.usersOnline { display: none; } /* Hide the number of users logged in */
#footer { padding: 10px 20px 10px 20px; }
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }

#tsDashboardList .dropdown-toggle::after { vertical-align: 1.6em; } /* Relative to h1 */

.board { display: block; padding: 0px; }
.board-column { border-left: 0px; }
.tsContactPage { margin-left: -15px; margin-right: -15px; } /* adjust margins on tablet and mobile */
.timeline > li > .timeline-panel { width: 80%; }

#pager > img { display: none; }
.pagerInfo { display: none; }
.pagerSize { display: none; }
.pagerCount { display: none; }

.tableList .fieldGroup { display: none; } /* Determine purpose declaration */

/* --- Force Single Column ------------------------------------------------------------------ */

form > .tableForm > tbody {
	  display: block;
  }

form > .tableForm > tbody > tr,
form > .tableForm > tbody > tr > th,
form > .tableForm > tbody > tr > td {
	display: block;
	width: 100%;
	padding: 5px 0px 0px 0px; 	
}

.FieldLabel {
	margin-top: .3rem;
	margin-bottom: .1rem;
}

.pageSectionLayout .tableForm > tbody.sectionContent tr { width: 100%; display: table-row; }
.pageSectionLayout .tableForm tbody tr th,
.pageSectionLayout .tableForm tbody tr td { width: 100%; }

.tsLayoutColumnsTwo .pageSectionLayout .tableForm > tbody.sectionContent tr { width: 100%; display: table-row; }
.tsLayoutColumnsTwo .pageSectionLayout .tableForm tbody tr th,
.tsLayoutColumnsTwo .pageSectionLayout .tableForm tbody tr td { width: 100%; }

/* --- Simplify Subtable Contact ------------------------------------------------------------ */

.subtable_contact th, 
.subtable_contact td:first-child {
    display: none;
}

/* --- Error Page --------------------------------------------------------------------------- */

.tsErrorImage, .tsErrorDetails { display: block; width: 100%; }

/* --- Username Avatar ---------------------------------------------------------------------- */

#tsUserFullname { 
    color: #FFFFFF;
    color: var(-themeLight);
    background: #333333;
    background: var(--headerColor);
    border-radius: 15px;
    height: 30px; 
    width: 30px;
    border: none;
    padding: 5px;
    padding-top: 0px;
    display: inline-block;
}

#tsUserFullname { font-size: 0px; }

#tsUserFullname::first-letter {
    font-size: 15px;
    font-style: bold;
}

.tsDropFiles, 
.tsDropFilesOr { display: none; }

.tableForm .subtable .FieldValue { min-width: 5vw; }

#advancedToggle { top: 20px; }

/* --- Interval Option ---------------------------------------------------------------------- */

.intervalOption {
    padding-left: .2rem;
    padding-right: .2rem;
}

.intervalOption:nth-last-child(2) { padding-left: 1.2rem; }
.tableStatistics .tableList { table-layout: auto; }


}


@media screen and (max-width: 768px) {

.tsToolbarPersonal { margin-right: 20px; }
#QuickSearchInput:focus { width: 24vw; }
#tsDashboardList .dropdown-toggle::after { vertical-align: 1rem; }
.tsWidgetInnerBC { padding: 20px; }

}


@media screen and (max-width: 640px) {
	
#QuickSearchInput:focus { width: 92vw; margin-bottom: 5px; }
  
}


@media screen and (max-width: 576px) {

/* --- Reduce Toolbar Menu Items --- */
#menuGroupFiles, 
#menuGroupStatistics, 
#menuGroupRelated { display: none; } 

.tsCalendar th { font-size: 0px; }
.tsCalendar th::first-letter { font-size: 0.7rem; text-transform: uppercase }

.subtable_contact .table>tbody>tr {
	border-bottom: 1px solid #dee2e6;
	border-color: var(--listBorderColor);
	display: block;
	min-width: max-content;
}
	
.tsWidget { margin-bottom: 15px; }
.zoneSouth .tsWidget:last-of-type { margin-bottom: 55px; }

#infoSidebar { width: 375px; }

.editCommand .updateSubmit,
.pageWindowLayout .updateSubmit { min-width: 345px; }

.fieldtype_MET .checkboxCollection { max-width: 345px; margin-right: 0rem; } /* Alfa - not working on mobile */
.fieldtype_MET .checkboxCollection input[type=checkbox] { margin-right: -.2rem; } /* Alfa - not working on mobile */

}


/* --- Alfa Align Right in Tables (Check Specificity) --------------------------------------- */

.table>thead>tr>th.alignRight,
.table>tbody>tr>td.alignRight { text-align: right; }

.table>thead>tr>th#alignRight,
.table>tbody>tr>td#alignRight { text-align: right; }

.table>thead>tr>th:nth-of-type(2)#alignRight { text-align: left; }
.table>thead>tr>th:nth-of-type(2).alignRight { text-align: left; }
.table>tbody>tr>td:nth-of-type(2).alignRight { text-align: left; }

/* --- Alfa Multi-Select -------------------------------------------------------------------- */

input.multi-select-horisontal {
    display: inline-block;
    vertical-align: text-bottom;
    margin: 0px 10px 0px 20px;
}

.input-group > p:first-child input.multi-select-horisontal {
    margin-left: 0px; 
}

input.multi-select-vertical {
    display: inline-block;
    vertical-align: text-bottom;
    margin-right: 10px;
}

/* --- Alfa Input Validation ----------------------------------------------------------------- */

.input-group>.custom-select:not(:last-child), .input-group>.form-control:not(:last-child) {
    border-radius: .25rem;
}

.input-validator {
    display: inline-block;
    height: 35px;
    position: absolute;
    right: 0px;
    border-radius: .25rem;
    background-color: #b9fdbc;
}

.input-validator { display: none; }

.formerror {
    color: #336666;
	color: var(--themePrimaryDark);
    margin-left: 8px;
}

/* --- Sums Comand ----------------------------------------------------------------- */

.sumsCommand .tsReportLine {
    padding: 30px;
    background-color: #FFFFFF;
    border: 1px solid #e0e4e8;
    border-radius: .25rem;
    -webkit-box-shadow: 0 0 35px 0 rgb(154 161 171 / 15%);
    box-shadow: 0 0 35px 0 rgb(154 161 171 / 15%);
}

.sumsCommand .tableList td:first-child {
    width: 20%;
    padding: .55rem;
    text-align: left;
}

.sumsCommand .tsReportLine > .tsReportLineItem {
    padding: 0px 0px 30px 0px;
}

/* --- Password Changes ----------------------------------------------------------------- */

#tsBlurPage, .tsBlurPage {
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: var(--themePrimary);
    width: 100%;
    height: 100%;
    z-index: 100;
}

#tsBlurPage {
    opacity: 0.8;
}

#tsDialogChangePassword {
    position: absolute;
    width: 25%;
    min-width: 320px;
    top: 70px;
    left: calc(50% - 200px);
    background-color: #FFFFFF;
    border: 1px solid #e0e4e8;
    border-radius: .25rem;
    padding: 20px;
    z-index: 110;
}

/* --- Alternate pages (codeunit page) fixes to base html */

.classCommand h1,
.classCommand h2,
.classCommand h3 { 
   margin-top: 2rem; 
}
.classCommand .form-control {
   margin-bottom: 10px; 
}

/* --- Video-player ----------------------------------------------------------------- */

.tsVideoplayerContainer .swal2-html-container {
    margin: 0;
}
.tsVideoplayerContainer .tsVideoplayer {
    width: 100%;
}

/* --- Slider-buttons ----------------------------------------------------------------- */

.slider-btn-background {
    position: relative;
    background-color: var(--primaryButtonBgColor);
    width: 100%;
    height: 80px;
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}
.slider-btn-background:last-child {
    margin-bottom: 0px;
}

.slider-btn {
    transition: width 0.3s, border-radius 0.3s, height 0.3s;
    position: absolute;
    background-color: var(--primaryButtonColor);
    background-color: color-mix(in srgb, var(--primaryButtonColor) 70%, transparent);
    width: 70px;
    height: 70px;
    border-radius: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider-btn.slide-right {
    left: 5px;
}
.slider-btn.slide-left {
    right: 5px;
}
.slider-btn.slit {
    transition: all 0.3s;
    width: inherit;
    left: 0 !important;
    height: inherit;
    border-radius: inherit;
}

.slider-btn > * {
    color: var(--primaryButtonColor);
    font-size: 50px !important;
    filter: invert(1);
    -webkit-filter: invert(1);
    -moz-filter: invert(1);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    opacity: 1;
}
.slider-btn > .fa {
    font-size: 30px !important;
}
.slider-btn > img {
    height: 50px;
}

.slide-text {
    color: var(--primaryButtonColor);
    font-size: 16px;
    text-transform: uppercase;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    text-align: center;
}

.slide-header {
    font-size: 1.1rem;
}

/* --- ER-Diagram ----------------------------------------------------------------- */

.er.attributeBoxEven {
    stroke: var(--themePrimary);
}
.er.attributeBoxOdd {
    stroke: var(--themePrimary);
}
.er.entityBox {
    fill: var(--themePrimaryLight);
    stroke: var(--themePrimary);
}
.er.entityLabel {
}
.er.relationshipLabel {
}
.er.relationshipLabelBox {
}
.er.relationshipLine {
}