body.themed .btn-group .btn-default:last-of-type, body.themed .btn-group .btn-default:last-of-type:hover, body.themed .btn-group .btn-primary:last-of-type, body.themed .btn-group .btn-primary:last-of-type:hover {
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}
body.themed .btn-group .btn-default:not(:first-of-type):hover, body.themed .btn-group .btn-default:not(:first-of-type):hover, body.themed .btn-group .btn-primary:not(:first-of-type):hover {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
body.themed .btn-group .btn + .btn {
  border-left: 1px solid;
  border-left-color: #275a86;
}
body.themed #canvas_background {
  background-color: #fafafa;
  fill: #fafafa;
}
body.themed .navbar.navbar-dark.bg-darken {
  background-color: rgb(51, 51, 51) !important;
}
body.themed .navbar.navbar-dark .navbar-nav .nav-link {
  color: #fff;
}
body.themed .navbar-brand {
  background-image: URL("../../img/sym-brand/Westpier_Logo_Faded.png");
  width: 261px;
  height: 96px;
  background-size: 261px 96px;
}
body.themed .navbar-brand img {
  display: none;
}
body.themed .BgThemeColour {
  stop-color: #fafafa;
}
body.themed .BgThemeSecondary {
  stop-color: rgba(250, 250, 250, 0);
}
body.themed div.option + div.option {
  border-top: 4px dotted;
  padding-top: 4px;
  border-top-color: white;
}
body.themed .custom-control-input:checked ~ .custom-control-label::before, body.themed .btn-primary, body.themed .page-item.active .page-link {
  border-color: #0181fc;
  background-color: #0181fc;
  color: #FFF;
}
body.themed .custom-control-input:checked ~ .custom-control-label:hover::before, body.themed .btn.btn-primary:hover, body.themed .page-item.active .page-link:hover {
  border-color: #7ec0fe;
  background-color: #7ec0fe;
  color: #FFF;
}
body.themed .custom-control-input:checked ~ .custom-control-label:active::before, body.themed .btn.btn-primary:active, body.themed .page-item.active .page-link:active {
  border-color: #7ec0fe;
  background-color: #97ccff;
  color: #FFF;
}
body.themed .status-light.status-enabled {
  background-image: linear-gradient(to top right, #010802, #1cd41c);
}
body.themed .status-light.status-disabled {
  background-image: linear-gradient(to top right, #010802, #f90404);
}
body.themed .bg-primary {
  background-color: #0181fc !important;
}
body.themed .txt-primary {
  color: #0181fc;
}
body.themed .bg-secondary {
  background-color: #fafafa !important;
}
body.themed .txt-secondary {
  color: #fafafa;
}
body.themed div nav.tileset ul li.tile,
body.themed .sa-page-body .sym-login-rnd-corners,
body.themed .tile,
body.themed #content > div > div.col-12.col-sm-8 > div,
body.themed #invoice.tile {
  box-shadow: rgba(0, 0, 0, 0.04) 0 0 0;
  border: 0px solid #0181fc;
}
body.themed .form-group.disabled label {
  opacity: 0.7;
}
html.extr-page body.themed .sa-page-body {
  background: URL("https://cdn.shortpixel.ai/client/q_glossy,ret_img/https://www.structuredcommunications.co.uk/wp-content/themes/structuredcomms/images/home-slider.jpg") no-repeat center center fixed;
  background-size: cover;
  background-blend-mode: multiply, multiply;
}
html.extr-page body.themed.index .svgWrapper {
  display: none;
}

/*$TileGradiantZero: lighten($logoColor,20);
$TileGradiantOne: lighten($logoColor,22); 
$TileGradiantTwo: lighten($logoColor,24); 
$TileGradiantThree: lighten($logoColor,34);
$TileGradiantFour: lighten($logoColor,45); 
$TileGradiantFive: lighten($logoColor,17);
$TileGradiantSix: $logoColor; //0 , AKA Black
$TileGradiantSeven: lighten($logoColor,17);
$TileGradiantEight: lighten($logoColor,43);
$TileGradiantNine: lighten($logoColor,28);
$TileGradiantTen: lighten($logoColor,20);
$TileGradiantEleven: lighten($logoColor,19);*/
html.extr-page body.themed.index .svgWrapper {
  display: block;
}

body.themed {
  /*
  $TileGradiantZero: darken($logoColor,20);
  $TileGradiantOne: darken($logoColor,15);
  $TileGradiantTwo: darken($logoColor,10);
  $TileGradiantThree: darken($logoColor,5);
  $TileGradiantFour: darken($logoColor,0);
  $TileGradiantFive: darken($logoColor,15);
  $TileGradiantSix: darken($logoColor,40);
  $TileGradiantSeven: darken($logoColor,40);
  $TileGradiantEight: darken($logoColor,100);
  $TileGradiantNine: darken($logoColor,100);
  $TileGradiantTen: darken($logoColor,100);
  $TileGradiantEleven: darken($logoColor,100);
  */
  /*
  .toggle.btn, .toggle-group .btn {
      border-radius: 20px !important;
  }
      */
  /*.btn-group > .btn-group:not(:last-of-type) > .btn, .btn-group > .btn:not(:last-of-type):not(.dropdown-toggle) {
      border-radius: 0 5px 5px 0;
  }*/
  /*.btn-group > .btn-group:not(:last-of-type) > .btn, .btn-group > .btn:not(:last-of-type):not(.dropdown-toggle), .input-group > .custom-file:not(:last-of-type) .custom-file-label, .input-group > .custom-file:not(:last-of-type) .custom-file-label::after, .input-group > .custom-select:not(:last-of-type), .input-group > .form-control:not(:last-of-type) {
      border-radius: 0 5px 5px 0;
  }*/
}
body.themed body {
  font-family: arial, helvetica, verdana, "Open Sans", sans-serif;
  color: rgb(51, 51, 51);
  background-color: #fafafa;
}
body.themed .btn:not(.disabled) {
  box-shadow: none;
}
body.themed .btn, body.themed .btn-primary, body.themed .btn-primary:hover, body.themed #logout, body.themed #darkmode {
  font-family: arial, helvetica, verdana, "Open Sans", sans-serif;
  font-weight: 400;
  border-radius: 25px;
  border: none;
  font-size: 18px;
  line-height: 2em;
  min-height: 2em;
  cursor: grab;
  padding: 0 1em 0 1em;
}
body.themed .toggle.btn {
  border: solid 1px #fafafa;
  /* padding: 3em 0 0 0;*/
}
body.themed .btn-secondary {
  background-color: #0181fc;
  border-width: 0;
}
body.themed .btn-light, body.themed .btn-default {
  background-color: #0181fc;
  color: #FFF;
  border-width: 0;
  font-weight: 700; /*bold*/
}
body.themed .navbar-brand {
  min-width: 261px;
}
body.themed .navbar-brand img {
  border: solid white 2px;
}
body.themed .navbar.navbar-dark {
  background-color: rgb(51, 51, 51);
  border: 1px solid #ece6e8;
  border-bottom: 3px solid #d9ced2;
}
body.themed .navbar.navbar-dark .navbar-nav .nav-link {
  padding-left: 15px;
  padding-right: 15px;
  text-transform: uppercase;
}
body.themed .navbar.navbar-dark .navbar-nav .nav-link {
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
}
body.themed .navbar.navbar-dark .navbar-nav .nav-item .nav-link:hover {
  background-color: #0181fc;
  font-size: 12px;
  text-transform: uppercase;
}
body.themed .navbar.navbar-dark a .btn, body.themed .navbar.navbar-dark #darkmode, body.themed .navbar.navbar-dark #logout {
  font-size: 1.25rem;
  /* padding: 0 1em 0 1em; */
  line-height: 3em;
  min-height: 3em;
}
body.themed .big_icon, body.themed .download_icon, body.themed .tile#invoice .fa {
  color: #0181fc;
}
body.themed #logout, body.themed #darkmode {
  background-color: #0181fc !important;
}
body.themed div nav.tileset ul li.tile, body.themed .sa-page-body .sym-login-rnd-corners, body.themed .tile, body.themed html body .tile {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4c4c4c+0,595959+6,666666+18,474747+29,4c4c4c+31,2c2c2c+41,000000+56,111111+66,2b2b2b+79,1c1c1c+91,131313+100&0.5+1,0.5+99 */
  background: #fafafa;
  background: linear-gradient(180deg, #fafafa 0%, rgb(233, 233, 233) 100%);
  box-shadow: none;
  color: rgb(51, 51, 51);
  border-radius: 0;
  border-width: 0;
  font-size: 15px;
}
body.themed div nav.tileset ul li.tile a, body.themed div nav.tileset ul li.tile .dropdown-item.btn, body.themed .sa-page-body .sym-login-rnd-corners a, body.themed .sa-page-body .sym-login-rnd-corners .dropdown-item.btn, body.themed .tile a, body.themed .tile .dropdown-item.btn, body.themed html body .tile a, body.themed html body .tile .dropdown-item.btn {
  color: #0181fc;
}
body.themed div nav.tileset ul li.tile .btn, body.themed .sa-page-body .sym-login-rnd-corners .btn, body.themed .tile .btn, body.themed html body .tile .btn {
  color: #eee; /* nearly white */
}
body.themed div nav.tileset ul li.tile header, body.themed .sa-page-body .sym-login-rnd-corners header, body.themed .tile header, body.themed html body .tile header {
  color: rgb(51, 51, 51);
  font-weight: 400;
  font-size: 22px;
  margin-bottom: 0.3em;
}
body.themed .login-rnd-corners {
  border-radius: 0;
  border-width: 0;
}
body.themed .tilebody .dataTables_info {
  color: #0181fc;
}
body.themed .smart-form a, body.themed .smart-form .label, body.themed .smart-form .checkbox, body.themed .smart-form fieldset {
  color: rgb(51, 51, 51);
}
body.themed div nav.tileset ul li.tile a {
  text-decoration: none;
  color: rgb(51, 51, 51);
}
body.themed .toggle-group .btn.toggle-on, body.themed .toggle-group .btn.toggle-off {
  font-size: 14px;
  line-height: 36px;
}
body.themed .toggle-group .btn.toggle-handle {
  font-size: 10px;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}
body.themed #content > div > div.col-2 {
  width: 0;
  flex-basis: 0;
  padding: 0;
  margin: 0;
}
body.themed .sa-btn-light:not([disabled]):not(.disabled):hover, body.themed .btn-default:not([disabled]):not(.disabled):hover, body.themed .note-btn-group .btn-light:not([disabled]):not(.disabled):hover, body.themed .note-btn-group .editable-cancel:not([disabled]):not(.disabled):hover {
  background-color: #0181fc;
}
body.themed body.themed .btn-light, body.themed body.themed .btn-default {
  border-width: 2px;
}
body.themed .btn-danger, body.themed #btn_back {
  background-color: rgb(51, 51, 51);
  color: #0181fc;
}
body.themed .btn-danger:not([disabled]):not(.disabled):hover, body.themed #btn_back:not([disabled]):not(.disabled):hover {
  background-color: #65b3fe;
  color: #014d96;
}
body.themed .radius5 {
  border-radius: 5px !important;
}