html, body, h1, h2, h3, p, ol, ul, li, a {
  padding: 0;
  border: 0;
  margin: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #fff;
  background-color: #474747;
  width: 100%;
}

* {
  border-radius: 0 !important;
}

.btn:focus,
.btn:active,
.btn.active,
.btn:focus:active,
.form-control:focus,
.form-control:active,
.form-control.active,
.form-control:focus:active,
a:focus,
a:active,
a.active,
a:focus:active {
  background-image: none;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/*
	"Disable" AutoFill for Safari
	https://stackoverflow.com/questions/22661977/disabling-safari-autofill-on-usernames-and-passwords
	https://gist.github.com/jeroenvisser101/9254cf27df85cf1c853aee17e4b49766
*/
input[autocomplete="off"]::-webkit-contacts-auto-fill-button,
input[autocomplete="off"]::-webkit-credentials-auto-fill-button {
	visibility: hidden;
	display: none !important;
	pointer-events: none;
	height: 0;
	width: 0;
	margin: 0;
}

.container-fluid {
  margin-right: auto;
  margin-left: auto;
  max-width: 1024px; /* or 950px */
  padding: 0px;
  margin: 10px auto 0px;
}

.container {
  /* font-size: 1rem; */
  padding-right: 0px;
  padding-left: 0px;
}

h2 {
  font-size: 14pt;
  text-transform: uppercase;
  font-weight: normal;
}
h3 {
  font-size: 12pt;
  font-weight: normal;
}
h4 {
  font-size: 10pt;
}

td {
  color: #555;
}

div {
  color: #555;
}

input::placeholder {
  color: rgba(0,0,0,0.3) !important;
}

.th {
  color: #f0f0f0;
  background: #7f7f7f;
  font-weight: normal;
  height: 26px;
  text-align: center;
}
.td {
  color: #7f7f7f;
  font-weight: normal;
  height: 26px;
}

.tdblue {
  background-color: #e3e8ee;
}

.error {
  font-weight: bold;
  color: red;
  font-size: 10pt;
}
.shareerror {
  font-weight: bold;
  color: white;
  background: red;
}
.info {
  font-weight: bold;
  color: #080;
  font-size: 10pt;
}
.menudefault {
  color: #9cf;
}
.menuselected {
  color: red;
}
.caption {
  text-align: right;
}

table {
  border-collapse: separate;
}

table.fixed {
	table-layout: fixed;
  border-collapse: collapse;
}
table.fixed th,
table.fixed td {
	overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
	border: 0px solid red;
}

#table {
  display: table;
}
/* .row {display:table-row;} */
.cell {
  display: table-cell;
}

a {
  text-decoration: none;
  color: #444;
}
a:hover {
  text-decoration: underline;
  color: #444;
}

.page-link {
  text-decoration: none;
  padding: 0.25rem 0.25rem;
}

.page-item.active .page-link {
  z-index: 1;
  color: #000;
  background-color: #cccccc;
  border-color: #ccc;
}

/* Featherlight elements */
span.featherlight-close-icon {
	color: rgba(0,0,0,0.6) !important;
	font-weight: bold !important;
	font-size: 1.3em !important;
	width: 2.2em !important;
}
.featherlight .featherlight-content {
	/* margin-top: -20em; */
}

/* Date-Picker */
.ui-state-highlight {
	border: 1px solid rgba(0,0,0,0.3);
}

/* Navigation : Menü  */
.navbar {
  background: #c0c0c0 !important;
}

.dropdown {
  border-radius: 0;
  border: 0;
}
.dropdown-toggle:hover {
}
.dropdown-menu {
  background: #c0c0c0;
  border-top: 1px solid #999;
  border-left: 1px solid #666;
  border-right: 1px solid #666;
  border-bottom: 1px solid #666;
	margin: 0;	/* Prevent permanent dropdown toggling */
  left: -1px;
  padding: 0;
}
.dropdown-item:hover {
  background: #f9f9f9;
  color: #000;
}
.dropdown-menu a {
  color: #000;
}

.navbar {
  z-index: 100;
  padding: 0;
}
.navbar li {
  border-right: 1px solid #666666;
}
.navbar-nav a {
  font-size: 12px;
  margin: 0 0 0 0;
  line-height: 24px;
  padding: 6px 20px !important;
  text-decoration: none;
  text-transform: uppercase;
  display: block;
}
.navbar .nav-item .nav-link {
  color: #000;
}
.navbar-nav a.active {
  color: #fff !important;
  background: #666666;
}
.nav-item:hover {
  background: #f9f9f9;
  color: #000;
}
.navbar-nav .nav-link:hover {
  background: #fff;
  color: #000 !important;
}
.navbar-nav.ml-auto {
}

.navbar ul li:hover > ul,
.navbar ul li:focus-within > ul,
.navbar ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

.navtext {
  display: block !important;
  /*border: none !important;*/
  line-height: 24px;
  padding: 6px 20px !important;
}

.card-content {
  padding: 0.75rem 1.25rem;
}

/* ./Navigation : Menü */

#content {
  border-left: 0px solid #adf;
}
#content table {
  border: 0px solid black;
}
#content th {
  height: 10px;
  text-align: right;
  font-weight: normal;
  padding-right: 5px;
}

#frame .loginfo {
  height: 20px;
  padding: 5px;
}

.share_edit {
  text-align: right;
  /*padding-right: 10px;*/
  width: 45px;
}

.waveupload {
  height: 50px;
  width: 100%;
  margin-top: 3px;
  border: 0px solid black;
}

.coverupload {
  height: 162px;
  width: 100%;
}

/* Input-Box
================================*/

.inputbox {
  z-index: 100;
  visibility: hidden;
  position: absolute;
  border: 1px solid #aaa;
  height: 277px;
  /* width wird automatisch aus attached Eingabefeld ermittelt */
}

.hidden {
  display: none;
}

/* About
================================*/
#aboutOverlay .title {
  font-size: 15pt;
}

#aboutOverlay .text {
  margin-top: 8px;
  font-size: 11pt;
}

#aboutOverlay .providedby {
  margin-top: 8px;
  font-size: 8pt;
}

#aboutOverlay a {
  color: #555;
}

#aboutOverlay a:hover {
  color: #222;
}

/* Footer
================================*/

.footer {
  height: 22px;
  padding: 5px;
  margin: 0 20px;
}

.footer a {
  color: #666;
}

.footer a:hover {
  text-decoration: none;
  color: #666;
}

