
number-input {
  padding: 2px 2px;
  border-radius: 4px;
}
number-input.focus {
  background-color: rgba(138, 191, 254, 0.8);
}

number-input {
  display: inline-block;
  min-width: calc(var(--length) * 9.25px);
  overflow: hidden;
  text-align: right;
}
number-input[maxlength="1"] {
  --length: 1;
}
number-input[maxlength="2"] {
  --length: 2;
}
number-input[maxlength="3"] {
  --length: 3;
}
number-input[maxlength="4"] {
  --length: 4;
}
number-input[maxlength="5"] {
  --length: 5;
}
number-input[maxlength="6"] {
  --length: 6;
}
number-input[maxlength="7"] {
  --length: 7;
}
number-input[maxlength="8"] {
  --length: 8;
}
number-input[maxlength="9"] {
  --length: 9;
}
number-input[maxlength="10"] {
  --length: 10;
}
number-input[maxlength="11"] {
  --length: 11;
}
number-input[maxlength="12"] {
  --length: 12;
}
btn-group {
  display: inline-block;
  font-size: 0;
  margin: 0 !important;
}
btn-group .btn {

  border-radius: 0;
}
btn-group .btn + .btn {
  margin-left: -1px;
}

btn-group .btn.btn-segment,
.btn-group .btn.btn-segment {
  outline: none;
  padding: 0px 12px 0px 12px;
  border: 1px solid #d5d5d5;
  font-weight: 400;
  background-color: #fff;
  letter-spacing: 0.4px;
  height: 21px;
  border-top: 1px solid rgb(205, 205, 205);
  border-bottom: 1px solid rgb(174, 174, 174);
  box-sizing: border-box;
  z-index: 1;
  color: #000;
}
btn-group .btn.active {
  background-image: linear-gradient(rgb(113, 113, 113), rgb(106, 106, 106));
  color: #fff;
  border-top-color: rgb(104, 104, 104);
  border-left-color: rgb(96, 96, 96);
  border-right: 1px solid rgb(96, 96, 96);
  border-bottom-color: rgb(91, 96, 96);
}
btn-group .btn.active + .btn {
  border-left: none;
}
btn-group .btn.btn-segment.active {
  border-left-color: transparent;
}
btn-group, .btn:first-child {
  border-radius: 4.5px 0px 0px 4.5px;
}
btn-group .btn:last-child {
  border-radius: 0px 4.5px 4.5px 0px;
}
btn-group, .btn.btn-segment:first-child,
.btn-group .btn.btn-segment:first-child {
  border-radius: 4.5px 0px 0px 4.5px;
  border-left-color: rgb(205, 205, 205);
}
btn-group .btn.btn-segment:last-child,
.btn-group .btn.btn-segment:last-child {
  border-radius: 0px 4.5px 4.5px 0px;
  border-right: 1px solid rgb(205, 205, 205);
}
btn-group:hover .btn-segment:active,
.btn-group:hover .btn-segment:active {
  background-color: #f0f0f0;
}
btn-group:hover .btn-segment.active:active,
.btn-group:hover .btn-segment.active:active {
  background-image: linear-gradient(to bottom, rgb(74, 152, 253), rgb(7, 102, 227)) !important;
  border-top-color: rgb(35, 127, 254) !important;
  border-bottom-color: rgb(3, 63, 221) !important;
}
btn-group .btn.btn-segment.active,
.btn-group .btn.btn-segment.active {
  border-right-color: transparent;
  z-index: 3;
}
btn-group .btn.btn-segment.active,
.btn-group .btn.btn-segment.active {
  border-top-color: rgb(73, 160, 249);
  border-bottom-color: rgb(5, 95, 255);
  background-image: linear-gradient(to bottom, rgb(105, 180, 250), rgb(13, 128, 255));
  color: #fff;
  font-weight: 300;
  letter-spacing: 0.75px;
  background-size: 100% 100%;
}
btn-group .btn-segment.active:last-child,
.btn-group .btn-segment.active:last-child {
  border-right: 1px solid rgb(73, 160, 249);
}
btn-group .btn-segment.active:first-child,
.btn-group .btn-segment.active:first-child {
  border-left-color: rgb(73, 160, 249);
}
btn-group .btn-segment.active + .btn-segment,
.btn-group .btn-segment.active + .btn-segment {
  border-left: none;
}
btn-group.fill-width,
.btn-group.fill-width {
  display: inline-flex;
}
btn-group.fill-width .btn,
.btn-group.fill-width .btn {
  flex: 1;
}
btn-group.seperated .btn-segment.active,
.btn-group.seperated .btn-segment.active {
  border-left: 1px solid rgb(30, 140, 254);
}
btn-group .btn.btn-segment[disabled], btn-group .btn.btn-segment.active[disabled],
.btn-group .btn.btn-segment[disabled], .btn-group .btn.btn-segment.active[disabled] {
  border-color: rgb(212, 212, 212);
  background-image: none !important;
  background-color: rgb(248, 248, 248);
  color: rgb(168, 168, 168);
}

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
  btn-group .btn.btn-segment, btn-group .btn.btn-segment:first-child, btn-group .btn.btn-segment:last-child,
  .btn-group .btn.btn-segment, .btn-group .btn.btn-segment:first-child, .btn-group .btn.btn-segment:last-child {
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: none;
    padding: 0px 13px 0px 13px;
  }
  btn-group .btn.btn-segment.active + .btn.btn-segment:not(.active) {

  }
  btn-group .btn.btn-segment,
  .btn-group .btn.btn-segment {
    box-shadow: inset 0px 0px 0px 0.5px rgb(190, 190, 190);
  }
  btn-group,
  .btn-group {
    box-shadow: inset 0px 0px 0px 0.5px rgb(30, 130, 253);
    border-radius: 4.5px;
  }
  btn-group .btn.btn-segment.active,
  .btn-group .btn.btn-segment.active {
    border-top: none;
    border-bottom: none;
    border-left: none;
    border-right: none;
    padding: 0px 12px;
    box-shadow: inset 0px 0px 0px 0.5px rgb(30, 130, 253);
    box-shadow: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0px" y="0px" width="100%" height="0.5px" style="fill: rgb(30, 130, 253);"/></svg>'),
                      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0px" y="0px" width="100%" height="0.5px" style="fill: rgb(30, 130, 253);"/></svg>'),
                      linear-gradient(to bottom, rgb(105, 180, 250), rgb(13, 128, 255));
    background-position: left top, left bottom, center;
    background-size: 100% 1px, 100% 1px, 100% 100%;
    background-repeat: no-repeat;
    z-index: 3;
  }
  btn-group .btn.btn-segment.active:active:hover,
  .btn-group .btn.btn-segment.active:active:hover {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0px" y="0px" width="100%" height="0.5px" style="fill: rgb(0, 107, 238);"/></svg>'),
                      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0px" y="0px" width="100%" height="0.5px" style="fill: rgb(0, 107, 238);"/></svg>'),
                      linear-gradient(to bottom, rgb(74, 152, 253), rgb(7, 102, 227)) !important;
    background-position: left top, left bottom, center;
    background-size: 100% 1px, 100% 1px, 100% 100%;
  }
  btn-group .btn.btn-segment.active:first-child, btn-group .btn.btn-segment.active:last-child,
  .btn-group .btn.btn-segment.active:first-child, .btn-group .btn.btn-segment.active:last-child {
    background-image: linear-gradient(to bottom, rgb(105, 180, 250), rgb(13, 128, 255));
    background-position: center;
    background-size: 100% 100%;
  }
  btn-group .btn.btn-segment.active:first-child,
  .btn-group .btn.btn-segment.active:first-child {
    box-shadow: inset 0px 0px 0px 0.5px rgb(30, 130, 253);
  }
  btn-group .btn.btn-segment.active:last-child,
  .btn-group .btn.btn-segment.active:last-child {
    box-shadow: inset 0px 0px 0px 0.5px rgb(30, 130, 253);
    z-index: 1;
  }
  btn-group.seperated .btn.btn-segment.active,
  .btn-group.seperated .btn.btn-segment.active {
    background-image: linear-gradient(to bottom, rgb(105, 180, 250), rgb(13, 128, 255));
    background-position: center;
    background-size: 100% 100%;
    box-shadow: inset 0px 0px 0px 0.5px rgb(30, 130, 253);
  }

}
nav-group {
  display: block;

}
nav-group nav-item.active {
  background-color: rgba(69, 69, 69, 0.15);
}
nav-group nav-item:not(.active):active {
  background-color: transparent;

}
window-content {
  top: 0px !important;
}
/*!
 * =====================================================
 * Photon v0.1.2
 * Copyright 2016 Connor Sears
 * Licensed under MIT (https://github.com/connors/proton/blob/master/LICENSE)
 *
 * v0.1.2 designed by @connors.
 * =====================================================
 */

@charset "UTF-8";
audio,
canvas,
progress,
video {
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
}

a:active,
a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

* {
  cursor: default;
  -webkit-user-select: none;
}

input,
textarea {
  -webkit-user-select: text;
}

