@import (css) url('https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,600,700');

#TempusServaPage { clear: both;}

#tsSidenav {min-height: 100% }

.headerContent { display: none; }
.footernotes { text-align: center; color: grey; font-size: 0.8em; }

body { font-size: 0.9rem; }
h1 { font-size: 2.2rem; padding-bottom: 3px; }
h1 i.fa { display: none; }

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

.forminstruction { display: none; }

.tableFiles > tbody > tr > td {
   font-size: 0.8rem;
   white-space: nowrap;
}

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


.tsCalendarNavigation { color: #8e9aa7; font-size: 0.8rem; vertical-align: middle; }

.param .label { font-size: 0.8rem; }

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

.tablePageSelectorElement a.btn { font-size: 90%; }
.tablePageSelectorElementActive a.btn { font-size: 90%; }

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

.tsCalendar th::first-letter { text-transform: uppercase; }

.btn-primary {
    color: #336666;
    background-color: #50e2c1;
    border-color: #50e2c1;
}

.btn-primary:hover {
    color: #50e2c1;
    background-color: #336666;
    border-color: #336666;
}

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

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

.tableForm .viewList { max-width: 960px; }

.footernotes {
    display: block;
    position: fixed;
    bottom: 12px;
    text-align: left;
    color: #8e9aa7;
    font-size: 0.8em;
    clear: both;
    margin: auto auto;
    padding: 0px 40px 0px 40px;
    width: 100%;
    max-width: 1600px;
    min-width: 320px;
    opacity: 0.6;
}

/* ---- Nic Editor adjustment ---- */

.nicEdit-main {
      padding-top: 20px;
}

/* ------------------------------------------------------------------------------------------ */
/* TABLE HEADER ADJUSTMENT */
/* ------------------------------------------------------------------------------------------ */

.table thead:hover {
    background-color: transparent;
}

.table thead th { 
    font-size: .85rem;
    background-color: var(--pageBgColor);
}



/* ---- tsSidenav adjustments ---- */


#tsSidenav .fa {
    color: var( --pageLinkColor);
    margin: 0px 5px 0px -4px;
    float: left;
    font: normal normal normal 18px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

#tsSidenav .fa:hover {
    color: var( --pageLinkColor);
    opacity: 1;
} 

/* ------------------------------------------------------------------------------------------ */
/* SIDEBAR NAVIGATION */
/* ------------------------------------------------------------------------------------------ */


#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;
}

/* ------------------------------- OPTIONAL SIDEBAR NAV ICONS  ------------------------------ */

/* Optionally you can use Font Awsom icons og Google 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;
}


/* ----Footer Adjustments ---- */

.footer { padding-left: 10px; }

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

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


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

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

#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 {
    /* background-color: var(--themeSecondary); */
    opacity: .6;
    transition: .5s;
}

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

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

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

.toolBar .btn-group { z-index: 1 }
.header { z-index: 5; }
.mySidenav { z-index: 10; }
.burger { z-index: 15; }
#tsSidenav { z-index: 20; }
.viewList thead th:first-child { z-index: 3; } 
#footer { z-index: 25; }
footer { z-index: 25 }


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

}

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

}

@media screen and (max-width: 800px) {
.footernotes { padding-right: 4vw; padding-left: 4vw; }
h1 { font-size: 1.8rem; max-width: 80vw; }
.tableForm .viewList, .tableForm .fileinput-button, .tableForm .progress { max-width: 92vw; }

}


/* --- New TS Update Submit Buttons --- */

.tsUpdateButtons.row { margin-left: 0px; margin-right: 0px; }


/* --- Two Buttons --- */
.tsUpdateButtons .updateSubmit {
    margin-bottom: 0.25rem;
    margin-right: 4px;
    margin-left: 0px;
    width: 32.999999%;
    float: left;
}

.tsUpdateButtons .updateSubmit:last-child { margin-right: 0px; }

.tsUpdateButtons .updateSubmit:focus {
    color: var(--themePrimary);
    background-color: var(--themePrimaryDark);
}


@charset "UTF-8";

/* -----------------------------------------------------------------------------------------
    TEMPUSSERVA CORE CSS
    Version:    3.0
    Author:     Tempus Serva
    Created:    September 2020
   ----------------------------------------------------------------------------------------- */

: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(--themePrimary); 
  --defaultButtonBgColorHover:  var(--themePrimaryLight);
  --defaultButtonBorderColorHover: var(--themePrimary);

  --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); 
  --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; }
.googlechart svg { overflow: visible !important; }
.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;
}

.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;
}

