body {
  font-family: "Open Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size:14px;
  background: #fffaf8;
}

.section {
  margin-top: 1em;
}
.navbar-inverse {
  background-color: #302420;
  border-color: #222222;
}

nav.publizz-navbar-menu .navbar-nav > li > a {
  color:#888e98;
  transition: color 0.25s;
}

nav.publizz-navbar-menu .navbar-nav > li > a:focus,
nav.publizz-navbar-menu .navbar-nav > li > a:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

nav.publizz-navbar-menu .navbar-brand {
  padding: 8px 20px;
}

.page-header {
  margin: 0;
  color: white;
  padding: 0 10px 0;
  border-bottom:0;
  position: relative;
}

.page-header h1 {
  margin:10px;
  line-height:1.3em;
  max-height:1.3em;
  overflow:hidden;
  text-overflow: ellipsis;
}

nav.publizz-subheader-menu > .nav-tabs {
  border-bottom:0;
}
nav.publizz-subheader-menu > .nav-tabs > li {
  margin-bottom:0;
}

nav.publizz-subheader-menu > .nav-tabs > li > a {
  color:rgba(255,255,255,0.5);
  padding: 15px 10px;
  transition: color 0.25s;
}
nav.publizz-subheader-menu > .nav > li > a:focus,
nav.publizz-subheader-menu > .nav > li > a:hover {
  color:#555;
}
nav.publizz-subheader-menu > .nav-tabs > li.active > a,
nav.publizz-subheader-menu > .nav-tabs > li.active > a:focus,
nav.publizz-subheader-menu > .nav-tabs > li.active > a:hover {
  border:0;
  background-color: transparent;
  color: #fff;
  border-bottom:2px solid #f07e13;
}
/*
.page-header .nav-pills {
  margin-bottom: 4px;
}
.page-header .nav-pills a {
  color:white;
}*/
.dashboard-nav-menu > .nav-pills > li.active > a,
.dashboard-nav-menu > .nav-pills > li.active > a:focus,
.dashboard-nav-menu > .nav-pills > li.active > a:hover {
    background-color: #fff;
    color: #f07e13;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
    color: #fff;
    background-color: #f07e13;
}

/*.list-group-item.active > .badge,*/
nav.publizz-subheader-menu > .nav-tabs > .active > a > .badge {
    background-color: #f07e13;
    color: #fff;
}

h1,
.h1 {
  font-size: 33px;
}
h1 .glyphicon {
    opacity: 0.5;

}
.top-buffer {
  margin-top:20px;
}

.bottom-no-margin {
  margin-bottom: 0;
}
.panel-heading .help-block {
  margin-bottom:0;
}
.panel-clear {
  border-color: #ddd;
}
.panel-clear .panel-body {
  padding:0;
}
.panel-clear .panel-body .ratio {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.panel-body h4 {
  margin-top: 0;
}
.published .panel-body h4 {
    margin-right: 32px;
}
article {
  min-height: 16.5em;
  max-height: 16.5em;
  overflow: hidden;
  position: relative;
}

/* Tweaks for the compact display variant */
.panel.compact {
  border-radius: 0;
}
.compact article {
/*  min-height: 6.5em;*/
  min-height: 0;
}
.compact .source-domain {
/*  margin-bottom:3em;*/
}
.compact .panel-footer {
    border:0;
/*    margin-top: -4em;*/
    margin-top: -4em;
    background-color: transparent;
}
/* End Tweaks for the compact display variant */

/* Magazine overview */
.overlay {
  position:absolute;
  z-index:100;
}
.overlay.title {
  top: 0;
  color:white;
  text-shadow: 0 1px 3px black;
  padding:4px 8px;
  margin:8px;
  pointer-events: none;
}
.overlay.title h3 {
  font-size:26px;
  margin-top:4px;
  margin-right:0.8em;
}
.overlay.info {
    right: 8px;
    top: 18px;
}
.overlay.info a {
  color:#fff;
}
.overlay.info a:hover {
  color:#f07e13;
}
.overlay.info .glyphicon {
  padding:0;
}
.overlay.icons {
  left:0;
  right:0;
  bottom:0;
  text-align: center;
  background:rgba(240, 126, 19, 0.75);
}
.private-magazine .overlay.icons {
  background-color:rgba(60,140,255,0.75);
}
.private-magazine a.badge-special:hover,.private-magazine a.badge-special:focus,.private-magazine a.badge-special:active {
  color:rgb(60,140,255);
}
.badge-special {
  display: inline-block;
  background:transparent;
  color:white;

  border-radius:4px;
  padding:8px;
  text-align: left;
  font-size:100%;
}
a.badge-special:hover, a.badge-special:focus, a.badge-special:active,
span.badge-special:hover, span.badge-special:focus, span.badge-special:active {
  color:#f07e13;
  background: #fff;
  text-decoration: none;
}
.overlay.icons .badge-special  {
  margin:4px;
}
.clickable {
  cursor: pointer;
}
.bigsize {
  font-size: 22px;
}
/* End Magazine overview */

h4 a {
  color: #333333;
}
.iconspace {
  padding: 0 0.5em 0 0;
}
.overflowfade {
  position: absolute;
  bottom: 0;
  height: 32px;
  width: 100%;
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  z-index: 10;
}
.panel.published .panel-body {
  background-color: #dfd;
}
.panel.published .overflowfade {
  background: -moz-linear-gradient(top, rgba(221,255,221, 0) 0%, #ddffdd 100%);
  background: -webkit-linear-gradient(top, rgba(221,255,221, 0) 0%, #ddffdd 100%);
  background: -ms-linear-gradient(top, rgba(221,255,221, 0) 0%, #ddffdd 100%);
  background: linear-gradient(to bottom, rgba(221,255,221, 0) 0%, #ddffdd 100%);
}
.ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 15;
  background-size:cover;
  background-color: white;
  background-blend-mode: luminosity;
  transition: all 0.5s ease-out 0.2s;
}
.published .ratio,
.modal .ratio,
article.ratio {
  min-height: 0;
  background-blend-mode: normal;
}
article.ratio > a {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  text-decoration: none;
  top: 0;
  transition: background-color 0.3s ease-out 0s;
  width: 100%;
  background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(0,0,0,0.65) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(25%,rgba(0,0,0,0)), color-stop(75%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65)));
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 75%,rgba(0,0,0,0.65) 100%);
  background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 75%,rgba(0,0,0,0.65) 100%);
  background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 75%,rgba(0,0,0,0.65) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 75%,rgba(0,0,0,0.65) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#a6000000',GradientType=0 );
}