form,
input,
optgroup,
select,
textarea {
  -webkit-user-select: text;
  -webkit-app-region: no-drag;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

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

body {
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: #333;
  background-color: transparent;
}

hr {
  margin: 15px 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #ddd;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 30px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 18px;
}

h5 {
  font-size: 14px;
}

h6 {
  font-size: 12px;
}

window-content {
  position: relative;
  overflow-y: auto;
  display: flex;
  flex: 1;
}

.selectable-text {
  cursor: text;
  -webkit-user-select: text;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.padded {
  padding: 10px;
}

.padded-less {
  padding: 5px;
}

.padded-more {
  padding: 20px;
}

.padded-vertically {
  padding-top: 10px;
  padding-bottom: 10px;
}

.padded-vertically-less {
  padding-top: 5px;
  padding-bottom: 5px;
}

.padded-vertically-more {
  padding-top: 20px;
  padding-bottom: 20px;
}

.padded-horizontally {
  padding-right: 10px;
  padding-left: 10px;
}

.padded-horizontally-less {
  padding-right: 5px;
  padding-left: 5px;
}

.padded-horizontally-more {
  padding-right: 20px;
  padding-left: 20px;
}

.padded-top {
  padding-top: 10px;
}

.padded-top-less {
  padding-top: 5px;
}

.padded-top-more {
  padding-top: 20px;
}

.padded-bottom {
  padding-bottom: 10px;
}

.padded-bottom-less {
  padding-bottom: 5px;
}

.padded-bottom-more {
  padding-bottom: 20px;
}

.sidebar {
  background-color: #f5f5f4;
}

.draggable {
  -webkit-app-region: drag;
}

.not-draggable {
  -webkit-app-region: no-drag;
}

.clearfix:before, .clearfix:after {
  display: table;
  content: " ";
}
.clearfix:after {
  clear: both;
}

.btn {
  display: inline-block;
  padding: 3px 8px;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: default;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
  -webkit-app-region: no-drag;
}
.btn:focus {
  outline: none;
  box-shadow: none;
}

.btn-mini {
  padding: 2px 6px;
}

.btn-large {
  padding: 6px 12px;
}

.btn-form {
  padding-right: 20px;
  padding-left: 20px;
}

.btn-default {
  color: #333;
  border-top-color: rgb(205, 205, 205);
  border-right-color: rgb(205, 205, 205);
  border-bottom-color: rgb(177, 177, 177);
  border-left-color: rgb(205, 205, 205);
  background-image: linear-gradient(rgb(255, 255, 255), rgb(252, 252, 252) 1px, rgb(241, 241, 241));
}
.btn-default:active {
  background-color: #ddd;
  background-image: none;
}

.btn-primary,
.btn-positive,
.btn-negative,
.btn-warning {
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.btn-primary {
  border-color: #388df8;
  border-bottom-color: #0866dc;
  background-color: #6eb4f7;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6eb4f7), color-stop(100%, #1a82fb));
  background-image: -webkit-linear-gradient(top, #6eb4f7 0%, #1a82fb 100%);
  background-image: linear-gradient(to bottom, #6eb4f7 0%, #1a82fb 100%);
}
.btn-primary:active {
  background-color: #3e9bf4;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e9bf4), color-stop(100%, #0469de));
  background-image: -webkit-linear-gradient(top, #3e9bf4 0%, #0469de 100%);
  background-image: linear-gradient(to bottom, #3e9bf4 0%, #0469de 100%);
}

.btn-positive {
  border-color: #29a03b;
  border-bottom-color: #248b34;
  background-color: #5bd46d;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bd46d), color-stop(100%, #29a03b));
  background-image: -webkit-linear-gradient(top, #5bd46d 0%, #29a03b 100%);
  background-image: linear-gradient(to bottom, #5bd46d 0%, #29a03b 100%);
}
.btn-positive:active {
  background-color: #34c84a;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #34c84a), color-stop(100%, #248b34));
  background-image: -webkit-linear-gradient(top, #34c84a 0%, #248b34 100%);
  background-image: linear-gradient(to bottom, #34c84a 0%, #248b34 100%);
}

.btn-negative {
  border-color: #fb2f29;
  border-bottom-color: #fb1710;
  background-color: #fd918d;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fd918d), color-stop(100%, #fb2f29));
  background-image: -webkit-linear-gradient(top, #fd918d 0%, #fb2f29 100%);
  background-image: linear-gradient(to bottom, #fd918d 0%, #fb2f29 100%);
}
.btn-negative:active {
  background-color: #fc605b;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fc605b), color-stop(100%, #fb1710));
  background-image: -webkit-linear-gradient(top, #fc605b 0%, #fb1710 100%);
  background-image: linear-gradient(to bottom, #fc605b 0%, #fb1710 100%);
}

.btn-warning {
  border-color: #fcaa0e;
  border-bottom-color: #ee9d02;
  background-color: #fece72;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fece72), color-stop(100%, #fcaa0e));
  background-image: -webkit-linear-gradient(top, #fece72 0%, #fcaa0e 100%);
  background-image: linear-gradient(to bottom, #fece72 0%, #fcaa0e 100%);
}
.btn-warning:active {
  background-color: #fdbc40;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdbc40), color-stop(100%, #ee9d02));
  background-image: -webkit-linear-gradient(top, #fdbc40 0%, #ee9d02 100%);
  background-image: linear-gradient(to bottom, #fdbc40 0%, #ee9d02 100%);
}

.btn .icon {
  float: left;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  margin-bottom: 1px;
  color: #737475;
  font-size: 14px;
  line-height: 1;
}

.btn .icon-text {
  margin-right: 5px;
}

.btn-dropdown:after {
  font-family: "photon-entypo";
  margin-left: 5px;
  content: '\e873';
}
btn-group,
.btn-group {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  -webkit-app-region: no-drag;
}
btn-group .btn,
.btn-group .btn {
  position: relative;
  float: left;
}
btn-group .btn-default.active,
.btn-group .btn-default.active {
  border-top-color: rgb(105, 105, 105);
  border-bottom: 1px solid rgb(94, 94, 94);
  border-right: 1px solid rgb(105, 105, 105) !important;
  border-left: 1px solid rgb(105, 105, 105) !important;

}
btn-group .btn:focus, btn-group .btn:active,
.btn-group .btn:focus, .btn-group .btn:active {
  z-index: 2;
}
btn-group .btn.active,
.btn-group .btn.active {
  z-index: 3;
}

btn-group .btn + .btn,
btn-group .btn + btn-group,
btn-group btn-group + .btn,
btn-group btn-group + btn-group,
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
  margin-left: -1px;
}
btn-group > .btn:first-child,
.btn-group > .btn:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
btn-group > .btn:last-child,
.btn-group > .btn:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
btn-group > .btn:not(:first-child):not(:last-child),
.btn-group > .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}
btn-group .btn + .btn,
.btn-group .btn + .btn {
  border-left: 1px solid #c2c0c2;
}
btn-group .btn + .btn.active,
.btn-group .btn + .btn.active {
  border-left: 0;
}
btn-group .btn.active,
.btn-group .active {
  color: #fff;
  border: 1px solid transparent;
  background-color: #6d6c6d;
  background-image: none;
}
btn-group .active .icon,
.btn-group .active .icon {
  color: #fff;
}

tool-bar {
  min-height: 22px;
  box-shadow: inset 0 1px 0 #f5f4f5;
  background-color: #e8e6e8;
  background-image: linear-gradient(rgb(233, 233, 233), rgb(233, 233, 233));
  background-image: linear-gradient(rgb(216, 216, 216), rgb(216, 216, 216));
}
tool-bar:before, tool-bar:after {
  display: table;
  content: " ";
}
tool-bar:after {
  clear: both;
}

tool-bar[type="header"] {
  border-bottom: 1px solid #c2c0c2;
}
tool-bar[type="header"] .title {
  margin-top: 1px;
}

tool-bar[type="footer"] {
  border-top: 1px solid #c2c0c2;
  -webkit-app-region: drag;
}

.title {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  color: #555;
  cursor: default;
}

tool-bar .borderless {
  border-top: 0;
  border-bottom: 0;
}

.toolbar-actions {
  margin-top: 4px;
  margin-bottom: 3px;
  padding-right: 3px;
  padding-left: 3px;
  padding-bottom: 3px;
  -webkit-app-region: drag;
}
.toolbar-actions:before, .toolbar-actions:after {
  display: table;
  content: " ";
}
.toolbar-actions:after {
  clear: both;
}
.toolbar-actions > .btn,
.toolbar-actions > .btn-group {
  margin-left: 4px;
  margin-right: 4px;
}

label {
  display: inline-block;
  font-size: 13px;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

input[type="search"] {
  box-sizing: border-box;
}

input[type="radio"],
input[type="checkbox"] {
  margin: 4px 0 0;
  line-height: normal;
}

.form-control {
  display: inline-block;
  width: 100%;
  min-height: 25px;
  padding: 5px 10px;
  font-size: 13px;
  line-height: 1.6;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
}
.form-control:focus {
  border-color: #6db3fd;
  box-shadow: 0 0 0 3px #6db3fd;
}

textarea {
  height: auto;
}

.form-group {
  margin-bottom: 10px;
}

.radio,
.checkbox {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
}
.radio label,
.checkbox label {
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: normal;
}

.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  position: absolute;
  margin-left: -20px;
  margin-top: 4px;
}

.form-actions .btn {
  margin-right: 10px;
}
.form-actions .btn:last-child {
  margin-right: 0;
}

.pane-group {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
}

.pane {
  position: relative;
  overflow-y: auto;
  flex: 1;
  border-left: 1px solid #ddd;
}
.pane:first-child {
  border-left: 0;
}

.pane-sm {
  max-width: 220px;
  min-width: 150px;
}

.pane-mini {
  width: 80px;
  flex: none;
}

.pane-one-fourth {
  width: 25%;
  flex: none;
}

.pane-one-third {
  width: 33.3%;
  flex: none;
}

img {
  -webkit-user-drag: text;
}

.img-circle {
  border-radius: 50%;
}

.img-rounded {
  border-radius: 4px;
}
/*
list-group {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}
list-group * {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

list-item {
  display: block;
  padding: 10px;
  font-size: 12px;
  color: #414142;
  border-top: 1px solid #ddd;
}
list-item:first-child {
  border-top: 0;
}
list-item.active, .list-group-item.selected {
  color: #fff;
  background-color: #116cd6;
}

list-header {
  padding: 10px;
}*/

.media-object {
  margin-top: 3px;
}

.media-object.pull-left {
  margin-right: 10px;
}

.media-object.pull-right {
  margin-left: 10px;
}

.media-body {
  overflow: hidden;
}

nav-group {
  font-size: 14px;
}

nav-item {
  padding: 2px 10px 2px 25px;
  display: block;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
nav-item:active, nav-item.active {
  background-color: #dcdfe1;
}
nav-item .icon {
  width: 19px;
  height: 18px;
  float: left;
  color: #737475;
  margin-top: -3px;
  margin-right: 7px;
  font-size: 18px;
  text-align: center;
}

.nav-group-title {
  margin: 0;
  padding: 10px 10px 2px;
  font-size: 12px;
  font-weight: 500;
  color: #666666;
}

@font-face {
  font-family: "photon-entypo";
  src: url("../fonts/photon-entypo.eot");
  src: url("../fonts/photon-entypo.eot?#iefix") format("eot"), url("../fonts/photon-entypo.woff") format("woff"), url("../fonts/photon-entypo.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
.icon:before {
  position: relative;
  display: inline-block;
  font-family: "photon-entypo";
  speak: none;
  font-size: 100%;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-note:before {
  content: '\e800';
}

/* '' */
.icon-note-beamed:before {
  content: '\e801';
}

/* '' */
.icon-music:before {
  content: '\e802';
}

/* '' */
.icon-search:before {
  content: '\e803';
}

/* '' */
.icon-flashlight:before {
  content: '\e804';
}

/* '' */
.icon-mail:before {
  content: '\e805';
}

/* '' */
.icon-heart:before {
  content: '\e806';
}

/* '' */
.icon-heart-empty:before {
  content: '\e807';
}

/* '' */
.icon-star:before {
  content: '\e808';
}

/* '' */
.icon-star-empty:before {
  content: '\e809';
}

/* '' */
.icon-user:before {
  content: '\e80a';
}

/* '' */
.icon-users:before {
  content: '\e80b';
}

/* '' */
.icon-user-add:before {
  content: '\e80c';
}

/* '' */
.icon-video:before {
  content: '\e80d';
}

/* '' */
.icon-picture:before {
  content: '\e80e';
}

/* '' */
.icon-camera:before {
  content: '\e80f';
}

/* '' */
.icon-layout:before {
  content: '\e810';
}

/* '' */
.icon-menu:before {
  content: '\e811';
}

/* '' */
.icon-check:before {
  content: '\e812';
}

/* '' */
.icon-cancel:before {
  content: '\e813';
}

/* '' */
.icon-cancel-circled:before {
  content: '\e814';
}

/* '' */
.icon-cancel-squared:before {
  content: '\e815';
}

/* '' */
.icon-plus:before {
  content: '\e816';
}

/* '' */
.icon-plus-circled:before {
  content: '\e817';
}

/* '' */
.icon-plus-squared:before {
  content: '\e818';
}

/* '' */
.icon-minus:before {
  content: '\e819';
}

/* '' */
.icon-minus-circled:before {
  content: '\e81a';
}

/* '' */
.icon-minus-squared:before {
  content: '\e81b';
}

/* '' */
.icon-help:before {
  content: '\e81c';
}

/* '' */
.icon-help-circled:before {
  content: '\e81d';
}

/* '' */
.icon-info:before {
  content: '\e81e';
}

/* '' */
.icon-info-circled:before {
  content: '\e81f';
}

/* '' */
.icon-back:before {
  content: '\e820';
}

/* '' */
.icon-home:before {
  content: '\e821';
}

/* '' */
.icon-link:before {
  content: '\e822';
}

/* '' */
.icon-attach:before {
  content: '\e823';
}

/* '' */
.icon-lock:before {
  content: '\e824';
}

/* '' */
.icon-lock-open:before {
  content: '\e825';
}

/* '' */
.icon-eye:before {
  content: '\e826';
}

/* '' */
.icon-tag:before {
  content: '\e827';
}

/* '' */
.icon-bookmark:before {
  content: '\e828';
}

/* '' */
.icon-bookmarks:before {
  content: '\e829';
}

/* '' */
.icon-flag:before {
  content: '\e82a';
}

/* '' */
.icon-thumbs-up:before {
  content: '\e82b';
}

/* '' */
.icon-thumbs-down:before {
  content: '\e82c';
}

/* '' */
.icon-download:before {
  content: '\e82d';
}

/* '' */
.icon-upload:before {
  content: '\e82e';
}

/* '' */
.icon-upload-cloud:before {
  content: '\e82f';
}

/* '' */
.icon-reply:before {
  content: '\e830';
}

/* '' */
.icon-reply-all:before {
  content: '\e831';
}

/* '' */
.icon-forward:before {
  content: '\e832';
}

/* '' */
.icon-quote:before {
  content: '\e833';
}

/* '' */
.icon-code:before {
  content: '\e834';
}

/* '' */
.icon-export:before {
  content: '\e835';
}

/* '' */
.icon-pencil:before {
  content: '\e836';
}

/* '' */
.icon-feather:before {
  content: '\e837';
}

/* '' */
.icon-print:before {
  content: '\e838';
}

/* '' */
.icon-retweet:before {
  content: '\e839';
}

/* '' */
.icon-keyboard:before {
  content: '\e83a';
}

/* '' */
.icon-comment:before {
  content: '\e83b';
}

/* '' */
.icon-chat:before {
  content: '\e83c';
}

/* '' */
.icon-bell:before {
  content: '\e83d';
}

/* '' */
.icon-attention:before {
  content: '\e83e';
}

/* '' */
.icon-alert:before {
  content: '\e83f';
}

/* '' */
.icon-vcard:before {
  content: '\e840';
}

/* '' */
.icon-address:before {
  content: '\e841';
}

/* '' */
.icon-location:before {
  content: '\e842';
}

/* '' */
.icon-map:before {
  content: '\e843';
}

/* '' */
.icon-direction:before {
  content: '\e844';
}

/* '' */
.icon-compass:before {
  content: '\e845';
}

/* '' */
.icon-cup:before {
  content: '\e846';
}

/* '' */
.icon-trash:before {
  content: '\e847';
}

/* '' */
.icon-doc:before {
  content: '\e848';
}

/* '' */
.icon-docs:before {
  content: '\e849';
}

/* '' */
.icon-doc-landscape:before {
  content: '\e84a';
}

/* '' */
.icon-doc-text:before {
  content: '\e84b';
}

/* '' */
.icon-doc-text-inv:before {
  content: '\e84c';
}

/* '' */
.icon-newspaper:before {
  content: '\e84d';
}

/* '' */
.icon-book-open:before {
  content: '\e84e';
}

/* '' */
.icon-book:before {
  content: '\e84f';
}

/* '' */
.icon-folder:before {
  content: '\e850';
}

/* '' */
.icon-archive:before {
  content: '\e851';
}

/* '' */
.icon-box:before {
  content: '\e852';
}

/* '' */
.icon-rss:before {
  content: '\e853';
}

/* '' */
.icon-phone:before {
  content: '\e854';
}

/* '' */
.icon-cog:before {
  content: '\e855';
}

/* '' */
.icon-tools:before {
  content: '\e856';
}

/* '' */
.icon-share:before {
  content: '\e857';
}

/* '' */
.icon-shareable:before {
  content: '\e858';
}

/* '' */
.icon-basket:before {
  content: '\e859';
}

/* '' */
.icon-bag:before {
  content: '\e85a';
}

/* '' */
.icon-calendar:before {
  content: '\e85b';
}

/* '' */
.icon-login:before {
  content: '\e85c';
}

/* '' */
.icon-logout:before {
  content: '\e85d';
}

/* '' */
.icon-mic:before {
  content: '\e85e';
}

/* '' */
.icon-mute:before {
  content: '\e85f';
}

/* '' */
.icon-sound:before {
  content: '\e860';
}

/* '' */
.icon-volume:before {
  content: '\e861';
}

/* '' */
.icon-clock:before {
  content: '\e862';
}

/* '' */
.icon-hourglass:before {
  content: '\e863';
}

/* '' */
.icon-lamp:before {
  content: '\e864';
}

/* '' */
.icon-light-down:before {
  content: '\e865';
}

/* '' */
.icon-light-up:before {
  content: '\e866';
}

/* '' */
.icon-adjust:before {
  content: '\e867';
}

/* '' */
.icon-block:before {
  content: '\e868';
}

/* '' */
.icon-resize-full:before {
  content: '\e869';
}

/* '' */
.icon-resize-small:before {
  content: '\e86a';
}

/* '' */
.icon-popup:before {
  content: '\e86b';
}

/* '' */
.icon-publish:before {
  content: '\e86c';
}

/* '' */
.icon-window:before {
  content: '\e86d';
}

/* '' */
.icon-arrow-combo:before {
  content: '\e86e';
}

/* '' */
.icon-down-circled:before {
  content: '\e86f';
}

/* '' */
.icon-left-circled:before {
  content: '\e870';
}

/* '' */
.icon-right-circled:before {
  content: '\e871';
}

/* '' */
.icon-up-circled:before {
  content: '\e872';
}

/* '' */
.icon-down-open:before {
  content: '\e873';
}

/* '' */
.icon-left-open:before {
  content: '\e874';
}

/* '' */
.icon-right-open:before {
  content: '\e875';
}

/* '' */
.icon-up-open:before {
  content: '\e876';
}

/* '' */
.icon-down-open-mini:before {
  content: '\e877';
}

/* '' */
.icon-left-open-mini:before {
  content: '\e878';
}

/* '' */
.icon-right-open-mini:before {
  content: '\e879';
}

/* '' */
.icon-up-open-mini:before {
  content: '\e87a';
}

/* '' */
.icon-down-open-big:before {
  content: '\e87b';
}

/* '' */
.icon-left-open-big:before {
  content: '\e87c';
}

/* '' */
.icon-right-open-big:before {
  content: '\e87d';
}

/* '' */
.icon-up-open-big:before {
  content: '\e87e';
}

/* '' */
.icon-down:before {
  content: '\e87f';
}

/* '' */
.icon-left:before {
  content: '\e880';
}

/* '' */
.icon-right:before {
  content: '\e881';
}

/* '' */
.icon-up:before {
  content: '\e882';
}

/* '' */
.icon-down-dir:before {
  content: '\e883';
}

/* '' */
.icon-left-dir:before {
  content: '\e884';
}

/* '' */
.icon-right-dir:before {
  content: '\e885';
}

/* '' */
.icon-up-dir:before {
  content: '\e886';
}

/* '' */
.icon-down-bold:before {
  content: '\e887';
}

/* '' */
.icon-left-bold:before {
  content: '\e888';
}

/* '' */
.icon-right-bold:before {
  content: '\e889';
}

/* '' */
.icon-up-bold:before {
  content: '\e88a';
}

/* '' */
.icon-down-thin:before {
  content: '\e88b';
}

/* '' */
.icon-left-thin:before {
  content: '\e88c';
}

/* '' */
.icon-right-thin:before {
  content: '\e88d';
}

/* '' */
.icon-up-thin:before {
  content: '\e88e';
}

/* '' */
.icon-ccw:before {
  content: '\e88f';
}

/* '' */
.icon-cw:before {
  content: '\e890';
}

/* '' */
.icon-arrows-ccw:before {
  content: '\e891';
}

/* '' */
.icon-level-down:before {
  content: '\e892';
}

/* '' */
.icon-level-up:before {
  content: '\e893';
}

/* '' */
.icon-shuffle:before {
  content: '\e894';
}

/* '' */
.icon-loop:before {
  content: '\e895';
}

/* '' */
.icon-switch:before {
  content: '\e896';
}

/* '' */
.icon-play:before {
  content: '\e897';
}

/* '' */
.icon-stop:before {
  content: '\e898';
}

/* '' */
.icon-pause:before {
  content: '\e899';
}

/* '' */
.icon-record:before {
  content: '\e89a';
}

/* '' */
.icon-to-end:before {
  content: '\e89b';
}

/* '' */
.icon-to-start:before {
  content: '\e89c';
}

/* '' */
.icon-fast-forward:before {
  content: '\e89d';
}

/* '' */
.icon-fast-backward:before {
  content: '\e89e';
}

/* '' */
.icon-progress-0:before {
  content: '\e89f';
}

/* '' */
.icon-progress-1:before {
  content: '\e8a0';
}

/* '' */
.icon-progress-2:before {
  content: '\e8a1';
}

/* '' */
.icon-progress-3:before {
  content: '\e8a2';
}

/* '' */
.icon-target:before {
  content: '\e8a3';
}

/* '' */
.icon-palette:before {
  content: '\e8a4';
}

/* '' */
.icon-list:before {
  content: '\e8a5';
}

/* '' */
.icon-list-add:before {
  content: '\e8a6';
}

/* '' */
.icon-signal:before {
  content: '\e8a7';
}

/* '' */
.icon-trophy:before {
  content: '\e8a8';
}

/* '' */
.icon-battery:before {
  content: '\e8a9';
}

/* '' */
.icon-back-in-time:before {
  content: '\e8aa';
}

/* '' */
.icon-monitor:before {
  content: '\e8ab';
}

/* '' */
.icon-mobile:before {
  content: '\e8ac';
}

/* '' */
.icon-network:before {
  content: '\e8ad';
}

/* '' */
.icon-cd:before {
  content: '\e8ae';
}

/* '' */
.icon-inbox:before {
  content: '\e8af';
}

/* '' */
.icon-install:before {
  content: '\e8b0';
}

/* '' */
.icon-globe:before {
  content: '\e8b1';
}

/* '' */
.icon-cloud:before {
  content: '\e8b2';
}

/* '' */
.icon-cloud-thunder:before {
  content: '\e8b3';
}

/* '' */
.icon-flash:before {
  content: '\e8b4';
}

/* '' */
.icon-moon:before {
  content: '\e8b5';
}

/* '' */
.icon-flight:before {
  content: '\e8b6';
}

/* '' */
.icon-paper-plane:before {
  content: '\e8b7';
}

/* '' */
.icon-leaf:before {
  content: '\e8b8';
}

/* '' */
.icon-lifebuoy:before {
  content: '\e8b9';
}

/* '' */
.icon-mouse:before {
  content: '\e8ba';
}

/* '' */
.icon-briefcase:before {
  content: '\e8bb';
}

/* '' */
.icon-suitcase:before {
  content: '\e8bc';
}

/* '' */
.icon-dot:before {
  content: '\e8bd';
}

/* '' */
.icon-dot-2:before {
  content: '\e8be';
}

/* '' */
.icon-dot-3:before {
  content: '\e8bf';
}

/* '' */
.icon-brush:before {
  content: '\e8c0';
}

/* '' */
.icon-magnet:before {
  content: '\e8c1';
}

/* '' */
.icon-infinity:before {
  content: '\e8c2';
}

/* '' */
.icon-erase:before {
  content: '\e8c3';
}

/* '' */
.icon-chart-pie:before {
  content: '\e8c4';
}

/* '' */
.icon-chart-line:before {
  content: '\e8c5';
}

/* '' */
.icon-chart-bar:before {
  content: '\e8c6';
}

/* '' */
.icon-chart-area:before {
  content: '\e8c7';
}

/* '' */
.icon-tape:before {
  content: '\e8c8';
}

/* '' */
.icon-graduation-cap:before {
  content: '\e8c9';
}

/* '' */
.icon-language:before {
  content: '\e8ca';
}

/* '' */
.icon-ticket:before {
  content: '\e8cb';
}

/* '' */
.icon-water:before {
  content: '\e8cc';
}

/* '' */
.icon-droplet:before {
  content: '\e8cd';
}

/* '' */
.icon-air:before {
  content: '\e8ce';
}

/* '' */
.icon-credit-card:before {
  content: '\e8cf';
}

/* '' */
.icon-floppy:before {
  content: '\e8d0';
}

/* '' */
.icon-clipboard:before {
  content: '\e8d1';
}

/* '' */
.icon-megaphone:before {
  content: '\e8d2';
}

/* '' */
.icon-database:before {
  content: '\e8d3';
}

/* '' */
.icon-drive:before {
  content: '\e8d4';
}

/* '' */
.icon-bucket:before {
  content: '\e8d5';
}

/* '' */
.icon-thermometer:before {
  content: '\e8d6';
}

/* '' */
.icon-key:before {
  content: '\e8d7';
}

/* '' */
.icon-flow-cascade:before {
  content: '\e8d8';
}

/* '' */
.icon-flow-branch:before {
  content: '\e8d9';
}

/* '' */
.icon-flow-tree:before {
  content: '\e8da';
}

/* '' */
.icon-flow-line:before {
  content: '\e8db';
}

/* '' */
.icon-flow-parallel:before {
  content: '\e8dc';
}

/* '' */
.icon-rocket:before {
  content: '\e8dd';
}

/* '' */
.icon-gauge:before {
  content: '\e8de';
}

/* '' */
.icon-traffic-cone:before {
  content: '\e8df';
}

/* '' */
.icon-cc:before {
  content: '\e8e0';
}

/* '' */
.icon-cc-by:before {
  content: '\e8e1';
}

/* '' */
.icon-cc-nc:before {
  content: '\e8e2';
}

/* '' */
.icon-cc-nc-eu:before {
  content: '\e8e3';
}

/* '' */
.icon-cc-nc-jp:before {
  content: '\e8e4';
}

/* '' */
.icon-cc-sa:before {
  content: '\e8e5';
}

/* '' */
.icon-cc-nd:before {
  content: '\e8e6';
}

/* '' */
.icon-cc-pd:before {
  content: '\e8e7';
}

/* '' */
.icon-cc-zero:before {
  content: '\e8e8';
}

/* '' */
.icon-cc-share:before {
  content: '\e8e9';
}

/* '' */
.icon-cc-remix:before {
  content: '\e8ea';
}

/* '' */
.icon-github:before {
  content: '\e8eb';
}

/* '' */
.icon-github-circled:before {
  content: '\e8ec';
}

/* '' */
.icon-flickr:before {
  content: '\e8ed';
}

/* '' */
.icon-flickr-circled:before {
  content: '\e8ee';
}

/* '' */
.icon-vimeo:before {
  content: '\e8ef';
}

/* '' */
.icon-vimeo-circled:before {
  content: '\e8f0';
}

/* '' */
.icon-twitter:before {
  content: '\e8f1';
}

/* '' */
.icon-twitter-circled:before {
  content: '\e8f2';
}

/* '' */
.icon-facebook:before {
  content: '\e8f3';
}

/* '' */
.icon-facebook-circled:before {
  content: '\e8f4';
}

/* '' */
.icon-facebook-squared:before {
  content: '\e8f5';
}

/* '' */
.icon-gplus:before {
  content: '\e8f6';
}

/* '' */
.icon-gplus-circled:before {
  content: '\e8f7';
}

/* '' */
.icon-pinterest:before {
  content: '\e8f8';
}

/* '' */
.icon-pinterest-circled:before {
  content: '\e8f9';
}

/* '' */
.icon-tumblr:before {
  content: '\e8fa';
}

/* '' */
.icon-tumblr-circled:before {
  content: '\e8fb';
}

/* '' */
.icon-linkedin:before {
  content: '\e8fc';
}

/* '' */
.icon-linkedin-circled:before {
  content: '\e8fd';
}

/* '' */
.icon-dribbble:before {
  content: '\e8fe';
}

/* '' */
.icon-dribbble-circled:before {
  content: '\e8ff';
}

/* '' */
.icon-stumbleupon:before {
  content: '\e900';
}

/* '' */
.icon-stumbleupon-circled:before {
  content: '\e901';
}

/* '' */
.icon-lastfm:before {
  content: '\e902';
}

/* '' */
.icon-lastfm-circled:before {
  content: '\e903';
}

/* '' */
.icon-rdio:before {
  content: '\e904';
}

/* '' */
.icon-rdio-circled:before {
  content: '\e905';
}

/* '' */
.icon-spotify:before {
  content: '\e906';
}

/* '' */
.icon-spotify-circled:before {
  content: '\e907';
}

/* '' */
.icon-qq:before {
  content: '\e908';
}

/* '' */
.icon-instagram:before {
  content: '\e909';
}

/* '' */
.icon-dropbox:before {
  content: '\e90a';
}

/* '' */
.icon-evernote:before {
  content: '\e90b';
}

/* '' */
.icon-flattr:before {
  content: '\e90c';
}

/* '' */
.icon-skype:before {
  content: '\e90d';
}

/* '' */
.icon-skype-circled:before {
  content: '\e90e';
}

/* '' */
.icon-renren:before {
  content: '\e90f';
}

/* '' */
.icon-sina-weibo:before {
  content: '\e910';
}

/* '' */
.icon-paypal:before {
  content: '\e911';
}

/* '' */
.icon-picasa:before {
  content: '\e912';
}

/* '' */
.icon-soundcloud:before {
  content: '\e913';
}

/* '' */
.icon-mixi:before {
  content: '\e914';
}

/* '' */
.icon-behance:before {
  content: '\e915';
}

/* '' */
.icon-google-circles:before {
  content: '\e916';
}

/* '' */
.icon-vkontakte:before {
  content: '\e917';
}

/* '' */
.icon-smashing:before {
  content: '\e918';
}

/* '' */
.icon-sweden:before {
  content: '\e919';
}

/* '' */
.icon-db-shape:before {
  content: '\e91a';
}

/* '' */
.icon-logo-db:before {
  content: '\e91b';
}

/* '' */
table {
  width: 100%;
  border: 0;
  border-collapse: separate;
  font-size: 12px;
  text-align: left;
}

thead {
  background-color: #f5f5f4;
}

tbody {
  background-color: #fff;
}

.table-striped tr:nth-child(even) {
  background-color: #f5f5f4;
}

tr:active,
.table-striped tr:active:nth-child(even) {
  color: #fff;
  background-color: #116cd6;
}

thead tr:active {
  color: #333;
  background-color: #f5f5f4;
}

th {
  font-weight: normal;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

th,
td {
  padding: 2px 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
th:last-child,
td:last-child {
  border-right: 0;
}

.tab-group, tab-group {
  margin-top: -1px;
  display: flex;
  border-top: 1px solid #989698;
  border-bottom: 1px solid #989698;
}

.tab-item, tab-item {
  position: relative;
  flex: 1;
  padding: 3px;
  font-size: 12px;
  text-align: center;
  border-left: 1px solid #989698;
  background-color: #b8b6b8;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b8b6b8), color-stop(100%, #b0aeb0));
  background-image: -webkit-linear-gradient(top, #b8b6b8 0%, #b0aeb0 100%);
  background-image: linear-gradient(to bottom, #b8b6b8 0%, #b0aeb0 100%);
}
.tab-item:first-child, tab-item:first-child {
  border-left: 0;
}
.tab-item.active, tab-item.active {
  background-color: #d4d2d4;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d4d2d4), color-stop(100%, #cccacc));
  background-image: -webkit-linear-gradient(top, #d4d2d4 0%, #cccacc 100%);
  background-image: linear-gradient(to bottom, #d4d2d4 0%, #cccacc 100%);
}
.tab-item .icon-close-tab, tab-item button[action="close"] {
  position: absolute;
  top: 50%;
  left: 5px;
  width: 15px;
  height: 15px;
  font-size: 15px;
  line-height: 15px;
  text-align: center;
  color: #666;
  opacity: 0;
  transition: opacity .1s linear, background-color .1s linear;
  border-radius: 3px;
  transform: translateY(-50%);
  z-index: 10;
}
.tab-item:after, tab-item:after{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  background-color: rgba(0, 0, 0, 0.08);
  opacity: 0;
  transition: opacity .1s linear;
  z-index: 1;
}
.tab-item:hover:not(.active):after, tab-item:hover:not(.active):after {
  opacity: 1;
}
.tab-item:hover .icon-close-tab, tab-item:hover button[action="close"] {
  opacity: 1;
}
.tab-item .icon-close-tab:hover, tab-item button[action="close"]:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

.tab-item-fixed, tab-item[type="fixed"] {
  flex: none;
  padding: 3px 10px;
}
.slider {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #bababa;
  width: auto;
  height: 3px;
  border-radius: 5px;
  outline: none;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
}
.slider.slider-bold {
  height: 4px;
  border-radius: 10px;
}
.slider.slider-square, .slider.slider-square-inverted {
  margin-bottom: 7px;
}
.slider.slider-square::-webkit-slider-thumb, .slider.slider-square-inverted::-webkit-slider-thumb {
  height: 23px;
  width: 20px;
  border: 1px solid #BABABA;
  border: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90%" height="100%" viewBox="0 0 92 102"><rect x="0" y="0" width="100" height="100" fill="none"/><path d="M18.3 3 v-0 a15.3,15.3 0 0,0 -15.3,15.3 L3 50 L45 98 L88 50 v-31.4 a15.3,-15.3 0 0,0 -15.3,-15.3 z" style="stroke: rgba(130, 130, 130, 1); stroke-width: 2.8px; fill: #fff;"/></svg>');/*In Chrome dunkler!*/
  background-size: 98% 98%;
  -webkit-filter: drop-shadow(0px 1px 1px rgba(100, 100, 100, 0.2));
          filter: drop-shadow(0px 1px 1px rgba(100, 100, 100, 0.2));
  background-position: 0.5px 2px;
  background-repeat: no-repeat;
}
.slider.slider-square::-webkit-slider-thumb:active, .slider.slider-square-inverted::-webkit-slider-thumb:active {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90%" height="100%" viewBox="0 0 92 102"><path d="M18.3 3 v-0 a15.3,15.3 0 0,0 -15.3,15.3 L3 50 L45 98 L88 50 v-31.4 a15.3,-15.3 0 0,0 -15.3,-15.3 z" style="stroke: rgba(130, 130, 130, 1); stroke-width: 3px; fill: #f0f0f0;"/></svg>');/*In Chrome dunkler!*/
}
.slider.slider-square-inverted::-webkit-slider-thumb {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-filter: drop-shadow(0px -1px 1px rgba(100, 100, 100, 0.2));
          filter: drop-shadow(0px -1px 1px rgba(100, 100, 100, 0.2));
}
.slider.slider-round {
  background-size: 50% 100%;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="background-color: #438ef9"></svg>');
}
.slider-round.blue {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="background-color: #438ef9"></svg>');
}
.slider-round.gray {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="background-color: #797979"></svg>');
}
.slider.slider-round::-webkit-slider-thumb {
  height: 17px;
  width: 17px;
  border: 1px solid rgb(190, 190, 190);
  background-color: #fff;
  border-radius: 50%;
  -webkit-filter: drop-shadow(0px 1px 1px rgba(150, 150, 150, 0.4));
          filter: drop-shadow(0px 1px 1px rgba(150, 150, 150, 0.4));
}
.slider.slider-round.slider-small::-webkit-slider-thumb {
  height: 14px;
  width: 14px;
}
.slider.slider-round::-webkit-slider-thumb:active {
  background-color: #f0f0f0;
}
.slider.slider-round.gray::-webkit-slider-thumb:active {
  background-color: #f0f0f0;
}

/*Vertical Settings*/

.slider-vertical {
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-transform-origin: 0% 50%;
          transform-origin: 0% 50%;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  /*appearance: slider-vertical;
  width: 5px;
  height: auto;*/

}
@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
  .slider.slider-square::-webkit-slider-thumb, .slider.slider-square-inverted::-webkit-slider-thumb {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90%" height="100%" viewBox="0 0 92 102"><rect x="0" y="0" width="100" height="100" fill="none"/><path d="M18.3 3 v-0 a15.3,15.3 0 0,0 -15.3,15.3 L3 50 L45 98 L88 50 v-31.4 a15.3,-15.3 0 0,0 -15.3,-15.3 z" style="stroke: rgba(145, 145, 145, 1); stroke-width: 1.5px; fill: #fff;"/></svg>');
  }
  .slider.slider-square::-webkit-slider-thumb:active, .slider.slider-square-inverted::-webkit-slider-thumb:active {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90%" height="100%" viewBox="0 0 92 102"><rect x="0" y="0" width="100" height="100" fill="none"/><path d="M18.3 3 v-0 a15.3,15.3 0 0,0 -15.3,15.3 L3 50 L45 98 L88 50 v-31.4 a15.3,-15.3 0 0,0 -15.3,-15.3 z" style="stroke: rgba(145, 145, 145, 1); stroke-width: 1.5px; fill: #f0f0f0;"/></svg>');
  }
  .slider.slider-vertical::-webkit-slider-thumb {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    -webkit-filter: drop-shadow(0px -1px 1px rgba(100, 100, 100, 0.2));
            filter: drop-shadow(0px -1px 1px rgba(100, 100, 100, 0.2));
  }
  /*Here is a Data-URL used because Chrome (Blink) don't support rendering 0.1px for retina displays. The borders would be too thick. To use a background-image isn't a clean solution but it's the only way*/
  .slider.slider-round::-webkit-slider-thumb {
    border: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"><circle cx="50" cy="50" r="46" style="fill: #fff; stroke-width: 3px; stroke: rgb(190, 190, 190);"/></svg>');
    background-size: 100%;
    border-radius: 0px;
    background-color: transparent;
    height: 18px;
    width: 18px;
  }
  .slider.slider-round::-webkit-slider-thumb:active {
    background-color: transparent;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"><circle cx="50" cy="50" r="46" style="fill: #f0f0f0; stroke-width: 3px; stroke: rgb(190, 190, 190);"/></svg>');
  }
  .slider.slider-round.gray::-webkit-slider-thumb:active {
    background-color: transparent;
  }
  .slider.slider-round.slider-bold::-webkit-slider-thumb {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"><circle cx="50" cy="50" r="46" style="fill: #fff; stroke-width: 3px; stroke: rgb(148, 148, 148);"/></svg>');
  }
  .slider.slider-round.slider-bold::-webkit-slider-thumb:active {
    background-color: transparent;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"><circle cx="50" cy="50" r="46" style="fill: #dadada; stroke-width: 3px; stroke: rgb(148, 148, 148);"/></svg>');
  }
}
progress {
  -webkit-appearance: none;
  border-radius: 3px 3px 3px 3px;
  overflow: hidden;
  height: 6px;
}
progress::-webkit-progress-bar {
  background-color: rgba(0, 0, 0, 0.09);
  box-sizing: border-box;
  height: 6px;
  border-radius: 3px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="100%" height="100%" style="fill: none; stroke: #c0c0c0; stroke-width: 1px;" rx="4px" ry="4px"/></svg>');
  overflow: hidden;
}
progress::-webkit-progress-value {
  height: 100%;
  border-radius: 3px 0px 0px 3px;
  background-color: #3b99fc;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>');
}
progress:not([value])::-webkit-progress-bar {
  display: none;
}
progress:not([value]) {
  background-color: #429bf8;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
  linear-gradient(to right, rgba(66, 155, 249, 0) 0%, #73b9fc 50%, rgba(66, 155, 249, 0) 100%);
  animation: progressIndeterminate 2s infinite;
}
/*@keyframes progressIndeterminate {
  0% {
    background-position: 0px 0px, -100% 0px;
  }
  100% {
    background-position: 0px 0px, 500px 0px;
  }
}*/

@keyframes progressIndeterminate {
  0% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 -100%, #73b9fc -50%, #429bf8 0%);
  }
  2.5% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 -95%, #73b9fc -45%, #429bf8 5%);
  }
  5% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 -90%, #73b9fc -40%, #429bf8 10%);
  }
  7.5% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 -85%, #73b9fc -35%, #429bf8 15%);
  }
  10% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 -80%, #73b9fc -30%, #429bf8 20%);
  }
  12.5% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 -75%, #73b9fc -25%, #429bf8 25%);
  }
  15% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 -70%, #73b9fc -20%, #429bf8 30%);
  }
  17.5% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 -65%, #73b9fc -15%, #429bf8 35%);
  }
  20% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 -60%, #73b9fc -10%, #429bf8 40%);
  }
  22.5% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 -55%, #73b9fc -5%, #429bf8 45%);
  }
  25% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 -50%, #73b9fc 0%, #429bf8 50%);
  }
  27.5% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 -45%, #73b9fc 5%, #429bf8 55%);
  }
  30% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 -40%, #73b9fc 10%, #429bf8 60%);
  }
  32.5% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 -35%, #73b9fc 15%, #429bf8 65%);
  }
  35% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 -30%, #73b9fc 20%, #429bf8 70%);
  }
  37.5% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 -25%, #73b9fc 25%, #429bf8 75%);
  }
  40% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 -20%, #73b9fc 30%, #429bf8 80%);
  }
  42.5% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 -15%, #73b9fc 35%, #429bf8 85%);
  }
  45% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 -10%, #73b9fc 40%, #429bf8 90%);
  }
  47.5% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 -5%, #73b9fc 45%, #429bf8 95%);
  }
  50% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 0%, #73b9fc 50%, #429bf8 100%);
  }
  52.5% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 5%, #73b9fc 55%, #429bf8 105%);
  }
  55% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 10%, #73b9fc 60%, #429bf8 110%);
  }
  57.5% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 15%, #73b9fc 65%, #429bf8 115%);
  }
  60% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 20%, #73b9fc 70%, #429bf8 120%);
  }
  62.5% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 25%, #73b9fc 75%, #429bf8 125%);
  }
  65% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 30%, #73b9fc 80%, #429bf8 130%);
  }
  67.5% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 35%, #73b9fc 85%, #429bf8 135%);
  }
  70% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 40%, #73b9fc 90%, #429bf8 140%);
  }
  72.5% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 45%, #73b9fc 95%, #429bf8 145%);
  }
  75% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 50%, #73b9fc 100%, #429bf8 150%);
  }
  77.5% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 55%, #73b9fc 105%, #429bf8 155%);
  }
  80% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 60%, #73b9fc 110%, #429bf8 160%);
  }
  82.5% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 65%, #73b9fc 115%, #429bf8 165%);
  }
  85% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 70%, #73b9fc 120%, #429bf8 170%);
  }
  87.5% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 75%, #73b9fc 125%, #429bf8 175%);
  }
  90% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 80%, #73b9fc 130%, #429bf8 180%);
  }
  92.5% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 85%, #73b9fc 135%, #429bf8 185%);
  }
  95% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 90%, #73b9fc 140%, #429bf8 190%);
  }
  97.5% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 95%, #73b9fc 145%, #429bf8 195%);
  }
  100% {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>'),
    linear-gradient(to right, #429bf8 100%, #73b9fc 150%, #429bf8 200%);
  }
}



