html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  opacity: 0;
  font-family: Cairo !important;
  background: black;
  transition: opacity 1s 1s, background 1s;
  overflow: hidden;

  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

/* Recommended for helping with iOS page zoom blocking */
* {
  box-sizing: border-box;
}

/* Setup Default Theme - Dark */
:root {
  --bl-color-one: cornflowerblue;
  --bl-color-two: #0047AB; /* cobalt blue */
  --bl-color-three: #0047ABCC; /* cobalt blue @80% */
  --bl-color-four:  #6495ED80; /* cornflowerblue @50% */
  --bl-color-five: #0047AB20; /* cobalt blue @12.5% */
  --bl-color-input: white;

  --bl-background: black;
  --bl-image: none;
/*  --bl-image-size: 1920px 570px; */
  --bl-image-size: contain;
  --bl-border: 2px solid var(--bl-color-one);
  --bl-border-thin: 1px solid var(--bl-color-one);
  --bl-radius: 8px;
  --bl-opacity: 0.75;
  --bl-shadow: drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 2px black);
  --bl-shadow2: drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 2px black) drop-shadow(0px 0px 3px black) drop-shadow(0px 0px 4px black);

  --bl-background-blog: var(--bl-color-two);
  --bl-border-blog: 2px solid var(--bl-color-one);

  --fa-primary-opacity: 1;
  --fa-secondary-opacity: 1;
  --fa-primary-color: var(--bl-color-one);
  --fa-secondary-color: var(--bl-color-two);
}

html[theme="Dark"] {
  --bl-image: url(images/bookshelf_blue.jpg);
}

html[theme="Light"] {
  --bl-color-one: silver;
  --bl-color-two: dimgray;
  --bl-color-three: #696969CC; /* dimgray @80% */
  --bl-color-four: #C0C0C080; /* silver @50% */
  --bl-color-five: #69696920; /* dimgray @12.5% */
  --bl-color-input: white;
  --bl-image: url(images/bookshelf.jpg);
  --bl-opacity: 0.75;
}

html[theme="Red"] {
  --bl-color-one: indianred;
  --bl-color-two: crimson;
  --bl-color-three: #DC143CCC; /* crimson @80% */
  --bl-color-four: #CD5C5C80; /* indian red @50% */
  --bl-color-five: #DC143C20; /* crimson @12.5% */
  --bl-color-input: lightpink;
  --bl-image: url(images/bookshelf_red.jpg);
  --bl-opacity: 0.75;
}


/* https://stackoverflow.com/questions/61083813/how-to-avoid-internal-autofill-selected-style-to-be-applied */
input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition: background-color 600000s 0s, color 600000s 0s;
}


/* Page Background that is Theme-aware */
.Background {
  background-image: var(--bl-image);
  background-size: var(--bl-image-size);
}


/* Bootstrap Tooltip Overrides */
.BLTooltip {
  --bs-tooltip-bg: #003060;
  --bs-tooltip-color: var(--bl-color-one);
}
html[theme="Light"] .BLTooltip {
  --bs-tooltip-bg: #202020;
  --bs-tooltip-color: var(--bl-color-input);
}
html[theme="Red"] .BLTooltip {
  --bs-tooltip-bg: hotpink;
  --bs-tooltip-color: var(--bl-color-input);
}


/* This is applied to icons mainly */
.DropShadow {
  filter: var(--bl-shadow);
  transition: color 1s;
}
.DropShadow > span {
  transition: color 1s;
}
.DropShadow2 {
  filter: drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 2px black) drop-shadow(0px 0px 3px black) drop-shadow(0px 0px 4px black);
}


/* this is what fa-swap-opacity normally does */
.Swap {
  --fa-primary-color: var(--bl-color-two);
  --fa-secondary-color: var(--bl-color-one);
}


/* primarily for the main search input field */
::placeholder {
  color: var(--fa-primary-color);
  opacity: 0.6;
  transition: color 1s;
}


/* used to hide layers of UI */
#divShade,
#divShade2,
#divShade3 {
  position: absolute;
  background: black;
  margin: 0px;
  padding: 0px;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s;
}
#divShade1 {
  z-index: 100;
}
#divShade2 {
  z-index: 200;
}
#divShade3 {
  z-index: 300;
}