@media (min-height: 760px) {
    textarea.article_edit_dlg_description {
        height: 156px;
    }
    textarea.article_edit_dlg_remark {
        height: 94px;
    }

    div.printed_media_preview {
        max-height: 552px;
        overflow-y: auto;
    }
}
@media (max-height: 759px) {
    textarea.article_edit_dlg_description {
        height: 114px;
    }
    textarea.article_edit_dlg_remark {
        height: 54px;
    }

    div.printed_media_preview {
        max-height: 470px;
        overflow-y: auto;
    }
}

.panel:hover article.ratio > a,
.panel article.ratio > a:focus {
    background-color:rgba(0,0,0,0.2);
}
.panel:hover article.ratio {

    transition: all 0.3s ease-out 0s;
}
.panel:hover .ratio {

  background-blend-mode: normal;
    transition: all 0.3s ease-out 0s;
}
.compact .ratio {
  border-radius: 0;
}
.source-domain {
  color: #888888;
  margin-bottom: 0.5em;
}
.panel.compact {margin:0;}

.panel > .glyphicon {
  display: none;
}
.panel-footer {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
.compact .panel-footer {
    border-radius: 0;
}

.panel.published {
  position: relative;
}
.panel.published::before  {
  content: "";
  text-align: right;
  font-size: 3.33em;
  font-family: "Glyphicons Halflings";
  line-height: 100%;
  color:#f07e13;
  padding-right: 10px;
  position: absolute;
  width: 100%;
  z-index: 10;
}
.viewoptions {
  margin-bottom: 15px;
  font-size:0.9em;
  margin: 2em 0 0;
}
.viewfilter, .view {
  background-color: #eee;
  border-radius: 0 0 5px 5px;
  border: 1px solid #ccc;
/*  border-top-width: 0;*/
  padding: 10px;
}
.viewfilter .checkbox {
  margin: 2px 0;
}
.viewfilter label {
  margin-left: 0.5em;
  margin-right: 0.5em;
}
label.disabled, input:disabled {
  color:#999;

}
label.required::after {
  content: " *";
  color: red;
}
.datatables-info {
  color: #666666;
  font-size: 0.9em;
  padding-left: 0.5em;
}
.datatables-length {
  padding:8px;
  text-align: right;
}
.datatables-length label {
  font-weight: normal;
}
.datatables-length select {
  display: inline-block;
  width: auto;
  background-color: #eee;
  border: 1px solid #ccc;
  height: 2em;
  margin-top: -0.5em;
  margin-bottom: -0.4em;

}
.pagination {
  margin-top: 0;
  margin-bottom: 0;
  vertical-align: middle;
}
.pagination > li > a, .pagination > li > span {
  color:#626262;
}
.pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover {
  color:#333;
}
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
    background-color: #626262;
    border-color: #626262;
}
.ui-datepicker {
  z-index:1051 !important;
}
.btn {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.input-group-btn .btn {
  padding: 8.25px 12px; /* correct height different caused by smaller font size */
}
.panel-footer .btn,
.btn-toolbar .btn,
.modal-footer .btn {
  border-radius:1em;
  margin: 0 0 0 4px;
}
.panel-footer .btn {
  float: right;
}

.popover {
  min-width: 20em;
}

.input-group-addon .glyphicon {
  padding-right:0;
}
.input-group-addon .close {
  font-size:inherit;
}
.row .input-group, .row input, .row select {
  margin-bottom:4px;
}
.btn-primary {
  background-color:#F07E13;
  border-color:#F07E13;
  transition:all 0.2s ease-in-out;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus  {
  background-color:#d66800;
  border-color:#d66800;
}
.form-horizontal .controls {
    margin-left: 160px;
}

/*
li.disabled {display:none;}
*/
nav.publizz-navbar-menu.navbar {margin:0;}

h1 {
  margin-bottom: 20px;
}

nav.publizz-subheader-menu > .nav > li > a:focus,
nav.publizz-subheader-menu > .nav > li > a:hover,
nav.publizz-subheader-menu > .nav .open > a,
nav.publizz-subheader-menu > .nav .open > a:focus,
nav.publizz-subheader-menu > .nav .open > a:hover {
    background-color:transparent !important; border-color:transparent; color:#fff;
}

header .dropdown.open .btn-ghost{
    background-color: #F07E13;
}
.panel-footer .dropup.open {
    background-color: #ddd;
    box-shadow: inset 1px 1px 2px #bbb;
    border-radius: 5px;
    padding-left: 5px;
}
.panel-footer a,
.open .dropdown-menu a {color:#333;}
.open .dropdown-menu hr {margin:3px 0;}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
    background-color: #F07E13;
    color:white;
}

.affix {position: fixed; top:-60px; width: 100%; z-index: 1010;}
.affix-top + .spacer {margin-top:0;}
.affix + .spacer {margin-top:115px;}
.affix.no-nav + .spacer {margin-top:63px;}

.page-header .dropdown-menu > li > a {
    padding: 6px 20px;
}

.table-responsive.hide-overflow td,
.table-responsive.hide-overflow th {
  white-space: nowrap;
}

/* animate some stuff on page load */

nav.publizz-subheader-menu > .nav-tabs {
    animation-name: initNavTabs;
    animation-iteration-count: 1;
    animation-timing-function: easeinout;
    animation-duration: 0.5s;
}
nav.publizz-subheader-menu > .nav-tabs li:not(.active) .glyphicon-fire ~ .badge {
    animation-name: pulseBadge;
    animation-iteration-count: 3;
    animation-timing-function: ease-in;
    animation-duration: 0.75s;
    animation-delay:0.5s;
}

main {
    animation-name: fadeIn;
    animation-iteration-count: 1;
    animation-duration: 0.3s;
    animation-delay:0.5s;
    animation-fill-mode: backwards;
}
.overflowfade {
    animation-name: fadeIn;
    animation-iteration-count: 1;
    animation-duration: 0.3s;
    animation-delay:0.5s;
}

@keyframes initNavTabs {
    0% {
        opacity:0;
        margin-top:-64px;
    }
    100% {
        margin-top:0;
        opacity:1;
    }
}
@keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
@keyframes pulseBadge {
    0% {
        background-color:inherit;
    }
    50% {
        background-color:#f07e13;
    }
    100% {
        background-color:#777;
    }
}

/* end of animations */




.btn-transparent {
  color: #fff;
  background-color:transparent;
  border:0;
}
.btn-transparent span {
  color: #fff;
}
.btn-transparent:hover span {
  color: #f07e13;
}

/* not really needed anymore, as I've just overriden the button default style */
/* .. keeping it as backup, in case I need the transparent styles */
.btn-ghost {
  color: #ccc;
  background-color:transparent;
  border-color: #cccccc;
}
.btn-ghost:hover,
.btn-ghost:focus,
.btn-ghost:active,
.btn-ghost.active {
  color: #fff;
  background-color:rgba(0,0,0,0.1);
  border-color: #adadad;
}
.btn-ghost:active,
.btn-ghost.active {
  background-image: none;
}
.btn-ghost.disabled,
.btn-ghost[disabled],
fieldset[disabled] .btn-ghost,
.btn-ghost.disabled:hover,
.btn-ghost[disabled]:hover,
fieldset[disabled] .btn-ghost:hover,
.btn-ghost.disabled:focus,
.btn-ghost[disabled]:focus,
fieldset[disabled] .btn-ghost:focus,
.btn-ghost.disabled:active,
.btn-ghost[disabled]:active,
fieldset[disabled] .btn-ghost:active,
.btn-ghost.disabled.active,
.btn-ghost[disabled].active,
fieldset[disabled] .btn-ghost.active {
  background-color: #ffffff;
  border-color: #cccccc;
}
.btn-ghost .badge {
  color: #ffffff;
  background-color: #333333;
}
/* end of Ghost buttons */


/* select2 overrides */
/*.select2-container--bootstrap .select2-selection--single,
.select2-container--bootstrap .select2-selection--multiple
{
  height:30px;
  padding: 4px 24px 4px 12px;
}*/
/* end select2 overrides */

/* fix top margin for JSF's global messages when in a normal page.
   Global messages can also be shown in a dialog, this does not require fixing */
.container > .global-messages-outer > .global-messages {
  margin-top: 10px;
  margin-bottom: 10px;
}

.panel-footer .datatables-length {
  padding: 6px 0 0;
}

/* adjust table header styles for sortable columns */
table.table > thead > tr > th a,
table.table > thead > tr > th a:hover,
table.table > thead > tr > th a:focus {
  color: #333;
  text-decoration: none;
}

/* toggle styling for checkbox */
.switch {
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
  user-select: none;
  margin-bottom:1.5em;
}
.switch-with-dependency {
    margin-bottom:0.1em;
}
.switch .chk-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.switch .chk-toggle + label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}
.switch input.chk-toggle-round + label {
  padding: 2px;
  width: 3em;
  height: 1.5em;
  background-color: #dddddd;
  border-radius: 2em;
}
.switch input.chk-toggle-round + label::before,
.switch input.chk-toggle-round + label::after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
.switch input.chk-toggle-round + label::before {
  right: 1px;
  background-color: #f1f1f1;
  border-radius: 2em;
  transition: background 0.2s;
}
.switch input.chk-toggle-round + label::after {
  width: 1.4em;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: margin 0.2s;
}
.switch input.chk-toggle-round:checked + label::before {
  background-color: #78c878;
}
.switch input.chk-toggle-round:checked + label::after {
  margin-left: 1.5em;
}
.switch input.chk-toggle-round:disabled + label,
.switch input.chk-toggle-round:disabled ~ span.toggle-label {
    opacity:0.6;
    cursor:default !important;
}
.switch span.toggle-label {
  position: relative;
  display: block;
  white-space: nowrap;
  vertical-align: top;
  width:180px;
  float:left;
  transition: color 0.2s;
}
.switch span.toggle-label .on {
  display: none;
}
.switch span.toggle-label .off {
  display: block;
}
.switch input.chk-toggle-round:checked ~ span.toggle-label .on {
  display: block;
}
.switch input.chk-toggle-round:checked ~ span.toggle-label .off {
  display: none;
}

.switch.switch-red input.chk-toggle-round:checked + label::before {
  background-color: #c86464;
}

/* end toggle styling for checkbox */

/* Override for vertical form inside horizontal form */
.form-vertical .form-horizontal .form-group > label {
  text-align: left;
}
.form-horizontal .form-vertical .form-group > label {
  float: none;
  padding-top: 0;
  text-align: left;
  width: 100%;
}
.form-horizontal .form-vertical .form-control {
  margin-left: 0;
}
.form-horizontal .form-vertical.form-actions,
.form-horizontal .form-vertical .form-actions {
  padding-left: 20px;
}
.form-group .form-group {
  margin-bottom: 0;
}
/* end Override for vertical form inside horizontal form */

input[type=color] {
  width:3em !important;
}
fieldset.preview {
  background:#eee;
}
fieldset.preview legend {
  border:0;
  font-size:1em;
  color:#444;
  background:#eee;
  width:auto;
  border-radius:0.5em 0.5em 0 0;
  padding:2px 8px 0;
}
.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}
.preview.tablet {
  background:url(../images/tablet.png) left bottom no-repeat;
  padding: 0 0 2.6em 7.4em;
}
.preview.phone {
  background:url(../images/phone.png) left bottom no-repeat;
  padding: 0 1.37em 5.0em;
}
.preview .background {
  display: inline-block;
  padding-bottom:0.5em;
}
.preview .elements-preview.background {
  padding-bottom: 0;
  margin-bottom: 1.0em;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  width: 100%;
}
.element-preview {
  border-top: 1px solid #ccc;
  padding: 1em;
}
.magazine-sample {
  border-top:1px solid #ccc;
  border-right:1px solid #ccc;
  height:9em;
  overflow:hidden;
}
.magazine-overlay {
  display:inline-block;
  position:relative;
  width:149px;
  height:188px;
  padding:12px;
  background:url("../images/article-photo-phone-example.jpg");
  border-top: 1px solid red;
  border-right: 1px solid red;
}
.magazine-overlay + .magazine-overlay {
  border-right: none;
}
.magazine-overlay .preview.remark-icon {
  position: absolute;
  top:4px;
  right:4px;
}
.preview-tablet-title {
  color:black;
    height: 20px;
    overflow: hidden;
}
.preview-tablet-sourceurl {
  color:grey;
  font-size:0.9em;
}
.preview-tablet-sourceurl-container {
    height: 16px;
    overflow: hidden;
}
.preview-tablet-description {
  margin-top:6px;
  font-size:0.9em;
  height: 54px;
  overflow: hidden;
}
.preview-phone-title {
  padding-top:118px;
  color:white;
}
.preview-phone-sourceurl {
  color:grey;
  font-size:0.9em;
}
.preview .preview-tablet-page-no {
  display:inline-block;
  text-align: right;
  padding:0.5em 0.2em 0.5em 1.5em;
  border-bottom:1px solid #007aff;
}
.preview .preview-tablet-page-no.no-underline {
  border-bottom-color: transparent !important;
}
.preview .preview-phone-page-no {
  display:inline-block;
  padding:0.4em 0.8em;
  background-color:#007aff;
  border-radius:0.8em;
  color:white;
  font-size:0.8em;
  position: absolute;
  bottom:8px;
  right:4px;
}
.preview.unread-icon {
  color:#007aff;
  font-size:0.9em;
  font-weight: normal;
}
.preview.large.unread-icon {
  font-size:1.9em;
}
.preview.remark-icon {
  position: relative;
  color:#007aff;
  font-size:24px;
}
.preview.remark-icon .remark-icon {
  position:absolute;
  font-size:21.2px !important;
  top:0.04em;
  left:1px;
  margin:0;
}
.preview.remark-icon:hover .remark-icon {
  display: none;
}
.magazine-overlay .glyphicon-globe {
  color:#aaa;
}