/* Grid ArtistReports */
table.gridArtistReports td {
  padding: 4px 4px !important;
  text-align: left;
  /* filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ededed', EndColorStr='#b5acb4');
	background-image: -moz-linear-gradient(top, #ededed, #b5acb4);
	background-image: -ms-linear-gradient(top, #ededed, #b5acb4);
	background-image: -o-linear-gradient(top, #ededed, #b5acb4);
	background-image: -webkit-linear-gradient(top, #ededed, #b5acb4);
	background-image: linear-gradient(top, #ededed, #b5acb4); */
  border: 0;
  /* text-shadow: white 0px 1px 0px; */
}

/*
Slider for input checkbox
 */
.switch input {
  display: none;
}
.switch {
  display: inline-block;
  width: 30px;
  height: 15px;
  /* margin:8px; */
  /* transform:translateY(50%); */
  position: relative;
}

.slider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 0px !important;
  box-shadow: 0 0 0 2px #777, 0 0 4px #777;
  cursor: pointer;
  border: 4px solid transparent;
  overflow: hidden;
  transition: 0.4s;
}
.slider:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background: #777;
  border-radius: 0px;
  transform: translateX(-15px);
  transition: 0.4s;
}

input:checked + .slider:before {
  transform: translateX(15px);
  background: #007bff;
}
input:checked + .slider {
  box-shadow: 0 0 0 2px #007bff, 0 0 2px #007bff;
}

/* Grid myprofile */
table.gridMyProfile td {
  padding: 4px 4px !important;
  /* text-align: right; */
  /* filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ededed', EndColorStr='#b5acb4');
	background-image: -moz-linear-gradient(top, #ededed, #b5acb4);
	background-image: -ms-linear-gradient(top, #ededed, #b5acb4);
	background-image: -o-linear-gradient(top, #ededed, #b5acb4);
	background-image: -webkit-linear-gradient(top, #ededed, #b5acb4);
	background-image: linear-gradient(top, #ededed, #b5acb4); */
  border: 0;
  /* text-shadow: white 0px 1px 0px; */
}

/* Grid Releases */
/* 
table .gridReleases,
.gridReleases tr {
   margin: 20px;
} */

.gridReleases .header {
  background-color: #c0c0c0;
  color: #666;
  font-style: normal !important;
}

.gridReleases .header th {
  padding: 8px 10px !important;
  text-align: left;
  /* filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ededed', EndColorStr='#b5acb4');
	background-image: -moz-linear-gradient(top, #ededed, #b5acb4);
	background-image: -ms-linear-gradient(top, #ededed, #b5acb4);
	background-image: -o-linear-gradient(top, #ededed, #b5acb4);
	background-image: -webkit-linear-gradient(top, #ededed, #b5acb4);
	background-image: linear-gradient(top, #ededed, #b5acb4); */
  border: 0;
  /* text-shadow: white 0px 1px 0px; */
}

.gridReleases .header a {
  color: #444;
}

.gridReleases td,
.gridReleases th {
  /* padding: 8px 10px !Important; */
  text-align: left;
}

.gridReleases .tr1 {
  background: #fafafa;
  background-color: #fafafa;
}

.gridReleases .tr1:hover,
.gridReleases .tr2:hover {
  background: #ededed;
  /*-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out; */
}

.gridReleases td .button {
  margin-top: -4px;
  outline: none;
}

.tblintblrel {
  width: 984px;
  padding: 8px 10px !important;
  margin: 0;
}

.tblintblrel td {
  padding-right: 8px !important;
}

.statTooltip {
  background-color: red;
}

.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #fff;
  text-align: center;
  background-color: #7f7f7f;
  border-radius: 0.25rem;
  font-size: 0.8em;
}

.tooltip.bs-tooltip-auto[x-placement^='top'] .arrow::before,
.tooltip.bs-tooltip-top .arrow::before {
  margin-left: -3px;
  content: '';
  border-width: 5px 5px 0;
  border-top-color: #7f7f7f;
}

/* Grid
================================ */

.topicbackground,
.topictitle,
.subtopictitle {
  background: #fff;
  padding: 15px !important;
}

table .grid,
.grid tr {
  background-color: #f9f9f9;
}

.grid .header th,
.grid thead {
  text-align: left;
  background-color: #c0c0c0;
  /* filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ededed', EndColorStr='#b5acb4');
	background-image: -moz-linear-gradient(top, #ededed, #b5acb4);
	background-image: -ms-linear-gradient(top, #ededed, #b5acb4);
	background-image: -o-linear-gradient(top, #ededed, #b5acb4);
	background-image: -webkit-linear-gradient(top, #ededed, #b5acb4);
	background-image: linear-gradient(top, #ededed, #b5acb4); */
  border: 0;
	padding: 0.3em;
}

.grid .header th label {
	margin: 0;
}

.grid thead {
  text-align: left;
  background-color: #c0c0c0;
}

.grid .header a {
  color: #444;
}

.grid th,
.gridrel th {
  background-color: #c0c0c0;
  padding: 2px 2px; /* oben, rechts, unten, links */
  text-align: left;
}

.grid td {
  padding: 2px 0px 2px 2px; /* oben, rechts, unten, links */
  text-align: left;
  border-bottom: 1px solid #bbb;
}

/* releases.php design */
.gridrel tbody {
  padding: 2px 0px 2px 2px; /* oben, rechts, unten, links */
  text-align: left;
  border-bottom: 1px solid #bbb;
}

.gridrel td {
  padding: 2px 0px 2px 2px; /* oben, rechts, unten, links */
  text-align: left;
}

.gridrel td,
.gridrel th {
	border: 0px solid red;
}

.gridrel .tr1:hover,
.gridrel .tr2:hover {
  background: #e0f2fa;
}

.grid .tr1 {
  background: #ffffff;
}

.gridrel div.waveFormBox {
	display: flex;
	justify-content: space-around;
	align-items: center;
	border: 0px solid red;
}
.gridrel div.waveFormBox > div {
	border: 0px solid green;
}

/*
.grid .tr1:hover, .grid .tr2:hover {
	background: #ededed;
}
*/

.grid .tr2 {
  background: #f4f4f4;
}

.grid td .button {
  margin-top: -4px;
  outline: none;
}

.grid {
  background-color: white;
}

.footer {
  background-color: white;
}

/* .grid-20 {
}

.grid-30 {
} */

table .grid-30,
.grid-30 tr {
  background-color: #f9f9f9;
}

.calendar td,
.calendar th {
  border-left: 1px solid #f6f6f6 !important;
  padding: 8px 10px !important;
  text-align: center !important;
}

.calendar td:first-child,
.calendar th:first-child {
  text-align: left !important;
}

.inverse {
  background: #999;
  color: #fff;
}

/* Grid Releases
================================ */
.trackslist td {
  padding: 14px 10px 8px;
  vertical-align: top;
}

.trackslist .button {
  margin-right: 5px;
  outline: none;
}

.trackslist select {
  padding: 0;
  border: 0;
}