/* Specific Elements */
#divAccount,
#divAdd,
#divLogin {
  z-index: 101;
  opacity: 0;
  transition: opacity 0.5s;
}
#divLogin {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}
#divURL {
  z-index: 201;
  opacity: 0;
  transition: opacity 0.5s;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}
#divSessions,
#divIconSearch {
  z-index: 201;
  opacity: 0;
  transition: opacity 0.5s;
  top: 50% !important;
  left: 50% !important;
  height: 75% !important;
  transform: translate(-50%, -50%);
}
#divStatistics {
  z-index: 201;
  opacity: 0;
  transition: opacity 0.5s;
  top: 20px !important;
  left: 20px !important;
  right: 20px !important;
  bottom: 20px !important;
  width: unset !important;
  height: unset !important;
}
#divStatsHolder {
  opacity: 0;
  transition: opacity 0.5s;
  width: 100% !important;
  height: 100% !important;
  position: relative  !important;
  font-family: Cairo !important;
  font-style: normal !important;
  font-size: 16px !important;
  padding: 0px 2px 2px 2px !important;
  overflow: hidden !important;
}
#divStatisticsHolder {
  position: absolute;
  top: 37px !important;
  left: 0px !important;
  right: 0px !important;
  bottom: 0px !important;
  width: unset !important;
  height: unset !important;
}
#divAccount,
#divAdd {
  min-width: 450px;
  max-width: 100vw;
  min-height: 426px;
  max-height: 100vh;
}

#divAuthorProfileHolder {
  min-width: 330px;
  max-width: 660px;
  min-height: 190px;
  max-height: 380px;
}
#divAuthorProfileLinks {
  min-height: 60px;
}
#divAuthorProfileName {
  margin-top: -4px;
}
#divAuthorProfilePhoto {
  container-type: size;
}


#divPeriods {
  z-index: 301;
  opacity: 0;
  transition: opacity 0.5s;
  top: 50% !important;
  left: 50% !important;
  height: 90% !important;
  transform: translate(-50%, -50%);
}
#divPeriodsBG {
  top: 34px;
  height: calc(100% - 38px) !important;
}
#divPeriodsPresets {
  top: 32px;
  height: calc(100% - 38px) !important;
  padding-right: 32px;
}
#divPeriodsPresets > div.simplebar-wrapper > div.simplebar-mask > div > div > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#divAccountLinksNav {
  top: -6px;
  position: Relative;
}
.NavButton {
  padding: 8px;
}
.NavButton:hover .Swap,
.NavButton:hover {
  --fa-primary-color: var(--bl-color-input) !important;
  --fa-secondary-color: var(--bl-color-input) !important;
}
.NavButton > svg {
  filter: drop-shadow(0px 0px 1px black);
}
.ButtonR1 {
  left: unset !important;
  right: 32px;
  top: -40px !important;
}
.ButtonR2 {
  left: unset !important;
  right: -4px;
  top: -40px !important;
}
#btnAccount {
  container-type: size;
}


#divLoginMessage {
  background: var(--bl-color-two);
  color: var(--bl-color-input);
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
  font-family: Cairo;
  z-index: 10;
  border: var(--bl-border);
  border-radius: var(--bl-radius);
}
.Header {
  background: var(--bl-color-three);
  color: var(--bl-color-input);
  top: 2px !important;
  left: 2px !important;
  width: calc(100% - 34px) !important;
  height: 40px !important;
  position: absolute;
  font-family: Cairo;
  z-index: 10;
  border-bottom: var(--bl-border);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
#divStatOptions {
  border-right: var(--bl-border) !important;
  border-top-left-radius: 6px;
}

#divAccountOptions {
  border-right: var(--bl-border) !important;
  height: calc(100% - 2rem - 42px) !important
}

#divStatOptions .tabulator-row .tabulator-cell,
#divAccountOptions .tabulator-row .tabulator-cell {
  padding: 3px 0px;
  overflow: visible;
  text-overflow: unset;
  filter: var(--bl-shadow);
}