.preview.bubble {
position: relative;
width: 240px;
height: 50px;
padding: 1em;
margin-top: 1em;
background: #007aff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color:white;
}

.preview.bubble .triangle {
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px 0;
border-color: #007aff;
border-right-color:transparent !important;
display: block;
width: 0;
z-index: 1;
margin-left: -15px;
top: -15px;
left: 16%;
}

/* toggle alt styling for checkbox - alternative version*/
.switch2 {
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
  user-select: none;
/*  margin-bottom:1.5em;
*/}
.switch2 .chk-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.switch2 .chk-toggle + label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}
.switch2 input.chk-toggle-round + label {
  padding: 2px;
  width: 3em;
  height: 1.5em;
  background-color: #dddddd;
  border-radius: 2em;
  margin-left: 11px;
  margin-top: 6px;
}
.switch2 input.chk-toggle-round + label::before,
.switch2 input.chk-toggle-round + label::after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
.switch2 input.chk-toggle-round + label::before {
  right: 1px;
  background-color: #f1f1f1;
  border-radius: 2em;
  transition: background 0.2s;
}
.switch2 input.chk-toggle-round + label::after {
  width: 1.4em;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: margin 0.2s;
}
.switch2 input.chk-toggle-round:checked + label::before {
  background-color: #78c878;
}
.switch2 input.chk-toggle-round:checked + label::after {
  margin-left: 1.5em;
}
.switch2 input.chk-toggle-round:disabled + label,
.switch2 input.chk-toggle-round:disabled ~ span.toggle-label {
  opacity:0.6;
  cursor:default !important;
}
.switch2 span.toggle-label {
  position: relative;
  display: block;
  vertical-align: top;
  transition: color 0.2s;
}
.switch2 span.toggle-label .on {
  display: none;
}
.switch2 span.toggle-label .off {
  display: block;
}
.switch2 input.chk-toggle-round:checked ~ span.toggle-label .on {
  display: block;
}
.switch2 input.chk-toggle-round:checked ~ span.toggle-label .off {
  display: none;
}
/* end toggle alt styling for checkbox */