/*
Animation created by:
var defaultColor = "#429bf8";
var focusColor = "#73b9fc";
var step = 5; var startPos = -100; var endPos = 0; var middlePos = -50; var cssStr = ""; var defaultColor = "#429bf8"; var focusColor = "#73b9fc"; for (var i = 0; i <= 200; i = i + step) { var percentStep = (100 / (200 / step)) * (i / step); var str = "(to right, " + defaultColor + " " + (startPos + i) + "%, " + focusColor + " " + (middlePos + i) + "%, " + defaultColor + " " + (endPos + i) + "%)"; var completeStr = percentStep + '% {\n  background-image: url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="200%" height="100%" style="fill: none; stroke: #408ad6; stroke-width: 1px;" rx="4px" ry="4px"/></svg>\'),\n  linear-gradient' + str + ';\n}'; cssStr += completeStr + "\n"; } console.log(cssStr);
*/
input:not([type="range"]):not([type="color"]):not(.message-input) {
  height: auto;
  height: inherit;
  font-size: 12px;
  height: 13px;
  padding: 10px 6px 10px 6px;
  outline: none;
  border: 1px solid rgb(213, 213, 213);
  margin: 5px;
  cursor: text;
  -webkit-app-region: no-drag;
}
input:not([type="range"]):not([type="color"]):not(.message-input):focus {
  border-radius: 1px;
  box-shadow: 0px 0px 0px 3.5px rgba(116, 180, 255, 0.7);
  animation: showFocus .3s;
  border-color: rgb(122, 167, 221) !important;
}
@keyframes showFocus {
  0% {
    border-color: #dbdbdb;
    border-radius: -1px;
    box-shadow: 0px 0px 0px 14px rgba(145, 191, 245, 0);
    /*outline: 14px solid rgba(159, 204, 250, 0);
    outline-offset: 0px;*/
  }
  100% {
    border-color: rgb(122, 167, 221) !important;
    border-radius: 1px;
    box-shadow: 0px 0px 0px 3.5px rgba(145, 191, 245, 1);
    /*outline: 4px solid rgba(159, 204, 250, 1);
    outline-offset: -1px;*/
  }
}