.toggle_container,
.toggle_container_tracks {
  width: 993px;
  padding: 0.5em 0 0 0;
}

.toggle_container label,
.toggle_container_tracks label {
  margin-right: 10px;
}

tr.myDragClass {
  border: 1px dotted;
}

tr.myDragClass td {
  color: #ffffff;
  background-color: #999999;
  /* border-style: dotted; */

  /*filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#c4c4c4', EndColorStr='#908f8f');
	background-image: -moz-linear-gradient(top, #c4c4c4, #908f8f);
	background-image: -ms-linear-gradient(top, #c4c4c4, #908f8f);
	background-image: -o-linear-gradient(top, #c4c4c4, #908f8f);
	background-image: -webkit-linear-gradient(top, #c4c4c4, #908f8f);
	background-image: linear-gradient(top, #c4c4c4, #908f8f); */
}

#details td {
  background: #e0edff;
}
#details table table {
  border: 1px solid #aaa;
  background: #fff;
}
#details table table td {
  background: #fff;
}
#suchform {
  text-align: center;
}
/* #buttonbar {
} */
#buttonbar table {
  border: 0px solid #adf;
  border-top: 1px solid #adf;
}

.btn-primary {
	background-color: rgba(20,120,170,1);
}
.btn-primary:hover, 
.btn-primary:focus {
	background-color: rgba(10,145,185,1);
}
.btn-primary:disabled, .btn-primary:disabled:hover {
	background-color: rgba(100,100,100,1);
}

/*
Audio: Layout Promotion
 */
.buffered {
  height: 20px;
  position: relative;
  border: 1px solid #eee;
  /*background: #EEE;*/
  max-width: 100%;
}

.audioControl {
  white-space: nowrap !important;
}

.centerContentDiv {
  /* white-space:nowrap!important; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-squared-default-plain {
  width: 4vw !important;
  height: 4vw !important;
  font-size: 4rem;
}

.btn-squared-default-plain:hover {
  border: 0px solid white;
}

#buffered-amount {
  display: block;
  height: 100%;
  /* background-color: #777; */
  width: 0;
}

.progress {
  margin-top: -20px;
  height: 20px;
  position: relative;
  max-width: 100%;
}

#progress-amount {
  display: block;
  height: 100%;
  background-color: #0081fc;
  width: 0;
}

/* Button
================================= */