/* ------------------------------------------------------------------------------------------ */
/* 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: 30%;
}

h1 > i.fa { 
        margin-right: 0.35rem; 
        display: none;
}



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: 100%;
    height: 100vh;
    background-color: var(--themePrimary);
}

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

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

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

.tsOauth {
	width: 40%;
	margin: auto auto;
	max-width: 475px;
	min-width: 320px;
	padding: 30;
}

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

.tsOauth img { width: 30px; height: auto; margin-top: -90px; }

/* ------------------------------------------------------------------------------------------ */
/* 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 span {
	margin-left: 5px; 
}

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

.btn-primary {
    color: #336666;
    color: var(--primaryButtonColor);
    background-color: #50e2c1;
    background-color: var(--primaryButtonBgColor);
    border-color: #50e2c1;
    border-color: var(--primaryButtonBorderColor);
}

.btn-primary a {
    color: #336666;
    color: var(--primaryButtonColor);
    text-decoration: none;
}

.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; }

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

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

.doubleIcon {
	float:left;
}

.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: #b9ffef;
    background: #b9ffef;
    border: none;
}

.viewList .btn:focus {
    background-color: #40d2c1;;
    background: #40d2c1;
    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: #b9ffef;
    background: #b9ffef;
    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; }

/* ------------------------------------------------------------------------------------------ */
/* 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(--themePrimaryDark);
    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 26px;
    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: collapse;
	background-color: var(--pageBgColor);
	margin-bottom: 0rem;
}

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

.table thead th {
	text-transform: uppercase;
	padding: .55rem;
	vertical-align: bottom;
	text-align: left;
	border-bottom: 2px solid #dee2e6;
	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 #dee2e6;
    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;	
}

.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;
}

/* --- 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; }
.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 {
  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;
}

.isNarrow>a:not(.fieldFilter):hover { width:auto; }


/* ------------------------------------------------------------------------------------------- */
/* 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(--themePrimaryLight); }
.param .label a { color: var(--themePrimary); }

.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 20px 40px;
    max-width: 1600px; /* Control content width, all other elements respond to this width */
    min-width: 320px;
    margin: auto auto;
    margin-bottom: 40px;
}

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


/* --- 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;
}

/* ------------------------------------------------------------------------------------------ */
/* 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 .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;
}

.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; }
#TempusServaPage .tsWidgetIcon .material-icons { 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;
}

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

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

#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-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; }

.tsMenuItemMenuViewLink { display: none; }

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

.mergedField { white-space: nowrap; }

/* --- 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; 
}

.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;
}

.tableFieldTableValue { 
    vertical-align: top; 
}

p:empty {
    display: none;
}

.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; }

.tableFieldTableHeader, .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 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: 4px 0px 4px 0px;
    font-size: 0.9rem;
    margin-bottom: 2px;
    border: 0px;
}

.fileinput-button:hover { background-color: var(--themeLightGrey); }

.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 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:first-child {
    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 {
    position: absolute;
    margin-left: -23px;
    margin-top: 3px;
}

.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 ----------------------------------------------------------------------- */

.tsMoreShow {
     display: block;
     padding: 10px 0px 10px 0px;
}

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

.commentuser, .commenttime {
    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;
    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;	
}

#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;
}
:root {
  --themePrimary: #003A45; 
  --themePrimaryLight: #D2DD8F;
  --themePrimaryDark: #00463C;
  --themeSecondary: #8D9976;
  --companyLogo: url(media/DFH_Logo_Primary_White.19.svg);
  --loginBackgroundImage: url(media/LoginLogo.26.png);

  --themeGuidance: #daebf3;
}

:root:has(#TempusServaPage.beredskab) {/*
  --themePrimary: #001d5b; 
  --themePrimaryLight: #79bfeb;
  --themePrimaryDark: #000b46;
  --themeSecondary: #8638ec;/**/
  --themePrimary: #005958;
  --pageBreadcrumbLinkColor: #6cb43f;
  --pageLinkColor: #008575;
  --primaryButtonColor: #daebf3;
  --primaryButtonColorHover: #daebf3;
  --companyLogo: url(media/danske-fjernvarme-logo.69.svg);
  --loginBackgroundImage: url(media/71.68.jpg);

  --themeGuidance: #daebf3;
}

