.access_control-edit {
  padding: 10px;
}
.access_control-edit > .base-form {
  padding: 0 8px;
}
.access_control-edit > .base-form > div.userBlock {
  margin-bottom: 8px;
}
.access_control-edit > .base-form .ui-menu-item {
  float: none !important;
}
.access_control-edit > .base-form > .clear > label {
  display: inline-block;
  float: none !important;
  width: 50% !important;
}
.access_control-edit > .base-form > .clear > .input-wrapper {
  display: inline-block;
  float: right !important;
/*width: 60% !important;*/
}
.access_control-item {
  background: #fff;
  overflow: auto;
  padding: 6px 0px 6px 0px !important;
}
.access_control-item i {
  font-size: 48px;
  line-height: normal;
}
.access_control-item div {
  width: auto !important;
  height: auto !important;
  position: relative;
}
.access_control-item table {
  padding-left: 16px;
  padding-top: 5px;
}
.access_control-item-multi {
  background: #fff;
}
.access_control-permission-cross-div {
  position: absolute !important;
  top: 20px;
  left: 24px;
}
.access_control-permission-normal {
  color: #000 !important;
  padding-right: 10px;
}
.access_control-permission-deny {
  color: #f00 !important;
  font-size: 30px !important;
}
.access_control-permission-inherit {
  color: #a9a9a9 !important;
  padding-right: 10px;
}
.access_control-permission-inherit-deny {
  color: #e69292 !important;
  font-size: 30px !important;
}
.access_control-edit {
  padding: 10px;
}
.access_control-edit .base-form {
  padding: 0 8px;
}
.autoComplete-container {
  clear: both;
}
.autoComplete-container > .wrapper {
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  width: 100%;
  padding: 0;
}
.autoComplete-container > .wrapper > input {
  color: #222 !important;
  border: none;
  clear: left;
  display: block;
  padding-right: 6px;
  width: 80%;
}
.autoComplete-container > .wrapper > .ac-actions {
  float: right;
  max-height: 30px;
  overflow: hidden;
}
.autoComplete-container > .wrapper > .ac-actions > .ac-clear,
.autoComplete-container > .wrapper > .ac-actions > .ac-icon {
  padding: 1px 4px 0 0;
  speak: none;
}
.autoComplete-container > .wrapper > .ac-actions > .ac-clear > .icn,
.autoComplete-container > .wrapper > .ac-actions > .ac-icon > .icn {
  margin-top: 2px;
  padding: 3px 2px 1px 3px;
}
.autoComplete-container > .wrapper > .ac-actions > .ac-clear > .btn,
.autoComplete-container > .wrapper > .ac-actions > .ac-icon > .btn {
  color: #ddd;
  margin-top: 1px;
  padding: 3px 2px;
}
.autoComplete-container > .wrapper > .ac-actions > .ac-clear > .icn > i,
.autoComplete-container > .wrapper > .ac-actions > .ac-icon > .icn > i,
.autoComplete-container > .wrapper > .ac-actions > .ac-clear > .btn > i,
.autoComplete-container > .wrapper > .ac-actions > .ac-icon > .btn > i {
  color: #e0e0e0;
  font-family: "ui-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}
.autoComplete-container > .wrapper > .ac-actions > .ac-clear {
  display: none;
}
.autoComplete-container > .ui-autocomplete {
  background: #fff;
  border-top: none;
  border-radius: 0 !important;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  max-height: 0;
  -webkit-transition: opacity 0.5s, max-height 1s ease-in-out;
  transition: opacity 0.5s, max-height 1s ease-in-out;
  -moz-transition: opacity 0.5s, max-height 1s ease-in-out;
  -webkit-transition: opacity 0.5s, max-height 1s ease-in-out;
  -o-transition: opacity 0.5s, max-height 1s ease-in-out;
  display: none;
  float: left;
  overflow-x: hidden; /* prevent horizontal scrollbar */
  overflow-y: auto;
}
.autoComplete-container > .ui-autocomplete.opened {
  opacity: 1;
  -ms-filter: none;
  -webkit-filter: none;
          filter: none;
  display: block;
}
.autoComplete-container > .ui-autocomplete > .ui-menu-item {
  border-top: 1px solid #e0e0e0;
  padding: 6px 16px 8px 16px;
}
.autoComplete-container > .ui-autocomplete > .ui-menu-item > a {
  background: none;
  border: none;
  padding: 0;
}
.autoComplete-container > .ui-autocomplete > .ui-menu-item > .hidden-item {
  float: right;
}
.ui-helper-hidden-accessible {
  color: #ddd;
  display: none;
  font-size: 12px;
  line-height: 24px;
}
.base-category {
  clear: both;
  background: #9e9e9e;
  color: cl-dark-on-panels;
  padding: 8px 18px;
  width: 100%;
}
.base-category > div {
  float: right;
  font-size: 100%;
  font-weight: normal;
}
.base-category > p {
  font-weight: bold;
  font-size: 1.125rem;
}
.base-category i {
  font-size: 105%;
  margin-left: -5px;
  margin-right: 13px;
}
.base-combobox {
  overflow-x: hidden;
}
.base-combobox > select {
  display: none;
}
.base-combobox > .custom-combobox > input,
.base-combobox > .custom-combobox > .custom-combobox-toggle {
  background: #454647;
  background: -webkit-gradient(linear, left top, left bottom, from(#454647), to(#2b2c2c));
  background: linear-gradient(#454647, #2b2c2c);
  background: -ms-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  border: none;
  border-radius: 0px;
  -webkit-box-shadow: #4f4f4f 0 1px 1px, #262626 0 2px 3px 1px inset;
          box-shadow: #4f4f4f 0 1px 1px, #262626 0 2px 3px 1px inset;
  height: 30px;
}
.base-combobox > .custom-combobox > input {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  padding-right: 6px;
}
.base-combobox > .custom-combobox > .custom-combobox-toggle {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  position: relative;
  padding: 7px 0 7px 0;
  top: 9px;
}
.playlist-edit > form > div > .base-combobox {
  display: inline-block !important;
  width: 25%;
}
.playlist-edit > form > div > .base-combobox > label {
  display: block !important;
  float: none;
}
.playlist-edit > form > div > .base-combobox > .custom-combobox {
  display: inline-block !important;
  max-width: 60px !important;
}
.playlist-edit > form > div > .base-combobox > .custom-combobox > span {
  display: none;
}
.playlist-edit > form > div > .base-combobox > .custom-combobox > input {
  display: inline-block !important;
  float: none;
}
.playlist-edit > form > div > .base-combobox > .custom-combobox > div {
  display: inline-block !important;
}
input:focus,
textarea:focus,
select:focus,
button:focus {
  outline: none;
}
label.ds {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  color: #ddd;
  display: inline-block;
  font-size: 12px;
  line-height: 24px;
  height: 30px;
}
a.ds {
  color: #3f3f3f;
  text-decoration: underline;
}
input.ds,
textarea.ds,
select.ds,
.input-wrapper {
  color: #eee;
  font-family: inherit;
  text-shadow: #000 0 1px 0;
}
input.ds.has-changed,
textarea.ds.has-changed,
select.ds.has-changed,
.input-wrapper.has-changed {
  font-style: italic;
}
input.ds,
select.ds,
.input-wrapper {
  background-color: transparent;
  line-height: 30px;
  text-align: left;
  width: 65%;
  padding: 0;
}
input.ds,
textarea.ds {
  border: none;
  display: block;
  line-height: 30px;
}
.input-wrapper {
  text-align: center;
  padding-top: 1px;
}
.input-wrapper > input {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  display: inline-block;
}
.input-wrapper > input[type="checkbox"] {
  margin: 0 auto;
  height: auto !important;
  width: auto !important;
}
.input-wrapper > input[type="date"] {
  background-color: transparent !important; /* super important to block default styling on iPhone/iPad devices  */
  width: 100%;
}
textarea.ds {
  background-color: inherit;
/*background-color: darken(#3a3b3c, 7%); // TODO: Remove all magic colors;*/
  border-radius: 5px;
  -webkit-box-shadow: #4f4f4f 0 1px 1px, #262626 0 2px 3px 1px inset;
  box-shadow: #4f4f4f 0 1px 1px, #262626 0 2px 3px 1px inset;
  float: left;
  font-size: 15px;
  height: 125px;
  line-height: 25px;
  margin: 8px 0 18px 0;
  padding: 2px 6px;
  width: 100%;
}
select.ds {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #454647;
  background: -webkit-gradient(linear, left top, left bottom, from(#2b2c2c), to(#b2b2b2));
  background: linear-gradient(#2b2c2c, #b2b2b2);
  background: -moz--webkit-linear-gradient(top, #2b2c2c 0%, #b2b2b2 100%);
  background: -moz--moz-linear-gradient(top, #2b2c2c 0%, #b2b2b2 100%);
  background: -moz--o-linear-gradient(top, #2b2c2c 0%, #b2b2b2 100%);
  background: -moz--ms-linear-gradient(top, #2b2c2c 0%, #b2b2b2 100%);
  background: -webkit--webkit-linear-gradient(top, #2b2c2c 0%, #b2b2b2 100%);
  background: -webkit--moz-linear-gradient(top, #2b2c2c 0%, #b2b2b2 100%);
  background: -webkit--o-linear-gradient(top, #2b2c2c 0%, #b2b2b2 100%);
  background: -webkit--ms-linear-gradient(top, #2b2c2c 0%, #b2b2b2 100%);
  background: -o--webkit-linear-gradient(top, #2b2c2c 0%, #b2b2b2 100%);
  background: -o--moz-linear-gradient(top, #2b2c2c 0%, #b2b2b2 100%);
  background: -o--o-linear-gradient(top, #2b2c2c 0%, #b2b2b2 100%);
  background: -o--ms-linear-gradient(top, #2b2c2c 0%, #b2b2b2 100%);
  background: -ms--webkit-linear-gradient(top, #2b2c2c 0%, #b2b2b2 100%);
  background: -ms--moz-linear-gradient(top, #2b2c2c 0%, #b2b2b2 100%);
  background: -ms--o-linear-gradient(top, #2b2c2c 0%, #b2b2b2 100%);
  background: -ms--ms-linear-gradient(top, #2b2c2c 0%, #b2b2b2 100%);
  background: -ms-linear-gradient(to bottom, #2b2c2c 0%, #b2b2b2 100%);
  border: none;
  border-radius: 5px;
  -webkit-box-shadow: #565656 0 -1px 0, #1c1c1c 0 2px 2px;
  box-shadow: #565656 0 -1px 0, #1c1c1c 0 2px 2px;
  color: #fff;
  border: none;
  direction: rtl;
  font-size: 12px;
  font-weight: bold;
  height: 30.5px;
  min-width: 80px;
  text-shadow: #000 0 1px;
  text-transform: uppercase;
}
select.ds > option {
  background: #2d2d2d;
  border-bottom: #3a3a3a;
  color: #7f7f7f;
  text-shadow: #000 0 1px;
}
select.ds > option:last-of-type {
  border: none;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
select.ds > option:focus {
  border: none;
  background: #2b2c2c;
  background: -webkit-gradient(linear, left top, left bottom, from(#454647), to(#2b2c2c));
  background: linear-gradient(#454647, #2b2c2c);
  background: -moz--webkit-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -moz--moz-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -moz--o-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -moz--ms-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -webkit--webkit-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -webkit--moz-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -webkit--o-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -webkit--ms-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -o--webkit-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -o--moz-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -o--o-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -o--ms-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -ms--webkit-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -ms--moz-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -ms--o-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -ms--ms-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -ms-linear-gradient(to bottom, #454647 0%, #2b2c2c 100%);
}
/*button:not([class]),*/
button.ds,
div.btn.ds,
.ui-dialog-buttonpane .ui-button,
.ui-buttonset button {
  cursor: pointer;
  background: #2b2c2c;
  background: -webkit-gradient(linear, left top, left bottom, from(#454647), to(#2b2c2c));
  background: linear-gradient(#454647, #2b2c2c);
  background: -moz--webkit-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -moz--moz-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -moz--o-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -moz--ms-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -webkit--webkit-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -webkit--moz-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -webkit--o-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -webkit--ms-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -o--webkit-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -o--moz-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -o--o-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -o--ms-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -ms--webkit-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -ms--moz-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -ms--o-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -ms--ms-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  background: -ms-linear-gradient(to bottom, #454647 0%, #2b2c2c 100%);
  border: none;
  border-radius: 5px;
  -webkit-box-shadow: #565656 0 -1px 0, #1c1c1c 0 2px 2px;
  box-shadow: #565656 0 -1px 0, #1c1c1c 0 2px 2px;
  color: #fff;
  clear: left;
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  height: 30.5px;
  padding: 8px 16px;
  text-shadow: #000 0 1px;
  text-transform: uppercase;
}
button.ds:active,
div.btn.ds:active,
.ui-dialog-buttonpane .ui-button:active,
.ui-buttonset button:active {
  background: #3b3c3d;
  background: -webkit-gradient(linear, left top, left bottom, from(#2b2c2c), to(#3b3c3d));
  background: linear-gradient(#2b2c2c, #3b3c3d);
  background: -moz--webkit-linear-gradient(top, #2b2c2c 0%, #3b3c3d 100%);
  background: -moz--moz-linear-gradient(top, #2b2c2c 0%, #3b3c3d 100%);
  background: -moz--o-linear-gradient(top, #2b2c2c 0%, #3b3c3d 100%);
  background: -moz--ms-linear-gradient(top, #2b2c2c 0%, #3b3c3d 100%);
  background: -webkit--webkit-linear-gradient(top, #2b2c2c 0%, #3b3c3d 100%);
  background: -webkit--moz-linear-gradient(top, #2b2c2c 0%, #3b3c3d 100%);
  background: -webkit--o-linear-gradient(top, #2b2c2c 0%, #3b3c3d 100%);
  background: -webkit--ms-linear-gradient(top, #2b2c2c 0%, #3b3c3d 100%);
  background: -o--webkit-linear-gradient(top, #2b2c2c 0%, #3b3c3d 100%);
  background: -o--moz-linear-gradient(top, #2b2c2c 0%, #3b3c3d 100%);
  background: -o--o-linear-gradient(top, #2b2c2c 0%, #3b3c3d 100%);
  background: -o--ms-linear-gradient(top, #2b2c2c 0%, #3b3c3d 100%);
  background: -ms--webkit-linear-gradient(top, #2b2c2c 0%, #3b3c3d 100%);
  background: -ms--moz-linear-gradient(top, #2b2c2c 0%, #3b3c3d 100%);
  background: -ms--o-linear-gradient(top, #2b2c2c 0%, #3b3c3d 100%);
  background: -ms--ms-linear-gradient(top, #2b2c2c 0%, #3b3c3d 100%);
  background: -ms-linear-gradient(to bottom, #2b2c2c 0%, #3b3c3d 100%);
  -webkit-box-shadow: #565656 0 1px 0, #1c1c1c 0 2px 2px inset;
  box-shadow: #565656 0 1px 0, #1c1c1c 0 2px 2px inset;
}
button.ds.active,
div.btn.ds.active,
.ui-dialog-buttonpane .ui-button.active,
.ui-buttonset button.active {
  background: #6d919b;
  background: -webkit-gradient(linear, left top, left bottom, from(#58737b), color-stop(22%, #6d919b), to(#7da3b0));
  background: linear-gradient(#58737b, #6d919b 22%, #7da3b0);
  background: -moz--webkit-linear-gradient(top, #58737b 0%, #6d919b 22%, #7da3b0 100%);
  background: -moz--moz-linear-gradient(top, #58737b 0%, #6d919b 22%, #7da3b0 100%);
  background: -moz--o-linear-gradient(top, #58737b 0%, #6d919b 22%, #7da3b0 100%);
  background: -moz--ms-linear-gradient(top, #58737b 0%, #6d919b 22%, #7da3b0 100%); /* FF3.6+ */ /* Chrome,Safari4+ */
  background: -webkit--webkit-linear-gradient(top, #58737b 0%, #6d919b 22%, #7da3b0 100%);
  background: -webkit--moz-linear-gradient(top, #58737b 0%, #6d919b 22%, #7da3b0 100%);
  background: -webkit--o-linear-gradient(top, #58737b 0%, #6d919b 22%, #7da3b0 100%);
  background: -webkit--ms-linear-gradient(top, #58737b 0%, #6d919b 22%, #7da3b0 100%); /* Chrome10+,Safari5.1+ */
  background: -o--webkit-linear-gradient(top, #58737b 0%, #6d919b 22%, #7da3b0 100%);
  background: -o--moz-linear-gradient(top, #58737b 0%, #6d919b 22%, #7da3b0 100%);
  background: -o--o-linear-gradient(top, #58737b 0%, #6d919b 22%, #7da3b0 100%);
  background: -o--ms-linear-gradient(top, #58737b 0%, #6d919b 22%, #7da3b0 100%); /* Opera 11.10+ */
  background: -ms--webkit-linear-gradient(top, #58737b 0%, #6d919b 22%, #7da3b0 100%);
  background: -ms--moz-linear-gradient(top, #58737b 0%, #6d919b 22%, #7da3b0 100%);
  background: -ms--o-linear-gradient(top, #58737b 0%, #6d919b 22%, #7da3b0 100%);
  background: -ms--ms-linear-gradient(top, #58737b 0%, #6d919b 22%, #7da3b0 100%);
  background: -ms-linear-gradient(to bottom, #58737b 0%, #6d919b 22%, #7da3b0 100%); /* IE10+ */
  -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 2px;
  box-shadow: rgba(255,255,255,0.4) 0 1px 2px;
  color: #e0e0e0;
}
button.ds:focus,
div.btn.ds:focus,
.ui-dialog-buttonpane .ui-button:focus,
.ui-buttonset button:focus {
  background: #303131;
  background: -webkit-gradient(linear, left top, left bottom, from(#4a4b4c), to(#303131));
  background: linear-gradient(#4a4b4c, #303131);
  background: -moz--webkit-linear-gradient(top, #4a4b4c 0%, #303131 100%);
  background: -moz--moz-linear-gradient(top, #4a4b4c 0%, #303131 100%);
  background: -moz--o-linear-gradient(top, #4a4b4c 0%, #303131 100%);
  background: -moz--ms-linear-gradient(top, #4a4b4c 0%, #303131 100%);
  background: -webkit--webkit-linear-gradient(top, #4a4b4c 0%, #303131 100%);
  background: -webkit--moz-linear-gradient(top, #4a4b4c 0%, #303131 100%);
  background: -webkit--o-linear-gradient(top, #4a4b4c 0%, #303131 100%);
  background: -webkit--ms-linear-gradient(top, #4a4b4c 0%, #303131 100%);
  background: -o--webkit-linear-gradient(top, #4a4b4c 0%, #303131 100%);
  background: -o--moz-linear-gradient(top, #4a4b4c 0%, #303131 100%);
  background: -o--o-linear-gradient(top, #4a4b4c 0%, #303131 100%);
  background: -o--ms-linear-gradient(top, #4a4b4c 0%, #303131 100%);
  background: -ms--webkit-linear-gradient(top, #4a4b4c 0%, #303131 100%);
  background: -ms--moz-linear-gradient(top, #4a4b4c 0%, #303131 100%);
  background: -ms--o-linear-gradient(top, #4a4b4c 0%, #303131 100%);
  background: -ms--ms-linear-gradient(top, #4a4b4c 0%, #303131 100%);
  background: -ms-linear-gradient(to bottom, #4a4b4c 0%, #303131 100%);
  outline: none;
  color: #fff !important;
}
button.ds:hover,
div.btn.ds:hover,
.ui-dialog-buttonpane .ui-button:hover,
.ui-buttonset button:hover {
  color: #fff !important;
}
button.ds:disabled,
div.btn.ds:disabled,
.ui-dialog-buttonpane .ui-button:disabled,
.ui-buttonset button:disabled {
  background: #e1e1e1;
  color: #989898;
  outline: none;
}
button.ds:first-of-type,
div.btn.ds:first-of-type,
.ui-dialog-buttonpane .ui-button:first-of-type,
.ui-buttonset button:first-of-type {
  margin-right: 0em;
}
button.ds:last-of-type,
div.btn.ds:last-of-type,
.ui-dialog-buttonpane .ui-button:last-of-type,
.ui-buttonset button:last-of-type {
  float: none;
}
button.ui-state-hover {
  background: #2b2c2c !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#454647), to(#2b2c2c)) !important;
  background: linear-gradient(#454647, #2b2c2c) !important;
  background: -moz--webkit-linear-gradient(top, #454647 0%, #2b2c2c 100%) !important;
  background: -moz--moz-linear-gradient(top, #454647 0%, #2b2c2c 100%) !important;
  background: -moz--o-linear-gradient(top, #454647 0%, #2b2c2c 100%) !important;
  background: -moz--ms-linear-gradient(top, #454647 0%, #2b2c2c 100%) !important;
  background: -webkit--webkit-linear-gradient(top, #454647 0%, #2b2c2c 100%) !important;
  background: -webkit--moz-linear-gradient(top, #454647 0%, #2b2c2c 100%) !important;
  background: -webkit--o-linear-gradient(top, #454647 0%, #2b2c2c 100%) !important;
  background: -webkit--ms-linear-gradient(top, #454647 0%, #2b2c2c 100%) !important;
  background: -o--webkit-linear-gradient(top, #454647 0%, #2b2c2c 100%) !important;
  background: -o--moz-linear-gradient(top, #454647 0%, #2b2c2c 100%) !important;
  background: -o--o-linear-gradient(top, #454647 0%, #2b2c2c 100%) !important;
  background: -o--ms-linear-gradient(top, #454647 0%, #2b2c2c 100%) !important;
  background: -ms--webkit-linear-gradient(top, #454647 0%, #2b2c2c 100%) !important;
  background: -ms--moz-linear-gradient(top, #454647 0%, #2b2c2c 100%) !important;
  background: -ms--o-linear-gradient(top, #454647 0%, #2b2c2c 100%) !important;
  background: -ms--ms-linear-gradient(top, #454647 0%, #2b2c2c 100%) !important;
  background: -ms-linear-gradient(to bottom, #454647 0%, #2b2c2c 100%) !important;
  border: none !important;
  border-radius: 5px !important;
  -webkit-box-shadow: #565656 0 -1px 0, #1c1c1c 0 2px 2px !important;
  box-shadow: #565656 0 -1px 0, #1c1c1c 0 2px 2px !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: bold !important;
  text-shadow: #000 0 1px !important;
}
button.nav {
  float: none;
  width: 90%;
  margin: 0 -1em 0 1em;
}
.ui-timepicker-div .ui-buttonset .ui-button.ui-state-default {
  background: none !important;
  color: #fff;
  display: inline-block !important;
  font-size: 12px !important;
  padding: 0 !important;
  width: 32px;
}
.ui-timepicker-div .ui-buttonset .ui-button.ui-state-default > .ui-icon {
  background-image: none !important;
}
.ui-timepicker-div .ui-buttonset .ui-button.ui-state-default > .ui-button-text {
  text-indent: 0 !important;
  padding: 0 !important;
}
.ui-timepicker-div .ui-buttonset .ui-button.ui-state-default:hover {
  border-color: #d3d3d3 !important;
}
.base-form {
  margin-bottom: 12px;
/* TODO: Ta bort detta! Och ersätt med något bättre (med en grå ruta runt också) */
}
.base-form div.row {
  clear: both;
  margin-bottom: 10px;
}
.base-form .row td {
  color: #ddd;
  font-size: 12px;
  text-transform: uppercase;
}
.base-form .row td:first-child {
  width: 35%;
}
.base-form .row table {
  width: 100%;
}
.base-form p {
  color: #ddd;
}
.base-form div.button-row {
  padding-top: 10px;
}
.base-form input:focus,
.base-form textarea:focus,
.base-form select:focus,
.base-form button:focus {
  outline: none;
}
.base-form input.hasDatepicker {
  border: none;
}
.base-form label {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  display: inline-block;
  font-size: 12px;
  line-height: 24px;
  padding-top: 6px;
  text-transform: uppercase;
  width: 100%;
  height: 30px;
}
.base-form label.shareRow {
  float: left;
  width: 34%;
}
.base-form a {
  font-size: 12px;
  text-decoration: underline;
}
.base-form input,
.base-form textarea,
.base-form select,
.base-form .input-wrapper {
  font-family: inherit;
  font-size: 16px;
  font-weight: normal;
  height: 30px;
}
.base-form input.has-changed,
.base-form textarea.has-changed,
.base-form select.has-changed,
.base-form .input-wrapper.has-changed {
  font-style: italic;
}
.base-form input,
.base-form select,
.base-form .input-wrapper {
  background-color: inherit;
  line-height: 30px;
  text-align: left;
}
.base-form input,
.base-form select,
.base-form .input-wrapper:not(.checkbox-wrapper) {
  float: none;
  width: 100%;
}
.base-form .checkbox-wrapper {
  display: inline-block;
  float: none;
  width: 65%;
}
.base-form input,
.base-form textarea,
.base-form .input-wrapper {
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  display: block;
  line-height: 30px;
}
.base-form input {
  padding-left: 3px;
  padding-right: 3px;
}
.base-form input[disabled="disabled"],
.base-form button.disabled i {
  color: #666;
}
.base-form .input-wrapper {
  float: right;
  text-align: center;
  padding-top: 1px;
}
.base-form .input-wrapper > input {
  display: inline-block;
}
.base-form .input-wrapper > input[type="checkbox"] {
  margin: 0 auto;
  height: auto !important;
  width: auto !important;
}
.base-form .input-wrapper > input[type="date"] {
  background-color: transparent !important; /* super important to block default styling on iPhone/iPad devices  */
  width: 100%;
}
.base-form .checkbox-test1 {
  height: auto;
  width: auto;
  display: inline;
}
.base-form textarea {
  clear: both;
  float: left;
  font-size: 15px;
  height: 50px;
  line-height: 25px;
  margin: 8px 0 18px 0;
  padding: 2px 6px;
  resize: none;
  width: 100%;
}
.base-form select::-ms-expand {
/* for IE 11 */
  display: none;
}
.base-form > select,
.base-form > div > select,
.base-form select.disecol {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  clear: both;
  direction: ltr;
  margin: 2px 0;
  padding: 0 20px;
  text-transform: uppercase;
}
.base-form option {
  border-bottom: #e0e0e0;
}
.base-form option:last-of-type {
  border: none;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.base-form .text-input-wrapper {
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 0;
  width: 100%;
}
.base-form .text-input-wrapper > input {
  clear: left;
  display: block;
  background: none !important;
  margin-right: 40px;
  padding-right: 6px;
  width: auto;
}
.base-form .text-input-wrapper > .actions {
  float: right;
  max-height: 30px;
  overflow: hidden;
}
.base-form .text-input-wrapper > .actions > .clear,
.base-form .text-input-wrapper > .actions > .icon {
  padding: 1px 4px 0 0;
  speak: none;
}
.base-form .text-input-wrapper > .actions > .clear > .icn,
.base-form .text-input-wrapper > .actions > .icon > .icn {
  margin-top: 2px;
  padding: 3px 2px 1px 3px;
}
.base-form .text-input-wrapper > .actions > .clear > .btn,
.base-form .text-input-wrapper > .actions > .icon > .btn {
  color: #ddd;
  margin-top: 1px;
  padding: 3px 2px;
}
.base-form .text-input-wrapper > .actions > .clear > .icn > i,
.base-form .text-input-wrapper > .actions > .icon > .icn > i,
.base-form .text-input-wrapper > .actions > .clear > .btn > i,
.base-form .text-input-wrapper > .actions > .icon > .btn > i {
  color: #515354;
  font-family: "ui-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}
.base-form .text-input-wrapper > .actions > .clear {
  display: none;
}
.notice {
  border: none;
  border-radius: 7px;
  display: none;
  margin-top: 2px;
  padding: 0.4em;
  text-align: center;
}
.page-notice {
  background: #181818;
  background: -webkit-gradient(linear, left top, left bottom, from(#242424), to(#181818));
  background: linear-gradient(#242424, #181818);
  background: -ms-linear-gradient(top, #242424 0%, #181818 100%);
  border-top: 1px solid rgba(255,255,255,0.2);
  -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 2px;
          box-shadow: rgba(255,255,255,0.4) 0 1px 2px;
  color: #fff;
  cursor: default !important;
  display: none;
  clear: both;
  margin: 0 -0.4em;
  padding: 16px 0.2em;
}
.page-notice button {
  margin-right: 4px !important;
}
.page-notice > div {
  cursor: pointer !important;
  float: right;
  margin-right: 2px;
  padding: 0.1em;
}
.page-notice > div > a {
  text-decoration: none;
}
.page-notice > p {
  padding: 0.4em;
}
.page-notice > p > span {
  background: #343434;
  border-radius: 0.5em;
  margin-right: 0.3em;
  padding: 0 0.4em;
  white-space: nowrap;
}
.page-notice > p > span:last-of-type {
  margin-right: 0;
}
.page-notice > p > a:link,
.page-notice > p a:active,
.page-notice > p a:visited {
  color: #dde;
  margin: 0.5em;
  text-decoration: underline;
}
.page-notice > p > a:hover {
  color: #ccd;
}
.edit-panel {
  padding: 2px 6px 6px 10px !important;
}
.edit-panel > * {
  display: inline-block !important;
  margin: 0 8px;
  width: auto !important;
}
.edit-panel input {
  background: #3a3b3c;
  background-color: #363738;
  border: none;
  border-radius: 5px;
  -webkit-box-shadow: #4f4f4f 0 1px 1px, #262626 0 2px 3px 1px inset;
          box-shadow: #4f4f4f 0 1px 1px, #262626 0 2px 3px 1px inset;
  line-height: 30px;
}
.edit-panel select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #454647;
  background: -webkit-gradient(linear, left top, left bottom, from(#454647), to(#2b2c2c));
  background: linear-gradient(#454647, #2b2c2c);
  background: -ms-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  border: none;
  border-radius: 5px;
  -webkit-box-shadow: #4f4f4f 0 1px 1px, #262626 0 2px 3px 1px inset;
          box-shadow: #4f4f4f 0 1px 1px, #262626 0 2px 3px 1px inset;
  clear: both;
  direction: ltr;
/*display: inline-block;*/
  margin: 2px 0;
  padding: 0 20px;
}
.edit-panel select:disabled {
  background: #b9b9b9 !important;
  color: #efefef !important;
  -webkit-box-shadow: #565656 0 -1px 0, #1c1c1c 0 2px 2px;
          box-shadow: #565656 0 -1px 0, #1c1c1c 0 2px 2px;
}
.top-panel {
  cursor: default;
  height: 60px;
}
.top-panel .list-add-button {
  float: right;
  font-weight: thin;
  padding: 20px 15px;
  text-decoration: underline;
  cursor: pointer;
}
.top-panel .list-sort-button {
  color: #9e9e9e;
  float: left;
  padding: 19px 13px 18px 13px;
}
.top-panel .list-sort-description {
  background-color: #fff;
  cursor: pointer;
  padding: 20px 3px;
}
.top-panel .list-sort-description > i {
  font-size: 16px !important;
  margin-left: 3px;
}
.info-panel {
  background-color: #9e9e9e;
  color: cl-dark-on-panels;
}
.info-panel {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row-reverse;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
          flex-direction: row-reverse;
  clear: left;
  cursor: default !important;
  padding-bottom: 3px;
  padding-left: 5px;
  height: 53px;
}
.info-panel > li:last-of-type {
  display: block;
  float: none;
}
.info-panel i:hover {
  color: cl-icon-on-panels-hover;
}
.info-panel .disabled,
.info-panel input[disabled="disabled"],
.info-panel select[disabled="disabled"] {
  cursor: default !important;
  visibility: hidden;
}
.info-panel .list-edit-button {
  margin: 0 0;
  padding: 10px 0px;
}
.info-panel .list-edit-button .list-edit {
  border: none;
  border-radius: 5px;
  cursor: pointer !important;
  height: 30.5px;
  padding: 4px !important;
}
.info-panel .list-edit-button .list-edit i {
  font-size: 140%;
}
.info-panel .list-add-button {
  margin: 0 0;
  padding: 10px 0px;
  margin-left: 6px;
  margin-right: 6px;
}
.info-panel .list-add-button .list-add {
  border: none;
  border-radius: 5px;
  cursor: pointer !important;
  height: 30.5px;
  padding: 4px !important;
}
.info-panel .list-add-button .list-add > i {
  font-size: 140%;
}
.info-panel .list-add-button > div.list-add:not(.disabled) {
  cursor: pointer;
}
.info-panel > .quickFilter {
  -ms-flex-grow: 1;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  color: #eee;
  height: 48px;
}
.info-panel > .quickFilter .quick-filter-wrapper {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row-reverse;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
          flex-direction: row-reverse;
  border: 1px solid #8c8c8c;
  border-radius: 7px;
  padding: 0;
  max-height: 30.5px;
}
.info-panel > .quickFilter .quick-filter-wrapper input {
  -ms-flex-grow: 1;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  border: none;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  font-family: inherit;
  line-height: 30px;
  margin: 0 !important;
  padding: 0 3px;
}
.info-panel > .quickFilter .quick-filter-wrapper > div {
  width: 32px;
  text-align: center;
  line-height: 27px;
}
.info-panel > .quickFilter .quick-filter-wrapper > div i {
  font-size: 26px;
}
.info-panel .list-description {
  color: #545454;
  font-size: 110%;
  font-weight: bold;
  padding: 15px 10px 15px 10px;
  text-shadow: 2px 2px #ababab;
}
.info-panel .list-description span {
  font-weight: normal;
}
.info-panel .list-description .sep {
  font-size: 60%;
  margin: 0 4px;
  position: relative;
  bottom: 2px;
}
.upload-panel > .list-upload-button {
  float: right;
  padding: 13px 18px 15px 18px;
}
.upload-panel > .list-upload-button > i {
  color: #ccc;
  font-size: 140%;
}
.upload-panel > .base-category {
  clear: left !important;
}
.list-button {
  color: #f5f5f5;
  padding: 10px;
/** Prevent text selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}
/*
  Unused

  .list-button2 {
    background: #2b2c2c;
    background: linear-gradient(#454647, #2b2c2c);
    background: -moz-linear-gradient(top, #454647 0%, #2b2c2c 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #454647), color-stop(100%, #2b2c2c));
    background: -webkit-linear-gradient(top, #454647 0%, #2b2c2c 100%);
    background: -o-linear-gradient(top, #454647 0%, #2b2c2c 100%);
    background: -ms-linear-gradient(top, #454647 0%, #2b2c2c 100%);
    border: none;
    border-radius: 5px;
    box-shadow: rgb(86, 86, 86) 0 -1px 0, rgb(28, 28, 28) 0 2px 2px;
    color: white;
    text-decoration: none !important;
    margin-top: 14px;
    margin-right: 12px !important;
    min-width: 50px;
    text-align: center;
    padding: 6px !important;
    text-transform: uppercase;
    font-size: 12px;
  }
*/
.list-done-button {
  float: right;
}
.list-done-button,
.list-cancel-button {
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  margin: 0 14px 0 0;
  padding: 8px 16px;
  text-shadow: #000 0 1px;
  text-transform: uppercase;
}
.list-panel {
  background: #fff;
  width: 100%;
}
.list-panel > div > ul > li {
  padding: 10px;
}
.list-panel > div > ul > li i {
  font-size: 15px;
  font-weight: normal;
}
.list-panel > div > ul > li:first-of-type {
  float: right;
}
.list-panel > div > ul > li:last-of-type {
  display: block;
  clear: left;
}
.list-pagination {
  background-color: #4a4a4a;
  cursor: default;
  padding: 4px;
  list-style-type: none;
}
.list-pagination button[disabled] {
  background: #ddd !important;
  color: #999 !important;
}
.list-pagination:hover {
  cursor: default !important;
}
.list-pagination li {
  display: inline-block;
  float: left;
}
.list-pagination li:first-of-type {
  float: right;
}
.list-pagination li:last-of-type {
  display: block !important;
  float: none;
  text-align: center;
}
.list-pagination li button {
  display: inline-block;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}
.list-pagination li button:hover {
  cursor: pointer !important;
}
.list-pagination li .page-number {
  color: #444;
  font-weight: bold;
  line-height: 25px;
  width: 55px;
}
.list-pagination li .selected {
  background: #78909c;
  color: #eee;
}
.list-pagination li .selected:active {
  background: #09c;
}
.list-pagination li button {
  padding: 0 8px !important;
}
.list-pagination li .page-number,
.list-pagination li button {
  border-radius: 4px;
}
.base-list {
  cursor: pointer;
}
.base-list .base-toolbar {
  background-color: #78909c;
  color: #eee;
  padding: 16px 0;
}
.base-list > li.base-item {
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  clear: both;
  padding: 18px 10px;
/**
     * The icon div is floated to the left and aligned vertically
     * with the h2 heading.
     */
/**
     * A toolbar is used as the context menu for items. This is originally
     * completely unstyled so we get to style it just the way we want in the context
     * of a list view.
     */
}
.base-list > li.base-item.active {
  background: #757575;
  color: #eee;
}
.base-list > li.base-item > div {
  float: left;
  height: 24px;
  width: 24px;
  margin: 0 0 0 4px;
/* if below colors are omitted, use this one */
/* below are used to displaying health status for entities that support it */
/* below colors are used by the reports items to indicate progression */
/* below colors are used to to display enabled/disabled scheduling */
}
.base-list > li.base-item > div i {
  color: #ccc;
}
.base-list > li.base-item > div i.isOk {
  color: #86ab66 !important;
}
.base-list > li.base-item > div i.hasErrors {
  color: #d94d4d !important;
}
.base-list > li.base-item > div i.hasWarnings {
  color: #eba438 !important;
}
.base-list > li.base-item > div i.isScheduledDown {
  color: #4f5b93 !important;
}
.base-list > li.base-item > div i.isGenerating {
  color: #d94dd9 !important;
}
.base-list > li.base-item > div i.isCreated {
  color: #b2b2d9 !important;
}
.base-list > li.base-item > div i.lightGrey {
  color: #cdcdcd !important;
}
.base-list > li.base-item span.fav {
  font-size: 12px;
  line-height: 0;
  position: relative;
  top: 6px;
  right: 9px;
  color: #d94d4d;
}
.base-list > li.base-item .list-item-icon {
  text-align: center;
}
.base-list > li.base-item .list-item-icon-image {
  display: block;
  width: 88px !important;
  height: 50px !important;
  margin-top: -5px !important;
  background-color: rgba(0,0,0,0.1);
  -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
          box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
  outline: 1px solid rgba(0,0,0,0.3);
}
.base-list > li.base-item .list-item-end,
.base-list > li.base-item .list-item-link {
  float: right;
}
.base-list > li.base-item .list-item-end i,
.base-list > li.base-item .list-item-link i {
  padding: 15px 10px 15px 0;
}
.base-list > li.base-item .list-item-sort,
.base-list > li.base-item .list-item-remove {
  display: none;
}
.base-list > li.base-item h2 {
  -webkit-font-smoothing: subpixel-antialiased;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  padding-left: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  word-wrap: normal;
  white-space: nowrap;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
}
.base-list > li.base-item h2 span {
  font-size: 14px;
  font-weight: 40;
  margin-left: 4px;
}
.base-list > li.base-item h3 {
  font-size: 11px;
  text-transform: uppercase;
  padding-left: 42px;
}
.base-list > li.base-item p {
  font-size: 14px;
  margin-bottom: 0;
  padding-left: 42px;
}
.base-list > li.base-item.empty {
  display: none;
  font-size: 12px;
  padding: 20px 10px;
  text-transform: uppercase;
}
.base-list > li.base-item .base-toolbar li {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  max-width: 45%;
  overflow-x: hidden;
  padding: 7.5px 0;
  text-align: center;
  text-transform: uppercase;
  width: 45%;
}
.base-list > li.base-item .base-toolbar li i {
  color: cl-copy;
  text-transform: none;
}
.base-list > li.base-item .base-toolbar li div {
  height: 32px;
  width: 32px;
  margin: 0 auto;
}
.base-list > li.selected {
  background: #6cbf6c;
  border-bottom: 1px solid #729f67;
  color: #f3f3f3;
}
.base-list > li.selected > i,
.base-list > li.selected > div > i {
  color: #eee;
}
.base-list > li.description div {
  margin-top: 6px;
}
.list-base-category {
  width: 60%;
}
.list-base-category > p {
  font-weight: bold;
  font-size: 110%;
  padding-top: 6px;
}
.list-base-category i {
  font-size: 105%;
  margin-left: -5px;
  margin-right: 13px;
}
.base-numberinput {
  clear: both;
}
.base-numberinput > input[type="number"] {
  -moz-appearance: textfield;
}
.base-numberinput > input[type="number"]::-webkit-outer-spin-button,
.base-numberinput > input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.base-numberinput > .ui-autocomplete {
  background: #3a3b3c;
  background-color: #363738;
  border: none;
  border-radius: 0 !important;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  max-height: 0;
  -webkit-transition: opacity 0.5s, max-height 1s ease-in-out;
  transition: opacity 0.5s, max-height 1s ease-in-out;
  -moz-transition: opacity 0.5s, max-height 1s ease-in-out;
  -webkit-transition: opacity 0.5s, max-height 1s ease-in-out;
  -o-transition: opacity 0.5s, max-height 1s ease-in-out;
  display: none;
  float: left;
/*margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
    -webkit-margin-after: 0px !important;
    -webkit-margin-before: 0px !important;
    -webkit-margin-end: 0px !important;
    -webkit-margin-start: 0px !important;
    -webkit-padding-after: 0px !important;
    -webkit-padding-before: 0px !important
    -webkit-padding-start: 0px !important;
    -webkit-padding-end: 0px !important;*/
  overflow-x: hidden; /* prevent horizontal scrollbar */
  overflow-y: auto;
}
.base-numberinput > .ui-autocomplete.opened {
  opacity: 1;
  -ms-filter: none;
  -webkit-filter: none;
          filter: none;
  display: block;
}
.base-numberinput > .ui-autocomplete > .ui-menu-item {
  background: #282828;
  background: -webkit-gradient(linear, left top, left bottom, from(#242424), to(#282828));
  background: linear-gradient(#242424, #282828);
  background: -moz--webkit-linear-gradient(top, #242424 0%, #282828 100%);
  background: -moz--moz-linear-gradient(top, #242424 0%, #282828 100%);
  background: -moz--o-linear-gradient(top, #242424 0%, #282828 100%);
  background: -moz--ms-linear-gradient(top, #242424 0%, #282828 100%);
  background: -webkit--webkit-linear-gradient(top, #242424 0%, #282828 100%);
  background: -webkit--moz-linear-gradient(top, #242424 0%, #282828 100%);
  background: -webkit--o-linear-gradient(top, #242424 0%, #282828 100%);
  background: -webkit--ms-linear-gradient(top, #242424 0%, #282828 100%);
  background: -o--webkit-linear-gradient(top, #242424 0%, #282828 100%);
  background: -o--moz-linear-gradient(top, #242424 0%, #282828 100%);
  background: -o--o-linear-gradient(top, #242424 0%, #282828 100%);
  background: -o--ms-linear-gradient(top, #242424 0%, #282828 100%);
  background: -ms--webkit-linear-gradient(top, #242424 0%, #282828 100%);
  background: -ms--moz-linear-gradient(top, #242424 0%, #282828 100%);
  background: -ms--o-linear-gradient(top, #242424 0%, #282828 100%);
  background: -ms--ms-linear-gradient(top, #242424 0%, #282828 100%);
  background: -ms-linear-gradient(to bottom, #242424 0%, #282828 100%);
  border-top: 1px solid #292929;
  border-bottom: 1px solid #1f1f1f;
  color: #aaa;
  padding: 6px 16px 8px 16px;
}
.base-numberinput > .ui-autocomplete > .ui-menu-item > a {
  background: none;
  border: none;
  padding: 0;
  color: #aaa;
}
.base-numberinput > .ui-autocomplete > .ui-menu-item:hover,
.base-numberinput > .ui-autocomplete > .ui-menu-item:focus,
.base-numberinput > .ui-autocomplete > .ui-menu-item.active {
  background: #617f89;
  background: -webkit-gradient(linear, left top, left bottom, from(#7da3b0), to(#617f89));
  background: linear-gradient(#7da3b0, #617f89);
  background: -moz--webkit-linear-gradient(top, #7da3b0 0%, #617f89 100%);
  background: -moz--moz-linear-gradient(top, #7da3b0 0%, #617f89 100%);
  background: -moz--o-linear-gradient(top, #7da3b0 0%, #617f89 100%);
  background: -moz--ms-linear-gradient(top, #7da3b0 0%, #617f89 100%);
  background: -webkit--webkit-linear-gradient(top, #7da3b0 0%, #617f89 100%);
  background: -webkit--moz-linear-gradient(top, #7da3b0 0%, #617f89 100%);
  background: -webkit--o-linear-gradient(top, #7da3b0 0%, #617f89 100%);
  background: -webkit--ms-linear-gradient(top, #7da3b0 0%, #617f89 100%);
  background: -o--webkit-linear-gradient(top, #7da3b0 0%, #617f89 100%);
  background: -o--moz-linear-gradient(top, #7da3b0 0%, #617f89 100%);
  background: -o--o-linear-gradient(top, #7da3b0 0%, #617f89 100%);
  background: -o--ms-linear-gradient(top, #7da3b0 0%, #617f89 100%);
  background: -ms--webkit-linear-gradient(top, #7da3b0 0%, #617f89 100%);
  background: -ms--moz-linear-gradient(top, #7da3b0 0%, #617f89 100%);
  background: -ms--o-linear-gradient(top, #7da3b0 0%, #617f89 100%);
  background: -ms--ms-linear-gradient(top, #7da3b0 0%, #617f89 100%);
  background: -ms-linear-gradient(to bottom, #7da3b0 0%, #617f89 100%);
  border-top: 1px solid #9ab9c4;
  border-bottom: 1px solid #475c63;
  color: #eee;
}
.base-numberinput > .ui-autocomplete > .ui-menu-item:hover > a,
.base-numberinput > .ui-autocomplete > .ui-menu-item:focus > a,
.base-numberinput > .ui-autocomplete > .ui-menu-item.active > a {
  background: none;
  color: #eee;
}
.ui-helper-hidden-accessible {
  color: #ddd;
  display: none;
  font-size: 12px;
  line-height: 24px;
}
/* Below CSS rules are for parent elements that contains number-inputs */
div.number-inputs2,
div.number-inputs3 {
  text-align: center;
}
div.number-inputs2 > div,
div.number-inputs3 > div {
  display: inline-block;
  margin-bottom: 10px;
}
div.number-inputs2 > span,
div.number-inputs3 > span {
  color: #eee;
}
div.number-inputs2 > div {
  width: 47%;
}
div.number-inputs3 > div {
  width: 31%;
}
.wrapper {
  border: none;
  text-align: center;
  width: 100%;
}
.wrapper > .overview {
  border: none;
  background: #1e1e1e;
  display: inline-block;
  margin: 0 auto;
  padding-bottom: 45px;
}
.wrapper > .overview > li {
  display: inline-block;
  max-width: 180px;
  margin: 1px;
  min-width: 180px;
}
.wrapper > .overview > li:hover {
  cursor: pointer;
}
.wrapper > .overview > li > p {
  background: #24d0cd; /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */
  background: -webkit-gradient(linear, left top, right top, from(rgba(36,208,205,0.4)), color-stop(50%, rgba(36,208,205,0.65)), to(rgba(36,208,205,0.4)));
  background: linear-gradient(to right, rgba(36,208,205,0.4) 0%, rgba(36,208,205,0.65) 50%, rgba(36,208,205,0.4) 100%); /* W3C */
  border: none;
  color: #fff;
  font-size: 110%;
  font-weight: bold;
  overflow-x: hidden;
  padding: 0.2em;
  text-align: center;
  white-space: nowrap;
  width: 100%;
  z-index: 1;
}
.wrapper > .overview > li > p > a,
.wrapper > .overview > li > p > a:link,
.wrapper > .overview > li > p > a:hover,
.wrapper > .overview > li > p > a:active,
.wrapper > .overview > li > p > a:visited {
  color: #fff;
  text-decoration: none;
}
.wrapper > .overview > img {
  border: none;
  margin: 0;
  width: 180px;
  min-height: 101;
}
.panel-item {
  background: #fff;
}
.panel-item i {
  color: #b2b2b2;
}
.panel-item > .number-box {
  background: #f3f3f3;
  background: -webkit-gradient(linear, left top, left bottom, from(#afafaf), color-stop(22%, #d8d8d8), to(#f3f3f3));
  background: linear-gradient(#afafaf, #d8d8d8 22%, #f3f3f3); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #afafaf 0%, #d8d8d8 22%, #f3f3f3 100%); /* IE10+ */
  border: none;
  border-radius: 7px;
  -webkit-box-shadow: rgba(155,155,155,0.4) 0 1px 2px;
          box-shadow: rgba(155,155,155,0.4) 0 1px 2px;
  color: #999;
  float: right !important;
  height: auto !important;
  margin: -5px 0 0 0 !important;
  padding: 5px 15px;
  text-align: center;
  text-shadow: 2px 2px #f6f6f6;
  width: auto !important;
  -webkit-font-smoothing: subpixel-antialiased;
}
.panel-item.active > .number-box {
  background: #6d919b;
  background: -webkit-gradient(linear, left top, left bottom, from(#58737b), color-stop(22%, #6d919b), to(#7da3b0));
  background: linear-gradient(#58737b, #6d919b 22%, #7da3b0); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #58737b 0%, #6d919b 22%, #7da3b0 100%); /* IE10+ */
  -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 2px;
          box-shadow: rgba(255,255,255,0.4) 0 1px 2px;
  color: #e0e0e0;
  text-shadow: 1px 1px #474747;
}
.radiogroup {
  display: block;
  float: none;
  width: 100%;
  text-align: center;
}
.radiogroup > fieldset {
  display: block;
  float: none;
  width: 100%;
}
.radiogroup > fieldset > label {
  display: block;
  float: none;
  text-align: left;
  width: 100%;
}
.radiogroup > fieldset > .radio {
  display: inline-block;
  border: 1px solid #e0e0e0;
  color: #898989;
  margin: 0;
  padding: 0 10px;
  position: relative;
  text-align: left;
}
.radiogroup > fieldset > .radio > input {
  height: 100%;
  left: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.radiogroup > fieldset > .radio > label {
  float: none;
  line-height: 30px;
/*padding: 0 10px;*/
  padding: 0;
  text-align: center !important;
  white-space: nowrap;
  width: 100%;
}
.radiogroup > fieldset > .radio:first-of-type {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.radiogroup > fieldset > .radio:last-of-type {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.radiogroup > fieldset > .radio.hover {
  cursor: pointer;
}
.radiogroup > fieldset > .radio.active {
  background: #78909c;
  border-color: #78909c;
  color: #eee;
}
/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 */
.jspContainer {
  overflow: hidden;
  position: relative;
}
.jspPane {
  position: absolute;
}
.jspVerticalBar {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}
.jspHorizontalBar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1;
}
.jspCap {
  display: none;
}
.jspHorizontalBar .jspCap {
  float: left;
}
.jspTrack {
  position: relative;
}
.jspDrag {
  border-radius: 4px;
  position: relative;
  top: 0;
  left: 0;
  cursor: pointer;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag {
  display: none; /*we do not want a horizontal scrollbars.. at least for now*/
/*float: left;
  height: 100%;*/
}
.jspArrow {
  text-indent: -20000px;
  display: block;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
.jspArrow.jspDisabled {
  cursor: default;
}
.jspHorizontalBar .jspArrow {
  float: left;
  height: 100%;
}
.jspVerticalBar .jspArrow:focus {
  outline: none;
}
.jspCorner {
  float: left;
  height: 100%;
}
.jspVerticalBar,
.jspHorizontalBar .jspArrow {
  width: 8px;
  direction: rtl;
}
.jspHorizontalBar,
.jspVerticalBar .jspArrow {
  height: 8px;
  direction: ltr;
}
/* Yuk! CSS Hack for IE6 3 pixel bug :( *
* html .jspCorner {
  margin: 0 -3px 0 0;
}*/
.layouts-wrapper .jspCorner {
  background: #eeeef4;
}
.layouts-wrapper .jspTrack {
  background: #fff;
  border: 1px solid #fff;
}
.layouts-wrapper .jspDrag,
.layouts-wrapper .jspArrow {
  background: #929292;
}
.layouts-wrapper:last-of-type .jspTrack {
  background: #e1e1e1;
}
.layouts-wrapper:last-of-type .jspDrag,
.layouts-wrapper:last-of-type .jspArrow {
  background: #838383;
}
.layouts-wrapper:first-of-type .jspCorner {
  background: #17171d;
}
.layouts-wrapper:first-of-type .jspTrack {
  background: #282828;
  border: 1px solid #282828;
}
.layouts-wrapper:first-of-type .jspDrag,
.layouts-wrapper:first-of-type .jspArrow {
  background: #939393;
}
.button-panel2 {
  line-height: normal;
  background: #fff;
  width: 100%;
  text-align: center;
}
.button-panel2 ul > li {
  display: inline-block;
  padding: 0.1em 0.1em;
}
.button-panel2 ul > li:hover {
  cursor: pointer;
}
.button-panel2 ul > li i {
  color: #ccc;
}
.button-panel {
  line-height: 48px;
  float: right;
  margin-top: 3px;
  margin-right: 12px;
}
.button-panel ul > li {
  display: inline-block;
  padding: 0.1em 0.1em;
  margin: 0 0.2em;
}
.button-panel ul > li:hover {
  cursor: pointer;
}
.button-panel ul > li i {
  color: #616161;
}
.button-panel ul > li i:hover {
  color: #222;
}
.base-show {
  background-color: #fff;
  padding-bottom: 1px;
}
.rows {
  margin: 12px 0;
}
.rows .row {
  width: 100%;
  padding: 2px 10px;
  clear: both;
}
.rows .row > p {
  text-align: right;
  font-size: 80%;
  font-weight: bold;
  border-bottom: 1px dotted transparent;
  margin-bottom: 4px;
}
.rows .row > .legend {
  border-bottom: 1px dotted #111;
  float: left;
  font-size: 85%;
  font-weight: thin;
  padding-bottom: 2px;
  width: 50%;
}
.rows .row:last-child .legend {
  border: none;
}
.base-slider {
  clear: both;
  display: block;
  padding: 10px 0;
  text-align: center;
  width: 100%;
/** Prevent text selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.base-slider > label {
  text-align: left;
}
.base-slider > .dec-button,
.base-slider > .inc-button {
  display: inline-block;
  float: right;
  position: relative;
  top: 8px;
/*margin: 0 -2px;*/
/*padding: 8px 2px 0 2px;*/
}
.base-slider > .dec-button:hover,
.base-slider > .inc-button:hover {
  cursor: pointer;
}
.base-slider > input {
  display: inline-block;
  float: right;
  width: 50px;
}
.base-slider > input::-webkit-outer-spin-button,
.base-slider > input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.base-slider > .ui-slider-horizontal,
.base-slider > .ui-slider-vertical {
  display: inline-block;
  position: relative;
  background: #2e2f30;
/*background: rgb(46,47,48);*/
  border: none;
  border-radius: 5px;
  height: 10px;
  margin: 0 auto;
  width: 80%;
}
.base-slider > .ui-slider-horizontal > .ui-slider-handle,
.base-slider > .ui-slider-vertical > .ui-slider-handle {
  background: none;
  border: none;
  position: absolute;
  height: 0;
}
.base-slider > .ui-slider-horizontal > .ui-slider-handle > div,
.base-slider > .ui-slider-vertical > .ui-slider-handle > div {
  background: #617f89;
  background: -webkit-gradient(linear, left top, left bottom, from(#7da3b0), to(#617f89));
  background: linear-gradient(#7da3b0, #617f89); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #7da3b0 0%, #617f89 100%); /* IE10+ */
  border-top: 1px solid #9ab9c4;
/*border-top: 1px solid rgb(154, 185, 196);*/
  border-bottom: 1px solid #475c63;
/*border-bottom: 1px solid rgb(71, 92, 99);*/
  color: #eee;
  border-radius: 9px;
  display: inline-block;
  font-size: 10px;
  line-height: 14px;
  height: 18px;
  padding: 1px 21px;
  position: relative;
  right: 26px;
  bottom: 3px;
/*text-align: center;*/
  text-shadow: #000 0 1px;
  text-transform: uppercase;
}
.base-slideshow {
  height: 210px;
}
.base-slideshow > ul.pagination {
  display: none;
}
.base-slideshow > .slides_container {
  height: 168px;
  overflow: hidden;
}
.base-slideshow > .slides_container .base-slide {
  display: inline-block;
  height: 168px;
  overflow: hidden;
  width: 100%;
}
.base-slideshow > .btn {
  display: block;
  height: 42px;
  padding-top: 1px;
}
.base-slideshow > .btn > div {
  display: table-cell;
  height: 42px;
  vertical-align: middle;
}
.base-slideshow > .btn > div a {
  padding-bottom: 10px;
  padding-top: 14px;
}
.base-slideshow > .btn:hover {
  cursor: pointer;
}
.base-slideshow > .prev_btn {
  float: left;
}
.base-slideshow > .prev_btn a {
  padding-right: 8px;
}
.base-slideshow > .next_btn {
  float: right;
}
.base-slideshow > .next_btn a {
  padding-left: 8px;
}
.base-slideshow > .plate {
  background: #999;
  background: -webkit-gradient(linear, left top, left bottom, from(#b1b1b1), to(#999));
  background: linear-gradient(#b1b1b1, #999); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #b1b1b1 0%, #999 100%); /* IE10+ */
  border-top: #bfbfbf;
  -webkit-box-shadow: rgba(153,153,153,0.4) 0 1px 2px;
          box-shadow: rgba(153,153,153,0.4) 0 1px 2px;
  color: #5f5f5f;
  font-size: 100%;
  font-weight: bold;
  height: 42px;
  padding: 12px 15px;
  text-align: center;
  text-shadow: 1px 2px #b6b6b6;
  width: 100%;
}
.base-timeselectors {
  text-align: center;
  margin: 0 0 0.4em 0;
}
.base-timeselectors > div {
  color: #eee;
  display: inline-block;
  margin: 0 0.2em;
}
.base-timeselectors > div > label {
  padding-top: 0 !important;
}
.base-toogleslider {
  clear: both;
  display: block;
  padding: 10px 0;
/** Prevent text selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%;
}
.base-toogleslider div.widget {
  display: block;
  color: #ddd;
  text-align: center;
  width: 100%;
}
.base-toogleslider div.widget div.con {
  background: #242424;
  background: -webkit-gradient(linear, left top, left bottom, from(#181818), to(#242424));
  background: linear-gradient(#181818, #242424); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #181818 0%, #242424 100%); /* IE10+ */
  display: inline-block;
  padding: 2px 8px;
  white-space: nowrap;
  text-align: center;
  text-shadow: 1px 1px #282828;
  width: 49% !important;
}
.base-toogleslider div.widget div.con.first {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  margin-left: auto;
}
.base-toogleslider div.widget div.con.last {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  margin-right: auto;
}
.base-toogleslider > .ui-slider-horizontal {
  display: block;
  height: 0;
  background: none;
  border-radius: 5px;
  border: none;
  position: relative;
  bottom: 24px;
  width: 50% !important;
}
.base-toogleslider > .ui-slider-horizontal > .ui-slider-handle {
  background: #617f89;
  background: -webkit-gradient(linear, left top, left bottom, from(#7da3b0), to(#617f89));
  background: linear-gradient(#7da3b0, #617f89); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #7da3b0 0%, #617f89 100%); /* IE10+ */
  border-top: 1px solid #9ab9c4;
  border-bottom: 1px solid #475c63;
  color: #333;
  content: "˙˙˙";
  border-radius: 5px;
  display: inline-block;
  font-size: 10px;
  line-height: 14px;
  height: 24px;
  position: absolute;
  text-shadow: #000 0 1px;
  text-transform: uppercase;
  width: 100%;
  left: 0;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-property: left;
  -moz-transition-property: left; /* Firefox 4 */
  -webkit-transition-property: left; /* Safari and Chrome */
  -o-transition-property: left; /* Opera */
  -webkit-transform: translateZ(0);
}
.base-toolbar {
  background-color: #78909c;
  color: #fff;
  margin: 0;
  padding-top: 64px;
}
/**
 * A toolbar is used as the context menu for items. This is originally
 * completely unstyled so we get to style it just the way we want in the context
 * of a list view.
 */
.base-toolbar li {
  cursor: default;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  max-width: 49%;
  overflow-x: hidden;
  padding: 7.5px 0;
  text-align: center;
  text-transform: uppercase;
  width: 49%;
}
.base-toolbar li:hover {
  cursor: pointer;
}
.base-toolbar li i {
  color: #fff;
  text-transform: none;
}
.base-toolbar li div {
  height: 32px;
  width: 32px;
  margin: 0 auto;
}
.base-form .upload-block {
  display: block;
  clear: both;
  padding: 0.5em 0;
}
.base-form .upload-block > label {
  clear: left;
  display: block;
  font-size: 12px;
  line-height: 24px;
  padding-top: 2px;
  text-transform: lowercase;
  width: 34%;
  height: 30px;
}
.base-form .upload-block .btn {
  border: none;
  border-radius: 5px;
  -webkit-box-shadow: #565656 0 -1px 0, #1c1c1c 0 2px 2px;
          box-shadow: #565656 0 -1px 0, #1c1c1c 0 2px 2px;
  color: #fff;
  display: block;
  float: right;
  font-size: 12px;
  font-weight: bold;
  margin: 0;
  padding: 0 8px;
  position: relative;
  text-align: center;
  text-shadow: #000 0 1px;
  text-transform: lowercase;
  width: 50%;
  background: #2b2c2c !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#454647), to(#2b2c2c)) !important;
  background: linear-gradient(#454647, #2b2c2c) !important;
  background: -ms-linear-gradient(top, #454647 0%, #2b2c2c 100%) !important;
}
.base-form .upload-block .btn > input {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}
ul.weekday-selector {
  display: inline-block;
  text-align: center;
  width: 100%;
}
ul.weekday-selector li {
  display: inline-block;
}
ul.weekday-selector li > button {
  background: #d0d0d0;
  color: #111;
  border-radius: 0;
  padding: 8px 10px;
}
ul.weekday-selector li > button:active {
  background: #b0b0b0;
}
ul.weekday-selector li > button[value="su"] {
  color: #e00 !important;
}
ul.weekday-selector li > button.selected {
  background: #0be;
  color: #fffafa;
}
ul.weekday-selector li > button.selected:active {
  background: #09c;
}
ul.weekday-selector li:first-of-type > button {
  -webkit-border-top-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
ul.weekday-selector li:last-of-type > button {
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.displayScheme-edit,
.displayScheme-channel-edit,
.channel-edit {
  cursor: default;
  border-bottom: 1px solid #e0e0e0;
  padding: 10px;
}
.displayScheme-edit input[name="width"],
.displayScheme-channel-edit input[name="width"],
.channel-edit input[name="width"],
.displayScheme-edit input[name="height"],
.displayScheme-channel-edit input[name="height"],
.channel-edit input[name="height"],
.displayScheme-edit input[name^="pos_"],
.displayScheme-channel-edit input[name^="pos_"],
.channel-edit input[name^="pos_"] {
  clear: left;
  display: inline-block;
  margin: 2px 0;
  width: 49%;
}
.displayScheme-edit select[name$="_type"],
.displayScheme-channel-edit select[name$="_type"],
.channel-edit select[name$="_type"] {
  float: right;
  width: 49%;
}
.displayScheme-edit button[value="save"],
.displayScheme-channel-edit button[value="save"],
.channel-edit button[value="save"],
.displayScheme-edit button[value="cancel"],
.displayScheme-channel-edit button[value="cancel"],
.channel-edit button[value="cancel"] {
  margin-top: 10px;
}
.channel-show {
  background: #fff;
/*min-width: 320px;*/
  padding-bottom: 1px;
}
.channel-show > h1 {
  word-wrap: break-word;
}
.channel-show > .row {
  width: 100%;
  padding: 0 10px;
  clear: both;
}
.channel-show > .row p {
  text-align: right;
  font-size: 80%;
  font-weight: bold;
  border-bottom: 1px dotted transparent;
  margin-bottom: 10px;
}
.channel-show > .row div {
  border-bottom: 1px dotted #111;
  float: left;
  font-size: 95%;
  font-weight: thin;
  padding-bottom: 2px;
  width: 50%;
}
.displayScheme-show {
  background: #fff;
  padding-bottom: 1px;
}
.displayScheme-show > h1 {
  word-wrap: break-word;
}
.displayScheme-show .playlist-type {
  background-color: #fafbb3;
  border-top: #aaae66;
  color: #414426;
  display: none;
  padding: 16px 12px;
  position: relative;
  text-align: right;
}
.displayScheme-show .playlist-type a {
  cursor: pointer;
  background-color: #d9dc8f;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  margin-left: 6px;
  padding: 6px 8px;
  text-transform: uppercase;
}
.displayScheme-show .playlist-type .arrow {
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid #fafbb3;
  bottom: -12px;
  cursor: pointer;
  height: 0;
  left: 360px;
  position: absolute;
  width: 0;
}
.displayScheme-show > .row {
  width: 100%;
  padding: 0 10px;
  clear: both;
}
.displayScheme-show > .row p {
  text-align: right;
  font-size: 80%;
  font-weight: bold;
  border-bottom: 1px dotted transparent;
  margin-bottom: 10px;
}
.displayScheme-show > .row div {
  border-bottom: 1px dotted #111;
  float: left;
  font-size: 95%;
  font-weight: thin;
  padding-bottom: 2px;
  width: 50%;
}
.advertisement-info-view {
  background-color: #fff !important;
  color: #222 !important;
  padding: 8px;
}
.advertisement-info-view h2 {
  font-weight: bold;
  padding: 8px 0 8px 0;
}
.advertisement-menu .common-link {
  display: block;
}
.advertisement-menu .active {
  background: #757575 !important;
  color: #eee;
}
.booking-edit .common-form,
.booking-edit .bookings {
  padding: 16px 12px;
}
.booking-edit h5 {
  font-weight: bold;
  border-bottom: 1px solid #bdbdbd;
  margin-bottom: 16px;
}
.booking-edit ul {
  margin-bottom: 16px;
}
.booking-edit li {
  padding: 4px 0;
}
.bookings-show {
  padding: 16px 12px;
  padding-bottom: 0;
}
.bookings-show h5 {
  font-weight: bold;
  border-bottom: 1px solid #bdbdbd;
  margin-bottom: 16px;
}
.bookings-show .SoV {
  background-color: #fff;
  border-radius: 4px;
  color: #222;
  float: right;
  font-weight: bold;
  padding: 0 8px;
}
.bookings-show p {
  margin-bottom: 16px;
}
.bookings-show ul {
  margin-bottom: 16px;
}
.bookings-show li {
  line-height: 24px;
  margin-bottom: 6px;
}
.bookings-show .booking-list-empty {
  border-bottom: 1px solid #bdbdbd;
  font-size: 13px;
  line-height: 62px;
  text-align: center;
  text-transform: uppercase;
}
.campaigns-campaign-calendar {
  position: relative;
}
.campaigns-campaign-calendar .open {
  height: 292px;
}
.campaigns-campaign-calendar .closed {
  height: 44px;
}
.campaigns-campaign-calendar .now {
  border-right: 3px dotted #f00;
  position: absolute;
  bottom: 80px;
  top: 80px;
  left: 300px;
  z-index: 9999;
}
.campaigns-campaign-calendar th {
  font-weight: bold;
}
.campaigns-campaign-calendar header {
  border-bottom: 1px solid #bdbdbd;
  padding: 0 12px 0 0;
  text-align: center;
  height: 82px;
  position: relative;
/*
    .toolbar {
      float: left;
      text-transform: uppercase;
      font-weight: bold;

      .booking-button{
        width: 200px;
        line-height: height;
        float: left;
        background: cl-menu-selected;
        height: height;
        color: cl-text-on-dark;
        cursor: context-menu;
        transition background tr-background-time tr-background-curve 0s;

        i{
          font-size: 100%;
        }
      }

      &.enabled-true {
        color: cl-text-on-dark;

        &:hover{
          color: cl-dark;
        }

        .booking-button {
          background: cl-primary;
          cursor: pointer;

          &:hover {
            background: cl-primary-hover;
          }
        }
      }
    }*/
}
.campaigns-campaign-calendar header .controls {
  float: left;
  cursor: pointer;
  width: 50%;
  text-align: right;
  padding: 1rem 0;
}
.campaigns-campaign-calendar header .controls i {
  color: #78909c;
  display: inline-block;
  line-height: 51px;
  margin-left: 6px;
  text-align: center;
}
.campaigns-campaign-calendar header .controls i:hover {
  color: #557585;
}
.campaigns-campaign-calendar header .common-select {
  float: right;
  margin-left: 12px;
  width: 180px;
}
.campaigns-campaign-calendar header .common-date-picker {
  float: right;
  margin-left: 12px;
}
.campaigns-campaign-calendar header form {
  padding: 0;
  padding-top: 16px;
  width: 50%;
  float: left;
}
.campaigns-campaign-calendar header input,
.campaigns-campaign-calendar header select {
  margin-bottom: 0;
}
.campaigns-campaign-calendar .toolbar {
  text-align: center;
  width: 50%;
  margin: 0 auto;
}
.campaigns-campaign-calendar .calendar-form {
  display: block;
}
.campaign-edit .common-form {
  padding: 16px 12px;
  padding-bottom: 0;
}
.campaign-edit .content-div {
  padding-bottom: 24px;
}
.campaign-edit .content-span {
  float: right;
}
.campaign-edit .content-text {
  font-weight: bold;
  float: left;
}
.campaign-edit .common-submit {
  padding: 16px 12px;
}
.campaign-edit ul {
  margin-bottom: 16px;
}
.campaign-edit li {
  line-height: 24px;
  margin-bottom: 6px;
}
.campaign-edit .SoV {
  background-color: #fff;
  border-radius: 4px;
  color: #222;
  float: right;
  font-weight: bold;
  padding: 0 8px;
}
.campaigns-campaign-grid {
  overflow-x: hidden;
  overflow-y: scroll;
}
.campaigns-campaign-grid,
.campaigns-campaign-grid-footer {
  cursor: pointer;
}
.campaigns-campaign-grid,
.campaigns-campaign-grid-header,
.campaigns-campaign-grid-footer {
  width: 100%;
  table-layout: fixed;
  overflow: hidden;
}
.campaigns-campaign-grid td,
.campaigns-campaign-grid-header td,
.campaigns-campaign-grid-footer td,
.campaigns-campaign-grid th,
.campaigns-campaign-grid-header th,
.campaigns-campaign-grid-footer th {
  border-right: 1px dotted #bdbdbd;
  border-bottom: 1px dotted #bdbdbd;
  padding-top: 15px;
  padding-bottom: 15px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.campaigns-campaign-grid td:last-child,
.campaigns-campaign-grid-header td:last-child,
.campaigns-campaign-grid-footer td:last-child,
.campaigns-campaign-grid th:last-child,
.campaigns-campaign-grid-header th:last-child,
.campaigns-campaign-grid-footer th:last-child {
  border-right: none;
}
.campaigns-campaign-grid td,
.campaigns-campaign-grid-header td,
.campaigns-campaign-grid-footer td {
  text-align: center;
  width: 100px;
}
.campaigns-campaign-grid th,
.campaigns-campaign-grid-header th,
.campaigns-campaign-grid-footer th {
  vertical-align: middle;
  width: 100px;
}
.campaigns-campaign-grid th:first-child,
.campaigns-campaign-grid-header th:first-child,
.campaigns-campaign-grid-footer th:first-child {
  padding-left: 15px;
  width: 258px;
}
.campaigns-campaign-grid .common-link + .common-link,
.campaigns-campaign-grid-header .common-link + .common-link,
.campaigns-campaign-grid-footer .common-link + .common-link {
  margin-left: 24px;
}
.campaigns-campaign-grid-header .date {
  text-align: center;
  text-transform: capitalize;
}
.campaigns-grid-cell {
  position: relative;
}
.campaigns-grid-cell div {
  background-color: #bdbdbd;
  border-radius: 8px;
  height: 12px;
  margin: auto;
  width: 70px;
  overflow: hidden;
}
.campaigns-grid-cell div div {
  background-color: #4caf50;
  margin: 0;
}
.campaigns-grid-cell.isPast {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAJElEQVQImT2JsQ0AMAyDyP/X2Q+RIWqZEJDEx6gA0JZr9/mmLuGvJ7Ou3vGeAAAAAElFTkSuQmCC");
}
.campaigns-grid-cell.isOverbooked div div {
  background-color: #ac1616;
}
.campaigns-grid-cell.isSelected {
  background-color: #4caf50;
  border-color: #2d9434;
  color: #eee;
}
.campaigns-grid-cell.isSelected div {
  background-color: #439a46;
}
.campaigns-grid-cell.isSelected div div {
  background-color: #81c883;
}
.campaigns-grid-cell.isSelected em {
  background-color: #fff;
}
.campaigns-grid-cell.isSelected.isOverbooked {
  background-color: #d32f2f;
}
.campaigns-grid-cell.isSelected.isOverbooked div div {
  background-color: #ac1616;
}
.campaigns-grid-cell em {
  background-color: #78909c;
  border-radius: 6px;
  display: block;
  height: 8px;
  position: absolute;
  width: 8px;
  right: 6px;
  top: 6px;
}
.campaign-item {
  height: 48px;
  -ms-flex-line-pack: center;
      align-content: center;
}
.campaign-item p {
  font-style: italic;
}
.campaign-item .item-span {
  float: left;
  -ms-flex-line-pack: center;
      align-content: center;
  vertical-align: middle;
}
.campaign-item .icon-span {
  float: right;
  vertical-align: middle;
  line-height: 48px;
}
.calendar-mobile-view {
  background-color: #fff !important;
  color: #222 !important;
  padding: 8px;
}
.campaign-show .common-form {
  padding: 16px 12px;
  padding-bottom: 0;
  display: block;
}
.campaign-show .common-submit {
  padding: 16px 12px;
}
.campaign-show .edit_btn {
  -webkit-font-smoothing: antialiased;
  background-color: #78909c;
  border-radius: 4px;
  border: none;
  color: #eee;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  height: 51px;
  letter-spacing: normal;
  text-transform: uppercase;
}
.campaign-show .edit_btn:focus {
  color: #222;
  border: 2px solid #78909c;
  background-color: inherit;
  outline: none;
}
.campaign-show .edit_btn.secondary {
  background-color: inherit;
  border: 1px solid #bdbdbd;
  color: inherit;
  margin-right: 12px;
}
.campaign-show .edit_btn.secondary:focus {
  border: 2px solid #78909c;
}
.campaign-show .delimiter {
  margin-bottom: 16px;
}
.campaign-show h5 {
  font-weight: bold;
  margin-bottom: 16px;
  border-bottom: none !important;
}
.campaign-show .description {
  font-style: italic;
}
.campaign-show .title {
  display: inline;
}
.campaign-show .system-icon {
  cursor: pointer;
}
.campaign-show .icon-system {
  cursor: pointer;
  position: relative;
  float: right;
  right: 8px;
  color: #616161;
}
.campaign-show .icon-system:hover {
  color: #222;
}
.campaign-show p {
  margin-bottom: 16px;
}
.campaign-show .attribute-title {
  font-weight: bold;
}
.main-section {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.campaigns-campaign-table {
  width: 100%;
}
.campaigns-campaign-table th {
  font-weight: bold;
  cursor: default;
}
.campaigns-campaign-table th,
.campaigns-campaign-table td {
  border-right: 1px dotted #bdbdbd;
  border-bottom: 1px dotted #bdbdbd;
  padding: 15px;
}
.campaigns-campaign-table th:last-child,
.campaigns-campaign-table td:last-child {
  border-right: none;
}
.campaigns-campaign-table tr.selected td {
  background-color: #78909c;
  color: #eee;
}
.campaigns-campaign-table .name {
  width: 350px;
}
.campaigns-campaign-table .booked {
  width: 200px;
}
.campaigns-campaign-table .sov {
  width: 100px;
}
.campaigns-campaign-table .content {
  width: 80px;
  text-align: center;
}
.campaigns-campaign-table .clickable_td hover {
  cursor: pointer;
}
.circuit-edit form {
  padding: 16px 12px;
}
.circuit-item {
  height: 48px;
  -ms-flex-line-pack: center;
      align-content: center;
}
.circuit-item p {
  font-style: italic;
}
.circuit-item .item-span {
  float: left;
}
.circuit-item .icon-span {
  float: right;
  vertical-align: middle;
  line-height: 48px;
}
.attribute-list {
  background: #fff;
  color: #222;
}
.attribute-list .title {
  line-height: 30px;
  padding: 16px 12px;
}
.attribute-list .delimiter {
  margin-bottom: 16px;
}
.attribute-list .attribute-area li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 8px 12px;
  word-wrap: break-word;
}
.attribute-list .attribute-area li .attribute-title {
  color: #757575;
  font-size: 0.8em;
  text-transform: uppercase;
  width: 40%;
}
.attribute-list .attribute-area li .attribute-value {
  padding-left: 12px;
  font-weight: bold;
  display: block;
  white-space: pre-wrap;
  width: 60%;
}
.attribute-list .attribute-area li:nth-child(odd) {
  background-color: #e6e6e6;
}
.attribute-list .attribute-area li:last-child {
  border-bottom: 1px solid #bdbdbd;
}
.common-button-panel {
  display: -ms-flex;
  display: -moz-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 16px 12px;
  -ms-box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
}
.common-button-panel b {
  line-height: 51px;
  margin-right: 12px;
}
/**
 * Bryt ut knappar i mixins?
 * Blir jobbigt att override:a default
 * var gång det ska till en knapptyp som skiljer sig.
 */
button,
.button {
  -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
          box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
  -webkit-box-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  -webkit-box-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  flex: 1 1 auto;
  background-color: #78909c;
  border: 1px solid #557585;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  color: #eee;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 0.75rem;
  font-weight: bold;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  letter-spacing: normal;
  line-height: 1;
  padding: 0.75rem;
  text-align: center;
  text-transform: uppercase;
  -webkit-transition: opacity 200ms ease, box-shadow 200ms ease, background 100ms ease-out 0s, border-color 200ms ease 0s;
  -webkit-transition: opacity 200ms ease, background 100ms ease-out 0s, border-color 200ms ease 0s, -webkit-box-shadow 200ms ease;
  transition: opacity 200ms ease, background 100ms ease-out 0s, border-color 200ms ease 0s, -webkit-box-shadow 200ms ease;
  transition: opacity 200ms ease, box-shadow 200ms ease, background 100ms ease-out 0s, border-color 200ms ease 0s;
  transition: opacity 200ms ease, box-shadow 200ms ease, background 100ms ease-out 0s, border-color 200ms ease 0s, -webkit-box-shadow 200ms ease;
  width: 100%;
}
button[disabled],
.button[disabled] {
  -webkit-box-shadow: none;
          box-shadow: none;
  cursor: not-allowed;
  opacity: 0.7;
  pointer-events: none;
  -webkit-touch-callout: none /* iOS Safari */;
  -webkit-user-select: none; /* Chrome/Safari/Opera */ /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently not supported by any browser */
}
@media (min-width: 601px) {
  button,
  .button {
    font-size: 1rem;
    padding: 1rem;
  }
}
button:hover,
.button:hover {
  background-color: #557585;
  border-color: #365c6e;
}
button:active,
.button:active {
  -webkit-box-shadow: none;
          box-shadow: none;
  background: #365c6e;
  outline: none;
}
.button--success {
  background-color: #4caf50;
  border-color: #2d9434;
}
.button--success:hover {
  background-color: #2d9434;
  border-color: #15781b;
}
.button--success:active {
  background: #15781b;
}
.button--danger {
  background-color: #d32f2f;
  border-color: #ac1616;
}
.button--danger:hover {
  background-color: #ac1616;
  border-color: #850000;
}
.button--danger:active {
  background: #850000;
}
.button--warning {
  background-color: #f08c00;
  border-color: #eed202;
  color: #222;
  width: auto;
}
.button--warning:hover {
  background-color: #eed202;
  border-color: #ccb402;
}
.button--warning:active {
  background: #ccb402;
}
.button--secondary {
  background-color: #999;
  border-color: #777;
  width: auto;
}
.button--secondary:hover {
  background-color: #777;
  border-color: #555;
}
.button--secondary:active {
  background: #555;
}
.button--small {
  font-size: 0.875rem;
  padding: 0.75rem;
  letter-spacing: 1px;
}
.button__icon {
  font-size: 0.75rem;
  line-height: 1;
  margin-top: -1px;
}
@media (min-width: 601px) {
  .button__icon {
    font-size: 1rem;
  }
}
.button__text {
  -webkit-box-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  flex: 1 1 auto;
  text-align: center;
  padding: 0 0.75rem;
}
.button--icon {
  -webkit-box-shadow: none;
          box-shadow: none;
  background: transparent;
  border-color: transparent;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  padding: 0.5rem;
  width: auto;
}
.button--icon:hover {
  -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
          box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
  border-color: transparent;
  background-color: #eee;
  color: #78909c;
}
.button--icon:active,
.button--icon:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
  background-color: rgba(238,238,238,0.5);
  color: #78909c;
}
/**
 * Inte optimalt, men enda utvägen atm.
 */
.button--icon.button--success:hover,
.button--icon.button--success:active,
.button--icon.button--success:focus {
  color: #4caf50;
}
.button--icon.button--danger:hover,
.button--icon.button--danger:active,
.button--icon.button--danger:focus {
  color: #d32f2f;
}
.button--icon.button--warning:hover,
.button--icon.button--warning:active,
.button--icon.button--warning:focus {
  color: #222;
}
.button--icon.button--secondary:hover,
.button--icon.button--secondary:active,
.button--icon.button--secondary:focus {
  color: #999;
}
/**
 * Använd ej, kommer eventuellt tas bort och ersättas med annat.
 * Används bara i loginvyn idag.
 */
.button--link {
  -webkit-box-shadow: none;
          box-shadow: none;
  background: transparent;
  border-color: transparent;
  border-bottom-color: #78909c;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  color: #78909c;
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.75rem;
  padding: 0.25rem;
}
.button--link:hover {
  background: transparent;
  border-color: #557585;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  color: #557585;
}
.button--link:active {
  background: transparent;
  border-color: transparent;
  color: #365c6e;
}
.button-list {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: transparent;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: absolute !important;
  overflow-y: hidden;
  padding: 16px 0;
  bottom: 0;
  width: 100%;
  margin: 0 auto;
}
.button-list.button-list--unfixed {
/**
     * Looking forward to the day this is removed and buttons don't need position: fixed.
     */
  position: static !important;
}
.button-list__button {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin: 0 0.25rem;
}
.button-list__button:first-child {
  margin-left: 0.5rem;
}
.button-list__button:last-child {
  margin-right: 0.5rem;
}
.common-form .common-checkbox,
.common-folder .common-checkbox {
  margin-bottom: 16px;
  z-index: 0;
}
.common-form .common-checkbox label,
.common-folder .common-checkbox label {
  position: absolute;
  right: 12px;
  top: 16px;
}
.common-form .common-checkbox-w,
.common-folder .common-checkbox-w {
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border: 1px solid #bdbdbd;
  border-radius: 50px;
  height: 32px;
  position: relative;
  width: 80px;
  cursor: pointer;
}
.common-form .common-checkbox-w::after,
.common-folder .common-checkbox-w::after,
.common-form .common-checkbox-w::before,
.common-folder .common-checkbox-w::before {
  font-size: 16px;
  font-weight: bold;
  line-height: 29px;
  text-align: center;
  width: 50%;
  position: absolute;
  z-index: 0;
}
.common-form .common-checkbox-w:after,
.common-folder .common-checkbox-w:after {
  content: '✖';
  right: 0;
}
.common-form .common-checkbox-w:before,
.common-folder .common-checkbox-w:before {
  content: "✔";
  left: 0;
}
.common-form .common-checkbox-w label,
.common-folder .common-checkbox-w label {
  -moz-border-radius: 50px;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-border-radius: 50px;
  -webkit-transition: left 0.3s ease;
  background: #757575;
  border-radius: 50px;
  cursor: pointer;
  display: block;
  height: 24px;
  left: 3px;
  position: absolute;
  top: 3px !important;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  width: 34px;
  z-index: 1;
}
.common-form .common-checkbox-w input,
.common-folder .common-checkbox-w input {
  display: none;
}
.common-form .common-checkbox-w input + label,
.common-folder .common-checkbox-w input + label {
  background: #222;
}
.common-form .disabled input + label,
.common-folder .disabled input + label {
  background: #bdbdbd;
}
.common-form .common-checkbox-w input:checked + label,
.common-folder .common-checkbox-w input:checked + label {
  background: #78909c;
  left: 41px;
}
.common-form .common-checkbox-w input:checked + label,
.common-folder .common-checkbox-w input:checked + label {
  background: #78909c;
  left: 41px;
}
.common-form .disabled input:checked + label,
.common-folder .disabled input:checked + label {
  background: #bdbdbd;
  left: 41px;
}
.common-form .common-checkbox-status,
.common-folder .common-checkbox-status {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  float: right;
  padding: 0 0.5rem;
  font-size: 14px;
  line-height: 2rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.common-form .common-radio input:checked + label,
.common-folder .common-radio input:checked + label {
  background: #222;
}
.common-form .separator .common-checkbox,
.common-folder .separator .common-checkbox {
  position: absolute !important;
  right: 12px;
  top: 6px;
}
.common-form .separator .common-checkbox-w,
.common-folder .separator .common-checkbox-w {
  border-color: #bdbdbd;
  background-color: #fff;
  height: 19px;
  width: 70px;
  margin: 0;
}
.common-form .separator .common-checkbox-w .common-checkbox-status,
.common-folder .separator .common-checkbox-w .common-checkbox-status {
  display: none;
}
.common-form .separator .common-checkbox-w label,
.common-folder .separator .common-checkbox-w label {
  background: #222 !important;
  height: 13px;
  left: 2px;
  top: 2px !important;
  position: absolute;
}
.common-form .separator .common-checkbox-w:before,
.common-folder .separator .common-checkbox-w:before,
.common-form .separator .common-checkbox-w:after,
.common-folder .separator .common-checkbox-w:after {
  color: #616161;
  content: 'c';
  font-family: 'ui-icons';
  line-height: 17px;
  font-size: 18px;
  text-transform: none;
}
.common-form .separator .common-checkbox-w:before,
.common-folder .separator .common-checkbox-w:before {
  color: #222;
}
.common-form .separator .common-checkbox-w input:checked + label,
.common-folder .separator .common-checkbox-w input:checked + label {
  left: 32px;
}
.common-file-upload-info {
  bottom: 8px;
  position: fixed;
  left: 8px;
  z-index: 3;
/** Prevent text selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.common-file-upload-info > ul[data-yield=uploads] {
  background: rgba(0,0,0,0);
  border: none;
  border-radius-top-left: 7px;
  border-radius-top-right: 7px;
  color: #e1e1e1;
  height: 36px;
  overflow-x: hidden;
  padding: 1px 0.5em 0 0.5em;
  width: 100%;
  z-index: 5000;
}
.common-file-upload-info > ul[data-yield=uploads] > li {
  background: #000;
  border: none;
  border-radius: 5px;
  -webkit-box-shadow: #545454 0 1px 1px, #2b2b2b 0 2px 3px 1px inset;
          box-shadow: #545454 0 1px 1px, #2b2b2b 0 2px 3px 1px inset;
  color: #ddd;
  display: inline-block;
  margin: 2px 3px;
  padding: 4px;
  white-space: nowrap;
  width: auto !important;
}
.common-file-upload-info > ul[data-yield=uploads] > li > div {
  display: inline-block;
}
.common-file-upload-info > ul[data-yield=uploads] > li .uploadprogress {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  color: #ddd !important;
  height: auto !important;
  margin-right: 8px !important;
  overflow: visible !important;
}
.common-file-upload-info > ul[data-yield=uploads] > li .uploadprogress > .label {
  color: #ddd !important;
  font-size: 16px !important;
}
.common-file-upload-info > ul[data-yield=uploads] > li .uploadprogress > .ui-progressbar-value {
  display: none !important;
}
.common-file-upload-info > ul[data-yield=uploads] > li .cancel-button {
  border: #ddd;
}
.common-file-upload-info > ul[data-yield=uploads] > li .cancel-button:hover {
  cursor: pointer;
}
.common-file-upload-info > ul[data-yield=uploads] > li .cancel-button > i {
  font-size: 70%;
}
.common-file-upload-info > ul[data-yield=uploads] > li:first-of-type {
  margin-left: 0;
}
.confirm-panel {
  position: relative !important;
}
.confirm-panel .button-list {
  position: relative !important;
}
.common-date-picker .common-link.active ~ input {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAJElEQVQImT2JsQ0AMAyDyP/X2Q+RIWqZEJDEx6gA0JZr9/mmLuGvJ7Ou3vGeAAAAAElFTkSuQmCC") !important;
}
.common-date-picker a {
  line-height: 20px;
  top: 0 !important;
  width: 100%;
  height: 100%;
}
.common-date-picker a i {
  position: relative;
  top: 14px !important;
  float: right;
}
.common-date-picker-calendar {
  width: 320px;
  padding: 12px;
  padding-top: 24px;
  position: relative;
}
.common-date-picker-calendar h2 {
  font-size: 18px;
  margin-bottom: 16px;
  text-align: center;
  text-transform: capitalize;
}
.common-date-picker-calendar table {
  width: 100%;
}
.common-date-picker-calendar td,
.common-date-picker-calendar th {
  text-align: center;
  width: 320px/7;
}
.common-date-picker-calendar th {
  font-size: 15px;
  font-weight: normal;
  text-transform: uppercase;
  border-bottom: 1px solid #bdbdbd;
}
.common-date-picker-calendar td {
  padding: 12px 0;
  cursor: context-menu;
  border-radius: 5px;
}
.common-date-picker-calendar td.selectable {
  cursor: pointer !important;
}
.common-date-picker-calendar td.selectable:hover {
  color: #eee;
  background: #78909c;
}
.common-date-picker-calendar td.selected {
  color: #eee;
  background-color: #222;
}
.common-date-picker-calendar a {
  height: 26px;
  position: absolute;
  top: 23px;
  width: 26px;
  cursor: pointer;
}
.common-date-picker-calendar a i {
  color: #78909c !important;
  font-size: 22px;
}
.common-date-picker-calendar a:first-of-type {
  left: 16px;
}
.common-date-picker-calendar a:last-of-type {
  right: 16px;
}
.common-date-picker-calendar a:last-of-type i {
  left: 2px;
}
.demo-icons .demo-icon:nth-child(odd) {
  background: #e6e6e6;
}
.common-duration-edit {
  display: -ms-flex;
  display: -moz-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
}
.common-duration-edit input {
  width: auto;
}
.common-duration-edit span {
  line-height: 51px;
  margin: 0 6px;
}
.enhanced-select {
  display: inline-block !important;
  margin-right: 16px;
  position: relative;
  cursor: pointer;
  text-align: left;
}
.enhanced-select .title {
  font-size: 12px;
  margin-right: 4px;
}
.enhanced-select .select-arrow {
  position: absolute;
  bottom: 4px;
}
.enhanced-select i {
  display: block;
  text-align: center;
}
.enhanced-select .select-box {
  position: absolute;
  list-style-type: none;
  background: #fff;
  border: 1px solid #bdbdbd;
  border-radius: 1px;
  bottom: 80%;
  display: block;
  z-index: 1000;
  padding: 8px 0 8px 0;
  color: #222;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
          box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
  min-width: 200px;
}
@media (min-width: 601px) {
  .enhanced-select .select-box {
    bottom: auto;
    top: 80%;
  }
}
.enhanced-select .select-box hr {
  border: 0;
  border-top: 1px solid #bdbdbd;
}
.enhanced-select .select-box li:hover {
  background: #ccc;
}
.enhanced-select .select-box .disabled {
  background-color: #555 !important;
  font-size: 12px !important;
  cursor: default;
  color: #aaa;
}
.enhanced-select .select-box li {
  cursor: pointer;
  line-height: 1.5em;
  white-space: nowrap;
  padding: 0;
}
.enhanced-select .select-box p {
  line-height: 1.5em;
  padding: 0 8px 4px 8px;
}
.enhanced-select .select-box .check {
  display: inline-block;
  height: 16px;
  float: left;
  width: 24px;
  padding: 0 6px;
}
.enhanced-select .select-box .check i {
  color: #757575;
  font-size: 1em;
}
.enhanced-select .select-box .active {
  background-color: #e6e6e6;
}
/**
 * Re-do and re-name CSS for error-view, UI.Errors, etc,
 * and make it all one block, with modifiers for
 * error, warning, etc.
 */
.panel {
  background-color: #78909c;
  border-bottom: 1px solid #557585;
  border-top: 1px solid #557585;
  bottom: 81px;
  color: #eee;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 14px;
  padding: 0.5rem 0.75rem 1rem;
  width: 100%;
  z-index: 2;
}
.panel--error {
  background-color: #d32f2f;
  border-bottom: 1px solid #ac1616;
  border-top: 1px solid #ac1616;
}
.panel--warning {
  background-color: #f08c00;
  border-bottom: 1px solid #eed202;
  border-top: 1px solid #eed202;
  color: #222;
}
.panel--secondary {
  background-color: #999;
  border-bottom: 1px solid #777;
  border-top: 1px solid #777;
}
.panel--no-bottom-margin {
  margin-bottom: 0;
  bottom: 0;
}
.panel__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-bottom: 0.5rem;
}
.panel__title {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  font-weight: bold;
  padding: 0.5rem;
}
.panel__body {
  padding: 0 1rem;
}
.panel__list {
/*
   * UL needs to counteract the padding, due to the bullets.
   */
  margin-left: -1rem;
}
.panel__list-item {
  list-style-type: square;
  margin-left: 24px;
  padding: 0.25rem 0;
  position: relative;
}
.panel__list-item--withIcon {
/**
   * Don't display a built-in bullet if an icon is provided.
   */
  list-style-type: none;
}
.panel__list-item--withIcon::before {
  content: attr(data-content);
  font-family: 'ui-icons';
  font-size: 1.125rem;
  position: absolute;
  left: -1.5rem;
}
.common-filter form {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  border-bottom: 1px solid #bdbdbd;
  padding: 16px 12px;
  padding-bottom: 0;
}
.common-filter form:last-child {
  margin-bottom: 0;
}
.common-filter .sort-span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.common-filter .visible {
  visibility: visible !important;
}
.common-filter .cross-div {
  position: absolute;
  right: 0;
  top: 0;
  max-width: 64px;
  padding: 15px !important;
  padding-right: 8px !important;
  cursor: pointer;
  z-index: 1000;
  visibility: hidden;
  color: #616161;
}
.common-filter .cross-div :hover {
  color: #78909c !important;
}
.common-filter .bulk {
  background-color: inherit;
  color: #616161;
  font-size: 14px;
  line-height: 51px;
  padding: 0 12px;
  cursor: pointer;
}
.common-filtered-list {
  height: 100%;
}
.common-filtered-list > .common-link {
  background-color: #78909c;
  border-radius: 4px;
  color: #eee;
  font-weight: bold;
  line-height: 51px;
  text-align: center;
  text-transform: uppercase;
  vertical-align: center;
  -webkit-transition: background 100ms ease-out 0s;
  transition: background 100ms ease-out 0s;
}
.common-filtered-list > .common-link i {
  font-size: 85%;
  padding: 0 5px;
}
.common-filtered-list > .common-link:hover {
  color: #222;
  background-color: #557585;
}
.common-filtered-list .common-button-panel {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.common-filtered-list .common-button-panel button {
  max-width: 180px !important;
  margin: auto;
}
.common-filtered-list .common-filter {
  position: absolute;
  width: 100%;
  bottom: 81px;
  top: 0px;
  height: auto;
}
.common-filtered-list .show-upload {
  top: 230px !important;
}
.common-filtered-list .show-errors {
  top: 330px !important;
}
.common-filtered-list.no-add .common-filter {
  bottom: 6px;
}
.common-filtered-list > .common-link {
  bottom: 16px;
  left: 12px;
  position: absolute;
  right: 12px;
}
.common-list-empty {
  border-bottom: 1px solid #bdbdbd;
  font-size: 13px;
  line-height: 62px;
  text-align: center;
  text-transform: uppercase;
}
.common-flex {
  display: -ms-flex;
  display: -moz-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -ms-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
/**
   * While transitioning from Backbone/Handlebars to React/Redux,
   * some .hbs views are displayed in React components,
   * and have the wrong colour background.
   *
   * Remove those backgrounds.
   */
}
.common-flex .grow {
  -webkit-overflow-scrolling: touch;
  -webkit-box-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.common-flex .list-sort-description,
.common-flex .access_control-edit {
  background: transparent;
}
.common-folder.closed + .common-folder {
  margin-top: -10px;
}
/**
 * Common styles for all form controls.
 */
.common-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
/**
   * DIVs are used as containers for inputs and labels, so we use relative
   * positioning for them so things like select boxes and so on can position
   * their labels freely.
   */
}
.common-form .form-content {
  padding: 14px 10px 10px 10px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  overflow-y: auto;
}
.common-form div {
  position: relative;
}
.common-form input,
.common-form select,
.common-form textarea,
.common-form button {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-font-smoothing: antialiased;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  letter-spacing: -1px;
  position: relative;
}
.common-form input[disabled],
.common-form textarea[disabled],
.common-form button[disabled],
.common-form select[disabled] {
  -webkit-box-shadow: none;
          box-shadow: none;
  cursor: not-allowed;
  opacity: 0.7;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.common-form input[type="number"] {
  -moz-appearance: textfield;
}
.common-form input[type="number"]::-webkit-inner-spin-button,
.common-form input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
}
.common-form label {
  color: #757575;
  font-size: 13px;
  line-height: 19px;
  text-transform: uppercase;
  display: block;
}
.common-form input:not([type=radio]) + label,
.common-form select + label {
  position: absolute;
  right: 12px;
  top: 16px;
}
.common-form input:not([type=radio]):not([type=checkbox]):not([type=range]):not(.field-container-input),
.common-form textarea,
.common-form select {
  background-color: transparent;
  border-radius: 4px;
  color: inherit;
  font-family: inherit;
  font-size: 18px;
  margin-bottom: 16px;
/**
   * .875rem = 14px under normal circumstances. 
   */
  padding: 0.875rem;
  width: 100%;
  -webkit-transition: border-color 200ms ease, opacity 200ms ease;
  transition: border-color 200ms ease, opacity 200ms ease;
  display: block;
  border: 1px solid #bdbdbd;
}
.common-form input:not([type=radio]):not([type=checkbox]):not([type=range]):not(.field-container-input):hover,
.common-form textarea:hover,
.common-form select:hover {
  border-color: #222;
}
.common-form input:not(.field-container-input):focus,
.common-form textarea:focus,
.common-form select:focus {
  border: 2px solid #78909c;
  -webkit-transition: border-color 0ms ease;
  transition: border-color 0ms ease;
  outline: none;
}
.common-form textarea {
  height: 125px;
  line-height: 25px;
  padding-top: 12px;
  resize: vertical;
  width: 100%;
}
.common-form textarea:focus {
  padding-top: 11px;
}
.common-form .search_div {
  width: 100%;
}
.common-form .bulk {
  cursor: pointer;
}
.common-form .margin2px {
  margin-bottom: 2px;
}
.common-form .sort-select {
  max-width: 50%;
  line-height: 16px;
  height: 24px;
  font-weight: bold;
  padding: 4px 8px 4px 8px;
  border: none !important;
  background: url("select.png") no-repeat right center !important;
  cursor: pointer;
}
.common-form .sort-select option {
  font-size: 16px;
}
.common-form .sort-select option:not(:checked) {
  font-weight: normal;
}
.common-form .sort-select:focus {
  padding: 4px 8px 4px 8px !important;
}
.common-form select {
  background-color: inherit;
}
.common-form h5 {
  font-weight: bold;
  border-bottom: 1px solid #bdbdbd;
  margin-bottom: 16px;
}
.common-form .common-checkbox label {
  top: 6px;
  max-width: 60%;
}
.common-form .common-radio label {
  top: 6px;
}
.common-form .common-select label {
  top: 11px;
}
.common-form .separator {
  margin: 16px -12px;
}
.common-form .item-count {
  padding: 4px;
  text-align: center;
}
::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
  color: #b8b8b8;
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
  color: #b8b8b8;
  opacity: 1;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
  color: #b8b8b8;
  opacity: 1;
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
  color: #b8b8b8 !important;
}
.common-duration {
  border: 1px solid #bdbdbd;
  border-radius: 4px;
  height: 51px;
  padding: 0 12px;
  margin-bottom: 16px;
  font-size: 18px;
}
.common-duration .field-container {
  height: 100%;
  position: relative;
  display: inline-block;
}
.common-duration .field-container input {
  font-size: 18px;
  width: 30px;
  padding: 0 6px;
  height: 100%;
  display: inline-block;
  position: relative;
  -webkit-transition: background 100ms ease;
  transition: background 100ms ease;
  text-align: right;
  background: transparent;
}
.common-duration .field-container input:hover {
  background: #557585;
  color: #222;
}
.common-duration .field-container input:hover:not(:focus)::-webkit-input-placeholder {
  color: #222;
}
.common-duration .field-container input:focus {
  background: #78909c;
  color: #eee;
}
.common-duration .field-container .field-container-unit {
  position: relative;
  display: inline-block;
  color: #757575;
  font-size: 12px;
  cursor: context-menu;
}
.generic-picker-list .list-item.active {
  background-color: #4caf50 !important;
}
.generic-picker input {
  cursor: pointer;
}
.generic-picker i + label {
  position: absolute;
  right: 41px;
  top: 16px;
}
.generic-picker label {
  cursor: pointer;
  background: #fafafa;
  -webkit-box-shadow: -16px 0px 16px 0px #fafafa;
  box-shadow: -16px 0px 16px 0px #fafafa;
}
.generic-picker .clear {
  color: #222;
  cursor: pointer;
  padding: 0 12px;
  position: absolute;
  right: 0;
  top: 14px;
  background: #fafafa;
  margin-right: 1px;
}
.generic-picker .refresh-icon {
  float: left;
  padding: 0 12px;
  position: absolute;
  right: 0;
  top: 14px;
  line-height: line-height;
  width: line-height;
  height: line-height;
  text-align: center;
  -webkit-animation: spin 2s linear infinite;
          animation: spin 2s linear infinite;
}
.common-generic-radio {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: 1px solid #78909c;
  line-height: 0;
  border-radius: 4px;
  margin-bottom: 16px;
  cursor: pointer;
}
.common-generic-radio .checked {
  background-color: #78909c;
}
.common-generic-radio .checked label {
  color: #eee;
}
.common-generic-radio .radio-option {
  display: inline-block;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  height: 35px;
  overflow: hidden;
  text-align: center;
}
.common-generic-radio .radio-option:not(:first-child) {
  border-left: 1px solid #78909c;
}
.common-generic-radio .radio-option label {
  position: absolute;
  width: 100%;
  right: initial;
  top: 0;
  line-height: 35px;
}
.common-generic-radio .radio-option:checked {
  background-color: #78909c;
}
.common-generic-radio .radio-option input[type=radio] {
  width: 100%;
  height: 100%;
  display: none;
  padding: 0;
  margin: 0;
  line-height: 0;
}
.common-generic-radio .radio-option input[type=radio]:hover {
  background-color: #557585;
}
.common-generic-radio .radio-option input[type=radio]:hover + label {
  color: #222;
}
.common-generic-radio + label {
  position: initial;
}
/*
 * gråter
 */
.common-generic-radio-label {
  pointer-events: none;
}
.common-range {
  border-radius: 4px;
  border: 1px solid #bdbdbd;
  margin-bottom: 12px;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.common-range label {
  top: 38px !important;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.common-range .range {
  height: 24px;
  width: 100%;
  border-bottom: 1px solid #bdbdbd;
  position: relative;
}
.common-range .range label {
  position: absolute;
  top: 0 !important;
  line-height: 24px;
  color: #222;
}
.common-range .range .label-min {
  left: 16px;
}
.common-range .range .label-max {
  right: 16px;
}
.common-range .range .range-progress {
  height: 100%;
  width: 50%;
  background: #78909c;
  position: initial;
  -webkit-transition: width 50ms ease;
  transition: width 50ms ease;
}
.common-range input {
  border: none !important;
  margin: 0 !important;
}
.common-range input:focus {
  border: none !important;
}
.common-range[disabled] {
  opacity: 0.7;
  pointer: not-allowed;
  pointer-events: none;
}
.common-select label {
  background: #fafafa;
  -webkit-box-shadow: -16px 0px 16px 0px #fafafa;
          box-shadow: -16px 0px 16px 0px #fafafa;
}
select[disabled],
input[disabled],
textarea[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
}
.common-link {
  cursor: pointer;
}
.common-list-groups h5 {
  margin: 0;
}
.common-list {
  cursor: pointer;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.common-list .schedule-form {
  display: block;
}
.common-list .schedule-form .common-button-panel {
  position: relative !important;
}
.common-list .schedule-form .common-select {
  float: right;
  margin-left: 12px;
  width: 100%;
  margin-bottom: -16px;
}
.common-list .schedule-form .common-select label {
  top: 11px;
}
.common-list .campaign-item i {
  color: #757575;
}
.common-list ul .active {
  background: #757575 !important;
  color: #eee;
}
.common-list > ul > li {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  border-bottom: 1px solid #bdbdbd;
  line-height: 30px;
  min-height: 61px;
  padding: 16px 12px;
  position: relative;
}
.common-list > ul > li.bulk {
  padding-left: 60px;
}
.common-list > ul > li h2 {
  font-size: 16px;
  font-weight: bold;
  line-height: 28px;
  padding: 0;
}
.common-list > ul > li h3 {
  color: #757575;
  font-size: 12px;
  font-weight: normal;
  text-transform: uppercase;
}
.common-list > ul > li h3 i {
  font-size: 16px;
  margin-right: 6px;
}
.common-list > ul > li h4 {
  color: #757575;
  float: right;
  font-size: 15px;
  font-weight: normal;
  line-height: 28px;
  text-transform: uppercase;
}
.common-list.bulk {
  padding: 0 !important;
}
.common-list.bulk li.selected {
  background: #4caf50 !important;
  color: #eee;
  border-color: #2d9434;
}
.common-list.bulk li select {
  position: relative;
  top: 12px;
}
.common-list.bulk li input {
  float: left;
  position: relative;
  top: 4px;
  margin-right: 12px;
}
.common-list .edit-panel {
  cursor: auto;
  position: relative;
  padding: 0 16px 0 16px !important;
  background: #222;
  min-height: 50px;
  border-bottom: 1px solid #222;
}
.common-list .edit-panel input {
  position: relative;
  top: 17px !important;
}
.common-list .edit-panel > * {
  margin: 0;
}
.common-list .edit-panel .action-icon {
  cursor: pointer;
  line-height: 50px;
  float: right;
  color: #e0e0e0;
  margin-left: 16px;
}
.common-list .edit-panel .action-icon i {
  font-size: 200%;
}
.common-list .edit-panel .action-icon:hover i {
  color: #557585 !important;
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
.list-page {
  position: relative;
  padding-bottom: 83px;
}
.list-header {
  background: #fff;
  border-bottom: 1px solid #bdbdbd;
}
.list-header .list-header-content {
  padding: 16px 12px;
}
.list-header h2 {
  display: inline-block;
  color: #757575;
  padding: 0;
}
.list-header h1 {
  display: inline;
  line-height: initial;
  padding: 0;
}
.list-header h1 + h2 {
  padding: 0 12px;
}
.list-header .list-header-edit {
  color: #757575;
  float: right;
  cursor: pointer;
  margin-top: 8px;
  padding: 6px 6px 3px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-touch-callout: none /* iOS Safari */;
  -webkit-user-select: none; /* Chrome/Safari/Opera */ /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently not supported by any browser */
}
.list-header .list-header-edit:hover,
.list-header .list-header-edit:focus,
.list-header .list-header-edit:active {
  color: #222;
}
.list-header .list-edit-panel {
  position: relative;
  background: #222;
  min-height: 50px;
  border: 1px solid #222;
  color: #e0e0e0;
}
.list-header .list-edit-panel div {
  cursor: pointer;
  float: right;
  margin: 0 12px;
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
}
.list-header .list-edit-panel div i:not(.disabled):hover {
  color: #78909c;
}
.list-header .list-edit-panel .select-all {
  float: left;
}
.list-header .list-edit-panel .select-all input {
  cursor: pointer;
}
.list-container {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
}
.list-container .list-filter {
  margin: 16px 12px;
  margin-top: 0;
}
.list-container .searchbar {
  position: relative;
  width: 85%;
}
@media (min-width: 601px) {
  .list-container .searchbar {
    width: 90%;
  }
}
.list-container .searchbar input {
  background-color: transparent;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  color: inherit;
  font-family: inherit;
  font-size: 18px;
  margin-bottom: 16px;
/**
   * .875rem = 14px under normal circumstances. 
   */
  padding: 0.875rem;
  width: 100%;
  -webkit-transition: border-color 200ms ease, opacity 200ms ease;
  transition: border-color 200ms ease, opacity 200ms ease;
  display: block;
  border: 1px solid #bdbdbd;
}
.list-container .searchbar input:hover {
  border-color: #222;
}
.list-container .searchbar input:hover {
  border-color: #557585;
}
.list-container .searchbar input:focus {
  border-color: #365c6e;
}
.list-container .searchbar .visible {
  visibility: visible !important;
}
.list-container .searchbar .cross-div {
  position: absolute;
  right: 0;
  top: 0;
  padding: 15px 8px 15px 15px;
  cursor: pointer;
  visibility: hidden;
  color: #616161;
}
.list-container .searchbar .cross-div :hover {
  color: #78909c !important;
}
.list-container .buttons {
  position: relative !important;
}
.list-container .generic-list {
  overflow-y: auto;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  -moz-flex: 1;
  flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.list-container .select-box {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  left: -4px;
  font-size: 14px;
}
.list-container .select-box p {
  cursor: pointer;
}
.list-container .select-box hr {
  border-top: 1px solid #bdbdbd;
}
.list-container .refresh-icon {
  top: 50%;
  left: 50%;
  position: absolute;
  line-height: 30px;
  width: 30px;
  height: 30px;
  text-align: center;
  -webkit-animation: spin 2s linear infinite;
          animation: spin 2s linear infinite;
}
.list-container .empty {
  top: 50%;
  position: absolute;
  text-align: center;
  font-size: 0.8em;
  color: #757575;
  font-style: italic;
  font-weight: bold;
  height: auto !important;
  width: 100%;
}
.list-container .list {
  color: #222;
  background-color: #fafafa;
/**
     * Using margin-bottom to add a gutter works in all
     * browsers including OSX Safari, except IE10 (and, possibly, 11).
     *
     * Changing `margin` for `padding` works in all browsers
     * including IE10, except for OSX Safari.,
     */
  margin-bottom: 83px;
}
.list-container .list .list-item {
  border-bottom: 1px solid #bdbdbd;
  line-height: 30px;
  -webkit-transition: background ease 100ms, padding ease 50ms, opacity 200ms ease;
  transition: background ease 100ms, padding ease 50ms, opacity 200ms ease;
  position: relative;
  background-color: #fff;
  -webkit-touch-callout: none /* iOS Safari */;
  -webkit-user-select: none; /* Chrome/Safari/Opera */ /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently not supported by any browser */
  cursor: default;
}
.list-container .list .list-item .group-icon[data-content]:not([data-content=""]) {
  position: relative;
}
.list-container .list .list-item .group-icon[data-content]:not([data-content=""]):after {
  font-weight: bold;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10px;
  content: attr(data-content);
  background: #78909c;
  border: 2px solid #fff;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  color: #fff;
  line-height: 12px;
  padding: 0px 4px;
  position: absolute;
  left: 15px;
  top: 12px;
  text-align: right;
  -webkit-font-smoothing: subpixel-antialiased;
}
.list-container .list .list-item.interactable {
  cursor: pointer;
}
.list-container .list .list-item[disabled] {
  cursor: not-allowed;
  -webkit-touch-callout: none /* iOS Safari */;
  -webkit-user-select: none; /* Chrome/Safari/Opera */ /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently not supported by any browser */
  pointer-events: none;
  opacity: 0.7;
}
.list-container .list .list-item.unselectable:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
}
.list-container .list .list-item.active {
  background-color: #757575;
  color: #eee;
}
.list-container .list .list-item.selected {
  background-color: #4caf50;
  color: #eee;
}
.list-container .list .list-item.active.status-ok {
  background: none;
}
.list-container .list .list-item.active.status-warning {
  background: none;
}
.list-container .list .list-item.active.status-error {
  background: none;
}
.list-container .list .list-item.active.status-scheduledDown {
  background: none;
}
.list-container .list .list-item.active.status-none {
  background: none;
}
.list-container .list .list-item .status {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 6px;
  -webkit-transition: width ease 100ms, background ease 100ms;
  transition: width ease 100ms, background ease 100ms;
  background-color: #757575;
}
.list-container .list .list-item .status.status-ok {
  background-color: #4caf50;
}
.list-container .list .list-item .status.status-warning {
  background-color: #f08c00;
}
.list-container .list .list-item .status.status-error {
  background-color: #d32f2f;
}
.list-container .list .list-item .status.status-scheduledDown {
  background-color: #4f5b93;
}
.list-container .list .list-item .status.active {
  width: 100%;
  color: #eee;
}
.list-container .list .list-item.active .status + .list-item-content {
  color: #eee;
}
.list-container .list .list-item .description-icons {
  margin-left: 8px;
  top: 16px;
  position: absolute;
  right: 32px;
}
.list-container .list .list-item .description-icons i {
  padding: 8px;
  font-size: 32px;
}
.list-container .list .list-item .description-icons .inherited {
  color: #616161;
}
.list-container .list .list-item .description-icons i:not([data-content=""]):after {
  top: 21px;
}
.list-container .list .list-item .list-item-content {
  padding: 16px 12px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.list-container .list .list-item .list-item-content .list-item-icons > i {
  font-size: 18px;
  padding: 0 0.5rem;
}
.list-container .list .list-item .list-item-content .list-item-icon {
  -webkit-animation: none;
          animation: none;
  float: left;
  line-height: 30px;
  width: 30px;
  height: 30px;
  text-align: center;
}
.list-container .list .list-item .list-item-content .list-item-icon--loading {
  -webkit-animation: spin 2s linear infinite;
          animation: spin 2s linear infinite;
}
.list-container .list .list-item .list-item-content .list-item-text {
  display: inline-block;
  padding: 0 12px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.list-container .list .list-item .list-item-content .list-item-text .list-item-title {
  display: block;
  font-size: 16px;
  font-weight: bold;
  padding: 0;
}
.list-container .list .list-item .list-item-content .list-item-text .list-item-description {
  font-style: italic;
}
.list-container .list .list-item .list-item-content .arrow-icon {
  float: right;
}
.list-container .list .list-item .list-item-content .drag-handle {
  float: left;
  padding-right: 6px;
  cursor: grab;
  cursor: -webkit-grab;
  opacity: 0.5;
}
.list-container .list .list-item.dragover {
  padding: 16px 0;
  border: 1px solid #78909c;
  z-index: 10;
}
.list-container .list .list-item.lifted:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  z-index: 2;
}
.list-container .list .list-panel {
  line-height: 1.6;
/**
       * Justera och förbättra list-panel och sitlarna för den över tid.
       */
}
.list-container .list .list-panel strong {
  font-weight: bold;
}
.list-container .list .list-panel .list-panel-subtitle {
  font-size: 12px;
  border-bottom: 1px solid #bdbdbd;
  padding: 0.25rem 0;
  margin-bottom: 0.5rem;
}
.list-container .list .list-panel .list-panel-heading {
  padding: 0;
  font-weight: bold;
}
.list-container .list .list-panel .list-panel-body {
  font-size: 12px;
}
/**
 * Standalone list containers are lists that
 * don't extend to the width or height of the
 * pane, don't have the standard pane buttons
 * (and thus, no extra margin) and "float"
 * inside a pane.
 *
 * Override a few styles, then use some nesting
 * to deal with things. Bad practice, but
 * will have to do until list gets a revamp.
 */
.list-container--standalone {
  border: 1px solid #bdbdbd;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  overflow: hidden;
}
.list-container--standalone .list {
  margin-bottom: 0;
}
.list-container--standalone .list-item:last-child {
  border-bottom: none;
}
.list-container--shrink {
  height: auto;
}
/*div < .list-actions{
  padding-bottom: px-unit-alt + px-padding-vertical*2;
}*/
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}
@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}
.loading {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #777;
  overflow: hidden;
}
.loading__icon {
  -webkit-animation: spin 2s linear infinite;
          animation: spin 2s linear infinite;
  height: 2rem;
  line-height: 2rem;
  margin: 1.5rem 1.5rem 0.5rem;
  position: relative;
  text-align: center;
  width: 2rem;
}
.loading__icon i {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  line-height: 2rem;
}
.loading__title {
  margin: 0.5rem 1.5rem 1.5rem;
  text-align: center;
}
.common-picker,
.common-date-picker {
  position: relative;
}
.common-picker input,
.common-date-picker input {
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
  cursor: pointer;
}
.common-picker a,
.common-date-picker a {
  color: #222;
  cursor: pointer;
  font-size: 13px;
  padding: 0 12px;
  position: absolute;
  right: 0;
  top: 14px;
}
.common-picker a + label,
.common-date-picker a + label {
  margin-right: 24px;
  position: absolute;
  right: 12px;
  top: 16px;
}
.show {
  height: 100%;
/**
   * This is necessary because Safari doesn't understand 100% height of flex-grow'd parents.
   * Naturally, this means that ShowViews must be placed in ontainers with position: relative.
   */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
/**
   * This should be broken put into its own ImageWrapper-component.
   */
}
.show .screenshot {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: rgba(0,0,0,0.5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
}
.show .screenshot:hover {
  opacity: 1;
}
.show__header {
  background: #fff;
  border-bottom: 1px solid #bdbdbd;
}
.show__body {
  width: 100%;
}
.show__description {
  background: #fff;
  font-style: italic;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.time {
  border: 1px solid #bdbdbd;
  border-radius: 0.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 51px;
  padding: 0 12px;
  margin-bottom: 16px;
  font-size: 18px;
  -webkit-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
}
.time[disabled] {
  opacity: 0.7;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
  cursor: not-allowed;
}
.time .time__label {
  width: 40%;
  text-align: right;
  height: 100%;
  line-height: 51px;
}
.time .time__editor {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 60%;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.time .time__editor span {
  display: none;
}
.time .time__field {
  position: relative;
  display: inline-block;
  height: inherit;
  width: 2rem;
}
.time .time__field:not(:first-child)::before {
  content: ":";
  position: absolute;
  left: -0.125rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.time .time__input {
  font-size: fieldWidth;
  padding: 0 6px;
  display: inline-block;
  position: relative;
  -webkit-transition: background 100ms ease;
  transition: background 100ms ease;
  border: 0 !important;
  border-radius: inherit !important;
  text-align: center;
  background: transparent;
  padding: 0 !important;
  height: 100% !important;
  font-size: 21px !important;
}
.time .time__input:hover {
  background: #557585;
  color: #222;
}
.time .time__input:hover:not(:focus)::-webkit-input-placeholder {
  color: #222;
}
.time .time__input:focus {
  background: #78909c !important;
  color: #eee !important;
}
.timeline__event {
  border-left: 6px solid transparent;
}
.timeline__event--ok {
  border-color: #4caf50;
  color: #4caf50;
}
.timeline__event--info {
  border-color: #78909c;
  color: #78909c;
}
.timeline__event--unknown {
  border-color: #999;
  color: #999;
}
.timeline__event--error {
  border-color: #d32f2f;
  color: #d32f2f;
}
/**
 * Så här får en inte göra.
 */
.timeline__event .list-item-text {
  word-break: break-all;
}
.timeline__event .list-item-icons {
  word-break: keep-all;
  font-size: 0.75rem;
}
/**
 * File upload component,
 * currently used in Content Library / New Content.
 */
.upload-file {
  background-color: transparent;
  border-radius: 4px;
  color: inherit;
  font-family: inherit;
  font-size: 18px;
  margin-bottom: 16px;
/**
   * .875rem = 14px under normal circumstances. 
   */
  padding: 0.875rem;
  width: 100%;
  -webkit-transition: border-color 200ms ease, opacity 200ms ease;
  transition: border-color 200ms ease, opacity 200ms ease;
  display: block;
  border: 1px solid #bdbdbd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: auto;
  padding: 0.5rem;
}
.upload-file:hover {
  border-color: #222;
}
.upload-file__button {
  width: auto;
}
/**
 * In this case, use a label and the fact that it
 * gets a lot of styles from .commmon-form label.
 */
.upload-file__title {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  width: 100%;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  padding-right: 1rem;
  color: #757575;
  font-size: 13px;
  line-height: 19px;
  text-transform: uppercase;
}
/**
 * Since `common-form label` has a bunch of styles
 * we need to set a few styles here as well.
 *
 * These already exist in .button, and should be
 * applied by that, but they can't, because there are
 * styles applied on the label tag.
 *
 * Don't apply styles to tags.
 */
.upload-file__label {
  color: #eee;
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: normal;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}
@media (min-width: 601px) {
  .upload-file__label {
    font-size: 0.875rem;
  }
}
.common-upload-show {
  padding: 0.5em 1em;
/** Prevent text selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.common-upload-show i {
  color: #888;
}
.common-upload-show p {
  color: #888;
  font-size: 12px;
}
.common-upload-show span {
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  line-height: 30px;
  text-shadow: #000 0 1px;
  text-transform: uppercase;
}
.common-upload-show > .outerbox {
  padding: 0.5em 0;
  text-align: center;
}
.common-upload-show > .outerbox > .dropbox {
  background: #454647;
  background: -webkit-gradient(linear, left top, left bottom, from(#454647), to(#2b2c2c));
  background: linear-gradient(#454647, #2b2c2c); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #454647 0%, #2b2c2c 100%); /* IE10+ */
  border: none;
  border-radius: 5px;
  -webkit-box-shadow: #4f4f4f 0 1px 1px, #262626 0 2px 3px 1px inset;
          box-shadow: #4f4f4f 0 1px 1px, #262626 0 2px 3px 1px inset;
  color: #ddd;
  padding: 1.5em;
  position: relative;
}
.common-upload-show > .outerbox > .dropbox > span {
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  line-height: 30px;
  text-shadow: #000 0 1px;
  text-transform: uppercase;
}
.common-upload-show .row {
  display: block;
  clear: both;
  padding: 0.5em 0;
}
.common-upload-show .row > label {
  color: #888;
  clear: left;
  display: block;
  font-size: 12px;
  line-height: 24px;
  padding-top: 2px;
  text-transform: lowercase;
  width: 34%;
  height: 30px;
}
.common-upload-show .row .btn {
  border: none;
  border-radius: 5px;
  -webkit-box-shadow: #565656 0 -1px 0, #1c1c1c 0 2px 2px;
          box-shadow: #565656 0 -1px 0, #1c1c1c 0 2px 2px;
  background: -webkit-gradient(linear, left top, left bottom, from(#454647), to(#2b2c2c));
  background: linear-gradient(#454647, #2b2c2c); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #454647 0%, #2b2c2c 100%); /* IE10+ */
  display: block;
  float: right;
  font-size: 12px;
  font-weight: bold;
  margin: 0;
  padding: 0 8px;
  position: relative;
  text-align: center;
  text-shadow: #000 0 1px;
  text-transform: lowercase;
  width: 50%;
}
.common-upload-show .row .btn > input {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}
.common-upload-show > button[value=close] {
  width: 100%;
}
.view-toolbar {
  color: #757575;
  -webkit-transition: color 50ms ease;
  transition: color 50ms ease;
  position: relative;
}
.view-toolbar .view-toolbar-open {
  background: #78909c;
  padding: 16px 0;
}
.view-toolbar.active {
  color: #eee;
}
.view-toolbar.active .view-toolbar-open {
  height: initial;
}
.view-toolbar .view-toolbar-option {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
  padding: 8px 0;
/* this code centers the item if there is just one */
}
.view-toolbar .view-toolbar-option:only-child {
  display: block;
  margin: 0 auto;
}
.view-toolbar .view-toolbar-option:not(:only-child) {
  margin: 0 32px 0 32px;
}
.view-toolbar .view-toolbar-option i {
  display: block;
}
.view-toolbar .view-toolbar-option label {
  display: block;
  padding-top: 8px;
  font-size: 12px;
  cursor: pointer;
}
.view-toolbar .view-toolbar-option-item {
  width: 30%;
  color: #eee;
  -webkit-transition: background 100ms ease, color 50ms ease;
  transition: background 100ms ease, color 50ms ease;
}
.view-toolbar .view-toolbar-option-item:hover {
  background: #557585;
  color: #222;
}
.view-toolbar .view-toolbar-button-open {
  float: right;
  margin: 16px 12px;
}
.view-toolbar .view-toolbar-button-close {
  position: absolute;
  top: 16px;
  right: 12px;
}
.view-toolbar .view-toolbar-button {
  cursor: pointer;
  padding: 0;
}
.view-toolbar .view-toolbar-button:hover {
  color: #222;
}
/**
 * Content is a modifier on `.show`,
 * since `.show` is the root class applied
 * on the view.
 *
 * I.e. Both `content` and `player` are variations of the same.
 * component.
 *
 * With the current structure of things, this pattern is abused
 * with nested style rules and great divergence between
 * variants, which really should be replace by better
 * modularization of subcomponents.
 */
.show--content .image-wrapper {
  max-height: 418px;
  position: relative;
  cursor: "pointer";
  background: #000;
}
.show--content .image-wrapper--hide {
  display: none;
}
.show--content .image-wrapper img {
  margin: auto;
  display: block;
  max-height: 235px; /* This is the same aspect as 1920 x 1080. */
  max-width: 418px;
}
.ui-layouts-stack {
  background-color: #fff;
  height: 100%;
  overflow: hidden;
  position: relative;
/**
   * The views are stacked from left to right in an unordered list where
   * the most recently pushed view is the rightmost view.
   */
}
.ui-layouts-stack > ul {
  background-color: #444;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.ui-layouts-stack > ul > li {
  background-color: #fafafa;
  display: block;
  height: 100%;
  overflow-y: auto;
  position: absolute;
  z-index: 2;
/**
       * These clauses translate to:
       * Apply a shadow on the last pane in the stack,
       * unless that pane is the first or second one.
       *
       * The drawback is that first real pane won't get a shadow,
       * the benefit is that the shadow won't spill over onto the
       * main menu.
       *
       * Z-index juggling won't work, since that would slot the
       * last open pane beneath the others if the panes collapse over
       * one another. 
       */
}
.ui-layouts-stack > ul > li:first-child {
  z-index: 1;
}
@media (min-width: 601px) {
  .ui-layouts-stack > ul > li:first-child {
    z-index: 2;
  }
}
.ui-layouts-stack > ul > li:not(:first-child) {
  border-top: 1px solid #bdbdbd;
  border-right: 1px solid #bdbdbd;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
  height: calc(100% - 51px);
  top: 0;
}
@media (min-width: 601px) {
  .ui-layouts-stack > ul > li:not(:first-child) {
    top: auto;
    bottom: 0;
  }
}
.ui-layouts-stack > ul > li:last-child:not(:first-child) {
  border-top-right-radius: 0.25rem;
}
.ui-layouts-stack > ul > li:last-child:not(:nth-child(-n+2)) {
/**
        * Use a special shadow for this, to avoid it forming a top border.
        *
        * Bryt ut till temafil.
        */
  -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
          box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
.ui-layouts-stack > ul > li:nth-child(n+3) {
  border-left: 1px solid #bdbdbd;
}
.ui-layouts-stack > ul > li :not(:first-child):not(:last-child) {
  z-index: 2;
}
.ui-layouts-stack .settings {
  background-color: #fff;
  border: 1px solid #bdbdbd;
  border-top: none;
  border-right: none;
  position: absolute;
  right: 0;
  top: 61px;
}
.ui-layouts-stack .description {
  font-style: italic;
  padding: 16px 12px;
}
.ui-layouts-stack h1 + .description {
  padding: 16px 12px;
  padding-top: 0;
  word-wrap: break-word;
}
.layout-stack-pane {
  height: 100%;
}
.layout-stack-pane > div {
  height: 100%;
}
.ui-bottom {
  background-color: #fff;
  bottom: 61px;
  left: 0;
  padding: 12px;
  position: absolute;
  right: 6px;
  z-index: 1000;
}
.ui-primary-link {
  color: #eee;
  background-color: #78909c;
  display: block;
  font-size: 18px;
  font-weight: 700;
  height: 51px;
  letter-spacing: normal;
  line-height: 53px;
  text-align: center;
  text-transform: uppercase;
}
.top-menu {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: row-reverse;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
          flex-direction: row-reverse;
  -webkit-touch-callout: none; /* TODO: Place this in a mixin */
  background-color: #fff;
  border-top: 1px solid #222;
  bottom: 0;
  color: #777;
  cursor: default;
  height: 51px;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
          justify-content: space-between;
  line-height: 54px;
  padding: 0;
  position: absolute;
  right: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%;
  z-index: 3;
}
@media (min-width: 601px) {
  .top-menu {
    background-color: transparent;
    border: 0;
    bottom: auto;
    top: 0;
    width: 30%;
  }
}
@media (min-width: 901px) {
  .top-menu {
    width: 20%;
  }
}
@media (min-width: 1201px) {
  .top-menu {
    width: 15rem;
  }
}
.top-menu .select-box {
  background: #666;
  border: 1px solid #888;
}
@media (min-width: 601px) {
  .top-menu .select-box {
    right: -50%;
  }
}
.top-menu .select-box li {
  color: #eee;
  padding: 0;
}
.top-menu .select-box li:hover {
  background: #888;
}
.top-menu .select-box .description {
  font-size: 12px !important;
  cursor: default;
  color: #aaa;
}
.top-menu .lang-select {
  min-width: 64px;
  right: -150%;
}
.top-menu .lang-select img {
  top: 6px;
  position: relative;
}
.top-menu .lang-select .check {
  display: none;
}
.top-menu .lang-select .lang-img {
  margin-right: 4px;
}
.top-menu .lang-select li {
  padding: 4px 8px 4px 8px;
  font-size: 12px;
}
.top-menu .title {
  -ms-flex-grow: 1;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin: auto;
  display: block;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}
.top-menu a {
  cursor: pointer;
}
.top-menu a i {
  line-height: 52px;
}
.top-menu a[disabled] {
  opacity: 0.7;
  pointer-events: none;
}
.top-menu a[disabled] img {
  -webkit-filter: brightness(0.5);
  -moz-filter: brightness(0.5);
  -ms-filter: brightness(0.5);
  filter: brightness(0.5);
}
.top-menu i:hover {
  color: #aaa;
}
.top-menu .logotype-container {
  height: 100%;
  padding: 8px;
  margin-left: 8px;
  -ms-flex-line-pack: center;
  align-content: center;
  color: #9a9a9a;
  font-size: 12px;
}
.top-menu .logotype-container img {
  height: 100%;
  margin-right: 4px;
}
.top-menu .logotype-container-mobile {
  height: 75%;
  padding: 8px;
  margin-left: 8px;
  -ms-flex-line-pack: center;
  align-content: center;
  color: #9a9a9a;
  font-size: 12px;
}
.top-menu .logotype-container-mobile img {
  height: 100%;
  margin-right: 4px;
  display: block;
  margin-bottom: -20px;
}
.top-menu__item {
  -ms-flex-grow: 1;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  text-align: center;
}
.top-menu__item > * {
  height: 100%;
  margin: 0 auto;
}
.picker-list {
  cursor: pointer;
}
.picker-list > li {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  border-bottom: 1px solid #bdbdbd;
  line-height: 30px;
  min-height: 61px;
  padding: 16px 12px;
}
#player-map {
  min-width: 100%;
  min-height: 100%;
}
.player-map-info {
  text-align: center;
  padding: 50% 0;
}
/**
 * Content is a modifier on `.show`,
 * since `.show` is the root class applied
 * on the view.
 *
 * I.e. Both `content` and `player` are variations of the same.
 * component.
 *
 * With the current structure of things, this pattern is abused
 * with nested style rules and great divergence between
 * variants, which really should be replace by better
 * modularization of subcomponents.
 */
.show--player i.isOk {
  color: #4caf50;
}
.show--player i.hasErrors {
  color: #d32f2f;
}
.show--player i.hasWarnings {
  color: #f08c00;
}
.show--player i.isScheduledDown {
  color: #4f5b93;
}
.show--player .icon {
  padding-top: 18px !important;
}
.show--player .notifier > i:not([data-content=""]):after {
  border-color: #eee;
}
.show--player .generic-list {
  -webkit-box-flex: 1;
      -ms-flex: auto;
          flex: auto;
}
.show--player .image-wrapper {
  height: 274px;
  position: relative;
  cursor: "pointer";
  background: #78909c;
}
.show--player .image-wrapper img {
  margin: auto;
  display: block;
  position: absolute;
  max-height: 100%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.info-message {
  position: relative;
  height: 48px;
}
.info-icon {
  position: absolute;
  color: #78909c;
}
.text {
  position: absolute;
  left: 32px;
}
.d {
  padding-bottom: 16px;
}
.status-show .status-item {
  border-bottom: 1px solid #e0e0e0;
  clear: both;
  padding: 18px 10px;
}
.status-show h2 {
  display: inline;
  font-weight: bold;
}
.status-show .status-list-table {
  font-size: 9pt;
}
.status-show .status-list-table td {
  padding-left: 6px;
  vertical-align: top;
}
.status-show .status-list-table td:first-child {
  white-space: nowrap;
}
.status-show .status-list-invalid {
  text-decoration: line-through;
}
.status-show i {
  padding: 8px;
}
.status-show i.isOk {
  color: #4caf50;
}
.status-show i.hasErrors {
  color: #d32f2f;
}
.status-show i.hasWarnings {
  color: #f08c00;
}
.status-show i.isScheduledDown {
  color: #4f5b93;
}
.status-show .icon {
  padding-top: 18px !important;
}
.status-show .status-list > i:not([data-content=""]):after {
  border-color: #eee;
}
.playlist-item-edit .common-form {
  padding: 16px 12px;
  padding-bottom: 0;
}
.playlist-item-edit .common-submit {
  padding: 16px 12px;
}
.playlist-item h2 {
  display: inline;
  margin-left: 8px;
}
.playlist-item img {
  top: 6px;
  position: relative;
}
.playlist-item .info-icon {
  float: right;
  margin-left: 8px;
}
.status-threshold-edit .button--success {
  margin: 32px;
  width: 256px;
  padding-bottom: 28px;
  margin-left: 644px;
}
.status-threshold-edit .generic-input-label {
  left: 136px;
}
.status-threshold-edit font {
  padding: 4px;
  font-weight: bold;
}
.status-threshold-list {
  border-collapse: collapse;
}
.status-threshold-list input {
  margin-top: 16px;
}
.status-threshold-list td {
  height: 32px;
  padding: 4px;
}
.status-threshold-list tr:nth-child(even) {
  background-color: #e6e6e6;
}
.support-help {
  background-color: #f6f3e7;
  color: #2f3026;
  font-size: 16px;
}
.support-help .grow {
  overflow: auto;
}
.support-help pre {
  white-space: pre-wrap;
}
.support-help article {
  padding: 32px 12px;
}
.support-help ::-webkit-scrollbar-track-piece {
  background-color: #e0ddcf;
}
.support-help ::-webkit-scrollbar-thumb:vertical {
  background-color: #c4c1b1;
}
.support-help h1,
.support-help h2,
.support-help h3,
.support-help h4,
.support-help h5 {
  padding: 0;
  font-weight: bold;
}
.support-help h3 {
  border-bottom: 4px solid #ced3b4;
  display: inline-block;
  margin-bottom: 32px;
}
.support-help p {
  margin-bottom: 16px;
  text-align: justify;
}
.support-help strong {
  font-weight: bold;
}
.support-help em {
  font-style: italic;
}
.support-help ul {
  list-style-type: square;
  padding-bottom: 16px;
}
.support-help ul li {
  margin-left: 36px;
  margin-bottom: 6px;
}
.support-help :not(pre) > code {
  background-color: #d5d2c5;
  border-radius: 3px;
  border: 1px solid #ced3b4;
  padding: 1px 6px;
  margin: 0 2px;
  border-bottom-width: 2px;
}
.support-help pre {
  margin-bottom: 16px;
  font-family: Menlo, "Andale Mono", "Courier New", Courier;
}
.support-help blockquote {
  border-left: 4px solid #ced3b4;
  color: #545748;
  font-style: italic;
  margin-bottom: 16px;
  margin-left: 4px;
  padding-left: 6px;
}
.support-help i {
  font-family: inherit;
  font-size: 14px;
  font-style: italic;
  color: #545748;
}
.user-log-item {
  line-height: normal;
  background: #fff !important;
}
.user-log-item p {
  font-size: 14px;
}
.user-log-item .head {
  font-weight: bold;
  font-size: 16px;
}
.user-log-item .date {
  padding-bottom: 4px;
}
.user-log-list {
  overflow-y: hidden;
  background: #fff !important;
}
.user-log-list .common-list {
  cursor: auto !important;
}
.user-log-list .button-panel {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: -ms-flex;
  display: -moz-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 16px 12px;
  -ms-box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
}
.user-log-list .icons {
  margin: 24px;
}
.user-log-list .interval-icon {
  top: -14px;
  position: relative;
  margin-left: 12px;
}
.user-log-list .common-date-picker {
  float: none !important;
  padding: 16px 0px 0px 16px;
  cursor: pointer;
  color: #616161;
  display: inline-block;
}
.user-log-list .common-date-picker a i {
  color: #616161;
  top: -14px !important;
  float: none !important;
  margin: 30px;
}
.user-log-list .common-date-picker a i:hover {
  color: #222;
}
.user-log-list .common-date-picker input {
  font-size: 12px;
  text-align: center;
  width: 80px;
  outline: none;
  border: none;
  background: #fff;
}
.user-log-list .common-filter {
  top: 64px;
  bottom: 81px !important;
}
.user-log-list .select-box {
  background: #555;
  border: 1px solid #888;
  font-size: 14px;
  top: 90%;
  left: -30%;
  max-height: 75vh;
  overflow: auto;
  bottom: auto;
}
.user-log-list .select-box ul {
  overflow-x: hidden;
  width: 28em;
}
.user-log-list .select-box li {
  color: #eee;
}
.user-log-list .select-box li:hover {
  background: #888;
}
.user-log-list .select-box .active {
  color: #222;
}
.user-edit .common-errors {
  bottom: 0;
  position: relative !important;
}
.user-show .send-test-message {
  cursor: pointer;
  position: relative;
  float: right;
  margin-right: 12px;
  margin-top: 16px;
  color: #616161;
  font-size: 12px;
  text-align: center;
}
.user-show .send-test-message p {
  line-height: 10px;
  margin-bottom: 0;
}
.user-show .send-test-message:hover {
  color: #222;
}
.content-conflict > ul > li {
  border-top: 1px solid #dcdcdc;
  padding-bottom: 0.5em;
}
.content-conflict > ul > li:first-of-type {
  border-top: none;
}
.content-conflict > ul > li h2 {
  color: #dcdcdc;
  margin-bottom: 0.25em;
  margin-top: 0.25em;
  text-align: center;
}
.content-conflict > ul > li label {
  text-transform: uppercase;
}
.content-edit .base-form {
  padding: 0 0.5rem;
}
.content-edit input[name="_filename"] {
  width: 84%;
}
.content-edit .file_extension {
  float: right !important;
  padding-top: 0.25rem;
  font-weight: bold;
  font-size: 0.875rem;
  border: none !important;
  width: 14% !important;
}
.content-item {
  background: #fff;
}
.content-item h2,
.content-item h3,
.content-item p {
  padding-left: 20px;
}
.content-item div.duration {
  float: right;
  width: auto;
}
.addContent-item div {
  width: auto !important;
  height: auto !important;
  margin: 0 0 0 4px !important;
}
.addContent-item h2 {
  -webkit-font-smoothing: subpixel-antialiased !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  padding-left: 17px !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  word-wrap: normal !important;
  white-space: nowrap !important;
  -webkit-margin-before: 0em !important;
  -webkit-margin-after: 0em !important;
}
.addContent-item p {
  margin-bottom: 0 !important;
  padding-left: 38px !important;
}
.content-list {
  width: inherit;
}
.show--content .image-wrapper {
  height: 235px;
  position: relative;
  cursor: "pointer";
  background: #78909c;
}
.show--content .image-wrapper img {
  margin: auto;
  display: block;
  position: absolute;
  max-height: 100%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.data-feed-edit {
  padding: 10px;
}
.data-feed-edit .base-form {
  padding: 0 8px;
}
.data-feed-edit .base-form label {
  font-size: 1rem;
  font-weight: bold;
}
.data-feed-edit p {
  color: #000;
}
.dise-template-item {
  background: #fff;
}
.dise-template-item h2,
.dise-template-item h3,
.dise-template-item p {
  padding-left: 20px;
}
.hardware-edit {
  background-color: #4a4a4a;
  padding: 10px;
}
.hardware-edit .base-form {
  padding: 0 10px;
}
.hardware-item,
.hardwareport-item {
  background: #fff;
}
.hardware-item p,
.hardwareport-item p {
  line-height: 20px;
  padding: 0 42px;
  word-wrap: break-word;
}
.hardware-item p:nth-of-type(2),
.hardwareport-item p:nth-of-type(2) {
  padding-top: 18px;
}
.hardware-item p.first,
.hardwareport-item p.first {
  border-bottom: 1px solid #eee;
  padding-bottom: 1px;
  padding-top: 1px;
}
.hardware-item i,
.hardwareport-item i {
  color: #fd936d;
}
/**
 * In lieu of changing the component,
 * make hardware-show mimic AttributeList.
 */
.hardware-show {
  background: #fff;
}
.hardware-show .base-list .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 8px 12px;
  word-wrap: break-word;
}
.hardware-show .base-list .row p {
  padding-left: 12px;
  font-weight: bold;
  display: block;
  white-space: pre-wrap;
  width: 60%;
}
.hardware-show .base-list .row div {
  color: cl-dimmed-on-light;
  font-size: 0.8em;
  text-transform: uppercase;
  width: 40%;
}
.hardware-show .base-list .row:nth-child(odd) {
  background-color: #e6e6e6;
}
.screen-edit {
  cursor: default;
  padding: 10px;
}
.screen-edit .base-form {
  padding: 0 8px;
}
.screen-edit textarea {
  float: none !important;
  margin-bottom: 4px;
}
.screen-edit div.tab {
  display: none;
  padding: 2px 4px 4px 4px;
  border-radius: 5px;
}
.screen-edit div.select-pair {
  max-width: 100%;
  width: 100%;
}
.screen-edit div.select-pair > label,
.screen-edit div.select-pair > select {
  display: block !important;
  float: none !important;
  max-width: 100%;
  width: 100%;
}
.screen-edit input[type="number"]::-webkit-inner-spin-button,
.screen-edit input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.screen-item {
  background: #fff;
  text-align: left;
  white-space: nowrap;
}
.screen-item h2 {
  line-height: 20px;
}
/**
 * In lieu of changing the component,
 * make hardware-show mimic AttributeList.
 */
.screen-show {
  background: #fff;
/**
   * Mimic Player\show description
   */
}
.screen-show .comments {
  margin: 8px 0 8px 12px;
  font-style: italic;
  word-wrap: break-word;
  font-style: italic;
  padding: 16px 12px;
}
.screen-show .attr-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 8px 12px;
  word-wrap: break-word;
}
.screen-show .attr-row div {
  color: cl-dimmed-on-light;
  font-size: 0.8em;
  text-transform: uppercase;
  width: 40%;
}
.screen-show .attr-row p {
  padding-left: 12px;
  font-weight: bold;
  display: block;
  white-space: pre-wrap;
  width: 60%;
}
.screen-show .attr-row:nth-child(odd) {
  background-color: #e6e6e6;
}
.layouts-application {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  height: 100%;
/*margin: auto;*/
  overflow: hidden;
  position: relative;
  min-width: 320px;
  width: 100%;
/** All top-level views are wrapped in a content section with a header */
}
.layouts-application > menu {
  color: #e1e1e1;
  margin: 0;
  padding-left: 16px;
  -webkit-margin-before: 0.8em;
  -webkit-margin-after: 0.4em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 16px;
}
.layouts-application .layouts-wrapper {
  background-color: #ebeedc;
  -webkit-box-shadow: rgba(0,0,0,0.12) -9px 0 9px;
          box-shadow: rgba(0,0,0,0.12) -9px 0 9px;
  color: #3f3f3f;
  display: inline-block;
  height: 100%;
  left: 720px; /*left: 440px;*/
  min-width: 320px;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-bottom: 45px;
  position: absolute;
/*transition-duration: .5s;
    -webkit-transition-duration: .5s;
    transition-property: left;
    -moz-transition-property: left;
    -webkit-transition-property: left;
    -o-transition-property: left;       */
  z-index: 10;
  -webkit-transform: translateZ(0);
/** Contains the toolbar with navigation and title */
/** During dragging we don't want CSS transitions */
/** The first view in the layout is the menu, styled a little different. (TEMP) */
}
.layouts-application .layouts-wrapper > header {
  background: #b9b9b9;
  background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#959595));
  background: linear-gradient(#b9b9b9, #959595); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #b9b9b9 0%, #959595 100%); /* IE10+ */
/*cursor: pointer;*/
  min-height: 45px;
  line-height: 45px;
  padding: 0 12px;
/** Prevent text selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.layouts-application .layouts-wrapper > header i {
  font-size: 16px;
}
.layouts-application .layouts-wrapper > header span {
  font-weight: bold;
  display: block;
  position: absolute;
  text-align: center;
  top: 0px;
  left: 40px;
  right: 40px;
}
.layouts-application .layouts-wrapper > header i,
.layouts-application .layouts-wrapper > header span {
  color: #f4f2e2;
}
.layouts-application .layouts-wrapper > header a[data-action="back"] {
  cursor: pointer;
  display: inline-block;
  padding: 0 1em;
}
.layouts-application .layouts-wrapper > header div.base-help-symbol {
  text-align: right;
}
.layouts-application .layouts-wrapper > header div.base-help-symbol > i {
  color: #f4f2e2;
}
.layouts-application .layouts-wrapper section[data-yield="content"] {
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
/*overflow-y: scroll;
      -moz-margin-end: -17px;*/
  padding-bottom: 42px;
  outline-width: 0px;
}
.layouts-application .layouts-wrapper section[data-yield="content"] .base-listshow,
.layouts-application .layouts-wrapper section[data-yield="content"] .base-show {
  margin-bottom: 42px;
}
.layouts-application .layouts-wrapper section[data-yield="content"] .base-show .image-wrapper {
  text-align: center;
}
.layouts-application .layouts-wrapper section[data-yield="content"] .base-show > p {
  padding: 7px 12px;
  word-break: break-all;
}
.layouts-application .layouts-wrapper.dragging {
  -webkit-transition-property: none;
  transition-property: none;
}
.layouts-application .layouts-wrapper:first-of-type {
  color: #fff;
  background: #1e1e1e;
  -webkit-box-shadow: none;
          box-shadow: none;
  padding-bottom: 0;
}
.layouts-application .layouts-wrapper:first-of-type header {
  display: none;
}
.layouts-application .layouts-wrapper:first-of-type .filler {
  display: none;
}
/*@media screen and (min-width:0\0) {
  * IE9 and IE10 rule sets go here *
  .menu-show ul,
  section[data-yield="content"] {
    overflow-y: scroll !important;
    margin-right: -17px !important;
  }
}*/
.login-container {
  text-align: center;
  width: 100%;
  height: 100%;
  background: #222;
  background-size: cover;
  overflow: auto;
}
.login__heading {
  color: #666;
  text-align: center;
  padding: 0 0 1rem;
}
.login-wrapper {
  display: inline-block;
  height: auto;
  min-height: 100%;
  margin: 0 auto;
  position: relative;
  width: 100%;
  padding: 0 0 4rem;
}
@media (min-width: 601px) {
  .login-wrapper {
    width: 50%;
    padding-bottom: 8rem;
  }
}
@media (min-width: 901px) {
  .login-wrapper {
    width: 35%;
    padding-bottom: 6rem;
  }
}
@media (min-width: 1201px) {
  .login-wrapper {
    width: 25%;
  }
}
@media (min-width: 1801px) {
  .login-wrapper {
    padding-bottom: 8rem;
    width: 320px;
  }
}
.login-wrapper .login__header {
  padding: 4rem 0;
  text-align: center;
}
@media (min-width: 601px) {
  .login-wrapper .login__header {
    padding: 8rem 0;
  }
  .login-wrapper .login__header img {
    min-height: 3rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }
}
@media (min-width: 901px) {
  .login-wrapper .login__header {
    padding: 6rem 0;
  }
}
@media (min-width: 1801px) {
  .login-wrapper .login__header {
    padding: 8rem 0;
  }
}
.login-wrapper .login__form {
  -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
          box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
  background: rgba(255,255,255,0.95);
  color: #444;
  padding: 2rem;
  border-radius: 0.25rem;
  display: block;
  text-align: left;
  margin: 0 auto;
}
.login-wrapper .login__form::after {
  content: "";
  background: transparent url("/assets/powered_by_dise/Powered by DISE light.png") no-repeat center;
  position: absolute;
  left: 0;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  width: 100%;
  height: 3rem;
}
.login-wrapper .login__field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 auto 1rem;
}
.login-wrapper .login__field--checkbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  margin: 0 auto 1rem;
}
.login-wrapper .login__label {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  text-transform: uppercase;
  font-size: 0.75rem;
  padding-top: 0.25rem;
  -webkit-transition: font-size 200ms ease;
  transition: font-size 200ms ease;
}
.login-wrapper .login__label--shrink {
  color: #365c6e;
  font-size: 0.625rem;
}
.login-wrapper .login__input {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  text-align: right;
}
.login-wrapper .login__input input {
  border: 0;
  border-bottom: 1px solid #78909c;
  background-color: transparent;
  border-radius: 0;
  font-size: 1rem;
  padding: 0.25rem 0 0.5rem;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: scale(1, 0.8);
          transform: scale(1, 0.8);
  -webkit-transition: background 200ms ease, border 200ms ease, -webkit-box-shadow 200ms ease, -webkit-transform 200ms ease;
  transition: background 200ms ease, border 200ms ease, -webkit-box-shadow 200ms ease, -webkit-transform 200ms ease;
  transition: background 200ms ease, border 200ms ease, box-shadow 200ms ease, transform 200ms ease;
  transition: background 200ms ease, border 200ms ease, box-shadow 200ms ease, transform 200ms ease, -webkit-box-shadow 200ms ease, -webkit-transform 200ms ease;
  width: 100%;
}
.login-wrapper .login__input input:focus {
  border-color: #365c6e;
  color: #365c6e;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.login-wrapper .login__input--expand input {
  border-color: #365c6e;
  color: #365c6e;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.login-wrapper .login__checkbox {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  text-align: left;
  padding-top: 0.25rem;
  padding-left: 1rem;
}
.login-wrapper .login__control-panel {
  padding: 2rem 0 0;
}
@media (min-width: 601px) {
  .login-wrapper .login__control-panel {
    padding: 2rem 2rem 0;
  }
}
@media (min-width: 1801px) {
  .login-wrapper .login__control-panel {
    padding: 1rem 1rem 0;
  }
}
#login-error {
  border-bottom: 1px solid #ccc;
  color: #d32f2f;
  padding-bottom: 2rem;
  margin-bottom: 1rem;
  text-align: center;
}
.log-export {
  background-color: #fff;
  cursor: default;
  margin-bottom: 2px;
  padding: 10px 10px 1px 10px;
}
.log-export .base-form {
  padding: 0 8px;
}
.log-export .base-form p {
  color: #222;
  margin-bottom: 5px;
}
.log-export .base-form select {
  font-size: 70%;
  margin-bottom: 10px;
  padding: 0 2px;
}
.log-item {
  background: #fff;
  text-align: left;
}
.log-item h2 {
  line-height: 20px;
}
.log-item p {
  line-height: 20px;
  padding-right: 42px;
  word-wrap: break-word;
}
.log-item p:nth-of-type(2) {
  padding-top: 18px;
}
.log-item p.date {
  border-bottom: 1px solid #eee;
  padding-bottom: 1px;
  padding-top: 1px;
}
.log-dismiss-item {
  clear: both;
  background: #b1b1b1;
  background: -webkit-gradient(linear, left top, left bottom, from(#b1b1b1), to(#999));
  background: linear-gradient(#b1b1b1, #999);
  background: -ms-linear-gradient(top, #b1b1b1 0%, #999 100%);
  border-top: #bfbfbf;
  -webkit-box-shadow: rgba(153,153,153,0.4) 0 1px 2px;
          box-shadow: rgba(153,153,153,0.4) 0 1px 2px;
  padding: 5px 18px !important;
  width: 100%;
}
.log-dismiss-item p {
  color: #545454;
  font-size: 110%;
  font-weight: bold;
  padding: 0 !important;
  text-align: center;
  text-shadow: 2px 2px #ababab;
}
.log-list {
  background: #eee;
}
.log-list .loadingView {
  margin-top: 256px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.log-list .loadingView img {
  margin-left: 8px;
}
.log-list label {
  height: 28px;
  padding-top: 3px;
}
.log-list .input-wrapper {
  float: right;
  width: 40%;
  text-align: center;
}
.log-list .input-wrapper button[value="exportToCsv"] {
  display: inline-block;
}
.log-list > .control-panel,
.log-list > .dismiss-panel {
  background-color: #4a4a4a;
  padding: 6px 0;
  width: 100%;
}
.log-list > .control-panel label {
  padding-left: 14px;
}
.log-list > .dismiss-panel {
  text-align: center;
}
.log-list > .dismiss-panel button[value="dismiss"] {
  display: inline-block;
}
.log-sort {
  cursor: default;
  margin-bottom: 2px;
  padding: 10px 10px 1px 10px;
}
.log-sort .base-form {
  padding: 0 8px;
}
.log-sort .base-form label.prio {
  float: none !important;
}
.log-sort .base-form .prio-all-wrapper {
  text-align: right;
}
.log-sort .base-form .prio-all-wrapper > div {
  display: inline-block;
  height: 30px;
  padding: 6px;
  text-align: center;
  width: 40%;
}
.log-sort .base-form .prio-all-wrapper > div > input {
  display: inline-block;
  height: auto !important;
  width: auto !important;
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
  background-color: #a9a9a9;
  outline: 1px solid #708090;
}
/**
 * The menu is fixed to the left of the layout and will not move
 * around like the rest of the the views in the layout.
 */
.menu-show {
  background-color: #222;
  color: #eee;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
  position: absolute;
  left: 0;
  width: 320px;
/** Prevent text selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
/**
   * Powered by DISE - Image set by theme hook.
   */
  background-repeat: no-repeat;
  background-position: center calc(100% - 4rem);
/**
   * Powered by DISE
   */
  background-image: url("/assets/powered_by_dise/Powered by DISE light.png");
}
@media (min-width: 1201px) {
  .menu-show {
    background-position: center calc(100% -3rem);
  }
}
.menu-show ul {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
/**
     * Add some gutters, and make space for Powered by DISE.
     */
  margin-bottom: 8rem;
}
.menu-show .active {
  -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
          box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
  color: #222;
  background: #fafafa;
}
.menu-show .active .number-box {
  background-color: #78909c;
  border-color: #78909c;
  color: #fff;
}
.menu-show .active i {
  color: inherit;
}
.menu-show .menu-header,
.menu-show li {
  clear: both;
  display: block;
  font-size: 18px;
  line-height: 38px;
  cursor: pointer;
  margin: 0.5rem 0 0.5rem 1rem;
  padding: 0.5rem 2rem 0.5rem 1rem;
  border-radius: 0.25rem 0 0 0.25rem;
}
@media (min-width: 601px) {
  .menu-show .menu-header:first-child,
  .menu-show li:first-child {
    margin-top: 52px;
  }
}
.menu-show .menu-header div,
.menu-show li div {
  float: left;
}
.menu-show .menu-header p,
.menu-show li p {
  padding: 2px 0;
}
.menu-show .menu-header .number-box,
.menu-show li .number-box {
  float: right;
  margin-top: 5px;
  background: transparent;
  border: 1px solid #eee;
  border-radius: 50%;
  height: 2rem;
  width: 2rem;
  min-width: 0;
  font-size: 14px;
}
.menu-show .menu-header i,
.menu-show li i {
  color: rgba(238,238,238,0.4);
  font-size: 22px;
  min-width: 48px;
  margin-right: 16px;
  position: relative;
}
.menu-show .menu-header,
.menu-show .user-info,
.menu-show .version-info {
  background: transparent;
}
.menu-show .user-info,
.menu-show .version-info {
  padding: 0.5em 0.4em;
}
.menu-show .user-info span {
  font-weight: bold;
}
.menu-show .menu-header {
  line-height: 1px;
  padding: 40px 0 35px 52px;
}
.menu__header {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 4rem 1rem 2rem;
  width: 100%;
}
@media (min-width: 601px) {
  .menu__header {
    padding-top: 51px;
    padding-bottom: 0;
  }
}
.menu__logotype {
  padding: 0 2rem;
}
.menu__version {
  padding: 0.5rem;
}
.menu__credits {
  padding: 2rem 1rem 6rem;
  text-align: center;
  margin: 0 auto !important;
  bottom: 0;
  width: 100%;
}
@media (min-width: 601px) {
  .menu__credits {
    padding-bottom: 4rem;
  }
}
@media (min-width: 901px) {
  .menu__credits {
    padding: 4rem 1rem 2rem;
  }
}
.menu__credits img {
  height: 100%;
  width: auto;
}
.metadata-item {
  background: #fff;
}
.metadata-item i {
  color: #fd936d;
}
.metadata-list {
  background: #fff;
}
/*
 * NOTE: Only keep absolutely global functions in here that rarely
 *       change since modifications to this file will cause many
 *       Stylus files to recompile, slowing down development time.
 *       View-specific functions are best kept at the top of respective
 *       view stylesheet. Further, it is preferable to implement mixins
 *       in separate files for the same reason, rather than in one big file.
 */
/*
 * NOTE: Only keep absolutely global variables in here that rarely
 *       change since modifications to this file will cause many
 *       Stylus files to recompile, slowing down development time.
 *       View-specific variables are best kept at the top of respective
 *       view stylesheet. Further, it is preferable to implement mixins
 *       in separate files for the same reason, rather than in one big file.
 */
.network-edit {
  cursor: default;
  background-color: #fff;
  padding: 10px;
}
.network-edit #logotype-upload-blocks {
  margin-bottom: 32px;
}
.network-edit > .base-form {
  padding: 0 8px;
}
.network-edit > .base-form p {
  color: #000;
}
.network-edit > .base-form .row td {
  color: #000;
}
.network-edit > .base-form > div > label[for="input_auto_publish"] {
  width: 33%;
}
.network-edit > .base-form > div > label[for="input_enable_playback_statistics"] {
  width: 35%;
}
.network-edit > .base-form > div > label[for="input_create_brand"] {
  width: 35%;
}
.network-edit > .base-form > .upload-block > .btn {
  margin: 0.1em 0;
  min-height: 30.5px;
  padding: 0.1em 0.2em;
  text-transform: uppercase;
  width: 100% !important;
}
.network-edit > .base-form .btn {
  background: #2b2c2c !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#454647), to(#2b2c2c)) !important;
  background: linear-gradient(#454647, #2b2c2c) !important;
  background: -ms-linear-gradient(top, #454647 0%, #2b2c2c 100%) !important;
}
.network-item {
  background: #fff;
  text-align: left;
/*white-space: nowrap;*/
}
.network-item h2 {
/*float: left;*/
  line-height: 20px;
}
.network-item p {
  line-height: 20px;
  text-align: right;
}
.network-item i {
  color: #b2b2b2;
}
.network-show {
  background: #fff;
  min-width: 320px;
  padding-bottom: 1px;
}
.network-show .description {
  margin: 8px 0 8px 12px;
  font-style: italic;
}
.network-show > div.logo-section {
  display: block !important;
  float: none !important;
  padding: 8px;
  text-align: center;
  width: 100%;
}
.network-show > div.logo-section > .logo-section-default {
  background: #000;
  width: 161px;
  margin: 0 auto;
}
.network-show > div.login-link {
  background: #fff;
  text-align: center;
  padding: 0.2em;
  width: 100%;
}
.network-show > div.login-link > button {
  display: inline-block;
  margin: 0.4em;
}
.network-show .show-row {
  width: 100%;
  padding: 0 12px;
  clear: both;
}
.network-show .show-row p {
  text-align: right;
  font-size: 80%;
  font-weight: bold;
  border-bottom: 1px dotted transparent;
  margin-bottom: 10px;
  word-wrap: break-word;
  float: right;
}
.network-show .show-row p:after {
  content: "";
  display: inline-block;
  width: 0px;
}
.network-show .show-row div {
  border-bottom: 1px dotted #111;
  float: left;
  font-size: 95%;
  font-weight: thin;
  padding-bottom: 2px;
  width: 135px;
}
.player-status-show {
  background: #eee;
/*
  > .button-panel {
    background-color: lighten(cl-background-app, 3%);
    padding: 6px 0;
    text-align: center;
    width: 100%;
    height: 42px;

    button[value="dismiss-all"] {
      display: inline-block;
    }
  }
  */
}
.player-status-show > .base-list {
  background: #fff;
}
.player-status-show > .base-list > .facility-group-item > div.notifier > i:not([data-content=""]):after {
  border-color: #eee;
}
.player-status-show > .base-list > .service-item {
  cursor: default;
}
.player-status-show > .base-list > .service-item:hover {
  cursor: default !important;
}
.log-item2 {
  cursor: default !important;
  font-size: 9pt !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.log-item2 i {
  font-size: 9pt !important;
}
.log-priority-0 {
  color: #f00;
}
.log-priority-1 {
  color: #f00;
}
.log-priority-2 {
  color: #f00;
}
.log-priority-3 {
  color: #8b0000;
}
.log-priority-4 {
  color: #cd7600;
}
.log-priority-5 {
  color: #006400;
}
.log-priority-6 {
  color: #00008b;
}
.log-priority-7 {
  color: #6c6c6c;
}
.tooltiptext {
  display: none;
  white-space: nowrap;
}
.tooltiptext i {
  font-size: 8pt !important;
}
.tooltiptext td {
  padding: 2px;
  padding-right: 4px;
}
.qtip {
  max-width: 1920px !important;
}
.status-list-table {
  font-size: 9pt;
}
.status-list-table td {
  padding-left: 6px;
  vertical-align: top;
}
.status-list-table td:first-child {
  white-space: nowrap;
}
.status-list-invalid {
  text-decoration: line-through;
}
.addContent-list > p {
  padding: 0 8px;
}
.addContent-list .base-form p {
  color: #000;
}
.addContent-list > .button-panel button {
  float: right;
  position: relative;
  top: 14px;
  margin-right: 6px;
  line-height: 16px;
}
.addContent-list > .button-panel button:first-of-type {
  margin-right: 0;
}
*
.addContent-list > .button-panel button[value="done"].addable {
  background: #6abf5d;
  background: -ms-linear-gradient(top, #6abf5d 0%, #4f9844 100%);
  color: #fff;
  text-shadow: #4f9844 0 1px;
}
.addContent-list .group-select {
  margin: 24px 4px 0px 4px;
  display: inline-block;
}
.addContent-list .group-select label {
  font-weight: bold;
}
.addContent-list .upload-show {
  border-top: 2px solid #eee;
}
.addContent-list .cntply-item:not(.selected),
.itemsblock > .base-list .cntply-item:not(.selected),
.addContent-list .playlistitem-item:not(.selected),
.itemsblock > .base-list .playlistitem-item:not(.selected) {
  background: #fff no-repeat right bottom;
}
.add-content-header {
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.add-content-header__column {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.add-content-header__label {
  display: block;
  font-weight: bold;
  padding: 1rem 0.5rem 0;
}
.add-content-header__select {
  border-radius: 0.25rem;
  padding: 0.25rem;
  margin: 0.25rem 0.5rem 1rem;
}
.playlistitem-edit {
  border-bottom: 1px solid #e0e0e0;
  padding: 10px;
}
.playlistitem-edit .base-form {
  padding: 0 10px;
}
.playlistitem-edit .base-form label[for="input_duration"] {
  width: 100%;
}
.playlist-quick-edit {
  border-top: 1px solid #e0e0e0;
}
.playlist-quick-edit .base-form {
  padding: 10px;
}
.playlist-edit {
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
  padding: 10px;
}
.playlist-edit .base-form {
  padding: 0 10px;
}
.playlist-edit .base-form label[for="input_default_duration"] {
  width: 100%;
}
.playlist-item {
  text-align: left;
  white-space: nowrap;
}
.playlist-item h2 {
  line-height: 20px;
  overflow-x: hidden;
}
.playlist-item p {
  line-height: 20px;
  text-align: left;
}
.playlist-item i {
  color: #b2b2b2;
}
.playlistitem-item {
  background: #fff;
  text-align: left;
  white-space: nowrap;
}
.playlistitem-item h2 {
  padding-left: 52px;
}
.playlistitem-item i {
  color: #b2b2b2;
}
.playlistitem-item {
  min-height: 77px;
}
.playlist-show {
  background: #fff;
}
.playlist-show > img {
  min-width: 320px;
  min-height: 180px;
}
.playlist-show .info-panel p {
  color: #000 !important;
}
.playlist-show .base-edit {
  border-bottom: 1px solid #d9d9d9;
}
.playlist-show .upload-block label {
  color: #000 !important;
}
.playlist-show .upload-block .btn {
  background: #2b2c2c !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#454647), to(#2b2c2c)) !important;
  background: linear-gradient(#454647, #2b2c2c) !important;
  background: -ms-linear-gradient(top, #454647 0%, #2b2c2c 100%) !important;
}
.playlist-show > .row {
  width: 100%;
  padding: 0 10px;
  clear: both;
}
.playlist-show > .row p {
  text-align: right;
  font-size: 80%;
  font-weight: bold;
  border-bottom: 1px dotted transparent;
  margin-bottom: 10px;
}
.playlist-show > .row > div {
  display: inline-block;
  font-size: 95%;
  font-weight: thin;
  padding-bottom: 2px;
  width: 50%;
}
.playlist-show > .row > .col {
  float: right;
  display: inline-block;
  width: 55%;
  margin-left: 8px;
}
.playlist-show > .row > .col > .legend {
  border-bottom: 1px dotted #111;
  float: left;
}
.playlist-show > .row > .col:last-of-type {
  clear: left;
  float: none;
  display: block;
}
.playlist-show button[value^="queue"] {
  width: 100%;
}
.report-edit {
  padding: 10px;
  background: #fff;
  border-bottom: 1px solid #bdbdbd;
}
.report-edit .base-form {
  padding: 0 10px;
}
.report-edit .base-form label {
  height: 0 !important;
}
.report-edit .base-form select {
  margin-bottom: 8px !important;
}
.report-edit button {
  margin-top: 10px;
}
.report-item {
  background: #fff;
  text-align: left;
  white-space: nowrap;
}
.report-item i {
  color: #b2b2b2;
}
.report-item h2 {
  line-height: 20px;
  overflow-x: hidden;
}
.report-item p {
  color: #3f3f3f;
  margin-left: 3px;
  text-transform: capitalize;
}
/*
.report-list {
  overflow-x: auto;
}*/
.report-show {
  height: 100%;
}
.report-show > iframe {
  height: 100%;
  min-width: 320px;
  width: 100%;
}
.schedule-edit {
  border-bottom: 1px solid #e0e0e0;
  padding: 10px;
}
.schedule-edit .base-form {
  padding: 0 8px;
}
.schedule-edit .start-date-block,
.schedule-edit .stop-date-block {
  margin: 5px 0;
}
.schedule-edit div.btn {
  margin-right: 0 !important;
  padding: 2.5px 8px !important;
}
.schedule-edit label {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  display: inline-block;
  font-size: 12px;
  line-height: 24px;
  padding-top: 6px;
  text-transform: uppercase;
  width: 100%;
  height: 30px;
}
.schedule-edit .days > div {
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  display: inline-block;
  margin-right: 5px;
  margin-bottom: 5px;
  padding: 5px 2px 5px 5px;
  width: 20%;
}
.schedule-edit .days > div > label {
  float: none;
  height: auto !important;
  line-height: auto !important;
  margin-top: 0;
  padding-top: 0;
  width: 22px;
}
.schedule-edit .days > div > input {
  float: right;
  margin-top: 4px;
  margin-right: 4px;
}
.schedule-rule-edit {
  border-bottom: 0 !important;
}
.ui-datepicker.ui-widget-content {
  background: #444;
  border: 1px solid #9b9b9b;
}
.ui-datepicker.ui-widget-content span {
  font-weight: normal !important;
}
.ui-datepicker.ui-widget-content select {
  background: #454647;
  border: 1px solid #353535;
  color: #fff;
}
.ui-datepicker.ui-widget-content .ui-widget-header {
  background: transparent;
  border: none;
  color: #fff;
}
.ui-datepicker.ui-widget-content .ui-slider.ui-widget-content {
  background: #3a3b3c;
  background-color: #363738;
  border: 1px solid #efefef;
}
.ui-datepicker.ui-widget-content .ui-slider.ui-widget-content .ui-slider-handle.ui-state-default {
  background: #454647;
  background: -webkit-gradient(linear, left top, left bottom, from(#454647), to(#2b2c2c));
  background: linear-gradient(#454647, #2b2c2c);
  background: -ms-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  border: 1px solid #353535;
}
.ui-datepicker.ui-widget-content .ui-datepicker-buttonpane.ui-widget-content {
  background: #3a3b3c;
  background-color: #363738;
  border: 1px solid #353535;
}
.ui-datepicker.ui-widget-content .ui-datepicker-calendar th {
  color: #fff;
}
.ui-datepicker.ui-widget-content .ui-datepicker-calendar .ui-state-default {
  background: #2b2c2c;
  background: -webkit-gradient(linear, left top, left bottom, from(#454647), to(#2b2c2c));
  background: linear-gradient(#454647, #2b2c2c);
  background: -ms-linear-gradient(top, #454647 0%, #2b2c2c 100%);
  border: 1px solid #353535;
  color: #fff;
}
.ui-datepicker.ui-widget-content .ui-datepicker-calendar .ui-state-default.ui-state-active {
  background: #6d919b;
  background: -webkit-gradient(linear, left top, left bottom, from(#58737b), color-stop(22%, #6d919b), to(#7da3b0));
  background: linear-gradient(#58737b, #6d919b 22%, #7da3b0); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #58737b 0%, #6d919b 22%, #7da3b0 100%); /* IE10+ */
  -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 2px;
          box-shadow: rgba(255,255,255,0.4) 0 1px 2px;
  color: #fff;
}
.ui-datepicker.ui-widget-content .ui-datepicker-calendar .ui-datepicker-today > .ui-state-highlight {
  border: 1px solid #9be09b !important;
  -webkit-box-shadow: inset 0px -2px 6px -1px #9be09b;
          box-shadow: inset 0px -2px 6px -1px #9be09b;
  color: #fff;
}
.ui-datepicker.ui-widget-content .ui-datepicker-prev,
.ui-datepicker.ui-widget-content .ui-datepicker-next,
.ui-datepicker.ui-widget-content .ui-datepicker-current,
.ui-datepicker.ui-widget-content .ui-datepicker-close {
  background: #2b2c2c !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#454647), to(#2b2c2c)) !important;
  background: linear-gradient(#454647, #2b2c2c) !important;
  background: -ms-linear-gradient(top, #454647 0%, #2b2c2c 100%) !important;
  border: none;
  border-radius: 5px;
  -webkit-box-shadow: #565656 0 -1px 0, #1c1c1c 0 2px 2px;
          box-shadow: #565656 0 -1px 0, #1c1c1c 0 2px 2px;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  height: 30.5px;
  opacity: 1 !important;
  padding: 8px 16px;
  text-shadow: #000 0 1px;
  text-transform: uppercase;
}
.ui-datepicker.ui-widget-content .ui-datepicker-prev span,
.ui-datepicker.ui-widget-content .ui-datepicker-next span,
.ui-datepicker.ui-widget-content .ui-datepicker-current span,
.ui-datepicker.ui-widget-content .ui-datepicker-close span {
  background: none;
  color: #fff;
  margin-top: -10px;
  text-indent: -3px;
}
.ui-datepicker.ui-widget-content .ui-datepicker-prev:active,
.ui-datepicker.ui-widget-content .ui-datepicker-next:active,
.ui-datepicker.ui-widget-content .ui-datepicker-current:active,
.ui-datepicker.ui-widget-content .ui-datepicker-close:active {
  background: #2b2c2c;
  background: -webkit-gradient(linear, left top, left bottom, from(#2b2c2c), to(#3b3c3d));
  background: linear-gradient(#2b2c2c, #3b3c3d);
  background: -ms-linear-gradient(top, #2b2c2c 0%, #3b3c3d 100%);
  -webkit-box-shadow: #565656 0 1px 0, #1c1c1c 0 2px 2px inset;
          box-shadow: #565656 0 1px 0, #1c1c1c 0 2px 2px inset;
}
.ui-datepicker.ui-widget-content .ui-datepicker-prev:focus,
.ui-datepicker.ui-widget-content .ui-datepicker-next:focus,
.ui-datepicker.ui-widget-content .ui-datepicker-current:focus,
.ui-datepicker.ui-widget-content .ui-datepicker-close:focus {
  background: #4a4b4c;
  background: -webkit-gradient(linear, left top, left bottom, from(#4a4b4c), to(#303131));
  background: linear-gradient(#4a4b4c, #303131);
  background: -ms-linear-gradient(top, #4a4b4c 0%, #303131 100%);
  outline: none;
}
.ui-datepicker.ui-widget-content .ui-datepicker-title {
  font-weight: normal;
}
.ui-datepicker.ui-widget-content .ui_tpicker_time_label {
  color: #fff;
}
.schedule-item {
  background: #fff;
  text-align: left;
  white-space: nowrap;
}
.schedule-item h2 {
  line-height: 20px;
  overflow-x: hidden;
}
.schedule-item p {
  line-height: 20px;
  text-align: left;
}
.schedule-item i {
  color: #b2b2b2;
}
.schedules-list button[value="delete"] {
  width: 100%;
}
.schedule-show {
  background: #fff;
}
.schedule-show > img {
  min-width: 320px;
  min-height: 180px;
}
.schedule-show > .row {
  width: 100%;
  padding: 0 10px;
  clear: both;
}
.schedule-show > .row p {
  text-align: right;
  font-size: 80%;
  font-weight: bold;
  border-bottom: 1px dotted transparent;
  margin-bottom: 10px;
}
.schedule-show > .row > div {
  display: inline-block;
  font-size: 95%;
  font-weight: thin;
  padding-bottom: 2px;
  width: 50%;
}
.schedule-show > .row > .col {
  float: right;
  display: inline-block;
  width: 49%;
}
.schedule-show > .row > .col > .legend {
  border-bottom: 1px dotted #111;
  float: left;
}
.schedule-show > .row > .col:last-of-type {
  clear: left;
  float: none;
  display: block;
}
.schedule-show button[value^="queue"] {
  width: 100%;
}
.screenDef-edit {
  background-color: #4a4a4a;
  padding: 10px;
}
.screenDef-edit .base-form {
  padding: 0 8px;
}
.screenDef-item {
  background: #fff;
}
.screenDef-item i {
  color: #fd936d;
}
.screendef-list {
  background: #fff;
}
.screendef-show {
  width: 320px;
}
.setting-edit {
  background-color: #4a4a4a;
  padding: 10px;
}
.setting-edit .base-form {
  padding: 0 8px;
}
.setting-edit .base-form > p {
  color: #eee;
  text-align: center;
}
.setting-item {
  background: #fff;
}
.setting-item i {
  color: #fd936d;
}
.conn-dialog {
  display: none;
  background: #999;
  background: -webkit-gradient(linear, left top, left bottom, from(#b1b1b1), to(#999));
  background: linear-gradient(#b1b1b1, #999); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #b1b1b1 0%, #999 100%); /* IE10+ */
  border-radius: 7px;
  -webkit-box-shadow: rgba(153,153,153,0.4) 0 1px 2px;
          box-shadow: rgba(153,153,153,0.4) 0 1px 2px;
  color: #5f5f5f;
  left: 0;
  max-height: 80%;
  max-width: 80%;
  min-width: 20%;
  padding: 8px;
  position: absolute;
  text-align: center;
  top: 0;
  z-index: 5000;
}
.conn-dialog .header {
  background: #282828;
  background: -webkit-gradient(linear, left top, left bottom, from(#242424), to(#282828));
  background: linear-gradient(#242424, #282828); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #242424 0%, #282828 100%); /* IE10+ */
  border-top: 1px solid #292929;
  border-bottom: 1px solid #1f1f1f;
  color: #aaa;
  font-size: 100%;
  font-weight: normal;
  padding: 2px 18px;
  width: 100%;
}
.conn-dialog > div {
  min-height: 50px;
  padding-top: 5px;
}
.conn-dialog > div:first-of-type {
  min-height: 20px;
}
.conn-dialog > .icon {
  color: #eee;
  float: left;
  padding: 0 10px;
}
.conn-dialog > .icon img {
  margin: -15px -18px;
}
.conn-dialog > .container {
  color: #eee;
  text-align: left;
  overflow-y: hidden;
  max-height: 120px;
}
.conn-dialog button {
  display: inline-block;
  margin: 2px 5px;
}
.uploads {
  bottom: 36px;
/*bottom: 100px;*/
  position: relative;
/** Prevent text selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.uploads > ul[data-yield=uploads] {
  background: rgba(0,0,0,0);
  border: none;
  border-radius-top-left: 7px;
  border-radius-top-right: 7px;
  color: #e1e1e1;
  display: none;
  height: 36px;
  overflow-x: hidden;
  padding: 1px 0.5em 0 0.5em;
  position: absolute;
/*transform: translate3d(0, 0, 0);*/
  width: 100%;
  z-index: 5000;
}
.uploads > ul[data-yield=uploads] > li {
  background: #4a4b4c;
  background: -webkit-gradient(linear, left top, left bottom, from(#4a4b4c), to(#303132));
  background: linear-gradient(#4a4b4c, #303132); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #4a4b4c 0%, #303132 100%); /* IE10+ */
  border: none;
  border-radius: 5px;
  -webkit-box-shadow: #545454 0 1px 1px, #2b2b2b 0 2px 3px 1px inset;
          box-shadow: #545454 0 1px 1px, #2b2b2b 0 2px 3px 1px inset;
  color: #ddd;
  display: inline-block;
/*left: 720px;*/
  margin: 2px 3px;
  padding: 0.2em;
/*position: absolute;
      transition-duration: .5s;
      -webkit-transition-duration: .5s;
      transition-property: left;
      -moz-transition-property: left;     /* Firefox 4 *
      -webkit-transition-property: left;  /* Safari and Chrome *
      -o-transition-property: left;       /* Opera *
      -webkit-transform: translateZ(0);*/
  white-space: nowrap;
  width: auto !important;
/*
      > p {
        padding-right: 70px;
      }
      */
}
.uploads > ul[data-yield=uploads] > li > div {
  display: inline-block;
/*float: right;*/
}
.uploads > ul[data-yield=uploads] > li .uploadprogress {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  color: #ddd !important;
  height: auto !important;
  margin-right: 8px !important;
  overflow: visible !important;
}
.uploads > ul[data-yield=uploads] > li .uploadprogress > .label {
  color: #ddd !important;
  font-size: 16px !important;
}
.uploads > ul[data-yield=uploads] > li .uploadprogress > .ui-progressbar-value {
  display: none !important;
}
.uploads > ul[data-yield=uploads] > li .cancel-button {
  border: #ddd;
}
.uploads > ul[data-yield=uploads] > li .cancel-button:hover {
  cursor: pointer;
}
.uploads > ul[data-yield=uploads] > li .cancel-button > i {
  font-size: 70%;
}
.uploads > ul[data-yield=uploads] > li:first-of-type {
  margin-left: 0;
  background: #000;
  padding: 4px;
}
.upload-show {
  padding: 0.5em 1em;
/** Prevent text selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.upload-show i {
  color: #888;
}
.upload-show p {
  color: #888;
  font-size: 12px;
}
.upload-show span {
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  line-height: 30px;
  text-shadow: #000 0 1px;
  text-transform: uppercase;
}
.upload-show > .outerbox {
  padding: 0.5em 0;
  text-align: center;
}
.upload-show > .outerbox > .dropbox {
  background: #454647;
  background: -webkit-gradient(linear, left top, left bottom, from(#454647), to(#2b2c2c));
  background: linear-gradient(#454647, #2b2c2c); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #454647 0%, #2b2c2c 100%); /* IE10+ */
  border: none;
  border-radius: 5px;
  -webkit-box-shadow: #4f4f4f 0 1px 1px, #262626 0 2px 3px 1px inset;
          box-shadow: #4f4f4f 0 1px 1px, #262626 0 2px 3px 1px inset;
  color: #ddd;
  padding: 1.5em;
  position: relative;
}
.upload-show > .outerbox > .dropbox > span {
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  line-height: 30px;
  text-shadow: #000 0 1px;
  text-transform: uppercase;
}
.upload-show .row {
  clear: both;
  padding: 0.5em 0;
}
.upload-show .row > label {
  color: #888;
  clear: left;
  display: block;
  font-size: 12px;
  line-height: 24px;
  padding-top: 2px;
  text-transform: lowercase;
  width: 34%;
  height: 30px;
}
.upload-show .row .btn {
  border: none;
  border-radius: 5px;
  -webkit-box-shadow: #565656 0 -1px 0, #1c1c1c 0 2px 2px;
          box-shadow: #565656 0 -1px 0, #1c1c1c 0 2px 2px;
  background: -webkit-gradient(linear, left top, left bottom, from(#454647), to(#2b2c2c));
  background: linear-gradient(#454647, #2b2c2c); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #454647 0%, #2b2c2c 100%); /* IE10+ */
  display: block;
  float: right;
  font-size: 12px;
  font-weight: bold;
  margin: 0;
  padding: 0 8px;
  position: relative;
  text-align: center;
  text-shadow: #000 0 1px;
  text-transform: lowercase;
  width: 50%;
}
.upload-show .row .btn > input {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}
.upload-show > button[value=close] {
  width: 100%;
}
.network-edit {
  cursor: default;
  background-color: #fff;
  padding: 10px;
}
.network-edit .base-form {
  padding: 0 8px;
}
.system-player-licenses {
  min-width: 320px;
  padding-bottom: 1px;
}
.system-player-licenses .row {
  width: 100%;
  padding: 0 10px;
  clear: both;
}
.system-player-licenses .row p {
  text-align: right;
  font-size: 80%;
  font-weight: bold;
  border-bottom: 1px dotted transparent;
  margin-bottom: 10px;
  word-wrap: break-word;
  float: right;
}
.system-player-licenses .row div {
  border-bottom: 1px dotted #111;
  float: left;
  font-size: 95%;
  font-weight: thin;
  padding-bottom: 2px;
  width: 135px;
}
.system-player-licenses .base-form {
  margin-bottom: 0 !important;
  padding: 10px;
}
.system-player-licenses .base-form button[value="save"] {
  margin-top: 10px;
}
.system-player-licenses .base-listshow,
.system-player-licenses .base-category,
.system-player-licenses .upload-show,
.system-player-licenses .outerbox {
  background: transparent;
}
.license-item > h2 {
  max-width: inherit !important;
}
.login-info-container {
  padding: 10px;
  color: #9a9a9a;
  font-size: 12px;
  line-height: 16px;
}
.version-info-container {
  padding-left: 6px;
  padding-right: 6px;
  color: #9a9a9a;
  font-size: 12px;
}
.myaccount-edit {
  padding: 10px;
  border-bottom: 1px solid #bdbdbd;
}
.myaccount-edit i {
  color: cl-copy-on-primary;
}
.myaccount-edit .base-form {
  padding: 0 8px;
}
.myaccount-edit .base-form p {
  color: #4e4e4e;
  font-size: 90%;
  padding: 0 10% 0.5em 10%;
}
.myaccount-edit .base-form label[for="input_password"],
.myaccount-edit .base-form input[name^="password"] {
  width: 100%;
}
.myaccount-edit .base-form button[value="save"] {
  margin-top: 8px;
  width: 100%;
}
.myaccount-edit .button-list {
/**
    * Button is position: absolute by itself,
    * and deals with it's own positioning,
    * except for this.
    */
  left: 0;
}
/*
 * Kickstart Project CSS Bundle
 *
 * (=) require_tree kickstart
 * (=) require_self
 */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
body {
  line-height: 1;
  color: #000;
  background: #fff;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: separate;
  border-spacing: 0;
  vertical-align: middle;
}
caption,
th,
td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}
a img {
  border: none;
}
@font-face {
  font-family: 'ui-icons';
  src: url("font.eot?#iefix") format('embedded-opentype'), url("font.woff") format('woff'), url("font.ttf") format('truetype'), url("font.svg#ui-icons") format('svg');
}
.display-none {
  display: none;
}
input::-ms-clear {
  display: none;
}
body[lang="pl"] .base-list > li.base-item h2,
body[lang="ru"] .base-list > li.base-item h2 {
  font-family: 'Arial' !important;
}
.getbrowser {
  display: none;
  color: #dfdfdf;
  margin: 5% 0 0 0;
  text-align: center;
}
.getbrowser img {
  display: inline-block;
}
.getbrowser > div {
  margin: 1% 0 0 0;
  text-align: center;
  width: 100%;
}
.getbrowser > div > ul {
  display: inline-block;
  margin: 0 auto;
  vertical-align: top;
}
.getbrowser > div > ul > li {
  border-bottom: #dfdfdf solid 1px;
  border-left: #dfdfdf solid 1px;
  border-right: #dfdfdf solid 1px;
  -webkit-box-shadow: 2px 2px 4px #dfdfdf;
  box-shadow: 2px 2px 4px #dfdfdf;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  display: inline-block;
  margin: 0 5px;
  padding: 0;
  min-height: 100px;
  max-width: 110px;
  min-width: 110px;
}
.getbrowser > div > ul > li > div {
  margin-top: 0.4em;
  position: absolute;
  max-width: 110px;
  min-width: 110px;
}
.getbrowser > div > ul > li:hover {
  cursor: pointer;
  border-bottom: #c0fefe solid 1px;
  border-left: #c0fefe solid 1px;
  border-right: #c0fefe solid 1px;
  -webkit-box-shadow: 2px 2px 4px #c0fefe;
  box-shadow: 2px 2px 4px #c0fefe;
}
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body,
#application,
#react-app {
  height: 100%;
}
body {
  -webkit-font-smoothing: antialiased;
  background-color: #444;
  color: cl-color;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 20px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
noscript {
  background: #222;
  color: #eee;
}
a {
  color: inherit;
  text-decoration: none;
}
i {
  font-family: "ui-icons";
  font-size: 24px;
  font-style: normal;
  font-weight: 100;
  text-transform: none;
}
select::-ms-expand {
  display: none;
}
em {
  font-weight: bold;
}
i.disabled {
  opacity: 0.4;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  filter: alpha(opacity=40);
  cursor: default;
}
.font12 {
  font-size: 12px !important;
}
h1 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 200;
  font-size: 22px;
  line-height: 30px;
  padding: 16px 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
h2,
h3 {
  padding: 0 12px;
}
h3.category {
/*background: #999;*/
  background: #999;
  background: -webkit-gradient(linear, left top, left bottom, from(#b1b1b1), to(#999));
  background: linear-gradient(#b1b1b1, #999);
  background: -moz--webkit-linear-gradient(top, #b1b1b1 0%, #999 100%);
  background: -moz--moz-linear-gradient(top, #b1b1b1 0%, #999 100%);
  background: -moz--o-linear-gradient(top, #b1b1b1 0%, #999 100%);
  background: -moz--ms-linear-gradient(top, #b1b1b1 0%, #999 100%);
  background: -webkit--webkit-linear-gradient(top, #b1b1b1 0%, #999 100%);
  background: -webkit--moz-linear-gradient(top, #b1b1b1 0%, #999 100%);
  background: -webkit--o-linear-gradient(top, #b1b1b1 0%, #999 100%);
  background: -webkit--ms-linear-gradient(top, #b1b1b1 0%, #999 100%);
  background: -o--webkit-linear-gradient(top, #b1b1b1 0%, #999 100%);
  background: -o--moz-linear-gradient(top, #b1b1b1 0%, #999 100%);
  background: -o--o-linear-gradient(top, #b1b1b1 0%, #999 100%);
  background: -o--ms-linear-gradient(top, #b1b1b1 0%, #999 100%);
  background: -ms--webkit-linear-gradient(top, #b1b1b1 0%, #999 100%);
  background: -ms--moz-linear-gradient(top, #b1b1b1 0%, #999 100%);
  background: -ms--o-linear-gradient(top, #b1b1b1 0%, #999 100%);
  background: -ms--ms-linear-gradient(top, #b1b1b1 0%, #999 100%);
  background: -ms-linear-gradient(to bottom, #b1b1b1 0%, #999 100%);
/*background: gr-category;
  /*background: gr-category-o;
  background: gr-category-moz;
  background: gr-category-ms;
  background: gr-category-webkit;
  background: gr-category-webkit2;*/
/*border-top: rgb(191, 191, 191);*/
  border-top: #bfbfbf;
  -webkit-box-shadow: rgba(153,153,153,0.4) 0 1px 2px;
  box-shadow: rgba(153,153,153,0.4) 0 1px 2px;
  padding: 5px 12px;
}
.center {
  text-align: center;
}
.separator {
  background: #e0e0e0;
  color: #868686;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 13px;
  padding: 6px 18px;
  position: relative;
}
.floatRight {
  float: right;
}
.clear {
  clear: both;
}
.gutter {
  margin: 10px;
}
.toolbar-icon[data-content]:not([data-content=""]) {
  position: relative;
}
.toolbar-icon[data-content]:not([data-content=""]):before {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 24px;
  content: attr(data-content);
  color: #78909c;
  font-weight: bold;
  line-height: 12px;
  padding: 0px 4px;
  position: absolute;
  left: 62px;
  top: 11px;
  text-align: right;
  -webkit-font-smoothing: subpixel-antialiased;
}
.toolbar-icon[data-content]:not([data-content=""]):after {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 24px;
  content: attr(data-content);
  color: inherit;
  line-height: 12px;
  padding: 0px 4px;
  position: absolute;
  left: 64px;
  top: 12px;
  text-align: right;
  -webkit-font-smoothing: subpixel-antialiased;
}
.notifier i[data-content]:not([data-content=""]) {
  position: relative;
}
.notifier i[data-content]:not([data-content=""]):after {
  font-weight: bold;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10px;
  content: attr(data-content);
  background: #d94d4d;
  border: 2px solid #fff;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  color: #fff;
  line-height: 12px;
  padding: 0px 4px;
  position: absolute;
  left: 15px;
  top: 12px;
  text-align: right;
  -webkit-font-smoothing: subpixel-antialiased;
}
.notifier i[data-content][data-content="check"] {
  position: relative;
}
.notifier i[data-content][data-content="check"]:after {
  background: #4caf50;
  content: "\2713";
}
.notifier i[data-content].isScheduledDown:not([data-content=""]):after {
  background: #4f5b93;
  font-size: 8px;
  left: 5px;
/*left: -10px;
    top: 12px;*/
}
.loader {
  background: url("loader.gif") no-repeat 98% 40%;
}
.loader-white {
  background: #fff url("loader.gif") no-repeat 98% 40%;
}
.loader-dark {
  background: #272727 url("loader.gif") no-repeat 98% 40%;
}
.base-edit {
  cursor: default;
  padding: 10px 0;
  font-size: 12px;
}
.base-edit > p {
  max-width: 320px;
  overflow: initial !important;
  padding: 0.4em;
}
.base-edit > p > span {
  padding: 0 0.4em;
}
.base-edit > div.base-note {
  padding: 14px 20px;
}
.base-edit > div.base-note > p {
  color: #616e14;
  border: solid 1px #bfd62f;
  background-color: #dae691;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  padding: 14px 20px;
}
.base-edit > div.base-help-symbol {
  width: 100%;
  padding: 0px 20px;
  text-align: right;
  position: relative;
  top: 10px;
}
.base-edit > div.base-help-symbol > i {
  color: #737373;
}
.base-edit > .base-form {
  padding: 0 8px;
}
.help-tip {
  max-width: 640px !important;
  font-size: 12pt !important;
  line-height: normal !important;
}
.thumbnail-tip {
  background-color: #fff !important;
  border: 1px solid #b7b7b7 !important;
  max-width: 360px !important;
}
li.base-edit {
  list-style-type: none;
}
.ui-tooltip,
.arrow:after {
  background: #eee !important;
  border: 2px solid #3f3f3f !important;
}
.ui-tooltip {
  background: #eee !important;
  -webkit-border-radius: 7px !important;
  -moz-border-radius: 7px !important;
  color: #3f3f3f !important;
  display: inline-block;
  font-size: 14px;
  padding: 5px 7px;
  text-transform: capitalize;
  z-index: 500;
}
.arrow {
  bottom: -16px;
  height: 16px;
  left: 50%;
  margin-left: -35px;
  overflow: hidden;
  position: absolute;
  width: 70px;
}
.arrow.top {
  bottom: auto;
  top: -16px;
}
.arrow.left {
  left: 20%;
}
.arrow:after {
  position: absolute;
  top: -20px;
  width: 25px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  tranform: rotate(45deg);
}
.arrow.top:after {
  bottom: -20px;
  top: auto;
}
.ui-widget-overlay {
  background-color: #dcdcdc;
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
}
.ui-dialog {
  color: #fff !important;
  font-family: inherit !important;
  font-size: 100% !important;
  padding: 0 !important;
}
.ui-dialog .ui-dialog-title {
  display: none !important;
}
.ui-dialog .ui-dialog-titlebar-close {
  background: none !important;
  border: none !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  -webkit-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  color: #fff !important;
  height: auto !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 16px !important;
  right: auto !important;
  left: 0;
}
.ui-dialog .ui-dialog-titlebar-close > i {
  font-size: 16px !important;
}
.ui-dialog > .ui-dialog-buttonpane,
.ui-dialog > .ui-dialog-content {
  background: #fff;
}
.ui-dialog > .ui-dialog-content {
  overflow-y: scroll;
  padding: 10px;
}
.ui-dialog > .ui-dialog-titlebar.ui-widget-header {
  background: #b9b9b9;
  background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#959595));
  background: linear-gradient(#b9b9b9, #959595);
  background: -moz--webkit-linear-gradient(top, #b9b9b9 0%, #959595 100%);
  background: -moz--moz-linear-gradient(top, #b9b9b9 0%, #959595 100%);
  background: -moz--o-linear-gradient(top, #b9b9b9 0%, #959595 100%);
  background: -moz--ms-linear-gradient(top, #b9b9b9 0%, #959595 100%); /* FF3.6+ */ /* Chrome,Safari4+ */
  background: -webkit--webkit-linear-gradient(top, #b9b9b9 0%, #959595 100%);
  background: -webkit--moz-linear-gradient(top, #b9b9b9 0%, #959595 100%);
  background: -webkit--o-linear-gradient(top, #b9b9b9 0%, #959595 100%);
  background: -webkit--ms-linear-gradient(top, #b9b9b9 0%, #959595 100%); /* Chrome10+,Safari5.1+ */
  background: -o--webkit-linear-gradient(top, #b9b9b9 0%, #959595 100%);
  background: -o--moz-linear-gradient(top, #b9b9b9 0%, #959595 100%);
  background: -o--o-linear-gradient(top, #b9b9b9 0%, #959595 100%);
  background: -o--ms-linear-gradient(top, #b9b9b9 0%, #959595 100%); /* Opera 11.10+ */
  background: -ms--webkit-linear-gradient(top, #b9b9b9 0%, #959595 100%);
  background: -ms--moz-linear-gradient(top, #b9b9b9 0%, #959595 100%);
  background: -ms--o-linear-gradient(top, #b9b9b9 0%, #959595 100%);
  background: -ms--ms-linear-gradient(top, #b9b9b9 0%, #959595 100%);
  background: -ms-linear-gradient(to bottom, #b9b9b9 0%, #959595 100%); /* IE10+ */
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border: none !important;
  min-height: 25px;
  line-height: 25px;
  padding: 0 12px !important;
  text-align: left;
/** Prevent text selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none /* iOS Safari */;
  -webkit-user-select: none; /* Chrome/Safari/Opera */ /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently not supported by any browser */
}
.ui-dialog > .ui-dialog-titlebar.ui-widget-header > .ui-button.ui-widget.ui-state-default {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  cursor: pointer;
  display: inline-block !important;
  font-weight: normal !important;
  padding: 0 1em !important;
}
.ui-dialog > .ui-dialog-titlebar.ui-widget-header > .ui-button.ui-widget.ui-state-default i {
  color: #f4f2e2 !important;
  font-size: 16px !important;
}
.ui-dialog > .ui-dialog-titlebar.ui-widget-header > .ui-dialog-title {
  color: #f4f2e2;
  display: inline-block;
  float: right;
  font-weight: bold;
  text-align: center;
}
.ui-dialog > .ui-dialog-buttonpane {
  border: none !important;
  margin-top: 0 !important;
  padding: 5px 10px !important;
  text-align: right;
}
.ui-dialog > .ui-dialog-buttonpane > .ui-dialog-buttonset {
  display: block;
  float: none !important;
  width: 100%;
}
.ui-dialog > .ui-dialog-buttonpane > .ui-dialog-buttonset > button {
  display: block;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  width: 100%;
}
.ui-dialog > .ui-dialog-buttonpane > .ui-dialog-buttonset > button > span {
  font-size: 12px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.tab-container .tab {
  display: none;
  width: 100%;
}
.tab-container .tab.active {
  display: block;
}
@media all and (max-width: 380px) {
  .layouts-application > menu {
    display: block;
  }
  .layouts-application > menu a[data-action="menu"] {
    display: inline-block;
  }
  .layouts-application > menu a.active {
    color: #617f89;
  }
  .layouts-application,
  .layouts-wrapper,
  .base-edit,
  .base-show,
  h1 {
    max-width: 320px;
  }
}
.number-box,
.small-number-box {
  background: #7c7e7c;
  border: none;
/** nib is bad at autoprefixing border radius. **/
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  color: #eee;
  font-weight: bold;
  line-height: 32px;
  padding: 0 6px;
  text-align: center;
  min-width: 40px;
}
@media all and (max-width: 730px) and (min-width: 380px) {
  .layouts-application {
    max-width: none;
  }
  .layouts-application > menu {
    display: none;
  }
  .layouts-application > menu a[data-action="menu"] {
    display: none;
  }
  .layouts-application .layouts-wrapper {
    min-width: 320px;
  }
  .layouts-wrapper,
  .base-edit,
  .base-show,
  h1 {
    max-width: 720px;
  }
}
@media all and (min-width: 730px) {
  .layouts-application {
    max-width: none;
  }
  .layouts-application > menu {
    display: none;
  }
  .layouts-application > menu a[data-action="menu"] {
    display: none;
  }
  .layouts-application .layouts-wrapper {
    min-width: 420px;
    max-width: 420px;
  }
  .layouts-application .layouts-wrapper:first-of-type {
    min-width: 300px;
    max-width: 300px;
  }
}
.overlayIconContainer {
  position: relative;
}
.overlayIcon {
  position: absolute;
  right: 0px;
  bottom: 0px;
  font-size: 10px;
}
.scheduleActive {
  color: #008000;
}
.scheduleInactive {
  color: #f00;
}