/* Entries refers to the counts in the Account Options list */
.Entries {
  background: var(--bl-color-two);
  border-radius: var(--bl-radius);
  margin: 0px 4px 0px 0px;
  padding: 1px 4px 0px 4px;
  height: 21px !important;
  font-size: 12px;
}
.Entries > div {
  filter: var(--bl-shadow);
  color: var(--bl-color-input);
}


/* Font Awesome Free uses <i>, Pro uses <svg> */
button:disabled {
  opacity: 0.25 !important;
}
button > i {
  filter: var(--bl-shadow);
  color: var(--bl-color-input);
}
button > svg {
  filter: var(--bl-shadow);
}
button > svg > g > path {
  transition: fill 1s;
}

.ButtonBlog {
  --fa-primary-color: var(--bl-color-one);
  --fa-secondary-color: var(--bl-color-two);
  padding-left: 10px !important;
  padding-right: 10px !important;
  height: 75px !important;
  transition: 1s all;
}
.ButtonBlogSwap {
  --fa-primary-color: var(--bl-color-two);
  --fa-secondary-color: var(--bl-color-one);
  padding-left: 10px !important;
  padding-right: 10px !important;
  height: 75px !important;
  transition: 1s all;
}
.Selected {
  background: yellow !important;
  opacity: var(--bl-opacity);
  transition: background 0.4s !important;
}
.BlogButtonHolder:hover > div {
  opacity: 0.5;
  transition: opacity 0.4s !important;
}
.ButtonUtility {
  --fa-primary-color: var(--bl-color-one);
  color: var(--bl-color-one);
  border: var(--bl-border);
  border-radius: var(--bl-radius);
  background: var(--bl-color-three);
  filter: var(--bl-shadow);
  padding: 8px 8px;
  font-size: 14px;
}
.ButtonUtility:hover {
  background: var(--bl-color-one);
  transition: background 0.4s !important;
}
.ButtonUtilitySM {
  --fa-primary-color: var(--bl-color-one);
  color: var(--bl-color-one);
  border: 1px solid var(--bl-color-one);
  border-radius: var(--bl-radius);
  background: var(--bl-color-three);
  padding: 4px 4px;
  margin: 2px;
  font-size: 13px;
  white-space: nowrap;
}
.ButtonUtilitySM > div {
  filter: var(--bl-shadow);
}
.ButtonUtilitySM:hover {
  color: var(--bl-color-input);
  background: var(--bl-color-one);
  transition: background 0.4s !important;
}
.ButtonUtilitySM.Selected > div {
  filter: none;
  color: black;
}
.ButtonUtilityGroup {
  padding-left: 6px;
  padding-right: 8px;
  top: -1px !important;
  min-height: 40px;
  border-color: var(--bl-color-one);
  color: var(--bl-color-one);
  --fa-primary-color: var(--bl-color-one);
  --bs-btn-color: var(--bl-color-one);
  --bs-btn-bg: var(--bl-color-three);
  --bs-btn-border-radius: var(--bl-radius) !important;
  --bs-btn-hover-bg: var(--bl-color-one);
  --bs-btn-hover-color: var(--bl-color-input);
  transition: width 300ms linear;
  overflow: hidden;
  }
.ButtonUtilityGroup:hover {
  transition: background 0.4s !important;
}
.ButtonUtilityGroup > div {
  filter: var(--bl-shadow);
}
.ButtonUtilityGroup.Selected > div {
  filter: none;
}

.ButtonUtilityGroup.Selected {
  border-color: var(--bl-color-one);
  color: black;
  opacity: 1;
  --fa-primary-color: var(--bl-color-input);
  --bs-btn-color: black;
  --bs-btn-bg: var(--bl-color-four);
  --bs-btn-hover-bg: var(--bl-color-one);
  --bs-btn-hover-color: var(--bl-color-two);
}
.ButtonUtilityGroup.Selected:hover {
  transition: background 0.4s !important;
}