/* Override for empty data table row and footer */
table.table.table-no-data >tbody>tr>td, table.table.table-no-data >tfoot>tr>td {
  border-top: 0;
}
/* end Override for empty data table row and footer */

.email-template-legend {
  margin-bottom: 15px;
}

.email-template-preview-wrapper {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  overflow-y: auto;
}

table.table > tbody > tr > td.cjs-select-item-td-fixed {
  width: 50px;
}

/**
  Styles for injections settings dropdown, with save & cancel buttons
*/
.modal-dropdown {
  width: 250px;
}
.modal-dropdown li {
  padding: 5px 10px;
}
.modal-dropdown .switch {
  margin: 0;
}
.modal-dropdown .switch .toggle-label {
  width: 180px;
}
.modal-dropdown span {
  width: 150px;
  display: inline-block;
}
.modal-dropdown input {
  width: 75px;
  display: inline-block;
}
.modal-dropdown.dropdown-menu label {
  font-weight: 400;
  margin: 0;
}
.modal-dropdown .modal-dropdown-buttons div:first-child {
  padding-right: 3px;
}
.modal-dropdown .modal-dropdown-buttons div:last-child {
  padding-left: 3px;
}
/**
  End of styles for injections settings dropdown, with save & cancel buttons
*/

/**
  Adjust switch2 styles for usage in BS dropdown-menu
*/
.dropdown-menu > li > .switch2 label {
   font-weight: 400;
}
.dropdown-menu > li > .switch2 {
  padding: 3px 20px;
}
.dropdown-menu > li > .switch2 span.toggle-label {
  margin-top: 6px;
}
/* fix a conflict with viewfilter */
.viewfilter .dropdown-menu > li > .switch2 label {
  margin-left: 0;
  margin-right: 0;
}
/**
  End of adjust switch2 styles for usage in BS dropdown-menu
*/