tool-bar input:not([type="range"]):not([type="color"]):not(.message-input) {
  font-size: 13px;
  height: 14px;
  padding: 11px 6px 11px 6px;
  border-radius: 4px;
  border-color: #c2c2c2;
  margin: 0;
}
tool-bar input:not([type="range"]):not([type="color"]):not(.message-input):focus {
  border-color: #9fccfa;
  border-radius: 4px;
}
input[type="search"] {
  text-indent: 0px;
  text-align: center;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 50 50"><circle cx="20" cy="20" r="17" style="fill: none; stroke: #6a6a6a; stroke-width: 3px;"/><line x1="31" y1="31" x2="49" y2="49" style="stroke: #6a6a6a; stroke-width: 3.5px;"/></svg>');
  background-size: auto 65%, 100% 100%;
  background-position: 5px center, center;
  background-repeat: no-repeat;
  text-align: center;
  text-indent: 12px;
  border-radius: 5px !important;
}
tool-bar input[type="search"] {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 50 50"><circle cx="20" cy="20" r="17" style="fill: none; stroke: #6a6a6a; stroke-width: 3px;"/><line x1="31" y1="31" x2="49" y2="49" style="stroke: #6a6a6a; stroke-width: 3.5px;"/></svg>'),
                    linear-gradient(rgb(255, 255, 255), rgb(241, 240, 240));
  border: 1px solid rgb(167, 167, 167);
  border-bottom-color: rgb(178, 178, 178) !important;
  border-top-color: rgb(212, 212, 212) !important;
  border-left-color: rgb(204, 204, 204) !important;
  border-right-color: rgb(204, 204, 204) !important;
}
input[type="search"]:focus {
  text-align: left;
  text-indent: 15px;
  box-shadow: 0px 0px 0px 4.5px rgb(115, 166, 233);
  border-bottom-color: #f00 !important;
  border-radius: 4px !important;
}
input[type="search"]::-webkit-input-placeholder {
  /*text-align: center;*/
  color: rgb(181, 181, 181);
  font-weight: 400;
  letter-spacing: 0.4px;

}
input[type="search"]:focus::-webkit-input-placeholder {
  /*text-align: left;*/
}
input[type='number'] {
  width: 75px;
}
input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button {
  transform: translate(27px, 0px) scale(1.5);
  opacity: 1;
  display: none;
  background-color: red !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 20 20"><circle cx="5px" cy="5px" r="10px"/></svg>');
}
input[type='number']::-webkit-inner-spin-button {

}