#btnThemeDark,
#btnThemeLight,
#btnThemeRed {
  opacity: 0;
  transition: all 1s linear;
  position: absolute !important;
  left: 0px !important;
  top: 0px !important;
  width: 65px !important;
  height: 65px !important;
  padding: 6px;
}
.MenuButton {
  padding: 0px;
  border-radius: var(--bl-radius);
}

#divActivityLogHeader {
    left: 174px;
    right: 56px;
    top: 64px;
}

.ContainerBG {
  border: var(--bl-border);
  border-radius: var(--bl-radius);
  background: var(--bl-background);
  opacity: 0.8;
  filter: var(--bl-shadow);
  pointer-events: none;
  transition: background 1s, border 1s;
}
.ContainerBGLogin {
  border: var(--bl-border);
  border-top-left-radius: var(--bl-radius);
  border-top-right-radius: var(--bl-radius);
  border-bottom: none;
  background: var(--bl-color-two);
  opacity: 0.8;
  filter: var(--bl-shadow);
  pointer-events: none;
  transition: background 1s, border 1s;
}
.ContainerBGPadded {
  width: calc(100% - 2rem) !important;
  height: calc(100% - 2rem) !important;
  border: var(--bl-border);
  border-radius: var(--bl-radius);
  background: var(--bl-background);
  opacity: 0.8;
  filter: var(--bl-shadow);
  pointer-events: none;
  transition: background 1s, border 1s;
}
.ContainerFG {
  width: calc(100% - 2rem) !important;
  height: calc(100% - 2rem) !important;
  border: var(--bl-border);
  border-radius: var(--bl-radius);
  background: transparent;
  pointer-events: none;
  z-index: 10;
  transition: background 1s, border 1s;
}
.ContainerBlog {
  border: var(--bl-border-blog);
  border-radius: var(--bl-radius);
  background: var(--bl-background-blog);
  opacity: var(--bl-opacity);
  filter: var(--bl-shadow);
  pointer-events: none;
  transition: background 1s, border 1s;
}


.ContainerPhoto {
  top: 0px !important;
  left: 0px !important;
  width: calc(100% - 20px) !important;
  height: calc(100% - 20px) !important;
  border: var(--bl-border);
  border-radius: var(--bl-radius);
  background: transparent;
}
.ContainerPhoto > div > img {
  width: 100%;
}
#divAccountPhotoHolder {
  min-width: 90px;
  min-height: 90px;
}
#divAccountPhotoFG {
  container-type: size;
}
#divAccountPhoto > svg,
#divAccountPhoto > img {
  transition: transform 0.5s;
}

.ContainerAuthor {
  overflow: hidden;
  border: none;
  border-radius: 12px;
  filter: var(--bl-shadow);
  background: var(--bl-color-two);
  width: calc(100% - 0.5rem) !important;
  height: calc(100% - 0.5rem) !important;
}
.ContainerAuthorPhoto {
  overflow: hidden;
  border-radius: var(--bl-radius);
  filter: var(--bl-shadow);
}
.ContainerAuthorPhoto > img {
  width: 100%;
}


.ChartHeader {
  background: var(--bl-color-three);
  border-top-right-radius: 6px;
  padding: 4px 40px 2px 6px !important;
}
.ChartFooter {
  background: var(--bl-color-three);
  padding: 4px 0px 4px 6px !important
}
.ChartBorder {
  border-top: var(--bl-border);
  border-bottom: var(--bl-border);
  min-height: 100px;
  height: 100%;
  width: 100%;
}
.Chart {
  min-height: 100px;
  height: 100%;
  transition: opacity 300ms;
}
.ChartData {
  border-top: var(--bl-border);
  margin-bottom: -2px;
  min-height: 100px;
  height: 100%;
  flex-basis: 0;
  flex-grow: 1;
}
.d3axis text {
  fill: var(--bl-color-one) !important;
}