/**
  Adjust switch2 styles to create 'inline' style switch for forms
*/
.switch2-inline {
  display: inline-block;
}
.switch2-inline .toggle-label {
  padding-top: 7px;
  padding-left: 10px;
  padding-right: 10px;
  float: left;
}
.switch2-inline .toggle-label > label {
  font-weight: 400;
}
.switch2-inline > label {
  float: left;
}
/**
  End of adjust switch2 styles for usage in BS dropdown-menu
*/
.switch2.switch2-red input.chk-toggle-round:checked + label::before {
  background-color: #c86464;
}


.form-group-no-bottom-margin {
    margin-bottom: 0;
}

.form-group-small-bottom-margin {
    margin-bottom: 5px;
}

.color.form-control[readonly] {
  cursor:text;
}

.btn.reset {
  position: absolute;
  right: 12px;
  top: 3px;
  border:0;
  background:transparent;
  color:grey;
}

.input-group-addon.reset .glyphicon {
    color: grey;
}

.btn.reset:hover .glyphicon, .input-group-addon.reset:hover .glyphicon{
  color:black;
}

.reset .glyphicon{
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

/**
  Radio-button labels should use normal font weight
*/
div.radio-vertical div>label {
  font-weight: normal;
}

/**
  Styles for table within a dialog
*/
div.table-modal-dialog .modal-body {
  padding: 0;
}
div.table-modal-dialog .panel {
  margin: 0;
  border: 0;
}
div.table-modal-dialog .panel-heading {
  border-radius: 0;
}

/* correction on z ordering of colorpicker color display */
.minicolors-theme-default .minicolors-swatch {
  z-index: 10;
}

/* login form styling */
.panel-login {
  margin: 4em auto;
  max-width: 500px;
  border-color: #ddd;
}
.panel-login .panel-heading {
  background-color: #302420;
  padding: 1.5em;
}
.panel-login .panel-heading h2 {
  color:white;
  line-height: 1.6em;
  padding-left:1.3em;
}
.panel-login .panel-body {
  padding:1em 5.3em 3em;
}
.panel-login .panel-body .alert {
  margin-left: -4em;
  margin-right: -4em;
}
.panel-login .form-control, .forgot-password {
  margin:0.4em 0;
  display: inline-block;
}
/* end login form styling */

.margin-bottom-5 {
    margin-bottom: 5px;
}
.margin-bottom-10 {
    margin-bottom: 10px;
}
.margin-bottom-15 {
    margin-bottom: 15px;
}

/* busy-indicator (Joost version)*/
.busy-indicator {
    z-index: 990;
    position: absolute;
    display: none;
}
/* fullscreen class can be added, position fixed is then used for real fullscreen overlay */
.busy-indicator.fullscreen {
    position: fixed;
}
.is-busy .busy-indicator {
    display: flex;
    align-items: center;
}
.busy-indicator span {
  position: absolute;
}
.busy-indicator.busy-indicator-transparent {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: progress;
}
.busy-indicator.busy-indicator-block {
    background-color: rgba(0, 0, 0, 0.3);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: progress;
}
.busy-inner {
  background:rgba(255,255,255,0.8);
  padding:3em;
  border-radius:1em;
  box-shadow:0 1px 10px rgba(0,0,0,0.3);
  margin:0 auto;
}
.loader {
  position: relative;
  border-width: 0.8em;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.2);
  border-top-color: #f07e13;
  margin: 10px auto;

  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 0.9s infinite linear;
  animation: load8 0.9s infinite linear;
}
.loader,
.loader:after {
  border-radius: 50%;
  width: 5em;
  height: 5em;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* end of busy-indicator */
/*styles for toast message alert*/
.toast-message {
    bottom: 24px;
    left: 24px;
    position: fixed;
    z-index: 2000;
}

.clear-alert {
    margin-bottom: 0;
}
/*end styles for toast message alert*/

.tile-image {
  position: relative;
  overflow: hidden;
  height: 144px;
  text-align: center;
  white-space: nowrap;
}

.tile-image img {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 3px;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

/*align images vertically*/
.tile-image::before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

.tile-image a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

/*fix issue with options button incorrect alignment*/
.panel-footer .dropup.open {
  padding-right: 5px;
  margin-right: -5px;
}

/* Top Magazine styles */
.main-top-item {
    margin: 0;
    position: relative;
    border: 1px solid #DDD;
}

.main-top-item .item-image {
    height: 60px;
    border-right: 1px solid #DDD;
}

.main-top-item .item-title {
    padding-top: 7px;
    font-size: 14px;
}

.main-top-item .item-value {
    padding-top: 15px;
    white-space: nowrap;
    font-size: 20px;
    padding-left: 25px;
}

.main-top-item .item-bar {
    height: 60px;
    border-left: 1px solid #DDD;
}

.main-top-item .item-image, .short-top-item .item-image {
    border-bottom: 1px solid #DDD;
    background: no-repeat center center;
    z-index: 15;
    background-size: cover;
}

.main-top-item .item-bar, .short-top-item .item-bar {
    position: absolute;
    background-color: #ecffe4;
    width: 100%;
}

.short-top {
    cursor: default;
}

.short-top:hover {
    border: 1px solid orange;
}

.short-top-item {
    position: relative;
    margin: 0;
    border-top: 1px solid #FFF;
}

.short-top-item .item-image {
    height: 30px;
    border: 1px solid #DDD;
    border-right: 0;
}

.short-top-item .item-image .shadow {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(80,80,80,0.25);
}

.short-top-item .item-title {
    top: 4px;
    padding-left: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #FFF;
    text-shadow: 0px 1px 3px #000;
    position: absolute;
    z-index: 20;
    width:100%;
}

.short-top-item .item-bar .item-value {
    margin: 4px 0 0 8px;
}

.short-top-item .item-bar {
    height: 30px;
    border: 1px solid #DDD;
    border-left: 0;
}

.no-margin-bottom {
    margin-bottom: 0 !important;
}

/* end of Top Magazine styles */

/*
  Dashboard styles
*/

#charts-affix {
  top: 70px;
}

@media (min-width: 768px) and (max-width: 991px) {
  #charts-affix {
    width: 165px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  #charts-affix {
    width: 220px;
  }
}

