/* out: ../../dist/css/app.css, compress: true, sourceMap: false */
/* --------------- IMPORT.LESS ----------------*/
/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html,
body {
  height: 100%;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
input,
button,
textarea,
select {
  font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
#root {
  isolation: isolate;
}
/************** RESET.LESS ********************************/
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css 
html { line-height: 1.15;   -webkit-text-size-adjust: 100%; }
body { margin: 0;}
button,input,optgroup,select,textarea {font-family: inherit;font-size: 100%;/ * line-height: 1.15; * /margin: 0;}
/* TC NOTE NO! button,input {  overflow: visible;} * /
button,input {  overflow: hidden;} 
button,select {  text-transform: none;}
button,[type="button"],[type="reset"],[type="submit"] { -webkit-appearance: button;}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner { border-style: none; padding: 0;}
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring { outline: 1px dotted ButtonText;}
textarea { overflow: auto; padding: 5px; }
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button { height: auto;}
template, .hidden, [hidden] { display: none !important; }
img { border-style: none; max-width: 100%; height: auto; display: block; }
legend { user-select: none; }
[contenteditable] {   outline: 0px solid transparent;  }
*/
/*    
b,strong { font-weight: bolder;}
h1 { font-size: 2em;  margin: 0.67em 0;} 
progress {  vertical-align: baseline;} 
fieldset { padding: 0.35em 0.75em 0.625em;}
legend { box-sizing: border-box;   color: inherit;   display: table;   max-width: 100%;   padding: 0;   white-space: normal; }
[type="checkbox"],[type="radio"] {  box-sizing: border-box;   padding: 0; }
details {  display: block;}
summary {  display: list-item;}
hr {  box-sizing: content-box;   height: 0;   overflow: visible; 2}
pre {  font-family: monospace, monospace;   font-size: 1em; }
a {  background-color: transparent;}
abbr[title] {  border-bottom: none;   text-decoration: underline;   text-decoration: underline dotted; }
*/
/*    code,kbd,samp {  font-family: monospace, monospace;   font-size: 1em; }
small {  font-size: 80%;}
sub,sup {  font-size: 75%;  line-height: 0;  position: relative;  vertical-align: baseline;}
sub {  bottom: -0.25em;}
sup {  top: -0.5em;}
[type="search"] {  -webkit-appearance: textfield;   outline-offset: -2px; }
[type="search"]::-webkit-search-decoration {  -webkit-appearance: none;}
::-webkit-file-upload-button {  -webkit-appearance: button;   font: inherit; }
*/
/****** Elad Shechter's RESET *******/
/*** box sizing border-box for all elements ***/
html,
body,
div,
span,
object,
iframe,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
article,
main,
nav,
ins {
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  line-height: inherit;
  vertical-align: baseline;
  font-family: inherit;
  font-size: 100%;
  min-width: 0;
}
/* https://weblog.west-wind.com/posts/2016/feb/15/flexbox-containers-pre-tags-and-managing-overflow */
/*

// START POINT & FAST REMOVE
transform: translateY(-83px);
transition: transform 250ms cubic-bezier(0.75, 0, 1, 1) 0s;

// SLOW SHOW
transform: translateY(0px);
transition: transform 500ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s;


*/
/************** CSL-TRANSISTION.LESS ********************************/
.transition-all {
  transition: all 0.3s ease-in;
}
@keyframes csl-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes csl-spin-grow {
  0% {
    transform: rotate(0deg) scale(0.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
@keyframes csl-fadein {
  0% {
    bottom: 30px;
    opacity: 0;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}
@keyframes csl-fadeout {
  0% {
    bottom: 0;
    opacity: 1;
  }
  100% {
    top: 0;
    opacity: 0;
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slidein {
  0% {
    top: 300px;
    margin-left: 200px;
    /*width: 300%; */
  }
  100% {
    top: 0%;
    margin-left: 0%;
    /*width: 100%;*/
  }
}
.fadein,
.fadeout {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
.fadein {
  opacity: 1;
}
.anim-slide-up {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: opacity 2s cubic-bezier(0.165, 0.84, 0.44, 1), transform 2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.anim-slide-up.lazyloaded {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* various show/hide transitions */
.cs-hide-opacity {
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}
.cs-hide-opacity.show {
  opacity: 1;
  height: auto;
  width: auto;
  transition: opacity 1s ease-out;
}
.cs-hide-max-width {
  height: 0;
  width: 0;
  overflow: hidden;
  max-width: 0;
}
.cs-hide-max-width.show {
  height: auto;
  width: auto;
  max-width: 1000px;
  transition: max-width 1s ease-out;
}
.cs-hide-scale-from-top {
  transform-origin: top;
  transform: scaleY(0);
}
.cs-hide-scale-from-top.show {
  transform: scaleY(1);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.cs-hide-scale-from-bottom {
  transform-origin: bottom;
  transform: scaleY(0);
}
.cs-hide-scale-from-bottom.show {
  transform: scaleY(1);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.cs-hide-scale-from-left {
  transform-origin: left;
  transform: scaleX(0);
}
.cs-hide-scale-from-left.show {
  transform: scaleX(1);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.cs-hide-scale-from-right {
  transform-origin: right;
  transform: scaleX(0);
}
.cs-hide-scale-from-right.show {
  transform: scaleX(1);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.cs-hide-flex {
  flex: 0 !important;
  opacity: 0;
}
.cs-hide-flex.show {
  flex: 1 !important;
  opacity: 1;
  transition: flex 0.3s ease-out;
}
.leftzone.show,
.rightzone.show {
  max-width: 360px;
  width: 360px;
  flex: 1;
}
.slideleft {
  max-width: 0;
  width: 0;
  overflow: hidden;
}
.slideleft.show {
  flex: 1 1 300px;
  max-width: 300px;
  min-width: 300px;
  transition: max-width 1s ease-in-out;
}
.cs-slider {
  max-height: 0;
  overflow-y: hidden;
  transition: max-height 0.3s ease-in-out;
}
.cs-slidedown {
  max-height: 1000px;
}
/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*
https://kontist.com

.dropdown-icon.svelte-hrnyyk {
  transition: all 0.4s cubic-bezier(0.5, 0.1, 0, 1.5)
}

.dropdown-icon-turned.svelte-hrnyyk {
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg)
}


.product-nav.svelte-1jlz83m {
  visibility: hidden;
  z-index: 18;
  position: fixed;
  margin: auto;
  background: #fff;
  top: 65px;
  right: 0;
  left: 0;
  max-width: 1600px;
  transition: all 0.4s ease;
  pointer-events: none;
  -webkit-transform: translateY(-300px);
  transform: translateY(-300px);
  padding: 30px 0;
  display: flex;
  justify-content: space-around;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)
}

@media(max-width: 600px) {
  .product-nav.svelte-1jlz83m {
    top:109px;
    padding: 0
  }
}

.product-nav.open.svelte-1jlz83m {
  pointer-events: all;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  visibility: visible
}

*/
/*
.sidebar-false .UserMenu_userMenu-1j6Lm {
  top: 32px;
}
.UserMenu_userMenu-1j6Lm[data-open=true] {
  opacity: 1;
  visibility: visible;
  -webkit-transform: scale(1);
  transform: scale(1);
  transition-delay: 0s,0s;
}
body .UserMenu_userMenu-1j6Lm {
  scrollbar-face-color: #5a5f73;
  scrollbar-track-color: none;
}
.UserMenu_userMenu-1j6Lm {
  overflow-y: auto;
  position: absolute;
  z-index: 100;
  right: -1rem;
  top: calc(100% + 10px);
  width: 225px;
  list-style: none;
  max-height: 80vh;
  max-height: calc(100vh - 71px);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  padding: 1rem 0 .5rem;
  background: #1e1f26;
  box-shadow: 0 2rem 4rem #0a0a0c;
  -webkit-transform: scale(.9);
  transform: scale(.9);
  -webkit-transform-origin: top right;
  transform-origin: top right;
  transition: all .2s ease-in-out,visibility 0s linear .2s;
}

* {
*/
/* 
.mainzone-list-view {
   //animation: fadein 3s; 
   //transition-property: top;


   opacity: 0;
   animation-duration: 3s;
   animation-name: fadein;
   animation-iteration-count: 1;
   animation-fill-mode: forwards;
  }
*/
/* latin */
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), local('Roboto-Regular'), url(/css/fonts/roboto-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(/css/fonts/roboto-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* --------------- power  ----------------
@font-face {
  font-family: 'iec_symbols_unicoderegular';
  src: url(/css/fonts/Unicode_IEC_symbol.woff2) format('woff2');
  font-weight: normal;
  font-style: normal;
}

.power {
  font-family: 'iec_symbols_unicoderegular';
  font-style: normal;
}

.go-1 {  
  font-family: 'iec_symbols_unicoderegular';
  font-style: normal;
  transform: rotate(90deg);
  // must be inline-block to transform
  display: inline-block;  
}
*/
/************** BASE.LESS (parts hacked from bootstrap 4 _reboot.scss) ********************************/
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/*
// html, body {
  // height: -moz-available;          /* WebKit-based browsers will ignore this. */
html,
body {
  min-height: 100% !important;
  min-width: 100% !important;
  max-height: 100% !important;
  max-width: 100% !important;
  height: 100%;
  width: 100%;
}
html {
  scroll-behavior: smooth;
  /* new */
  /* font-family: "Fira Sans", Lato, "Open Sans", Roboto, Poppins, "Helvetica Neue", Arial, Helvetica, Verdana, sans-serif; */
  /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
  /* font-family: "system-ui", ... */
  font-family: "Roboto", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  /* set root em (rem) size*/
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.5);
  overflow: hidden !important;
}
body {
  overflow: hidden !important;
  text-align: left;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #dbe5f0;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin-top: 0;
  margin-bottom: 1rem / 2;
  font-family: "Roboto", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 500;
  line-height: 1.2;
}
h1,
.h1 {
  font-size: 32px;
}
h2,
.h2 {
  font-size: 28px;
}
h3,
.h3 {
  font-size: 24px;
}
h4,
.h4 {
  font-size: 20px;
}
h5,
.h5 {
  font-size: 18px;
}
h6,
.h6 {
  font-size: 16px;
}
p {
  margin-top: 0;
  margin-bottom: 1rem;
  white-space: normal;
}
a {
  text-decoration: none;
  color: #333;
  font-size: 0.9rem;
  padding: 0 5px;
}
td a,
.faux-href,
a:hover {
  color: #0366d6;
  text-decoration: underline;
  cursor: pointer;
}
tr.selected td.faux-href {
  color: #FFF;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
label {
  font-size: 0.9rem;
}
input,
textarea,
select {
  font-size: 16px;
}
.fg-white {
  color: white !important;
}
.bg-white {
  background-color: white !important;
}
.fg-black {
  color: black !important;
}
.bg-black {
  background-color: black !important;
}
.fg-red {
  color: red !important;
}
.bg-red {
  background-color: red !important;
}
.fg-orange {
  color: orange !important;
}
.bg-orange {
  background-color: orange !important;
}
.fg-green,
.fg-uploaded {
  color: green !important;
}
.bg-green,
.bg-uploaded {
  background-color: green !important;
}
.fg-blue {
  color: blue !important;
}
.bg-blue {
  background-color: blue !important;
}
.fg-lightgrey,
.fg-disabled {
  color: lightgrey !important;
}
.bg-lightgrey,
.bg-disabled {
  background-color: lightgrey !important;
}
::highlight(hilite-results) {
  background-color: yellow;
  color: black;
}
/* --------------- cs-forms ----------------*/
form {
  /* note: currently matches .cs-datagrid declaration in cs-datagrid.less */
  flex: 1;
  display: flex;
  flex-direction: column;
  /* align-items: flex-start; */
  /* align-items: center; */
  padding: 0.5rem;
  margin: 0;
  /* width: 100%; */
  font-size: 0.9rem;
  overflow-y: auto;
  /* overflow: hidden; */
  min-width: 0 !important;
}
/* --------------- select ----------------*/
select {
  border-radius: 0;
  /* remove default <select> styling */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 1.5rem !important;
  /* to allow for our icon  */
  width: 150px;
  /* our default  */
  /* max-width: 150px;     our default  */
}
select:not([multiple]) {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAh0lEQVQ4T93TMQrCUAzG8V9x8QziiYSuXdzFC7h4AcELOPQAdXYovZCHEATlgQV5GFTe1ozJlz/kS1IpjKqw3wQBVyy++JI0y1GTe7DCBbMAckeNIQKk/BanALBB+16LtnDELoMcsM/BESDlz2heDR3WePwKSLo5eoxz3z6NNcFD+vu3ij14Aqz/DxGbKB7CAAAAAElFTkSuQmCC');
  background-repeat: no-repeat;
  background-position: 99% center;
}
/* --------------- form elements - default is 'etched' effect ----------*/
input:-webkit-autofill::first-line {
  font-size: 1rem !important;
}
div.todonotes {
  overflow-y: auto;
  font-size: 1rem;
  padding: 5px !important;
  height: 150px !important;
}
.todonotes-readonly,
.csl,
.cs-input-group,
input[type=email],
input[type=number],
input[type=password],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
textarea,
select {
  outline: none;
  padding: 5px 5px;
  border: 1px solid #aaa !important;
  border-right: 1px solid #fff !important;
  border-bottom: 1px solid #fff !important;
  /* box-shadow: inset -1px 0px 2px 0px #eee, inset 0 -1px 2px 0px #eee; */
  /* box-shadow: inset -1px 0px 1px 0px #eee, inset 0 -1px 1px 0px #eee; */
  background-color: #FFF;
  border-radius: 3px;
  margin: 1px;
  /* for highlighting focus */
  /*   width: initial !important;   */
  /* width: 100%; */
  /* transition: box-shadow .5s ease-in-out; */
  /* border-color: .5s ease-in-out,  */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-width: 0;
  /* see https://github.com/jgthms/bulma/issues/530 */
}
input[type=time],
input[type=number] {
  max-width: 90px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  -moz-appearance: textfield;
}
input[type=time] {
  padding: 3px 5px;
}
.csl {
  /* remove padding */
  padding: 0;
}
.todonotes-readonly:focus-within,
input:focus,
button:not(:active):focus,
a.button:focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 2px 2px #06f !important;
  outline: none;
}
select:focus {
  border: 1px solid #a9a9a9;
  border-image: initial;
}
.showisreadonly,
.todonotes-readonly,
select.isreadonly,
textarea.isreadonly,
textarea:read-only,
input.isreadonly,
input:read-only {
  /* background: #eee; */
  background: #fafafa;
}
select.noneditable,
textarea.noneditable,
input.noneditable,
.cs-input-group.noneditable {
  border: 1px solid #aaa !important;
}
button[disabled],
select.isreadonly {
  user-select: none;
  pointer-events: none;
}
select.isreadonly.lightborder {
  border: 1px solid #ccc;
}
button[disabled],
button[disabled] i {
  color: grey !important;
}
input.isinvalid,
input:invalid,
input:required:invalid,
input:focus:invalid {
  /* border: 1px solid red; */
  /* box-shadow: none; */
  box-shadow: 0 0 1px 1px red  !important;
}
/* --------------- textareas ----------------*/
textarea {
  overflow: auto;
}
.cs-textarea {
  flex: 0 1 auto;
  min-height: 70px;
  height: 5rem;
  resize: vertical;
  min-width: 0;
}
.cs-textarea-big {
  height: 9rem;
}
.cs-textarea.verybig {
  height: 12rem !important;
}
.cs-textarea-address {
  height: 60px;
  resize: none;
  overflow: hidden;
}
textarea.cs-keynotes {
  border-radius: 0.6rem !important;
  flex: 0 0 auto;
  min-height: 30px;
  max-height: 80px;
}
textarea.cs-keynotes:read-only {
  resize: none;
  font-size: 0.8rem;
}
textarea.cs-keynotes.keynotesempty:read-only {
  min-height: 30px;
  max-height: 30px;
  overflow-y: hidden;
  resize: none;
}
div.cs-textarea.todonotes-readonly,
div.cs-keynotes.keynotes-readonly {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 5px;
  max-height: 150px;
  font-size: 1rem;
  background-color: #fafafa;
}
/* --------------- labels ----------------*/
.cs-label {
  order: 1;
  margin: 0 3px -1px 3px;
  font-size: 0.8rem;
  font-weight: 500;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 0 auto;
  padding-right: 0.25rem;
}
.cs-label--right {
  text-align: right !important;
}
.cs-label--left {
  text-align: left !important;
}
.cs-form-heading {
  font-weight: bold;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 0 auto;
  border-bottom: 1px solid blue;
  margin-bottom: 0.5rem;
  flex: 1;
  width: 100%;
}
.cs-label-min {
  min-width: 5rem !important;
}
.cs-label-med {
  min-width: 9rem !important;
}
.cs-label-big {
  min-width: 11rem !important;
}
.cs-label-small {
  min-width: 3rem !important;
  max-width: 3rem !important;
}
.labels-right {
  text-align: right;
}
.col > .cs-label {
  text-align: left;
}
/* --------------- 'fields' ie. inputs, etc referred to in cs-grid ----------------*/
.cs-field {
  order: 2;
  flex: 0 1 auto;
  min-width: 0;
  width: 100% ;
}
.cs-field:focus ~ .cs-label,
.cs-checkbox:focus + .cs-checkbox-label,
.cs-input-group:focus-within + .cs-label,
.tag-editor-container:focus-within + .cs-label,
.input-wrapper:focus-within + .cs-label {
  font-weight: bold !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
/* --------------- input-group  eg. input + icon or input + button ------------*/
/* --------------- csl & cs-input-group  ----------*/
.cs-input-group {
  order: 2;
  flex: 0 1 auto;
  display: flex;
  padding: 0 !important;
  /* position: relative; */
}
.cs-input-group input[type=email],
.cs-input-group input[type=number],
.cs-input-group input[type=password],
.cs-input-group input[type=tel],
.cs-input-group input[type=text],
.cs-input-group input[type=time],
.cs-input-group input[type=url],
.cs-input-group textarea,
.cs-input-group select {
  /* next values are not needed as these are set on inputs */
  flex: 1;
  order: 0;
  border: 0 !important;
  margin: 0 !important;
  box-shadow: none;
  min-width: 0;
  /* see https://github.com/jgthms/bulma/issues/530 */
}
.cs-input-group input[type=email]:focus,
.cs-input-group input[type=number]:focus,
.cs-input-group input[type=password]:focus,
.cs-input-group input[type=tel]:focus,
.cs-input-group input[type=text]:focus,
.cs-input-group input[type=time]:focus,
.cs-input-group input[type=url]:focus,
.cs-input-group textarea:focus,
.cs-input-group select:focus {
  box-shadow: none !important;
  outline: none;
  border-color: transparent;
}
/* the important one */
.cs-input-group:focus-within {
  box-shadow: 0 0 2px 2px #06f !important;
  outline: none;
  border-color: transparent;
}
.cs-input-group__icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 11;
  border-radius: 0 !important;
  font-size: 1rem;
  padding: 0 6px;
  order: 3;
}
.cs-input-group__btn {
  padding: 4px 6px !important;
  border-radius: 3px !important;
  margin: 0 0 0 3px;
  order: 3;
}
.cs-input-group__icon.cs-btn {
  padding: 5px 3px !important;
  border-radius: 3px !important;
  margin: 0 0 0 3px;
}
.icons-left .cs-input-group__icon,
.icons-left .cs-input-group__btn {
  order: -1;
  margin-left: 0;
  margin-right: 3px;
}
.cs-input--match-style {
  padding: 6px 6px 5px 6px;
  min-height: 36px;
}
.cs-input--match-style-horz {
  padding: 6px 6px 5px 6px;
  line-height: 1rem;
  display: flex;
}
/*---------------------------- checkbox & radio ----------------------- */
.cs-checkbox,
.cs-radio {
  position: absolute;
  left: -1000px;
  opacity: 0;
}
/* these two may not be needed 
.cs-checkbox { order: 2;}
.cs-checkbox-label { order: 1;}
 */
.cs-checkbox-label,
.cs-radio-label {
  flex: 0 1 auto;
  position: relative;
  padding: 0.1rem 0;
  padding-left: 1.4rem;
  margin-bottom: 0px;
  line-height: 1.2rem;
  font-size: 0.9rem;
  font-weight: 400 !important;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  /* margin-right: 1rem; */
}
.cs-checkbox + .cs-checkbox-label:before,
.cs-radio + .cs-radio-label:before,
.cs-radio + .cs-radio-label:after {
  content: ' ';
  position: absolute;
  font-family: 'concord';
  font-size: 1.2rem;
  left: 0;
  top: 1px;
  width: 1.1rem;
  height: 1.1rem;
  background-color: #fff;
  color: #06f;
  border-radius: 3px;
}
.cs-checkbox + .cs-checkbox-label:before {
  border: 2px solid;
  /* inherits color for border-color */
}
.cs-radio + .cs-radio-label:before {
  content: "\e43d";
  border-radius: 50%;
}
.cs-radio + .cs-radio-label:after {
  content: "\e43d";
  border-radius: 50%;
}
.cs-checkbox:checked + .cs-checkbox-label:before,
.cs-radio:checked + .cs-radio-label:before {
  border: none;
  background-color: transparent;
}
.cs-radio:checked + .cs-radio-label:after {
  content: "\e43c";
}
.cs-checkbox:checked + .cs-checkbox-label:before {
  content: "\e371";
}
/* right aligned checkbox */
.cs-radio-label--right,
.cs-checkbox-label--right {
  padding-left: 0;
  padding-right: 1.4rem !important;
  text-align: right;
}
.cs-radio + .cs-radio-label.cs-radio-label--right:before,
.cs-radio + .cs-radio-label.cs-radio-label--right:after,
.cs-checkbox + .cs-checkbox-label.cs-checkbox-label--right:before {
  left: auto;
  right: 0;
}
/* adjusting margins when multiple */
.horz > .cs-checkbox-label:not(:last-child),
.horz > .cs-radio-label:not(:last-child) {
  margin-right: 1rem;
}
.col > .cs-checkbox-label:not(:last-child),
.col > .cs-radio-label:not(:last-child) {
  margin-bottom: 0.25rem;
}
.col.horz > .cs-checkbox-label,
.col.horz > .cs-radio-label {
  margin-bottom: 0;
}
input[type="time"]::-webkit-calendar-picker-indicator {
  background: none;
  display: none;
}
.cs-input-number {
  max-width: 70px;
}
.cs-input-date {
  max-width: 150px !important;
  min-width: 135px !important;
  flex: 0 0 auto;
  align-self: flex-start;
}
.cs-input-datetime {
  min-width: 240px !important;
  max-width: 240px !important;
}
.cs-input-datetime-readonly {
  min-width: 180px !important;
  max-width: 180px !important;
}
.buttondate .cs-input-date {
  max-width: 200px !important;
}
.buttondate .cs-input-datetime {
  max-width: 300px !important;
}
.cs-input-datetime__divider {
  width: 1px;
  background-color: #aaa;
  margin-right: 0.2rem;
}
.cs-field.form {
  min-width: 300px;
  max-width: 300px;
}
.cs-field.large {
  min-width: 400px;
  max-width: 400px;
}
.cs-field.small {
  min-width: 220px;
  max-width: 220px;
}
.cs-field.tiny {
  min-width: 110px;
  max-width: 110px;
}
textarea.form {
  min-height: 100px;
}
.remove-styles input {
  border: 0;
  margin: 0;
  background: transparent;
  color: #FFF;
}
.remove-styles input:focus {
  box-shadow: none !important;
}
.cs-input-relation .cs-input-group__icon {
  order: 0;
  margin: 0 3px 0 0;
}
.cs-input-relation input.relatedname {
  order: 1;
}
.cs-input-relation input.relatedname.hasrelatedname {
  cursor: pointer;
  text-decoration: underline;
  color: #0366d6;
}
.form-block {
  background-color: lemonchiffon;
}
textarea.text-editor:focus {
  box-shadow: none !important;
}
::placeholder {
  font-size: 0.9rem;
}
.cs-accordion {
  display: flex;
  align-items: center;
  padding: 0 0 0 0.5rem;
  font-size: 0.9rem !important;
  border-left: 0;
  border-right: 0;
  white-space: nowrap;
  min-height: 2rem;
  max-height: 2rem;
  line-height: 2rem;
  font-weight: bold;
  cursor: pointer;
  background-image: linear-gradient(#f9f9f9, #c2c2c2);
  border-top: 1px solid #bbb;
  border-bottom: 1px solid #777;
  color: #555;
}
.cs-accordion span {
  color: #bbb;
  color: #333;
  margin-left: 0.5rem;
}
.cs-accordion .cs-toolbar__icon {
  font-size: 1.1rem;
}
/*

.cs-accordion {
    display: flex;
    padding: 0 0 0 0.5rem;
    font-size: 0.9rem !important;
    // border-left: 0;
    // border-right: 0;
    white-space: nowrap;
    // background-image: linear-gradient(#f9f9f9, #c2c2c2); 
    border: 1px solid #bbb;
    color: #555;
    min-height: 28px;
    min-height: 2rem;
    max-height: 2rem;
    line-height: 2rem;
    background: #e3e3e3;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}


.cs-accordion.hassuboptions {
  max-height: unset;
  flex-wrap: wrap;
}


.cs-toolbar--hassuboptions {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;  
  padding: 0 6px;
}  

*/
/* --------------- cs-alert ----------------*/
.cs-alert {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  width: 100vw;
  z-index: 9999999;
  color: #fff;
  text-align: center;
  padding: 16px;
  font-size: 18px;
}
.cs-alert {
  top: 0px;
  height: 50px;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(#f00, coral);
  background-color: #FFF;
}
.cs-alert.show {
  display: flex;
  animation: csl-fadein 0.5s, csl-fadeout 0.5s 4.5s;
}
/*
.cs-alert:before {
   content: " ";
   position: absolute;
   top: 2px;   
   left: 2px;   
   bottom: 2px;   
   background-image: url(/img/cat-logo-50x50-shad.png);
   background-repeat: no-repeat;
   height:46px;  
   width: 46px;  
   z-index: 112;
}

*/
/*--------------------------------------*/
.cs-list.alertman-list.grabattention .cs-item__header,
.cs-item.alertman-item.grabattention .cs-item__header {
  color: red !important;
}
.app-alertman.cs-view {
  background-color: #1e1f26 !important;
  color: #FFF;
}
.cs-list.alertman-list {
  padding: 0.5rem;
  background: transparent;
}
.alertman-item {
  background: #444857;
  padding: 0.2rem 0.1rem !important;
  color: #fff;
  border: 0 !important;
  margin-bottom: 0.5rem;
  color: #76daffbf;
  border-radius: 0.5rem;
}
.appbar .alertman-item,
.leftnav alertman-list {
  border-radius: 0;
}
.leftnav.alertman-list {
  min-height: 60px;
  max-height: 60px;
  border: 0;
  padding: 0.25rem;
}
.leftnav.alertman-list .alertman-item {
  margin-bottom: 0.25rem;
}
.app-alertman .alertman-item {
  border: 1px solid transparent !important;
}
.app-alertman .alertman-item.highlight {
  border: 1px solid red !important;
}
.cs-item.alertman-item:hover:not(.selected) {
  background-color: #000;
  border: 0;
}
.cs-item.alertman-item:hover .cs-item__header {
  color: #76daff;
  font-weight: normal;
}
.cs-item.alertman-item .cs-item__header {
  color: #fff;
}
a:focus,
a:hover {
  color: #FFF;
  text-decoration: underline;
}
.alertman-main-icon.cs-item__icon {
  color: #76daff !important;
  align-self: start;
  font-size: 1.5rem;
}
.alertman-item i.icm-delete {
  font-size: 1rem !important;
}
.alertman-item a {
  /* float: right; */
  padding: 0 5px;
  margin-right: 3rem;
  border: none;
  font-size: 0.8rem;
  text-decoration: underline;
  color: deepskyblue;
  z-index: 99999999999999999999999999999999;
}
.main-icons .app-badge {
  background-color: crimson;
  right: 3px;
  bottom: -10px;
}
.main-icons .cs-toolbar__item {
  padding: 0;
  padding-left: 0.5rem;
}
.cs-list.alertman-list.appbar {
  padding: 0;
  background-color: #000;
  overflow-y: hidden;
}
.appbar.cs-list.alertman-list {
  padding: 0 0 0 3px;
  background-color: #000;
  overflow-y: auto;
  flex-wrap: wrap;
  display: flex;
  flex: 1;
  height: 100%;
  border: none;
  max-height: 41px;
  border: 1px inset #ccc;
  border-radius: 0.5rem;
}
.appbar li.cs-item.alertman-item {
  flex: 1 0 280px;
  margin: 0;
  padding: 0 !important;
  font-size: 0.8rem;
  border-right: 1px solid !important;
  border-color: #FFF !important;
  background-color: transparent;
  align-items: flex-start;
  max-height: 40px;
  overflow: hidden;
}
.appbar .alertman-item .alertman-main-icon {
  font-size: 1.5rem;
  margin: 0;
  padding: 0.5rem;
}
.appbar .alertman-item .alertman-icon {
  font-size: 1.5rem;
  margin: 0 !important;
  padding: 0.5rem;
}
.appbar .cs-item__header {
  font-size: 0.8rem;
}
.appbar .cs-item.alertman-item .cs-item__header {
  color: #ccc;
  margin: 0;
}
.cs-item.alertman-item:hover .cs-item__header {
  color: #76daff;
  cursor: pointer;
}
.alertman-item .alert-ref {
  color: coral;
}
.alertman-list.appbar.app-bar__notify .cs-item__options {
  top: 17px;
  right: 7px;
}
.alertman-item .cs-btn {
  padding: 3px 7px;
  margin: 0.5rem 0.25rem 0 0.25rem;
}
.attachmentarea {
  display: flex;
  margin-top: 0.5rem;
  position: relative;
  min-height: 32px;
  max-height: 96px;
}
.attachmentarea .u-nodata {
  text-decoration: none !important;
  color: #06ed;
}
.attachmentarea i.icm-add {
  font-size: 1rem;
}
.attachmentarea-item .item {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  height: 1.4rem;
  margin: 3px;
  font-size: 0.7rem;
  border: 2px solid transparent;
  box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.35rem 0.5rem;
  border-radius: 3px;
}
.normal-attachments.item {
  background-color: #999 !important;
  color: #fff;
  border-radius: 3px !important;
}
.sys-attachments.item {
  background-color: lemonchiffon  !important;
  color: #000 !important;
  border-radius: 3px !important;
}
.cv-attachments.item {
  background-color: #d2691eb3 !important;
  color: #fff;
  border-radius: 3px !important;
}
.cs-autocomplete {
  position: relative;
  flex: 1;
  display: flex;
}
.cs-autocomplete__input {
  border: none !important;
  width: 95%;
}
.cs-autocomplete__listwrapper {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 120%;
  z-index: 1000000;
  max-height: 270px;
  min-width: 270px;
  padding: 0;
  margin: 0;
  box-shadow: 2px 2px 24px rgba(0, 0, 0, 0.1);
  background-color: white;
  border: 1px solid #aaa;
  box-shadow: 1px 2px 4px 0.5px rgba(0, 0, 0, 0.22), 1px 2px 4px 0.5px rgba(0, 0, 0, 0.22);
}
.cs-autocomplete.list-on-top .cs-autocomplete__listwrapper {
  top: -260px;
  bottom: 0;
}
.cs-autocomplete__list {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.cs-autocomplete__footer {
  border-top: 1px solid #aaa;
  flex: 0 0 45px;
  min-height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
  background: #fff;
}
.cs-autocomplete__item {
  /* color: #7a7a7a; */
  list-style: none;
  text-align: left;
  height: 2rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid transparent;
}
.cs-autocomplete__item.active {
  background-color: #ddd;
  border: 1px solid #6da0f9;
  background-color: #e8f0fe;
}
.cs-autocomplete__item:hover {
  background-color: #dbdbdb;
}
.page-circles {
  display: flex;
  margin-bottom: 1rem;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.page-circle {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #FFF;
  color: #111;
  font-size: 1.7rem;
  margin: 0.5rem;
  width: 2.7rem;
  height: 2.7rem;
  box-shadow: 2px 2px 3px 3px rgba(0, 0, 0, 0.3);
  /* padding: 1rem; */
}
.page-circle:hover {
  background: #777;
  color: #eee;
}
.page-circle.selected {
  background: #111;
  color: #ccc;
}
.page-circles a:hover {
  text-decoration: none !important;
}
/* NAV */
.rtw-wrapper {
  margin: 1rem;
}
.rtw-attachments-wrapper {
  display: flex;
  min-width: 170px;
  max-width: 170px;
  padding: 0.5rem;
}
/* .rtw-attachments {
  display: flex;
  flex: 1;
} */
.rtw-attachments .tag {
  color: #000 !important;
  background-color: #a4ceff !important;
  width: 100%;
  margin-bottom: 0.3rem;
}
.rtw-attachments .tag-cross:hover {
  color: #FFF;
  background-color: #000;
  cursor: pointer;
}
.form-page-header {
  font-weight: bold;
  padding-bottom: 1rem;
  font-size: 20px;
}
.form-page.desktop .row .col {
  flex-direction: row;
  max-width: 100%;
}
.form-page.desktop .row .col select,
.form-page.desktop .row .col label.cs-label {
  align-self: center;
}
.form-page .row .col .checkboxnote {
  flex-direction: column;
}
.tempworker-new .cs-view-header-block__image {
  font-size: 3rem;
}
.radio .col {
  flex: 1;
}
.radio label.cs-radio-label,
.checkbox label.cs-checkbox-label,
.checkboxnote label.cs-checkbox-label {
  white-space: normal;
  flex: 1;
  margin-bottom: 0.25rem;
  padding-left: 2rem;
}
.autogen .row {
  margin-bottom: 0 !important;
  padding-bottom: 3px;
}
.autogen .row .row {
  margin-bottom: 0 !important;
  padding-bottom: 3px;
}
.autogen .row .row.hr,
.autogen .row .row.image,
.autogen .row .row.h1,
.autogen .row .row.h2,
.autogen .row .row.h3,
.autogen .row .row.h4,
.autogen .row .row.h5,
.autogen .row .row.checkbox,
.autogen .row .row.checkboxnote {
  margin-left: 8rem;
}
.autogen .cs-label,
.autogen .cs-checkbox-label,
.autogen .cs-radio-label {
  font-size: 1rem;
  min-width: 8rem;
}
.liner {
  display: flex;
  align-items: flex-start;
  text-align: left;
  width: 100%;
}
.liner:after {
  content: "";
  height: 1px;
  flex-grow: 1;
  min-width: 20px;
  margin: auto;
  margin-left: 20px;
  background: #777;
}
.autogen .row .row.h1,
.autogen .row .row.h2,
.autogen .row .row.h3,
.autogen .row .row.h4,
.autogen .row .row.h5 {
  padding-bottom: 1rem;
}
hr {
  border: 0;
  height: 1px;
  background: #333;
  background-image: linear-gradient(to right, #ccc, #333, #ccc);
  color: gray;
  border-style: inset;
  border-width: 1px;
  margin: 0.5em auto;
  flex: 1;
}
.autogen .row span.cs-validation-error-msg {
  white-space: nowrap;
  flex: 0 0 auto;
}
.autogen .cs-radio + .cs-radio-label--paddedleft,
.autogen .cs-checkbox + .cs-checkbox-label--paddedleft {
  padding-left: 0;
}
.autogen .cs-checkbox + .cs-checkbox-label--paddedleft:before {
  right: -1.5rem;
  top: 4px;
  left: unset;
}
.autogen--margin-left {
  margin-left: 8rem;
}
.autogen.want-left-margin .col,
.autogen.want-left-margin h5,
.autogen.want-left-margin ol {
  margin-left: 2rem;
}
/*-------------------------------------------------
cs-cal
-------------------------------------------------*/
.cs-cal {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
}
.modal-container.cs-cal.mini {
  min-width: 420px;
  max-width: 420px;
}
.cs-cal__body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* width: calc( 100vw - 2rem); */
  /* padding: 0 0.5rem; */
  /* border-radius: 6px; */
  /* background: #FFF; */
  /* border: 1px solid #ccc; */
  background-color: #FFF;
}
.cs-cal__cell {
  width: 100%;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: auto;
}
.cs-cal__cell.active {
  background-color: #ff965380;
  border: 2px solid #ff4500;
  /* border-radius: 6px; */
}
.cs-cal__cell:hover:not(.active) {
  background-color: #e8f0fe;
  border: 1px solid #6da0f9;
  /* border-radius: 6px; */
}
.cs-cal__day-heading {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 3px 12px 3px 3px;
  text-align: right;
  /* background: #ccc; */
}
.cs-cal__day-body {
  flex: 1;
  /* padding: 3px; */
  font-size: 0.7rem;
  overflow: hidden;
  overflow-y: auto;
}
.cs-cal.day .cs-cal__cell {
  height: 3rem;
}
.cs-cal__cell.Saturday,
.cs-cal__cell.Sunday {
  /* background-color: #ccc; */
  color: #aaa;
}
/*-------------------------------------------------
day
-------------------------------------------------*/
.cs-cal.day .cs-cal__day-heading {
  position: sticky;
  top: 1px !important;
}
.cs-cal.day .cs-cal__days {
  width: 93%;
}
.cs-cal.day .cs-cal__days:first-of-type {
  width: 7%;
}
/*-------------------------------------------------
week
-------------------------------------------------*/
.cs-cal.week .cs-cal__body {
  flex-direction: column;
  height: 100%;
}
.cs-cal.week .cs-cal__cell {
  height: 25%;
  width: 50%;
}
.cs-cal.schedule .cs-cal__day-heading,
.cs-cal.day .cs-cal__day-heading,
.cs-cal.week .cs-cal__day-heading {
  background-image: linear-gradient(#f9f9f9, #c2c2c2);
  border: 1px solid #aaa;
}
.cs-cal.day .cs-cal__day-heading.time,
.cs-cal.week .cs-cal__day-heading.time {
  background-image: none;
  border: 1px solid transparent;
}
.cs-cal__cell.time {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 1px dotted #aaa;
}
.cs-cal__day-body.time {
  overflow: hidden;
}
/*-------------------------------------------------
month
-------------------------------------------------*/
.cs-cal.month .cs-cal__days {
  display: none;
  justify-content: space-around;
  margin-bottom: 3px;
  background: #ccc;
  background-image: linear-gradient(#f9f9f9, #c2c2c2);
  position: sticky;
  top: 1px;
}
.cs-cal.month .cs-cal__cell {
  height: 6rem;
}
/*-------------------------------------------------
schedule
-------------------------------------------------*/
.cs-cal.schedule {
  max-width: 500px;
}
.cs-cal.schedule .cs-cal__cell {
  border: none;
}
.cs-cal.schedule .cs-cal__day-body {
  padding: 1rem;
}
/*-------------------------------------------------
mini
-------------------------------------------------*/
.cs-cal.mini {
  /* position: absolute;
  top: 50%;
  left: 50%;
  position: fixed;
  transform: translateX(-50%) translateY(-50%); */
  display: flex;
  flex-direction: column;
  max-height: 390px;
  overflow: hidden;
}
.cs-cal.mini .cs-cal__header {
  flex: 0 0 auto;
  /* min-height: 80px;
  padding: 0.5rem; */
  min-height: 100px;
  text-align: center;
  color: #fff;
  background-image: linear-gradient(to bottom, #5B8AD4, #82B2FC);
}
.cs-cal.mini .cs-cal__header-title {
  display: flex;
  align-items: center;
  height: 2.5rem;
  user-select: none;
  font-size: 1.1rem;
  color: #fff;
  /* background-color: #016565; */
  /* background-color: #2565cd; */
  text-align: center;
  padding: 3px 0 0 0;
  background-image: linear-gradient(45deg, #2565cd 70%, transparent 70%), linear-gradient(to bottom, transparent, transparent);
}
.cs-cal__header-title-text {
  flex: 0 0 70%;
}
.cs-cal.mini .cs-cal__days {
  flex: 0;
  display: flex;
  justify-content: space-evenly;
  background: #ccc;
  border-bottom: 1px solid #aaa;
}
.cs-cal.mini .cs-cal__body {
  flex: 1;
  height: 100%;
  width: 100%;
  border-radius: 0;
  box-shadow: none;
  padding-top: 0.5rem;
  background-color: #FFF;
}
.cs-cal.mini .cs-cal__cell {
  height: 3rem;
  height: 1.8rem;
  border: none;
  width: 14.285%;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}
.cs-cal.mini .cs-cal__cell:hover {
  background-color: unset;
  border: none;
}
.cs-cal.mini .cs-cal__day-body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  overflow: hidden;
  height: 1.8rem;
  width: 1.8rem;
}
.cs-cal.mini .cs-cal__cell.active {
  background: transparent;
  color: #111;
}
.cs-cal.mini .cs-cal__cell.selected .cs-cal__day-body {
  border-radius: 50%;
  background-color: #999;
  color: #FFF;
}
.cs-cal.mini .cs-cal__cell.active .cs-cal__day-body {
  border-radius: 50%;
  background: #000;
  color: #fff;
  box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.25);
}
/* .cs-cal.mini .cs-cal__day-body.active {
  background: #000;
  color: #FFF;
  border-radius: 50%;
} */
/* 
.cs-cal.mini .cs-cal__day-body:hover:not(.active) {
  border-radius: 50%;
  background: #ccc;
} 
*/
/* .cs-cal__mini-footer {
  min-height: 42px;
  background: #eee;
  display: flex;
  justify-content: flex-end;
  padding: 6px 12px;
  border-top: 1px solid #aaa;
} */
.cs-cal__mini-footer {
  max-height: 32px;
  display: flex;
  justify-content: flex-end;
  margin: 10px;
}
.cs-cal__mini-footer button {
  border: 1px solid #777;
  border-radius: 0;
  width: 77px;
  font-size: 1rem;
  border-radius: 6px;
  margin-left: 5px;
  width: 5rem;
}
.simplepicker-select-pane {
  flex: 1;
  display: flex;
  align-items: center;
}
.simplepicker-month-switcher {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 61px;
}
.simplepicker-selected-date {
  flex: 0 0 73%;
  display: flex;
  align-items: center;
  justify-content: start;
  opacity: 0.5;
  font-size: 1.5rem;
  padding-left: 1rem;
}
.simplepicker-icon,
.simplepicker-time {
  border: none;
  background: transparent;
  padding: 2px;
  margin: 4px 6px;
  width: 25px;
  height: 25px;
  opacity: 0.5;
}
.simplepicker-icon:hover {
  opacity: 1;
}
.simplepicker-time,
.simplepicker-selected-date {
  opacity: 1;
}
.simplepicker-time {
  display: none;
}
.simplepicker-selected-date-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.simplepicker-icon-next {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1hcnJvdy1yaWdodCI+PGxpbmUgeDE9IjUiIHkxPSIxMiIgeDI9IjE5IiB5Mj0iMTIiPjwvbGluZT48cG9seWxpbmUgcG9pbnRzPSIxMiA1IDE5IDEyIDEyIDE5Ij48L3BvbHlsaW5lPjwvc3ZnPg==);
  background-repeat: no-repeat;
  background-position: center;
}
.simplepicker-icon-previous {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1hcnJvdy1sZWZ0Ij48bGluZSB4MT0iMTkiIHkxPSIxMiIgeDI9IjUiIHkyPSIxMiI+PC9saW5lPjxwb2x5bGluZSBwb2ludHM9IjEyIDE5IDUgMTIgMTIgNSI+PC9wb2x5bGluZT48L3N2Zz4=);
  background-repeat: no-repeat;
  background-position: center;
}
.simplepicker-icon-calender {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1jYWxlbmRhciI+PHJlY3QgeD0iMyIgeT0iNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiByeD0iMiIgcnk9IjIiPjwvcmVjdD48bGluZSB4MT0iMTYiIHkxPSIyIiB4Mj0iMTYiIHkyPSI2Ij48L2xpbmU+PGxpbmUgeDE9IjgiIHkxPSIyIiB4Mj0iOCIgeTI9IjYiPjwvbGluZT48bGluZSB4MT0iMyIgeTE9IjEwIiB4Mj0iMjEiIHkyPSIxMCI+PC9saW5lPjwvc3ZnPg==);
  background-repeat: no-repeat;
  background-position: center;
}
.simplepicker-icon-time {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1jbG9jayI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiPjwvY2lyY2xlPjxwb2x5bGluZSBwb2ludHM9IjEyIDYgMTIgMTIgMTYgMTQiPjwvcG9seWxpbmU+PC9zdmc+);
  background-repeat: no-repeat;
  background-position: center;
  /* margin-left: auto; */
}
select.cs-cal__input-month,
input.cs-cal__input-year {
  background-color: transparent;
  color: #fff;
  border: 1px solid transparent;
  max-width: 82px;
  padding: 0 0 0 0.3rem;
  margin-left: 0.5rem;
  font-size: 1.5rem !important;
  border: 1px solid transparent !important;
  border-right: 1px solid transparent !important;
  border-bottom: 1px solid transparent !important;
}
select.cs-cal__input-month {
  background-image: none !important;
  max-width: 300px;
  flex: 0 0 auto;
  padding: 0 0 0 1rem !important;
  margin: 0 !important;
  width: auto;
  cursor: pointer;
  /* border: 1px solid #aaa !important;  */
  /* border-right: 1px solid #fff !important; */
  /* border-bottom: 1px solid #fff !important; */
}
select.cs-cal__input-month option {
  background-color: #82B2FC;
  color: #FFF;
  font-size: 1.2rem;
  text-align: right;
  padding: 0 0.5rem;
}
select.cs-cal__input-month:focus option {
  text-align: left;
}
select.cs-cal__input-month:focus,
input.cs-cal__input-year:focus {
  box-shadow: none !important;
  background-image: unset;
  background-color: #000;
  color: #fff;
  background-color: #fff;
  color: navy;
}
select.cs-cal__input-month:hover,
input.cs-cal__input-year:hover {
  box-shadow: unset !important;
  border: 1px solid #ccc;
}
.cs-cal-currentdate-wrapper {
  display: flex;
  justify-content: flex-end;
}
.cs-cal-currentdate {
  /* position: absolute; */
  right: 2rem;
  top: 4rem;
  padding: 0;
  z-index: 1;
  line-height: 1.5rem;
  color: #0366d6;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: 170px;
  font-weight: bold;
  background-color: #FFF;
  border: 1px solid #555;
  border-radius: 6px;
}
.simplepicker-time-section {
  flex: 1;
  border: 0;
  margin-left: 1.3rem;
}
.simplepicker-time-section input {
  border: 0 !important;
  margin: 0 !important;
  font-size: 1.4rem;
  background: transparent;
  color: #FFF;
  margin-bottom: 0.3rem;
  font-size: 1.4rem !important;
}
.simplepicker-time-section input:focus {
  box-shadow: none !important;
  background-color: #000;
  color: #fff;
  background-color: #fff;
  color: navy;
}
.csl-today {
  margin-right: auto;
  font-size: 1.3rem;
  opacity: 0.8;
  color: #2565cd;
  padding-top: 6px;
}
.csl-cal-entry,
.csl-cal-entry-allday,
.csl-cal-entry-more {
  white-space: nowrap;
  cursor: pointer;
  margin-bottom: 3px;
  padding: 0 3px;
  font-size: 0.8rem;
}
.csl-cal-entry {
  background-color: #eee;
  color: #555;
}
.csl-cal-entry-allday {
  background-color: #4285f4;
  color: #fff;
}
.csl-cal-entry-more {
  background: transparent;
  color: #333;
  font-weight: bold;
}
.month .day0:first-child {
  margin-left: 0%;
}
.month .day1:first-child {
  margin-left: 14.28571429%;
}
.month .day2:first-child {
  margin-left: 28.57142857%;
}
.month .day3:first-child {
  margin-left: 42.85714286%;
}
.month .day4:first-child {
  margin-left: 57.14285714%;
}
.month .day5:first-child {
  margin-left: 71.42857143%;
}
.month .day6:first-child {
  margin-left: 85.71428571%;
}
/* magic to offset columns to ending weekday column */
.month .day0:last-child {
  margin-right: 85.71428571%;
}
.month .day1:last-child {
  margin-right: 71.42857143%;
}
.month .day2:last-child {
  margin-right: 57.14285714%;
}
.month .day3:last-child {
  margin-right: 42.85714286%;
}
.month .day4:last-child {
  margin-right: 28.57142857%;
}
.month .day5:last-child {
  margin-right: 14.28571429%;
}
.month .day6:last-child {
  margin-right: 0%;
}
@media screen and (min-width: 55rem) {
  .cs-cal.month .cs-cal__days {
    display: flex;
  }
  .cs-cal.month .cs-cal__cell,
  .cs-cal.mini .cs-cal__cell {
    width: 14.2857%;
  }
  .cs-cal.week .cs-cal__days {
    width: 18.6%;
  }
  .cs-cal.day .cs-cal__days {
    width: 93%;
  }
  .cs-cal.day .cs-cal__days:first-of-type {
    width: 7%;
  }
  .cs-cal__day-heading {
    text-align: center;
  }
  .cs-cal__day-body.time {
    font-size: 2rem;
    font-style: bold;
  }
  /* magic to offset columns to starting weekday column 
  .Sunday:first-child { margin-left: 0%; }
  .Monday:first-child { margin-left: 14.2857142857%; }
  .Tuesday:first-child { margin-left: 28.5714285714%; }
  .Wednesday:first-child { margin-left: 42.8571428571%; }
  .Thursday:first-child { margin-left: 57.1428571429%; }
  .Friday:first-child { margin-left: 71.4285714286%; }
  .Saturday:first-child { margin-left: 85.7142857143%; }

  /* magic to offset columns to ending weekday column 
  .Sunday:last-child { margin-right: 85.7142857143%; }
  .Monday:last-child { margin-right: 71.4285714286%; }
  .Tuesday:last-child { margin-right: 57.1428571429% }
  .Wednesday:last-child { margin-right: 42.8571428571%; }
  .Thursday:last-child { margin-right: 28.5714285714%; }
  .Friday:last-child { margin-right: 14.2857142857%; }
  .Saturday:last-child { margin-right: 0%; }
  */
  /*
@media screen and (min-width: 55em) {
  .sunday:first-child {
    margin-left: 0%;
  }
  .sunday:last-child {
    margin-right: 85.7142857143%;
  }
}

@media screen and (min-width: 55em) {
  .monday:first-child {
    margin-left: 14.2857142857%;
  }
  .monday:last-child {
    margin-right: 71.4285714286%;
  }
}

@media screen and (min-width: 55em) {
  .tuesday:first-child {
    margin-left: 28.5714285714%;
  }
  .tuesday:last-child {
    margin-right: 57.1428571429%;
  }
}

@media screen and (min-width: 55em) {
  .wednesday:first-child {
    margin-left: 42.8571428571%;
  }
  .wednesday:last-child {
    margin-right: 42.8571428571%;
  }
}

@media screen and (min-width: 55em) {
  .thursday:first-child {
    margin-left: 57.1428571429%;
  }
  .thursday:last-child {
    margin-right: 28.5714285714%;
  }
}

@media screen and (min-width: 55em) {
  .friday:first-child {
    margin-left: 71.4285714286%;
  }
  .friday:last-child {
    margin-right: 14.2857142857%;
  }
}

@media screen and (min-width: 55em) {
  .saturday:first-child {
    margin-left: 85.7142857143%;
  }
  .saturday:last-child {
    margin-right: 0%;
  }
}

.calheader,
.calpast,
.emptyday {
  display: none;
}

.cal-day {
  width: 100%;
}

@media screen and (min-width: 55em) {
  .calendar,
  .calheader {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }

  .calpast,
  .emptyday {
    display: block;
  }

  .cal-day {
    width: 14.2857142857%;
    border: 1px solid #999;
    padding: 0.5em 3px;
  }
}
.cal-day {
  margin: 0;
  background-color: #FFF;
  font-size: 14px;
  padding: 0;
}
.cal-day h4 {
  clear: both;
}
@media screen and (min-width: 55em) {
  .cal-day {
    padding: 3px;
  }
}

.calendar {
  margin-top: 1em;
}
.calendar h4 {
  margin-bottom: 0;
  padding-bottom: 0;
  font-size: 100%;
  margin-top: 0;
  font-variant: small-caps;
}
.calendar h4 a {
  color: #000;
  text-decoration: none;
  border: 0;
}
.calendar h4 a:hover {
  color: #00F;
  text-decoration: underline;
}
.calendar ul {
  margin-top: 0;
  margin-bottom: 5px;
  overflow-y: auto;
  max-height: 100px;
}
.calendar td {
  background-color: #FFF;
  padding: 3px;
}
.calendar .calpast {
  background-color: #F0F0F0;
  color: #999;
}
.calendar .calfuture {
  background-color: #F0F0F0;
}
.calendar ul {
  padding: 0;
  margin-bottom: 1em;
  clear: both;
}
.calendar li {
  list-style: none;
  margin-bottom: 1em;
}

.calpast a {
  color: #999;
  text-decoration: none;
}
.calpast a:hover {
  color: #000;
  text-decoration: underline;
}

.caldate {
  display: block;
  background-color: #1a1a1a;
  color: #e6e6e6;
  width: auto;
  text-align: right;
  padding: 3px;
}
@media screen and (min-width: 55em) {
  .caldate {
    margin: 0 0 0.5em;
    border-radius: 50%;
    text-align: center;
    width: 2em;
  }
}

@media screen and (min-width: 55em) {
  .calheader .cal-day {
    text-align: center;
    border: 0;
  }

  .caldate {
    margin: 0 0 1em 1em;
    float: right;
  }
}
div.calswitch {
  float: right;
  text-align: right;
}

.calsubmit {
  border: 1px solid black;
  background-color: #FFF;
  color: #00F;
  font-weight: bold;
  cursor: pointer;
  margin-top: 2px;
}
*/
  /* .week .day6:last-child { margin-bottom: 25%; }   */
}
.modal-container.cs-cal.mini {
  min-height: 390px;
  max-height: 420px;
}
.modal-container.cs-cal.mini.rounded {
  border-radius: 1rem;
}
.modal-container.cs-cal.mini .modal-content {
  background-color: #FFF;
}
.modal-container.cs-cal.mini .modal-header {
  display: none;
}
.dash-view .cs-view-header {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}
.dash-view .cs-view-header-block__body {
  min-height: unset;
}
.dash-container {
  position: relative;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  overflow-y: auto;
  margin-top: 0;
  margin-right: 0;
  padding: 1rem;
  background-color: #f1f1f1;
}
.dash-item-wrapper {
  flex: 1;
  display: flex;
  position: relative;
  min-width: 31%;
  min-height: 220px !important;
  max-height: 66%;
  margin: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.6rem;
  background-color: #FFF;
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
}
.dash-header {
  display: flex;
  position: absolute;
  font-size: 1.2rem;
  line-height: 2.2rem;
  font-weight: bold;
  color: #333;
}
.dash-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 3rem;
  overflow-x: auto;
  overflow-y: auto;
  transition: 0.5s all ease;
}
.dash-header .dash-icon {
  color: inherit !important;
  font-size: 1.3rem;
  margin-left: 0.5rem;
  padding: 0.5rem 0.7rem 0.5rem 0;
  color: #333 !important;
}
.dash-icon {
  transform: scale(1);
  transition: transform 1s ease;
}
.dash-icon:hover {
  transform: scale(1.5);
  transition: transform 1s ease;
}
.dash-item .cs-toolbar__icon {
  color: #777;
}
.dash-item-wrapper.radial .dash-header {
  position: absolute;
}
.dash-item-wrapper.radial {
  justify-content: center;
}
.dash-item-wrapper.radial .dash-item {
  padding-bottom: 0;
}
.app-c360 .dash-item-wrapper {
  max-width: 100% !important;
  max-height: 100% !important;
  flex: 0 0 100% !important;
  min-width: 75% !important;
  min-height: 75% !important;
}
canvas[class^='cs-chart'] {
  flex: 0 0 auto;
  align-self: center;
}
.dash-item-wrapper.table .dash-item {
  padding-bottom: 0;
}
.dash-table {
  font-family: "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  display: table;
  width: 100%;
}
.dash-container.hasminimised {
  margin-top: 100px;
}
.dash-item-wrapper.isminimised {
  max-height: 85px;
  max-width: 33%;
  position: absolute;
  top: 5px;
}
.dash-table tr.even {
  background-color: lemonchiffon;
}
.dash-table tr.even td {
  border-bottom: 1px solid #ccc;
}
.cs-chart-donut p {
  font-size: 2rem;
}
.dash-entity-label {
  font-size: 0.8rem;
  min-width: 50% !important;
}
.dash-entity-stat {
  font-weight: bold;
  margin-left: auto;
  text-align: right;
}
/*---------------------------------------------
table version
---------------------------------------------*/
.dash-header.absolute {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  padding: 1rem 0.5rem 0.5rem 1rem;
}
.dash-item.centered {
  align-items: center;
  padding: 0.3rem;
}
.dash-entity-table {
  font-size: 0.8rem;
}
.dash-item.centered .dash-entity-table {
  margin: 0 auto;
}
.dash-entity-table th {
  background-color: #FFF;
  text-align: center;
}
.dash-entity-table th i {
  font-size: 1.1rem;
  color: #555;
}
.dash-entity-table td {
  min-width: 10%;
  padding: 3px;
  font-size: 0.8rem;
  border: 1px solid #ddd;
}
.dash-entity-table.stats td {
  text-align: center;
}
.dash-entity-table.datagrid td {
  border: 1px solid transparent;
  padding: 5px;
}
.dash-entity-table tr.empty td {
  border: 0;
  flex: 1;
  vertical-align: middle;
  text-decoration: underline;
  font-weight: bold;
  color: #06ed;
  text-align: center;
}
td.dash-entity-label {
  font-size: 0.7rem !important;
  min-width: 50% !important;
  font-weight: normal !important;
  color: #333 !important;
  border: 0 !important;
  padding-right: 1rem !important;
  text-align: right !important;
}
.dash-entity-table td:not(.dash-entity-label):hover {
  cursor: pointer;
}
.dashboard-user {
  font-size: 0.8rem !important;
  display: inline-block;
  background-color: transparent;
  max-width: 210px;
}
.table-wrapper.dash {
  overflow: hidden;
}
.dashboard-chart-header {
  flex: 0 0 35px;
  background-color: #202226;
  color: #2b7bbc;
  color: #33A2E5;
  margin-bottom: 0.5rem;
  display: none;
}
.dashboard-chart {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0.6rem;
  background-color: #fff;
}
.csl-chart-wrapper.dark,
.dashboard-chart.dark {
  background-color: #02050a;
  color: #c0d0e0;
}
.box {
  background-color: #2B2D3E;
  padding: 25px 20px;
}
.shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.sparkboxes .box {
  padding-top: 10px;
  padding-bottom: 10px;
  text-shadow: 0 1px 1px 1px #666;
  box-shadow: 0px 1px 15px 1px rgba(69, 65, 78, 0.08);
  position: relative;
  border-radius: 5px;
}
.sparkboxes .box .details {
  position: absolute;
  color: #fff;
  transform: scale(0.7) translate(-22px, 20px);
}
.sparkboxes strong {
  position: relative;
  z-index: 3;
  top: -8px;
  color: #fff;
}
.sparkboxes .box1 {
  background-image: linear-gradient(135deg, #ABDCFF 10%, #0396FF 100%);
}
.sparkboxes .box2 {
  background-image: linear-gradient(135deg, #2AFADF 10%, #4C83FF 100%);
}
.sparkboxes .box3 {
  background-image: linear-gradient(135deg, #FFD3A5 10%, #FD6585 100%);
}
.sparkboxes .box4 {
  background-image: linear-gradient(135deg, #EE9AE5 10%, #5961F9 100%);
}
.dash-container.dash-w2x2 .dash-item-wrapper {
  flex: 0 0 50%;
  min-width: 50%;
  max-width: 50%;
  min-height: 50%;
  max-height: 50%;
}
.dash-container.dash-w2x3 .dash-item-wrapper {
  flex: 0 0 50%;
  min-width: 50%;
  max-width: 50%;
  min-height: 33%;
  max-height: 33%;
}
.dash-container.dash-w3x3 > .dash-item-wrapper {
  flex: 0 0 33%;
  min-width: 33%;
  max-width: 33%;
  min-height: 33%;
  max-height: 33%;
}
.dash-container.dash-w3x3 .dash-item-wrapper.u-flex2 {
  flex: 0 0 66%;
  min-width: 66%;
  max-width: 66%;
}
.dash-container.dash-w3x3 .dash-item-wrapper.u-flex3 {
  flex: 0 0 100%;
  min-width: 100%;
  max-width: 100%;
}
.dash-container.dash-w2x3 .dash-item-wrapper.u-flex2 {
  flex: 0 0 100%;
  min-width: 100%;
  max-width: 100%;
}
.dash-container.dash-w3x3 > .dash-item-wrapper.h66 {
  min-height: 66% !important;
  max-height: 66% !important;
}
.mainzone.splitscreen .dash-item-wrapper,
.mainzone.splitscreen .dash-container.dash-w3 > .dash-item-wrapper,
.mainzone.splitscreen .dash-container.dash-w3 .dash-item-wrapper.u-flex2,
.dash-container.ismaximised .dash-item-wrapper.ismaximised {
  display: flex;
  flex: 1 !important;
  min-width: 100% !important;
  max-width: 100% !important;
}
.dash-container.ismaximised .dash-item-wrapper {
  display: none;
}
.dash-container.ismaximised .dash-item-wrapper.ismaximised {
  display: flex;
  min-height: 100% !important;
  max-height: 100% !important;
}
@media only screen and (min-device-width: 360px) and (max-device-width: 740px) and (orientation: portrait), screen and (max-width: 600px) {
  .dash-container {
    flex-wrap: nowrap !important;
    flex-direction: column;
  }
  .dash-container.dash-w3x3 > .dash-item-wrapper,
  .dash-container.dash-w3x3 .dash-item-wrapper.u-flex2,
  .dash-item-wrapper {
    flex: 0 0 100% !important;
    max-width: 100%;
  }
  .dash-container.dash-w3 > .dash-item-wrapper {
    flex: 0 0 100%;
  }
  .dash-container.dash-w3 .dash-item-wrapper.u-flex2 {
    flex: 0 0 100%;
  }
}
.dash-item .calevents {
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
}
.dash-item .calitem {
  display: flex;
  justify-content: flex-start;
  font-size: 0.7rem;
}
.dash-item .calitem .startdate {
  display: inline-block;
  margin-right: 0.5rem;
  flex: 0 0 auto;
  max-width: 100px;
}
.dash-item .calitem .subject {
  display: inline-block;
  color: #06ed;
  text-overflow: ellipsis;
}
.dash-stats-total {
  font-size: 1.1rem;
  font-weight: bold;
  margin-left: 0.5rem;
  color: #ff4500;
}
.calitem .stats-icon {
  min-width: 24px;
  text-align: center;
}
.calitem .icm-go-1 {
  color: blue;
  font-size: 1.2rem;
  cursor: pointer;
}
.rte-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 0.6rem;
  background: #FFF;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.rte-wrapper.shadow {
  filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
}
.rte-frame {
  flex: 1;
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 0.5rem;
  font-size: 1rem;
  overflow: auto;
}
.rte-frame p {
  margin: 0;
}
.rte-toolbar {
  display: none !important;
  flex-wrap: wrap;
  border-top-left-radius: 0.6rem;
  border-top-right-radius: 0.6rem;
  padding: 3px 0 3px 3px;
  background-image: linear-gradient(#f9f9f9, #c2c2c2);
  border-bottom: 1px solid #aaa;
}
.rte-toolbar.show {
  display: flex !important;
  position: sticky;
  top: 0;
}
.rte-toolbar .cs-toolbar__item {
  padding: 0.1rem 0.3rem;
  min-width: 35px;
  justify-content: center;
  margin-right: 1px;
  color: #333;
}
.rte-toolbar .cs-toolbar__item:hover > .cs-toolbar__icon,
.rte-toolbar .cs-toolbar__item:hover > .rte-toolbar-char,
.rte-toolbar .cs-toolbar__item:hover > i,
.rte-toolbar .cs-toolbar__item:hover > span > .cs-toolbar__icon {
  background-color: transparent;
  border-radius: 0;
  color: #06ed;
}
.rte-toolbar .cs-menu__section-heading:hover {
  color: #555;
}
.rte-toolbar .cs-menu__section-heading {
  color: #555;
  font-weight: bold;
  text-transform: uppercase;
}
.rte-toolbar i {
  font-size: 1.1rem !important;
  padding: 3px 5px;
  flex-wrap: wrap;
  color: #333;
}
.rte-editor {
  flex: 1;
  overflow: auto;
  min-height: 200px;
  min-width: 200px;
  background: #FFF;
  padding: 5px;
}
.rte-editor ol,
.rte-editor ul {
  padding: revert;
  list-style: revert;
}
.rte-editor-code {
  font-family: Consolas, Courier New;
  font-size: 0.8rem;
}
.rte-editor *::selection {
  color: #333;
  background: cyan;
}
.cs-image-menu .cs-menu__icon {
  margin-right: 0;
}
.cs-font-menu {
  width: 220px;
  flex-wrap: wrap;
  display: flex;
  height: 250px;
}
.cs-color-menu {
  display: flex;
  flex-wrap: wrap;
  width: 220px;
  height: 159px;
  flex-direction: row;
}
.cs-color-item {
  min-width: 24px;
  min-height: 24px;
  border: 1px solid #999;
  margin: 3px;
  border-radius: 0 !important;
  flex: 0 0 auto;
}
.cs-color-item.active {
  border: 4px solid #000;
}
.mergecode {
  background: gold;
  border: 1px solid black;
  display: inline-block;
}
/* .cs-toolbar.no-padding {
padding: 0 0 0 1rem !important;
}  */
/* .cs-toolbar.no-padding li.cs-toolbar__item {
padding: 0.3rem 0.4rem; 
} */
.rte-toolbar .cs-toolbar__item.divider {
  background: #333;
  min-height: 2rem;
  width: 1px;
  max-width: 1px !important;
  min-width: 1px !important;
  padding: 0 !important;
  margin: 0px 5px;
}
.rte-toolbar .cs-toolbar__item.active {
  background-image: linear-gradient(#c2c2c2, #f9f9f9);
  border-radius: 50%;
}
.rte-toolbar-char {
  font-size: 20px;
  font-family: 'Roboto';
  padding: 1px 5px;
}
.rte-toolbar-char-bold {
  font-weight: bold;
}
.rte-toolbar-char-italic {
  font-style: italic;
}
.rte-toolbar-char-underline {
  text-decoration: underline;
}
.rte-toolbar-char-forecolor {
  color: 000;
  font-weight: bold;
}
.rte-toolbar-char-backcolor {
  color: #000;
  background: #FFF;
  border-radius: 50%;
  min-width: 32px;
  text-align: center;
}
blockquote.go-1,
blockquote {
  background: #f9f9f9;
  border-left: 0.25rem solid #ccc;
  margin: 1rem;
  padding: 1rem;
}
blockquote.go-1 p,
blockquote p {
  margin: 0;
}
.cs-htmleditor__toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  position: relative;
  text-align: center;
  font-size: 0.9rem;
  background: #FFF;
  border: 1px solid lightgrey;
  font-weight: bold;
  text-transform: uppercase;
  background-image: linear-gradient(#c2c2c2, #f9f9f9);
  padding-right: 90px;
}
.cs-htmleditor__toolbar input {
  border-radius: 5px;
  font-size: 1rem;
  background-color: #e8f0fe !important;
}
.cs-htmleditor__toolbar .cs-item__options {
  display: block;
}
.bodyshowcode {
  position: relative;
}
div.showcode {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow: auto;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1rem;
  z-index: 999;
  background-color: lemonchiffon;
}
/* --------------- cs-entity-block ----------------*/
.cs-entity-block {
  display: flex;
  padding: 0.5rem;
  min-height: 100px;
  max-height: 100px;
  position: relative;
  overflow: hidden;
  background-color: #FFF;
  border-radius: 0.6rem;
  border: 1px solid transparent;
  filter: drop-shadow(0px 0px 3px #999);
}
.cs-entity-block__aside > div {
  margin-right: 1rem;
}
.cs-entity-block__image {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  margin-right: 1rem;
  font-size: 2rem;
  color: #ff4500;
}
.cs-entity-block__image:hover i {
  transform: scale(1.2);
  transition: all 0.25s;
}
.cs-entity-block__image i {
  border-radius: 6px;
  padding: 5px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.cs-entity-block__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cs-entity-block__heading {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.2rem;
  font-weight: bold;
}
.cs-entity-block__subheading {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  padding: 0.1rem 0 0.5rem 0;
  color: #0366d6;
}
.cs-entity-block__subheading-link {
  cursor: pointer;
}
.cs-entity-block__subheading-link:hover {
  text-decoration: underline;
}
.cs-entity-extra {
  margin-left: 4.6rem;
  margin-bottom: 3px;
  font-size: 0.7rem;
  color: sienna;
}
.cs-entity-action-links {
  flex: 1;
  display: flex;
  align-items: end;
}
.cs-entity-action-links .cs-entity-block__aside {
  display: flex;
  align-items: center;
  margin-right: 1rem;
}
.cs-entity-extra__info {
  font-size: 0.8rem;
  padding: 3px 5px;
  margin-right: 5px;
  background-color: #ddd;
  color: #000;
  border: 1px solid #ccc;
  border-radius: 3px;
  position: relative;
}
.cs-entity-block__aside {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 0.8rem !important;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #555 !important;
}
.cs-entity-block__aside i {
  margin-right: 0;
  margin-left: 0.5rem;
  padding: 0;
  font-size: 1.4rem;
  color: #777;
}
.cs-entity-block__aside a:focus {
  text-decoration: none !important;
  border-bottom: none !important;
}
.cs-entity-block__aside a,
.cs-entity-block__aside-item,
.cs-entity-block__aside-tel,
.cs-entity-block__aside-tel a,
.cs-entity-block__aside-website,
.cs-entity-block__aside-email {
  flex: 0 0 auto;
  font-size: 0.9rem !important;
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #555 !important;
}
.cs-entity-block__aside a {
  padding: 0 !important;
}
.cs-entity-block__aside-tel a:hover,
.cs-entity-block__aside-website:hover,
.cs-entity-block__aside-email:hover {
  text-decoration: underline;
  color: #06ed !important;
}
.cs-entity-block__heading .hilite,
.cs-entity-block__aside .hilite {
  background-color: #555;
  color: #FFF !important;
  display: inline-block;
  padding: 1px 7px;
  border-radius: 3px;
  font-weight: normal;
  margin-right: 0.5rem;
}
.cs-entity-block__aside-item.hilite.reversed {
  color: #555 !important;
  background-color: #fafafa;
  border: 1px solid #555;
}
.cs-entity-block__aside-item.hilite.reversed:hover {
  color: #fafafa !important;
  background-color: #555;
  border: 1px solid #999;
}
.cs-entity-block__aside .pay {
  color: #555 !important;
}
.cs-entity-extra {
  margin-left: 4.6rem;
  margin-bottom: 3px;
  font-size: 0.7rem;
  color: sienna;
}
.cs-entity-extra__info {
  font-size: 0.8rem;
  padding: 3px 5px;
  margin-right: 5px;
  background-color: #ddd;
  color: #000;
  border: 1px solid #ccc;
  border-radius: 3px;
  position: relative;
}
/* --------------- alert message  ----------------*/
.cs-entity-alert-orig {
  position: relative;
  padding: 0.4rem;
  margin-right: 2rem;
  text-align: center;
  font-size: 0.8rem;
  border-radius: 0.5rem;
  /* border: 5px solid red; */
  /* width: 90%; */
  /* margin: 0.5rem auto; */
  border-radius: 12px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background: #777;
  color: #fff;
  box-shadow: 0 -2px 0 0 #555;
}
.cs-entity-alert {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  font-size: 0.9rem;
  line-height: 0.9rem;
  background: #FFF;
  color: crimson;
  border: 1px solid lightgrey;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0.5rem auto 0 auto !important;
  padding: 0.25rem 0.5rem 0.1rem 0.5rem;
  border-radius: 0.3rem;
}
.cs-entity-alert.editing {
  border: 1px solid transparent;
}
.cs-entity-alert .cs-item__options {
  display: flex;
  font-size: 1rem;
}
.cs-entity-alert input {
  margin-right: 70px !important;
  border-radius: 5px;
  font-size: 1rem;
  background-color: #e8f0fe !important;
}
.cs-entity-alert input:focus {
  box-shadow: none !important;
}
.cs-entity-alert.editing {
  margin: 1rem 2rem 0 2rem !important;
  background-color: transparent !important;
}
.cs-entity-img {
  margin-top: 1rem;
  font-size: 2rem;
}
.finder-criteria {
  padding: 1rem;
}
.finder-criteria .cs-find-list {
  margin: 0.5rem 0.25rem;
  border-radius: 0.6rem;
  border: none;
  box-shadow: none;
  border: 3px inset rgba(255, 255, 255, 0.5);
}
.finder-criteria .db-searcher__header {
  padding: 0;
}
.db-searcher .cs-input-group:focus-within {
  box-shadow: none !important;
}
.criteria-items {
  flex: 1;
  overflow-y: auto;
  margin: 1rem 0.5rem;
  padding-right: 0.5rem;
  border-radius: 0.5rem;
}
.criteria-item {
  padding: 0.5rem;
  margin-bottom: 1rem;
  background: lemonchiffon;
  border: 1px solid #999;
  border-radius: 0.6rem;
}
.criteria-item .absolute-bottom-right {
  bottom: -7px;
  right: -12px;
}
.criteria-item select {
  font-size: 0.8rem;
}
.cvm-extracted-keywords .criteria-item {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.cvm-extracted-keywords .criteria-item label,
.cvm-extracted-keywords .keyword-criteria-item .keyword-any-all {
  display: none;
}
.cvm-extracted-keywords .item-editor-outer-container {
  min-height: 180px !important;
  max-height: 180px !important;
}
.criteria-item label {
  font-size: 0.8rem;
}
.criteria-item .cs-label {
  color: #06f !important;
  font-size: 0.9rem;
}
.field-criteria-item {
  border-bottom: 1px solid #ccc;
  padding: 0.5rem;
  margin: 0.5rem 1rem 0.5rem 0;
}
.field-criteria-item__ops {
  width: 120px;
}
.field-criteria-item input,
.criteria-radial-search .radialdistance,
.criteria-radial-search .radialplace,
.criteria-item textarea {
  background-color: aliceblue;
}
.field-criteria-item__delete {
  display: inline-block;
  padding: 5px 10px;
  color: #777;
}
.criteria-radial-search select {
  border: 1px solid #aaa !important;
  max-width: 123px;
  background-color: #eee;
}
.criteria-radial-search label {
  font-weight: bold;
}
.criteria-item .radialdistance {
  width: 4rem;
  /* border: 1px solid #aaa; */
  margin: 0 0.5rem;
  font-size: 0.9rem;
  padding: 3px 5px;
}
.criteria-item .radialtype {
  margin: 0 0.5rem;
  width: 8rem;
}
.finder-avail-canmusthave {
  flex: 0 0 100px;
  margin-left: 0.5rem;
}
.finder-avail-canmusthave label {
  font-size: 0.8rem !important;
}
.activeitems.show > .cs-list {
  max-height: 1000px;
  transition: max-height 2s ease;
}
.activeitems > .cs-list {
  max-height: 0;
  overflow: hidden;
}
.activeitems,
.selecteditems,
.workareas {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem !important;
  user-select: none;
}
.workareas {
  flex: 0 0 auto;
  overflow: hidden;
  max-height: 50%;
}
.activeitems {
  flex: 1;
  overflow: hidden;
}
.workareas .cs-list,
.activeitems .cs-list {
  flex: 1 !important;
}
.workareas .cs-toolbar,
.activeitems .cs-toolbar {
  min-height: auto !important;
  padding: 6px;
}
.workareas .cs-toolbar__item,
.activeitems .cs-toolbar__item,
.workareas .cs-toolbar__item,
.selecteditems .cs-toolbar__item {
  padding: 0;
}
.selecteditems.cs-list,
.activeitems .cs-list {
  background: #FFF;
}
.workareas .cs-item__header,
.selecteditems .cs-item__header,
.activeitems .cs-item__header {
  margin-bottom: 0;
}
.activeitems-company {
  margin-left: 0.5rem;
  padding: 2px 5px;
  font-size: 0.8rem;
  background-color: #FFF;
  color: #000;
  border-radius: 3px;
  border: 1px solid #777;
  margin-left: 0;
}
/*
.row values for label+texarea 

flex: 1;
align-items: unset;
width: 100%;
*/
/* --------------- cs-grid  ---------------- */
.gwrapper {
  flex: 1 0  auto;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  font-size: 0.9rem;
  min-width: 0;
  max-height: 100%;
  overflow: hidden;
  overflow-y: auto;
}
.gwrapper > .row {
  width: 100%;
  max-width: 100%;
  padding-bottom: 6px;
}
.gwrapper .cs-input-group,
.gwrapper > .row .col {
  flex: 1 0 auto;
  max-width: 100%;
}
.gwrapper .cs-input-group {
  flex: 1 1 auto;
}
.grow,
.row {
  flex: 0;
  display: flex;
  flex-direction: row;
  /* justify-content: space-between;   */
  align-items: center;
  min-width: 0;
  /* overflow: hidden; */
}
.row {
  padding-bottom: 0.25rem;
}
.gcol,
.col {
  flex: 1 0  auto;
  /* 1 0  auto for safari bug */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  /* 0 for 'non-collapsing' bug */
  /* overflow: hidden; */
  margin-right: 0;
}
.row {
  align-items: center;
}
/* .col { 
  flex: 1 1  auto;   
} */
/* ------- MARGINS & PADDING -----------  */
.row:not(:last-child) {
  margin-bottom: 0.1rem;
}
.col:not(:last-child) {
  margin-right: 0.4rem;
}
.col > .row {
  margin-right: 0.4rem;
}
.row > .row {
  margin-bottom: 0.2rem;
  flex: 1;
}
.row > .row:not(:last-child) {
  padding-right: 0.4rem;
}
.col > .col:not(:last-child) {
  margin-right: 0.4rem;
  padding-bottom: 0.2rem;
}
.row.nobottommargin,
.row.nobottommargin .row {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.row.singlerow {
  justify-content: space-between;
  flex-wrap: wrap;
  padding-right: 0;
}
.row.singlerow > .row {
  padding-bottom: 0;
}
.row.singlerow > .col {
  padding-right: 0;
  flex: 0 0 auto;
}
.md-wrap {
  flex-wrap: wrap;
}
/* .row { padding-bottom: 0.5rem; }
.col { padding-right: 0.4rem; } */
/* legends */
.grow.show-legend,
.grow.show-legend-pad,
.row.show-legend,
.row.show-legend-pad,
.gcol.show-legend,
.gcol.show-legend-pad,
.col.show-legend,
.col.show-legend-pad {
  position: relative !important;
  overflow: visible;
  margin-top: 0.75rem !important;
  padding-top: 2rem !important;
}
.col.data-entry cs-label {
  min-width: 6rem;
  text-align: right;
  margin-right: 0.5rem;
}
.row > .row > .cs-label,
.col > .row > .cs-label {
  min-width: 6rem;
  text-align: right;
}
.col.textarea {
  flex: 1;
  align-self: stretch;
}
.col.textarea .row {
  height: 100%;
}
.col.textarea .row textarea {
  height: 100%;
  overflow-x: auto;
}
.col.textarea .row .cs-label {
  align-self: flex-start;
  min-width: 0;
}
.col.small-labels .cs-label {
  min-width: 4rem;
}
body.example * {
  border: 1px solid #ccc;
}
/* ------- DATA TYPES -----------  */
.col.number {
  flex: 0 0 auto;
  width: 120px;
}
.col.number-small {
  flex: 0 0 auto;
  width: 50px;
}
.col.date,
.col.date > .cs-input-group,
.cs-input-group.date {
  flex: 0 0 auto;
  width: 140px;
}
.col.datetime {
  flex: 0 0 auto;
  width: 240px;
}
.row.bulist,
.col.bulist,
.row.userlist,
.col.userlist {
  flex: 0 0 auto;
  width: 140px;
}
.col.telno,
.col.telno > .cs-input-group,
.cs-input-group.telno {
  /*   flex: 0 0 150px; */
  flex: 0 0 auto;
  width: 180px;
}
.col.postalcode,
.col.postalcode > .cs-input-group,
.cs-input-group.postalcode {
  /*   flex: 0 0 150px; */
  flex: 0 0 auto;
  width: 120px;
}
.col.address,
.col.address > .cs-input-group,
.cs-input-group.address {
  /*   flex: 0 0 150px; */
  width: unset;
  max-width: 350px;
}
.col.email,
.col.email > .cs-input-group,
.cs-input-group.email {
  /*   flex: 0 0 150px; */
  width: 300px;
  max-width: 300px;
}
.col.companyname,
.col.companyname > .cs-input-group,
.cs-input-group.companyname {
  /*   flex: 0 0 150px; */
  width: 340px;
  max-width: 340px;
}
.col.url,
.col.url > .cs-input-group,
.cs-input-group.url {
  /*   flex: 0 0 150px; */
  width: 200px;
  max-width: 200px;
}
.col.dates-only {
  flex: 0 0 auto;
  border: 1px solid #fff;
  padding: 1rem;
  border-radius: 0.5rem;
}
.col.dates-only input {
  width: 120px;
}
.shepherd-button {
  background: #3288e6;
  border: 0;
  border-radius: 3px;
  color: hsla(0, 0%, 100%, 0.75);
  cursor: pointer;
  margin-right: 0.5rem;
  padding: 0.5rem 1.5rem;
  transition: all 0.5s ease;
}
.shepherd-button:not(:disabled):hover {
  background: #196fcc;
  color: hsla(0, 0%, 100%, 0.75);
}
.shepherd-button.shepherd-button-secondary {
  background: #f1f2f3;
  color: rgba(0, 0, 0, 0.75);
}
.shepherd-button.shepherd-button-secondary:not(:disabled):hover {
  background: #d6d9db;
  color: rgba(0, 0, 0, 0.75);
}
.shepherd-button:disabled {
  cursor: not-allowed;
}
.shepherd-footer {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  display: flex;
  justify-content: flex-end;
  padding: 0 0.75rem 0.75rem;
}
.shepherd-footer .shepherd-button:last-child {
  margin-right: 0;
}
.shepherd-cancel-icon {
  background: transparent;
  border: none;
  color: hsla(0, 0%, 50.2%, 0.75);
  cursor: pointer;
  font-size: 2em;
  font-weight: 400;
  margin: 0;
  padding: 0;
  transition: color 0.5s ease;
}
.shepherd-cancel-icon:hover {
  color: rgba(0, 0, 0, 0.75);
}
.shepherd-has-title .shepherd-content .shepherd-cancel-icon {
  color: hsla(0, 0%, 50.2%, 0.75);
}
.shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover {
  color: rgba(0, 0, 0, 0.75);
}
.shepherd-title {
  color: rgba(0, 0, 0, 0.75);
  display: flex;
  flex: 1 0 auto;
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
  padding: 0;
}
.shepherd-header {
  align-items: center;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: flex;
  justify-content: flex-end;
  line-height: 2em;
  padding: 0.75rem 0.75rem 0;
}
.shepherd-has-title .shepherd-content .shepherd-header {
  background: #e6e6e6;
  padding: 1em;
}
.shepherd-text {
  color: rgba(0, 0, 0, 0.75);
  font-size: 1rem;
  line-height: 1.3em;
  padding: 0.75em;
}
.shepherd-text p {
  margin-top: 0;
}
.shepherd-text p:last-child {
  margin-bottom: 0;
}
.shepherd-content {
  border-radius: 5px;
  outline: none;
  padding: 0;
}
.shepherd-element {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  max-width: 400px;
  opacity: 0;
  outline: none;
  transition: opacity 0.3s, visibility 0.3s;
  visibility: hidden;
  width: 100%;
  z-index: 99999;
}
.shepherd-enabled.shepherd-element {
  opacity: 1;
  visibility: visible;
}
.shepherd-element[data-popper-reference-hidden]:not(.shepherd-centered) {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.shepherd-element,
.shepherd-element *,
.shepherd-element :after,
.shepherd-element :before {
  box-sizing: border-box;
}
.shepherd-arrow,
.shepherd-arrow:before {
  height: 16px;
  position: absolute;
  width: 16px;
  z-index: -1;
}
.shepherd-arrow:before {
  background: #fff;
  content: "";
  transform: rotate(45deg);
}
.shepherd-element[data-popper-placement^=top] > .shepherd-arrow {
  bottom: -8px;
}
.shepherd-element[data-popper-placement^=bottom] > .shepherd-arrow {
  top: -8px;
}
.shepherd-element[data-popper-placement^=left] > .shepherd-arrow {
  right: -8px;
}
.shepherd-element[data-popper-placement^=right] > .shepherd-arrow {
  left: -8px;
}
.shepherd-element.shepherd-centered > .shepherd-arrow {
  opacity: 0;
}
.shepherd-element.shepherd-has-title[data-popper-placement^=bottom] > .shepherd-arrow:before {
  background-color: #e6e6e6;
}
.shepherd-target-click-disabled.shepherd-enabled.shepherd-target,
.shepherd-target-click-disabled.shepherd-enabled.shepherd-target * {
  pointer-events: none;
}
.shepherd-modal-overlay-container {
  height: 0;
  left: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  top: 0;
  transition: all 0.3s ease-out, height 0ms 0.3s, opacity 0.3s 0ms;
  width: 100vw;
  z-index: 9997;
}
.shepherd-modal-overlay-container.shepherd-modal-is-visible {
  height: 100vh;
  opacity: 0.5;
  transition: all 0.3s ease-out, height 0s 0s, opacity 0.3s 0s;
}
.shepherd-modal-overlay-container.shepherd-modal-is-visible path {
  pointer-events: all;
}
.shepherd-element {
  filter: drop-shadow(2px 4px 6px #333);
}
.shepherd-has-title .shepherd-content .shepherd-header {
  background: #e6e6e6;
  padding: 0.5rem 1rem;
}
.shepherd-title {
  font-weight: bold;
  font-size: 1.2rem;
}
.shepherd-button {
  filter: drop-shadow(2px 2px 2px #777);
}
/* TC CHANGES */
.shepherd-element {
  filter: drop-shadow(2px 4px 3px #777);
  border-radius: 16px;
}
.shepherd-header {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.shepherd-footer {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.shepherd-has-title .shepherd-content .shepherd-header {
  background: #e6e6e6;
  padding: 0.5rem 1rem;
}
.shepherd-title {
  font-weight: bold;
}
.shepherd-button {
  filter: drop-shadow(1px 1px 2px #555);
}
.shepherd-text {
  margin: 1rem 1rem 0 1rem !important;
}
.shepherd-text ul,
.shepherd-text ol {
  padding-left: 2rem;
}
.shepherd-text ul {
  list-style-type: disc;
}
.cs-tour li.cs-menu__item {
  font-size: 1.1rem;
}
.cs-tour i {
  font-size: 1.2rem;
  padding: 0.6rem;
}
.cs-tour i.cs-menu__icon.icm-user.bgcol.u-drop-shadow {
  font-size: 1.5rem;
  padding: 0.5rem;
}
.hilite-container,
.hilite-container textarea,
.backdrop {
  width: 100%;
  height: 100%;
}
.hilite-container {
  display: block;
  margin: 0 auto;
  transform: translateZ(0);
  -webkit-text-size-adjust: none;
}
.hilite-container textarea,
.highlighter {
  padding: 10px !important;
  /* font: 20px/28px 'Open Sans', sans-serif; */
  font: 16px/22px 'Open Sans', sans-serif;
  letter-spacing: 1px;
}
.backdrop,
.hilite-container textarea {
  position: absolute;
  margin: 0;
  overflow: auto;
  border-radius: 0;
  transition: transform 1s;
}
.backdrop {
  z-index: 1;
  pointer-events: none;
  background-color: #fff;
}
.hilite-container textarea {
  display: block;
  z-index: 2;
  resize: none;
  color: #444;
  background-color: transparent;
}
.highlighter {
  white-space: pre-wrap;
  word-wrap: break-word;
  color: transparent;
}
.hilite-container mark {
  border-radius: 3px;
  color: transparent;
  background-color: lightgreen !important;
  /* border: 1px dotted #555; */
}
.hilite-container button {
  display: block;
  width: 300px;
  margin: 30px auto 0;
  padding: 10px;
  border: none;
  border-radius: 6px;
  font: 18px 'Opens Sans', sans-serif;
  letter-spacing: 1px;
  appearance: none;
  cursor: pointer;
  color: #fff;
  background-color: #74637f;
}
.perspective .backdrop {
  transform: perspective(1500px) translateX(-125px) rotateY(45deg) scale(0.9);
}
.perspective textarea {
  transform: perspective(1500px) translateX(155px) rotateY(45deg) scale(1.1);
}
.hilite-container textarea:focus,
.hilite-container button.hilite:focus {
  outline: none;
  box-shadow: 0 0 0 2px #c6aada;
}
.item-editor-outer-container {
  flex: 1;
  display: flex;
  position: relative;
  min-height: 32px;
  max-height: 72px;
}
.item-editor-outer-container.auto {
  flex: 0 0 auto;
}
.item-editor-outer-container.isediting {
  padding-bottom: 30px;
  min-height: 70px;
  max-height: 102px;
}
.item-editor-container {
  flex: 1;
  order: 2;
  display: flex;
  flex-wrap: wrap;
  justify-items: start;
  align-items: start;
  align-content: start;
  font-size: 0.8rem;
  padding: 0;
  overflow: hidden;
  overflow-y: auto;
}
.item-editor-outer-container .cs-autocomplete {
  position: absolute !important;
  flex: 0 0 auto;
  display: flex;
  bottom: 0;
  left: 0px;
  right: 0x;
  width: 100%;
  margin: 0 0.5rem 0 0;
  border-radius: 3px;
  border-top: 2px solid #ccc;
  background-color: aliceblue;
}
.item-editor-outer-container.showmorebutton .item-editor-container {
  padding-right: 46px;
}
.item-editor-more-button {
  flex: 0 0 auto;
  margin-left: auto;
  justify-content: flex-end;
  order: 99999999;
}
.item-editor-more-button .cs-toolbar__item {
  padding: 0 !important;
}
.item-editor-outer-container .cs-autocomplete input {
  flex: 1;
  padding: 5px;
  background-color: aliceblue;
}
.item-editor-container .item {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  height: 1.4rem;
  margin: 3px;
  font-size: 0.7rem;
  border-radius: 290486px;
  border: 2px solid transparent;
  box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.35rem 0.5rem;
}
.item-editor-outer-container.isediting .item {
  padding-right: 0.2rem;
}
.item-editor-container .man-item {
  text-transform: uppercase;
}
.item-editor-container .item0 {
  background-color: lightgrey;
  color: #000;
}
.item-editor-container .item1 {
  background-color: lightgreen;
  color: #000;
}
.item-editor-container .item2 {
  background-color: orange;
}
.item-editor-container .item3 {
  background-color: moccasin;
  color: #000;
}
.item-editor-container .item4 {
  background-color: #3273dc;
  color: #eee;
}
.item-editor-container .item5 {
  background-color: coral;
}
.item-editor-container .item:focus {
  outline: none;
  border-radius: 290486px;
  box-shadow: 0 0 2px 2px #06f;
}
.item-editor-container .item-cross {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  padding: 0.5rem;
  padding-top: 0.4rem;
  font-size: 1.5rem;
  line-height: 1;
  border-radius: 50%;
  background: navy;
  background: #fff;
  color: #000;
  height: 1rem;
  width: 1rem;
  height: 1.2rem;
  width: 1.2rem;
  border: 1px solid #aaa;
}
.item-editor-container .item-cross:hover {
  cursor: pointer;
  background-color: #555;
  color: #FFF;
}
.recipient-container .item1,
.recipient-container .item2,
.recipient-container .item3,
.recipient-container .item4,
.recipient-container .item5 {
  color: #FFF;
  background-color: moccasin;
  color: #000;
}
.item.recip.blocked {
  background-color: #999 !important;
  /* color: #FFF !important; */
  text-decoration: line-through;
}
.item-editor-container .item-icon {
  margin-right: 0.5rem;
}
.item-editor-container .item.recip,
.item-editor-container .item.sys-attachments,
.item-editor-container .item.normal-attachments {
  padding: 0.35rem 0.1rem 0.35rem 0.5rem;
}
.itemlist-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-content: start;
  overflow-y: auto;
  margin-top: 0;
  font-size: 0.8rem;
  width: 100%;
}
.itemlist-wrapper.bigborder {
  border: 0.5rem solid #ccc;
}
.itemlist-wrapper.transborder {
  border: 0.5rem solid transparent;
}
.itemlist-item {
  flex: 0 0 auto !important;
  display: flex;
  flex-direction: row;
  padding: 5px;
  width: 100%;
}
.itemlist-header {
  flex: 1;
  display: flex;
  max-height: 50px;
  width: 100%;
  align-items: flex-end;
  border-bottom: 1px solid #999;
}
.itemlist-day-blank,
.itemlist-day {
  flex: 0 1 auto;
  min-width: 50px;
  max-width: 50px;
  padding: 2px 5px;
  margin-right: 5px;
  font-size: 0.8rem;
  font-weight: normal;
  text-align: center;
  border-radius: 3px;
}
.itemlist-day-blank {
  background-color: transparent !important;
}
.app-tempbooking_list {
  background-color: #fff !important;
}
.bookinglist-candidate span.itemlist-status {
  padding: 0 2px;
  margin-left: 0.5rem;
  font-size: 0.8rem;
}
.booking-list .itemlist-day {
  background-color: #ddd;
  color: #000;
  cursor: pointer;
}
.booking-list .itemlist-day.filled {
  background-color: green;
  color: #FFF;
}
.booking-list .itemlist-day.waiting {
  background-color: orange;
  color: #FFF;
}
.itemlist-header .itemlist-day {
  background-color: transparent !important;
  color: #000;
  font-weight: bold;
  cursor: default;
}
.booking-shifts-header,
.booking-shifts {
  margin-left: auto;
  display: flex;
  flex-direction: column;
}
.booking-shifts-header {
  flex-direction: row;
}
.shift-detail,
.shift-stats {
  display: flex;
  flex-direction: row;
}
.shift-stats {
  justify-content: center;
  padding: 6px;
}
.shift-detail .itemlist-day {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  border: 1px solid transparent;
}
.shift-detail .itemlist-day:hover {
  border: 1px inset #ddd;
  box-shadow: none;
}
.shift-detail .itemlist-day.blank {
  box-shadow: none;
}
.shift-detail .itemlist-day.selected {
  background-color: dodgerblue;
}
.booking-candidates-wrapper {
  min-height: 50%;
}
.bookinglist-candidate-line2 {
  margin-left: 3rem;
}
.itemlist-stat {
  flex: 0 1 auto;
  min-width: 50px;
  padding: 2px 5px;
  margin-right: 3px;
  font-size: 0.8rem;
  font-weight: normal;
  text-align: center;
}
.itemlist-day.Added,
.itemlist-stat.shifts_total {
  background-color: cornsilk;
  color: #000;
}
.legend-btn.Available,
.itemlist-day.Available {
  background-color: lightyellow;
  color: #000;
}
.legend-btn.Confirmed,
.itemlist-day.Confirmed,
.itemlist-stat.shifts_confirmed {
  background-color: mediumseagreen;
  color: #fff;
}
.itemlist-stat.shifts_unfilled {
  background-color: orangered;
  color: #fff;
}
.legend-btn.Waiting,
.itemlist-day.Waiting,
.itemlist-stat.shifts_waiting {
  background-color: orange;
  color: #FFF;
}
.legend-btn.Noshow,
.itemlist-day.Noshow,
.itemlist-stat.shifts_noshow {
  background-color: #777;
  color: #fff;
}
.shift-stats .itemlist-stat {
  flex: 1;
  min-width: 50px;
}
.booking-shifts-header .itemlist-day.selected {
  background-color: #333 !important;
  color: #fff;
}
.itemlist {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 0.8rem !important;
  /* padding: 1rem; */
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
}
.itemlist {
  flex: 0;
  width: 100%;
  align-items: flex-start;
  font-size: 0.9rem;
  padding: 0.5rem;
  border-bottom: 1px solid #ccc;
  user-select: none;
  min-width: 80px;
  max-height: 140px;
}
.itemlist-options-panel {
  height: 100%;
  max-height: 100%;
  min-width: 220px;
  font-size: 0.8rem;
  padding: 1rem;
  overflow-y: auto;
  padding: 0.3rem;
  padding: 0;
  border-right: 0.5rem solid #ccc;
}
.shortlist-stages .cs-item {
  padding: 0.1rem !important;
}
.itemlist-summary {
  flex: 0 0 auto !important;
  display: flex;
  align-items: center;
}
.itemlist.grid .itemlist-summary {
  flex-direction: column;
}
.itemlist-icon {
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
  min-width: 2rem;
  padding: 0;
  font-size: 1.2rem;
  /* border-radius: 50%; */
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.5rem;
  /* background: cornflowerblue; */
  background: transparent;
  border-radius: 50%;
}
.itemlist__header .itemlist-icon {
  height: auto;
  color: #999;
}
.itemlist__header .itemlist-icon {
  color: #FFF;
  background-color: transparent;
}
.itemlist-id {
  min-width: 50px;
  max-width: 50px;
  text-overflow: ellipsis;
}
.itemlist-folder {
  min-width: 150px;
  max-width: 150px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.itemlist-name {
  width: 180px;
  min-width: 150px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.itemlist-number {
  min-width: 80px;
  max-width: 80px;
  text-align: center;
}
.itemlist-type {
  min-width: 100px;
  max-width: 100px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.itemlist-lastmodified {
  min-width: 150px;
  max-width: 150px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.itemlist-thumb {
  min-width: 150px;
  max-width: 150px;
  flex: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 3rem;
  padding-right: 3rem;
}
.itemlist__header .itemlist-name {
  color: #FFF;
  text-decoration: none;
}
.itemlist-folder i.icm-folder-hascontent {
  font-size: 1.1rem;
  padding-right: 0.5rem;
  cursor: pointer;
  color: #999 !important;
  text-shadow: 1px 1px 1px #333;
}
.canmodify .itemlist-thumb {
  padding-right: 6rem;
}
.itemlist-notes {
  width: 100%;
  display: flex;
  padding-left: 3rem;
  padding-right: 3rem;
  flex: 1;
}
.itemlist-thumb img {
  max-width: 100px;
  max-height: 100px;
  min-height: 100px;
  min-width: 100px;
}
.upload-btn {
  max-width: 100px;
  align-self: center;
}
.itemdetail-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #FFF;
  border: 10px solid #777;
}
.itemlist-wrapper.grid {
  flex-wrap: wrap;
  flex-direction: row;
  min-width: 100px;
  background-color: transparent;
}
.itemlist.grid {
  flex: 1;
  min-width: 200px;
  min-height: 70px;
  overflow: hidden;
  margin: 0.5rem;
  border-radius: 0.3rem;
  border: 1px solid #777;
  background-color: #FFF;
  box-shadow: 0 2px 3px 0px #ccc;
}
.itemlist.grid.active {
  background-color: #6da0f9;
  border: 1px solid #e8f0fe;
  color: #fff !important;
}
.itemlist.active .itemlist-name,
.itemlist.active .itemlist-name a {
  color: #FFF;
}
.cs-item.active a {
  color: #06ed !important;
}
.itemlist.grid .itemlist-summary {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.itemlist.grid .itemlist-name {
  color: #06ed;
}
.itemlist.grid .itemlist-folder,
.itemlist.grid .itemlist-name {
  min-width: initial;
  max-width: initial;
  text-align: center;
}
.itemlist.grid .itemlist-number {
  display: none;
}
/* --------------- cs-icomoon  ----------------*/
@font-face {
  font-family: 'concord';
  src: url('fonts/concord.woff2') format('woff2');
  /* Super Modern Browsers */
  font-weight: normal;
  font-style: normal;
}
i[class*="icm"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'concord' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
i.icm-blank {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  max-width: 28px;
  max-height: 28px;
}
i.cs-item__icon--blank {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px;
  min-height: 30px;
  max-width: 30px;
  max-height: 30px;
  padding: 5px !important;
}
.icm-lg {
  font-size: 1.33333333rem;
  line-height: 0.75rem;
  vertical-align: -15%;
}
.icm-1-2x {
  font-size: 1.5rem;
}
.icm-2x {
  font-size: 2rem;
}
.icm-3x {
  font-size: 3rem;
}
.icm-4x {
  font-size: 4rem;
}
.icm-5x {
  font-size: 5rem;
}
.icm-fw {
  width: 1.28571429rem;
  text-align: center;
}
.icm-shadow {
  text-shadow: 1px 1px 1px #555;
}
.icm-spin {
  animation: spin 2s infinite linear;
}
.icm-go-1:before {
  content: "\e90b";
}
.icm-go-1-blue .path1:before {
  content: "\e907";
  color: #6495ed;
}
.icm-go-1-blue .path2:before {
  content: "\e908";
  margin-left: -1em;
  color: #000000;
}
.icm-go-1-blue .path3:before {
  content: "\e909";
  margin-left: -1em;
  color: #6495ed;
}
.icm-go-1-blue .path4:before {
  content: "\e90a";
  margin-left: -1em;
  color: #ffffff;
}
.icm-add:before,
.icm-new:before {
  content: "\e377";
}
.icm-address-book:before {
  content: "\ea2c";
}
.icm-admin:before,
.icm-76:before {
  content: "\ea84";
}
.icm-aim:before,
.icm-scan:before,
.icm-tools:before,
.icm-tempdesk:before {
  content: "\ec2e";
}
.icm-alert-ringing:before,
.icm-has-notifications:before,
.icm-reminder:before {
  content: "\ea5c";
}
.icm-alert:before,
.icm-alertman:before {
  content: "\ea5b";
}
.icm-alphabetic1:before {
  content: "\e918";
}
.icm-alphabetic:before {
  content: "\e917";
}
.icm-apps:before {
  content: "\e623";
}
.icm-archive:before,
.icm-89:before {
  content: "\e997";
}
.icm-armchair:before {
  content: "\e2fc";
}
.icm-arrange1:before {
  content: "\e918";
}
.icm-arrange:before {
  content: "\e917";
}
.icm-timeline-arrow:before,
.icm-inbound:before {
  content: "\ee29";
}
.icm-outbound:before {
  content: "\ee29";
}
.icm-outbound {
  transform: rotate(180deg);
}
.icm-arrowleft:before {
  content: "\edc9";
}
.icm-arrowright:before {
  content: "\edbe";
}
.icm-at:before,
i.icm-21:before,
i.icm-13:before,
.icm-email:before,
.icm-bulkemail:before {
  content: "\ea30";
}
.icm-attachment:before {
  content: "\e9d3";
}
.icm-backward:before {
  content: "\ed96";
}
.icm-bin:before {
  content: "\ebfe";
}
.icm-blocked:before {
  content: "\ed65";
}
.icm-bold:before {
  content: "\eea0";
}
.icm-book:before,
i.icm-8:before,
i.icm-54:before,
.icm-tempbooking:before,
.icm-booking:before {
  content: "\e635";
}
.icm-bookmark:before {
  content: "\e994";
}
.icm-bubble:before,
i.icm-55:before,
.icm-message:before,
.icm-messageman:before {
  content: "\eacf";
}
.icm-cal:before,
i.icm-52:before,
.icm-date:before,
.icm-event:before,
.icm-cal-month:before {
  content: "\ea10";
}
.icm-cal-day:before {
  content: "\ea6b";
}
.icm-cal-empty:before,
.icm-cal-mini:before {
  content: "\ea67";
}
.icm-cal-free:before {
  content: "\ea62";
}
.icm-cal-today:before,
.icm-meeting:before {
  content: "\e633";
}
.icm-cal-week:before {
  content: "\ea68";
}
.icm-callback:before,
i.icm-16:before,
.icm-todo-other:before {
  content: "\e91a";
}
.icm-cancel:before,
.icm-cross:before,
.icm-not-suitable:before,
.icm-unregistered:before {
  content: "\e36c";
}
.icm-cart:before,
.icm-checkout:before {
  content: "\ea02";
}
.icm-cender:before {
  content: "\eb9f";
}
.icm-certificate:before,
i.icm-18:before,
.icm-cv:before {
  content: "\e9ee";
}
.icm-chair:before,
i.icm-7:before,
.icm-vacancy:before,
.icm-vacancy-centre:before,
i.icm-88:before,
.icm-applicant:before {
  content: "\e913";
}
.icm-chart-area:before {
  content: "\eb8d";
}
.icm-chart-bar-mixed:before {
  content: "\eb8a";
}
.icm-chart-donut:before {
  content: "\e97e";
}
.icm-chart-guage:before {
  content: "\ebe2";
}
.icm-chart-line:before,
.icm-c360:before {
  content: "\eb85";
}
.icm-chart-pie:before {
  content: "\eb80";
}
.icm-chart-bar:before {
  content: "\e90e";
}
.icm-chart-horz:before {
  content: "\e90f";
}
.icm-chart-scatter:before {
  content: "\e910";
}
.icm-chart-radar:before {
  content: "\e911";
}
.icm-chart-polar:before {
  content: "\e912";
}
.icm-chat-connect:before {
  content: "\eace";
}
.icm-chat-disconnected:before {
  content: "\ead3";
}
.icm-chat-msg:before,
.icm-freddy:before {
  content: "\ead5";
}
.icm-chat-typing:before,
.icm-chatty:before,
.icm-chats-list:before,
.icm-chat:before,
i.icm-56:before,
.icm-messagingapp:before {
  content: "\ead4";
}
.icm-chk-checked:before {
  content: "\ee62";
}
.icm-chk-unchecked:before {
  content: "\e430";
}
.icm-circle:before {
  content: "\e43b";
}
.icm-clear-formatting:before {
  content: "\eeb2";
}
.icm-clipboard-empty:before {
  content: "\ec51";
}
.icm-clipboard:before {
  content: "\ec52";
}
.icm-clock:before,
.icm-time:before,
.icm-history:before {
  content: "\e94f";
}
.icm-close:before {
  content: "\e37e";
}
.icm-cloud-check:before {
  content: "\ec77";
}
.icm-cloud-download:before {
  content: "\ec78";
}
.icm-cloud-upload:before {
  content: "\ec79";
}
.icm-cloud:before {
  content: "\ec76";
}
.icm-club:before,
.icm-club-centre:before {
  content: "\e970";
}
.icm-coach:before,
i.icm-72:before {
  content: "\ec0e";
}
.icm-cog:before,
.icm-settings:before,
.icm-user-settings:before,
.icm-system-settings:before {
  content: "\e62e";
}
.icm-coin-pound:before {
  content: "\ea11";
}
.icm-contact-disabled:before {
  content: "\eb08";
}
.icm-contact:before,
i.icm-2:before {
  content: "\e606";
}
.icm-companycontact:before,
i.icm-6:before,
.icm-client:before {
  content: "\e91d";
}
.icm-copy:before {
  content: "\e931";
}
.icm-cut:before {
  content: "\ea5d";
}
.icm-dashboard:before {
  content: "\ebe4";
}
.icm-delete:before,
.icm-removed:before {
  content: "\e378";
}
.icm-diamond:before,
.icm-system:before,
.icm-sysman:before {
  content: "\ebaa";
}
.icm-direction-ltr:before {
  content: "\eeb6";
}
.icm-direction-rtl:before {
  content: "\eeb7";
}
.icm-disk:before,
.icm-record:before {
  content: "\ea8e";
}
.icm-doc-excel:before {
  content: "\eade";
}
.icm-doc-image:before {
  content: "\e61e";
}
.icm-doc-html:before,
.icm-html-tags:before,
.icm-siccode:before,
i.icm-85:before {
  content: "\eecb";
}
.icm-doc-openoffice:before {
  content: "\eadf";
}
.icm-doc-pdf:before {
  content: "\eae0";
}
.icm-doc-plain:before,
.icm-keynotes:before,
.icm-view-notesonly:before {
  content: "\e62c";
}
.icm-doc-word:before {
  content: "\eae1";
}
.icm-doc-zip:before {
  content: "\e934";
}
.icm-dots-left:before,
.icm-stages:before {
  content: "\ed4c";
}
.icm-dots-right:before {
  content: "\e355";
}
.icm-down-big:before,
.icm-dropout:before,
.icm-down-bottom-right:before,
.icm-down-top-left:before {
  content: "\ee21";
}
.icm-down-small:before {
  content: "\edcb";
}
.icm-down:before {
  content: "\e387";
}
.icm-down-bottom-right {
  transform: rotate(315deg);
}
.icm-down-top-left {
  transform: rotate(135deg);
}
.icm-down-bottom-right:hover,
.icm-down-top-left:hover {
  color: orangered;
}
.icm-download-circle:before,
.icm-savesession:before {
  content: "\ec8f";
}
.icm-dropdownmenu:before,
.icm-filtermenu:before {
  content: "\ec6a";
}
.icm-edit:before,
.icm-emailcompose:before,
.icm-compose:before {
  content: "\e618";
}
.icm-enlarge:before {
  content: "\eb3f";
}
.icm-enlarge2:before,
.icm-maximise:before {
  content: "\eb3d";
}
.icm-enter:before {
  content: "\ed78";
}
.icm-exit:before {
  content: "\ed79";
}
.icm-facebook:before {
  content: "\e915";
}
.icm-filter:before {
  content: "\ee8a";
}
.icm-find:before,
.icm-finder:before {
  content: "\e60a";
}
.icm-finish:before {
  content: "\ec45";
}
.icm-fire:before,
.icm-caution:before,
.icm-pin:before,
.icm-activeitems:before {
  content: "\ebe6";
}
.icm-first1:before {
  content: "\ed94";
}
.icm-flag:before {
  content: "\e9d6";
}
.icm-folder-blank-empty:before {
  content: "\e9ec";
}
.icm-folder-blank-minus:before,
.icm-folder-delete:before {
  content: "\e9e5";
}
.icm-folder-blank-open:before,
.icm-folder-open:before {
  content: "\e9ed";
}
.icm-folder-blank-plus:before,
.icm-folder-add:before {
  content: "\e9e4";
}
.icm-folder-blank:before,
.icm-folder:before,
.icm-tab:before {
  content: "\e9e0";
}
.icm-folder-hascontent:before {
  content: "\e933";
}
.icm-font-size:before,
.icm-fts:before {
  content: "\ee9f";
}
.icm-font:before {
  content: "\ee8e";
}
.icm-formula:before {
  content: "\eea3";
}
.icm-forward:before {
  content: "\ed97";
}
.icm-freedom:before,
.icm-successful:before,
.icm-campaign:before,
i.icm-15:before {
  content: "\e63a";
}
.icm-glasses-sun:before,
.icm-view-hide:before {
  content: "\ec28";
}
.icm-glasses:before,
.icm-view:before,
.icm-view-show:before,
i.icm-86:before {
  content: "\ec27";
}
.icm-googlechrome:before,
.icm-google:before {
  content: "\e908";
  color: #4285f4;
}
.icm-googledrive:before {
  content: "\e909";
  color: #4285f4;
}
.icm-graduation:before,
.icm-student:before,
i.icm-73:before {
  content: "\e99b";
}
.icm-grid1:before {
  content: "\ec67";
}
.icm-grid:before {
  content: "\ec5e";
}
.icm-harmony:before,
.icm-siccode:before,
.icm-ai:before,
.icm-heart:before,
.icm-favourite:before {
  content: "\eced";
}
.icm-help:before {
  content: "\e9e6";
}
.icm-hierachy:before {
  content: "\e608";
}
.icm-home:before {
  content: "\e620";
}
.icm-inbox:before {
  content: "\ec7f";
}
.icm-indent-decrease:before {
  content: "\eec4";
}
.icm-indent-increase:before {
  content: "\eec5";
}
.icm-info:before,
.icm-information:before,
.icm-detail:before,
.icm-details:before,
.icm-profile:before {
  content: "\ed61";
}
.icm-inherit:before,
.icm-relation:before {
  content: "\ec65";
}
.icm-instagram:before {
  content: "\e916";
}
.icm-institution:before,
.icm-backoffice:before {
  content: "\e61c";
}
.icm-italic:before {
  content: "\eea4";
}
.icm-key-horz:before,
.icm-attributes:before,
.icm-keywords:before {
  content: "\eb50";
}
.icm-key:before {
  content: "\e992";
}
.icm-ladder:before,
i.icm-10:before,
.icm-candidate:before,
.icm-candidate-centre:before {
  content: "\e20f";
}
.icm-last1:before {
  content: "\ed99";
}
.icm-left-big:before,
.icm-back:before {
  content: "\ebe1";
}
.icm-left-small:before {
  content: "\edcd";
}
.icm-left:before {
  content: "\e388";
}
.icm-lightening:before,
.icm-actionman:before,
.icm-action:before,
.icm-actioncentre:before,
.icm-todo:before,
.icm-execute:before,
.icm-todoman:before {
  content: "\e28e";
}
.icm-link:before {
  content: "\e9d5";
}
.icm-linkedin:before {
  content: "\ef29";
}
.icm-list-bullet:before {
  content: "\ec5d";
}
.icm-list-manager:before {
  content: "\e62a";
}
.icm-list-numbered:before,
.icm-options:before {
  content: "\ec5c";
}
.icm-list:before,
i.icm-48:before,
.icm-lists:before {
  content: "\e62b";
}
.icm-loading-indicator:before {
  content: "\eb2b";
}
.icm-location:before,
.icm-map:before {
  content: "\e948";
}
.icm-lock:before,
.icm-supervisor:before {
  content: "\eb51";
}
.icm-login:before {
  content: "\e941";
}
.icm-logout:before {
  content: "\e940";
}
.icm-magazine:before,
i.icm-43:before,
.icm-template:before,
.icm-cv-formatted:before {
  content: "\e91b";
}
.icm-man-woman:before {
  content: "\e9e7";
}
.icm-hamburger:before {
  content: "\ec6f";
}
.icm-menu-modern:before {
  content: "\e944";
}
.icm-mic:before {
  content: "\e98e";
}
.icm-mic-off:before {
  content: "\e990";
}
.icm-mic-talk:before {
  content: "\e991";
}
.icm-mobile:before,
i.icm-39:before,
.icm-sms:before,
i.icm-81:before,
.icm-bulksms:before {
  content: "\e61a";
}
.icm-more-square:before {
  content: "\eafb";
}
.icm-more:before,
.icm-menu:before {
  content: "\ec5f";
}
.icm-menu {
  transform: rotate(90deg);
}
.icm-next:before {
  content: "\ed98";
}
.icm-notebook:before {
  content: "\ea2e";
}
.icm-note:before,
.icm-notes:before,
.icm-quicknote:before,
i.icm-29:before,
.icm-clear:before,
.icm-note-view:before,
.icm-not-yet-contacted:before,
.icm-suitable-not-interested:before,
.icm-suitable-unsure:before,
.icm-resourcer-unsure:before {
  content: "\e629";
}
.icm-notebook:before,
.icm-booking-centre:before {
  content: "\ea31";
}
.icm-office:before,
i.icm-3:before,
.icm-company:before,
.icm-company-centre:before {
  content: "\e00c";
}
.icm-one-finger-click:before,
.icm-87:before {
  content: "\e921";
}
.icm-org:before {
  content: "\e607";
}
.icm-organisation:before,
i.icm-84:before,
.icm-companies-house:before {
  content: "\e91c";
}
.icm-outbox:before {
  content: "\ec81";
}
.icm-outlook:before {
  content: "\e90a";
  color: #0072c6;
}
.icm-pagebreak-horz:before,
.icm-splitscreen-vert:before {
  content: "\eebd";
}
.icm-pagebreak-vert:before,
.icm-form:before,
.icm-splitscreen-horz:before {
  content: "\eebc";
}
.icm-paperplane:before,
.icm-send:before {
  content: "\ec0a";
}
.icm-paragraph-center:before {
  content: "\eec6";
}
.icm-paragraph-justify1:before {
  content: "\eec7";
}
.icm-paragraph-justify:before,
.icm-shortlist:before {
  content: "\eebb";
}
.icm-paragraph-left:before {
  content: "\eec8";
}
.icm-paragraph-right:before {
  content: "\eec9";
}
.icm-paragraph:before {
  content: "\eeb8";
}
.icm-paste:before {
  content: "\e932";
}
.icm-pencil:before {
  content: "\e91f";
}
.icm-people:before,
.icm-recipient:before,
.icm-user-list:before {
  content: "\e601";
}
.icm-personseated:before,
.icm-interview:before {
  content: "\e63b";
}
.icm-pin-small:before {
  content: "\e91e";
}
.icm-podium:before,
.icm-leader:before {
  content: "\eba1";
}
.icm-power:before {
  content: "\e902";
}
.icm-prev:before {
  content: "\ed95";
}
.icm-print:before {
  content: "\ea6a";
}
.icm-profile:before,
i.icm-20:before,
.icm-document:before {
  content: "\e99d";
}
.icm-pulse:before,
.icm-activity:before,
.icm-realtime:before {
  content: "\eb71";
}
.icm-pushpin:before {
  content: "\e949";
}
.icm-question:before {
  content: "\ed53";
}
.icm-quotes-left:before {
  content: "\eb1c";
}
.icm-loop2:before,
.icm-radial:before,
.icm-renewal:before,
i.icm-82:before {
  content: "\edab";
}
.icm-race:before {
  content: "\ec43";
}
.icm-radio-checked:before {
  content: "\e43c";
}
.icm-radio-unchecked:before {
  content: "\e43d";
}
.icm-rating:before,
.icm-approve:before {
  content: "\eba0";
}
.icm-redo:before {
  content: "\e967";
}
.icm-refresh:before,
.icm-renew:before,
.icm-reset:before,
.icm-reload:before,
.icm-validation-reset:before {
  content: "\e619";
}
.icm-review:before {
  content: "\eb3b";
}
.icm-right-big:before,
.icm-forward:before {
  content: "\ee1f";
}
.icm-right-small:before {
  content: "\edcc";
}
.icm-right:before {
  content: "\e615";
}
.icm-road:before,
.icm-track:before {
  content: "\ec11";
}
.icm-rocket:before {
  content: "\ebde";
}
.icm-rotate_180:before,
.icm-toggle-layout:before,
.icm-toggle-theme:before {
  content: "\e930";
}
.icm-run:before,
.icm-training:before,
.icm-athlete:before,
.icm-quickadd:before {
  content: "\e920";
}
.icm-sad:before {
  content: "\ed09";
}
.icm-save:before,
.icm-tick:before,
.icm-registered:before {
  content: "\e371";
}
.icm-schedule:before,
.icm-calendar:before,
.icm-cal-schedule:before,
.icm-task-meeting:before {
  content: "\ea60";
}
.icm-share:before {
  content: "\eede";
}
.icm-shield:before,
.icm-gdprmanager:before {
  content: "\ec36";
}
.icm-shop:before,
.icm-store:before {
  content: "\e9fd";
}
.icm-smile:before {
  content: "\ed05";
}
.icm-sort-alpha-asc:before {
  content: "\e918";
}
.icm-sort-alpha-desc:before {
  content: "\e917";
}
.icm-speech:before {
  content: "\eac5";
}
.icm-sphere:before,
.icm-frontdesk:before {
  content: "\ec92";
}
.icm-split:before {
  content: "\edb4";
}
.icm-stack-empty:before,
.icm-documenter:before,
.icm-docman:before,
.icm-contentmanager:before {
  content: "\ed3c";
}
.icm-stack-text:before,
i.icm-36:before,
.icm-report:before,
.icm-reports:before,
.icm-reporter:before {
  content: "\ed45";
}
.icm-stack2:before,
.icm-resource:before {
  content: "\e9d1";
}
.icm-stack:before,
.icm-documents:before {
  content: "\e9d4";
}
.icm-stack3:before,
.icm-compressed:before {
  content: "\e9d2";
}
.icm-star:before {
  content: "\ece0";
}
.icm-star-empty:before {
  content: "\ece1";
}
.icm-stars:before,
.icm-highlights:before {
  content: "\eba4";
}
.icm-start:before {
  content: "\ec44";
}
.icm-stats-growth:before,
.icm-stats:before,
.icm-stat:before {
  content: "\eb91";
}
.icm-stopwatch:before {
  content: "\e900";
}
.icm-strikethrough:before {
  content: "\eea5";
}
.icm-stripe:before,
.icm-90:before {
  content: "\e922";
  color: #635bff;
}
.icm-stripe.bgcol,
.icm-90.bgcol {
  background-color: #635bff;
}
.icm-stripe.bgcol:before,
.icm-90.bgcol:before {
  color: #fff;
}
.icm-subscript:before {
  content: "\eea9";
}
.icm-superscript:before {
  content: "\eea8";
}
.icm-switch1:before {
  content: "\ec4c";
}
.icm-switch:before,
.icm-change:before {
  content: "\edaa";
}
.icm-table1:before {
  content: "\eeb9";
}
.icm-table:before {
  content: "\eeb3";
}
.icm-tag:before {
  content: "\e9c8";
}
.icm-tags:before {
  content: "\e9c9";
}
.icm-target:before,
.icm-targets:before {
  content: "\e60b";
}
.icm-task:before,
i.icm-40:before,
.icm-todo-view:before {
  content: "\e9b9";
}
.icm-team:before,
.icm-online:before,
.icm-family:before {
  content: "\eb10";
}
.icm-telcall-left:before,
i.icm-42:before {
  content: "\e612";
}
.icm-telcall-right:before,
.icm-telcall:before {
  content: "\e614";
}
.icm-tempworker:before {
  content: "\e914";
}
.icm-text-color:before,
.icm-color-selector:before {
  content: "\eeab";
}
.icm-thumbs-down:before,
.icm-available-no:before {
  content: "\ecf5";
}
.icm-thumbs-up:before,
.icm-available-yes:before,
.icm-resourcer-select:before {
  content: "\ecf3";
}
.icm-todo-other:before {
  content: "\ec56";
}
.icm-toggle:before {
  content: "\e930";
}
.icm-tshirt:before {
  content: "\eb16";
}
.icm-tree5:before {
  content: "\ec65";
}
.icm-twins:before,
.icm-duplicate:before,
.icm-direct-message:before,
.icm-directmessage:before,
i.icm-57:before {
  content: "\e631";
}
.icm-twitter:before {
  content: "\ea92";
}
.icm-underline:before {
  content: "\eea1";
}
.icm-undo:before,
.icm-reply:before {
  content: "\e968";
}
.icm-unlink:before {
  content: "\ec9a";
}
.icm-unlock:before {
  content: "\e919";
}
.icm-up-big:before {
  content: "\ee1d";
}
.icm-up-small:before {
  content: "\edca";
}
.icm-up:before {
  content: "\eba3";
}
.icm-upload-circle:before,
.icm-loadsession:before {
  content: "\ec90";
}
.icm-upload:before,
.icm-load:before {
  content: "\ea89";
}
.icm-user-block:before {
  content: "\eafc";
}
.icm-user-lock:before {
  content: "\eafe";
}
.icm-user:before {
  content: "\eaf5";
}
.icm-user_wave:before {
  content: "\e901";
}
.icm-vcard:before,
.icm-ui:before {
  content: "\eb12";
}
.icm-video:before {
  content: "\e962";
}
.icm-whatsapp:before,
i.icm-53:before {
  content: "\eef3";
}
.icm-wizard:before,
.icm-advanced:before,
.icm-improved:before {
  content: "\eb6e";
}
.icm-workareas:before,
.icm-workarea:before {
  content: "\ec66";
}
.icm-world:before,
.icm-website:before {
  content: "\ec99";
}
.icm-user:before,
i.icm-1:before {
  content: "\e901";
}
.icm-bulkemail:before,
i.icm-13:before {
  color: crimson;
}
.icm-relation:before {
  transform: rotate(270deg);
  display: inline-block;
}
.icm-interview {
  padding: 5px 7px;
}
.icm-quicknote {
  color: red !important;
}
.icm-member:before,
i.icm-70:before {
  content: "\e920";
}
.icm-official:before,
i.icm-71:before {
  content: "\e900";
}
.icm-volunteer:before,
i.icm-74:before {
  content: "\e63a";
}
.icm-competition:before,
i.icm-77:before {
  content: "\eba1";
}
.icm-subscription:before,
i.icm-78:before {
  content: "\ea11";
}
.icm-payment:before,
i.icm-79:before {
  content: "\ea11";
}
.icm-po10:before {
  content: "\e90d";
}
.icm-c360:before {
  content: "\ec2e";
}
.icm-one-finger-click,
i.icm-87 {
  font-weight: bold !important;
  font-size: 1rem;
}
/* -------- LEGEND -------- */
.col.show-legend,
.col.show-legend-pad,
.row.show-legend,
.row.show-legend-pad {
  position: relative !important;
  margin-top: 0.75rem;
}
.row.collapse-show-legend,
.col.collapse-show-legend {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.row.collapse-show-legend *,
.col.collapse-show-legend * {
  opacity: 0;
  margin: 0 !important;
  pointer-events: none;
  max-height: 24px;
}
.row.collapse-show-legend > .cs-legend,
.col.collapse-show-legend > .cs-legend {
  opacity: 1;
  margin: unset;
  max-height: unset;
  pointer-events: unset;
}
.cs-legend {
  display: none;
  position: absolute;
  top: -0.75rem;
  left: 1rem;
  user-select: none;
  padding: 0.1rem 0.6rem 0.1rem 0.6rem;
  border-radius: 3px;
  font-weight: bold;
  font-size: 0.9rem;
  background: #FFF;
  border: 1px solid #777;
  cursor: pointer;
  white-space: nowrap;
}
.show-legend .cs-legend,
.show-legend-pad .cs-legend {
  display: inline-block;
}
.show-legend-pad {
  padding-top: 1.5rem !important;
}
.show-legend-pad-small,
.col.show-legend-pad-small,
.row.show-legend-pad-small {
  padding-top: 1.5rem !important;
}
.cs-legend.nopadding {
  left: 1rem;
}
.cs-legend.align-center {
  left: 50%;
  right: unset;
  transform: translatex(-50%);
}
.cs-legend.align-right {
  left: unset;
  right: 1rem;
}
.cs-legend.snug-left,
.cs-legend.snug-right {
  top: -1px;
  left: unset;
  right: unset;
  transform: unset;
  border-radius: 0;
}
.cs-legend.snug-left {
  left: -1px;
  border-top-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.cs-legend.snug-right {
  right: 0;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
}
.cs-legend.sharp-left,
.cs-legend.sharp-right {
  top: -1px;
  left: unset;
  right: unset;
  transform: unset;
  border-radius: 0;
  border: 0;
}
.cs-legend.sharp-left {
  left: -1px;
  padding: 0.1rem 0.1rem 0.1rem 0.5rem;
}
.cs-legend.sharp-right {
  right: 0;
  padding: 0.1rem 0.5rem 0.1rem 0.1rem;
}
.cs-legend.sharp-left:after,
.cs-legend.sharp-right:after {
  content: ' ';
  position: absolute;
  top: 0;
  bottom: -1px;
  width: 1.5rem;
}
.cs-legend.sharp-left:after {
  background-image: linear-gradient(135deg, #555 50%, transparent 50%);
  right: -1.5rem;
}
.cs-legend.sharp-right:after {
  background-image: linear-gradient(45deg, transparent 50%, #555 50%);
  left: -24px;
}
.cs-legend.level2 {
  font-size: 0.9rem;
  font-weight: normal;
  background: #555;
  /* border: 1px solid #000; */
  color: #FFF;
  /* position: initial; */
  padding-right: 1;
}
.cs-legend.level2.sharp-left.round {
  border-top-left-radius: 0.6rem;
}
.cs-legend.level2.sharp-right.round {
  border-top-right-radius: 0.6rem;
}
.cs-legend {
  z-index: 100;
}
.show-legend-pad {
  padding-top: 1.5rem !important;
}
/* --------------- cs-list  ----------------*/
.cs-list {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid transparent;
  background: #FFF;
}
.cs-list.simple .cs-item {
  padding: 5px;
  align-items: center;
  font-size: 0.9rem;
}
.cs-list.border-bottom-items .cs-item,
.cs-list.item-bordered .cs-item {
  border-bottom: 1px solid #ddd;
}
.cs-list.spaced .cs-item {
  padding: 10px 5px;
}
.cs-list.simple .cs-item__header {
  margin: 0;
}
.cs-email-folderlist .cs-item__icon {
  color: chocolate;
}
.cs-email-msglist .cs-item__icon {
  color: #0366d6;
}
.cs-item {
  display: flex;
  align-items: center;
  position: relative;
  padding: 3px;
  border: 1px solid transparent;
}
.cs-item.active {
  border: 1px solid #6da0f9;
  background-color: #e8f0fe;
  border-bottom: 1px solid #6da0f9 !important;
}
.cs-list.left-big-border .cs-item {
  border-left: 5px solid transparent;
}
.cs-list.left-big-border .cs-item.active {
  border-left: 5px solid cornflowerblue;
}
.cs-item.selected {
  background-color: #eee;
}
.cs-item:hover:not(.active) {
  background-color: #eee;
}
.cs-item:hover .cs-item__options {
  display: flex;
}
.cs-item__icon {
  border-radius: 50%;
  padding: 5px;
  position: relative;
  cursor: pointer;
  font-size: 1.1rem;
}
.itemlist-header__icon {
  width: 2rem;
  font-size: 1.2rem;
  /* border-radius: 50%; */
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.5rem;
  background: transparent;
  color: #fff !important;
}
.cs-list.icons-top .cs-item__icon {
  align-self: flex-start;
}
.cs-item__icon--big {
  font-size: 1.2rem;
}
.cs-item__icon--small {
  font-size: 1rem;
}
.cs-item__body {
  flex: 1;
  overflow: hidden;
  margin: 0 0 0 0.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  padding-bottom: 0.1rem;
}
.cs-item__header {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0 0 0.2rem 0;
  color: #111;
}
.cs-item__sub-header {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8rem;
  font-weight: 500;
  margin: 0 0 0.2rem 0;
  color: #06e;
}
.cs-item__body p {
  font-size: 0.8rem;
  margin-bottom: 0;
  text-overflow: ellipsis;
  color: #777;
}
.cs-item__body p.line3 {
  font-weight: bold;
  font-size: 0.9rem;
  color: #111;
}
.cs-item-topright,
.cs-item-bottomright {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 0.8rem;
  color: #333;
  text-align: right;
}
.cs-item-bottomright {
  top: unset;
  bottom: 5px;
}
.cs-item__options {
  position: absolute;
  display: none;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  background-color: transparent;
  right: 3px;
  font-size: 1rem;
}
.cs-item__options.at-left {
  right: unset;
  left: 0;
}
.cs-item__options.at-bottom {
  transform: translateY(-15%);
}
.cs-item__options i {
  padding: 5px;
  margin: 3px;
  border-radius: 50%;
  background-image: linear-gradient(#f9f9f9, #c2c2c2);
  color: #555 !important;
  border: 1px solid #bbb;
}
.cs-item__options i:hover {
  background-image: linear-gradient(#c2c2c2, #f9f9f9);
}
.cs-item-topright {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 0.9rem;
  color: #333;
  text-align: right;
}
.cs-item.u-border-bottom:last-child:not(:hover) {
  border-bottom: 1px solid transparent;
}
.cs-list.u-border-radius .cs-item:first-child {
  border-top-left-radius: 0.6rem;
  border-top-right-radius: 0.6rem;
}
.cs-list.u-border-radius .cs-item:last-child {
  border-bottom-right-radius: 0.6rem;
  border-bottom-left-radius: 0.6rem;
}
.cs-list.u-padding.u-border-radius .cs-item:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.cs-list.u-padding.u-border-radius .cs-item:last-child {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.cs-list.compressed .cs-item__body p {
  display: none;
}
.selected .cs-item__body p.hilite,
.cs-item__body p.hilite {
  color: #0366d6;
}
.cs-item__flipscene {
  perspective: 500px;
  flex: 0 0 2.2rem;
  height: 2rem;
  width: 2rem;
}
.cs-item__flipitem {
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
  transform-style: preserve-3d;
  cursor: pointer;
  position: relative;
}
.cs-item__flipicon {
  padding: 6px;
  font-size: 1.2rem;
  cursor: pointer;
  position: absolute;
  text-align: center;
  backface-visibility: hidden;
  border-radius: 50%;
}
.cs-item__flipicon--back {
  background-color: hsla(0, 100%, 50%, 0.75);
  background: black;
  color: #fff !important;
  transform: rotateY(180deg);
}
.cs-item__flipitem.is-flipped {
  transform: rotateY(180deg);
}
.cs-item__icon.icm-ticked {
  background-color: #777;
  color: #FFF;
  background-color: hsla(0, 100%, 50%, 0.75);
}
.cs-reversed {
  transform: rotate3d(0, 0, 180deg);
}
.cs-item.isme {
  background-color: #ddd;
  font-style: italic;
}
.cs-list-animation > .cs-item {
  opacity: 0;
  transform: translate(0, 100%);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: opacity,transform;
}
.cs-list-animation.isinview > .cs-item {
  opacity: 1;
  transform: translate(0, 0) !important;
}
.workareas .cs-item,
.activeitems .cs-item,
.selecteditems .cs-item {
  padding: 0.3rem;
}
.activeitems .cs-item__header,
.selecteditems .cs-item__header {
  font-size: 0.9rem;
}
.activity-log .cs-item:hover:not(.selected) {
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}
.activity-log .cs-item-heading {
  font-style: normal;
}
.activity-log .cs-item {
  min-height: 70px;
}
.cs-empty-data-item-large {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 70px;
}
/* NEW --------------------------------------- */
.cs-item-checkbox:before {
  content: "\e430";
}
.cs-item.selected .cs-item-checkbox:before {
  content: "\ee62";
}
.cs-item .app-badge {
  bottom: 7px;
  right: 2px;
}
.cs-item__icon.cs-item-checkbox {
  font-size: 1.2rem;
}
.cs-select-list,
.cs-find-list {
  margin: 1rem;
  border-radius: 0.6rem;
  border: 1px solid #aaa;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.cs-select-list-wrapper {
  background-color: #fff;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  border-radius: 0.6rem;
}
.cs-select-list-wrapper.absolute,
.cs-find-list-wrapper.absolute {
  position: absolute;
  z-index: 1;
  max-height: 320px;
  top: 100%;
  right: 0;
  min-width: 150px;
  border: 1px solid #ccc;
}
.activeitems.show > .cs-list {
  max-height: 1000px;
  transition: max-height 2s ease;
  overflow-y: auto;
}
.cs-select-list-wrapper .cs-select-list {
  box-shadow: none;
  border: none;
  margin: 0;
  padding: 0.5rem 0.5rem 0 0.5rem;
}
.cs-select-list-wrapper-footer {
  padding: 0.5rem 0;
  background-color: #f1f1f1;
}
ul.cs-item__dropdown {
  height: 100%;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  border-left: 1px solid #ddd;
  position: absolute;
  right: 0;
  background-color: #FFF;
}
ul.cs-item__dropdown:hover {
  background-color: cornsilk;
}
.cs-item.itemdropdown {
  padding-right: 3.1rem;
}
.cs-xlist {
  overflow-y: auto;
}
.cs-xlist.items-border-all {
  margin-top: -1px;
  margin-left: -1px;
}
.cs-xlist.items-border-all .cs-item {
  outline: 1px solid #ddd;
  margin-top: 1px;
  margin-left: 1px;
}
.login-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  margin: 0 auto;
  border: 1px solid #ccc;
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.5);
  background: #f1f1f1;
  background-image: linear-gradient(#BAD1F0, #FFF);
  border-radius: 2rem;
  max-width: 90vw;
  max-height: 90vh;
  z-index: 1000;
  transform: translate(-50%, -50%) scale(0);
  visibility: hidden;
}
.login-wrapper.splash {
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  transition: transform 1.5s ease;
  visibility: visible;
}
.login-wrapper.input {
  width: 530px !important;
  border: 1px solid #999;
  height: auto;
  filter: drop-shadow(2px 2px 5px #999) drop-shadow(0 0 2px #aaa);
  visibility: visible;
  padding-bottom: 1rem;
  box-shadow: none;
}
.logo-header {
  display: flex;
  display: none;
  align-items: center;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  justify-content: center;
  margin-top: 0.5rem;
}
.login-small-logo {
  height: 78px;
  width: 78px;
  margin-right: 1rem;
}
.login-body {
  width: 85%;
  max-width: 85%;
  margin: 0 auto;
  position: relative;
}
.login-body > .col > div {
  display: flex;
}
.login-body > .col {
  margin-bottom: 1rem;
}
.login-body h1 {
  font-style: italic;
  margin-bottom: 20px;
  color: #555;
  text-align: center;
}
.login-logo-wrap {
  padding: 3rem 7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes rotate1 {
  100% {
    transform: rotate(360deg);
  }
}
.login-body .cs-label {
  text-align: right !important;
  font-size: 0.9rem;
  min-width: 7rem !important;
}
.login-wrapper {
  align-items: normal;
  padding: 0;
}
.login-wrapper .cs-view-header {
  border-top-left-radius: 2rem !important;
  border-top-right-radius: 2rem !important;
  margin-bottom: 2rem;
  padding: 0.5rem 0.5rem 0 0.5rem;
  background-color: #FFF;
  border-bottom: 1px solid #aaa;
}
.login-wrapper .icm-login,
.login-wrapper .icm-key,
.login-wrapper .icm-email {
  /* register */
  font-size: 3.4rem !important;
}
.login-wrapper .cs-view-header-block__body {
  line-height: 3.4rem;
}
.login-wrapper .cs-view-header-block__heading {
  font-size: 1.5rem;
}
.login-wrapper .cs-view-header-block__subheading {
  line-height: 1rem;
}
.pwdpin {
  font-size: 2rem;
  max-width: 170px !important;
}
.col.pwdfeedback {
  align-items: center;
  padding: 0.5rem 0 0 0 !important;
  margin-top: 2rem !important;
}
.pwdfeedback li {
  padding: 0 5px;
  /* background-color: #777; */
  color: red;
  position: relative;
  font-size: 0.9rem;
  font-weight: bold;
}
.pwdfeedback li.active {
  color: cornflowerblue;
  font-weight: bold;
}
.pwdfeedback li.active:after {
  content: "\e370";
  position: absolute;
  left: -1rem;
  font-family: 'concord';
}
.row.signin-wrapper {
  margin-left: 7rem;
  align-items: center !important;
  justify-content: space-around !important;
}
.row.signin-wrapper .cs-action-link {
  font-size: 0.9rem;
}
.cs-btn.signin-btn {
  padding: 0.4rem 0.7rem;
}
.login-logo-wrap img {
  min-width: 270px !important;
}
@media only screen and (min-device-width: 360px) and (max-device-width: 740px) and (orientation: portrait) {
  .col > .row > .cs-label.pwdpin-label {
    text-align: center !important;
  }
  .row.signin-wrapper {
    margin-left: 0;
  }
  .row.signin-wrapper button {
    margin-bottom: 0.5rem;
  }
  .row.signin-wrapper span {
    margin-bottom: 0.2rem !important;
  }
  .login-body .cs-label {
    text-align: left !important;
  }
  .login-logo-wrap {
    padding: 1rem;
  }
  .login-logo-wrap img {
    max-width: 270px;
  }
  .login-wrapper .cs-view-header-block__heading {
    line-height: 1.3rem !important;
  }
}
/* --------------- cs-loader ----------------*/
.cs-loader {
  display: none;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #4D90FE;
  border-right: 16px solid #4D90FE;
  border-bottom: 16px solid #4D90FE;
  border-left: 16px solid transparent;
  width: 60px;
  height: 60px;
  margin: 0 auto;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -30px 0px 0px -30px;
  z-index: 99999;
  animation: csl-spin 2s linear infinite;
}
.cs-loader.show {
  display: block;
}
.cs-email-msglist .cs-item {
  padding: 10px !important;
}
.cs-email-msglist .cs-item:hover {
  background-color: #e8f0fe !important;
}
.cs-email-msglist .cs-item__body {
  min-height: 80px;
}
.cs-email-msglist .cs-item__header {
  font-size: 0.8rem;
}
.cs-email-msglist .email-subject {
  font-size: 1rem;
  font-weight: bold;
  padding-bottom: 0.25rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.cs-email-msglist .email-from {
  color: #4095fc;
  font-size: 0.9rem;
}
.cs-email-msglist .email-date {
  font-size: 0.8rem;
  padding: 0;
  font-style: italic;
  right: 10px;
  bottom: 10px;
}
.cs-email-msglist .email-list-entity-icon {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /* height: 42px; */
  width: 42px;
  color: #FFF;
  border-radius: 50%;
  bottom: 30px;
  right: 7px;
  z-index: 999;
}
.email-list-entity-attachment {
  position: absolute;
  left: 14px;
  bottom: 10px;
}
.recipient-container .u-nodata {
  justify-content: left !important;
  text-decoration: none;
  padding-left: 0.5rem;
  font-style: italic;
}
.email-message-header {
  padding: 1rem;
  align-items: flex-start;
  position: relative;
  padding-bottom: 0;
}
.email-message-header .email-message-header-attachment-container {
  margin-right: 3rem;
  max-height: 60px;
}
.email-message-header .recip-icon-area {
  flex: 0 0 55px;
}
.email-message-header .recip-icon-text {
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: #4f6bed;
  height: 42px;
  width: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-size: 1.5rem;
  font-weight: bold;
}
.email-message-header .recip-icon {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 42px;
  width: 42px;
  color: #FFF;
  border-radius: 50%;
  background-color: #4095fc;
  font-size: 1.6rem;
}
.email-message-header label {
  min-width: 3rem !important;
  text-align: right;
  margin-right: 0.5rem;
}
.email-message-header .email-subject {
  font-size: 1.2rem;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-message-header .email-from {
  font-size: 1rem;
  padding-bottom: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #4095fc;
  font-weight: bold;
}
.email-message-header .email-to {
  font-size: 0.9rem;
  padding-bottom: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-message-header .email-date {
  font-size: 0.9rem;
  padding: 0;
}
.email-message-header-attachment {
  color: #000 !important;
  border: 1px solid #bbb !important;
  background-color: #FFF !important;
  border-radius: 7px !important;
  cursor: pointer;
}
.dm-msglist {
  border: 0.5rem solid #aaa;
  border-radius: 0.6rem;
}
.dm-message {
  background-color: #FFF;
  margin: 1rem;
}
.dm-message .dm-date {
  border-bottom: 1px solid #777;
}
.dm-message .dm-subject {
  font-weight: bold;
}
.dm-message .dm-text {
  font-size: 0.9rem;
}
/* iPhone 6 in portrait */
@media only screen and (min-device-width: 360px) and (max-device-width: 740px) and (orientation: portrait) {
  .email-message-header label {
    font-size: 0.8rem;
  }
  .email-message-header input {
    font-size: 0.8rem;
  }
  .dm-msglist .cs-item__body p {
    font-size: 0.8rem;
  }
}
.email-list-entity-attachment i {
  padding: 5px 5px;
  font-size: 1rem;
  color: #999;
}
.email-list-entity-attachment i:hover {
  background-color: #999;
  color: #fff;
  border-radius: 50%;
}
.cs-email-msglist li:nth-child(odd) {
  background-color: #fafafa;
}
.cs-email-msglist li:nth-child(even) {
  background-color: #FFF;
}
iframe.email-body {
  border-radius: 0.6rem;
  margin: 1rem;
  top: 8px;
  right: 8px;
  left: 8px;
  bottom: 8px;
  width: unset;
  height: unset;
}
.cs-iframe-viewer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 1rem;
  z-index: 1000000;
  background-color: #aaa;
}
.cs-iframe {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  border: 1px solid #777;
  background-color: #FFF;
}
.cs-iframe-viewer .cs-view-header__actionbar {
  top: 3px;
}
.cs-dupchecker {
  flex: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-y: auto;
  min-height: 240px;
  max-height: 50vh;
  margin-bottom: 0.5rem;
  border-radius: 1rem;
  border: 12px solid #111;
  border-top: 0;
  background-color: #FFF;
}
.cs-dupchecker th {
  background-color: blanchedalmond !important;
}
.cs-panel-header {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  font-size: 1rem;
  background: #111;
  color: white;
}
.cs-panel-header.centered {
  justify-content: center;
}
.cs-panel-header i.close-icon:hover {
  transform: scale(1.5);
}
.cs-table-head {
  overflow-y: auto;
  background: #FFF;
  height: 100%;
}
.cs-table-head table {
  width: 100%;
}
.has-absolute-actionbar {
  position: relative;
}
.cs-absolute-actionbar {
  position: absolute;
  right: 2px;
  top: 1rem;
  padding: 0;
  z-index: 1;
  line-height: 1.5rem;
  color: #555;
}
.cs-card-ex {
  background: white;
  border: 2px solid #7F7CFF;
}
.cs-card-ex {
  font-size: 2rem;
  padding: 0.5rem 1.5rem;
  background: #7F7CFF;
  margin: 0;
}
.cs-card-ex p {
  padding: 1.5rem;
  padding-right: 1.5rem;
  margin: 1.5rem 0;
}
.csl-actionlink {
  cursor: pointer;
  text-decoration: underline;
}
.csl-actionlink span {
  text-decoration: none !important;
}
.csl-actionlink:hover {
  text-decoration: underline;
}
.iconlink a {
  text-decoration: none !important;
  border-bottom: none !important;
  color: #0366d6;
  font-size: 0.9rem;
}
.cs-icon-menu {
  padding-top: 5px;
  background-color: #FFF;
}
.frontdesk-filtermenu {
  background-color: #eee;
  border-bottom: 1px solid #ccc;
}
.map .cs-view-header__actionbar {
  z-index: 999;
}
.cs-notes-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 0.6rem;
  background: #FFF;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.cs-notes-wrapper textarea {
  border-radius: 0.6rem;
}
.cs-notes-wrapper textarea:focus {
  box-shadow: none;
}
.cs-view-header-block__subheading.emphasize .csl-actionlink {
  text-decoration: none !important;
}
.cs-recordcount {
  display: flex;
  justify-content: center;
  align-items: center;
  /* border-bottom: 1px solid #ccc; */
  padding: 0.2rem 0.6rem;
  background-color: #e5edf1;
  position: fixed;
  /* right: 2rem; */
  border-radius: 0 !important;
  filter: drop-shadow(1px 1px 2px #777);
  bottom: 0.1rem;
  z-index: 999;
  transform: translateX(-50%);
  left: 50%;
  /* top: 4px; */
  /* border-top-right-radius: 0.6rem !important; */
  font-size: 0.9rem;
}
.leaflet-control-attribution.leaflet-control {
  /* display: none; */
  max-height: 100px;
  max-width: 100px;
  bottom: 0;
  right: 0;
  left: unset;
  top: unset;
  min-height: 100px;
  min-width: 100px;
}
/* --------------- cs-menu ----------------*/
.cs-menu {
  /* display: flex; */
  transition: 0.2s 0.5s;
  /* delay on hover off */
  position: absolute !important;
  border: 1px solid #bbb;
  background-color: #FFF;
  z-index: 100 !important;
  /* border-radius: 23px; */
  border-radius: 6px;
  font-size: 0.9rem;
  white-space: nowrap !important;
  text-align: left;
  list-style: none;
  flex-direction: column;
  padding: 0.2rem;
  /*transition:max-height 500ms ease;*/
  /* box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); */
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12), 3px 3px 8px 0 rgba(0, 0, 0, 0.2);
  background: #f9f9f9;
}
.cs-appmenu {
  position: absolute !important;
  min-width: 100px;
}
.cs-menu__section-heading {
  font-weight: bold;
  text-align: center;
  padding: 10px 20px !important;
  width: 1;
  align-self: auto;
}
.cs-appmenu-item,
.cs-menu__item {
  display: flex;
  list-style: none;
  padding: 0.3rem 0.5rem;
  color: #202124 /*!important */;
  text-align: left !important;
  font-size: 0.9rem;
  border-bottom: 1px solid transparent;
  border-top: 1px solid transparent;
  border-radius: 3px;
  border: 1px solid transparent;
  align-items: center;
}
.cs-menu__item.has-transition {
  transition-property: color, background-color;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
}
.cs-menu__icon {
  /* color: cornflowerblue !important; */
  /* color: #0366d6 !important; */
  /*color: #777 !important;*/
  font-size: 1.2rem;
  padding: 6px;
  border-radius: 50%;
  margin-right: 0.7rem;
  color: #333;
  background: transparent;
}
.cs-menu__item-divider {
  display: block !important;
  margin: 5px 0px;
  border-bottom: 1px outset white;
  user-select: none;
  padding: 0 0 !important;
  /*margin: 0.6rem;*/
}
.cs-menu__item:hover {
  background-color: #e8f0fe;
  border: 1px solid #6da0f9;
}
.cs-menu--bottom-left {
  top: 120%;
  left: 0;
}
.cs-menu--bottom-right {
  top: 120%;
  right: 0;
}
.cs-menu--bottom-center {
  top: 120%;
  left: 50%;
}
.cs-menu--top-right {
  top: 15px;
  left: 60px;
}
.dropdown {
  position: relative;
  cursor: pointer;
  display: flex;
}
.dropdown-content {
  visibility: hidden !important;
  opacity: 0;
  transform: translate(5%, 5%);
  transition: all 0.3s linear;
  transition-property: opacity,transform,visibility;
}
.dropdown:active .dropdown-content,
.dropdown:hover .dropdown-content {
  visibility: visible !important;
  /* transition-delay: 0s;  react immediately on hover */
  transform: translate(0, 0) !important;
  opacity: 1;
}
/*
.dropdown:hover .dropdown-content .cs-menu {
  max-height:650px;
}
*/
.app-menu .cs-menu__item a:hover {
  border: none;
  background-color: transparent;
  color: #111;
  text-decoration: none !important;
}
.app-menu .cs-menu__item a {
  border-bottom: none;
  font-size: 1.2rem;
}
.cs-menu--icons-darkbg i {
  background: #777 !important;
  color: #fff !important;
}
i.cs-menu__icon.hascheckboxes {
  min-width: 28px;
}
.cs-nav {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  flex-direction: row;
}
.cs-nav.vert {
  flex-direction: column;
  align-items: normal;
}
.cs-nav__item {
  position: relative;
  display: flex;
  white-space: nowrap;
  list-style: none;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 0.9rem;
}
.cs-nav__item.active {
  font-weight: bold;
}
.cs-nav.vert .cs-nav__item {
  padding: 0.4rem 0.5rem;
  border-radius: 0;
}
.cs-nav.vert .cs-nav__item.active {
  background-color: #000;
  color: #FFF;
}
.cs-nav.vert .cs-nav__item.active i {
  color: #FFF !important;
}
.cs-nav.vert .cs-nav__item i {
  margin-right: 0.5rem;
  font-size: 1.2rem;
}
.cs-nav.showcaptions .cs-nav__item {
  padding: 0.25rem 0.7rem;
}
.cs-nav.showcaptions .cs-nav__item.active {
  border: 1px solid #999;
  background-color: #777;
  color: #FFF;
  font-weight: normal;
}
.cs-nav.horz .cs-nav__item {
  margin-right: 0.5rem;
  padding: 0.1rem 0.45rem;
}
.cs-nav__item.divider {
  min-width: 1rem;
  color: #fff;
  min-height: 30px;
  border-radius: 0;
  margin-left: 0.5rem;
}
.main-nav {
  margin-left: 20px;
}
.main-nav .cs-nav__item {
  padding: 5px 15px;
}
.main-nav .cs-nav__item.active {
  background-color: #e8f0fe;
  color: #111;
}
.main-nav .cs-nav__item:hover {
  color: #111;
}
.main-icons .cs-toolbar__item {
  padding: 0;
}
.app-bar i:hover,
.top-bar i:hover {
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
.top-bar__brand {
  justify-content: center;
}
.top-bar__brand .cs-nav__item {
  padding: 0 0.7rem;
}
/*
main-action-items {
  justify-content: center;
}
.leftzone-action-items, .mainzone-action-items {
  display: flex;
  align-items: center;
}
*/
.cs-nav-bigdata-mini {
  position: relative;
  right: 1.1rem;
  bottom: 0.2rem;
  /* transform: translateX(-50%); */
  /* left: 50%; */
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0.5rem;
  font-size: 0.9rem;
  border-radius: 0 !important;
}
.cs-nav-bigdata-mini .db-searcher__footer-btns.bigdata.show {
  flex: 0 0 auto;
}
.cs-label.cs-nav-bigdata-mini__pageno {
  margin-left: 1rem;
  font-size: 0.9rem;
  flex: auto;
  align-self: center;
}
.app-bar .cs-nav.horz .cs-nav__item {
  margin-right: 0rem;
  padding: 0.1rem 0.2rem;
}
.app-bar .cs-nav__item.divider {
  max-width: 1px;
  min-width: 1px;
  border-radius: 0;
  /* flex: 1; */
  margin: 0 0.5rem !important;
  height: 50px;
  padding: 0 !important;
  background-color: #fff;
}
.app-bar i.cs-nav__icon.icm-user {
  font-size: 1.9rem;
  margin-right: 0;
}
.cs-navigator {
  margin: 5px;
}
.cs-navigator .cs-btn {
  margin-right: 2px;
  border-radius: 0;
}
.cs-navigator .btn-icm-add:not(:disabled) {
  color: blue;
}
.cs-navigator .btn-icm-edit:not(:disabled) {
  color: blue;
}
.cs-navigator .btn-icm-delete:not(:disabled) {
  color: blue;
}
.cs-navigator .btn-icm-save:not(:disabled) {
  color: green;
}
.cs-navigator .btn-icm-cancel:not(:disabled) {
  color: red;
}
.cs-navigator.finder {
  margin: 0.3rem 1rem;
  flex: 0 0 auto;
  display: flex;
  justify-content: space-evenly;
}
.cs-navigator.finder .cs-btn {
  margin-right: 2px;
  border-radius: 0;
  flex: 1;
}
.reminder-wrapper {
  position: fixed;
  z-index: 999999999999;
  display: flex;
  flex-direction: column;
  height: 410px;
  width: 410px;
  max-height: 410px;
  max-width: 410px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.5rem 0.25rem 0.5rem 1rem;
  border-radius: 2rem;
  border: 0.7rem solid #999;
  background-color: #FFF;
  filter: drop-shadow(5px 5px 5px #777);
}
.reminder-wrapper-position-icon {
  display: inline-block;
  flex: 0 0 auto!important;
  margin: 0 0.5rem;
  font-size: 1.3rem !important;
}
.reminder-close {
  display: inline-block;
  flex: 0 0 auto!important;
  margin: 0 0.5rem;
  font-size: 1.3rem !important;
}
.reminder-close:hover {
  color: orangered !important;
}
.reminder-wrapper.bottom-right {
  top: unset;
  bottom: 0;
  right: 0;
  left: unset;
  max-height: 210px;
  transform: none;
  filter: none;
  border-radius: 0;
  border-top-left-radius: 2rem;
}
.reminder-header {
  flex: 0 0 auto;
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #aaa;
}
.reminder-count {
  font-size: 1.1rem;
  color: cornflowerblue;
}
.reminder-header .cs-action-link {
  background-color: aliceblue;
  border: 1px solid #ccc;
}
.reminderduetime {
  margin-right: 0.5rem;
  padding: 0;
  font-size: 1.2rem;
}
.reminderduetime:hover {
  text-decoration: underline;
}
.reminder-list i {
  font-size: 1.4rem;
}
.reminder-todo-icon {
  color: red !important;
}
.reminder-list .cs-item__header {
  margin-left: 0.5rem;
}
select.cs-field.reminder {
  max-width: 240px;
}
@media only screen and (min-device-width: 280px) and (max-device-width: 740px) and (orientation: portrait) {
  .reminder-wrapper {
    max-height: 350px;
    max-width: 350px;
    border: 0.4rem solid #999;
  }
  .reminder-wrapper-position-icon {
    display: none !important;
  }
}
/***********************************************
IDENTICAL TO MEDIA IN SOME PARTS BUT LEADING

.splitscreen.show form   class 
***********************************************/
.splitscreen.show form .gwrapper {
  padding: 0.5rem;
}
.splitscreen.show .gwrapper {
  padding: 0.5rem;
}
.splitscreen.show form .gwrapper,
.splitscreen.show form .grow,
.splitscreen.show form .row {
  flex-direction: column !important;
  align-self: flex-start;
  width: 100%;
}
.splitscreen.show form .gcol,
.splitscreen.show form .col {
  width: 100%;
  flex: 1 1 auto;
}
.splitscreen.show form .grow,
.splitscreen.show form .row {
  width: 100%;
}
.splitscreen.show form .row .col {
  min-width: 100% !important;
  align-self: flex-start;
  align-items: start;
  margin-bottom: 0.5rem;
}
.splitscreen.show form .cs-label {
  width: 100% ;
}
.splitscreen.show form .cs-field {
  width: 100% ;
}
.splitscreen.show form .cs-label-min {
  min-width: unset;
}
.splitscreen.show form .col.show-legend-pad {
  margin: 10px 0 10px 0;
}
.splitscreen.show form .col.data-entry {
  width: unset;
  align-self: auto;
  margin-bottom: 1rem;
  /* padding-bottom: 1rem;   */
  /* border-bottom: 1px solid #777; */
}
.splitscreen.show form .col.data-entry .row {
  flex: 0 0 auto;
  flex-direction: column !important;
  align-items: start;
}
.splitscreen.show form .col.data-entry .cs-label {
  min-width: 6rem;
  width: auto !important;
}
.splitscreen.show form .row > .row > .cs-label,
.splitscreen.show form .col > .row > .cs-label {
  text-align: left;
}
.splitscreen.show form .col.textarea .row .cs-label {
  text-align: left !important;
}
.splitscreen.show form .row.singlerow {
  margin-bottom: 1rem;
}
.splitscreen.show form .row.singlerow > .row {
  flex-direction: row !important;
  padding-bottom: 0.5rem;
}
.splitscreen.show form .row.singlerow > .col {
  min-width: 0 !important;
  width: auto !important;
}
.splitscreen.show form .row.singlerow .row .cs-label {
  width: auto;
  min-width: 6rem;
  max-width: 6rem;
  text-align: right;
}
.splitscreen.show form .cs-label--right {
  text-align: left !important;
}
.splitscreen.show form .col > .row > .cs-label {
  min-width: 6rem;
  text-align: left !important;
}
.splitscreen.show form .row.always-horz {
  flex-direction: row !important;
}
.splitscreen.show form .col.always-flex0 {
  flex: 0 !important;
}
span.cs-validation-error-msg {
  width: 100% !important;
}
.splitscreen.show form .row.u-always-row {
  flex-direction: row !important;
}
.splitscreen.show form .cs-input-group {
  width: 100%;
  align-self: start;
}
/* --------------- cs-table ----------------*/
/* --------------------------------------------
Reminder of full layout possibilities (inc. all first column cells as <th>)

<table>
<caption>A summary of the UK's most famous punk bands</caption>
<thead> <tr> <th scope="col">Band</th>  ...  </tr> .... </thead>
<tbody> <tr> <th scope="row">Buzzcocks</th>  <td>1976</td> ...  <tr> </tbody>
<tfoot> <tr> <th scope="row" colspan="2">Total albums</th>   <td colspan="2">77</td> </tr> </tfoot>
</table>

defaults
---------------------------------------------*/
.table-wrapper {
  display: flex;
  overflow-y: auto !important;
  min-height: 0 !important;
  background-color: #FFF;
  min-width: 90%;
}
.table-wrapper.go1 {
  filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.5));
  border-radius: 6px;
  max-width: 90%;
}
.table-wrapper.shadow {
  border: 1px solid #999;
  filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
}
.table-wrapper.rounded {
  border-radius: 0.6rem;
}
table {
  white-space: normal;
  border-collapse: collapse;
  border-spacing: 0;
  border: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 0.9rem;
  background-color: #FFF;
  font-size: 0.8rem;
  position: relative;
}
table.fixed {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}
table.fixed td + td {
  width: auto;
}
table.normal {
  font-size: 1rem;
}
caption {
  font-weight: bold;
}
thead {
  /* background-color: #E5F2FF; */
  font-weight: bold;
  color: #555 !important;
}
thead tr,
thead th {
  font-weight: bold;
  color: #333 !important;
  background-image: linear-gradient(to bottom, #e0e0e0, #c9c9c9);
  border-bottom: 1px solid #999;
}
thead td {
  padding: 3px 10px;
}
td,
th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 5px 10px;
}
th {
  position: sticky;
  top: -0.1rem;
  z-index: 2;
  font-weight: normal;
  font-size: 0.9rem;
}
td {
  border-bottom: 1px solid #ddd;
}
td.break-word {
  overflow-wrap: break-word;
}
table.noborders th,
table.noborders td {
  border-bottom: 1px solid transparent;
  padding: 3px 6px;
}
table tbody tr:hover:not(.selected) {
  /* 
  color: #181818;
  color: #FFF;   
  background-color: cornflowerblue;
  background-image: linear-gradient(to bottom, #5170f7, #0e37e8); 
  */
  transition: background-color 0.25s ease;
  border: 1px solid #6da0f9 !important;
  background-color: #e8f0fe !important;
}
.table-wrapper table tbody tr {
  border: 1px solid transparent !important;
}
tr.selected {
  color: #fff;
  background-color: #4d90fe;
}
/* --------------------------------------------
number cells
---------------------------------------------*/
td.number {
  text-align: right;
}
/* --------------------------------------------
icons in tables
---------------------------------------------*/
td i {
  font-size: 1.2rem;
}
/* --------------------------------------------
Striped table
---------------------------------------------*/
table.striped tbody tr:nth-child(odd) {
  background-color: #eee;
}
table.striped tbody tr:nth-child(even) {
  background-color: #FFF;
}
/* --------------------------------------------
cell borders
---------------------------------------------*/
table.td-borders td {
  border: 1px solid #ccc;
}
table.td-borders-right td {
  border-right: 1px solid #ccc;
}
table.td-borders-bottom td {
  border-bottom: 1px solid #ccc;
}
table.no-th-borders th,
table.no-td-borders td {
  border: 1px solid transparent;
}
/* --------------------------------------------
curved edges
---------------------------------------------*/
table.curved {
  border-radius: 0.6rem;
  border: 1px solid #ccc;
  border-collapse: unset;
  border-spacing: 0;
}
table.curved thead tr:first-child {
  border-top-left-radius: 0.6rem;
}
table.curved thead tr:first-child {
  border-top-right-radius: 0.6rem;
}
table.curved thead tr:last-child {
  border-bottom-left-radius: 0.6rem;
}
table.curved thead tr:last-child {
  border-bottom-right-radius: 0.6rem;
}
table.curved.noheading tbody tr:first-child {
  border-top-left-radius: 0.6rem;
}
table.curved.noheading tbody tr:first-child {
  border-top-right-radius: 0.6rem;
}
table.curved.noheading tbody tr:last-child {
  border-bottom-left-radius: 0.6rem;
}
table.curved.noheading tbody tr:last-child {
  border-bottom-right-radius: 0.6rem;
}
table tr:hover td span.action-button {
  color: #FFF;
}
.cs-datatable {
  flex: 1;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  background: #FFF;
  overflow: auto;
}
.cs-datatable table {
  flex: 1;
}
/*
https://medium.com/@vembarrajan/html-css-tricks-scroll-able-table-body-tbody-d23182ae0fbc

.fixed_header tbody{
  display:block;
  overflow:auto;
  height:200px;
  width:100%;
}

.fixed_header thead tr{
  display:block;
}
*/
.col-default {
  background: #eeefff;
}
.col-yellow {
  background: #ffffe8;
}
.td-hilite-id {
  font-weight: bold;
}
.td-pay {
  color: #06ed;
  text-align: right;
}
.td-company {
  color: green;
}
.td-jobtitle {
  text-decoration: underline;
}
.cs-datatable table {
  font-family: "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", "Arial", sans-serif;
  font-size: 0.9rem;
  border: 1px solid #6495ed;
  border-collapse: collapse;
}
.cs-datatable th {
  padding: 0.5rem;
  border: thin solid #6495ed;
  background-color: #D0E3FA;
}
.cs-datatable td {
  vertical-align: top;
  padding: 0.5rem;
  max-width: 200px;
  text-align: left;
  border: thin solid #6495ed;
}
table.noborders th,
table.noborders td {
  border-bottom: 1px solid transparent;
  padding: 3px 6px;
}
/* --------------- cs-tabset ----------------*/
.cs-tabset {
  flex: 1;
  display: flex;
  font-size: 0.9rem;
}
.cs-tabset__item {
  position: relative;
  display: inline-block;
  list-style: none;
  padding: 7px 12px;
  cursor: pointer;
  margin-right: 7px;
  user-select: none;
}
.cs-tabset__item.active {
  font-weight: bold;
}
.cs-tabset__item.active:after {
  display: block;
  content: '';
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  position: absolute;
}
.cs-tabset__item.active:after {
  background-color: #1589ee;
  background-color: #555;
  height: 2px;
}
.cs-tabset__item.active:after {
  bottom: initial;
  top: 0;
}
.cs-tabset--bordered {
  border-bottom: 1px solid #dddbda;
}
.cs-tabset--transparent {
  background: transparent;
}
.cs-tabset .subview-nav {
  flex: 0 0 auto;
  border-top-left-radius: 12px;
  margin: 0 10px 0 10px;
  border-top-right-radius: 12px;
}
.cs-view-detail .cs-tabset {
  flex: 0 0 auto;
  border-top-left-radius: 12px;
  margin: 0 10px 0 10px;
  border-top-right-radius: 12px;
  background: #fff;
}
.cs-tabset__item.active {
  background-color: #f3f5f7;
}
.cs-tabset ~ .cs-toolbar {
  min-height: unset;
}
/* --------------- cs-tag ----------------*/
.tag-editor-container {
  flex: 1;
  order: 2;
  min-height: 50px;
  padding: 0.5rem;
  /* width: 345px; */
  /* overflow: auto; */
  position: relative;
  background-color: #f3f5f7;
  flex-wrap: wrap;
  justify-items: start;
  align-items: start;
  align-content: start;
}
.tag-editor-container.showisreadonly {
  display: flex;
}
.tag-editor-container .cs-autocomplete {
  margin: 0.5rem;
  /* border: 1px solid #999; */
  border-radius: 6px;
}
.man-tag {
  text-transform: uppercase;
}
.tag {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  /* height: 2em; */
  margin: 1px 5px;
  padding: 0 0.5rem;
  font-size: 0.8rem;
  border-radius: 290486px;
  border: 2px solid transparent;
  background-color: #FFF;
  color: royalblue;
  box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.15rem 0.5rem !important;
  height: unset !important;
}
.tag.tag0 {
  background-color: #ddd;
  color: #333;
}
.tag.tag5 {
  background-color: #ddd;
  color: #333;
}
.tag.tag4 {
  background-color: orange;
  color: #000;
}
.tag.tag3 {
  background-color: moccasin;
  color: #000;
}
.tag.tag2 {
  background-color: #3273dc;
  color: #eee;
}
.tag.tag1 {
  background-color: coral;
  color: #FFF;
}
.tag:focus {
  outline: none;
  border-radius: 290486px;
  /* border: 2px solid maroon; */
  box-shadow: 0 0 2px 2px #06f;
}
.tag-cross {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1rem;
  width: 1rem;
  margin-left: 10px;
  padding: 0.5rem;
  font-size: 1.5rem;
  line-height: 1;
  border-radius: 50%;
  background: navy;
  background: #fff;
  color: #000;
}
.tag-cross:hover {
  background-color: #FFF;
  color: red;
  cursor: pointer;
}
.entity-tag-wrapper {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.entity-tag-wrapper.rows {
  flex-direction: column;
}
.entity-tag-autocomplete {
  flex: 0 0 auto;
  display: flex;
  padding: 1rem;
  margin: 1rem;
  background-color: cornsilk;
  border: 1px solid #ccc;
}
.entity-tag-autocomplete.isreadonly {
  display: none;
}
.entity-tag-cat {
  flex: 0 0 auto;
  overflow-y: hidden;
}
.entity-tag-cat.cols {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  overflow-y: auto;
}
.entity-tag-cat.rows {
  flex: 0  0 auto;
  display: flex;
  overflow-y: auto;
}
.entity-tag-cat-header {
  display: flex;
  padding: 0.1rem 0.1rem 0.1rem 0.5rem;
  color: #333 !important;
  background-image: linear-gradient(to bottom, #e0e0e0, #c9c9c9);
  border-bottom: 1px solid #999;
  font-size: 0.8rem;
  font-weight: 500;
}
.entity-tag-cat-header button {
  margin-left: auto;
  padding: 0.2rem 0.2rem;
  border: 0;
  background-color: transparent !important;
  background-image: none;
  color: #333;
}
.entity-tag-cat-items {
  overflow: hidden;
  overflow-y: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  max-height: 130px;
}
.entity-tag-cat-items.hasdata {
  padding: 0.5rem;
}
.entity-tag-wrapper.cols .entity-tag-cat-header {
  min-width: 100px;
  border-right: 1px solid #aaa;
  text-align: center;
}
.entity-tag-cat.rows .entity-tag-cat-header {
  min-width: 100px;
  min-height: 40px;
  margin-right: 0.5rem;
  /* max-height: 30px; */
  word-break: normal;
  overflow: hidden;
  max-width: 100px;
  align-items: center;
  justify-content: center;
  display: flex;
  border: 1px solid #999;
}
.entity-tag-cat.rows .entity-tag-cat-items {
  flex-direction: row;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}
.entity-tag-wrapper .tag {
  margin: 5px;
}
.cs-tags-display.item-editor-container {
  display: flex !important;
  flex: 0 0 auto;
  min-height: 30px;
  max-height: 60px;
  order: unset;
}
.cs-tags-display.item-editor-container .item {
  font-size: 0.7rem;
  padding: 0 0.5rem !important;
}
input.cs-tags-display-placeholder {
  flex: 1;
  border: 0;
  overflow: hidden;
  padding: 3px 0 0 5px;
}
input.cs-tags-display-placeholder:focus {
  box-shadow: none !important;
}
.cs-view.app-template.sidebarshowing {
  padding-right: 300px;
  position: relative;
}
.cs-view.app-template .options-sidebar {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 99999;
}
.item-toggle {
  /* transform: translateY(-50%); */
  color: #999;
  /* flex: 0 0 auto; */
  height: 2rem;
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.item-toggle.closed {
  transition: all 0.5s ease;
}
.item-toggle.open {
  transform: rotate(-45deg);
  transition: transform 0.5s ease;
}
.display-item i {
  position: relative;
}
.display-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  background-color: #fff;
  border-radius: 0.3rem;
  filter: drop-shadow(1px 1px 2px #999);
}
.display-item__summary {
  flex: 1;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.display-item__details {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-height: 0;
}
.display-item__details.show {
  max-height: 700px;
  transition: all 2s ease;
}
.display-item__detail {
  flex: 1;
  display: flex;
}
.display-item__details.subs {
  padding: 0.5rem;
  text-align: right;
  align-items: end;
  background-color: #ddd;
  border: 1px solid #6da0f9;
  background-color: #e8f0fe;
  border-bottom: 1px solid #6da0f9 !important;
  border-radius: 0.3rem;
  margin: 1rem 0.5rem 0.5rem 0.5rem;
}
.display-item:hover {
  filter: drop-shadow(3px 3px 4px #777);
}
.display-item__header,
.display-item__footer {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
}
.display-item__header {
  font-size: 1.2rem;
}
.display-item__footer {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  padding: 0.5rem;
}
.display-item__summaryname {
  flex: 1;
  margin-top: 0.3rem;
  font-size: 1rem;
}
.display-item__name {
  flex: 1;
}
.display-item__total {
  flex: 0 0 auto;
  font-size: 1rem;
  font-weight: bold;
  /* align-self: flex-end; */
  /* margin-left: auto; */
  margin-left: 2rem;
}
.display-item__price {
  flex: 0 0 auto;
  margin-left: 2rem;
  font-size: 1rem;
}
.display-item__buybtn {
  flex: 0 0 auto;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 0 0.5rem;
  border-radius: 0.3rem;
}
.display-item__summarybutton {
  padding: 0 0.5rem;
  margin-left: 1rem;
  align-self: normal;
}
.cs-timeline {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: start;
  border-radius: 0.6rem;
  overflow-y: auto;
  background: #FFF;
  /* box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); */
}
.cs-timeline .cs-expandable__heading {
  padding: 6px 0px 3px 20px !important;
}
.cs-timeline .cs-item {
  flex: 0 0 auto;
  /* margin-bottom: 6px; */
  /* box-shadow: 1px 2px 0 0 rgba(0,0,0,0.05); */
  /* background: #FFF; */
  display: flex;
  align-items: flex-start;
  min-width: 320px;
  padding: 0.5rem 0.25rem 0 1rem !important;
  border: none !important;
  box-shadow: rgba(0, 0, 0, 0.18) 0px 1px 1px;
}
.cs-timeline li.cs-item:first-child {
  border-top-left-radius: 0.6rem;
  border-top-right-radius: 0.6rem;
}
.cs-timeline .cs-item:hover:not(.selected) {
  box-shadow: 1px 1px 2px 2px inset #ccdbe8, -2px 2px 2px 2px inset rgba(255, 255, 255, 0.5);
}
.cs-timeline .cs-item.cs-expandable__heading:hover {
  background-color: #e8f0fe;
  border: none !important;
}
.cs-timeline p.hidden {
  display: none;
}
.cs-timeline.showallnotes p {
  display: block;
}
.cs-timeline.showallnotes.u-flex-wrap p {
  max-width: 300px;
}
.cs-timeline .cs-xitem {
  position: relative;
  padding: 0.5rem;
  padding-left: 50px;
}
.cs-timeline .cs-xitem:hover {
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0;
}
.cs-timeline-icon {
  /* position: absolute; */
  display: flex;
  height: 100%;
  left: 30px;
  top: 10px;
  align-items: center;
  justify-content: center;
  z-index: 1;
  margin-left: 5px;
  align-self: flex-start;
  background-color: none !important;
}
.cs-timeline-icon i {
  cursor: pointer;
  align-self: start;
  border-radius: 50%;
  padding: 5px;
  padding: 7px;
  color: #FFF;
  font-size: 1.5rem;
  color: #288cf0 !important;
  background: transparent;
  font-weight: normal;
}
.cs-item.activity-notesonly .cs-timeline-icon i {
  padding-top: 0.1rem;
}
/* ----------------------------------------------------------------------- 
connecting lines between icon circles


.cs-timeline-icon:before {
  content: ' ';
  background-color: #aaa;
  position: absolute;
  top: 0;
  bottom: -12px;
  z-index: -1;
  
  border-left: 1px dotted #aaa;
}

.cs-timeline .cs-item:first-child .cs-timeline-icon:before {
  content: ' ';
  background-color: #aaa;
  position: absolute;
  top: 12px;
  bottom: -12px;
  z-index: -1;
}

.cs-timeline .cs-item:last-child .cs-timeline-icon:before {
  content: ' ';
  background-color: #aaa;
  position: absolute;
  top: 0;
  bottom: -12px;
  z-index: -1;
  border: 0;
}
----------------------------------------------------------------------- */
.cs-timeline .cs-item__body {
  margin-left: 1.5rem;
}
.cs-item.activity-notesonly .cs-item__body {
  margin-left: 0.5rem;
}
.cs-item.activity-notesonly {
  padding-left: 0 !important;
  padding-bottom: 0.5rem !important;
}
/* .cs-timeline-icon i.icm-note {  background-color:#acbbca; }
.cs-timeline-icon.note:before {  border-left-color: #acbbca;}
.cs-timeline-icon i.icm-telcall {  background-color: sienna;}
.cs-timeline-icon.telephone:before {  border-left-color: sienna;}
.cs-timeline-icon i.icm-email {  background-color: #0366d6;}
.cs-timeline-icon.email:before {  border-left-color: #0366d6;}
.cs-timeline-icon i.icm-task {  background-color: hsl(16, 100%, 50%);}
.cs-timeline-icon.task:before {  border-left-color:hsl(16, 100%, 50%);} */
/*
.cs-timeline-icon.note:before {  background-color: darkseagreen; border-left-color: darkseagreen;}
.cs-timeline-icon.telephone:before {  background-color: sienna; border-left-color: sienna;}
.cs-timeline-icon.email:before {  background-color:#0366d6; border-left-color: #0366d6;}
*/
.cs-timeline-header {
  cursor: pointer;
  font-size: 0.9rem;
  margin-top: 7px;
  text-transform: uppercase;
  display: inline-block;
  white-space: initial;
  font-weight: 700;
  color: #111;
}
.cs-timeline .cs-item__header {
  margin: 0 0 0.2rem 0;
}
/* .cs-timeline .cs-item__body {
  margin-left: 50px;
} */
.cs-timeline .cs-item__body p {
  font-size: 0.8rem;
  margin-bottom: 0;
  text-overflow: ellipsis;
  white-space: normal;
  color: #333;
}
.cs-item.cs-expandable__heading:hover {
  background-color: #e8f0fe;
  border: 1px solid #6da0f9;
}
.cs-timeline-header-labels {
  display: flex;
  align-items: center;
}
.cs-timeline-activity {
  display: inline-block;
  padding: 1px 5px;
  font-weight: normal;
  border-radius: 3px;
  /* background: #aaa; */
  font-size: 0.8rem;
  margin-right: 0.5rem;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #000;
  background-color: lemonchiffon;
  border: 1px solid #aaa;
}
.cs-timeline-activity:hover:not(.activity-notesonly) {
  cursor: pointer;
  text-decoration: underline;
  color: red;
}
.cs-timeline-datetime {
  display: inline-block;
  font-weight: normal;
  font-size: 0.8rem !important;
  /* background: #ccc; */
  /* color: #777 !important; */
  text-transform: capitalize;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #777 !important;
}
.timeline-booking-candidate-link .app-link {
  display: inline-block;
  font-size: 0.8rem;
  cursor: pointer;
  color: orangered !important;
}
/* .cs-timeline-icon i:hover {
  background-image: linear-gradient(to bottom, #fc82ed, #d45b86);
  transform: scale(1.2);
} */
/* .cs-timeline-icon i.icm-note {  color:#acbbca; }
.cs-timeline-icon i.icm-telcall {  color: sienna;} 
.cs-timeline-icon i.icm-email {  color: #0366d6;}
.cs-timeline-icon i.icm-task {  color: hsl(16, 100%, 50%);} */
/* .cs-timeline-icon.note:before {  border-left-color: #acbbca;}
.cs-timeline-icon.telephone:before {  border-left-color: sienna;}
.cs-timeline-icon.email:before {  border-left-color: #0366d6;}
.cs-timeline-icon.task:before {  border-left-color:hsl(16, 100%, 50%);} */
.cs-timeline .cs-item.has-more .cs-timeline-icon:after {
  content: " ";
  position: absolute;
  background: transparent;
  border-radius: 50%;
  top: 2px;
  left: 21px;
  width: 40px;
  bottom: -5PX;
  border: 3px solid #999;
  z-index: 99999999999;
  height: 41px;
  width: 41px;
}
.cs-timeline .cs-expandable__heading:after {
  content: "\ee29";
  font-family: 'concord';
  position: absolute;
  transform: translateY(-50%) rotate(0deg);
  color: #ccc;
}
.cs-timeline .cs-expandable__heading:after {
  left: 55px !important;
  top: 26px !important;
}
.cs-timeline .cs-expandable__heading.out:after {
  left: 0.5rem !important;
}
.cs-timeline .cs-expandable__heading.hasmore:after {
  color: #000;
}
.cs-timeline .cs-expandable__heading.out:after {
  transform: translateY(-50%) rotate(180deg);
}
.cs-timeline .cs-expandable__heading.pointing-down:after {
  transform: translateY(-50%) rotate(90deg);
}
.cs-timeline .cs-expandable__heading .cs-item__body {
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.2rem;
}
.cs-timeline-dateheading {
  background: transparent;
  padding: 0.5rem 1rem;
  font-size: 0.7rem;
  color: #777;
  font-weight: bold;
}
.cs-timeline .cs-relatedto {
  display: inline-block;
  margin-left: 1rem;
  text-transform: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.7rem;
  font-style: italic;
  font-size: 0.8rem !important;
  color: #999 !important;
}
.cs-timeline .cs-relatedto-text {
  font-style: italic;
  text-decoration: underline;
  color: #06ed;
  cursor: pointer;
}
.cs-timeline .cs-relatedto i {
  padding-right: 0.15rem;
}
.cs-timeline .icm-relation:before {
  margin-right: 0.5rem;
}
.quick-activity-actions .cs-view-header__actionbar {
  z-index: 9;
}
.quick-activity-body {
  margin-top: 1rem;
  padding: 0.5rem 1rem 1rem 1rem;
  border-radius: 0.6rem;
  border: 0 !important;
  background-color: transparent;
}
.quick-activity-actions {
  margin: 0 auto;
  display: flex;
  padding-top: 10px;
  position: relative;
}
.quick-activity-save {
  margin-left: auto;
}
.quick-activity-header {
  /* color: #0366d6; */
  /* text-align: center; */
  text-align: left;
  width: 100%;
  font-weight: bold;
  display: flex;
  padding-left: 0.5rem;
  margin-bottom: 0.25rem;
  color: #555;
}
.quick-activity-icon {
  color: #06f;
  font-size: 1.6rem;
  margin-right: 0.5rem;
}
.quick-activity-body textarea {
  overflow: auto;
  min-height: 100px;
  border-radius: 0.6rem;
}
/* --------------- cs-toast ----------------*/
.cs-toast {
  display: none;
  position: fixed;
  z-index: 999999;
  text-align: center;
  padding: 1rem 2rem;
  font-size: 18px;
  bottom: 0.5rem;
  right: 0.5rem;
  border-radius: 0.2rem;
  background-color: #333;
  color: #67a4ef;
  max-width: 90vw;
}
.cs-toast.error {
  color: orangered;
}
.cs-toast.show {
  display: block;
  animation: fadein 0.25s, fadeout 0.25s 3s;
}
/*
.alert:before,
.toast:before {
   content: " ";
   position: absolute;
   top: 2px;   
   left: 2px;   
   bottom: 2px;   
   background-image: url(/img/cat-logo-50x50-shad.png);
   background-repeat: no-repeat;
   height:46px;  
   width: 46px;  
   z-index: 112;
}

*/
/*--------------------------------------*/
/* --------------- cs-toolbar ----------------*/
.cs-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.cs-toolbar--subviews {
  flex: 1;
}
.cs-toolbar.actionitems {
  flex: 0 0 auto !important;
}
.cs-toolbar--subactions {
  flex: 1;
  justify-content: flex-end;
}
.cs-toolbar.has-badges {
  margin-bottom: 0.7rem;
}
.cs-btn.has-badges {
  position: relative;
  overflow: visible;
}
.cs-btn .app-badge {
  right: 5px;
  bottom: -12px;
}
.cs-btn .app-badge.app-badge-left {
  right: unset;
  left: 5px;
  background-color: red;
}
.cs-toolbar.cs-toolbar--caption .cs-toolbar__item {
  padding: 3px 9px;
  margin-left: 1px;
}
.cs-toolbar.cs-toolbar--icon .cs-toolbar__item {
  padding: 3px 3px;
}
.cs-toolbar--subactions.cs-toolbar-menu {
  flex: 0 0 auto;
  justify-content: flex-end;
}
.cs-toolbar-menu > li {
  margin: 0;
  padding: 0;
  padding: 3px;
}
/* --------------- cs-toolbar__item ----------------*/
.cs-toolbar__item {
  display: flex;
  align-items: center;
  position: relative;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  font-size: 0.9rem;
}
.cs-toolbar__item.separator {
  border-left: 1px #fafafa inset;
  height: 60%;
  max-width: 1px;
  margin: 0 5px;
  padding: 0 !important;
  cursor: none;
}
.cs-toolbar__item,
.cs-toolbar__icon {
  padding: 5px;
}
.cs-view-actionbar .cs-toolbar__icon {
  padding: 5px;
}
.cs-toolbar__item a {
  margin-right: 5px;
}
.cs-action-link {
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  margin-right: 5px;
  border-bottom: 1px solid #f1722c;
  color: #333;
  padding: 3px 7px 2px 7px;
  margin-bottom: 2px;
}
.cs-action-link.pill.active,
.cs-action-link.active {
  background-color: #555;
  color: #fff;
  border-bottom: 1px solid transparent;
  border-radius: 0.5rem;
}
.dropdown {
  cursor: pointer;
}
.dropdown .cs-action-link {
  padding: 5px 5px;
  cursor: pointer;
}
.cs-action-link:focus:not(.active),
.cs-action-link:hover:not(.active) {
  color: #FFF;
  background-color: #f1722c;
  background-color: #ff4500;
  border-radius: 0.5rem;
}
.cs-toolbar__icon {
  display: inline-block;
  font-size: 1.2rem;
  color: #555;
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
}
.cs-toolbar__item:hover > .cs-toolbar__icon,
.cs-toolbar__item:hover > span > .cs-toolbar__icon {
  background-color: #ddd;
  border-radius: 50%;
  background-color: #e8f0fe;
  border: 1px solid #6da0f9;
}
.cs-toolbar__item:hover > .cs-toolbar__icon.icm-menu {
  padding: 5px;
  margin-top: 4px;
}
.cs-toolbar__item.selected > .cs-toolbar__icon,
.cs-toolbar__item.selected > span > .cs-toolbar__icon,
.cs-toolbar__item.selected:hover > .cs-toolbar__icon,
.cs-toolbar__item.selected:hover > span > .cs-toolbar__icon {
  border-radius: 50%;
  background-color: #555;
  color: #fff !important;
}
.cs-toolbar--left {
  margin-right: auto;
}
.cs-toolbar--rounded {
  padding: 6px 10px;
  border-radius: 23px;
  border: 1px solid #bbb;
  background-color: #f9f9f9;
}
.cs-toolbar--cta {
  margin: 0 auto 20px auto;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 3px;
  border-radius: 23px;
  border: 1px solid #bbb;
  background-color: #f9f9f9;
}
.cs-toolbar--cta .cs-toolbar__item:first-child {
  padding-left: 0px;
}
.cs-toolbar--cta .cs-toolbar__item:last-child {
  padding-right: 0px;
}
.cs-toolbar--small .cs-toolbar__item {
  padding: 0 3px;
}
.cs-toolbar--subviews .cs-toolbar__item {
  font-size: 0.8rem !important;
}
.cs-toolbar--subviews.cs-toolbar--caption .cs-toolbar__item.active:after {
  display: block;
  content: '';
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  position: absolute;
}
.cs-toolbar--subviews.cs-toolbar--caption .cs-toolbar__item.active:after {
  background-color: #777;
  height: 2px;
}
.cs-toolbar--subviews.cs-toolbar--captionicon .cs-toolbar__item.active {
  color: #1589ee;
}
.cs-toolbar--subviews .cs-toolbar__item.active i {
  border-radius: 50%;
  background: #1589ee !important;
  color: #FFF !important;
}
.cs-toolbar--subviews.cs-toolbar--captionicon .cs-toolbar__item i {
  margin-right: 6px;
}
.cs-toolbar--subactions.cs-toolbar--captionicon .cs-toolbar__item {
  padding: 0 6px;
  margin: 0;
}
.cs-toolbar--subactions.cs-toolbar--caption .cs-toolbar__item {
  padding: 3px 6px;
  margin-right: 7px;
}
.cs-toolbar--subactions.cs-toolbar--caption .cs-toolbar__item:hover,
.cs-toolbar--subactions.cs-toolbar--captionicon .cs-toolbar__item:hover {
  border-radius: 3px;
  color: #FFF !important;
}
.cs-toolbar--subactions .cs-toolbar__item i {
  border-radius: 50%;
}
.cs-toolbar--editing .cs-toolbar__item i {
  color: #555 !important;
}
.cs-toolbar__icon--cta {
  border-radius: 50%;
  background-image: linear-gradient(#f9f9f9, #c2c2c2);
  border: 1px solid #bbb;
}
.cs-toolbar__icon--cta:hover {
  background-image: linear-gradient(#c2c2c2, #f9f9f9);
  border: 1px solid #777 !important;
}
.cs-view-actionbar .cs-toolbar .cs-toolbar__icon {
  font-size: 1.1rem !important;
}
.cs-toolbar__item.heading {
  font-weight: bold;
  font-size: 1.1rem !important;
  padding: 0 1rem;
}
.cs-toolbar__item.down {
  background-image: linear-gradient(#111, #777);
  text-shadow: none;
  color: #FFF;
  border-radius: 0.6rem;
  padding: 1px 1px !important;
}
.cs-toolbar__item.down i {
  color: #FFF;
}
.cs-toolbar__item.down:hover > .cs-toolbar__icon,
.cs-toolbar__item.down:hover > span > .cs-toolbar__icon {
  background-image: linear-gradient(#111, #777);
  text-shadow: none;
  color: #FFF;
}
.cs-toolbar__icon.icm-detail.down,
.cs-toolbar__icon.icm-find.down {
  background-color: #777;
  background-image: linear-gradient(#111, #777);
  text-shadow: none;
  color: #FFF;
}
i.cs-toolbar__icon.icm-interview {
  min-width: 32px;
  max-width: 32px;
}
span.actioncaption {
  font-weight: bold;
  font-size: 1.1rem;
  margin-left: 0.25rem;
}
.cs-subview-actionbar i.cs-toolbar__icon.icm-save {
  color: green !important;
  font-size: 1.4rem;
}
.cs-subview-actionbar i.cs-toolbar__icon.icm-cancel {
  color: red !important;
  font-size: 1.4rem;
}
.csl-tree-wrapper {
  min-width: 300px;
}
.csl-tree {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 1rem;
  border-radius: 0.6rem;
  border: 1px solid #999;
  background-color: #FFF;
}
.csl-dbtree {
  max-height: unset;
}
.tree-item {
  margin: 0 0 0 1rem;
  padding: 0.1rem 0.5rem;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  flex: 0 0 auto;
  margin: 0;
  padding: 0.1rem;
}
.tree-item:focus {
  border: 1px dotted blue;
  border-radius: 3px;
}
.treeitem-toggle {
  color: chocolate;
  display: inline-block;
  /* important for transitions, they don't work on inline */
}
.treeitem-toggle.closed {
  transition: transform 0.5s ease;
}
.treeitem-toggle.open {
  transform: rotate(90deg);
  transition: transform 0.5s ease;
}
.treeitem-children {
  flex: 1;
  overflow: hidden;
  max-height: 0;
}
.treeitem-children.root.show {
  overflow-y: auto;
}
.treeitem-children.show {
  max-height: 700px;
  transition: max-height 2s ease;
}
.treeitem-children:not(:first-child) {
  padding: 0.2rem 0 0 0.5rem;
  margin: 0 0 0 1rem;
  list-style: none;
}
.treeitem-children.root {
  padding: 0.5rem;
}
.tree-icon {
  padding: 0 0.25rem;
  display: inline-block;
  font-size: 1.3rem;
}
.csl-tree-nav i {
  font-size: 1.2rem;
}
.icm-folder-open,
.icm-folder-hascontent {
  color: chocolate !important;
}
.tree-icon-file {
  color: #06e;
}
.csl-tree-nav {
  flex: 0 0 auto;
  display: flex;
  width: 100%;
  padding: 0.5rem;
  min-height: 2.5rem;
}
.csl-tree-nav button {
  padding: 5px 10px;
}
.modal-select-tree .footer_left_buttons i {
  color: blue;
  font-size: 1rem;
}
body {
  background-color: #fff;
}
/* -------------------------------------------------------------------------------------------------------
.cs-sidebar
------------------------------------------------------------------------------------------------------- */
.cs-sidebar {
  flex: 0;
  display: none;
  max-width: 0;
  min-width: 0;
  flex-direction: column;
  will-change: transform;
  order: 0;
  border: none;
  border-right: 1px solid #ccc;
  background: #f3f5f7;
  background: #e5edf1;
  transition: flex 0.5s ease;
}
.cs-sidebar.show {
  flex: 0 0 auto;
  display: flex;
  max-width: 300px;
}
.cs-sidebar.rightaligned {
  order: 10;
  border: none;
  border-left: 1px solid #ccc;
}
.cs-sidebar.show.iconsonly {
  flex: 0 0 30px;
  display: flex;
  max-width: initial;
  min-width: initial;
}
/* --------------- cs-sidebar ----------------*/
/* .cs-sidebar {
  position: absolute;
  height: 100%;
  min-width: 360px;
  z-index: 1;

  transform: translateX(-360px);
  transition:transform 1s;
  will-change: transform;
  background: aqua;
}

.cs-view.has-sidebar{
  position: relative;
}

.cs-view--sidebar-showing{
  transform: translateX(360px);
  margin-left: 360px; 
  transition: margin-left 1s;
}

.cs-view.cs-view--sidebar-showing .cs-sidebar{
  transform: translateX(0); 
  margin-left: -360px;
} */
.last-speech {
  color: yellow;
  font-style: italic;
  padding-right: 1rem !important;
}
.cs-uploader {
  flex: 1;
  display: flex;
  font-size: 1.25rem;
  /* position: relative; */
  padding: 1rem;
  margin: 0.5rem;
  /* border: 20px solid #e5edf1; */
  outline: 2px dashed #92b0b3;
  outline-offset: -10px;
  transition: outline-offset 0.15s ease-in-out, background-color 0.15s linear;
}
.cs-uploader.hasfiles {
  min-height: 100px;
  max-height: 100px;
}
.cs-uploader--highlite {
  background-color: #fff;
  outline-color: red;
}
.cs-uploader__file {
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.cs-uploader__buttontext {
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.5rem;
  text-decoration: underline;
  font-size: 1rem;
  margin-right: 1rem;
}
.cs-uploader__buttontext:hover {
  color: red;
}
button.cs-uploader__button {
  font-size: 1rem;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  max-height: 40px;
  padding: 0.25rem 0.5rem;
  color: royalblue;
}
.cs-uploader__icon {
  font-size: 2rem;
  padding-left: 1rem;
}
.cs-uploader__list .cs-view-header__actionbar {
  right: 14px;
  top: 14px;
}
.cs-uploader__list i {
  font-size: 1.2rem;
}
.user-settings select {
  min-width: 3rem;
}
.user-settings ul li {
  display: inline;
  margin-right: 0.5rem;
}
.user-settings-more button {
  min-width: 250px;
}
.user-settings-more .office365access {
  margin-top: 2rem;
}
.user-settings-general .row {
  margin: 0rem 0.5rem !important;
}
.ui-colours-example {
  max-width: 70%;
  max-height: 100%;
}
.ui-colours-cfg {
  margin: 1rem;
}
.ui-colours-theme-selector {
  margin: 0.5rem;
  padding: 0.5rem;
}
.ui-colours-cfg-column-head {
  font-size: 1rem;
  margin-bottom: 1rem;
  font-weight: bold;
  text-decoration: underline;
  text-align: center;
}
.ui-colours-cfg-column {
  flex: 0 0 310px;
  margin: 1rem;
  padding: 1rem;
  border-radius: 0.6rem;
  border: 1px solid #999;
  background-color: #fff;
  filter: drop-shadow(1px 2px 3px #999);
}
.ui-colours-cfg-item {
  display: flex;
}
.colours-cfg-label {
  flex: 0 0 130px;
}
.colours-cfg-input {
  flex: 0 0 50px;
}
.colours-cfg-input input[type="color"] {
  border: none !important;
  background-color: transparent;
}
.icm-validation-reset {
  color: crimson;
}
span.cs-validation-error-msg {
  display: inline-block;
  margin-top: 0.5em;
  text-transform: uppercase;
  text-align: right;
  font-weight: 700;
  font-size: 0.75rem;
  /* font-family: Helvetica; */
  font-style: italic;
  color: crimson;
  order: 2;
}
.cs-button-date-parent.cs-validation-error-msg,
select.cs-validation-error-msg,
textarea.cs-validation-error-msg,
input.cs-validation-error-msg {
  color: #fff;
  background-color: #ec8282;
}
.cs-input-group input:invalid,
.cs-input-group input:required:invalid,
.cs-input-group input:focus:invalid {
  box-shadow: none;
  border: 0;
}
.cs-view-header {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 0.5rem;
}
.cs-view-header.cs-major-view {
  padding: 1rem;
}
.cs-view-header.rounded-top {
  border-top-left-radius: 0.6rem;
  border-top-right-radius: 0.6rem;
}
.cs-view-detail.rounded-bottom {
  border-bottom-left-radius: 0.6rem;
  border-bottom-right-radius: 0.6rem;
}
.cs-entity-block.testmode {
  margin: 1rem;
}
.cs-view-header__actionbar {
  position: absolute;
  top: 0.5rem;
  right: 2px;
  padding: 0;
  line-height: 1.5rem;
  color: #555;
  display: flex;
  z-index: 99;
}
.cs-view-header__actionbar.suboptions {
  top: 2.9rem;
}
.cs-view-header__actionbar .cs-toolbar__icon {
  font-size: 1.4rem;
}
.cs-view-header__actionbar.entity-header .cs-toolbar__icon {
  font-size: 1.2rem;
  cursor: pointer;
  border: 1px solid transparent;
  background-color: #555;
  color: #eee;
  background-image: none !important;
}
.entity-header .cs-toolbar__item:hover > .cs-toolbar__icon,
.entity-header .cs-toolbar__item:hover > span > .cs-toolbar__icon {
  background-color: #FFF !important;
  color: #555 !important;
}
.cs-view-header__actionbar.small {
  top: 0;
  right: 0;
}
.cs-view-header__actionbar.small .cs-toolbar__icon {
  font-size: 0.8rem;
}
.cs-view-header .cs-entity-extra {
  margin-top: 1rem;
}
/* --------------- cs-view-header-block ----------------*/
.cs-view-header-block {
  display: flex;
  padding: 0.5rem;
  position: relative;
  overflow: hidden;
}
.cs-view-header-block__image {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  margin-right: 0.7rem;
  font-size: 2.3rem;
  color: #ff4500;
}
.cs-view-header-block__image:hover i {
  transform: scale(1.3);
  transition: all 0.25s;
}
.cs-view-header-block__image i {
  border-radius: 6px;
  padding: 5px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.cs-view-header-block__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 57px;
}
.cs-view-header-block__heading {
  font-size: 1.3rem;
  font-weight: bold;
  padding-top: 0;
  overflow: hidden;
  text-shadow: 0px -1px 0px #ddd;
}
.cs-view-header-block__subheading {
  font-size: 0.9rem;
  color: #0366d6;
  padding-bottom: 5px;
  overflow: hidden;
}
.entity-header.jumplinks {
  position: absolute;
  right: 5.6rem;
  top: 0.8rem;
  display: flex;
  flex: 0 0 auto;
  align-items: end;
  background-color: #FFF;
}
.entity-header.jumplinks li {
  cursor: pointer;
}
.entity-header.jumplinks i {
  border-radius: 50%;
  padding: 5px;
  margin-left: 0.5rem;
  font-size: 1.2rem;
  border: 1px solid transparent;
  background-color: #555;
  color: #fff;
  cursor: pointer;
}
.entity-header.jumplinks i.bgcol:hover {
  filter: drop-shadow(1px 1px 1px #777) !important;
}
.entity-header.jumplinks i.icm-close.bgcol:hover,
.entity-header.jumplinks i.icm-menu.bgcol:hover,
.entity-header.jumplinks i.icm-map.bgcol:hover {
  background-color: #fff !important;
  color: #777 !important;
  border: 1px solid #777 !important;
}
.entity-header.jumplinks i.icm-gdprmanager,
.entity-header.jumplinks i.icm-close {
  padding-right: 7px !important;
  color: #eee;
  background-color: #555;
  border: 1px solid transparent;
}
.entity-header.jumplinks i.icm-gdprmanager:hover,
.entity-header.jumplinks i.icm-close:hover {
  color: #555;
  background-color: #FFF;
  border: 1px solid #aaa;
}
.cta.cs-toolbar__icon,
.cs-view-header__actionbar .cs-toolbar__icon {
  border-radius: 50%;
  background-image: linear-gradient(#f9f9f9, #c2c2c2);
  border: 1px solid #bbb;
}
i.cs-toolbar__icon.icm-power {
  border: 1px solid #555 !important;
}
i.cs-toolbar__icon.icm-power:hover,
i.cs-toolbar__icon.icm-menu:hover {
  background-image: none !important;
  border: 1px solid #777 !important;
  background-color: #555 !important;
  color: #FFF !important;
}
.cs-view-header__actionbar .cs-toolbar__item:hover > .cs-toolbar__icon {
  border: 1px solid #bbb;
}
.cs-toolbar__item:hover > .cs-toolbar__icon,
.cs-toolbar__item:hover > span > .cs-toolbar__icon {
  background-color: #ddd;
  border-radius: 50%;
  background-color: #e8f0fe;
  border: 1px solid #6da0f9;
}
.cs-toolbar__icon.disabled {
  color: #aaa;
}
.cs-view-header-block__subheading.emphasize {
  background-color: #777;
  color: #fff;
  padding: 0 0.5rem;
  flex: 0 0 auto !important;
  align-self: flex-start;
  border-radius: 3px;
  min-width: 130px;
  text-align: center;
}
.cs-view-header.cs-major-view .cs-view-header__actionbar {
  top: 1.2rem;
  right: 1.3rem;
}
.cs-toolbar.activityactions {
  position: absolute;
  right: 0.3rem;
  top: 3.7rem;
  background-color: #FFF;
}
.cs-toolbar.activityactions i {
  font-size: 1.3rem;
}
.locationjump {
  cursor: pointer;
}
.mainzone .cs-view {
  background-color: #f3f5f7;
}
.cs-view-order1 {
  order: 1;
}
.cs-view-order2 {
  order: 2;
}
.cs-view-order3 {
  order: 3;
  border-left: 1px solid #aaa;
}
.cs-view {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 100%;
}
.cs-view-actionbar {
  flex: 0 0 auto;
  display: flex;
  max-height: 36px;
}
.cs-view-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0.5rem 1rem;
}
.cs-view-detail div[class^='tab'] {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cs-view-detail .cs-list.simple {
  max-width: 500px;
}
.cs-subview {
  flex: 1;
  display: flex;
  flex-direction: column;
  order: 1;
  /* allows cs-view-sidebar to shift left or right */
  max-width: 100%;
}
.cs-subview-mount {
  flex: 1;
  display: flex;
  overflow: hidden;
  border-radius: 0.6rem;
}
.cs-subview-actionbar {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  min-height: 3rem;
  padding: 0 0 0.5rem 0.5rem;
  justify-content: flex-end;
}
.cs-subview-detail {
  flex: 1;
  flex-direction: column;
  max-width: 100%;
  overflow-y: auto;
  border-radius: 0.6rem;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.25));
  margin: 0.5rem;
}
.cs-subview-detail > div {
  border-radius: 0.6rem;
}
/* original subview navigation content 
.cs-subview { 
  border-radius: 12px;
  background: #FFF;
}

.cs-subview-mount {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;

}

.cs-subview-actionbar {
  padding: 5px;
  padding: 0px 5px 15px 5px;
}

.cs-subview-actionbar {
  // padding: 5px;
  padding: 5px 5px 10px 5px;

  background: #f3f5f7;
  background: #FFF;
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
  border-bottom: 1px solid #ccc;
}
*/
.cs-view-sidebar {
  flex: 0;
  display: none;
  flex-direction: column;
  max-width: 0;
  min-width: 0;
  will-change: transform;
  transition: all 0.5s;
  order: 10;
  border: none;
  border-left: 1px solid #ccc;
  background: #f3f5f7;
  background: #e5edf1;
}
.cs-view-sidebar.isshowing {
  display: flex;
  flex: 0 0 300px;
  max-width: 300px;
  min-width: 300px;
}
.cs-view-sidebar.isleftaligned {
  order: 0;
  border: none;
  border-right: 1px solid #ccc;
}
.cs-view-sidebar .cs-view-detail {
  background: #F2F2F2;
  background: #e5edf1;
}
.cs-view-sidebar .cs-expandable__heading {
  background-image: linear-gradient(to bottom, #5B8AD4, #82B2FC);
  color: #FFF;
}
.legend-btn,
.cs-btn-new {
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  appearance: none;
  font-family: inherit;
  min-width: 50px;
  border: 0;
  border-radius: 3px;
  padding: 3px;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.15s ease-in-out;
  background-color: #ccc;
  color: #333;
}
.cs-btn-new:hover {
  background-color: #1d49aa;
  color: #eee;
}
.cs-btn-new:focus {
  outline: none;
  box-shadow: 0 0 0 4px #cbd6ee;
}
/* --------------- button, cs-btn ----------------*/
button,
.cs-btn,
.button-dimensions {
  display: inline-block;
  user-select: none;
  padding: 0.3rem 0.5rem;
  min-width: 2rem;
  font-size: 0.9rem;
  border-radius: 0.2rem;
  text-align: center;
  vertical-align: middle;
  line-height: 1.15;
  cursor: pointer;
}
.cs-btn.cs-btn--in-list {
  padding: 5px;
  margin: 3px;
  border-radius: 50%;
  background-image: linear-gradient(#f9f9f9, #c2c2c2);
  color: #555 !important;
  border: 1px solid #bbb;
  font-size: 1.1rem;
}
.cs-btn {
  color: #111;
  background-image: linear-gradient(#f9f9f9, #c2c2c2);
  border: 1px solid #777;
  border: 1px solid #aaa;
}
.cs-btn:hover {
  text-shadow: 1px 1px 0px #FFF;
  background-image: linear-gradient(#c2c2c2, #f9f9f9);
}
.cs-btn[disabled]:hover {
  text-shadow: none;
  background-image: linear-gradient(#f9f9f9, #c2c2c2);
  cursor: default;
}
.cs-btn:focus {
  outline: none;
  box-shadow: 0 0 0 4px #cbd6ee;
}
.cs-btn.down {
  background-color: #777;
  background-image: linear-gradient(#111, #777);
  text-shadow: none;
  color: #FFF;
}
.cs-btn.down i {
  color: #FFF !important;
}
.cs-btn-group {
  display: flex;
  flex-wrap: wrap;
  margin: 0.5rem;
  justify-content: center;
  flex: 0 0 auto;
}
.cs-btn-group .cs-btn,
.cs-btn-group button {
  flex: 0 0 auto;
  padding: 5px 12px;
  border-radius: 0;
  color: #181818;
}
.cs-btn-group button:first-child {
  border-right: none;
}
.cs-btn-group button:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.cs-btn-group button:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.cs-btn-group.square button {
  border-radius: 0 !important;
  border: 1px solid #aaa;
  margin-bottom: 0.5rem;
}
.cs-btn-group button {
  min-height: 30px;
  color: #000;
  border: 1px solid #777;
  /*background-color: #4CAF50; */
  white-space: nowrap;
}
.cs-btn-group button.active {
  background-image: linear-gradient(#111, #777);
  text-shadow: none;
  color: #FFF;
}
.cs-btn-group button:focus {
  box-shadow: none !important;
  text-shadow: none !important;
}
.cs-btn-group.cs-btn-group--2x1 button,
.cs-btn-group.cs-btn-group--2x2 button,
.cs-btn-group.cs-btn-group--3x3 button {
  flex-basis: 50%;
}
.cs-btn-group.cs-btn-group--5x5 button {
  flex-basis: 20%;
}
.cs-btn-group.cs-btn-group--2x2 button:first-child {
  border-bottom-left-radius: 0;
  border-bottom: none;
}
.cs-btn-group.cs-btn-group--2x2 button:nth-of-type(2) {
  border-top-right-radius: 6px;
  border-bottom: none;
}
.cs-btn-group.cs-btn-group--2x2 button:nth-of-type(3) {
  border-bottom-left-radius: 6px;
  border-right: none;
}
.cs-btn-group.cs-btn-group--2x2 button:last-child {
  border-top-right-radius: 0;
  border-left: 1px solid #777;
}
.cs-btn-group.cs-btn-group--5x5 button:first-child {
  border-bottom-left-radius: 0;
  border-bottom: none;
}
.cs-btn-group.cs-btn-group--5x5 button:nth-of-type(2),
.cs-btn-group.cs-btn-group--5x5 button:nth-of-type(3),
.cs-btn-group.cs-btn-group--5x5 button:nth-of-type(4) {
  border-bottom: none;
}
.cs-btn-group.cs-btn-group--5x5 button:nth-of-type(5) {
  border-top-right-radius: 6px;
  border-bottom: none;
}
.cs-btn-group.cs-btn-group--5x5 button:nth-of-type(6) {
  border-bottom-left-radius: 6px;
  border-right: none;
}
.cs-btn-group.cs-btn-group--5x5 button:last-child {
  border-top-right-radius: 0;
  border-left: 1px solid #777;
}
button.small,
cs-btn.small {
  font-size: 0.8rem !important;
  padding: 5px !important;
}
.cs-btn-group.frontdesk {
  margin: 0;
}
.cs-btn-group.frontdesk .cs-btn {
  border-top: 0;
  border-bottom: 0;
  border-radius: 0;
}
.cs-btn-group.u-flex0 button {
  flex: 0 0 auto;
}
.cs-save-btn,
.cs-cancel-btn {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}
.chat-msglist {
  flex: 1 !important;
  /* background-color: #e5edf1; */
  padding: 0.5rem;
  height: auto;
  background-color: #e5edf1;
}
.chat-msglist > .cs-item {
  align-items: unset;
  margin-bottom: 1rem;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12), 3px 3px 8px 0 rgba(0, 0, 0, 0.2);
  min-height: 55px;
}
.chat-msglist .cs-item__body p {
  text-overflow: unset;
  color: #111;
  white-space: normal;
  font-weight: bold;
  font-size: 1rem;
}
.chat-msg-self {
  background-color: lightgreen;
  color: #333;
  border-radius: 6px;
  width: 90%;
  margin-left: auto;
}
.chat-msg-another {
  background-color: #FFF;
  color: #333;
  border-radius: 6px;
  width: 90%;
  text-align: left;
}
.chat-msglist .cs-item__icon.icm-user {
  padding-top: 0;
}
.chat-msg-self .cs-item__icon.icm-user {
  color: navy !important;
}
.chat-msg-another .cs-item__icon.icm-user {
  order: 7;
}
.chat-msglist .cs-item-bottomright {
  bottom: 0;
  color: #777;
}
.chattyman-mount {
  height: calc(100vh - 250px);
}
.chattyman-mount .quicky {
  border: 7px solid #999;
  z-index: 100;
  border-radius: 12px;
  margin: 0.5rem;
  padding: 1rem;
}
.chat-msg-self input {
  filter: drop-shadow(1px 1px 2px #777);
}
.chat-notifications {
  max-height: 120px;
  overflow-y: auto;
}
.documenter-detail {
  flex: 1;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.documenter-detail.entityview {
  background-color: #FFF;
}
.foldersmount,
.detailmount {
  max-width: 0;
  overflow: hidden;
}
.foldersmount.show,
.detailmount.show {
  flex: 1;
  width: 100%;
  display: flex;
  min-width: 300px;
  max-width: 300px;
  max-width: unset;
  transition: max-width 2s ease-in;
}
.filedetail {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 300px;
  max-width: -webkit-fill-available;
  border-radius: 0.6rem;
  border: 1px solid #999;
  background-color: #FFF;
  background-color: aliceblue;
  border: 0;
  border-radius: 0;
}
.filedetail * {
  font-size: 0.7rem;
}
.access-rights {
  font-size: 0.8rem;
}
.access-rights .cs-checkbox-label {
  font-size: 0.7rem;
}
.app-documenter .csl-tree,
.app-documenter .filedetail {
  margin: 0;
  border-radius: 0;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.app-documenter .csl-tree {
  border-top-right-radius: 0.6rem;
  /* border-left:0; border-bottom:0; */
}
.app-documenter .filedetail {
  border-top-left-radius: 0.6rem;
  /* border-right:0; border-bottom:0; */
  background-color: aliceblue;
}
.app-documenter .csl-tree .icm-folder-open,
.app-documenter .csl-tree .icm-folder-hascontent {
  color: #06ed !important;
}
.app-documenter .cs-toolbar__icon {
  font-size: 1.4rem;
}
.app-documenter .icm-folder {
  color: #555;
}
.breadcrumbs {
  font-weight: bold;
  color: #777;
  max-width: 100% l;
}
.seperator {
  padding: 0 5px;
  color: #999;
}
.filelistitem-folder i.icm-folder-hascontent {
  display: inline-block;
}
.filelistitem-folder:hover i.icm-folder-hascontent {
  color: chocolate !important;
}
i.icm-folder-hascontent:hover {
  transform: scale(1.5);
  transition: transform 1s ease;
}
.detail-list {
  flex: 3;
  overflow: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.app-table {
  flex: 1;
}
.filelist-wrapper {
  flex: 1;
  display: flex;
  align-items: flex-start;
  align-content: start;
  overflow-y: auto;
  margin: 0;
  background-color: #FFF;
}
.filelist {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 0.8rem !important;
  /* padding: 1rem; */
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
}
.filelistitem {
  flex: 0;
  width: 100%;
  align-items: flex-start;
  font-size: 0.9rem;
  padding: 0.5rem;
  border-bottom: 1px solid #ccc;
  user-select: none;
  min-width: 80px;
  max-height: 140px;
}
.filelistitem.odd {
  background: #FFF !important;
}
.filelistitem__header {
  width: 100%;
  padding: 0.2rem 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
  /* margin-bottom: 0.5rem; */
  /* border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem; */
  background: #777;
  color: #FFF;
  width: auto;
  margin-bottom: 0  !important;
  margin-right: 0  !important;
  flex: 0;
}
.filelistitem-summary {
  flex: 1;
  display: flex;
  align-items: center;
  width: 90%;
}
.filelistitem.grid .filelistitem-summary {
  flex-direction: column;
}
.filelistitem-icon {
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
  min-width: 2rem;
  padding: 5px;
  margin-right: 1rem;
  font-size: 1.2rem;
  /* border-radius: 50%; */
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: cornflowerblue;
  color: #FFF; */
  color: #06ed;
  color: #999;
  background: transparent;
  border-radius: 50%;
  background: #999;
  color: #FFF;
}
.filelistitem__header .filelistitem-icon {
  height: auto;
}
.filelistitem__header .filelistitem-icon {
  color: #FFF;
  background-color: transparent;
}
.filelistitem-id {
  min-width: 50px;
  max-width: 50px;
  text-overflow: ellipsis;
}
.filelistitem-folder {
  min-width: 150px;
  max-width: 150px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.filelistitem-name {
  min-width: 150px;
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.filelistitem-size {
  min-width: 80px;
  max-width: 80px;
  text-align: right;
  margin-right: 0.5rem;
}
.filelistitem-type {
  min-width: 100px;
  max-width: 100px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.filelistitem-lastmodified {
  min-width: 150px;
  max-width: 150px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.filelistitem-thumb {
  min-width: 150px;
  max-width: 150px;
  flex: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 3rem;
  padding-right: 3rem;
}
.filelistitem-name,
.filelistitem-name a {
  cursor: pointer;
  text-decoration: underline;
  color: #06ed;
}
.filelistitem__header .filelistitem-name {
  color: #FFF;
  text-decoration: none;
}
.filelistitem-folder i.icm-folder-hascontent {
  font-size: 1.1rem;
  padding-right: 0.5rem;
  cursor: pointer;
  color: #999 !important;
  text-shadow: 1px 1px 1px #333;
}
.canmodify .filelistitem-thumb {
  padding-right: 6rem;
}
.filelistitem-notes {
  width: 100%;
  display: flex;
  padding-left: 3rem;
  padding-right: 3rem;
  flex: 1;
}
.filelistitem-thumb img {
  max-width: 100px;
  max-height: 100px;
  min-height: 100px;
  min-width: 100px;
}
.upload-btn {
  max-width: 100px;
  align-self: center;
}
.filedetail-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #FFF;
  border: 10px solid #777;
}
.filelist-wrapper.grid {
  flex-wrap: wrap;
  flex-direction: row;
  min-width: 100px;
  background-color: transparent;
}
.filelistitem.grid {
  flex: 1;
  min-width: 200px;
  min-height: 70px;
  overflow: hidden;
  margin: 0.5rem;
  border-radius: 0.3rem;
  border: 1px solid #777;
  background-color: #FFF;
  box-shadow: 0 2px 3px 0px #ccc;
}
.filelistitem.grid.active {
  background-color: #6da0f9;
  border: 1px solid #e8f0fe;
  color: #fff !important;
}
.filelistitem.active .filelistitem-name,
.filelistitem.active .filelistitem-name a {
  color: #FFF;
}
.cs-item.active a {
  color: #06ed !important;
}
.filelistitem.grid .filelistitem-summary {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.filelistitem.grid .filelistitem-name {
  color: #06ed;
}
.filelistitem.grid .filelistitem-folder,
.filelistitem.grid .filelistitem-name {
  min-width: initial;
  max-width: initial;
  text-align: center;
}
.filelistitem.grid .filelistitem-folder {
  align-self: start;
}
.filelistitem.grid .filelistitem-size {
  display: none;
}
.listmanager-detail {
  flex: 1;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  background-color: #e5edf1;
  position: relative;
}
.list-results .icm-lists {
  font-size: 1.4rem;
}
.list-results .cs-item__body__heading {
  color: #777;
}
.list-results .cs-item__body__heading:hover {
  cursor: pointer;
}
.list-results .cs-toolbar__item i {
  border-radius: 50%;
  border: 1px solid #6da0f9;
  background-color: cornflowerblue;
  color: #fff !important;
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
}
.list-results .cs-toolbar__item:hover i {
  background-color: #FFF;
  color: cornflowerblue !important;
  filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.5));
}
.list-results .cs-item__icon.list-acl {
  padding: 7px;
  border-radius: 50%;
  border: 1px solid #777;
}
.list-membercount {
  display: inline-block;
  border-radius: 3px;
  padding: 0 6px;
  background-color: lemonchiffon;
  font-size: 0.8rem;
  min-width: 62px;
  text-align: center;
  padding: 2.8px 0;
  border: 1px solid #777;
  color: #111;
  margin-left: 0.5rem;
}
.cs-btn-group.listmanager {
  margin: 0 5% !important;
}
.cs-btn-group.listmanager .cs-btn {
  flex: 0;
  padding: 3px;
}
.list-members i.icm-frontdesk {
  color: cornflowerblue;
}
.list-members i.icm-frontdesk:hover {
  transform: scale(1.2);
  transition: transform 0.5s ease;
}
.list-finder-input {
  min-width: 250px !important;
  max-width: 350px !important;
}
.list-finder-buttons-toolbar {
  padding-left: 0rem;
}
.list-finder-buttons-toolbar .cs-toolbar__item {
  padding: 0 !important;
}
.listdetailmount .cs-view-detail {
  padding: 0 !important;
}
/* the following needs work/review */
/* --------------- cs-expandable ----------------*/
.cs-expandable {
  display: flex;
  flex-direction: column;
  position: relative;
}
.cs-expandable__heading {
  flex: 0;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  padding: 0.2rem 0 0.2rem 1rem;
}
.cs-expandable__heading.hasarrows {
  padding-left: 2rem;
}
.cs-expandable__heading.hasarrows:after {
  content: '\25bc';
  font-family: concord;
  position: absolute;
  left: 5px;
  transition: all 0.4s ease;
  transform: translateY(-50%);
}
.cs-expandable__heading.hasarrows.pointing-up:after {
  transform: translateY(-50%) rotate(-90deg);
}
.cs-expandable__heading span {
  color: #777;
}
.app-bar__brand,
.top-bar__brand {
  min-width: 0 !important;
}
.modal-icon {
  min-width: 24px;
  min-height: 24px;
}
.modal-container {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  overflow: hidden;
  max-height: 560px;
  min-width: 500px;
  z-index: 1000000;
}
.modal-container.modal-select-list,
.modal-container.modal-select-tree,
.modal-container.modal-db-searcher {
  min-height: 560px;
  min-width: 480px;
  max-width: 480px;
}
.modal-container.dualselect {
  min-width: 760px;
  max-width: 760px;
}
.modal-container.tagselect {
  min-width: 490px;
  max-width: 490px;
  min-height: 605px;
  max-height: 605px;
}
.modal-content {
  flex: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  min-width: 300px;
  color: #111;
  background: #a4ceff;
  border-radius: 1rem;
  filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
  margin: 1rem;
  overflow: hidden;
}
.modal-container.rounded,
.modal-container.rounded .modal-content {
  border-radius: 1rem;
}
.modal-content.left {
  transform: translate3d(-700px, 0, 0);
}
.modal-content.top {
  transform: translate3d(0px, -700px, 0);
}
.modal-content.right {
  transform: translate3d(700px, 0, 0);
}
.modal-content.bot {
  transform: translate3d(0, 700px, 0);
}
.modal-content.topleft {
  transform: translate3d(-700px, -700px, 0);
}
.modal-content.topright {
  transform: translate3d(700px, -700px, 0);
}
.modal-content.botleft {
  transform: translate3d(-700px, 700px, 0);
}
.modal-content.botright {
  transform: translate3d(700px, 700px, 0);
}
.modal-content.scale {
  transform: scale(0);
}
.modal-content.show {
  flex: 1;
  opacity: 1;
  transition: all 0.2s ease;
  transform: translate3d(0, 0, 0);
  /* transform-origin: 50% 50%;  */
  /* { transform-origin: bottom right; } */
}
.modal-content.show.scale {
  transform: scale(1);
}
.modal-content.no-transition {
  transition: none !important;
}
.modal-content li.cs-item {
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.nice-blue {
  color: #0366d6;
  font-weight: 600 !important;
}
.modal-showing {
  overflow: hidden;
}
.modal-header {
  flex: 0 0 auto;
  padding: 0.3rem 0.6rem;
  border-bottom: 1px solid #aaa;
  background-color: #fff;
  font-weight: bold;
  font-size: 1.25rem;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.modal-header h3 {
  margin: 0;
  padding-left: 0.25rem;
  display: inline-block;
  font-size: 1.3rem;
  font-weight: bold;
  color: #333;
}
.modal-header h3 i {
  font-size: 1.4rem;
  margin-right: 0.5rem;
}
.modal-body {
  flex: 1;
  display: flex;
  justify-content: center;
  /*min-height: 3rem;*/
  /*margin: 0.6rem;*/
  padding: 0.25rem;
  /*line-height: 1.4rem;*/
  overflow: hidden;
}
.modal-msg .modal-body,
.modal-input .modal-body {
  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
}
.modal-input .modal-body {
  padding: 2rem 3rem 1rem 3rem;
}
i.modal-icon {
  top: 0.5rem;
  left: 0.5rem;
  font-family: auto;
  background-image: url(/img/modal-icon24x24.png);
  background-repeat: no-repeat;
}
.modal-body .input-label {
  padding-right: 0.5rem;
  white-space: nowrap;
  align-self: center;
  font-size: 0.9rem;
}
.modal-body .main-input {
  min-width: 250px;
}
.modal-body label {
  font-size: 0.9rem;
}
.modal-body ul {
  padding: 0.3rem;
}
.modal-body-text {
  display: block;
  min-height: 3rem;
  padding: 1.25rem 1.25rem 0.8rem 1.25rem;
  overflow: hidden;
}
.modal-footer {
  flex: 0 0 auto;
  /*min-height: 30.3rem;*/
  display: flex;
  align-items: center;
}
.modal-footer__buttons {
  display: flex;
  align-items: center;
  padding: 0 0.7rem 0.7rem 0;
  margin-left: auto;
}
.modal-footer__nav {
  display: flex;
  align-items: center;
  padding: 0 0 0.8rem 1.2rem;
}
.modal-footer__nav button {
  margin-right: 3px;
}
.modal-subheader {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  padding-bottom: 0;
}
.modal-subheader label {
  margin-right: 0.6rem;
}
.modal-subheader input {
  flex: 1;
  width: 90%;
  margin-right: 0.2rem;
}
.selcount {
  background-color: #777;
  color: #FFF;
  padding: 0.3rem 0.6rem;
  margin: 0 0.5rem 0 0;
  white-space: nowrap;
  font-size: 0.9rem;
  border-radius: 0.3rem;
}
.modal-footer__buttons button {
  font-size: 1rem !important;
  margin: 0rem 0.1rem;
  padding: 0.3rem 1rem;
  width: 6rem;
}
.modal-select-list.destlist {
  margin-left: 0.3rem;
}
.modal-select-list li {
  /*border: 1px solid #eee;*/
  padding: 0.5rem;
  user-select: none;
  white-space: nowrap;
  border: 1px solid transparent;
}
.modal-select-list li:hover {
  /*background-color: #777;*/
  /*color: #FFF;*/
  background-color: lightblue;
  color: #104eb1;
  background-color: #BEDEFF;
  color: #000;
  border: 1px solid #3399FF;
}
.modal-select-list li.selected {
  background-image: linear-gradient(to right, #3875D7 20%, #2A62BC 90%);
  background-color: #3875D7;
  color: #FFF !important;
}
.modal-select-list li.selected i {
  color: #FFF !important;
}
.modal-select-list .cs-item-checkbox {
  padding: 0 0.3rem 0 0;
}
.modal-select-list-img {
  margin-right: 0.6rem;
  color: #0366d6;
  border-radius: 0;
}
.modal-dualselect .modal-body {
  flex: 1;
  display: flex;
  align-items: stretch;
}
.modal-dualselect > .cs-list.srce {
  margin-right: 0.5rem;
}
.modal-select-list__header {
  padding: 5px 10px;
  text-align: center;
  border: 1px solid #999;
  background-image: linear-gradient(#f9f9f9, #c2c2c2);
  user-select: none;
}
/*
<div class="md-modal md-show">
  <div class="md-content">
    <h3>Modal Dialog</h3>
    <div>
      <p>This is a modal window. You can do the following things with it:</p>
      <ul>
        <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
        <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
        <li><strong>Close:</strong> click on the button below to close the modal.</li>
      </ul>
      <button class="md-close">Close me!</button>
    </div>
  </div>
</div>

<div class="md-overlay"></div>


// SHOWING 
.md-show {
  visibility: visible;
}

.md-show .md-content {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s 0.1s;
}

.md-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  visibility: hidden;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 0;
  background: rgba(143,27,15,0.8);
  transition: all 0.3s;
}

.md-modal {
  visibility: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  max-width: 630px;
  min-width: 320px;
  height: auto;
  z-index: 2000;
  backface-visibility: hidden;
  transform: translateX(-50%) translateY(-50%);
}

.md-content {
  color: #fff;
  background: #e74c3c;
  position: relative;
  border-radius: 3px;
  margin: 0 auto;
}

.md-content {
  opacity: 0;
  transform: translateX(200%);
}


.md-show ~ .md-overlay {
  transform-style: preserve-3d;
  transform-origin: 0% 50%;
  animation: rotateRightSideFirst 0.5s forwards ease-in;
}

.md-show ~ .md-overlay {
  background: rgba(143,27,15,0.8);
  transition: all 0.5s;
}

.md-show ~ .md-overlay {
  opacity: 1;
  visibility: visible;
}


.cs-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;

  transform: scale(1.15);
  transition:
    transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

.cs-modal.cs-visible {
  pointer-events: auto;
  opacity: 1;
  transform: scale(1);
  transition:
    transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

*/
.hilite {
  color: #000;
  font-weight: bold;
  white-space: nowrap;
  word-break: break-all;
  display: inline-block;
}
.gdpr-blocked {
  position: relative;
}
.gdpr-blocked:after {
  content: ' GDPR BLOCKED ';
  background-color: red;
  color: #FFF;
  font-style: italic;
  font-size: 0.7rem;
  position: absolute;
  right: 0;
  padding: 1px 5px;
  border-radius: 3px;
  margin: 0 0.5rem 0 0;
  z-index: 10;
}
.dtpicker_arrows > .col {
  margin: 0;
}
.db-searcher {
  flex: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}
.db-searcher__header {
  flex: 0 0 auto;
  display: flex;
  padding: 1rem 1rem 0 1rem ;
  align-items: center;
  justify-content: center;
}
.db-searcher__input {
  flex: 1;
  display: flex;
  align-items: center;
}
.db-searcher__input label {
  margin-right: 0.5rem;
  flex: 0 0 auto;
}
.db-searcher__results {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.db-searcher__list {
  padding: 0 0.3rem;
  border: 1px solid #aaa;
  border-radius: 0.3rem;
  overflow: hidden;
}
.db-searcher__list-item {
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
  font-size: 0.9rem;
  border: 1px solid transparent;
}
.db-searcher__list-item i {
  margin-right: 0.6rem;
}
.db-searcher__footer {
  flex: 0 0 auto;
  display: flex;
  margin: 0.25rem;
}
.db-searcher__footer-btns {
  display: none;
}
.db-searcher__footer-btns.show {
  display: flex;
}
.db-searcher__footer-btns .cs-btn {
  padding: 5px 10px;
}
.db-searcher__selections {
  flex: 0 0 100px;
  min-height: 100px;
  max-height: 100px;
  overflow: hidden;
  overflow-y: auto;
  padding: 0.1rem 0.3rem;
  margin: 0.5rem;
}
.db-searcher__selections .tag {
  background-color: cornflowerblue;
  color: #fff;
}
.db-searcher__selections .tag-text {
  max-width: 100px;
  text-overflow: ellipsis;
  overflow: hidden;
}
/* within a modal we need to reposition nav buttons nearer bottom of window */
.modal-db-searcher .modal-body {
  overflow: hidden;
  max-height: 500px;
}
.modal-db-searcher .modal-footer {
  padding-top: 0;
}
.modal-db-searcher.dualselect .cs-find-list {
  margin: 0.5rem 1rem;
}
.modal-db-searcher.dualselect .cs-select-list {
  margin-bottom: 3rem;
}
.modal-db-searcher.dualselect .modal-footer {
  position: absolute;
  bottom: 0;
  right: 0;
}
.modal-db-searcher .db-searcher__header {
  padding-top: 0.5rem;
}
.modal-db-searcher .cs-find-list {
  margin-bottom: 0.3rem;
}
.modal-db-searcher .cs-select-list {
  margin-left: 0;
  margin-top: 0.5rem;
  min-width: 270px;
  max-width: 270px;
}
.footer_left_buttons {
  display: flex;
  margin-left: 0.7rem;
}
.finder-extra,
.finder-extra {
  margin-left: 0.5rem;
  padding: 2px 4px;
  font-size: 0.8rem;
  /* font-style: italic; */
  background-color: lemonchiffon;
  color: #000;
  border-radius: 3px;
  border: 1px solid;
  border-color: sandybrown;
}
.modal-container.modal-tag-select {
  min-height: 540px;
  /* overflow: visible; */
  min-width: 390px;
  max-width: 390px;
}
.modal-tag-select .modal-body {
  padding: 1rem;
  flex-direction: column;
  justify-content: flex-start;
}
.modal-tag-select .item-editor-outer-container.isediting {
  padding-bottom: 30px;
  min-height: 102px;
  max-height: 102px;
}
.db-searcher__footer-btns.bigdata.show {
  flex: 1;
}
.db-searcher__footer-btns.bigdata .cs-btn {
  padding: 5px 10px;
  flex: 1;
  margin-left: 2px;
}
.db-searcher__footer-btns.bigdata .cs-btn i {
  font-size: 1.2rem;
}
.chart-container {
  position: relative;
  flex: 1;
  display: flex;
  overflow: hidden;
  overflow-y: auto;
  font-family: unset !important;
  margin-top: 0;
  margin-right: 0;
  padding: 0.5rem;
}
.chart-container.showdata {
  flex-direction: column;
}
.chart-container.showdata.showchart .table-wrapper {
  flex: 0 0 auto;
  display: block;
  min-width: unset;
  overflow: auto !important;
  max-height: 200px;
  min-height: 120px !important;
}
.csl-chart-wrapper {
  flex: 1;
  display: flex;
  position: relative;
  max-height: 100%;
  overflow: hidden;
  border-radius: 0.6rem;
  background: #FFF;
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
}
.csl-chart-wrapper.u-fullscreen {
  border-radius: 0;
  box-shadow: none;
}
.csl-chart-wrapper .cs-view-header__actionbar {
  top: 0.3rem;
  right: 0.3rem;
}
.chart {
  flex: 1;
  display: flex;
}
svg {
  width: 100%;
  height: 100%;
}
.chart-container .title {
  font-size: 1.2rem;
  /* font-weight: bold; */
  font-style: italic;
}
/*
.line-horizontal {
  stroke: transparent !important;
}

.line-vertical{
  stroke: transparent !important;
} 
*/
/*
let ggstext = svg.querySelectorAll('svg g g.x.axis text')
ggstext.forEach( e => e.style.fontSize='1rem' )

*/
.csl-chart-wrapper.dark {
  background-color: #121212;
}
.csl-chart-wrapper.dark .title {
  fill: #fff;
}
.csl-chart-wrapper.dark .line-horizontal {
  stroke: #555 !important;
}
.csl-chart-wrapper.dark .line-vertical {
  stroke: #555 !important;
}
.csl-chart-wrapper.dark .y.axis text,
.csl-chart-wrapper.dark .x.axis text {
  fill: #aaa;
}
.csl-chart-wrapper.dark .chart-header,
.csl-chart-wrapper.dark .chart-header-icon {
  color: #fafafa !important;
  font-weight: normal;
  text-shadow: none;
}
/******************************************************
OLD

.dashboard-table td {
  pa: 10px;
  border: none !important;
}

.dashboard-table td:last-child {
  margin-right: 10px;
}

.c3-line {
  stroke-width: 2px;
}

.c3 text {
  user-select: none;
  font-size: 12px;
  font-family: 'Open Sans', Helvetica;
}

text.c3-title {
  font-size: 18px;
  text-align: right;
  font-weight: bold;
}

li.divider {
  height: 1px;
  border-bottom: 1px outset white;
  padding: 0px;
}

.dashboard-table {
  margin: 0 auto;
  border: none;
  background-color: transparent;
}

.dashboard-table td {
  width: 33%;
}


.csl-chart-options {
  position: absolute;
  top: 10px;
  right: 10px;
  min-height: 30px;
  min-width: 30px;
  z-index: 250;
}

.csl-chart-options ul {
  position: relative;
  list-style: none;
  margin: 0px;
  padding: 0px 0px;
  float: right;
  color: lightgray;
}

.csl-chart-options ul:after {
  content: '';
  clear: both;
  display: block;
}

.csl-chart-options ul li {
  display: inline-block;
}

.csl-chart-options ul ul {
  position: absolute;
  position: relative;
  display: none;
  padding: 0;
  top: 100%;
  right: 5px;
  border: 1px solid #777;
  background-color: white;
  color: lightgray;
}

.csl-chart-options ul li > ul li {
  display: block;
  padding: 5px 5px;
  white-space: nowrap;
}

.csl-dropdown-more:hover > ul {
  display: block;
  z-index: 256;
}

.csl-chart-options ul ul li {
  position: relative;
  float: none;
  color: lightgrey;
  padding: 0px 0px;
}

.csl-chart-options ul ul li:hover {
  color: darkgrey;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.9);
}

text.c3-chart-arcs-title {
  font-size: 40px;
}
******************************************************/
.chart-header {
  flex: 0 0 auto;
  display: flex;
  padding: 0.5rem 0.5rem 0 0.5rem;
  font-size: 1.2rem;
  line-height: 2.2rem;
  color: #06f;
  font-weight: bold;
  text-shadow: 1px 1px #ccc;
}
.chart-stats-total {
  font-size: 1.1rem;
  font-weight: bold;
  margin-left: 0.5rem;
  color: #ff4500;
}
.chart-header .chart-header-icon {
  color: inherit !important;
  font-size: 1.3rem;
  margin-left: 0.5rem;
  padding: 0.5rem 0.7rem 0.5rem 0;
  color: #06f !important;
}
.chart-header .chart-header-icon {
  font-size: 1.3rem;
  margin-left: 0.5rem;
  padding: 0.5rem 0.7rem 0.5rem 0;
  color: #333 !important;
}
.chart-header-icon {
  transform: scale(1);
  transition: transform 1s ease;
}
.chart-header-icon:hover {
  transform: scale(1.5);
  transition: transform 1s ease;
}
.c360-view .cs-view-header {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  flex: 0 0 100px;
}
.c360-reports {
  flex: 1;
  display: flex;
  background-color: #FFF;
}
.c360-reports .cs-list {
  flex: 1 1 270px !important;
}
.c360-reports .cs-list .cs-item {
  padding-right: 0.5rem;
}
.c360-criteria {
  flex: 0 0 auto !important;
  min-width: 90% !important;
  background-color: aliceblue;
}
.c360-criteria .cs-label {
  min-width: 4rem !important;
}
.c360-wrapper {
  max-height: calc(100vh - 152px) !important;
  overflow: hidden;
}
.c360-leftsidebar {
  width: 390px;
}
.c360-reports__criteria-toggle {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
}
.c360-subheading {
  background-color: #ff4500;
  color: white;
  display: inline-block;
  padding: 0 0.5rem;
}
.c360-criteriatext {
  background-color: lemonchiffon;
  color: #06f;
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 0.5rem;
  font-style: italic;
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
}
/************** CSL-UTILS.CSS ********************************/
/*********************************************
flex container - these need to go before u-display-***
*********************************************/
.u-flex-horz {
  display: flex !important;
  flex-direction: row !important;
}
/* default */
.u-flex-vert {
  display: flex !important;
  flex-direction: column !important;
}
.u-flex-center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.u-flex-horz-right {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: end;
}
.u-flex-horz-left {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: start;
}
/* default */
/********************************************* 
display & hidden
*********************************************/
.u-display-none {
  display: none !important;
}
.u-display-flex {
  display: flex !important;
}
.u-display-block {
  display: block !important;
}
.u-display-inline-block {
  display: inline-block !important;
}
.u-display-inline {
  display: inline;
}
.u-display-table {
  display: table;
}
.u-display-list-item {
  display: list-item;
}
.u-display-height0-width0 {
  max-height: 0 !important;
  max-width: 0 !important;
}
.u-hide-no-events {
  transform: scale(0);
}
.u-hide {
  display: none !important;
}
.u-disabled,
[disabled] {
  color: grey;
}
.u-hide-content,
[hidden],
[u-hidden=true],
[data-hidden=true] {
  visibility: hidden !important;
}
.u-visible {
  visibility: visible !important;
}
.u-visibility-hidden {
  visibility: hidden !important;
}
/* position */
.u-position-static {
  position: static;
}
.u-position-relative {
  position: relative;
}
.u-position-absolute {
  position: absolute;
}
.u-position-fixed {
  position: fixed;
}
.u-position-sticky {
  position: sticky;
}
.u-position-inherit {
  position: inherit;
}
.u-overflow-auto {
  overflow-x: auto !important;
  overflow-y: auto !important;
}
.u-overflow-hidden {
  overflow: hidden !important;
}
.u-overflow-visible {
  overflow: visible !important;
}
.u-overflow-y {
  overflow-y: auto !important;
}
.u-overflow-x {
  overflow-x: auto !important;
}
.u-overflow-x-hidden {
  overflow-x: hidden;
}
.u-overflow-y-hidden {
  overflow-y: hidden;
}
.u-overflow-y-stretch {
  overflow-y: auto;
  flex: 1 1 0%;
}
.u-overflow-x-stretch {
  overflow-x: auto;
  flex: 1 1 0%;
}
/* old */
/* 
.u-flex-horz-reverse {display: flex;flex-direction: row-reverse;} 
.u-flex-vert-reverse {display: flex;flex-direction: column-reverse;} 
.u-flex-horz-start {justify-content: flex-start;} default
*/
.u-flex-horz-end {
  justify-content: flex-end !important;
}
.u-flex-horz-center {
  justify-content: center !important;
}
.u-flex-horz-space-around {
  justify-content: space-around !important;
}
.u-flex-horz-space-between {
  justify-content: space-between;
}
/* new */
.u-justify-content-flex-end {
  justify-content: flex-end !important;
}
.u-justify-content-flex-start {
  justify-content: flex-start !important;
}
.u-justify-content-center {
  justify-content: center !important;
}
.u-justify-content-space-around {
  justify-content: space-around !important;
}
.u-justify-content-space-between {
  justify-content: space-between !important;
}
.u-justify-content-space-evenly {
  justify-content: space-evenly !important;
}
/* old 
.u-flex-vert-stretch {align-items: stretch;} //default
.u-flex-vert-start {align-items: flex-start;}
.u-flex-vert-end { align-items: flex-end;}
.u-flex-vert-center {align-items: center;} 
.u-flex-vert-baseline {align-items: baseline;}
.u-flex-vert-normal {align-items: normal;}
/* new   */
.u-align-items-flex-start {
  align-items: flex-start !important;
}
.u-align-items-flex-end {
  align-items: flex-end !important;
}
.u-align-items-center {
  align-items: center !important;
}
.u-align-items-baseline {
  align-items: baseline !important;
}
.u-align-items-normal {
  align-items: normal !important;
}
.u-align-items-stretch {
  align-items: stretch !important;
}
.u-align-items-unset {
  align-items: unset !important;
}
.u-flex-wrap-nowrap {
  flex-wrap: nowrap;
}
.u-flex-wrap {
  flex-wrap: wrap;
}
/* 
.u-flex-wrap-reverse {flex-wrap: wrap-reverse;}
*/
/* 
.u-flex-flow-row {flex-flow: row;}
.u-flex-flow-column {flex-flow: column;}
.u-flex-flow-wrap {flex-flow: wrap;}
*/
/*********************************************
flex items & utils
*********************************************/
/* 
.u-flex-default {flex: 0 1 auto;}
defaults, 2/3 params optional  
*/
.u-flex-none {
  flex: 0 0 auto !important;
}
.u-flex-shrink-only {
  flex: 0 1 auto !important;
}
.u-flex-auto {
  flex: 1 1 auto !important;
}
.u-flex-stretch {
  flex: 1 1 0% !important;
}
.u-flex-50pc {
  flex: 1 1 50% !important;
}
.u-flex-safari-fix {
  flex: 1 0 auto !important;
}
.u-flex-shrink {
  flex-shrink: 1 !important;
}
.u-flex0 {
  flex: 0 0 auto!important;
}
.u-flex1 {
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
  flex-basis: 0% !important;
}
.u-flex2 {
  flex: 2 !important;
}
.u-flex3 {
  flex: 3 !important;
}
.u-flex4 {
  flex: 4 !important;
}
.u-flex5 {
  flex: 5 !important;
}
.u-flex6 {
  flex: 6 !important;
}
.u-flex7 {
  flex: 7 !important;
}
.u-flex8 {
  flex: 8 !important;
}
.u-flex9 {
  flex: 9 !important;
}
.u-order0 {
  order: 0 !important;
}
.u-order1 {
  order: 1 !important;
}
.u-order2 {
  order: 2 !important;
}
.u-order3 {
  order: 3 !important;
}
.u-order4 {
  order: 4 !important;
}
.u-order5 {
  order: 5 !important;
}
.u-order6 {
  order: 6 !important;
}
.u-order7 {
  order: 7 !important;
}
.u-order8 {
  order: 8 !important;
}
.u-order9 {
  order: 9 !important;
}
.u-order10 {
  order: 10 !important;
}
.u-order11 {
  order: 11 !important;
}
.u-order12 {
  order: 12 !important;
}
.u-order99 {
  order: 99 !important;
}
.u-order-1 {
  order: -1 !important;
}
.u-user-select-none {
  user-select: none;
}
.u-user-select-unset {
  user-select: unset;
}
.u-touch-action-none {
  touch-action: none;
}
.u-touch-action-unset {
  touch-action: unset;
}
/* 
.u-flex-csldefault {flex: 1 0 auto;} 

 */
.u-center-horz,
.u-center-block {
  margin: 0 auto;
}
.u-flex-sendright {
  margin-left: auto;
  justify-content: flex-end;
}
.u-flex-sendbottom {
  margin-top: auto;
}
.u-flex-sendleft {
  margin-right: auto;
}
.u-flex-sendtop {
  margin-bottom: auto;
}
.u-flex-align-self-start {
  align-self: start;
}
.u-flex-align-self-end {
  align-self: end;
}
.u-flex-align-self-center {
  align-self: center;
}
.u-flex-align-self-stretch {
  align-self: stretch;
}
.u-flex-align-self-auto {
  align-self: auto;
}
.u-align-self-start {
  align-self: flex-start;
}
.u-align-self-end {
  align-self: flex-end;
}
.u-align-self-center {
  align-self: center;
}
.u-align-self-stretch {
  align-self: stretch;
}
.u-justify-self-flex-start {
  justify-self: flex-start;
}
.u-justify-self-flex-end {
  justify-self: flex-end;
}
.u-margin-auto {
  margin: 0 auto !important;
}
.u-margin-left-auto {
  margin-left: auto !important;
}
.u-margin-right-auto {
  margin-right: auto !important;
}
.u-resize-none {
  resize: none;
}
.u-h75 {
  height: 75px;
}
.u-h150 {
  height: 150px;
}
/* important ones! */
.u-fix-vert-overflow {
  min-height: 0 !important;
}
.u-fix-horz-overflow {
  min-width: 0 !important;
}
.u-min-width-0 {
  min-width: 0 !important;
}
.u-min-width-unset {
  min-width: unset !important;
}
.u-hidden-nowrap-ellipis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* .u-flex-align-self-center {align-self: center; } */
/*********************************************
widths
*********************************************/
.u-wauto {
  width: auto !important;
}
.u-w100 {
  width: 100% !important;
}
.u-w50 {
  width: 50% !important;
}
.u-w90 {
  width: 90%;
}
.u-w80 {
  width: 80%;
}
.u-w75 {
  width: 75%;
}
.u-w70 {
  width: 70%;
}
.u-w66 {
  width: 66%;
}
.u-w60 {
  width: 60%;
}
.u-w40 {
  width: 40%;
}
.u-w33 {
  width: 33%;
}
.u-w30 {
  width: 30%;
}
.u-w20 {
  width: 20%;
}
.u-w25 {
  width: 25%;
}
.u-w15 {
  width: 15%;
}
.u-w10 {
  width: 10%;
}
.u-w5 {
  width: 5%;
}
.u-w4 {
  width: 4%;
}
.u-w3 {
  width: 3%;
}
.u-w2 {
  width: 2%;
}
.u-w1 {
  width: 1%;
}
.u-w-fit-content {
  width: fit-content;
}
.u-w30px {
  width: 30px !important;
}
.u-w50px {
  width: 50px !important;
}
.u-w100px {
  width: 100px !important;
}
.u-w120px {
  width: 120px !important;
}
.u-w150px {
  width: 150px !important;
}
.u-w200px {
  width: 200px !important;
}
.u-h25 {
  height: 25%;
}
.u-h33 {
  height: 33%;
}
.u-h40 {
  height: 40%;
}
.u-h50 {
  height: 50%;
}
.u-h66 {
  height: 66%;
}
.u-h70 {
  height: 70%;
}
.u-h100 {
  height: 100%;
}
.u-min-width-unset {
  min-width: unset  !important;
}
.u-wmin100 {
  min-width: 100% !important;
}
.u-wmin50 {
  min-width: 50% !important;
}
.u-wmin90 {
  min-width: 90% !important;
}
.u-wmin80 {
  min-width: 80% !important;
}
.u-wmin75 {
  min-width: 75% !important;
}
.u-wmin70 {
  min-width: 70% !important;
}
.u-wmin66 {
  min-width: 66% !important;
}
.u-wmin60 {
  min-width: 60% !important;
}
.u-wmin40 {
  min-width: 40% !important;
}
.u-wmin33 {
  min-width: 33% !important;
}
.u-wmin30 {
  min-width: 30% !important;
}
.u-wmin20 {
  min-width: 20% !important;
}
.u-wmin25 {
  min-width: 25% !important;
}
.u-wmin10 {
  min-width: 10% !important;
}
.u-wmin5 {
  min-width: 5% !important;
}
.u-wmin0 {
  min-width: 0 !important;
}
.u-wmin5rem {
  min-width: 5rem !important;
}
.u-max-width-unset {
  max-width: unset  !important;
}
.u-wmax100 {
  max-width: 100% !important;
}
.u-wmax50 {
  max-width: 50% !important;
}
.u-wmax90 {
  max-width: 90% !important;
}
.u-wmax80 {
  max-width: 80% !important;
}
.u-wmax75 {
  max-width: 75% !important;
}
.u-wmax70 {
  max-width: 70% !important;
}
.u-wmax66 {
  max-width: 66% !important;
}
.u-wmax60 {
  max-width: 60% !important;
}
.u-wmax40 {
  max-width: 40% !important;
}
.u-wmax33 {
  max-width: 33% !important;
}
.u-wmax30 {
  max-width: 30% !important;
}
.u-wmax20 {
  max-width: 20% !important;
}
.u-wmax25 {
  max-width: 25% !important;
}
.u-wmax10 {
  max-width: 10% !important;
}
.u-wmax5 {
  max-width: 5% !important;
}
.u-wmax0 {
  max-width: 0 !important;
}
.u-max-height-unset {
  max-height: unset  !important;
}
.u-hmax100 {
  max-height: 100% !important;
}
.u-hmax95 {
  max-height: 95% !important;
}
.u-hmax90 {
  max-height: 90% !important;
}
.u-hmax80 {
  max-height: 80% !important;
}
.u-hmax75 {
  max-height: 75% !important;
}
.u-hmax70 {
  max-height: 70% !important;
}
.u-hmax66 {
  max-height: 66% !important;
}
.u-hmax60 {
  max-height: 60% !important;
}
.u-hmax50 {
  max-height: 50% !important;
}
.u-hmax40 {
  max-height: 40% !important;
}
.u-hmax33 {
  max-height: 33% !important;
}
.u-hmax30 {
  max-height: 30% !important;
}
.u-hmax20 {
  max-height: 20% !important;
}
.u-hmax25 {
  max-height: 25% !important;
}
.u-hmax10 {
  max-height: 10% !important;
}
.u-hmax5 {
  max-height: 5% !important;
}
.u-hmax0 {
  max-height: 0 !important;
}
/* 

.u-ieMinHeightBugFix {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column
}

.u-full {    width: 100%!important;}
.u-1of3 {    width: 33.3333%;}
.u-1of3, .u-2of3 {    flex: none;}
.u-2of3 {    width: 66.6667%;}
.u-1of4 {    width: 25%;}
.u-1of4, .u-3of4 {    flex: none;}
.u-3of4 {    width: 75%;}
.u-1of2 {    width: 50%;}
.u-1of2, .u-full {    flex: none;}
*/
.u-float-left {
  float: left;
}
.u-float-right {
  float: right ;
}
.u-center {
  text-align: center;
}
.u-left {
  text-align: left;
}
.u-right {
  text-align: right;
}
.u-text-right {
  text-align: right !important;
}
.u-text-left {
  text-align: left !important;
}
.u-text-center {
  text-align: center !important;
}
/* NEW SIMPLIFIED STUFF */
.u-round {
  border-radius: 0.6rem !important;
}
.u-margin {
  margin: 0.5rem;
}
.u-margin-left {
  margin-left: 0.5rem;
}
.u-margin-right {
  margin-right: 0.5rem;
}
.u-margin05 {
  margin: 0.5rem !important;
}
.u-margin-top05 {
  margin-top: 0.5rem !important;
}
.u-margin-bottom05 {
  margin-bottom: 0.5rem !important;
}
.u-margin-bottom {
  margin-bottom: 0.5rem;
}
.u-margin-bottom-big {
  margin-bottom: 2rem;
}
.u-margin-left-big {
  margin-left: 1rem;
}
.u-margin-left-verybig {
  margin-left: 2rem;
}
.u-margin-right-big {
  margin-right: 1rem;
}
.u-margin-big {
  margin: 1rem !important;
}
.u-margin-top-verybig {
  margin-top: 2rem !important;
}
.u-margin-left-2rem {
  margin-left: 2rem;
}
/* END */
.u-padding {
  padding: 0.75rem !important;
}
.u-padding1rem {
  padding: 1rem !important;
}
.u-padding0 {
  padding: 0px !important;
}
.u-padding5 {
  padding: 5px !important;
}
.u-padding10 {
  padding: 10px !important;
}
.u-padding20 {
  padding: 20px !important;
}
.u-padding30 {
  padding: 30px !important;
}
.u-padding40 {
  padding: 40px !important;
}
.u-padding-top0 {
  padding-top: 0 !important;
}
.u-padding-top3 {
  padding-top: 3px !important;
}
.u-padding-top5 {
  padding-top: 5px !important;
}
.u-padding-top10 {
  padding-top: 10px !important;
}
.u-padding-top20 {
  padding-top: 20px !important;
}
.u-padding-top30 {
  padding-top: 30px !important;
}
.u-padding-top40 {
  padding-top: 40px !important;
}
.u-padding-bottom0 {
  padding-bottom: 0px !important;
}
.u-padding-bottom3 {
  padding-bottom: 3px !important;
}
.u-padding-bottom10 {
  padding-bottom: 10px !important;
}
.u-padding-bottom20 {
  padding-bottom: 20px !important;
}
.u-padding-bottom40 {
  padding-bottom: 40px !important;
}
.u-padding-topbottom10 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
/* old */
.u-padding-left5 {
  padding-left: 5px !important;
}
.u-padding-left10 {
  padding-left: 10px !important;
}
.u-padding-left20 {
  padding-left: 20px  !important;
}
.u-padding-right0 {
  padding-right: 0px  !important;
}
.u-padding-right5 {
  padding-right: 5px  !important;
}
.u-padding-right10 {
  padding-right: 10px  !important;
}
.u-padding-right20 {
  padding-right: 20px  !important;
}
.u-padding-right30 {
  padding-right: 30px  !important;
}
/* new */
.u-padding-left-1rem {
  padding-left: 1rem;
}
.u-padding-left-2rem {
  padding-left: 2rem;
}
.u-padding-left-5rem {
  padding-left: 5rem;
}
.u-padding-right-1rem {
  padding-right: 1rem;
}
.u-padding-right-2rem {
  padding-right: 2rem;
}
.u-margin0 {
  margin: 0px !important;
}
.u-margin5 {
  margin: 5px !important;
}
.u-margin10 {
  margin: 10px !important;
}
.u-margin20 {
  margin: 20px !important;
}
.u-margin30 {
  margin: 30px !important;
}
.u-margin40 {
  margin: 40px !important;
}
.u-margin-top0 {
  margin-top: 0 !important;
}
.u-margin-top5 {
  margin-top: 5px !important;
}
.u-margin-top10 {
  margin-top: 10px !important;
}
.u-margin-top20 {
  margin-top: 20px !important;
}
.u-margin-right0 {
  margin-right: 0 !important;
}
.u-margin-right5 {
  margin-right: 5px !important;
}
.u-margin-right10 {
  margin-right: 10px !important;
}
.u-margin-right20 {
  margin-right: 20px !important;
}
.u-margin-right30 {
  margin-right: 30px !important;
}
.u-margin-bottom0 {
  margin-bottom: 0px !important;
}
.u-margin-bottom5 {
  margin-bottom: 5px !important;
}
.u-margin-bottom10 {
  margin-bottom: 10px !important;
}
.u-margin-bottom20 {
  margin-bottom: 20px !important;
}
.u-margin-bottom30 {
  margin-bottom: 30px !important;
}
.u-margin-bottom40 {
  margin-bottom: 40px !important;
}
.u-margin-left0 {
  margin-left: 0 !important;
}
.u-margin-left5 {
  margin-left: 5px!important;
}
.u-margin-left10 {
  margin-left: 10px !important;
}
.u-margin-left20 {
  margin-left: 20px !important;
}
.u-margin-left40 {
  margin-left: 40px !important;
}
.u-italic {
  font-style: italic;
}
.u-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.u-white-space-nowrap {
  white-space: nowrap !important;
}
.u-white-space-wrap {
  white-space: normal !important;
}
/* 
.u-margin-right240 {margin-right: 240px  !important;;}
.u-margin-left240 {margin-right: 240px  !important;;}
.u-margin-0-auto {margin: 0 auto;}
*/
.u-font-unset {
  font-size: unset !important;
}
.u-font-07 {
  font-size: 0.7rem !important;
}
.u-font-08 {
  font-size: 0.8rem !important;
}
.u-font-09 {
  font-size: 0.9rem !important;
}
.u-font-1x {
  font-size: 1rem !important;
}
.u-font-1-1x {
  font-size: 1.1rem !important;
}
.u-font-1-2x {
  font-size: 1.2rem !important;
}
.u-font-1-3x {
  font-size: 1.3rem !important;
}
.u-font-1-4x {
  font-size: 1.4rem !important;
}
.u-font-1-5x {
  font-size: 1.5rem !important;
}
.u-font-1-7x {
  font-size: 1.7rem !important;
}
.u-font-1-9x {
  font-size: 1.9rem !important;
}
.u-font-2x {
  font-size: 2rem  !important;
}
.u-font-3x {
  font-size: 3rem  !important;
}
/* .u-font-4x {font-size: 4rem  !important;} */
/* .u-font-5x {font-size: 5rem  !important;} */
.u-line-through {
  text-decoration: line-through;
}
.u-bold {
  font-weight: bold;
}
.u-unbold {
  font-weight: normal;
}
.u-font-normal {
  font-weight: normal;
}
.u-underline {
  text-decoration: underline;
}
.u-cursor-pointer {
  cursor: pointer;
}
.u-pointer-events-none {
  pointer-events: none;
}
.u-pointer-events-unset {
  pointer-events: unset;
}
.u-underline-none {
  text-decoration: none !important;
}
.u-line-through {
  text-decoration: line-through;
}
.u-line-through-all > * {
  text-decoration: line-through;
}
/*
.u-underline-pointer { text-decoration: underline;    cursor: pointer;}
.u-border-underline {border-bottom: 1px solid;}

.u-vertical-align-top { vertical-align: top;}
.u-vertical-align-middle { vertical-align: middle;}
.u-vertical-align-middle2 { position: relative; top: 50%; transform: translateY(-50%);}
*/
.u-align-middle-vert {
  top: 50%;
  transform: translateY(-50%);
}
.u-align-middle-horz {
  left: 50%;
  transform: translateX(-50%);
}
/* .u-border {border: 1px solid #ccc;} */
.u-border-light {
  border: 1px solid #ccc !important;
}
.u-border-dark {
  border: 1px solid #111 !important;
}
.u-border-big {
  border: 5px solid #999 !important;
}
/* .u-border-right {border-right: 1px solid #ccc;} */
/* .u-border-left {border-left: 1px solid #ccc;} */
/* .u-border-bottom {border-bottom: 1px solid #ccc;} */
/* .u-border-top {border-top: 1px solid #ccc;}  */
.u-border {
  border: 1px solid #777;
}
.u-border-strong {
  border: 1px solid #333;
}
.u-border-dotted {
  border: 1px dotted #111;
}
.u-border-top {
  border-top: 1px solid #999;
}
.u-border-right {
  border-right: 1px solid #999;
}
.u-border-bottom {
  border-bottom: 1px solid #999;
}
.u-border-left {
  border-left: 1px solid #999;
}
.u-border-none {
  border: 0;
}
.u-border-bottom-light {
  border-bottom: 1px solid #ccc;
}
.u-border-bottom-dark {
  border-bottom: 1px solid #111;
}
.u-border-top-dark {
  border-top: 1px solid #111;
}
.u-border-bottom-none {
  border-bottom: 0 !important;
}
.u-border-radius-none {
  border-radius: 0 !important;
}
.u-border-radius-tiny {
  border-radius: 3px !important;
}
.u-border-radius {
  border-radius: 0.6rem;
}
.u-border-radius-match-scrollbar {
  border-radius: 9px;
}
.u-border-radius-small {
  border-radius: 6px;
}
.u-border-radius-medium {
  border-radius: 12px;
}
.u-border-radius-large {
  border-radius: 24px;
}
.u-border-circle {
  border-radius: 50%;
}
.u-top-left-btn {
  border-bottom-left-radius: 0;
}
.u-top-right-btn {
  border-bottom-right-radius: 0;
}
.u-bot-left-btn {
  border-top-left-radius: 0;
  border-top: none;
}
.u-bot-right-btn {
  border-top-right-radius: 0;
  border-top: none;
}
.u-bg-white {
  background-color: #FFF !important;
}
.u-fg-black {
  color: #000 !important;
}
.u-fg-white {
  color: #FFF !important;
}
.u-fg-red {
  color: #F00 !important;
}
.u-fg-niceblue {
  color: #06ed !important;
}
.u-fg-green {
  color: forestgreen  !important;
}
.u-bg-green {
  background-color: forestgreen  !important;
}
.u-bg-dark {
  background-color: #303030 !important;
}
.u-bg-medium {
  background-color: #777 !important;
}
.u-bg-medium-light {
  background-color: #aaa !important;
}
.u-bg-light {
  background-color: #F2F2F2 !important;
}
.u-bg-msgs {
  background-color: #aaa !important;
}
.u-color-dark {
  color: #181818 !important;
}
.u-color-medium {
  color: #777 !important;
}
.u-color-light {
  color: #aaa !important;
}
.u-color-niceblue {
  color: #06ed !important;
}
.u-color-niceyellow {
  color: lemonchiffon !important;
}
.u-color-nicered {
  color: orangered !important;
}
.u-bg-bluewhite {
  background-color: aliceblue !important;
}
.u-bg-transparent {
  background-color: transparent !important;
}
.u-bg-niceblue {
  background-color: #06ed !important;
}
.u-bg-niceyellow {
  background-color: lemonchiffon !important;
}
.u-bg-nicered {
  background-color: orangered !important;
}
.u-bg-nicegreen {
  background-color: forestgreen !important;
}
.u-bg-ddd {
  background-color: #ddd !important;
}
.u-bg-readonly {
  background-color: #fafafa !important;
}
.u-fg-readonly {
  color: #111 !important;
}
.u-border-keynotes {
  border: 0.1rem solid #ccc;
}
.u-cf {
  zoom: 1;
}
.u-cf:after {
  clear: both;
  content: '.';
  display: block;
  font-size: 0;
  height: 0;
  line-height: 0;
  visibility: hidden;
}
.u-shadow-below {
  margin-bottom: 6px;
  -webkit-box-shadow: 0 2px 3px 0px #ccc;
  -moz-box-shadow: 0 2px 3px 0px #ccc;
  box-shadow: 0 2px 3px 0px #ccc;
  z-index: 2;
}
.u-card-shadow {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.u-menu-shadow {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.u-page-shadow {
  box-shadow: 0 4px 5px rgba(75, 75, 75, 0.2);
}
/*********************************************
utilites
*********************************************/
.u-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  z-index: 99999;
  height: 100vh;
  width: 100vw;
  overflow: none;
}
/* --------------------------------------------
specials: placeholder & webkit-scrollbar
-------------------------------------------- */
::placeholder {
  font-style: italic;
}
::-webkit-scrollbar {
  width: 14px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 9px;
  background-color: blue;
  background-color: #dfdfdf;
  color: white;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  background-image: linear-gradient(#f9f9f9, #c2c2c2);
  background-color: #FFF;
  border: none;
}
/* clear floats */
.u-group:before,
.u-group:after {
  content: "";
  display: table;
}
.u-group:after {
  clear: both;
}
.u-group {
  clear: both;
  *zoom: 1;
}
/* csl-common */
.u-row-container {
  display: flex;
  flex-direction: row;
  padding: 10px;
  width: 100%;
  align-items: center;
}
.u-sunken,
.u-raised {
  background-color: #eee;
  color: #777;
  border-radius: 4px;
}
.u-sunken {
  border-right: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.u-raised {
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.u-ease-in {
  transition: all 1s ease-in;
}
.u-grow-small:hover {
  transform: scale(1.2);
}
.u-grow:hover {
  transform: scale(1.5);
}
.u-underline-on-hover:hover {
  text-decoration: underline !important;
}
/*
.u-notransition {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}
*/
.u-text-lowercase {
  text-transform: lowercase;
}
.u-text-uppercase {
  text-transform: uppercase;
}
.u-text-capitalize {
  text-transform: capitalize;
}
.u-hilite-underline {
  border-bottom: 1px solid #f1722c;
}
.u-ellipsize-left {
  flex: 0 0 auto;
  /* Standard CSS ellipsis */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Beginning of string */
  direction: rtl;
  text-align: left;
}
.u-shadow {
  /*   margin: 0.75rem;   */
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.u-dashitem-shadow {
  box-shadow: 0px 1px 22px -12px #607D8B;
}
.u-margin-top {
  margin-top: 1rem !important;
}
.u-margin-bottom {
  margin-bottom: 1rem  !important;
}
.u-margin-bottom-none {
  margin-bottom: 0  !important;
}
.u-padding-top {
  padding-top: 1rem  !important;
}
.u-padding-bottom {
  padding-bottom: 1rem  !important;
}
.u-padding-right {
  padding-right: 1rem  !important;
}
.u-padding-left {
  padding-left: 1rem  !important;
}
.u-padding-horz {
  padding-left: 1rem  !important;
  padding-right: 1rem  !important;
}
.u-padding-vert {
  padding-top: 1rem  !important;
  padding-bottom: 1rem  !important;
}
.u-border-go1,
.u-border-csl {
  border: 0.5rem solid #ccc;
}
.u-text-overflow-ellipsis {
  /* show ellipsis if overflowing */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto !important;
}
.u-always-column {
  flex-direction: column !important;
}
.u-always-row {
  flex-direction: row !important;
}
.u-absolute-top-left {
  position: absolute;
  top: 0;
  left: 0;
}
.u-absolute-top-right {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
}
.u-absolute-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
  top: unset !important;
  left: unset !important;
}
.u-absolute-bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
}
.u-absolute-centred-right {
  position: absolute !important;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.u-filter-drop-shadow-cmp {
  filter: drop-shadow(0px 0px 3px #999);
}
.u-filter-drop-shadow {
  filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
}
.u-drop-shadow {
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));
}
.u-csl-background-image {
  background-image: linear-gradient(#f9f9f9, #c2c2c2);
}
.u-nodata {
  flex: 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  background-color: #FFF;
  text-decoration: underline;
  font-weight: bold;
  color: #06ed;
}
.u-top-left-info,
.u-top-right-info,
.u-bottom-left-info,
.u-bottom-right-info {
  padding: 1px 3px;
  font-size: 0.8rem;
  position: absolute;
  right: 0;
  z-index: 98;
}
.u-top-left-info,
.u-top-right-info {
  top: 0;
}
.u-top-left-info {
  left: 0;
}
.u-bottom-right-info {
  right: 0;
  bottom: 0;
  border-radius: 0 !important;
}
.u-bottom-left-info {
  left: 1px;
  bottom: 0;
  border-radius: 0 !important;
}
.u-down {
  background-color: #777;
  background-image: linear-gradient(#111, #777);
  text-shadow: none;
  color: #FFF;
  border-radius: 50%;
}
.u-absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.u-position-offscreen {
  position: fixed;
  left: -1000px;
  top: -1000px;
}
.u-always-column {
  flex-direction: column !important;
}
.u-always-row {
  flex-direction: row !important;
}
.u-flex-wrap-sm {
  flex-wrap: wrap;
}
.u-flex-gap {
  gap: 0.5rem;
}
.u-flex-gap-05rem {
  gap: 0.5rem;
}
.u-flex-gap-1rem {
  gap: 1rem ;
}
.drop-shadow-verylight {
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.3));
}
.drop-shadow-light {
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
}
.drop-shadow-dark {
  filter: drop-shadow(0px 3px 3px #000000);
}
.u-z-index-low {
  z-index: 1 !important;
}
.u-z-index-min {
  z-index: 299 !important;
}
.u-z-index-med {
  z-index: 499 !important;
}
.u-z-index-high {
  z-index: 999 !important;
}
.u-z-index-max {
  z-index: 9999 !important;
}
.u-z-index-appbar {
  z-index: 99999 !important;
}
/*
  Based on:
  1. http://stephen.io/mediaqueries
  2. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
*/
/* iPhone 6 in portrait */
@media only screen and (min-device-width: 280px) and (max-device-width: 740px) and (orientation: portrait) {
  .app-bar {
    background-image: linear-gradient(45deg, #4d90fe 140px, transparent 140px), linear-gradient(to bottom, #5B8AD4, #82B2FC) !important;
  }
  .app-bar__brand {
    /* min-width: 220px !important; */
    flex: 0 0 215px !important;
  }
  .top-bar {
    color: #FFF;
    background-color: #f1722c;
  }
  .leftzone {
    transition: none !important;
  }
  .leftzone .cs-view {
    max-height: calc(100vh - 96px);
  }
  .leftzone.show {
    flex: 0;
    z-index: 999;
    box-shadow: none;
    min-width: 100%;
    max-width: 100%;
  }
  .mainzone.loggedin {
    background-image: url(/img/home-mobile.png) !important;
  }
  .cs-view-detail {
    padding: 0;
  }
  .cs-subview-detail {
    margin: 0;
  }
  .gwrapper {
    padding: 0.5rem;
  }
  .gwrapper,
  .grow,
  .row {
    flex-direction: column !important;
    align-self: flex-start;
    width: 100%;
    flex: 1 0 auto;
  }
  .gcol,
  .col {
    width: 100%;
    flex: 1 1 auto;
  }
  .grow,
  .row {
    width: 100%;
    flex: 0 0 auto;
  }
  /* .row {
    margin: 0px 0 10px 0;
  }

  .col {
    margin: 0px 0 10px 0;
  } */
  .row .col {
    min-width: 100% !important;
    align-self: flex-start;
    align-items: start;
    flex: 1 0 auto;
    margin-bottom: 0.5rem;
  }
  .cs-label {
    /* padding-right: .5rem; */
    width: 100% ;
    /* text-align: left; */
    /* text-align: left !important; */
  }
  .cs-field {
    width: 100% ;
  }
  .cs-label-min {
    min-width: unset;
  }
  .col.show-legend-pad {
    margin: 10px 0 10px 0;
  }
  /* 
  .col.companyname, .col.companyname>.cs-input-group, .cs-input-group.companyname {
    width: 100%;
  }


  .horz {
    flex-direction: row;
    align-items: flex-start;
  } */
  /* .col.data-entry {
    min-width: 5rem;
    text-align: right;
    margin-right: 0.5rem;
  } */
  .col.data-entry {
    width: unset;
    align-self: auto;
    margin-bottom: 1rem;
    /* padding-bottom: 1rem;   */
    /* border-bottom: 1px solid #777; */
  }
  .col.data-entry .row {
    flex: 0 0 auto;
    flex-direction: column !important;
    align-items: start;
  }
  .col.data-entry .cs-label {
    min-width: 6rem;
    width: auto !important;
  }
  .row > .row > .cs-label,
  .col > .row > .cs-label {
    text-align: left;
  }
  .col.textarea .row .cs-label {
    text-align: left !important;
  }
  .row.singlerow {
    margin-bottom: 1rem;
  }
  .row.singlerow > .row {
    flex-direction: row !important;
    padding-bottom: 0.5rem;
  }
  .row.singlerow > .col {
    min-width: 0 !important;
    width: auto !important;
  }
  .row.singlerow .row .cs-label {
    width: auto;
    min-width: 6rem;
    max-width: 6rem;
    text-align: right;
  }
  .cs-label--right {
    text-align: left !important;
  }
  .col > .row > .cs-label {
    min-width: 6rem;
    text-align: left !important;
  }
  .cs-input-group {
    width: 100%;
  }
  .cs-view-header {
    padding: 0;
  }
  .cs-entity-block {
    min-height: 110px;
    max-height: 130px;
    margin-right: 0 !important;
    border-radius: 0;
    box-shadow: none;
  }
  .cs-entity-action-links {
    position: absolute;
    right: unset;
    left: 4rem;
    bottom: 0.2rem;
  }
  .entity-header.jumplinks {
    right: 0.5rem;
    top: 4.7rem;
  }
  .cs-view-header__actionbar .cs-toolbar__icon {
    font-size: 1.3rem;
  }
  span.cs-validation-error-msg {
    width: 100%;
  }
  .cs-view-header.cs-major-view {
    padding: 0;
  }
  .cs-view-header .cs-entity-block {
    padding: 1rem;
    padding-right: 1rem;
    margin-right: 0;
    box-shadow: none;
  }
  .cs-entity-block__aside > div {
    margin-right: 0;
  }
  .cs-view-header-block__heading {
    font-size: 1.1rem;
    line-height: 1rem;
    padding-top: 0.4rem;
    padding-bottom: 3px;
  }
  .cs-entity-block__heading {
    font-size: 1.1rem;
    line-height: 1.3rem;
  }
  .cs-entity-block__subheading {
    font-size: 0.9rem;
    padding-bottom: 1rem;
  }
  .cs-subview-mount {
    border-radius: 0;
  }
  /*  TIMELINE */
  .cs-tabset {
    font-size: 0.8rem;
  }
  /*  TIMELINE */
  .cs-timeline {
    border-radius: 0;
    padding: 0.25rem;
  }
  .cs-timeline-icon i {
    font-size: 1.2rem;
  }
  .cs-timeline .cs-item__header {
    margin: 0;
  }
  .cs-timeline .cs-item__body {
    padding-top: 0.7rem !important;
  }
  .cs-timeline-header {
    display: block;
  }
  .cs-item.cs-expandable__heading.hasmore.pointing-down .cs-item__header {
    margin-bottom: 0.5rem;
  }
  .modal-container {
    min-width: 360px;
    max-width: 370px;
  }
  .modal-container.modal-select-tree,
  .modal-container.modal-select-list,
  .modal-container.modal-db-searcher,
  .modal-container.tagselect {
    min-width: 370px;
    max-width: 370px;
    min-height: 515px;
    max-height: 515px;
  }
  .modal-container.cs-cal.mini {
    min-width: 370px;
    max-width: 370px;
    min-height: 350px;
  }
  modal-header h3 {
    font-size: 1.1rem;
  }
  .modal-input .modal-body {
    flex-wrap: wrap;
  }
  .row.always-horz {
    flex-direction: row !important;
  }
  .col.always-flex0 {
    flex: 0 !important;
  }
  .foldersmount,
  .detailmount {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    overflow: hidden;
    z-index: 999;
    max-height: 410px;
  }
  .foldersmount {
    max-width: 100px !important;
    left: 0;
  }
  .detailmount {
    right: 0;
    max-width: 250px !important;
  }
  .foldersmount.show .csl-tree,
  .detailmount.show .filedetail {
    margin: 0.5rem;
    max-height: 450px;
    flex: 1 !important;
    overflow-y: auto;
  }
  .detailmount.show .filedetail {
    padding: 0.5rem;
  }
  .cs-list {
    font-size: 0.9rem;
  }
  .cs-item__body p {
    font-size: 0.7rem;
  }
  .cs-item__body p.line3 {
    font-size: 0.7rem;
    color: #111;
  }
  .cs-toast {
    max-width: 320px;
  }
  .tempbookingfinder-wrapper {
    left: 50%;
    top: 50%;
    transform: translate(-50%, 50%);
  }
  .modal-container.modal-container__address {
    max-height: 630px;
  }
  .row.u-always-row {
    flex-direction: row !important;
  }
  .cs-view-header.cs-major-view .cs-view-header__actionbar {
    top: 0.4rem;
    right: 0.3rem;
  }
}
/* --------------- app-bars ----------------*/
.app-bar {
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  min-height: 50px;
  z-index: 100;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.14), 0 4px 4px rgba(0, 0, 0, 0.28);
}
.app-bar__brand,
.top-bar__brand {
  flex: 0 0 355px;
  display: flex;
  align-items: center;
  min-width: 355px;
  user-select: none;
  padding-left: 10px;
  font-family: 'Helvetica Neue', Arial, 'Open Sans', Helvetica, Verdana, sans-serif;
  font-size: 1.7rem;
  font-style: italic;
  font-weight: bold;
}
.app-bar__brand {
  text-shadow: 1px 1px 3px #111;
}
.app-bar__notify {
  flex: 1;
  height: 38px;
  margin: 0.5rem;
  border-radius: 0.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
}
.app-bar__brand i.icm-go-1 {
  margin-right: 0.5rem;
  font-size: 1.9rem;
  filter: drop-shadow(2px 2px 3px #FFF) drop-shadow(-2px -2px 3px #FFF);
  color: navy;
  text-shadow: none;
}
.app-bar__brand i.icm-go-1:hover {
  margin-right: 0.5rem;
  font-size: 1.9rem;
  color: lightyellow;
  filter: drop-shadow(2px 2px 2px #000);
}
.app-bar__icons {
  font-size: 1.5rem;
  margin-left: 1rem;
}
.top-bar {
  flex: 0 0 46px;
  min-height: 46px;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 1;
  line-height: 46px;
}
.top-bar--main {
  margin-top: 50px;
}
.app-bar.topbar-isabsolute {
  background-image: linear-gradient(45deg, #4d90fe 255px, transparent 255px), linear-gradient(to bottom, #5B8AD4, #82B2FC);
}
.top-bar {
  background-image: none;
}
.top-bar.isabsolute {
  position: absolute;
  top: 50px;
  z-index: 99999;
  width: 360px;
  border-right: 1px solid #aaaaaa;
  box-shadow: rgba(0, 0, 0, 0.14) 3px 0px 2px;
}
.leftzone.show.topbar-isabsolute {
  margin-top: 46px !important;
}
.top-bar__right-actions {
  margin-left: auto;
  margin-right: 5px;
  display: flex;
  align-items: center;
}
.top-bar__brand {
  height: 46px;
  flex: 1;
  font-size: 1.5rem;
  text-align: center;
  text-shadow: none;
  padding: 0 1rem;
}
.js-top-bar-icons {
  height: 100%;
  display: inline-block;
}
.top-bar i,
.top-bar__brand i {
  font-size: 1.5rem;
  line-height: inherit;
}
.top-bar button i {
  font-size: 1.1rem;
}
.history-toolbar {
  margin-left: 3.5rem;
}
.app-bar i {
  margin-right: 10px;
  font-size: 1.7rem;
  text-shadow: none;
}
.app-bar .cs-menu i {
  padding: 9px;
  font-size: 1.5rem;
}
.app-menu {
  padding: 0.5rem;
  margin: 0;
  margin-right: 10px;
}
.app-menu .cs-menu__item {
  font-size: 1.2rem;
  padding: 0.7rem;
}
.app-menu i {
  font-size: 1.3rem !important;
  padding: 0.5rem;
}
.app-bar i:hover i {
  text-shadow: none !important;
}
/* --------------- app-color ----------------*/
.color-bg-parkrun-alert {
  background-color: #e21145;
}
.color-fg-parkrun-alert {
  color: #e21145;
}
.icm-stripe-fg {
  color: #556cd6;
}
.icm-stripe-bg {
  background-color: #556cd6;
}
.icm-8,
.icm-54,
.icm-tempbooking,
.icm-booking,
.icm-booking-centre {
  /* background-color: transparent; */
  color: #80008099;
}
.icm-10,
.icm-candidate {
  /* background-color: transparent; */
  color: chocolate !important;
}
.icm-68,
.icm-tempworker {
  /* background-color: transparent; */
  color: crimson;
}
.icm-booking-centre.bgcol {
  background-color: #FFF !important;
  color: #80008099 !important;
  padding: 5px 3px !important;
}
.icm-0,
.icm-system {
  /* background-color: transparent; */
  color: #555 !important;
}
.icm-0.bgcol,
.icm-world.bgcol {
  color: #FFF !important;
  background-color: #333 !important;
}
.icm-1,
.icm-user {
  /* background-color: transparent; */
  color: coral !important;
}
.app-bar .icm-1,
.app-bar .icm-user,
.vert-appbar .icm-user {
  /* background-color: transparent; */
  color: #FFF !important;
}
.icm-1.bgcol,
.icm-user.bgcol {
  color: #FFF !important;
  background-color: coral !important;
}
.icm-2,
.icm-contact {
  /* background-color: transparent; */
  color: #a4ceff !important;
}
.icm-2.bgcol,
.icm-contact.bgcol {
  color: #FFF !important;
  background-color: #a4ceff !important;
}
.icm-2.bgcol.recip,
.icm-contact.bgcol.recip {
  color: #000 !important;
  background-color: #a4ceff !important;
}
.icm-3,
.icm-company {
  /* background-color: transparent; */
  color: green !important;
}
.icm-3.bgcol,
.icm-company.bgcol {
  color: #FFF !important;
  background-color: green !important;
}
.icm-3.bgcol.recip,
.icm-company.bgcol.recip {
  color: #000 !important;
  background-color: #90d490 !important;
}
.icm-6,
.icm-client,
.icm-companycontact {
  /* background-color: transparent; */
  color: cornflowerblue !important;
}
.icm-6.bgcol,
.icm-client.bgcol,
.icm-companycontact.bgcol {
  color: #FFF !important;
  background-color: cornflowerblue !important;
}
.icm-7,
.icm-vacancy,
.icm-vacancy-centre {
  /* background-color: transparent; */
  color: #ffc107 !important;
}
.icm-7.bgcol,
.icm-vacancy.bgcol {
  color: #FFF !important;
  background-color: #ffc107 !important;
}
.icm-vacancy-centre.bgcol {
  background-color: #FFF !important;
  color: #ffc107 !important;
}
.icm-8.bgcol,
.icm-54.bgcol,
.icm-tempbooking.bgcol,
.icm-booking.bgcol {
  color: #FFF !important;
  background-color: #80008099 !important;
}
.icm-10.bgcol,
.icm-candidate.bgcol {
  color: #FFF !important;
  background-color: chocolate !important;
}
.icm-10.bgcol.recip,
.icm-candidate.bgcol.recip {
  color: #FFF !important;
  background-color: #d2691eb3 !important;
}
.tabs-candidate .cs-tabset__item.active:after {
  background-color: #d2691eb3;
}
.icm-20,
.icm-document {
  /* background-color: transparent; */
  color: sienna !important;
}
.icm-20.bgcol,
.icm-document.bgcol {
  color: #FFF !important;
  background-color: sienna !important;
}
.icm-48,
.icm-lists {
  /* background-color: transparent; */
  color: #777 !important;
}
.icm-lists.bgcol {
  color: #FFF !important;
  background-color: #777 !important;
}
.icm-viewheader.bgcol {
  color: #FFF !important;
  background-color: #ff4500 !important;
}
.icm-system.bgcol {
  color: #FFF !important;
  background-color: #555 !important;
}
.icm-contact.icm-new-contact.bgcol {
  background-color: #a4ceff !important;
}
.icm-map.bgcol {
  background-color: #ccc;
}
.icm-tempbooking.bgcol.icm-viewheader-color,
.icm-viewheader.bgcol,
.icm-viewheader {
  /* background-color: transparent; */
  color: #ff4500 !important;
}
.icm-tempbooking.bgcol.icm-viewheader-color {
  background-color: transparent  !important;
  color: #ff4500 !important;
}
.new-contact-bg,
.contact-bg {
  background-attachment: fixed;
  background-image: linear-gradient(#a4ceff, #fff) !important;
}
.companycontact-bg {
  background-attachment: fixed;
  background-image: linear-gradient(#EDF3FE, #7ba5f3) !important;
}
.client-bg,
.company-bg {
  background-attachment: fixed;
  background-image: linear-gradient(#d0f8d0, #90d490) !important;
}
.candidate-bg {
  background-attachment: fixed;
  background-image: linear-gradient(#f0dbcc, #d2691e99) !important;
  /* background: #d2691e99 !important; */
}
.vacancy-bg {
  background-attachment: fixed;
  background-image: linear-gradient(#f6f6dc, #fbef77) !important;
}
.tempbooking-bg,
.booking-bg {
  background-attachment: fixed;
  background: #f2f2f9;
}
.user-bg {
  background-attachment: fixed;
  background-image: linear-gradient(#fbf9f9, lightgrey) !important;
}
.tabs-booking .cs-tabset__item.active:after {
  background-color: #80008099;
}
.tabs-candidate .cs-tabset__item.active:after {
  background-color: chocolate;
}
.tabs-contact .cs-tabset__item.active:after {
  background-color: #a4ceff;
}
.tabs-company .cs-tabset__item.active:after {
  background-color: green;
}
.tabs-companycontact .cs-tabset__item.active:after {
  background-color: cornflowerblue;
}
.tabs-user .cs-tabset__item.active:after {
  background-color: darkgrey;
}
.tabs-vacancy .cs-tabset__item.active:after {
  background-color: #ffc107;
}
.bg-none {
  background-color: transparent;
}
.fg-none {
  color: transparent;
}
.icm-fg-normal {
  color: #555 !important;
}
.icm-bg-normal {
  background: transparent  !important;
}
.icm-hdr {
  color: #FFF !important;
}
.icm-viewheader-color {
  color: #ff4500 !important;
}
.icm-has-alerts {
  color: #ff4500 !important;
}
.fgcolor_highlight {
  color: #0366d6;
}
.icm-workarea-icon-1.icm-booking-centre,
.icm-workarea-icon-1 {
  /* background-color: transparent; */
  color: #777 !important;
}
.icm-workarea {
  /* background-color: transparent; */
  color: #0366d6 !important;
}
.icm-workarea.bgcol {
  color: #FFF !important;
  background-color: #0366d6 !important;
}
.icm-workarea-icon-1.icm-booking-centre {
  border-color: #999;
}
.icm-folder {
  color: chocolate !important;
}
.color-red {
  color: red !important;
}
.color-orange {
  color: orange !important;
}
.color-green {
  color: green !important;
}
.color-white {
  color: #FFF !important;
}
.color-blue {
  color: #0366d6 !important;
}
.bgcolor-red {
  background: red !important;
}
.bgcolor-orange {
  background: orange !important;
}
.bgcolor-green {
  background: green !important;
}
.bgcolor-blue {
  background: #0366d6 !important;
}
.company-bg .cs-form-heading {
  border-bottom: 1px solid green;
}
.company-bg .cs-checkbox + .cs-checkbox-label:before,
.company-bg .cs-radio + .cs-radio-label:before,
.company-bg .cs-radio + .cs-radio-label:after {
  color: green;
}
.companycontact-bg .cs-form-heading {
  border-bottom: 1px solid cornflowerblue;
}
.companycontact-bg .cs-checkbox + .cs-checkbox-label:before,
.companycontact-bg .cs-radio + .cs-radio-label:before,
.companycontact-bg .cs-radio + .cs-radio-label:after {
  color: cornflowerblue;
}
.contact-bg .cs-form-heading {
  border-bottom: 1px solid #76b3f9;
}
.contact-bg .cs-checkbox + .cs-checkbox-label:before,
.contact-bg .cs-radio + .cs-radio-label:before,
.contact-bg .cs-radio + .cs-radio-label:after {
  color: #76b3f9;
}
.candidate-bg .cs-form-heading {
  border-bottom: 1px solid chocolate;
}
.candidate-bg .cs-checkbox + .cs-checkbox-label:before,
.candidate-bg .cs-radio + .cs-radio-label:before,
.candidate-bg .cs-radio + .cs-radio-label:after {
  color: chocolate;
}
.vacancy-bg .cs-form-heading {
  border-bottom: 1px solid #ffc107;
}
.vacancy-bg .cs-checkbox + .cs-checkbox-label:before,
.vacancy-bg .cs-radio + .cs-radio-label:before,
.vacancy-bg .cs-radio + .cs-radio-label:after {
  color: #ffc107;
}
/* TO REVIEW
.cs-subview.contact .cs-toolbar.cs-toolbar--icon li i {  background-color: #a4ceff   !important;}
.cs-subview.company .cs-toolbar.cs-toolbar--icon li i {  background-color: green !important;}
.cs-subview.companycontact .cs-toolbar.cs-toolbar--icon li i {  background-color: #a4ceff   !important;}
.cs-subview.candidate .cs-toolbar.cs-toolbar--icon li i {  background-color: chocolate  !important;}
.cs-subview.vacancy .cs-toolbar.cs-toolbar--icon li i {  background-color:#ffc107  !important;}
.cs-subview.list .cs-toolbar.cs-toolbar--icon li i {  background-color:#777  !important;}
*/
.criteria-search {
  background-color: lemonchiffon;
  color: blue;
}
/* --------------- app-layout ----------------*/
body {
  display: flex;
  flex-direction: column;
}
.app-bar {
  order: 0;
}
.top-bar {
  order: 1;
}
.wrapper {
  order: 3;
  flex: 1 0;
  display: flex;
  overflow: hidden;
}
.mainzone-wrapper {
  flex: 1;
  order: 2;
  display: flex;
  background-color: transparent !important;
}
.mainzone {
  flex: 1;
  display: flex;
  flex-direction: row;
  order: 1;
  overflow: hidden;
}
.mainzone.loggedin {
  background-image: url(/img/home.png);
  background-position: center;
  background-repeat: no-repeat;
}
.mainzone.loggedin.nobgimage {
  background-image: none;
}
.leftzone {
  flex: 0;
  order: 1;
  padding-top: 0px;
  align-items: normal;
  display: none;
  z-index: 99;
  background: #fff;
  /* box-shadow: 8px 0 10px -6px black; */
  box-shadow: 3px 0 2px rgba(0, 0, 0, 0.14), 0px 3px 3px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  opacity: 0;
}
.leftzone.show {
  flex: 0 0 360px;
  display: flex;
  opacity: 1;
}
.leftzone .cs-view {
  height: calc(100vh - 96px);
}
.rightzone {
  overflow: hidden;
  flex: 0;
  order: 10;
  width: 0;
}
.rightzone.show {
  flex: 0 0 360px;
  width: 360px;
}
.notifyzone {
  position: absolute;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 999999;
  width: 0;
  top: 50px;
  display: flex;
}
.mainzone.splitscreen > .cs-view-order1 {
  flex: 1;
}
.mainzone.splitscreen > .cs-view-order2 {
  max-width: 50%;
  margin-left: auto;
  flex: 0 0 50%;
  order: 2;
  border-left: 1px solid #aaa;
}
.notifyzone .cs-view-header,
.leftzone .cs-view-header,
.rightzone .cs-view-header,
.app-reporter .cs-view-header,
.app-listmanager .cs-view-header,
.app-documenter .cs-view-header,
.app-gdprmanager .cs-view-header,
.app-newcompany .cs-view-header {
  flex: 0 0 100px;
}
.emailman-mount,
.directman-mount,
.chattyman-mount {
  height: calc(100vh - 250px);
}
/* --------------- quicky ----------------*/
.quicky {
  flex: 0 0 auto !important;
  padding: 20px 20px 10px 20px;
}
.quicky-row {
  align-items: center;
  margin-bottom: 10px;
}
.quicky button {
  flex: 0 0 20px;
}
.rightzone-nav-heading {
  padding: 6px 10px;
  margin: 0px 0px 10px 0px;
  cursor: pointer;
  user-select: none;
  text-align: center;
  color: #054dc3;
}
.autocomplete i {
  position: relative;
  padding: 5px 0px 5px 5px;
}
.activitylist-icon {
  color: #0366d6;
  text-align: center;
  font-size: 1.5rem;
}
.find-results {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
}
.mainzone .accent-bg {
  background: #5287df;
  background: -webkit-linear-gradient(to right, #61b9ff, #5287DF);
  background: linear-gradient(to right, #61b9ff, #5287DF);
  height: 600px;
  left: -25%;
  position: absolute;
  width: 150%;
  height: calc(100vh - 150px);
  z-index: -1;
}
.mainzone .accent-bg.accent-bg-1,
.mainzone .accent-bg.accent-bg-2 {
  top: 50px;
}
.mainzone .accent-bg.accent-bg-1 {
  border-radius: 0 0 50% 75%;
  opacity: 0.3;
}
.mainzone .accent-bg.accent-bg-2 {
  border-radius: 0 0 75% 50%;
  opacity: 0.5;
}
.mainzone .accent-bg.accent-bg-3 {
  border-radius: 0 0 50% 50%;
  top: 0;
}
.cs-heading {
  font-size: 1.5rem;
  text-align: center;
  margin: 10px 10px 0px 10px;
}
.app-heading {
  background-image: linear-gradient(to bottom, #5B8AD4, #82B2FC);
  color: #FFF;
  padding: 3px 12px;
  /* border: 1px solid #777; */
  font-size: 1rem;
}
.frontdesk-detail.splitvert {
  flex-direction: row !important;
}
.frontdesk-detail.splitvert .workareas {
  max-width: 50%;
  order: 2;
  flex: 1;
}
.frontdesk-detail.splitvert .activeitems {
  max-width: 50%;
  border-right: 1px solid #bbb;
}
.frontdesk-detail.splitvert .activeitems .cs-toolbar {
  border-bottom: 1px solid #bbb;
  max-width: 100%;
}
.frontdesk-detail.splitvert .activeitems .cs-toolbar__icon {
  font-size: 1.2rem;
}
/*--------------------------------------------
uk-badge
--------------------------------------------*/
.uk-badge {
  display: inline-block;
  padding: 0.2rem 0.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  vertical-align: middle;
  text-transform: none;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom-color: rgba(0, 0, 0, 0.3);
  background-origin: border-box;
  border-radius: 2px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  /* background-image: linear-gradient(to bottom,#FFF,cornflowerblue); */
  background: darkorange;
  color: #fff;
}
.uk-badge-notification {
  box-sizing: border-box;
  min-width: 18px;
  border-radius: 500px;
  font-size: 12px;
  line-height: 18px;
  padding: 2px 5px;
  text-align: center;
}
.app-badge {
  position: absolute;
  right: 5px;
  right: 1px;
  /* top: 5px; */
  color: white;
  background-color: #0366d6;
  right: -5px;
  bottom: -5px;
}
.wa-badge {
  bottom: -12px;
  right: -1px;
}
.wa-badge-workareaitems {
  background-color: #F00;
  color: #FFF !important;
  right: 22px;
}
/* -------------------------------------------------------------------------------------
etching
------------------------------------------------------------------------------------- */
.blue {
  background-color: #4A7496;
}
.green {
  background-color: #49796B;
}
.grey {
  background-color: #888;
}
.etched {
  border: 1px solid rgba(0, 0, 0, 0.2);
  position: relative;
  border-radius: 1px 0 0 1px;
  box-shadow: 1px 1px 2px -1px #000;
}
.etched:nth-child(n+2) {
  border-top: 0;
}
.etched:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 2px;
  bottom: 2px;
  z-index: 1000;
  border-radius: 1px 0 0 1px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 0;
}
.etched:hover:after {
  background-color: rgba(255, 255, 255, 0.1);
}
/* 
<div class="etched blue"></div>
<div class="etched blue"></div>
<div class="etched grey"></div>
<div class="etched blue"></div>
<div class="etched green"></div>
*/
.top-bar__right-actions button {
  line-height: 100%;
  margin-right: 6px;
}
/*
default page CSS:
::selection { background: #d1d0c3; color: #393729; }
*::-moz-selection { background: #d1d0c3; color: #393729; }

/** for readonly input*
input[readonly='readonly']:focus { border-color: #ced4da; box-shadow: none; }
input[readonly='readonly']::selection { background: none; color: #000; }
input[readonly='readonly']::-moz-selection { background: none; color: #000; }
*/
.u-fullscreen {
  background: #f3f5f7;
}
.co-explorer-find .db-searcher {
  flex: 1;
}
.co-explorer-detail {
  min-width: 420px;
  max-width: 420px;
}
.app-link {
  color: #0366d6;
  cursor: pointer;
}
.app-link:hover {
  text-decoration: underline;
}
.app-hilite {
  background-color: lemonchiffon;
}
/*--------------------------------------------
 main elements, mobile-first
-------------------------------------------*/
.f-table {
  display: block;
  margin: 2rem auto;
  width: 90%;
  border: 1px solid #bbb;
  overflow: hidden;
  overflow-y: auto;
  font-size: 0.8rem;
}
.f-table-header {
  display: flex;
  flex-flow: row wrap;
  background: #1976d2;
  color: white;
  border-color: #1565c0;
}
/* .f-table-body {
  overflow: hidden;
  overflow-y: auto;
} */
.f-row {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  width: 100%;
  border: 1px solid #bbb;
  border-top: 0;
  overflow: hidden;
}
.f-row.compressed {
  height: 32px;
}
.f-col {
  padding: 3px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.f-col.rowspan {
  width: 100%;
}
.f-col.first {
  padding: 0.5rem;
  font-weight: bold;
}
.rating {
  width: 200px;
}
.f-cell {
  flex: 1;
  width: 100%;
  height: 100%;
  padding: 3px;
  /* background: sienna; */
}
.f-row-icon {
  margin-top: 0.3rem;
  margin-right: 0.7rem;
}
/*--------------------------------------------
 variations 
 -------------------------------------------*/
.f-table-header .f-col {
  border: 1px solid #1565C0;
  padding: 0.2rem 0.5rem;
}
.f-table-body > .f-row:nth-child(odd) {
  background: #dae9f9;
}
/* .f-row:hover {
  background: lightcoral;
  color: #000;
  // transition: 500ms; 
*/
.f-row > .f-row {
  border: 0;
  background: none;
}
.f-row > .f-row {
  flex-direction: column;
}
/*--------------------------------------------
tablet or mobile landscape? - need to check the min-width
-------------------------------------------*/
@media screen and (min-width: 35rem) {
  .f-col.first {
    width: 100%;
  }
  .f-col {
    width: calc(100% / 3);
  }
  .f-col.rowspan {
    flex-direction: row;
    justify-content: flex-start;
  }
  .f-row > .f-row {
    flex-direction: column;
  }
  .f-row > .f-row .f-col {
    width: 100%;
    flex-direction: row;
  }
  .f-row > .f-row .f-col:hover {
    background: lightcoral;
    color: #000;
    transition: 500ms;
    cursor: pointer;
  }
}
/*--------------------------------------------
desktop
-------------------------------------------*/
@media screen and (min-width: 55rem) {
  .f-col.first {
    width: 25%;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    white-space: nowrap;
  }
  .f-col {
    width: calc(100% / 4);
    align-items: flex-start;
    text-align: left;
  }
  .f-row.multiple > .f-row {
    margin-left: 25%;
    flex-direction: row;
  }
  .f-row > .f-row {
    flex-direction: column;
  }
  .f-row.multiple .f-col {
    width: calc(100% / 3);
  }
  .f-row.multiple > .f-col:first-of-type {
    width: 100%;
  }
  .f-row.multiple .f-row .f-col {
    /* border-left: 1px solid #bbb; */
    border-top: 1px solid #bbb;
    width: 100%;
  }
  /* .f-row.multiple .f-cell{
    border-left: 1px solid #bbb
  } */
  /* .f-row.multiple .f-cell:last-of-type{ */
}
/* .f-row .f-col {
  border-bottom: 0;
} */
/* .f-row .f-col:last-of-type {
  border-bottom: solid 1px #d9d9d9;
} */
/* @media all and (max-width: 430px) {  
/* 

.row {
  margin-bottom: 0;
}

.f-row-container {
  display: block;
  margin: 2rem auto;
  width: 90%;
}


.f-row {
  display: flex;
  flex-flow: row wrap;
  border-left: solid 1px #d9d9d9;
  transition: 0.5s;
}
.f-row:first-of-type {
  border-top: solid 1px #1565c0;
  border-left: solid 1px #1565c0;
}
.f-row:first-of-type .f-col {
  background: #1976d2;
  color: white;
  border-color: #1565c0;
}
.f-row.row:nth-child(odd) .f-col {
  background: #f4f2f1;
}
.f-row:hover {
  background: #f5f5f5;
  transition: 500ms;
}

.f-col {
  width: calc(100% / 4);
  text-align: center;
  padding: 0.5rem 0.5rem;
  border-right: solid 1px #d9d9d9;
  border-bottom: solid 1px #d9d9d9;
}

.rowspan {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: center;
}

.column {
  display: flex;
  flex-flow: column wrap;
  width: 75%;
  padding: 0;
}

.f-row.multpleitems .rowspan {
  border-right: none
}

.f-row.multpleitems .column {
  margin-top: 2rem;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}


.column .f-col {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  padding: 0;
  border: 0;
  border-bottom: solid 1px #d9d9d9;
}

.column .f-col:hover {
  background: #f5f5f5;
  transition: 500ms;
}

.f-cell {
  width: calc(100% / 3);
  text-align: center;
  padding: 0.5rem 0.5rem;
  border-right: solid 1px #d9d9d9;
}

@media all and (max-width: 767px) {
  .f-row.multpleitems .column {
    margin-top: 0;
  }

  .f-col {
    width: calc(100% / 3);
  }
  .f-col.first {
    width: 100%;
  }

  .column {
    width: 100%;
  }
}

*/
/* --------------------------------------------
attributes & reporter criteria section
-------------------------------------------- */
td.attname,
td.fld,
.reporter-criteria .fld {
  background-color: #EDF3FE;
  font-size: 0.8rem;
  min-width: 150px;
  text-align: left;
}
.reporter-criteria tr:hover td.fld {
  background: #777 !important;
  color: #fff !important;
}
td.attcategory,
.reporter-criteria .op {
  background-color: #FFFFE8;
  min-width: 150px;
  font-size: 0.8rem;
  padding: 0 5px;
}
.reporter-criteria {
  font-size: 0.8rem;
}
.app-reporter .table-wrapper {
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
  border-radius: 6px;
}
.reporter-criteria .input {
  width: 70%;
  padding: 0;
}
.reporter-criteria input {
  width: 100%;
  color: #000;
  border: none;
  font-size: 0.9rem;
  padding: 5px;
  margin: 3px;
  margin-right: 1rem;
  box-shadow: none;
}
.reporter-criteria select {
  width: 100%;
  box-shadow: none;
  border: 0;
}
.reporter-criteria-operators {
  min-width: 300px;
  flex: 0 0 300px;
}
.reporter-criteria-operators li {
  cursor: pointer;
}
.reporter-criteria-operators li:hover {
  background-color: #ddd;
  transition: background-color 0.25s ease;
}
.todoman-btn-group {
  justify-content: center;
  margin-bottom: 1.2rem;
  flex: 0 0 auto;
}
.todoman-btn-group .cs-btn {
  flex: 0 0 auto;
  padding: 5px 27px;
}
.todoman-btn-group i {
  font-size: 1.1rem;
}
.app-todoman .cs-view-actionbar i {
  font-size: 1.3rem;
}
i.todoman-checked {
  font-size: 1.4rem;
}
.todoitem-header {
  display: flex;
  /* flex-direction: column; */
  flex: 1;
  width: 100%;
}
.todoman-list .cs-item {
  flex-direction: column;
  align-items: start;
  padding-bottom: 0.3rem !important;
}
.todoitem-entity {
  flex: 1;
  display: flex;
  padding-top: 0.3rem;
}
.todoman-list .cs-item__icon {
  padding: 0 5px;
}
.todo-date {
  padding: 1px 7px;
  font-size: 0.8rem;
  position: absolute;
  right: unset;
  top: 5px;
  z-index: 98;
  background-color: lemonchiffon;
  border: 1px solid #aaa;
  left: 50%;
  transform: translateX(-50%);
}
.todoman-checked {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 0.8rem;
  cursor: pointer;
}
.todoitem-subject {
  padding-top: 1.2rem;
}
.freedays {
  display: flex;
  /* justify-content: space-between;   */
  padding: 3px 0 3px 3px;
  /* width: 230px;
  max-width: 230px; */
  flex: 1;
}
.freeday {
  flex: 1;
  font-size: 0.8rem;
  text-align: center;
  padding: 3px 5px;
  margin-right: 3px;
  background-color: #fff;
  /* border-radius: 5px;   */
  background: #555;
  color: #aaa;
  border: 1px solid transparent;
}
.freeday.yes {
  /* background: #4fc08d; */
  background: #f1722c;
  color: #FFF;
}
.shiftpatterns .freeday {
  background: #4fc08d;
  color: #FFF;
  background: #fff;
  color: #000;
  border: 1px solid #555;
}
.shiftpatterns.edit {
  cursor: pointer;
  padding: 5px 0;
  margin: 5px 0 0 0;
  /* border-bottom: 1px solid #999; */
}
.shiftpatterns * {
  font-size: 0.7rem !important;
}
.freeday.edit {
  cursor: pointer;
}
.freeday.edit:hover {
  /* background:#000;
  color:#FFF; */
  background: #f1722c;
  color: #FFF;
  border: 1px solid #000;
}
.table-wrapper.cvlist {
  flex: 0 0 auto !important;
  width: 100%;
  max-height: 132px;
  height: auto;
}
.app-candidate_cv {
  background-color: #FFF !important;
}
.dupcheck-icon {
  padding: 4px;
  margin-top: 0px;
  display: inline-block;
  font-size: 1.1rem;
  border-radius: 50%;
}
.candidate-admin-column {
  width: 300px;
}
.interview-wrapper,
.shortlist-wrapper {
  display: flex;
  height: 100%;
  flex: 1;
  overflow: hidden;
}
.shortlist-wrapper {
  border: 0.5rem solid #ccc;
  border-radius: 0.6rem;
}
.interview-stages,
.shortlist-stages {
  height: 100%;
  max-height: 100%;
  min-width: 220px;
  font-size: 0.8rem;
  padding: 1rem;
  overflow-y: auto;
  padding: 0.3rem;
  padding: 0;
}
.interview-stages {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  min-width: 200px;
  max-width: 200px;
  border-right: 1px solid #000;
}
.interview-list-wrapper.showstages {
  margin-left: 200px;
}
.shortlist-stages {
  border-right: 0.5rem solid #ccc;
}
.interview-stages .cs-item:first-child {
  border-top-left-radius: 0.6rem;
}
.shortlist-stages .cs-item {
  padding: 0.1rem !important;
}
.interview-stages .interviewitem-icon,
.shortlist-stages .shortlistitem-icon {
  min-width: 1.6rem;
  padding: 0;
  margin: 0;
  font-size: 1.1rem;
  min-height: 1.6rem;
  background: #999;
  color: #FFF;
}
.interviewlist,
.shortlist {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 0.8rem !important;
  /* padding: 1rem; */
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  background-color: #FFF;
}
.interviewitem,
.shortlistitem {
  width: 100%;
  align-items: flex-start;
  font-size: 0.8rem;
  user-select: none;
}
.shortlistitem {
  padding-left: 4.1rem !important;
}
.interviewitem {
  padding: 0.5rem 0;
  border-bottom: 1px solid #ccc;
}
.shortlistitem.odd {
  background: #eee;
}
.interviewitem.odd {
  background: lemonchiffon !important;
}
.interviewitems__header,
.shortlistitem__header {
  width: 100%;
  padding: 0.2rem 0;
  font-size: 0.9rem;
  cursor: pointer;
  /* margin-bottom: 0.5rem; */
  /* border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem; */
  background: #777;
  color: #FFF;
}
.header-rounded {
  border-top-right-radius: 0.2rem;
  border-top-left-radius: 0.2rem;
}
.shortlistitem__header {
  padding-left: 4.1rem !important;
}
.interviewitems__header {
  padding: 5px 0;
}
.interviewitems-header,
.interviewitem-summary,
.shortlistitem-summary {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}
.interviewitems-header-count {
  flex: 0 0 auto;
  width: 30px;
}
.shortlistitem-summary-count {
  position: absolute;
  left: -2.5rem;
  font-size: 1.2rem !important;
}
.itemlist-header__icon .interviewitem-icon,
.shortlistitem-icon {
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
  min-width: 2rem;
  padding: 5px;
  font-size: 1.2rem;
  /* border-radius: 50%; */
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.5rem;
  /* background: cornflowerblue;
  color: #FFF; */
  color: #06ed;
  color: #999;
  background: transparent;
}
.interviewitem-status,
.shortlistitem-status {
  width: 150px;
}
.interviewitem-candidate,
.shortlistitem-candidate {
  width: 150px;
  text-decoration: underline;
  cursor: pointer;
}
.itemlist-header .interviewitem-candidate {
  text-decoration: none;
}
.shortlistitem__header .shortlistitem-icon {
  height: auto;
}
.shortlistitem__header .shortlistitem-candidate {
  text-decoration: unset;
  font-weight: unset;
}
.shortlistitem__header .shortlistitem-icon {
  color: #FFF;
}
.shortlistitem-addedon,
.shortlistitem-datecvsent {
  width: 100px;
  text-overflow: ellipsis;
}
.interviewitem-when {
  width: 150px;
  text-overflow: ellipsis;
}
.interviewitem-interviewer {
  width: 150px;
  text-overflow: ellipsis;
}
.interviewitem-notes,
.shortlistitem-notes {
  width: 100%;
  display: flex;
  margin-top: 0.25rem;
  color: #06ed;
}
.shortlistitem-notes {
  padding-right: 5rem;
  padding-left: 3rem;
}
.shortlistitem-icon > .bgcolor-orange {
  background: transparent !important;
  color: orange;
  /* color: #fff;
  border-radius: 50%;
  padding: 5px; */
}
.shortlistitem-icon > .bgcolor-red {
  background: transparent !important;
  color: red;
  /* color: #fff;
  border-radius: 50%;
  padding: 5px; */
}
.shortlistitem-icon > .bgcolor-blue {
  background: transparent !important;
  color: #0366d6;
  /* color: #fff;
  border-radius: 50%;
  padding: 5px; */
}
.shortlistitem-editing-notes {
  min-height: 100px;
}
.shortlistitem-editing-notes textarea {
  flex: 1;
  min-height: 100px;
  font-size: 1rem;
}
.pay-amount-boxes {
  align-items: start;
  padding: 1rem;
}
.shortlistitem .cs-item__options i {
  padding: 7px;
  margin: 2px;
}
.interviewitems__header .interviewitem-status {
  width: 150px;
  margin-left: 0.5rem;
}
.shortlistitem-isheader {
  cursor: pointer;
}
.vacancycentre-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.vacancyfinder select,
.vacancyfinder input {
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}
.vacancylist-candidate span.itemlist-status {
  padding: 0 2px;
  margin-left: 0.5rem;
  font-size: 0.8rem;
}
.vacancy-list-wrapper,
.vacancy-candidates {
  border-radius: 0.6rem !important;
  border: 1px solid #ccc;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  background-color: #fff;
  color: #333;
  flex: 1;
  display: block;
}
.vacancy-list-wrapper {
  padding: 0;
  border: 5px solid #aaa;
  position: relative;
  padding-top: 36px;
  overflow: hidden !important;
}
.vacancy-list-header {
  position: absolute;
  top: 0;
  height: 36px;
  right: 0;
  left: 0;
  background-color: #FFF;
  font-weight: bold;
}
.vacancy-list-item {
  cursor: pointer;
}
.vacancy-candidates-wrapper {
  margin: 0.5rem 0;
  flex: 1;
  overflow: hidden;
}
.vacancy-list-wrapper.showcands {
  flex: 0 0 auto;
  max-height: 33%;
}
.vacancy-list-wrapper.selectedvacancy {
  border: 5px solid #aaa;
  flex: 0 0 auto;
}
.vacancy-candidates {
  position: relative;
  padding-top: 50px;
  overflow: hidden !important;
}
.vacancy-candidates .itemlist-header {
  position: absolute;
  top: 0;
  height: 50px;
  right: 0;
  left: 0;
}
.vacancylist-candidate .itemlist-name:hover {
  text-decoration: underline;
  color: #06ed;
}
.quickmsg-wrapper .itemlist-day,
.vacancy-list .itemlist-day {
  background-color: #ddd;
  color: #000;
  cursor: pointer;
}
.vacancy-list .itemlist-day.filled {
  background-color: green;
  color: #FFF;
}
.vacancy-list .itemlist-day.waiting {
  background-color: orange;
  color: #FFF;
}
.itemlist-header .itemlist-day {
  background-color: transparent !important;
  color: #000;
  font-weight: bold;
  cursor: default;
  border: 0 !important;
}
.vacancylist-candidate-line2,
.vacancylist-candidate-line3 {
  margin-left: 3rem;
}
.vacancylist-candidate-line3 {
  color: crimson;
  padding: 0.25rem 0;
}
.itemlist {
  flex: 0;
  display: flex;
  flex-direction: column;
  font-size: 0.8rem !important;
  /* padding: 1rem; */
  max-height: 100%;
  overflow-y: auto;
  width: 100%;
  align-items: flex-start;
  font-size: 0.9rem;
  padding: 0.5rem;
  border-bottom: 1px solid #ccc;
  user-select: none;
  min-width: 80px;
  max-height: 140px;
}
.itemlist-item.even {
  background: #fafafa !important;
}
.itemlist-options-panel {
  height: 100%;
  max-height: 100%;
  min-width: 220px;
  font-size: 0.8rem;
  padding: 1rem;
  overflow-y: auto;
  padding: 0.3rem;
  padding: 0;
  border-right: 0.5rem solid #ccc;
}
.shortlist-stages .cs-item {
  padding: 0.1rem !important;
}
.itemlist-summary {
  flex: 1;
  display: flex;
  align-items: center;
}
.itemlist.grid .itemlist-summary {
  flex-direction: column;
}
.itemlist-icon {
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
  min-width: 2rem;
  padding: 0;
  font-size: 1.2rem;
  /* border-radius: 50%; */
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.5rem;
  /* background: cornflowerblue; */
  background: transparent;
  border-radius: 50%;
}
.itemlist__header .itemlist-icon {
  height: auto;
  color: #999;
}
.itemlist__header .itemlist-icon {
  color: #FFF;
  background-color: transparent;
}
.itemlist-id {
  min-width: 60px;
  max-width: 60px;
  text-overflow: ellipsis;
  padding-left: 10px;
}
.itemlist-username {
  min-width: 100px;
  max-width: 150px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.itemlist-folder {
  min-width: 150px;
  max-width: 150px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.itemlist-name,
.itemlist-candidatename {
  width: 180px;
  min-width: 150px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.itemlist-candidatename {
  width: 200px;
  min-width: 200px;
}
.itemlist-pay,
.itemlist-number {
  min-width: 80px;
  max-width: 80px;
  text-align: center;
}
.itemlist-pay {
  color: red;
}
.itemlist-type {
  min-width: 100px;
  max-width: 100px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.itemlist-date {
  min-width: 150px;
  max-width: 150px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.itemlist__header .itemlist-name {
  color: #FFF;
  text-decoration: none;
}
.itemlist-notes {
  width: 100%;
  display: flex;
  padding-left: 3rem;
  padding-right: 3rem;
  flex: 1;
}
.vacancy-history-wrapper {
  position: relative;
  z-index: 999;
  align-items: flex-start;
  min-width: 450px;
  max-width: 450px;
  padding: 1rem;
  border-radius: 0.6rem;
  margin-left: 0.5rem;
}
.quickmsg-wrapper {
  background-color: aliceblue;
}
.vacancy-history-wrapper {
  /* transform: translateX(-50%); */
  background-color: floralwhite;
}
.vacancy-candidates-wrapper {
  min-height: 50%;
  margin: 0.5rem 0;
}
.vacancylist-candidate span.itemlist-status {
  padding: 0 2px;
  margin-left: 0.5rem;
  font-size: 0.8rem;
}
.vacancy-list-wrapper,
.vacancy-candidates {
  border-radius: 0.6rem !important;
  border: 1px solid #ccc;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  background-color: #fff;
  color: #333;
  flex: 1;
  display: block;
}
.vacancy-list-item {
  cursor: pointer;
}
.vacancy-candidates-wrapper {
  margin: 0.5rem 0;
  flex: 1;
}
.vacancy-list-wrapper.showcands {
  flex: 0 0 auto;
  max-height: 33%;
}
.vacancy-list-wrapper.selectedvacancy {
  border: 5px solid #aaa;
  flex: 0 0 auto;
}
.vacancy-candidates {
  position: relative;
  padding-top: 50px;
  overflow: hidden !important;
}
.vacancy-candidates .itemlist-header {
  position: absolute;
  top: 0;
  height: 50px;
  right: 0;
  left: 0;
}
.vacancylist-candidate .itemlist-name:hover {
  text-decoration: underline;
  color: #06ed;
}
.app-bar .icm-vacancy-centre {
  color: #FFF !important;
}
.icm-vacancy-centre {
  border-radius: 50% !important;
  border: 1px solid #999 !important;
}
.icm-notebook:before,
.icm-vacancy-centre:before {
  padding: 3px;
}
.app-bar .icm-vacancy-centre {
  /* min-width: 2.2rem; */
  /* min-height: 2.2rem; */
  border: 1px solid #FFF !important;
  padding: 7px;
  font-size: 1.3rem;
}
.app-bar .icm-vacancy-centre:before {
  padding: 1px;
}
.cs-view-header__actionbar.jumplinks .icm-vacancy-centre {
  padding: 9px 7px 7px 7px;
}
.cs-view-header__actionbar.jumplinks .icm-vacancy-centre:before {
  font-size: 1.2rem;
  padding: 0px;
}
.app-tempbookingcentre .cs-view-header .icm-vacancy-centre.bgcol:before {
  font-size: 2.3rem;
  padding: 5px;
  display: flex;
}
.app-vacancycentre_list {
  background-color: #fff !important;
}
.vacancyfinder select,
.vacancyfinder input {
  font-size: 0.8rem;
}
.icm-vacancy-centre.bgcol {
  background-color: #FFF !important;
  color: #ffc107 !important;
  padding: 6px 3px !important;
}
.interview-list-wrapper {
  background-color: #FFF;
  overflow: hidden;
}
.vacancyfinder-wrapper {
  position: absolute;
  top: 5rem;
  width: auto;
  min-width: 330px;
  left: 50%;
  transform: translateX(-50%);
}
.vacancy-centre__navbtns {
  position: absolute;
  left: 50%;
  top: 0.6rem;
  font-size: 2rem;
  transform: translateX(-50%);
}
.cs-xlist {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid transparent;
}
.cs-xlist.round-border-shadowed {
  border-radius: 0.6rem;
  border: 1px solid #777;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.cs-xlist .cs-item {
  padding: 0;
  font-size: 0.8rem;
}
.cs-xlist .cs-item.active {
  background-color: #e8f0fe;
  outline: 1px solid #6da0f9;
}
.cs-xlist .cs-item > div {
  padding: 0.5rem !important;
}
.cs-xlist.items-border-bottom .cs-item {
  border-bottom: 1px solid #ddd;
}
.cs-xlist.items-border-top .cs-item {
  border-top: 1px solid #ddd;
}
.cs-xlist.items-border-left .cs-item {
  border-left: 1px solid #ddd;
}
.cs-xlist.items-border-right .cs-item {
  border-left: 1px solid #ddd;
}
.cs-xlist.items-border-all {
  margin-top: -1px;
  margin-left: -1px;
}
.cs-xlist.items-border-all .cs-item {
  outline: 1px solid #ddd;
  /* use instead of border */
  margin-top: 1px;
  margin-left: 1px;
}
.cs-xlist.items-divs-border-left .cs-item > div {
  border-left: 1px solid #ddd;
}
.cs-xlist .cs-item > div {
  padding: 0.5rem;
  padding: 0;
}
.cs-xlist .cs-item__dropdown__icon.icm-menu {
  font-size: 1.2rem;
}
.cs-item__flipscene {
  perspective: 500px;
  flex: 0 0 2.2rem;
  min-height: 2rem;
  min-width: 2rem;
  padding: 0 0.3rem !important;
  /* outline: 1px solid red; */
  max-height: 2rem;
  max-width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
}
.cs-item__flipitem {
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
  transform-style: preserve-3d;
  cursor: pointer;
  position: relative;
  /* outline: 1px solid blue; */
  min-width: 2rem;
  min-height: 2rem;
  /* text-align: center; */
  border: 0 !important;
}
.cs-item__flipitem.is-flipped {
  transform: rotateY(180deg);
}
.cs-item__content {
  display: flex;
  align-items: center;
  justify-content: start;
}
.interviewitem-summary > div {
  text-overflow: ellipsis;
  overflow: hidden;
}
.cs-xlist .cs-item__dropdown {
  background-color: #fff;
}
.cs-xlist-header {
  min-height: 3rem;
}
.cs-xlist-header button i {
  padding-left: 0.5rem;
}
.cs-xlist.items-border-all {
  margin-top: -1px;
  margin-left: -1px;
}
.cs-xlist.items-border-all .cs-item {
  outline: 1px solid #ddd;
  margin-top: 1px;
  margin-left: 1px;
}
.app-bar__brand {
  flex: 0 0 355px;
  margin-right: 0;
}
:root {
  --appbar-fgcolor: #FFF;
  --appbar-icon-color: #eee;
  --appbar-bgcolor: #4d90fe;
  --appbar-bgcolor-startgrad: #5B8AD4;
  --appbar-bgcolor-endgrad: #82B2FC;
  --desktop-nav-fgcolor: var(--appbar-fgcolor);
  --desktop-nav-icon-color: var(--appbar-icon-color);
  --desktop-nav-bgcolor: var(--appbar-bgcolor);
  --desktop-nav-bgcolor-startgrad: var(--appbar-bgcolor-startgrad);
  --desktop-nav-bgcolor-endgrad: var(--appbar-bgcolor-endgrad);
  --body-bg: #f5f5f5;
  --go1-logo: #000080;
  --view-header-fg: #333333;
  --view-header-bg: #ffffff;
  --view-header-icon: #ff4500;
  --view-detail-fg: #333333;
  --view-detail-bg: #f5f5f5;
  --topbar-fgcolor: #fff;
  --topbar-bgcolor: #f1722c;
  --topbar-bgcolor-startgrad: #FFB46D;
  --topbar-bgcolor-endgrad: #FF8846;
}
body {
  background-color: var(--body-bg) !important;
  color: #333;
}
.app-bar__brand i.icm-go-1 {
  color: var(--go1-logo);
}
.top-bar {
  display: none;
  box-shadow: none;
  flex: 0 0 50px;
  color: var(--topbar-fgcolor) !important;
  background-color: var(--topbar-bgcolor) !important;
}
.top-bar.login {
  display: flex;
  background-image: linear-gradient(45deg, var(--topbar-bgcolor) 290px, transparent 290px), linear-gradient(to bottom, var(--topbar-bgcolor-startgrad), var(--topbar-bgcolor-endgrad));
}
.app-bar.usemobileui .top-bar {
  display: flex;
}
.cs-view-header {
  background-color: var(--view-header-bg) !important;
  color: var(--view-header-fg) !important;
}
.cs-view-header.cs-major-view {
  background-color: transparent !important;
}
.icm-viewheader-color {
  color: var(--view-header-icon) !important;
}
.cs-view-header-block__heading {
  color: var(--view-header-fg) !important;
}
.cs-view-detail {
  color: var(--view-detail-fg) !important;
  background-color: var(--view-detail-bg) !important;
}
.cs-view-header {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 0.5rem;
  background-color: #FFF;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
.cs-view-header.cs-major-view {
  padding: 1rem;
  border: 0;
}
.app-bar {
  box-shadow: none;
  color: var(--appbar-fgcolor) !important;
  background-color: #4d90fe;
  background-color: var(--appbar-bgcolor);
  background-image: linear-gradient(45deg, var(--appbar-bgcolor) 255px, transparent 255px), linear-gradient(to bottom, var(--appbar-bgcolor-startgrad), var(--appbar-bgcolor-endgrad)) !important;
  height: 50px;
  overflow: unset;
}
.app-bar:after {
  content: ' ';
  display: none;
  position: absolute;
  left: 60px;
  width: 2rem;
  height: 2rem;
  z-index: 999;
  background-color: var(--appbar-bgcolor);
  top: 50px;
  left: 55px;
  z-index: inherit;
  background-color: var(--desktop-nav-bgcolor);
  /* clip-path: circle(50% at 50% 50%); */
  /* transform: rotate(365deg); */
  /* border-radius: 50%; */
  mask: radial-gradient(farthest-side at bottom right, transparent 99%, #fff 100%);
}
.app-bar.loggedin:not(.usemobileui):after {
  display: block;
}
.app-bar.loggedin:not(.usemobileui) {
  background-image: linear-gradient(45deg, var(--appbar-bgcolor) 295px, transparent 295px), linear-gradient(to bottom, var(--appbar-bgcolor-startgrad), var(--appbar-bgcolor-endgrad)) !important;
}
.app-bar.loggedin {
  filter: none !important;
}
.app-bar__brand {
  padding-left: 11px;
  font-size: 1.9rem;
}
.app-bar__brand {
  flex: 0 0 340px;
  min-width: 0 !important;
}
.app-bar i {
  color: var(--appbar-icon-color) !important;
}
.app-bar__brand i.icm-go-1 {
  color: var(--go1-logo) !important;
}
.app-bar__brand i.icm-go-1 {
  font-size: 2rem;
  margin-right: 0.7rem;
  padding-top: 5PX;
  z-index: 999999999;
}
.app-bar__brand i.icm-go-1:hover {
  font-size: 2.3rem;
  /* margin-right: .5rem; */
  /* font-size: 1.9rem; */
  color: #FFF !important;
  filter: drop-shadow(2px 2px 2px #000);
}
.desktop-nav {
  flex: 0 0 60px;
  max-width: 60px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 1rem;
  font-size: 1.5rem;
  background-color: transparent;
  overflow: hidden;
  color: var(--desktop-nav-fgcolor);
  background-color: var(--desktop-nav-bgcolor);
  background-image: linear-gradient(145deg, var(--desktop-nav-bgcolor) 210px, transparent 210px), linear-gradient(to right, var(--desktop-nav-bgcolor-startgrad), var(--desktop-nav-bgcolor-endgrad)) !important;
}
/*
  .desktop-nav {
    flex: 0 0 60px;
    max-width: 60px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 1rem;
    font-size: 1.5rem;
    background-color: transparent;
    overflow: hidden;
    color: var(--desktop-nav-fgcolor);
    background-color: var(--desktop-nav-bgcolor);
    background-image: linear-gradient(45deg, var(--desktop-nav-bgcolor) 320px, transparent 255px),linear-gradient(to bottom, var(--desktop-nav-bgcolor-startgrad), var(--desktop-nav-bgcolor-endgrad)) !important; 
    background-image: linear-gradient(145deg, var(--appbar-bgcolor) 210px, #f1722c  210px),linear-gradient(to right, var(--appbar-bgcolor-startgrad), var(--appbar-bgcolor-endgrad)) !important;
  }
  */
.desktop-nav.show {
  display: flex;
  margin: 0;
  /* border-radius: 5rem; */
  /* position: absolute; */
  min-width: 55px;
  max-width: 55px;
  top: 0px;
  bottom: 0;
  padding-top: 2rem;
  background-image: linear-gradient(145deg, var(--desktop-nav-bgcolor) 210px, transparent 210px), linear-gradient(to right, var(--desktop-nav-bgcolor-startgrad), var(--desktop-nav-bgcolor-endgrad)) !important;
}
.desktop-nav .cs-nav {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  flex-direction: row;
  flex-direction: column;
}
.desktop-nav li {
  margin-left: 0.25rem;
}
.desktop-nav li i {
  font-size: 1.7rem;
  margin: 0.5rem 0;
  background-color: transparent !important;
  color: cornflowerblue !important;
  color: var(--desktop-nav-icon-color) !important;
}
.desktop-nav li:hover i {
  text-shadow: 2px 2px 2px #000000;
  color: #FFF !important;
}
.leftzone.show {
  order: 1;
  background-color: #fff;
  box-shadow: none;
  filter: drop-shadow(2px 2px 2px #aaa);
  margin-bottom: 0.2rem;
}
.appbar:not(.usemobileui) .leftzone.show {
  border-radius: 0;
  border-top-left-radius: 2rem;
}
.leftzone.show.collapsed {
  flex: 0 0 70px;
}
.mainzone-wrapper {
  flex: 1;
  order: 2;
  display: flex;
  /* background-color: transparent !important; */
}
.rightzone.show {
  /* filter: drop-shadow(2px 2px 1px #aaa) drop-shadow(-1px -1px 2px #aaa); */
  /* filter: drop-shadow(-2px 0 2px #aaa) drop-shadow(1px 1px 2px #aaa); */
  background-color: var(--body-bg);
  border: none !important;
  filter: none !important;
}
.rightzone.show {
  border-left: 1px solid #aaa !important;
}
.bot-bar {
  order: 10;
  box-shadow: none;
  flex: 0 0 50px;
  display: none;
}
.top-bar.show,
.bot-bar.show {
  display: flex;
}
.top-bar.level2 {
  padding: 0.25rem 0.25rem 0.25rem 1rem;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  font-size: 1.7rem;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #FFF;
}
.rightzone.show {
  filter: drop-shadow(2px 2px 1px #aaa) drop-shadow(-1px -1px 2px #aaa);
  filter: drop-shadow(-2px 0 2px #aaa) drop-shadow(1px 1px 2px #aaa);
}
.rightzone.show.collapsed {
  flex: 0 0 70px;
}
.notifyzone {
  background-color: #000;
}
.dash-container {
  background-color: #f1f1f1;
  background-color: transparent !important;
}
.icm-1,
.icm-user,
.icm-7,
.icm-vacancy,
.icm-vacancy-centre {
  /* background-color: transparent; */
  color: unset !important;
}
.cs-nav__item.divider,
hr {
  height: 0;
  margin: 0;
  border: none;
  box-sizing: content-box;
  transition: all 0.2s ease-in-out;
  border-top: 1px solid #EAEAEA;
  min-height: 2px;
  width: 100%;
  border-top: none;
  min-height: 47px;
}
.cs-nav__item.divider,
hr.default {
  margin: 4px 0px;
}
main {
  order: 2;
  flex: 1;
  /* border: 0.5rem solid #777; */
  border-radius: 1rem;
  background-color: #fafafa;
  background-color: #d9ecfb;
  filter: drop-shadow(-2px -3px 3px #777) drop-shadow(2px 3px 3px #777);
  margin: 0.7rem;
}
li.cs-action-link.pill {
  border: 1px solid #ccc;
  background-color: #FFF;
  border-radius: 1rem !important;
  padding: 0.2rem 1rem;
  color: #111;
}
/* CSS */
.cs-btn {
  background-image: linear-gradient(#f7f8fa, #e7e9ec);
  border-color: #adb1b8 #a2a6ac #8d9096;
  border-style: solid;
  border-width: 1px;
  border-radius: 3px;
  box-shadow: rgba(255, 255, 255, 0.6) 0 1px 0 inset;
  box-sizing: border-box;
  color: #0f1111;
  cursor: pointer;
  display: inline-block;
  font-size: 0.9rem;
  /* min-height: 29px; */
  outline: 0;
  overflow: hidden;
  padding: 0.5rem 0.5rem;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
}
.cs-btn:active {
  border-bottom-color: #a2a6ac;
}
.cs-btn:active:hover {
  border-bottom-color: #a2a6ac;
}
.cs-btn:hover {
  border-color: #a2a6ac #979aa1 #82858a;
}
.cs-btn:focus {
  border-color: #e77600;
  box-shadow: rgba(228, 121, 17, 0.5) 0 0 3px 2px;
  outline: 0;
}
.mainzone .cs-view {
  background-color: #f5f5f5;
}
.cs-btn-group .cs-btn,
.cs-btn-group button {
  background-image: linear-gradient(#f9f9f9, #c2c2c2);
}
.leftzone .cs-view-header {
  border-bottom: none;
}
.cs-tabset__item.active {
  background-color: transparent;
}
@media only screen and (min-device-width: 360px) and (max-device-width: 740px) and (orientation: portrait) {
  .app-bar {
    background-image: linear-gradient(45deg, var(--appbar-bgcolor) 160px, transparent 160px), linear-gradient(to bottom, var(--appbar-bgcolor-startgrad), var(--appbar-bgcolor-endgrad)) !important;
  }
  .app-bar__brand {
    /* min-width: 220px !important; */
    flex: 0 0 215px !important;
    padding-left: 11px;
    font-size: 1.7rem;
  }
  .top-bar {
    display: flex;
  }
}