#divSearch {
  flex-grow: 100;
}
#editUsername,
#editPassword {
  background: #20202080;
  padding: 12px;
  border: none;
  border-radius: var(--bl-radius);
  color: var(--bl-color-input) !important;
  font-size: 16px;
}
#editIconSearch,
#editURL {
  background: #20202080;
  padding: 6px 6px;
  border: none;
  border-radius: var(--bl-radius);
  color: var(--bl-color-input) !important;
  font-size: 14px;
}
#btnLoginOK:hover,
#btnLoginCancel:hover,
#btnForgotUsername:hover,
#btnForgotPassword:hover {
  --fa-primary-color: #C0C0C0;
}
#editSearch {
  background: none;
  border: none;
  color: var(--bl-color-input) !important;
  font-size: 36px;
  min-width: 200px;
}
#editIconSearch:focus-visible,
#editURL:focus-visible,
#editUsername:focus-visible,
#editPassword:focus-visible,
#editSearch:focus-visible {
  outline: none;
}
#editEMailCode {
  position: relative;
  width: 85px;
  margin-right: 5px !important;
  text-align: center;
  font-size: 20px;
  padding: 4px 0px;
  border-radius: 5px;
}

#divIconSearchDataBG {
  border-top: var(--bl-border);
  border-bottom: var(--bl-border);
  background: var(--bl-color-two);
  opacity: 0.5;
  pointer-events: none;
  transition: background 1s, border 1s;
}
#divIconSearchData {
  font-size: 12px;
  color: var(--bl-color-one);
  filter: var(--bl-shadow);
}
#divIconSearchResults {
  outline: none;
  left: 2px;
  height: calc(100% - 75px);
  width: 346px;
  position: relative;
  box-sizing: border-box;
  margin-top: 111px;
}
#divIconSearchResultsInner {
  position: relative;
  color: var(--bl-color-input);
}

/* Lots going on with the search results icons */
.SearchIcon {
  border-radius: 0.375rem;
  cursor: pointer;
  max-width: 90px;
  max-height: 90px;
  display: flex;
  gap: 3px;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3px 0px 0px 0px;
}
.SearchIcon.Selected > svg {
  filter: var(--bl-shadow);
}
.SearchIcon > div {
  color: var(--bl-color-one);
}
.SearchIcon:hover {
  color: var(--bl-color-input);
}
.SearchIcon:hover > div {
  color: var(--bl-color-input);
}
.SearchIcon.Selected > div,
.SearchIcon.Selected {
   color: var(--bl-color-two);
}
.SearchIcon.Selected:hover,
.SearchIcon.Selected:hover > div {
   color: var(--bl-color-two);
}


.Label {
  color: var(--bl-color-one);
}
.LabelAlt {
  color: var(--bl-color-input);
}
.Edit {
  background: #202020CC;
  border: none;
  border-radius: var(--bl-radius);
  padding: 8px;
  color: var(--bl-color-input) !important;
}
.Edit:focus-visible {
  outline: none;
}


/* Account Pages */
#pcAccount {
  left: 152px !important;
  top: 42px !important;
  width: calc(100% - 2rem - 154px) !important;
  height: calc(100% - 2rem - 41px) !important;
  background: transparent;
}
#pcStatistics {
  position: relative !important;
  top: 0px !important;
  left: 0px !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent;
}
.Page {
  position: absolute;
  width: 100% !important;
  height: 100% !important;
  background: transparent;
  overflow: auto !important;
  overflow-x: hidden !important;
  opacity: 0;
  transition: opacity 200ms;
  margin: 1rem;
}



/* Tabulator Defaults */
.tabulator-table {
  background-color: transparent !important;
  overflow: hidden !important;
}
.tabulator-tableholder,
.tabulator-holder,
.tabulator-row,
.tabulator-row-even,
.tabulator {
  background-color: transparent !important;
  color: var(--bl-color-input);
  overflow: hidden !important;
}
.tabulator-cell {
  border: none !important;
  filter: var(--bl-shadow);
}
.tabulator-selected {
  background-color: #FFFF0080 !important;
  color: white !important;
}

/* Tabulator Group Arrows */
div .tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow {
  margin-top: -4px;
  margin-right: 10px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--bl-color-one);
  border-bottom: 0;
}
div .tabulator-row.tabulator-group .tabulator-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  margin-top: -4px;
  margin-right: 16px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 0;
  border-left: 6px solid var(--bl-color-one);
  vertical-align: middle;
}

/* Tabulator Defaults: With Column Headers */