@media (min-width: 1200px) {
  #charts-affix {
    width: 270px;
  }
}

/* style to override bootstrap's rule ".form-inline .form-group { display: inline-block; }"*/
.form-inline .display-block {
  display: block;
}

.dropdown.radio-dropdown {
  display: inline;
}
.dropdown.radio-dropdown > ul li a {
  cursor: default;
}
.dropdown.radio-dropdown > ul li a.radio-dropdown-selected {
  /*background-color: #e6e6e6;*/
  font-weight: 700;
}

/* style to override color from publizz-custom */
.dashboard-nav-menu > ul > li > a:focus, .dashboard-nav-menu > ul > li > a:hover {
  background-color:transparent !important;
  border-color:transparent;
  color: #555;
}

.panel-header-btn {
    color: #333;
    background-color:transparent;
    border:0;
}
.panel-header-btn span {
    color: #333;
}
.panel-header-btn:hover span {
    color: #f07e13;
}

.inline {
    display: inline;
}

.glyphicons.large-icon {
    font-size: 22px;
    margin-top: -3px;
}

.position-relative {
  position: relative;
}

.printed-media-tag {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  padding: 5px;
  margin: -1px 0 0 -1px;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 11px;
  background-color: #F07E13;
  font-size: 48px;
  color: #FFF;
  opacity: 0.9;
  z-index: 16;
}