.LoginPage {
    background: url(media/LoginLogo.26.png) no-repeat;
    background: var( --loginBackgroundImage) no-repeat;
    background-size: cover;
    background-position: center center;
    background-blend-mode: normal;
    background-color: var(--themePrimary);
    border-top: 0px solid var(--themePrimary);
}
.LoginPage.ikke-dfh {
    background: url(media/71.68.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
    background-blend-mode: normal;
}
.LoginPage .tsOauth {
    display: none;
}

.formLogin {
    position: absolute;
    left: 10%;
    bottom: 20%;
    background-color: #FFFFFF;
    background-color: var(--loginBgColor);
    border: 1px solid #dee2e6;
    border-color: var(--loginBorderColor);
    border-radius: 4px;
    width: 40%;
    max-width: 475px;
    min-width: 320px;
    padding: 30px;
    z-index: 2;
}

.formLogin .material-icons {
    font-size: 20px;
    color: var(--themePrimary);
}

.loginPageTitle {
   position: absolute;
   top: 0px;
   margin: 10%;
   width: 70vw;
   font-size: 5vw;
   font-family: sans-serif;
   line-height: 1;
   color: #FFFFFF;
   font-weight: bold;
   text-transform: uppercase;
}

.loginPageTitle p {
    font-size: 2vw;
    font-weight: 100;
    text-transform: initial;
    margin-top: 10px;
}

.header {
      background-color: var(--themePrimary);
      box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2);
      transition: all 0.3s ease-out;
      line-height: 25px;
}

/* Fix input-group boarder radius on pre- and append */
.LoginPage .input-group .form-control:not(:first-child):not(:last-child) {
    border-left: 1px solid #ced4da;
    border-radius: 0rem;
}

.burger { background-color: var(--themePrimaryLight); color: var(--themePrimary); }
.btn-personal { color: var(--themePrimaryLight); }

.tsToolbarPersonal .dropdown-menu .fa { color: var(--themePrimary); }

#tsMenuPersonal .btn:hover {
    color: var(--themePrimaryLight);
}


.logo {
	display: block;
	width: 180px;
	height: 44px;
	position: absolute;
	top: calc(50% - 22px);
	left: 80px;
	line-height: 60px;
	background: var(--companyLogo) no-repeat;
	background-position-x: 0px;
	background-position-y: center;
	background-size: contain;
	margin: 0px;
	opacity:1;
}

.logo:hover { opacity: 1; }

footer, .footer {
    background-color: var(--themePrimaryLight);
}

.btn-primary {
    background-color: var(--themePrimary);
    border: none;
    color: var(--themePrimaryLight);
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background-color: var(--themePrimaryLight);
    border: none;    
    color: var(--themePrimary);
    transition: .3s;
}


.boardCommand #bgContainerA {
    width: 100%;
    height: 240px;
    background-color: #daebf3; 
    position: absolute;
    z-index: -13;
}

.tsSidebar {background: linear-gradient(-303deg,#0b5562,#003A45 50%,#003A45);}

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

.viewList .btn:focus, .form-control.btn-primary:focus {
    background-color: var(--themePrimaryLight);
    color: var(--themePrimary);
    border: none;
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    background-color: var(--themePrimary);
    border: none;
    color: var(--themePrimaryLight);
}


.burger, .btn-personal { opacity: 1; }
.burger:hover, .btn-personal:hover { opacity: 0.8; }

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

/* ---------- Merge Field ----------*/

.mergedField { white-space: normal; }

.mergedField > span {
    display: block;
    font-size: 1rem;
    color: var(--themePrimary);
    margin-bottom: 5px; 
}

.mergedField > span:first-child {
    white-space: normal;
}

.mergedField > span > p {
    font-size: 1rem; 
    color: #333333;
}

.mergeFieldPart {
    margin-bottom: 5px;
    max-width: 84vw;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mergeFieldPart br { display: none; }
.mergedField .radiogroup br { display: none; }

.formhelp {
    color: var(--themePrimary);
    font-size: .75rem;
}

/* --- Fix Mergefield checkbox ---  */

.mergeFieldPart > span:first-child {
    width: 2%;
    min-width: 40px;
}

/* To be fixed in V5*/

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

main .systemerror { margin-right: 5px; }

#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: var(--themePrimaryLight);
}

.fileinput-button {
    width: 100%;
    font-size: 0.9rem;
    margin-bottom: 2px;
    border: 1px solid var(--codeunitButtonBorderColor);
}

.stepFirst .tableFieldTableHeader {
    display: none; 
}

.zoneMenu .btn { margin-bottom: 3px; }

/* -------------- Service Buttons -------------- */

.zoneMenu .material-icons {margin-left: 5px;font-size: 1rem;vertical-align: middle;}

.tsWidgetButton {
    height: 230px;
    padding: 0px;
    text-align: center;
}

.tsWidgetButton a {
    display: block;
    color: #FFFFFF;
    font-size: 1.5rem;
    margin: 0px;
    padding: 10px 0px;
    height: 100%;
    text-decoration: none;
}

.tsWidgetButton a > span {
    display: block;
    padding: 10px 0px 0px 0px;
}



/* Hide menu items */
/*
#QuickSearchForm,
#menuCreateItem,
#menuWindowSearch,
#menuWindowSearchAdvanced,
#menuSearchClear,
#menuWindowViews,
#menuGroupFiles,
#menuGroupViews,
#menuGroupStatistics,
#menuGroupRelated { display: none; }
*/

.radiogroup br { display: none; }

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

/* When these styles have been succesfully tested remove legacy input-validator */

.input-validator { display: none; }

.mergeFieldPart > span .input-group-addon,  
.mergeFieldPart > span .input-group-append {
    display: none;
}

.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);
}