#divSessionList .tabulator-header,
#divAccountLinks .tabulator-header,
#divAccountHistory .tabulator-header {
  color: var(--bl-color-input);
  border: none;
  background: transparent;
  height: 30px;
}
#divSessionList .tabulator-header .tabulator-col,
#divAccountLinks .tabulator-header .tabulator-col,
#divAccountHistory .tabulator-header .tabulator-col {
  border: 0px;
  background: var(--bl-color-two);
  opacity: 0.8;
}
#divSessionList .tabulator-header .tabulator-col .tabulator-col-title,
#divAccountLinks .tabulator-header .tabulator-col .tabulator-col-title,
#divAccountHistory .tabulator-header .tabulator-col .tabulator-col-title {
  filter: var(--bl-shadow);
  font-weight: normal;
}


/* Adjustments for specific Tabulator tables */

#divAccountLinks {
  border: none;
  font-family: Cairo !important;
  font-size: 14px;
  width: calc(100% - 32px) !important;
}

#divAccountHistory {
  border:none;
  font-family: Cairo !important;
  font-size: 14px;
  width: calc(100% - 32px) !important;
  padding-top: 32px;
}

#divAccountRoles {
  border:none;
  font-family: Cairo !important;
  font-size: 14px;
  font-weight: normal;
  width: calc(100% - 32px) !important;
  margin-top: -4px;
}
#divAccountRoles .tabulator-row.tabulator-group > div {
  filter: var(--bl-shadow);
}
#divAccountRoles .tabulator-row.tabulator-group {
  border-top: var(--bl-border);
  border-bottom: var(--bl-border);
  border-right: none;
  padding: 5px 5px 5px 10px;
  background: var(--bl-color-three) !important;
  font-weight: normal;
  min-width: 100%;
  margin-top: 2px;
  margin-bottom: 2px;
}

#divSessions {
  padding: 37px 2px 3px 2px;
}
#divSessionList {
  border: none;
  font-family: Cairo !important;
  font-size: 12px;
  padding-top: 29px;
  padding-right: 32px;
}
#divSessionListBG {
  height: calc(100% - 38px) !important;
}
#divSessionListHolder {
  border-radius: 6px;
  height: 100%;
}
#divSessionList .tabulator-header {
  border-top-left-radius: 6px;
  width: 315px;
  margin-top: -1px;
}
#divSessionList .tabulator-headers > div {
  height: 30px;
  padding-top: 2px;
}

#divStats {
  padding: 0px;
  border: none;
  font-family: Cairo !important;
  font-size: 12px;
}

#divStatisticsBG {
  height: calc(100% - 38px) !important;
}
#divLoginsData {
  padding: 0px;
  border: none;
  font-family: Cairo !important;
  font-size: 12px;
  min-Height: 150px;
  padding-right: 32px;
}
#btnLoginsClose {
  right: 0px;
  top: 0px !important;
  left: unset !important;
}

#divPeriodsHolder {
  border:none;
  padding: 0px;
  border: none;
  font-family: Cairo !important;
  font-size: 12px;
  flex-basis: 100%;
  font-weight: normal;
  margin-left: 2px;
}
#ddivPeriodsHolder .tabulator-row.tabulator-group > div {
  filter: var(--bl-shadow);
}
#divPeriodsHolder .tabulator-row.tabulator-group {
  border-top: var(--bl-border);
  border-bottom: var(--bl-border);
  border-right: none;
  padding: 5px 5px 5px 10px;
  background: var(--bl-color-three) !important;
  font-weight: normal;
  min-width: 100%;
  margin-bottom: 2px;
}

/* Adjustments for specific Tabulator columns */

.IconColumn {
  padding: 2px !important;
  text-overflow: hidden;
  white-space: nowrap;
  overflow: hidden;
}

#divAccountLinks .tabulator-cell[tabulator-field="LinkIcon"] {
  filter: none;
}

#divAccountLinks .tabulator-cell[tabulator-field="Link"] {
  padding-top: 6px;
}

#divStatOptions .tabulator-cell[tabulator-field="Icon"],
#divAccountOptions .tabulator-cell[tabulator-field="Icon"] {
  padding: 3px 2px 3px 0px;
}