.button {
  color: #444;
  background-color: #c0c0c0;
  border: 1px solid #999999;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#c0c0c0', EndColorStr='#c0c0c0');
  background-image: -moz-linear-gradient(top, #c0c0c0, #c0c0c0);
  background-image: -o-linear-gradient(top, #c0c0c0, #c0c0c0);
  background-image: -webkit-gradient(
    linear,
    center top,
    center bottom,
    from(#c0c0c0),
    to(#c0c0c0)
  );
  background-image: -webkit-linear-gradient(top, #c0c0c0, #c0c0c0);
  background-image: linear-gradient(top, #c0c0c0, #c0c0c0);
  padding: 5px 15px;
  /* text-shadow: white 0px 1px 1px; */
  text-transform: uppercase;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  outline: none !important;
  display: inline-block;
}

.button:hover {
  color: #444;
  text-decoration: none;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e8e8e8', EndColorStr='#e8e8e8');
  background-image: -moz-linear-gradient(top, #e8e8e8, #e8e8e8);
  background-image: -o-linear-gradient(top, #e8e8e8, #e8e8e8);
  background-image: -webkit-gradient(
    linear,
    center top,
    center bottom,
    from(#e8e8e8),
    to(#e8e8e8)
  );
  background-image: -webkit-linear-gradient(top, #e8e8e8, #e8e8e8);
  background-image: linear-gradient(top, #e8e8e8, #e8e8e8);
  outline: none !important;
}

.buttonAudio {
  color: #444;
  background-color: #c0c0c0;
  border: 1px solid #999999;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#c0c0c0', EndColorStr='#c0c0c0');
  background-image: -moz-linear-gradient(top, #c0c0c0, #c0c0c0);
  background-image: -o-linear-gradient(top, #c0c0c0, #c0c0c0);
  background-image: -webkit-gradient(
    linear,
    center top,
    center bottom,
    from(#c0c0c0),
    to(#c0c0c0)
  );
  background-image: -webkit-linear-gradient(top, #c0c0c0, #c0c0c0);
  background-image: linear-gradient(top, #c0c0c0, #c0c0c0);
  padding: 3px 3px;
  margin: 3px 0px;
  width: 90px;
  /* text-shadow: white 0px 1px 1px; */
  text-transform: uppercase;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  display: inline-block;
}

.buttonAudio:hover {
  color: #444;
  text-decoration: none;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e8e8e8', EndColorStr='#e8e8e8');
  background-image: -moz-linear-gradient(top, #e8e8e8, #e8e8e8);
  background-image: -o-linear-gradient(top, #e8e8e8, #e8e8e8);
  background-image: -webkit-gradient(
    linear,
    center top,
    center bottom,
    from(#e8e8e8),
    to(#e8e8e8)
  );
  background-image: -webkit-linear-gradient(top, #e8e8e8, #e8e8e8);
  background-image: linear-gradient(top, #e8e8e8, #e8e8e8);
}

.buttonBlue {
  color: white;
  background-color: #4d94d7;
  border: 1px solid #317ac2;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d94d7', EndColorStr='#4d94d7');
  background-image: -moz-linear-gradient(top, #4d94d7, #4d94d7);
  background-image: -ms-linear-gradient(top, #4d94d7, #4d94d7);
  background-image: -o-linear-gradient(top, #4d94d7, #4d94d7);
  background-image: -webkit-gradient(
    linear,
    center top,
    center bottom,
    from(#4d94d7),
    to(#4d94d7)
  );
  background-image: -webkit-linear-gradient(top, #4d94d7, #4d94d7);
  background-image: linear-gradient(top, #4d94d7, #4d94d7);
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  padding: 5px 15px;
  text-shadow: #317ac2 0px 1px 1px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  display: inline-block;
}

.buttonBlue:hover {
  color: white;
  text-decoration: none;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#1b5bb9', EndColorStr='#1b5bb9');
  background-image: -moz-linear-gradient(top, #1b5bb9, #1b5bb9);
  background-image: -ms-linear-gradient(top, #1b5bb9, #1b5bb9);
  background-image: -o-linear-gradient(top, #1b5bb9, #1b5bb9);
  background-image: -webkit-gradient(
    linear,
    center top,
    center bottom,
    from(#1b5bb9),
    to(#1b5bb9)
  );
  background-image: -webkit-linear-gradient(top, #1b5bb9, #1b5bb9);
  background-image: linear-gradient(top, #1b5bb9, #1b5bb9);
}

.buttonGreen {
  color: white;
  background-color: #4991a9;
  border: 1px solid #166782;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4991a9', EndColorStr='#4991a9');
  background-image: -moz-linear-gradient(top, #4991a9, #4991a9);
  background-image: -ms-linear-gradient(top, #4991a9, #4991a9);
  background-image: -o-linear-gradient(top, #4991a9, #4991a9);
  background-image: -webkit-gradient(
    linear,
    center top,
    center bottom,
    from(#4991a9),
    to(#4991a9)
  );
  background-image: -webkit-linear-gradient(top, #4991a9, #4991a9);
  background-image: linear-gradient(top, #4991a9, #4991a9);
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  padding: 5px 15px;
  text-shadow: #2e7b94 0px 1px 1px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  display: inline-block;
}

.buttonGreen:hover {
  color: white;
  text-decoration: none;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2E7B94', EndColorStr='#2E7B94');
  background-image: -moz-linear-gradient(top, #2e7b94, #2e7b94);
  background-image: -ms-linear-gradient(top, #2e7b94, #2e7b94);
  background-image: -o-linear-gradient(top, #2e7b94, #2e7b94);
  background-image: -webkit-gradient(
    linear,
    center top,
    center bottom,
    from(#2e7b94),
    to(#2e7b94)
  );
  background-image: -webkit-linear-gradient(top, #2e7b94, #2e7b94);
  background-image: linear-gradient(top, #2e7b94, #2e7b94);
}

/**************************/

/* Sales Detailed */

table.sales-report {
	width: 100%;
	table-layout: fixed; 
	border: 0px solid red;
	background: rgba(0,0,0,.1);
}
table.sales-report td {
	background: rgb(255,255,255);
}
table.sales-report td:nth-child(1) {
	text-align: right;
}
table.sales-report div.title {
	padding-bottom: .5em;
}
table.sales-report div.no-values {
	color: rgba(0,0,0,.3);
}

td.sales-detailed {
	/*line-height: 1.2;*/
	border: 0px solid red;
}
td.sales-detailed div.boxOuter {
	/* Box Sales/Streams/Artists */
	width: 100%; 
	display: flex; 
	flex-direction: row; 
	justify-content: space-between; 
	align-items: flex-start; 
	border: 0px solid blue;
}
td.sales-detailed div.boxOuter + div {
	margin-top: .2em;
}
td.sales-detailed div.boxInner {
	/* Die 4 Spalten */
	display: flex; 
	flex-direction: column; 
	justify-content: center; 
	align-items: center; 
	border: 0px solid green;
}
td.sales-detailed div.boxInner.cols2 {
	width: 49%;
}
td.sales-detailed div.boxInner.cols3 {
	width: 32.5%;
}
td.sales-detailed div.boxInner.cols4 {
	width: 24%;
}
td.sales-detailed div.boxInner div.box {
	/* Ein Datensatz (eine Zeile in der Spalte) */
	display: flex; 
	flex-direction: row; 
	justify-content: space-between; 
	align-items: center; 
	width: 100%;
}
td.sales-detailed div.boxInner div.box > div {
	/* Die Werte in einer Zeile */
	border: 0px solid blue;
}
td.sales-detailed div.boxInner div.box > div:nth-child(1) {
	/* Track: Title */
	overflow:hidden; 
	white-space:nowrap; 
	text-overflow:ellipsis;
	padding-right: .2em;
}
td.sales-detailed div.boxInner div.box > div:nth-child(2) {
	xwidth: 33.9%; 
	text-align: right;
}
td.sales-detailed div.boxInner div.total > div {
	font-weight: bold;
	color: rgba(0,0,0,.7);
}
td.sales-detailed div.boxInner div.box + div {
	border-top: 1px solid rgba(0,0,0,.05);
}
td.sales-detailed div.boxInner div.box:nth-child(odd) {
	background: rgba(100,100,100,.07);
}

/** BOOTSTRAP CUSTOMIZE  **/

.w-40 {
  width: 40% !important;
}

.w-auto {
  width: auto !important;
}
button {
  text-transform: uppercase !important;
  font-size: 0.8rem !important;
}

.btn-default {
  color: #666;
  background-color: #fff;
  border-color: #ccc;
}

.btn-default:hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.btn-group-lg > .btn,
.btn-lg {
  padding: 1px 5px;
  /*
		width: 2em;
		height: 2em;*/
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0px;
}

.btn-lg-pt {
  padding: 2px 5px;
  width: 2em;
  height: 2em;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0px;
}

.btn-custom-lg {
  width: auto;
  height: auto;
}

.btn-sm,
.btn-group-sm > .btn {
  border-radius: 0px;
}
.btn-xs,
.btn-group-xs > .btn {
  padding: 1px 5px;
  font-size: 12px;
  border-radius: 0px;
}
.btn-month {
	width: 10em;
}

.input-group-prepend {
  width: 30%; /*adjust as needed*/
}

.input-group-text {
  background-color: #f9f9f9;
  text-align: right;
  border: 0px;
}

div.at-select div.input-group-prepend {		/* Releases: Artist/Track-Select */
	width: 3.7em;
}

div.input-group-text.input-group-text-custom-color {
  background-color: #999;
  color: #fff;
}

input#inpCatalogueNo.form-control {
  font-weight: bold;
}

.custom-control-inline-sm {
  margin-right: 0px;
}
/*
.input-group-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: .375rem .75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: .25rem;
} */

.input-group-prepend label {
  width: 100%;
  overflow: hidden;
}

.btn-group-sm > .btn,
.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0rem;
}

div.input-group-prepend.input-group-prepend-trash {
  width: 7%;
}

#nameArtist {
  max-width: 80%;
  padding-left: 10px;
}

#percentArtist,
#share-primary,
#total_share {
  max-width: 13%;
  padding-left: 10px;
}

.sleevenotes {
  height: 200px !important;
}

.input-custom-color-grey {
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0rem;
}

#radioBtn .notActive {
  color: #01579b;
  background-color: #fff;
  /* color: #3276b1;
    background-color: #fff; */
}

#divBtnTrackSave button.btn,
#divBtnTrackClear button.btn,
#divBtnAddArtist button.btn,
#divBtnAddRemixer button.btn,
#divBtnRelClear button.btn,
#divBtnRelSave button.btn,
#distribtn button.btn,
#divBtnExpenses button.btn {
  text-transform: uppercase;
  border-radius: 0px;
}

#newDistribution table td {
	padding: 0 2px;
}

/* Bootstrap 4 text input with search icon */

.has-search .form-control {
  padding-left: 0.73rem;
}

input.form-control.form-control-reset {
  padding-left: 3px;
  padding-right: 3px;
  text-align: center;
}

.has-search .form-control-feedback {
  position: absolute;
  z-index: 2;
  display: block;
  width: 1.73rem;
  height: 1.73rem;
  line-height: 1.73rem;
  text-align: center;
  pointer-events: none;
  color: #aaa;
}

.form-control,
.input-group {
  border-radius: 0px;
}

.form-control-sm,
.input-group-sm > .form-control,
.input-group-sm > .input-group-append > .btn,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-prepend > .input-group-text {
  /*    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;*/
  border-radius: 0rem;
}

.form-control-sm,
.input-group-sm > .form-control,
.input-group-sm > .input-group-append > .btn,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-prepend > .input-group-text {
  font-size: 0.73rem;
}

.input-group-sm > .input-group-append > select.btn:not([size]):not([multiple]),
.input-group-sm
  > .input-group-append
  > select.input-group-text:not([size]):not([multiple]),
.input-group-sm > .input-group-prepend > select.btn:not([size]):not([multiple]),
.input-group-sm
  > .input-group-prepend
  > select.input-group-text:not([size]):not([multiple]),
.input-group-sm > select.form-control:not([size]):not([multiple]),
select.form-control-sm:not([size]):not([multiple]) {
  height: calc(1.7rem);
}

label {
  font-weight: normal;
}
.nav-tabs li a {
  color: #666;
  font-size: 14pt;
  text-transform: uppercase;
}
.nav-pills li a {
  border-radius: 0px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background-color: #999;
}

.nav > li > a {
  padding: 3px 6px;
}

table > table.gird {
  border-collapse: collapse;
}

#statementsHeader div {
  /* float: left; */
  display: inline;
}
#statementsHeader div yearRight {
  float: right;
}

#yearWrapper div {
  display: inline;
}
.audiomark {
  position: absolute;
  top: 0;
  background: #f9f9f9;
  height: 100%;
  width: 1px;
  z-index: 99 !important;
  padding: 0.5px;
  opacity: 70%;
  color: #f9f9f9;
  background-color: #f9f9f9 !important;
}

/*
.buttonControl, .buttonControl1 {
	color: #999;
	border: 1px solid #999;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	padding: 3px;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 34px;
	cursor: pointer;
	text-align: center;
	display: inline-block;
}

.buttonControl {
	background-color: none;
}

.buttonControl1 {
	background-color: none;
} */

.small {
  padding: 3px 6px;
  font-size: 11px;
  outline: none;
}

.icon-fixed-width {
  width: 1.28571429em;
  display: inline-block;
  text-align: center;
}

.liSelect {
  margin: 0 0 0 0;
  /*line-height: 24px;*/
  padding: 6px 20px;
}

/* Navigation
================================= */
.naviBG {
  width: 1024px;
  margin: 10px auto 0px;
}

.navi {
  float: left;
  width: 1024px;
  height: 36px;
  margin-bottom: 10px;
  list-style: none;
  list-style-type: none;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#c0c0c0', EndColorStr='#c0c0c0');
  background-image: -moz-linear-gradient(top, #c0c0c0, #c0c0c0);
  background-image: -o-linear-gradient(top, #c0c0c0, #c0c0c0);
  background-image: -webkit-gradient(
    linear,
    center top,
    center bottom,
    from(#c0c0c0),
    to(#c0c0c0)
  );
  background-image: -webkit-linear-gradient(top, #c0c0c0, #c0c0c0);
  background-image: linear-gradient(top, #c0c0c0, #c0c0c0);
}

.navi li {
  float: left;
  border-right: 1px solid #666666;
  list-style: none;
}

.navi a {
  font-size: 12px;
  color: #000;
  margin: 0 0 0 0;
  line-height: 24px;
  padding: 6px 20px;
  text-decoration: none;
  text-transform: uppercase;
  display: block;
}

.navi a:hover {
  border-radius: 0px;
  text-decoration: none;
  background-color: #ffffff;
  color: #000;
}

/*
.navi li:first-child a:hover {
	border-radius: 0px;
	text-decoration: none;
	background-color: #ffffff;
	-moz-border-radius: 0px 0px 0px 0px;
	-webkit-border-radius: 0px 0px 0px 0px;
	border-radius: 0px 0px 0px 0px;
}
*/

.navi a.active {
  color: #fff;
  background: #666666;
  /*
	border-radius: 0px;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#666666');
	background-image: -moz-linear-gradient(top, #666666, #666666);
	background-image: -o-linear-gradient(top, #666666, #666666);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#666666), to(#666666));
	background-image: -webkit-linear-gradient(top, #666666, #666666);
	background-image: linear-gradient(top, #666666, #666666);
	text-shadow: #000 0px 1px 1px;
	display: block;
	*/
}

.navi a.active:hover {
  background-color: #ffffff;
  color: #000;
}

#jsddm li.navisubtop {
  border-top: 2px solid #666666;
  border-bottom: 1px solid #666666;
}

#jsddm li.navisubsingle {
  border-top: 0px solid #666666;
  border-bottom: 1px solid #666666;
}

#jsddm li.navisubbottom {
  border-bottom: 1px solid #666666;
}

#jsddm li ul {
  position: absolute;
  visibility: hidden;
  z-index: 99;
}

#jsddm li ul li {
  float: none;
  display: list-item;
}

#jsddm li ul li a {
  width: auto;
  border-left: 1px solid #666666;
  background: #bcbcbc;
}

#jsddm li ul li a.active {
  color: #fff;
  background: #666666;
}

#jsddm li ul li a:hover {
  background: #ffffff;
}

#jsddm li ul li a.active:hover {
  background-color: #ffffff;
  color: #000;
}

a.account {
  font-size: 11px;
  color: #000;
  text-decoration: none;
  margin-right: 15px;
  padding: 6px 6px;
  position: relative;
  text-transform: none;
  border-right: 0px;
  text-shadow: #fff 0px 1px 0px;
}

a.account:hover {
  color: #000;
  background-color: white;
}

input,
select,
textarea {
  color: #555;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 2px;
  /*
	-moz-appearance: none;
  -webkit-appearance: none;
	-moz-border-radius: 0px;
	-webkit-border-radius:0px !important
	border-top-left-radius:0px !important
  border-radius:0px !important
	*/
  border: 1px solid #aaa;
  display: inline-block;
  /* margin: 0 1px 0 0; */
  line-height: normal;
  resize: none;
}

input#inpShare.form-control.input-lg {
  font-size: 1rem;
}

select {
  -webkit-border-radius: 0px !important;
  -moz-border-radius: 0px !important;
  -webkit-appearance: none;
  border-radius: 0px 0px 0px 0px !important;
  background-color: #f2f2f2;
}

.maske0 {
  background-color: #f9f9f9;
  border: 0;
  padding: 10px 10px 10px 10px; /* oben, rechts, unten, links */
  margin: 10px auto 10px;
  clear: both;
}

.maske {
  background-color: #f9f9f9;
  border: 0;
  padding: 15px;
  xmargin: 10px auto 0px;
  clear: both;
  xwidth: 994px;
}

.maske2 {
  background-color: #f9f9f9;
  border: 0;
  padding: 10px 10px 10px 10px; /* oben, rechts, unten, links */
  margin: 10px auto 10px;
  clear: both;
  width: 1024px;
}

.maske3 {
  background-color: #f9f9f9;
  border: 0;
  padding: 20px;
  margin: 10px auto 0px;
  clear: both;
  width: 984px;
}

.maskeLogin {
  clear: both;
  background-color: #f9f9f9;
  border: 0;
  padding: 15px;
  margin: 0 auto;
  margin-top: 93px;
  width: 500px;
}

.masketabelle {
  clear: both;
  background-color: #ff0000;
  margin: 0 auto;
  width: 500px;
}

#masketabelle-mitte {
  vertical-align: top;
  display: inline-block;
}

.maskedetails {
  background-color: #f9f9f9;
  border: 0;
  padding: 10px;
  margin: 10px auto 0px;
  clear: both;
  width: 1024px;
}

.maskedetailsAFR {
  background-color: #f9f9f9;
  border: 0;
  padding: 10px;
  margin: 10px auto 0px;
  clear: both;
  width: 1024px;
}

.ssummary {
  border-spacing: 2px !important;
}

.maske h2 {
  margin-top: -5px;
  margin-bottom: -5px;
}

.info_notlogged {
  background-color: #f9f9f9;
  border: 0;
  padding: 10px;
  margin: 10px auto 0px;
  clear: both;
  width: 480px;
}

.info_logged {
  background-color: #f9f9f9;
  border: 0;
  padding: 10px;
  margin: 10px auto 0px;
  clear: both;
  width: 1024px;
}

.maskeLabel {
  text-align: right;
}

.maskeLabelRechts {
  text-align: right;
}

.maske input,
.maske select,
.makse #sortable {
  margin-left: 10px;
}

.maske td {
  padding: 3px 0;
}

.maske .functionBar {
  border-top: 1px solid #999;
  text-align: right;
  padding-top: 10px;
  margin: 10px;
}

.add td {
  padding: 0;
}

.radius-left {
  border-radius: 0px 0px 0px 0px !important;
  border-right: 0px !important;
}

.radius-right {
  border-radius: 0px 0px 0px 0px !important;
  border-left: 0;
}

.radiusoff {
  border-radius: 0px 0px 0px 0px !important;
}

.labelLinks a,
.labelLinks a:hover {
  color: #666 !important;
  text-decoration: none !important;
}

/* col klassen */
/* ============================= */

.col-sumshare {
  width: 6%;
}

.col-deltrack {
  width: 2%;
}

/* Popup iFrame
================================ */
#popup {
  min-width: 100%;
  background: #f9f9f9;
  font-size: 12px;
}

#popup td,
#popup th {
  color: #444;
  font-size: 12px;
}

#popup .subtable {
  background: #aaa;
}

.popup {
  background: #f9f9f9;
  color: #666;
}

.popup td,
.popup th {
  font-size: 12px;
}

.maskepopup {
  background-color: #f9f9f9;
  border: 0;
  padding: 3px;
}

.maskepopup table {
  border-spacing: 2px;
}

.popup .error {
  padding: 0px;
}

.popup .info {
  padding: 0px;
}

.trennlinie {
  border: none;
  border-top: 1px solid #ccc;
  /* background-color:#FFFFFF; */
  height: 1px;
  width: 99%;
  padding-top: 4px;
  padding-bottom: 0px;
  margin: 0 auto;
}

#liamount {
  font-size: 1rem;
}
#liinvparty {
  font-size: .85rem;
}
.col-amount {
	max-width: 13em;
}

/* Login
================================ */

.login {
  background-color: #f9f9f9;
  border: 0;
  padding: 20px 20px 20px 20px;
  margin: 20px auto 20px;
  clear: both;
  -moz-box-shadow: 0px 0px 10px #000000;
  -webkit-box-shadow: 0px 0px 10px #000000;
  box-shadow: 0px 0px 10px #000000;
  width: 500px;
  border-spacing: 1em;
}

.login a {
  color: #000;
}

/* Overlay
================================ */

/* .overlay {
} */

.overlay h2 {
  padding: 5px 10px;
}

.overlay td {
  /* padding: 5px 10px; */
}
.overlay td label {
	margin: 0;	
}

.overlay .functionBar {
  border-top: 1px solid #999;
  text-align: right;
  padding-top: 5px;
  margin-top: 5px;
}

/* Pager
================================ */

.pager {
  list-style-type: none;
  float: right;
}

.pager li {
  float: left;
  list-style-type: none;
  border: 1px solid #aaa;
  border-left: 0px solid #fff;
}

.pager li:first-child {
  border-radius: 0px 0px 0px 0px;
  border-left: 1px solid #aaa;
}

.pager li:last-child {
  border-radius: 0px 0px 0px 0px;
}

.pager a {
  font-size: 8pt;
  color: #666;
  padding: 2px 4px 2px 4px; /* oben, rechts, unten, links */
  display: block;
}

.pager a:hover {
  color: white;
  background-color: #666;
  text-decoration: none;
}

.pager a.active {
  color: black;
  background-color: #ccc;
}

/* Sortable Artist
================================ */
.navbarArtist {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: #abcdef;
}

.sortable-placeholder {
  display: inline;
  list-style-type: none;
  margin: 0;
  /* float: left;
  width: 100%; */
  background-color: #c0c0c0;
}

/*
#sortable {
	display: inline;
	list-style-type: none;
	margin: 0;
	float: left;
	margin-left: 10px;
	width: 260px;
}

#sortable li{
	padding: 8px 8px 8px 20px;
	width: 100%
	background-color: #fff;
	cursor: move;
	border-left: 1px solid #999;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	background: white url(../images/icon-drag.png) no-repeat 5px 10px;
}

#sortable li:hover{
	background-color: #c8eeff;
}

#sortable li:hover span {
	display: inline;
}


#sortable li:first-child {
	border-radius: 0px 0px 0px 0px;
	border-top: 1px solid #999;
}

#sortable li:last-child {
	border-radius: 0px 0px 0px 0px;
}
*/

.removeArtist {
  display: none;
  float: right;
}

.removeArtist:hover {
  display: inline;
}

/* Sortable Remixer
================================ */
/*
#sortableRemixer {
    display: inline;
	list-style-type: none;
	margin: 0;
	float: left;
	margin-left: 10px;
	width: 260px;
}

#sortableRemixer li{
	padding: 8px 8px 8px 20px;
	width: 100%
	background-color: #fff;
	cursor: move;
	border-left: 1px solid #999;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	background: white url(../images/icon-drag.png) no-repeat 5px 10px;
}

#sortableRemixer li:hover{
	background-color: #c8eeff;
}

#sortableRemixer li:hover span {
	display: inline;
}

#sortableRemixer li:first-child {
	border-radius: 0px 0px 0px 0px;
	border-top: 1px solid #999;
}

#sortableRemixer li:last-child {
	border-radius: 0px 0px 0px 0px;
}
*/

.removeRemixer {
  display: none;
  float: right;
}

.removeRemixer:hover {
  display: inline;
}

.removeArtistTable-1,
.removeArtistTable-2 {
  display: none;
  float: right;
}

.removeArtistTable-1:hover,
.removeArtistTable-2:hover {
  display: inline;
}

/* #table-1 td:hover span,
#table-2 td:hover span {
} */

#artistTable tr:hover {
  background-color: #c8eeff !important;
}

/* TABLE DRAG AND DROP */
#table-2 th {
  background-color: #29215a;
}

#table-2 td,
#table-2 th {
  padding-right: 0px;
}

#table-1,
#table-2,
#table-3 {
  margin-left: 10px;
}

#table-1 td,
#table-1 th {
  border: 1px solid #999;
}

#table-2 td,
#table-2 th {
  width: 100%;
  /*border: 1px solid #999;*/
}

#table-3 td,
#table-3 th {
  width: 100%;
}

#table-1 td.dragTable-1 {
  width: 236px;
  background: white url(../images/icon-drag.png) no-repeat 5px 10px;
}

#table-2 td.dragTable-2 {
  width: 236px;
  background: white url(../images/icon-drag.png) no-repeat 5px 10px;
}

td.infoLabelTotalPerc {
  width: 236px;
}

tr.tableArtist-1 td,
tr.tableArtist-2 td {
  background-color: #fff;
}

tr.tableArtist-1:hover td,
tr.tableArtist-2:hover td {
  background-color: #c8eeff !important;
  background-image: none !important;
}

#table-1 td.noBorderColorTd {
  background-color: transparent;
  border: 0px;
}

#table-2 td.noBorderColorTd {
  background-color: transparent;
  border: 0px;
}

.tDnD_whileDrag td {
  background-color: #ccc !important;
  /*-webkit-box-shadow: 11px 5px 12px 2px #333, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;*/
  /* -webkit-box-shadow: 6px 3px 5px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset !important; */
  /*-moz-box-shadow: 6px 4px 5px 1px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;*/
  /*-box-shadow: 6px 4px 5px 1px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;*/
}

#tabsRelStor {
  display: none;
}

#tabsRelStor-2 {
  display: block;
}

.modal {
  -webkit-overflow-scrolling: touch;
}

.modal-body {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

/* .modal-footer {
} */

.modal-dialog.modal-notify.modal-warning .modal-header {
  background-color: #fb3;
}

.modal-dialog.modal-notify .modal-header {
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
    0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  border: 0;
}

.progress {
  width: 100%;
  opacity: 0.5;
}

.imgOverlay {
  max-width: 100%;
  /* background-color: #000;*/
  /* opacity: 0.2; */
  border: 1px dotted #999;
  text-align: center;
}
.imgOverlay:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

.fas {
  transform: translateY(-4%) !important;
}

#spinnerImage {
  position: absolute;
  left: 50%;
  top: 35%;
  transform: translate(-50%, -50%);
  color: #b88e8e;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  font-size: 1rem;
  opacity: 0.4;
}

.spinner-border {
  border-radius: 50% !important;
  -webkit-animation: spinner-border 0.75s linear infinite !important;
}

.loadImageMessage {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  color: #b88e8e;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  font-size: 1rem;
  opacity: 0.4;
}

.close {
  float: right !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #000 !important;
  text-shadow: 0 1px 0 #fff !important;
  opacity: 0.5 !important;
}

[contentEditable='true']:empty:not(:focus):before {
  content: attr(data-text);
}
#total_share.form-control.is-invalid,
#total_share.form-control.is-valid {
  background-image: none !important;
}

/* taostr */
#toast-container > div {
	opacity: .9 !important;
	width: 350px !important;
}
div.toast-position-custom {
	top: 10px;
	right: 50%;
	margin-right: -512px;
}
div.toast-message {
  color: #fff;
}
div.toast-title {
  color: #fff;
}
div.toast-info {
  background-color: #3276b1;
}
div.toast-error {
  background-color: #bd362f;
}
div.toast-success {
  background-color: #51a351;
}
div.toast-warning {
  background-color: #f89406;
}

/** SPINNER CREATION **/

.loader {
  position: relative;
  text-align: center; /*
  margin: 15px auto 35px auto;
  z-index: 9999;
  display: block;
  width: 80px;
  height: 80px;
  border: 10px solid rgba(0, 0, 0, .3);
  border-radius: 50%;
  border-top-color: #000;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite; */
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

#pro-loader {
  display: block;
  position: fixed;
  z-index: 1031;
  top: calc(50% - (50px / 2)); /* where ... is the element's height */
  right: calc(50% - (50px / 2)); /* where ... is the element's width */
}

.lds-dual-ring {
  display: inline-block;
  width: 64px;
  height: 64px;
}
.lds-dual-ring:after {
  content: ' ';
  display: block;
  width: 46px;
  height: 46px;
  margin: 1px;
  border-radius: 50%;
  border: 5px solid #2493fc;
  border-color: #2493fc transparent #2493fc transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/** Promotion: Styling **/
.promo_artist {
  font-size: 16px;
  letter-spacing: 0.1em;
  /* 100 = viewport width, as 1vw = 1/100th of that
		 So if the container is 50% of viewport (as here)
		 then factor that into how you want it to size.
		 Let's say you like 5vw if it were the whole width,
		 then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
	*/
  font-size: 3vmin;
  text-transform: uppercase;
}

.titleAudio {
  text-transform: uppercase;
}

.promo_release {
  color: #cccccc;
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 2vmin;
}

.meta-info {
  color: #939394;
  font-size: 0.75rem;
  padding: 10px 0;
  position: absolute;
  right: -20px;
  text-align: right;
  top: 0;
}

.input-url {
  display: inline-block;
  position: relative;
}

/** MODAL STYLING **/

.modal-content {
  border-radius: 0px;
  box-shadow: 0 0 20px 8px rgba(0, 0, 0, 0.7);
}

.modal-backdrop.show {
  opacity: 0.75;
}

.loader-txt {
  p {
    font-size: 13px;
    color: #666;
    small {
      font-size: 11.5px;
      color: #999;
    }
  }
}

/* OVERLAY DATEPICKER */
/*! jQuery UI - v1.10.4 - 2014-01-21
* http://jqueryui.com
* Includes: jquery.ui.core.css, jquery.ui.datepicker.css, jquery.ui.theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=0&bgColorHeader=%23cccccc&bgTextureHeader=highlight_soft&bgImgOpacityHeader=75&borderColorHeader=%23aaaaaa&fcHeader=%23222222&iconColorHeader=%23222222&bgColorContent=%23ffffff&bgTextureContent=flat&bgImgOpacityContent=75&borderColorContent=%23aaaaaa&fcContent=%23222222&iconColorContent=%23222222&bgColorDefault=%23e6e6e6&bgTextureDefault=glass&bgImgOpacityDefault=75&borderColorDefault=%23d3d3d3&fcDefault=%23555555&iconColorDefault=%23888888&bgColorHover=%23dadada&bgTextureHover=glass&bgImgOpacityHover=75&borderColorHover=%23999999&fcHover=%23212121&iconColorHover=%23454545&bgColorActive=%23ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=%23aaaaaa&fcActive=%23212121&iconColorActive=%23454545&bgColorHighlight=%23fbf9ee&bgTextureHighlight=glass&bgImgOpacityHighlight=55&borderColorHighlight=%23fcefa1&fcHighlight=%23363636&iconColorHighlight=%232e83ff&bgColorError=%23fef1ec&bgTextureError=glass&bgImgOpacityError=95&borderColorError=%23cd0a0a&fcError=%23cd0a0a&iconColorError=%23cd0a0a&bgColorOverlay=%23aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=%23aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
* Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */

/* UI-Stuff: --> ui.css */

/* font awesome icon farben */
.fa {
  font-size: small;
}
*.fa-grey {
  color: #f0f0f0;
}
*.fa-red {
  color: red;
}
*.fa-green {
  color: green;
}
*.fa-blue {
  color: #4d94d7;
}
*.fa-distri {
  color: #4991a9;
}

/* INVOICES */

@media screen, handheld {
  .tinvoice {
    border-spacing: 2;
  }
  #Invoice td {
    color: #666;
    font-size: 9.5pt;
  }
  #InvoiceFrame {
    margin: 10px;
    color: #666;
    font-size: 10pt;
  }
  #Invoice {
    margin: 0px;
    color: #666;
    font-size: 10pt;
  }
  #Invoice .td {
    height: 18px;
    color: #7f7f7f;
    background: #eeeeee;
    font-weight: normal;
  }
  #Invoice tr.invoicerow:nth-child(even) td {
    background: #f8f8f8;
	}
  #Invoice .td.euro {
		padding-right: 1.6em;
	}
  #Invoice .td.labelvol {
	}
  #Invoice .td.artistvol {
		padding-right: 15%;
	}
  #Invoice .th {
    height: 18px;
    color: #f0f0f0;
    background: #7f7f7f;
    font-weight: normal;
    text-align: center;
    border-bottom: 1px solid #666;
  }
  #Invoice .sum {
    color: #444;
    background: #f8f8f8 !important;
    font-weight: bold;
  }
  #Invoice .top {
    border-top: 1px solid #888;
  }
  #Invoice .subtitle {
    color: #bfbfbf;
    font-size: 16px;
    border-bottom: 1px solid #666;
    margin-bottom: 10px;
    text-align: left;
  }
  #Invoice .poptitle {
    color: #9f9f9f;
    font-size: 16px;
    border-bottom: 1px solid #666;
    margin-bottom: 5px;
  }
  #Invoice .invoicetitle {
    color: #9f9f9f;
    font-size: 14px;
    margin-bottom: 5px;
  }
  #bottomInvoice {
    border-top: 1px solid #666;
  }
  #bottomInvoice table {
    padding-top: 5px;
  }
  #wrapper {
    height: 800px;
    width: 100%;
    padding-bottom: 80px;
  }

  .statalert {
    padding: 0 0 0 5px;
    width: 100%;
    background: #852021;
    color: #ffffff;
    font-size: 10px;
  }
  #printSection {
    display: none;
  }
}
@media print {
  #Invoice .print {
    color: #444;
  }
  #InvoiceFrame {
    margin: 10px;
    color: #666;
    font-size: 8pt;
  }
  #Invoice {
    margin: 0px;
    color: #666;
    font-size: 8pt;
    float: none !important;
    overflow: visible !important;
    position: relative;
  }
  #Invoice .td {
    height: 14px;
  }
  #Invoice td {
    color: #666;
    font-size: 8pt;
    padding: 0;
  }
  #Invoice .th {
    height: 18px;
    color: #888;
    font-weight: normal;
    text-align: center;
    border-bottom: 1px solid #666;
  }
  #Invoice .sum {
    color: #444;
    font-weight: bold;
  }
  #Invoice .top {
    border-top: 1px solid #888;
  }
  #Invoice .subtitle {
    color: #bfbfbf;
    font-size: 14px;
    border-bottom: 1px solid #666;
    margin-bottom: 10px;
    text-align: left;
  }
  #Invoice .poptitle {
    color: #9f9f9f;
    font-size: 14px;
    border-bottom: 1px solid #666;
    margin-bottom: 5px;
  }
  #Invoice .invoicetitle {
    color: #9f9f9f;
    font-size: 12px;
    margin-bottom: 5px;
  }
  body * {
    visibility: hidden;
    background-color: #ffffff !important;
  }
  #printSection,
  #printSection * {
    visibility: visible;
    max-width: 100%;
    max-height: 100%;
    font-size: 1em !important;
    background-color: #ffffff !important;
    overflow: visible !important;
  }
  #printSection {
    position: absolute;
    left: 80px;
    top: 0;
    padding: 40px;
    overflow: visible !important;
  }

  html,
  body {
    height: auto;
    font-size: 12pt; /* changing to 10pt has no impact */
  }
}

@media (max-width: 767px) {
  .container-fluid {
    margin: 0;
  }
  .navbar {
    padding: 5px;
  }
  .card-content {
    padding: 0px;
  }
  div.col.text-right {
    text-align: center !important;
  }
  .maskedetails,
  .maske2,
  .maskedetailsAFR {
    width: auto;
  }
  #waveformMobile,
  .selectpicker {
    display: none !important;
  }
  .audioControl {
    min-height: 20vw;
  }
  .showAudio {
    display: none;
  }
  .showAudioCol {
    display: inline-block !important;
  }
  th > .showAudioCol {
    background-color: #c0c0c0;
  }
  .showAudioSwitchRow {
    display: none;
  }
}

@media (max-width: 991px) {
  .container-fluid {
    margin: 0;
  }
  .navbar {
    padding: 5px;
  }
  .card-content {
    padding: 0;
  }
}