input-stepper {
  display: block;
  margin: 0px 3px 0px 0px;
  font-size: 0;
  height: 20px;
  width: 13px;
  box-sizing: border-box;
  border: 1px solid rgb(202, 202, 202);
  border-radius: 5px;
  display: inline-block;
  vertical-align: middle;
  background-color: #fff;
}
input + input-stepper {
  margin-top: -1px;
}
input-stepper button {
  padding: 0;
  border: none;
  width: 100%;
  height: 50%;
  background-color: transparent;
  outline: none;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
}
input-stepper button:active {
  z-index: 1;
}
input-stepper button:nth-child(1) {
  border-radius: 5px 5px 0px 0px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"><line x1="25px" y1="65px" x2="50px" y2="45px" style="stroke: #333; stroke-width: 15px; stroke-linecap: round;"/><line x1="75px" y1="65px" x2="50px" y2="45px" style="stroke: #333; stroke-width: 15px; stroke-linecap: round;"/></svg>');
}
input-stepper button:nth-child(2) {
  border-radius: 0px 0px 5px 5px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"><line x1="25px" y1="35px" x2="50px" y2="55px" style="stroke: #333; stroke-width: 15px; stroke-linecap: round;"/><line x1="75px" y1="35px" x2="50px" y2="55px" style="stroke: #333; stroke-width: 15px; stroke-linecap: round;"/></svg>');
}
input-stepper button:nth-child(1):active {
  box-shadow: 0px 0px 0px 1px rgb(39, 122, 252);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"><line x1="25px" y1="65px" x2="50px" y2="45px" style="stroke: #fff; stroke-width: 15px; stroke-linecap: round;"/><line x1="75px" y1="65px" x2="50px" y2="45px" style="stroke: #fff; stroke-width: 15px; stroke-linecap: round;"/></svg>'),
                    linear-gradient(rgb(76, 154, 255), rgb(41, 129, 246));
}
input-stepper button:nth-child(2):active {
  box-shadow: 0px 0px 0px 1px rgb(8, 80, 234);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"><line x1="25px" y1="35px" x2="50px" y2="55px" style="stroke: #fff; stroke-width: 15px; stroke-linecap: round;"/><line x1="75px" y1="35px" x2="50px" y2="55px" style="stroke: #fff; stroke-width: 15px; stroke-linecap: round;"/></svg>'),
                    linear-gradient(rgb(38, 127, 247), rgb(7, 102, 233));
}

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
  input-stepper {
    border: 1px solid rgb(202, 202, 202);
    border: none;
    box-shadow: 0px 0px 0px 0.5px rgb(189, 189, 189);
    width: 12px;
  }
  input-stepper button:nth-child(1) {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"><line x1="25px" y1="65px" x2="50px" y2="45px" style="stroke: #222; stroke-width: 12px; stroke-linecap: round;"/><line x1="75px" y1="65px" x2="50px" y2="45px" style="stroke: #222; stroke-width: 12px; stroke-linecap: round;"/></svg>');
  }
  input-stepper button:nth-child(2) {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"><line x1="25px" y1="35px" x2="50px" y2="55px" style="stroke: #222; stroke-width: 12px; stroke-linecap: round;"/><line x1="75px" y1="35px" x2="50px" y2="55px" style="stroke: #222; stroke-width: 12px; stroke-linecap: round;"/></svg>');
  }
  input-stepper button:nth-child(1):active {
    box-shadow: 0px 0px 0px 0.5px rgb(39, 122, 252);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"><line x1="25px" y1="65px" x2="50px" y2="45px" style="stroke: #fff; stroke-width: 12px; stroke-linecap: round;"/><line x1="75px" y1="65px" x2="50px" y2="45px" style="stroke: #fff; stroke-width: 12px; stroke-linecap: round;"/></svg>'),
                      linear-gradient(rgb(76, 154, 255), rgb(41, 129, 246));
  }
  input-stepper button:nth-child(2):active {
    box-shadow: 0px 0px 0px 0.5px rgb(8, 80, 234);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"><line x1="25px" y1="35px" x2="50px" y2="55px" style="stroke: #fff; stroke-width: 12px; stroke-linecap: round;"/><line x1="75px" y1="35px" x2="50px" y2="55px" style="stroke: #fff; stroke-width: 12px; stroke-linecap: round;"/></svg>'),
                      linear-gradient(rgb(38, 127, 247), rgb(7, 102, 233));
  }
}
input[data-type-rule="suffix"] {
  width: 75px;
}



:host button {
  opacity: 0.1;
  padding: 0;
  border: none;
  width: 100%;
  height: 50%;
  background-color: transparent;
  outline: none;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
}
button:active {
  z-index: 1;
}
input-stepper button:nth-child(1) {
  border-radius: 5px 5px 0px 0px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"><line x1="25px" y1="65px" x2="50px" y2="45px" style="stroke: #333; stroke-width: 15px; stroke-linecap: round;"/><line x1="75px" y1="65px" x2="50px" y2="45px" style="stroke: #333; stroke-width: 15px; stroke-linecap: round;"/></svg>');
}
input-stepper button:nth-child(2) {
  border-radius: 0px 0px 5px 5px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"><line x1="25px" y1="35px" x2="50px" y2="55px" style="stroke: #333; stroke-width: 15px; stroke-linecap: round;"/><line x1="75px" y1="35px" x2="50px" y2="55px" style="stroke: #333; stroke-width: 15px; stroke-linecap: round;"/></svg>');
}
input-stepper button:nth-child(1):active {
  box-shadow: 0px 0px 0px 1px rgb(39, 122, 252);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"><line x1="25px" y1="65px" x2="50px" y2="45px" style="stroke: #fff; stroke-width: 15px; stroke-linecap: round;"/><line x1="75px" y1="65px" x2="50px" y2="45px" style="stroke: #fff; stroke-width: 15px; stroke-linecap: round;"/></svg>'),
                    linear-gradient(rgb(76, 154, 255), rgb(41, 129, 246));
}
input-stepper button:nth-child(2):active {
  box-shadow: 0px 0px 0px 1px rgb(8, 80, 234);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"><line x1="25px" y1="35px" x2="50px" y2="55px" style="stroke: #fff; stroke-width: 15px; stroke-linecap: round;"/><line x1="75px" y1="35px" x2="50px" y2="55px" style="stroke: #fff; stroke-width: 15px; stroke-linecap: round;"/></svg>'),
                    linear-gradient(rgb(38, 127, 247), rgb(7, 102, 233));
}