/* Tabulator sort icons

/* Hide all sort icons by default */
.tabulator-col .tabulator-col-sorter div.icon {
  display: none;
}
/* Display the fa-sort icon when the column is not sorted */
.tabulator-col[aria-sort="none"] .tabulator-col-sorter div.icon.sort{
  display: inline-block;
  fill: var(--bl-color-one);
}
/* Hover styles are good */
.tabulator-col[aria-sort="none"] .tabulator-col-sorter div.icon:hover{
  opacity:0.6;
}
/* Display the fa-sort-up icon when the column is sorted in asc order */
.tabulator-col[aria-sort="ascending"] .tabulator-col-sorter div.icon.sort-up{
  display: inline-block;
  fill: var(--bl-color-input);
}
/* Display the fa-sort-down icon when the column is sorted in desc order */
.tabulator-col[aria-sort="descending"] .tabulator-col-sorter div.icon.sort-down{
  display: inline-block;
  fill: var(--bl-color-input);
}


/* User can select these things */

#divActionLog {
  -webkit-touch-callout: default;
    -webkit-user-select: text;
     -khtml-user-select: text;
       -moz-user-select: text;
        -ms-user-select: text;
            user-select: text;
}

                                                 f
/* Customize Simplebar scrollbars */

.simplebar-wrapper {
  height: 100%;
}
.simplebar-track {
  cursor: ns-resize !important;
  background: var(--bl-color-two);
  opacity: 0.8;
  width: 32px !important;
  border-bottom-right-radius: 6px;
  margin-bottom: 2px;
  border-left: var(--bl-border);
}
.simplebar-scrollbar::before {
  background: var(--bl-color-input);
  width: 20px !important;
  left: 5px !important;
  margin: 3px 0px 6px 0px !important;
}
.simplebar-scrollbar {
  min-height: 22px;
}
.simplebar-mask {
  bottom: 3px;
}

/* Author Profile - handle things a little differently here.
** It is normally invisible unless hovering and the
** trackbar is also hidden. */
#divAuthorProfileHolder .simplebar-track {
  cursor: ns-resize !important;
  background: none;
}
#divAuthorProfileHolder .simplebar-offset {
  background: var(--bl-color-three);
  border-radius: 12px;
}
#divAuthorProfileHolder .simplebar-content-wrapper {
    scroll-behavior: smooth;
    border: var(--bl-border);
    border-radius: var(--bl-radius);
}


/* Here the top of the trackbar is rounded as it is in the corner of the visible "window" */
#divSessionListHolder .simplebar-track,
#divSessionListHolder .simplebar-content-wrapper {
  border-top-right-radius: 6px;
}

#divPeriodsPresets > div.simplebar-track.simplebar-vertical {
    cursor: ns-resize !important;
    background: var(--bl-color-two);
    opacity: 0.8;
    width: 32px !important;
    border-bottom-right-radius: 6px;
    margin-bottom: 4px;
    border-left: var(--bl-border);
    border-top-right-radius: 6px;
}

/* FlatPicker */

/* Overall Calendar */
.flatpickr-calendar {
/*  transform-origin: left top; */
/*  transform: scale(0.75);     */
  border: var(--bl-border-thin);
  border-radius: var(--bl-radius);
  filter: var(--bl-shadow);
  box-shadow: none;
  -webkit-box-shadow: none;
  background: var(--bl-color-three);
  font-size: 10px;
}
.flatpickr-calendar.animate.open {
  -webkit-animation: none;
  animation: none;
}
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowTop:before {
  border-bottom-color: var(--bl-color-one);
}
.flatpickr-calendar:after {
  border-width: 15px;
  margin: 1px -5px;
}