#back-to-top-left a, #back-to-top-right a {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    z-index:800;
    display:none;
}

#back-to-top-left a {
    left: 20px;
}

#back-to-top-right a {
    right: 20px;
}

#back-to-top-left .tooltip, #back-to-top-right .tooltip {
    position:fixed;
}

@media (max-width: 861px) {
    #back-to-top-left, #back-to-top-right {
        height: 30px;
    }
}

@media (min-width: 992px) and (max-width: 1081px) {
    #back-to-top-left, #back-to-top-right {
        height: 30px;
    }
}

@media (min-width: 1200px) and (max-width: 1281px) {
    #back-to-top-left, #back-to-top-right {
        height: 30px;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
  .printed-media-tag {
    padding: 4px;
    font-size: 36px;
  }
}

.chart-tooltip {
    bottom: 55px;
    position: absolute;
    right: 30px;
    max-width: 300px;
}

.chart-tooltip .close {
    font-size: 12px;
    margin-bottom: 10px;
    margin-left: 10px;
}

.chart-tooltip label {
    font-size: 11px;
    vertical-align: middle;
    margin-left: 5px;
}

.article-external-link {
    color: #f07e13;
}
a.article-external-link:hover {
    color: #d66800;
}

label.checkbox-inline.no-padding-top {
    padding-top: 0;
}