.pane-group > * header {
  text-align: center;
}
/*
.pane-group > * header {
  display: flex;
}
.pane-group > * header > * {
  flex: 0;
}
.pane-group > * header .input-sidebar {
  flex: 1;
}*/

.input-sidebar {
  background-color: rgba(35, 35, 35, 0.1);
  border-color: rgba(129, 129, 129, 0.2) !important;
  border-radius: 1px !important;

}
.input-sidebar::-webkit-input-placeholder {

}
messages-view {
  width: 100%;
  height: 100%;
  display: block;
}
messages-view .toolbar {
  height: 40px;
  box-sizing: border-box;
  border: 0px solid rgb(220, 220, 220);
  background-color: rgb(240, 240, 240);
  background-color: none !important;
  -webkit-backdrop-filter: blur(1px);
  background-image: none !important;
  vertical-align: middle;
  width: 100%;
}
messages-view .toolbar:first-child {
  border-bottom-width: 1px;
  -webkit-app-region: drag;
  height: 55px;
  box-sizing: padding-box;
}
messages-view .toolbar .bar-inner {
  padding: 25px 0px 0px 10px;
}
messages-view .toolbar:last-child {
  border-top-width: 1px;
}
messages-view .messages {
  display: block;
  list-style: none;
  padding: 0;
  margin: 0;
  height: calc(100% - 95px);
  background-color: #fff;
  overflow: scroll;
  max-width: 100%;
}
messages-view .messages:last-child {
  height: calc(100% - 55px);
}
messages-view .messages:first-child {
  height: calc(100% - 40px);
}
messages-view .messages:only-child {
  height: 100%;
}
messages-view .messages {
  padding: 10px 0px;
}
messages-view .messages li {
  width: 100%;
  box-sizing: padding-box;
  margin-bottom: 1px;
  max-width: 100%;
}
messages-view .messages li:not([type="system"]) message-content {
  display: inline-block;
  max-width: 60%;
  padding: 3px 10px;
  border-radius: 13px;
  text-align: left;
  -webkit-user-select: all;
}
messages-view .messages li[type="self"] + li[type="extern"], messages-view .messages li[type="extern"] + li[type="self"] {
  margin-top: 30px;
}
messages-view .messages li message-description, messages-view .messages li[type="system"]  {
  color: rgb(142, 142, 147);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
  display: block;
}
messages-view .messages li message-description:empty {
  margin-bottom: 0;
}
messages-view .messages li[type="system"] {
  width: 100%;
  text-align: center;
}
messages-view .messages li[type="self"] {
  text-align: right;
  padding: 0px 15px 0px 0px;
}
messages-view .messages li[type="extern"] {
  text-align: left;
  padding: 0px 0px 0px 15px;
}
messages-view .messages li[type="self"] message-content {
  background-image: linear-gradient(rgb(29, 144, 249), rgb(15, 132, 248));
  border-radius: 13px 13px 0px 13px;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 200 200"><path d="m99.346298,7.99288c-1.596802,70.597116 40.814697,88.839121 95.653702,100.904123c-83.355003,30.709 -179.057491,-31.395599 -172.47681,-64.299004" style="stroke-width: 0px;"/></svg>'),
                      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0px" y="0px" width="100%" height="100%" rx="13px" ry="13px"/></svg>'),
                      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 150 100"><polygon points="0,0 100,0 82,40"/><circle cx="22px" cy="-10px" r="70px"/><rect x="0px" y="0px" width="30px" height="10px"/></svg>');
  -webkit-mask-position: calc(100% - 0.5px) calc(100% + 5px), left top, calc(100% + 0px) calc(100% + 6px);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 14px 14px, calc(100% - 7px) 100%, 22px 15px; /*calc(100% - 7px) 100%*/
  color: #fff;
  padding: 3px 15px 3px 10px;
  font-weight: 300;
  letter-spacing: 0.75px;
}
messages-view .messages li.active message-content {
  background-image: none;
  display: block;
}
messages-view .messages li[type="self"].active message-content {
  background-color: rgb(101, 168, 234);
}
messages-view .messages li[type="extern"].active message-content {
  background-color: rgb(206, 206, 210); /*rgb(195, 195, 200) rgb(182, 182, 188)*/
}
messages-view .messages li[type="extern"] message-content {
  background-color: rgb(229, 229, 234);
  border-radius: 13px 13px 13px 0px;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 200 200"><path d="m86.009041,7.99288c0.752159,35.298521 -6.505768,58.508318 -22.764336,73.401621c-16.258568,14.893303 -39.163565,22.470497 -64.994688,28.502502c78.527792,30.709 166.332777,-32.395599 160.133192,-65.299004" style="stroke-width: 0px;"/></svg>'),
                      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0px" y="0px" width="100%" height="100%" rx="13px" ry="13px"/></svg>'),
                      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 150 100"><polygon points="0,0 100,0 82,40"/><circle cx="22px" cy="-10px" r="70px"/><rect x="0px" y="0px" width="30px" height="10px"/></svg>');
  -webkit-mask-position: 0.5px calc(100% + 5px), 5.5px top, calc(100% + 0px) calc(100% + 6px);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 14px 14px, calc(100% - 6.5px) 100%, 22px 15px; /*calc(100% - 7px) 100%*/
  padding: 3px 10px 3px 15px;
  letter-spacing: 0.25px;
}
messages-view .messages li.attachment message-content {
  padding: 0;
  margin: 0;
  font-size: 0;
}
messages-view .messages li.attachment message-content img {
  max-width: 100%;
}
messages-view .messages li audio::-webkit-media-controls-panel {
  background-color: transparent;
}
messages-view .messages li[type="self"] {
  --fillColor: #fff;
}
messages-view .messages li[type="extern"] {
  --fillColor: #000;
}


audio {
  display: block;
}


messages-view .messages li audio::-webkit-media-controls-play-button,
messages-view .messages li audio::-webkit-media-controls-mute-button {
  background-color: var(--fillColor);
  width: 25px;
  height: 25px;
  margin: 0px 10px;
}
messages-view .messages li audio::-webkit-media-controls-play-button {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50%" cy="50%" r="47px" style="stroke: #fff; fill: none; stroke-width: 3px;"/><polygon style="" points="35,25 35,75 75,50"/></svg>');
}
messages-view .messages li audio::-webkit-media-controls-mute-button {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 50 50"> <path style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb;-inkscape-font-specification:Bitstream Vera Sans" d="M 24.15625 3 C 23.851862 3.0016554 23.551978 3.0607525 23.25 3.15625 C 22.646044 3.3472449 22.066553 3.706971 21.5625 4.21875 L 9.8125 15.96875 L 3 15.96875 C 1.3325274 15.96875 -0.03125 17.333644 -0.03125 19 L -0.03125 31 C -0.03125 32.666356 1.3325274 34.03125 3 34.03125 L 9.8125 34.03125 L 21.53125 45.6875 C 22.648622 46.810194 24.080674 47.300804 25.25 46.75 C 26.426482 46.195825 27 44.858857 27 43.3125 L 27 6.3125 C 27 4.8133767 26.234377 3.5647259 25.0625 3.15625 C 24.769531 3.054131 24.460638 2.9983446 24.15625 3 z M 24.1875 5 C 24.289815 4.9983755 24.366657 5.0065565 24.4375 5.03125 C 24.720873 5.1300241 25 5.3826233 25 6.3125 L 25 43.3125 C 25 44.380143 24.650018 44.853925 24.40625 44.96875 C 24.162482 45.083575 23.674799 45.092848 22.90625 44.3125 L 10.3125 31.71875 A 0.99009901 0.99009901 0 0 0 10.25 31.6875 C 10.325876 31.753128 10 31.121757 10 30.75 L 10 19.25 C 10 18.878243 10.336543 18.237645 10.25 18.3125 A 0.99009901 0.99009901 0 0 0 10.3125 18.25 L 22.96875 5.625 C 23.43592 5.1506686 23.880556 5.0048735 24.1875 5 z M 3 18.03125 L 8.1875 18.03125 C 8.05955 18.414989 8 18.830961 8 19.25 L 8 30.75 C 8 31.166241 8.0641841 31.58298 8.1875 31.96875 L 3 31.96875 C 2.4614726 31.96875 2.03125 31.537644 2.03125 31 L 2.03125 19 C 2.03125 18.462356 2.4614726 18.03125 3 18.03125 z M 31.90625 18.96875 A 1.0001 1.0001 0 0 0 31.78125 19 A 1.0001 1.0001 0 0 0 31.28125 20.71875 L 35.5625 25 L 31.28125 29.28125 A 1.016466 1.016466 0 1 0 32.71875 30.71875 L 37 26.4375 L 41.28125 30.71875 A 1.016466 1.016466 0 1 0 42.71875 29.28125 L 38.4375 25 L 42.71875 20.71875 A 1.0001 1.0001 0 0 0 41.875 19 A 1.0001 1.0001 0 0 0 41.28125 19.28125 L 37 23.5625 L 32.71875 19.28125 A 1.0001 1.0001 0 0 0 31.90625 18.96875 z" color="#000" overflow="visible" enable-background="accumulate" font-family="Bitstream Vera Sans"></path></svg>');
}
messages-view .messages li[type="self"] audio::-webkit-media-controls-play-button {
  margin: 0px 5px;
}
messages-view .messages li[type="self"] audio::-webkit-media-controls-mute-button {
  margin: 0px 10px 0px 0px;
}
messages-view .messages li[type="extern"] audio::-webkit-media-controls-play-button {
  margin: 0px 10px;
}
messages-view .messages li[type="extern"] audio::-webkit-media-controls-mute-button {
  margin: 0px 5px 0px 0px;
}
messages-view .messages li audio::-webkit-media-controls-timeline-container {
  background-color: red;
}
messages-view .messages li audio::-webkit-media-controls-timeline {
  background-color: var(--fillColor);
}
/*audio::-webkit-media-controls-volume-slider {
    -webkit-filter: hue-rotate(143deg) saturate(10);
}*/
messages-view .messages li audio::-webkit-media-controls-timeline {
  -webkit-filter: brightness(0);/*hsl(0, 0%, 100%)*/
}
messages-view .messages li[type="self"] audio::-webkit-media-controls-timeline {
  -webkit-filter: brightness(0) invert(1);/*hsl(0, 0%, 100%)*/
}
messages-view .messages li audio::-webkit-media-controls-volume-slider {
  display: none;
}
messages-view .messages li audio::-webkit-media-controls-current-time-display,
messages-view .messages li audio::-webkit-media-controls-time-remaining-display {
  color: var(--fillColor);
}