.tsValidateTrue .form-control {
    padding-right: calc(1.5em + .75rem);
    background-image: url(media/check.24.svg);
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.65em + .375rem) calc(.65em + .375rem);
    xxx_border-color: #ced4da;
}

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

.tsValidateTrue > .cke {
    border-color: #28a745;
	position: relative;
}
.tsValidateTrue > .cke::before {
    background-image: url(media/check.24.svg);
    position: absolute;
    right: .25rem;
	top: .25rem;
    width: calc(.75em + .375rem);
    height: calc(.75em + .375rem);
    display: inline-block;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    content: "";
}

.tsValidateFalse .form-control {
    padding-right: calc(1.5em + .75rem);
    background-image: url(media/exclaim.25.svg);
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    xxx_border-color: #ced4da;
}

.tsValidateFalse .form-control:focus {
    xxx_border-color: #915D71;
    xxx_border-color: #8D9976;
    xxx_box-shadow: 0 0 0 0.2rem rgba(220,53,69,.25);
}

.tsValidateFalse > .cke {
    border-color: #dc3545;
	position: relative;
}
.tsValidateFalse > .cke::before {
    background-image: url(media/exclaim.25.svg);
    position: absolute;
    right: .25rem;
	top: .25rem;
    width: calc(.75em + .375rem);
    height: calc(.75em + .375rem);
    display: inline-block;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    content: "";
}

.tsValidateFalse .custom-file-label { 
    border: 1px solid #915D71; 
    box-shadow: 0 0 0 0.2rem rgb(220 53 69 / 25%);
    padding-right: calc(1.5em + .75rem);
    background-image: url(media/exclaim.25.svg);
    background-repeat: no-repeat;
    background-position: right calc(5.75em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.tsValidateTrue .custom-file-label {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40,167,69,.25);
     padding-right: calc(1.5em + .75rem);
    background-image: url(media/check.24.svg);
    background-repeat: no-repeat;
    background-position: right calc(5.75em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.tsValidateTrue .form-control:focus, 
.tsValidateFalse .form-control:focus { 
    border-color: #8D9976;
    box-shadow: none; 
} 

/* Fix Positioning of Company Name (Widget165) */
#Widget165 {
    width: fit-content;
    position: absolute;
    z-index: 25;
    top: 10px;
    right: calc(25% - 100px);
    margin: 0px;
}

#Widget165 > .tsWidgetInnerBC {
    background-color: transparent;
    border: 0px;
    box-shadow: none;
    width: fit-content;
    margin: 0px;
    padding: 0px;
}

#Widget165 > .tsWidgetInnerBC > h3 {
    display: none;
}

#Widget165 > .tsWidgetInnerBC > .tsWidgetAmount {
    font-size: 1rem;
    font-weight: 100;
    color: var(--themePrimaryLight);
}



/* Reduce padding on Task List */
.tsDashboardPage .table > tbody > tr.customStyle_Newtask > td:nth-child(2),
.tsDashboardPage.table > tbody > tr.customStyle_Completed > td:nth-child(2),
.tsDashboardPage .table > tbody > tr.customStyle_Inprogress > td:nth-child(2),
.tsDashboardPage .table > tbody > tr.customStyle_Onhold > td:nth-child(2) {
    padding: 0.25rem; 
}

/* Specific element adjustments */
#VB_DATA_ISCC, #VB_DATA_REDCERT { width: 40px; min-width: 20px; }


@media screen and (max-width: 800px) {
#tsUserFullname { background: var(--themePrimaryLight); color: var(--themePrimary); }
#Widget37 .tsWidgetButton a, 
#Widget34 .tsWidgetButton a, 
#Widget42 .tsWidgetButton a { background-size: 70%; }


}