/*forgot_password page css*/

form#requestEmailFrm input[readonly], form#requestEmailFrm input[disabled] {
    pointer-events: none;
}
div#requestEmailResult .alert .ui-message-icon {
    float: left;
    font-size: 2em;
    line-height: 0.714285715;/*=1.42857143/2 see /ui/3dparty/bootstrap-3.3.6-01/css/less/scaffolding.less*/
}
div#requestEmailResult .alert .ui-message {
    padding-left: 3em;
    text-align: left;
}

/*end forgot_password page css*/


/*change_password page css*/

form#changePasswordFrm input[readonly], form#changePasswordFrm input[disabled] {
    pointer-events: none;
}
div#changePasswordResult .alert .ui-message-icon {
    float: left;
    font-size: 2em;
    line-height: 0.714285715;/*=1.42857143/2 see /ui/3dparty/bootstrap-3.3.6-01/css/less/scaffolding.less*/
}
div#changePasswordResult .alert .ui-message {
    padding-left: 3em;
    text-align: left;
}
div#changePasswordResult .alert .ui-message-link {
    float: right;
    color: inherit;
    text-decoration: underline;
    margin-top: 15px;
}

/*end change_password page css*/


/* Gallery styles */

div.gallery-container {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: auto;
}

@media (min-height: 680px) {
    div.gallery-container {
        max-height: 540px;
    }
}

@media (max-height: 679px) {
    div.gallery-container {
        max-height: 350px;
    }
}

div.gallery-item {
    border: none;
}

div.gallery-item img {
    width: 100%;
    height: auto;
}

div.gallery-item img.selected {
    background-color: #337ab7;
}

/* End Gallery styles */
/* empty page / error page styling */
.empty-page {
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none; 
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor: default;
    text-shadow: 1px 1px 0 #fff;
}
.empty-page .extra-large-icon {
    font-size:14em;
    padding-top:0.3em;
    color:#ddd;
}
.empty-page .title {
    color:#888;
}
.empty-page .subtext {
    font-weight:bold;
    color:#aaa;
}
.empty-page.error-page .extra-large-icon {
    color:#fff;
    font-weight:bold;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
.empty-page.error-page .title {
    color:#555;
}
.empty-page.error-page .subtext {
    color:#888;
}
.empty-page.error-page .extra-large-icon {
    display: inline-block;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
    animation-duration: 120ms;
    animation-iteration-count: infinite;
    animation-name: shake;
    animation-timing-function: ease-in-out;
    margin:0 10%;
}
.empty-page.error-page .extra-large-icon:hover {
    animation-name: none;
    color:#ddd;
    text-shadow: 1px 1px 0 #fff;
    padding-top:0.1em;
    margin-bottom:-0.18em;
    font-size:18em;
    transition:all 1s 0.5s;
}

@keyframes shake {
  20% {
    transform: translate(0, 2px) rotate(0.4deg); }
  40% {
    transform: rotate(-0.4deg); }
  60% {
    transform: translate(1px, 0) rotate(0.4deg); }
  80% {
    transform: rotate(-0.3deg); }
  0%, 100% {
    transform: translate(0, 0) rotate(0); } 
    }
/* end empty page / error page styling */

/* Nieuwsbron simple ui */
  .jumbotron h2 {
      font-size:1.6em;
      margin-bottom:1em;
  }
  .jumbotron p,
  .jumbotron li {
      font-size:1.2em;
  }
  .panel-user {
      padding:3em;
      border:2px solid #eee;
  }
  .panel-user ol {
      list-style: none;
      counter-reset: item;
      padding-left:0;
  }
  .panel-user ol li {
      font-weight: bold;
      font-size: 1.1em;
      margin-top:1.5em;
      margin-bottom:0.5em;
      counter-increment: item;
  }
  .panel-user ol li:before {
      margin-right: 10px;
      content: counter(item);
      background: #F07E13;
      border-radius: 100%;
      color: white;
      font-size: 1.3em;
      width: 1.4em;
      text-align: center;
      display: inline-block;
   }
  .message-trial {
    border-bottom:1px solid #ddd;
    margin:0 -16px 10px -16px;
    padding-bottom:0.5em;
  }
/* End Nieuwsbron simple ui */