messages-view .messages li {

}
messages-view .messages li {

}
messages-view .message-input {
  height: 23px;
  font-size: 12px !important;
  box-sizing: border-box;
  border: 1px solid rgb(223, 223, 223) !important;
  margin: calc((38px - 23px) / 2) 0px 0px 15px;
  border-radius: 12px !important;
  text-indent: 10px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: rgb(75, 75, 75) !important; /*rgb(153, 153, 153)*/
  outline: none;
  cursor: text;
  width: calc(100% - 60px);
}
messages-view .toolbar .btn-mic, messages-view .toolbar .btn-emojis {
  background-color: transparent;
  box-shadow: none;
  height: 18px;
  width: 18px;
  background-color: rgb(127, 127, 127);
  -webkit-mask-repeat: none;
  -webkit-mask-position: left top;
  -webkit-mask-size: 100% 100%;
  margin-left: 10px;
}
messages-view .toolbar .btn:active {
  background-color: rgb(50, 50, 50);
}
messages-view .toolbar .btn.btn-input {
  margin-left: -25px;
}
messages-view .toolbar .btn.btn-emojis {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 50 50"><circle cx="25px" cy="25px" r="22px" style="stroke: #000; stroke-width: 2px; fill: none;"/><svg xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" x="10px" y="27.5px" viewBox="0 0 50 50"><path d="m46.5,2.26709c-0.118263,8.581142 -6.52425,18.299341 -21.107145,18.299341c-14.425357,-0.463839 -21.110198,-9.510015 -21.267859,-18.601366l42.353917,0.00111z" style="stroke: #000; stroke-width: 4px; fill: none;"/></svg><circle cx="17.5px" cy="17.5px" r="3px"/><circle cx="32.5px" cy="17.5px" r="3px"/></svg>');
}
messages-view .toolbar .btn.btn-mic {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 50 50">    <path style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb;-inkscape-font-specification:Bitstream Vera Sans" d="M 25 -0.03125 C 18.937404 -0.03125 13.96875 4.7740257 13.96875 10.71875 L 13.96875 23.28125 C 13.96875 29.226868 18.937404 34.03125 25 34.03125 C 31.062596 34.03125 36.03125 29.225974 36.03125 23.28125 L 36.03125 10.71875 C 36.03125 4.7740257 31.062596 -0.03125 25 -0.03125 z M 25 2.03125 C 29.983404 2.03125 33.96875 5.9134743 33.96875 10.71875 L 33.96875 11 L 28.5 11 A 1.0001 1.0001 0 0 0 28.40625 11 A 1.001098 1.001098 0 0 0 28.5 13 L 33.96875 13 L 33.96875 15 L 28.5 15 A 1.0001 1.0001 0 0 0 28.40625 15 A 1.001098 1.001098 0 0 0 28.5 17 L 33.96875 17 L 33.96875 19 L 28.5 19 A 1.0001 1.0001 0 0 0 28.40625 19 A 1.001098 1.001098 0 0 0 28.5 21 L 33.96875 21 L 33.96875 23.28125 C 33.96875 28.086526 29.983404 31.96875 25 31.96875 C 20.016596 31.96875 16.03125 28.087632 16.03125 23.28125 L 16.03125 21 L 21.5 21 A 1.0001 1.0001 0 1 0 21.5 19 L 16.03125 19 L 16.03125 17 L 21.5 17 A 1.0001 1.0001 0 1 0 21.5 15 L 16.03125 15 L 16.03125 13 L 21.5 13 A 1.0001 1.0001 0 1 0 21.5 11 L 16.03125 11 L 16.03125 10.71875 C 16.03125 5.9134743 20.016596 2.03125 25 2.03125 z M 9.8125 17.125 A 0.86658667 0.86658667 0 0 0 9.125 18 L 9.125 23 C 9.125 30.70343 14.670151 37.16981 21.96875 38.59375 L 21.96875 45 L 15.46875 45 C 13.56594 45 12 46.568772 12 48.46875 L 12 48.9375 L 12 49.9375 L 13 49.9375 L 36.90625 49.9375 L 37.875 49.9375 L 37.875 48.9375 L 37.875 48.46875 C 37.875 46.569256 36.30906 45 34.40625 45 L 28.03125 45 L 28.03125 38.59375 C 35.329849 37.16981 40.875 30.70343 40.875 23 L 40.875 18 A 0.875 0.875 0 1 0 39.125 18 L 39.125 23 C 39.125 30.80103 32.80103 37.125 25 37.125 C 17.19897 37.125 10.875 30.80103 10.875 23 L 10.875 18 A 0.86658667 0.86658667 0 0 0 9.90625 17.125 A 0.86658667 0.86658667 0 0 0 9.8125 17.125 z M 24.03125 38.8125 C 24.352311 38.832037 24.674187 38.875 25 38.875 C 25.325813 38.875 25.647689 38.832037 25.96875 38.8125 L 25.96875 44.96875 L 24.03125 44.96875 L 24.03125 38.8125 z M 15.46875 47 L 22.75 47 A 1.040104 1.040104 0 0 0 23 47.03125 L 27 47.03125 A 1.040104 1.040104 0 0 0 27.21875 47 L 34.40625 47 C 35.047719 47 35.471214 47.423694 35.6875 47.96875 L 14.1875 47.96875 C 14.402579 47.420665 14.825002 47 15.46875 47 z" color="#000" overflow="visible" font-family="Bitstream Vera Sans"></path></svg>');
}
.btn-text {
  background-color: transparent;
  color: rgb(38, 140, 251);
  box-shadow: none;
  font-weight: 400;
  letter-spacing: 0.5px !important;
}
.btn.btn-text:active {
  background-color: transparent !important;
}
list-group {
  font-size: 0;
  display: block;
  overflow-x: hidden;
}
list-item {
  display: inline-flex;
  overflow: hidden;
  width: 100%;
}
list-item * {
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
}
list-item action-list {
  display: inline-block;
  flex: none;
  white-space: nowrap;
  overflow: hidden;
  background-color: rgb(192, 192, 197);
  transition-property: width;
}
list-item.touching action-list {
  transition: none;
  position: relative;
}
list-item action-list[role="left"] {
  width: 0px;
}
list-item action-list[role="right"] {
  width: 0px;
  text-align: right;
}
list-item action-list swipe-action {
  width: 65px;
  display: inline-block;
  height: 100%;
  position: relative;
  font-size: 13px;
}
list-item.touching action-list swipe-action {
  transition: none;
}
list-item action-list swipe-action.smart {
  transition: width 1s;
  width: 95% !important;

}
list-item action-list swipe-action:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}
list-item action-list swipe-action action-inner {
  display: inline-block;
  color: #fff;
  font-weight: 300;
  letter-spacing: 0.5px;
  text-align: center;
  width: 100%;
  white-space: normal;
  vertical-align: middle;
}
list-item action-list swipe-action action-inner > * {

}
list-item action-list swipe-action action-inner .icon {
  display: block;
  width: 100%;
  height: 24px;
}
list-item item-inner {
  flex: none;
  width: 100%;
  font-size: 13px;
  padding: 7px 0px 7px 12px;
  text-align: left;
  margin-left: -0px;
  display: flex;
  transition-property: margin-left;
}
list-item.touching item-inner {
  transition: none;
}
list-item + list-item {
  border-top: 1px solid rgb(225, 225, 225);
}
item-inner .media-object {
  display: inline-block;

}
item-inner .media-body {
  margin: 0;
  overflow: hidden;
  display: inline-block;
}
item-inner .media-body p {
  margin: 5px 0 0;
}
/*
item-inner .media-body {
  display: inline-block;
}
.list-item-swipe .item-inner {
  padding: 12px;
  width: 100%;
}
.list-item-swipe .item-inner, .list-item-swipe .swipe-actions {
  display: inline-block;
  font-size: 12px;
  vertical-align: middle;
}
.list-item-swipe.smart-action {

}
.list-item-swipe .swipe-actions {
  font-size: 0;
  display: inline-block;
  width: 0px;
  position: relative;
  background-color: #afafaf;
  transition-timing-function: ;
}
.list-item-swipe .swipe-actions .action {
  display: inline-block;
  position: absolute;
  font-size: 12px;
  height: 100%;
  transition-timing-function: ease-out;
  width: 70px;
}
.list-item-swipe .swipe-actions-left .action {
  left: 0px;
}
.list-item-swipe .swipe-actions-right .action {
  right: 0px;
}
.action-inner {
  vertical-align: middle;
}
.action-inner .action-center {
  display: inline-block;
  width: 100%;
  text-align: center;
  color: #fff;
}
.action-inner {
  display: block;
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translate(0px, calc(-50%));
  font-size: 1.1em;
  color: #fff;
}
.list-item-swipe.smart-action .action:first-child {
  transition: width 0.3s;
  width: 100%;
}
.list-item-swipe .swipe-actions-left .action:first-child {
  transition-property: width;
  transition-duration: 0.4s;
}*/
.window, ph-window {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
tool-bar {

}
tool-bar[type="footer"] {
  border-radius: 0px 0px 4px 4px;
  background-image: linear-gradient(rgb(232, 232, 232), rgb(213, 213, 213)) !important;
}
progress-circle {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-size: 100% 100%;
  background-position: 0px 0px;
  display: inline-block;
  overflow: hidden;
}
content-frame {
  display: block;
  margin: 10px;
  width: calc(100% - 20px);
  border: 1px solid #b5b5b5;
  background-color: #fff;
  min-height: 150px;
  height: auto;
  position: relative;
}
content-frame .pane {
  flex: 1;
  border-right: 1px solid #b5b5b5;
  border-left: none;
}
content-frame .pane:last-child {
  border-right: none;
}
content-frame .pane.small {
  flex: 1;
  width: 200px;
}
content-frame frame-inner {
  display: block;
  box-sizing: padding-box;
  height: calc(100% - 22px);
  width: 100%;
}
content-frame frame-inner list-select {
  list-style: none;
  margin: 0;
  padding: 0;
}
content-frame frame-inner list-select li {
  padding: 0;
}
content-frame frame-inner list-select li + li {
  margin-top: -2px;
}
content-frame frame-inner list-select li.active {
  background-color: rgb(5, 105, 217);
  color: #fff;
  font-weight: 400;
}
content-frame frame-inner list-select li:before, content-frame frame-inner list-select li summary:after {
  width: 100%;
  background-color: transparent;
  content: " ";
  display: block;
  height: 2px;
}
content-frame frame-inner list-select li.drag-before:before, content-frame frame-inner list-select li.drag-after:after {
  background-color: rgb(2, 93, 210);
}

content-frame frame-inner list-select li list-select {

}
content-frame frame-inner list-select li.active list-select {

}
content-frame frame-inner list-select li details {

}
content-frame frame-inner list-select li details summary, content-frame frame-inner list-select li > span {
  outline: none;
  padding: 0px 0px 0px 7px;
}
content-frame frame-inner list-select li details summary::-webkit-details-marker {
  display: none;
}
content-frame frame-inner list-select li details summary:after {
  /*background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 50 50"><polygon style="fill: #797979;" points="0,0 40,25 0,50"/></svg>');
  */
  background-color: #797979;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 50 50"><polygon points="0,0 40,25 0,50"/></svg>');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 90%;
  background-repeat: no-repeat;
  background-position: left center;
  float: left;
  height: 20px;
  width: 12px;
  content: " ";
  margin-right: 2px;
}
content-frame frame-inner list-select li.active details summary:after {
  background-color: #fff;
}
content-frame frame-inner list-select li details[open] summary:after {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 50 50"><polygon points="0,5 50,5 25,45"/></svg>');
}
content-frame frame-inner list-select li details *:not(summary) {
  outline: none;
  background-color: #fff;
  color: #000;
}
content-frame frame-inner list-select li list-select li {
  padding: 0px 0px 0px 30px;
}
content-frame .toolbar {
  height: 21px;
  border-top: 1px solid #b5b5b5;
  box-sizing: border-box;
  background-color: #f6f6f6;
  background-image: none;
  font-size: 0;
  z-index: 2;
  overflow-y: hidden;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  background-image: none !important;
}
content-frame .toolbar .btn {
  margin: 0;
  padding: 0;
  height: calc(100% + 2px);
  width: 26px;
  margin-top: -1px;
  border-radius: 0;
  border-right: 1px solid #b5b5b5;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  background-color: transparent;
}
content-frame .toolbar .btn:active:hover, content-frame .pane tool-bar .btn.active {
  background-color: #b3b3b3;
}
content-frame .toolbar .btn-add {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 52 46"><line x1="11px" x2="40px" y1="23px" y2="23px" style="stroke: #000; stroke-width: 2px;"/><line x1="25px" x2="25px" y1="9px" y2="36px" style="stroke: #000; stroke-width: 2px;"/></svg>');
}
content-frame .toolbar .btn-remove {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 52 46"><line x1="13px" x2="39px" y1="23px" y2="23px" style="stroke: #000; stroke-width: 2px;"/></svg>');
}
content-frame .toolbar .btn-remove[disabled] {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 52 46"><line x1="13px" x2="39px" y1="23px" y2="23px" style="stroke: #b3b3b3; stroke-width: 2px;"/></svg>');
}



.list-editable {

}
.list-editable li {

}
.list-editable.dragging li.active.drag-over, .list-editable.dragging li.drag-over + li.active {
  background-color: rgb(220, 220, 220);
  color: inherit;
}
.list-editable li, .list-editable li * {
  cursor: -webkit-grab;
}
.list-editable.dragging li.drag-over {
  border-bottom: 2px solid rgb(5, 105, 217);
}


window-content {
  display: block;
}
.theme-gray {
  background-color: rgb(237, 237, 237) !important;
}
.main-border {
  margin: 20px;
  padding: 10px 10px 30px 10px;
  background-color: rgb(229, 229, 229);
  border: 1px solid rgb(223, 223, 223);
  border-top: 1px solid rgb(214, 214, 214);
  border-radius: 4px;
}
.main-border .content-frame {

}
.sizing-pane * {
  cursor: ew-resize;
}
.modal-window {
  width: calc(100% - 30px);
  height: calc(100% - 15px);
  position: absolute;
  left: 15px;
  top: 0px;
  background-color: rgba(240, 240, 240, 1);
  /*-webkit-backdrop-filter: blur(10px);*/
  box-shadow: 0px 3px 20px 3px rgba(0, 0, 0, .25);
  border: 1px solid rgb(172, 172, 172);
  border-top: none;
  animation-name: modalMoveIn;
  animation-duration: 0.4s;
  box-sizing: border-box;
  padding: 10px;
}
@keyframes modalMoveIn {
  from {
    transform: translate(0px, -100%);
  }
  to {
    transform: translate(0px, 0px);
  }
}


.modal-window {
  background-color: transparent;
  box-shadow: none;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border: none;
  animation: none;
}


.btn-system {
  outline: none;
  box-sizing: border-box;
  height: 21px;
  padding: 0px 16px;
  font-size: 13px;
  border: 1px solid #d5d5d5;
  font-weight: 400;
  background-color: #fff;
  letter-spacing: 0.4px;
  border-radius: 4.5px;
  border-top-color: rgb(198, 198, 198);
  border-bottom-color: rgb(170, 170, 170);
  border-left-color: rgb(192, 192, 192);
  border-right-color: rgb(192, 192, 192);
}

.btn-system.btn-active:not([disabled])/*, .btn-system:active:not([disabled])*/ {
  letter-spacing: 0.8px;
  color: #fff;
  font-weight: 300;
  padding: 0px 17px 1px 16px;
  border-top-color: rgb(64, 150, 248);
  border-bottom-color: rgb(9, 85, 255);
  border-left-color: rgb(39, 122, 252);
  border-right-color: rgb(39, 122, 252);
  background-image: linear-gradient(rgb(94, 168, 249), rgb(14, 117, 255));
}
.btn-system:active:not([disabled]), .btn-system.btn-active:active:not([disabled]) {
  border-top-color: rgb(30, 114, 254);
  border-bottom-color: rgb(3, 56, 216);
  border-left-color: rgb(16, 82, 233);
  border-right-color: rgb(17, 82, 227);
  background-image: linear-gradient(rgb(64, 140, 253), rgb(11, 93, 224));
  letter-spacing: 0.8px;
  color: #fff;
  font-weight: 300;
  padding: 0px 17px 1px 16px;
}
.btn-system[disabled] {
  border-color: rgb(212, 212, 212);
  background-image: none;
  background-color: rgb(248, 248, 248);
  color: rgb(168, 168, 168);
  box-shadow: 0px 1px 0px -0.5px rgba(120, 120, 120, 0.2);
}

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
  .btn-system, .btn-system:focus {
    padding: 0px 16px 0.5px 16px;
    border: none;
    border-radius: 3px;
    box-shadow: 0px 1px 0px -0.5px rgba(120, 120, 120, 0.6);
    font-family: 'BlinkMacSystemFont', '-apple-system', -apple-system;
    background-position: center center;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="100%" height="100%" style="fill: none; stroke: rgb(185, 185, 185); stroke-width: 0.5px; stroke-location: inside;" rx="4px"/></svg>'),
                      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="100%" height="100%" style="fill: none; stroke: rgb(185, 185, 185); stroke-width: 0.5px; stroke-location: inside; stroke-dasharray: 1000px; stroke-dashoffset: 0px;" rx="4px"/></svg>'),
                      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%"/></svg>');
    background-size: 100% 100%;

  }
  .btn-system.btn-active:not([disabled])/*, .btn-system:active*/ {
    border-radius: 3.5px;
    font-weight: 300;
  }
  .btn-system.btn-active {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="100%" height="100%" style="fill: none; stroke: #0955ff; stroke-width: 0.5px; stroke-location: inside;" rx="4px"/></svg>'),
                      linear-gradient(rgb(94, 168, 249), rgb(14, 117, 255)) !important;

  }
  .btn-system.btn-active:active {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="100%" height="100%" style="fill: none; stroke: #0955ff; stroke-width: 0.5px; stroke-location: inside;" rx="4px"/></svg>'),
                      linear-gradient(rgb(64, 140, 253), rgb(11, 93, 224)) !important;
  }
  .btn-system[disabled], .btn-system.btn-active[disabled] {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="100%" height="100%" style="fill: none; stroke: rgb(212, 212, 212); stroke-width: 0.5px; stroke-location: inside;" rx="4px"/></svg>'),
                      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0%" y="0%" width="100%" height="100%" style="fill: none; stroke: rgb(212, 212, 212); stroke-width: 0.5px; stroke-location: inside; stroke-dasharray: 1000px; stroke-dashoffset: 0px;" rx="4px"/></svg>') !important;
  }
}
circular-slider {
  display: inline-block;
  width: 25px;
  height: 25px;
  border: 1px solid rgb(207, 207, 207); /*rgb(195, 195, 195)*/
  border-radius: 50%;
  box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.5);
  position: relative;
  background-color: #fff;
}
circular-slider .dot {
  position: absolute;
  width: 5px;
  height: 5px;
  left: calc(50% - 2.5px);
  top: calc(50% - 2.5px);
  background-color: rgb(120, 120, 120); /*rgb(99, 99, 99)*/
  background-color: rgb(189, 189, 189); /*rgb(171, 171, 171)*/
  background-image: linear-gradient(rgb(120, 120, 120), rgb(189, 189, 189));
  border-radius: 50%;
  transform-origin: center 190%;
  transform: translate(0px, -140%) rotate(0deg);
}
tab-group {
  border-top: 1px solid #a5a3a5;
  border-bottom: 1px solid #a5a3a5;
  background-image: linear-gradient(to bottom, #bdbaba 0%, #b0adb0 100%);
  min-height: 22px;
  z-index: 2;
  width: 100%;
}
tab-item {
  padding: 3px 3px 2px 3px;
  font-size: 11px;
  color: #4c4c52;
  border-top: 1px solid #a5a3a5;
  background-image: linear-gradient(to bottom, #c1bfc1 0%, #b8b6b8 100%);
  margin-top: -1px;
  border-right: 1px solid #989698;
  margin-right: -1px;
  box-sizing: border-box;
}
tab-item:first-child {
  border-left: 1px solid #989698;
  margin-left: -1px;
}
tab-item:not(.active):hover {
  background-image: linear-gradient(rgb(182, 182, 182), rgb(177, 177, 177));
}
tab-item:hover:not(.active):after {
  opacity: 0;
}
tab-item.active {
  background-image: linear-gradient(to bottom, #dedcde 0%, #d5d4d5 100%);
  color: #202020;
  border-top-color: #babbbe;
}

tab-item button[action="close"] {
  height: 16px;
  width: 16px;
  transition: opacity .3s linear;
  border-radius: 2px;
  background-color: transparent;
}
tab-item button[action="close"]:hover {
  background-color: #9d9d9d;
}
tab-item:hover button[action="close"] {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 32 32"><line x1="8px" y1="8px" x2="24px" y2="24px" style="stroke: #494949; stroke-width: 2px;"/><line x1="24px" y1="8px" x2="8px" y2="24px" style="stroke: #494949; stroke-width: 2px;"/></svg>');
}
tab-item.active button[action="close"]:hover {
  background-color: #c3c3c3;
}
tab-item.active:hover button[action="close"] {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 32 32"><line x1="8px" y1="8px" x2="24px" y2="24px" style="stroke: #626262; stroke-width: 2px;"/><line x1="24px" y1="8px" x2="8px" y2="24px" style="stroke: #626262; stroke-width: 2px;"/></svg>');
}
tab-item[type="fixed"][action="add"] {
  width: 25px;
  transition: border-color 0.2s;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 32 32"><line x1="16px" y1="8px" x2="16px" y2="24px" style="stroke: #717171; stroke-width: 1.5px;"/><line x1="8px" y1="16px" x2="24px" y2="16px" style="stroke: #717171; stroke-width: 1.5px;"/></svg>');
  background-size: 100%;
  box-sizing: border-box;
}
tab-item[type="fixed"][action="add"]:hover {
  border-top-color: #858585;
  border-left-color: #858585;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 32 32"><line x1="16px" y1="8px" x2="16px" y2="24px" style="stroke: #717171; stroke-width: 1.5px;"/><line x1="8px" y1="16px" x2="24px" y2="16px" style="stroke: #717171; stroke-width: 1.5px;"/></svg>'), linear-gradient(to bottom, #b6b6b6 0%, #adadad 100%);
}
tab-item[type="fixed"][action="add"]:active:hover {
  background-color: #a2a2a2;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 32 32"><line x1="16px" y1="8px" x2="16px" y2="24px" style="stroke: #717171; stroke-width: 1.5px;"/><line x1="8px" y1="16px" x2="24px" y2="16px" style="stroke: #717171; stroke-width: 1.5px;"/></svg>');
}
tab-item button[action="close"]:active {
  background-color: #919191;
}
tab-item.active button[action="close"]:active {
  background-color: #bababa;
}






tab-item {
  transition-property: none;
  transition-duration: .4s;
}
tab-item button {
  outline: none;
  border: none;
  -webkit-appearance: none;
  background-color: transparent;
}
.in-drag tab-item, tab-item.active:not(.dragging) {
  transition-property: transform;
  transition-timing-function: ease-out;
}

tab-item.active {
  z-index: 1;
}
tab-item.dragging {
  transition-property: none;

}

tab-item.dragging.active.active-in-transition {
  transition-property: left;

}

tab-item.adding {
  flex: none;
  width: 0px;
  padding: normal 0px;
  transition-property: width !important;
  overflow: hidden;
  max-height: 23px;
}

tab-item[type="fixed"] {

  overflow: hidden;
  border-bottom: none;

}
tab-item[type="fixed"].btn {
  border-radius: 0;
}
tool-bar {
  background-image: linear-gradient(rgb(233, 233, 233), rgb(210, 210, 210)) !important;
  border-radius: 6px 6px 0px 0px;
}




.window.no-focus tool-bar,
.window.no-focus tool-bar .btn.btn-default,
.window.no-focus tool-bar .title,
.window.no-focus .tab-item.active
{
  background-image: none;
  background-color: rgb(245, 244, 245);
  color: #bdbdbd;
}
.window.no-focus tool-bar .btn.btn-default {
  box-shadow: none;
}
.window.no-focus tool-bar .btn.btn-default,
.window.no-focus tool-bar input
{
  border-color: #d4d4d4;
}
.window.no-focus tool-bar .btn.btn-default.active {
  background-color: rgb(227, 227, 227);
}
.window.no-focus tool-bar input  {
  background-color: transparent !important;
}
.window.no-focus .tab-group {
  border-color: rgb(210, 210, 210);
}
.window.no-focus .tab-item:not(.btn) {
  background-image: none;
}
.window.no-focus .tab-item {
  background-color: rgb(223, 223, 223);
  border-color: rgb(210, 210, 210);
  color: rgb(110, 110, 110);
}
.window.no-focus .tab-item:hover {
  background-color: rgb(223, 223, 223);
}
.window.no-focus .tab-item.active {
  color: rgb(110, 110, 110);
}
.window.no-focus .pane-sm.sidebar {
  background-color: rgb(246, 246, 246);
}


.window.no-focus .list-select li.active {
  background-color: rgb(219, 219, 219);
}



.window.no-focus .btn-group .btn-segment.active {
  background-image: none;
  background-color: rgb(225, 225, 225);
  border-color: #d5d5d5;
  border-top-color: rgb(195, 195, 195);
  border-bottom-color: rgb(174, 174, 174);
  border-left-color: rgb(195, 195, 195);
  border-right-color: rgb(195, 195, 195);
  color: #111;
  font-weight: 400;
  box-shadow: none;

}



.window.no-focus .btn-system.btn-active {
  background-image: none;
  padding: 0px 16px;
  font-weight: 400;
  letter-spacing: 0.4px;
  border-radius: 4.5px;
  border-top-color: rgb(198, 198, 198);
  border-bottom-color: rgb(170, 170, 170);
  border-left-color: rgb(192, 192, 192);
  border-right-color: rgb(192, 192, 192);
  color: #000;
}



.window.no-focus .slider-round {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="background-color: rgb(136, 135, 136);"></svg>');
}



.window {
  background-color: transparent;
}
ph-window[data-vibrancy] {
  background-color: transparent;
}

ph-window[data-vibrancy] .pane-sm {
  background-color: transparent;
  background-color: rgba(255, 255, 255, 0.5);
}
.no-electron ph-window[data-vibrancy] .pane-sm {
  background-color: rgba(255, 255, 255, 0.7);
}
.no-electron ph-window[data-vibrancy] .pane {
   background-color: rgba(255, 255, 255, 0.85);
 }
.no-electron ph-window[data-vibrancy] .pane-sm, .no-electron ph-window[data-vibrancy] .pane {
  -webkit-backdrop-filter: blur(50px);
}


ph-window:not([data-vibrancy]) .pane-group {
  background-color: rgba(255, 255, 255, 0.9);
}


.icon {
  margin: 0px 5px 0px 0px !important;
}

.pane-group .pane, .pane-group .pane-sm {
  overflow: scroll;
}

tool-bar .toolbar-actions {

}