.tableFieldTableValue #VB_DATA_TRPILLER1_MERGE p,
.tableFieldTableValue #VB_DATA_HALMFORBRUG_MERGE p,
.tableFieldTableValue #VB_DATA_HALMFORBRUG1_MERGE p,
.tableFieldTableValue #VB_DATA_SKOVFLISFORBRUG_MERGE p { margin-bottom: 6px; }
.tableFieldTableValue #VB_DATA_TRPILLER1_MERGE span,
.tableFieldTableValue #VB_DATA_HALMFORBRUG_MERGE span,
.tableFieldTableValue #VB_DATA_HALMFORBRUG1_MERGE span,
.tableFieldTableValue #VB_DATA_SKOVFLISFORBRUG_MERGE span { margin-bottom: .5rem; }
.tableFieldTableValue #VB_DATA_TRPILLER1_MERGE span input,
.tableFieldTableValue #VB_DATA_HALMFORBRUG_MERGE span input,
.tableFieldTableValue #VB_DATA_HALMFORBRUG1_MERGE span input,
.tableFieldTableValue #VB_DATA_SKOVFLISFORBRUG_MERGE span input { margin-bottom: .5rem; }

/* Temp Fix for new Bootstrap form-control height definition */

.form-control { height: auto; } 

/* ---- News Panel Styles ---- */

.newsItem { font-size: .8rem; color: var(--themeDark); }
.newsHeader { font-size: 1.2rem; color: var(--themeSecondary); }
.newsContent a { color: var(--pageLinkColor); }
.newsAuthor { font-size: .8rem; color: var(--themeDark); display:none; }

/* ---- News Respons Message ---- */

.acceptedMessage, .existingMessage { font-size: 1rem; padding: 20px; }


/* ---- Tilsyn Interface Styles ---- */ 

.tilsynInterface #NB_DATA_VEJLEDNINGEKSTERN { 
    display: none;
}

.tilsynInterface #VB_DATA_VEJLEDNINGEKSTERN { 
    font-size: 1.5rem; 
    font-weight: 100;
    color: var(--themePrimary);
    margin-top: 2rem;
}

.tilsynInterface .pageNameTitle {
    font-weight: 700;
    color: var(--themePrimary);
}

.tilsynInterface main { max-width: 1024px; }
.tilsynInterface h1 { max-width: 100%; margin-top: 1.5rem; }
.tilsynInterface .questionaireMessages {
    font-size: 1.5rem;
    font-weight: 100;
    color: var(--themePrimary);
    margin-top: 2rem;
} 

/* -- GDPR Tasks Complete Animation -- */

#Widget151.tsWidgetEmpty #viewList151.badge-danger { 
   width: 100%; 
   height: 100px;
   background-color: transparent;
   color: transparent; 
   background: url(media/check-mark-dfh-transp.61.gif) no-repeat; 
   background-size: contain; 
   background-position: center;
   margin-top: 40px;
   margin-bottom: 0px;
}

#Widget151.tsWidgetEmpty .widgethelp:after {
  content: '\a Godt arbejde! Der er ikke flere opgaver med deadline indenfor de næste 3 måneder.';
  white-space: pre;
  font-size: 1rem;
  font-weight: bold;
  color: var(--themeSecondary);  
}


.tableForm .cke.is-invalid,
.tableForm .radiogroup-wide.is-invalid {
	border-color: #dc3545;
}

.tableForm .cke.is-valid,
.tableForm .radiogroup-wide.is-valid {
	border-color: #28a745;
} 

/* --- Fix heading margin-top på Deklarationer --- */
 
.Deklaration > .classCommand h1,
.Deklaration > .classCommand h2,
.Deklaration > .classCommand h3 { 
   margin-top: 0rem; 
}

/* --- Ny behandlingsaktivitet-nyheds-push --- */

.tsSidebar .newsItem .newsBtns .newsOkBtn,
.newsItem.ny-behandlingsaktivitet .newsBtns .newsOkBtn {
    color: var(--themePrimaryLight);
    background-color: var(--themePrimary);
    border-color: var(--themePrimary);
    border-width: 0px;
    font-size: .85rem;
}
.tsSidebar .newsItem .newsBtns .newsMoreBtn,
.newsItem.ny-behandlingsaktivitet .newsBtns .newsMoreBtn {
    color: var(--themePrimary);
    background-color: var(--themePrimaryLight);
    border-color: var(--themePrimaryLight);
    border-width: 0px;
    font-size: .85rem;
}
.newsItem.ny-behandlingsaktivitet .newsAuthor {
    display: none;
}