/* Days */
.flatpickr-day {
  color: var(--bl-color-one);
  filter: var(--bl-shadow);
  line-height: 2.7;
  height: 29px;
  border-radius: 50%;
}
.flatpickr-day.today {
  -webkit-box-shadow: none;
  box-shadow: none;
  background: transparent;
  border: 2px solid var(--bl-color-one);
  filter: var(--bl-shadow);
  line-height: 2.5;
}
.flatpickr-day.selected {
  -webkit-box-shadow: none;
  box-shadow: none;
  color: var(--bl-color-input);
  background: transparent;
  border: 3px solid var(--bl-color-two);
  filter: var(--bl-shadow);
  line-height: 2.3;
  z-index: 1;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  cursor: default;
  color: var(--bl-color-two);
}
.dayContainer {
  padding: 4px;
  width: 225px;
  min-width: 225px;
  max-width: 225px;
}

/* Week Numbers */
.flatpickr-weekwrapper {
  float: left;
  border-right: var(--bl-border-thin);
  filter: var(--bl-shadow);
}
div.flatpickr-weekwrapper span.flatpickr-day, div.flatpickr-weekwrapper span.flatpickr-day:hover {
  color: var(--bl-color-input);
  line-height: 2.9;
  filter: none;
}
.flatpickr-weekwrapper .flatpickr-weeks {
  -webkit-box-shadow: none;
  box-shadow: none;
  margin-top: -4px;
  padding-top: 8px;
  height: calc(100% - 23px);
}
.flatpickr-weekwrapper .flatpickr-weekday {
  border-bottom: var(--bl-border-thin);
  margin-top: 0px;
  color: white;
  filter: none;
  line-height: 27px;
}

/* Top Section */
div.flatpickr-weekdays {
  color: var(--bl-color-input);
  border-bottom: var(--bl-border-thin);
  filter: var(--bl-shadow);
}
span.flatpickr-weekday {
  color: white;
}
.flatpickr-current-month {
  padding: 0px;
  color: var(--bl-color-one);
  filter: var(--bl-shadow);
}
.flatpickr-months {
  height: 30px;
}
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  height: 40px;
  padding: 5px 10px 10px 10px;
  z-index: 3;
  color: rgba(0,0,0,0.9);
  fill: var(--bl-color-one);
  filter: var(--bl-shadow);
}
.flatpickr-months .flatpickr-prev-month > svg, .flatpickr-months .flatpickr-next-month > svg {
  width: 20px;
  height: 20px;
}
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--bl-color-two);
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
    margin: 4px 0 0 0;
    padding: 0 0 0 0;
    width: 100px;
}
.flatpickr-current-month {
    width: 80%;
    left: 10%;
}

/* Time */
.flatpickr-time {
  z-index: -1;
  position: relative;
  filter: var(--bl-shadow);
  color: white !important;
  max-height: 30px;
  border-bottom-left-radius: var(--bl-radius);
  border-bottom-right-radius: var(--bl-radius);
  overflow: hidden;
}
.flatpickr-calendar.hasTime .flatpickr-time {
  border-top: var(--bl-border-thin);
}
.flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm {
    color: white;
}
.flatpickr-time input {
  color: var(--bl-color-one);
}
.flatpickr-time input.flatpickr-hour {
  font-weight: normal;
}
.numInputWrapper input, .numInputWrapper span {
  display: flex;
}
.flatpickr-time .numInputWrapper {
    height: 30px;
}

/* Up/Down Time */
.numInputWrapper span {
  width: 30px;
  padding: 0 4px 0 5px;
  border: none;
}
.numInputWrapper span.arrowUp:after {
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--bl-color-two);
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: var(--bl-color-one);
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: var(--bl-color-one);
}
.numInputWrapper span.arrowDown:after {
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--bl-color-two);
  top: 40%;
}
.numInputWrapper span.arrowDown {
  top: 35%;
}
.numInputWrapper span:hover {
  filter: none;
}


/* Dunno why Bootstrap only declares 1-5?
**
** Note: If there is an error in the CSS above, like a missing bracket
** then these won't make it in, and things will look funny.  Which is
** good as you can immediately tell that the CSS has an error in it!
*/

.order-6  {order:  6; }
.order-7  {order:  7; }
.order-8  {order:  8; }
.order-9  {order:  9; }
.order-10 {order: 10; }
.order-11 {order: 11; }
.order-12 {order: 12; }
.order-13 {order: 13; }
.order-14 {order: 14; }
.order-15 {order: 15; }


/* The End */