html {
	height: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #373b3e;
	color: #fff;
	overflow: hidden;
}

*,
*:before,
*:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

body {
	/*	background-color:#fafafa;
	color:#222222;*/
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-size: 12pt;
	height: 100%;
	display: flex;
	flex-direction: column;
	/* 	min-height: 100vh;*/
	background-color: #373b3e;
	background: #2a2a2a;
	/* Old browsers */
	background: -moz-linear-gradient(top, #2a2a2a 0%, #222222 100%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(top, #2a2a2a 0%, #222222 100%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #2a2a2a 0%, #222222 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#2a2a2a', endColorstr='#222222', GradientType=0);
	/* IE6-9 */
	color: #fff;
}

body.station-choice {
	overflow-y: scroll;
}

/*------ PLAYLIST ------*/

/* table#playlist {
	width:100%;
}

table#playlist {
    border-spacing: 0;
    border-collapse: separate;
}

table#playlist td {
	padding:5px 20px;
	vertical-align: middle;
	width:100%;
	border-bottom:1px solid #fff;
}

table#playlist td div.title {
	vertical-align: middle;
}

table#playlist td div.airtime {
	width:200px;
} */

.split {
	margin-right: 5px !important;
}

#hour-bar .btn {
	margin-right: 2px !important;
	margin-left: 2px !important;
}

.hour-bar .hourdropdown {
	display: none;
}

/*------ HOURBAR ------*/

#hour-bar {
	user-select: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

#hour-bar .hourbuttons button {
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
}

#hour-bar .hour-bar {
	display:flex;
	flex-direction: row;
	background-color: #373b3e;
	border: 1px solid #3e4144;
}

#hour-bar .hour-bar div {
	flex:1;
}

#hour-bar .hourbuttons {
	display:flex;
	flex-direction: row;
	gap:2px;
}

#hour-bar .hourbuttons button.dayClicked,
#hour-bar .hourbuttons button.hourClicked {
	width: 100%;
	border-radius: 4px;
	border: none;
	background-color: #333;
	color: #fff;
	padding-top: 5px;
	padding-bottom: 5px;
	cursor: hand;
	cursor: pointer;
	height: 30px;
}

#hour-bar .pm {
	background-color: #2a2a2a !important;
}

#hour-bar .hourbuttons button.dayClicked:hover,
#hour-bar .hourbuttons button.hourClicked:hover {
	background-color: #60a4f4 !important;
	color: #fff;
}

#hour-bar .hourbuttons button.dayClicked:active,
#hour-bar .hourbuttons button.hourClicked:active {
	background-color: #888888 !important;
	color: #fff;
}

#hour-bar .hourbuttons button.active-hour {
	background-color: #3081f6 !important;
	color: #fff;
}

#hour-bar .hourbuttons button.locked {
	background-color: #aa0000 !important;
	color: #fff;
}

#hour-bar .hourbuttons .nav {
	font-size: 12px;
	min-width: 10%;
}

#hour-bar .hourbuttons .hour {
	font-size: 12px;
}

#hour-bar .hourbuttons button.disabled {
	opacity: 0.4;
	filter: alpha(opacity=40);
}

#hour-bar #current-playlist {
	width: 100%;
	border: 1px solid #3e4144;
	padding-left: 5px;
	padding-right: 5px;
	background-color: #000000;
}

.hour-bar {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.hour-bar .side {
	font-size: 12px;
	min-height: 30px;
	min-width: 150px !important;
	height: 30px;
	max-width: 165px;
}

.hour-bar .side .btn:hover {
	opacity: 1;
}

.hour-bar .side.btn:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}

#hour-bar .hour-bar .hourbuttons {
	display:flex;
	gap:2px;
}

#hour-bar .hour-bar .gaptotal #gaptime {
	margin-right: 5px;
}

#hour-bar #current-playlist {
	background: #202020;
	background: -moz-linear-gradient(top, #2f2f2f 0%, #202020 100%);
	background: -webkit-linear-gradient(top, #2f2f2f 0%, #202020 100%);
	background: linear-gradient(to bottom, #2f2f2f 0%, #202020 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#2f2f2f', endColorstr='#202020', GradientType=0);
	border-top: none;
	border-left: none;
	border-right: none;
	padding-bottom: 5px;
}

#hour-bar .btn {
	min-width: 50px;
}


#current-playlist #calendar {
	padding-right: 20px;
}

#playlist-name {
	cursor: hand;
	cursor: pointer;
}

#current-playlist #calendar button {
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	border-radius: 4px;
	border: 1px solid #ccc;
	background-color: #fafafa;
	padding-top: 5px;
	padding-bottom: 5px;
	cursor: hand;
	cursor: pointer;
}

/*#current-playlist .btn {

	margin-bottom:5px;

}*/

/*------ PLAYLIST ------ */

#logo {
	float: right;
	color: #fff;
	padding-top: 5px;
	padding-bottom: 5px;
}

#logo .loggedon i.fa {
	margin-right: 10px;
}

#logo .loggedon {
	margin-right: 20px;
}

#logo .logo {
	height: 35px;
	max-height: 35px;
	margin-top: 2px;
	margin-right: 4px;
}

/*#logo .logo {
	height:35px;
	max-height:35px;
	width:auto;
	position:absolute;
	right:10px;
	top:8px;
}
*/

#theplaylist {
	position: absolute;
	top: 0;
	width: 100%;
	height: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 10;
}

#displaynotes {
	flex: 1.25;
	display: inherit;
	background-color: #222;
}

#overalllayout {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	position: relative;
}

#topsection {
	display: flex;
	/* flex-grow: 1; */
	flex-wrap: wrap;
	/* position: relative; */
	height: 100%;
}

#topsection .block {
	flex: 1;
	position: relative;
}

#topsection .block-scroll {
	flex: 1;
	overflow-y: auto;
	height: 100%;
	min-width: 0;
}

#topsection .block-scroll-cvt {
	/* flex: 1; */
	overflow-y: auto;
	height: 100%;
	min-width: 0;
	width: 50%;
}

#topsection .block-fixed {
	flex: 0 0 auto;
	height: 100%;
}

#quickkeysblock {
	display: flex;
}

/* #topsection #quickkeysblock {
    flex: 0.75;
} */

#bottomsection {
	/* flex-grow: 1; */
	/* position: relative; */
	display: none;
	flex-direction: column;
	height: 100%;
	/* min-height: 460px; */
}

/***** FOR THE NEW RESIZABLE TOP AND BOTTOM BITS *****/

.containerresize {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.boxresize {
	height: 100%;
	/* background-color: #ccc; */
	/* overflow: auto; */
	overflow: hidden;
}

.boxresize:last-of-type {
	/* min-height: 250px; */
}

.minheight {
	min-height: 400px !important;
}

.handleresize {
	height: 11px;
	background-color: #aaa;
	cursor: row-resize;
	flex-shrink: 0;
	display: none;
	background-image: url("../images/split-h-handle.png");
	background-repeat: no-repeat;
	background-position: center;
}

.cvthandleresize {
	width: 11px;
	background-color: #aaa;
	cursor: col-resize;
	flex-shrink: 0;
	display: none;
	background-image: url("../images/split-v-handle.png");
	background-repeat: no-repeat;
	background-position: center;
}

.wavebottom {
	min-height: 105px;
	max-height: 115px;
	/* margin-bottom: 80px; */
}

/***** END OF NEW RESIZABLE TOP AND BOTTOM BITS *****/

#quickkeyscontainer {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: 100%;
	width: 100%;
	/* position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0; */
}

#displaydata {
	height:100%;
	/* position: absolute; */
	/* top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    flex-grow: 1;
    overflow-y: scroll;
    z-index: 30;
    background: #2a2a2a;
    background: -moz-linear-gradient(top, #2a2a2a 0%, #222222 100%);
    background: -webkit-linear-gradient(top, #2a2a2a 0%, #222222 100%);
    background: linear-gradient(to bottom, #2a2a2a 0%, #222222 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#2a2a2a', endColorstr='#222222', GradientType=0); */
}

.padicon i.fa {
	margin-left: 10px;
}

table#playlist,
table#xlogtable {
	width: 100%;
	border-spacing: 0;
	border-collapse: separate;
	user-select: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

table#playlist thead th,
table#xlogtable thead th {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 100;
}

table#playlist thead th,
table#xlogtable thead th {
	padding: 5px 20px;
	width: 100%;
	border-bottom: 1px solid #ddd;
	height: 25px;
	font-weight: bold;
	font-size: 0.9em;
	/*	background-color:#fafafa;*/
	background-color: #373b3e;
	border: 1px solid #3e4144;
	color: #fff;
}

table#playlist tbody td,
table#xlogtable tbody td {
	padding: 5px 20px;
	width: 100%;
	border-bottom: 1px solid #333;
	/*border-top:1px solid #fff;*/
	height: 45px;
	cursor: default;
	line-height: 1.25;
	font-size: 14px;
	/*	-webkit-transition: padding .1s ease-out;
	-moz-transition: padding .1s ease-out;
	-o-transition: padding .1s ease-out;
	transition: padding .1s ease-out;*/
}

/*table#playlist tbody td.current {
	border-top:2px solid #666;
	border-bottom:2px solid #666;
	padding-top:15px;
	padding-bottom:15px;
}*/

table#playlist tbody div.title,
table#xlogtable tbody div.title {
	border: 1px solid transparent;
	border-radius: 5px;
	padding-left: 5px;
	padding-right: 5px;
	-webkit-box-shadow: 0px 0px 0px 1px transparent;
	-moz-box-shadow: 0px 0px 0px 1px transparent;
	box-shadow: 0px 0px 0px 1px transparent;
}

table#playlist tbody .current div.title,
table#xlogtable tbody .current div.title {
	border-color: #fff;
	-webkit-box-shadow: 0px 0px 0px 1px #000;
	-moz-box-shadow: 0px 0px 0px 1px #000;
	box-shadow: 0px 0px 0px 1px #000;
}

table#playlist thead th div.airtime,
table#playlist tbody td div.airtime,
table#xlogtable thead th div.airtime,
table#xlogtable tbody td div.airtime {
	display: table-cell;
	height: 100%;
	vertical-align: middle;
	padding-right: 5px;
	min-width: 75px;
	width: 75px;
	text-align: center;
	font-size: 0.85em;
}

table#playlist thead th div.icon,
table#playlist tbody td div.icon,
table#xlogtable thead th div.icon,
table#xlogtable tbody td div.icon {
	cursor: default;
}

table#playlist thead th div.moveicon,
table#playlist tbody td div.moveicon,
table#xlogtable thead th div.moveicon,
table#xlogtable tbody td div.moveicon {
	display: table-cell;
	height: 100%;
	vertical-align: middle;
	padding-right: 20px;
	padding-left: 0px;
	min-width: 50px;
	width: 50px;
	text-align: center;
	cursor: move;
}

table#playlist thead th div.icon,
table#playlist tbody td div.icon,
table#playlist thead th div.status,
table#playlist tbody td div.status,
table#xlogtable thead th div.icon,
table#xlogtable tbody td div.icon,
table#xlogtable thead th div.status,
table#xlogtable tbody td div.status {
	display: table-cell;
	height: 100%;
	vertical-align: middle;
	padding-right: 10px;
	padding-left: 10px;
	min-width: 50px;
	max-width: 50px;
	width: 50px;
	text-align: center;
}

table#playlist thead th div.extra,
table#playlist tbody td div.extra,
table#xlogtable thead th div.extra,
table#xlogtable tbody td div.extra {
	display: table-cell;
	height: 100%;
	vertical-align: middle;
	padding-right: 10px;
	padding-left: 10px;
	min-width: 42px;
	max-width: 42px;
	width: 42px;
	text-align: center;
}

table#playlist thead th div.uid,
table#playlist tbody td div.uid,
table#xlogtable thead th div.uid,
table#xlogtable tbody td div.uid {
	display: table-cell;
	height: 100%;
	vertical-align: middle;
	padding-right: 20px;
	min-width: 110px;
	max-width: 110px;
	width: 100px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

table#playlist thead th div.title,
table#playlist tbody td div.title,
table#xlogtable thead th div.title,
table#xlogtable tbody td div.title {
	display: table-cell;
	height: 100%;
	min-width: 250px;
	max-width: 380px;
	text-align: left;
	vertical-align: middle;
	width: 100%;
}

table#playlist thead th div.intro,
table#playlist thead th div.length,
table#playlist tbody td div.intro,
table#playlist tbody td div.length,
table#xlogtable thead th div.intro,
table#xlogtable thead th div.length,
table#xlogtable tbody td div.intro,
table#xlogtable tbody td div.length {
	display: table-cell;
	height: 100%;
	min-width: 80px;
	vertical-align: middle;
	padding-right: 20px;
	text-align: center;
}

table#playlist thead th div.category,
table#playlist tbody td div.category,
table#xlogtable thead th div.category,
table#xlogtable tbody td div.category {
	display: table-cell;
	height: 100%;
	vertical-align: middle;
	padding-right: 20px;
	text-align: center;
	min-width: 180px;
	width: 180px;
	max-width: 180px;
}

table#playlist tbody td div.category,
table#xlogtable tbody td div.category {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

table#playlist thead th div.album,
table#playlist tbody td div.album,
table#xlogtable thead th div.album,
table#xlogtable tbody td div.album {
	display: table-cell;
	height: 100%;
	vertical-align: middle;
	padding-right: 20px;
	text-align: center;
	min-width: 180px;
	width: 180px;
	max-width: 180px;
}

table#playlist tbody td div.album,
table#xlogtable tbody td div.album {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

table#playlist thead th div.year,
table#playlist tbody td div.year,
table#xlogtable thead th div.year,
table#xlogtable tbody td div.year {
	display: table-cell;
	height: 100%;
	min-width: 80px;
	vertical-align: middle;
	padding-right: 20px;
	text-align: center;
}

table#playlist thead th div.title span.title,
table#playlist tbody td div.title span.title,
table#xlogtable thead th div.title span.title,
table#xlogtable tbody td div.title span.title {
	font-weight: bold;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/*	min-width:300px;
	width:300px;*/
	min-width: 300px;
	width: 100%;
}

table#playlist thead th div.title span.artist,
table#playlist tbody td div.title span.artist,
table#xlogtable thead th div.title span.artist,
table#xlogtable tbody td div.title span.artist {
	font-size: 0.9em;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/*	min-width:300px;
	width:300px;*/
	min-width: 300px;
	width: 100%;
}

table#playlist thead th div.title,
table#xlogtable thead th div.title {
	min-width: 312px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

table#playlist thead .sort,
table#xlogtable thead .sort {
	cursor: hand;
	cursor: pointer;
}

table#playlist td.deleted,
table#xlogtable td.deleted {
	background-color: #dddddd !important;
	color: #aaa !important;
}

table#playlist td.deleted img,
table#xlogtable td.deleted img {
	opacity: 25%;
}

table#playlist td.deleted img.notset,
table#xlogtable td.deleted img.notset {
	opacity: 5%;
}

table#playlist td .move,
table#xlogtable td .move {
	cursor: move;
}

table#playlist td.rowsep,
table#xlogtable td.rowsep {
	background: #2a2a2a;
	/* Old browsers */
	background: -moz-linear-gradient(top, #555 0%, #222222 100%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(top, #555 0%, #222222 100%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #555 0%, #222222 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#555', endColorstr='#222222', GradientType=0);
	/* IE6-9 */
	height: 35px;
	color: #f0f0f0;
	text-align: left;
	font-weight: bold;
}

table#playlist td.rowsep i,
table#xlogtable td.rowsep i {
	margin-left: 20px;
	margin-right: 20px;
}

table#playlist .ok,
table#xlogtable .ok {
	position: relative;
}

/*------ AUDIO FINDER ------ */

#mediafindermain {
	margin-top: 0px;
	border-top: 1px solid #3e4144;
	background-color: #222;
	background: #2a2a2a;
	background: -moz-linear-gradient(top, #2a2a2a 0%, #222222 100%);
	background: -webkit-linear-gradient(top, #2a2a2a 0%, #222222 100%);
	background: linear-gradient(to bottom, #2a2a2a 0%, #222222 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#2a2a2a', endColorstr='#222222', GradientType=0);
	/* position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0; */
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* #audio-search-bar {
    background-color: #333;
}

#audiotable {
    position: absolute;
    top: 50px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
} */

#audiotable {
	/* position: relative; */
	/* flex: 1; */
}

#audioscroller {
	overflow: auto;
	height: 100%;
}

#audiolist {
	/* position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0; */
	/* overflow: auto; */
}

table#audio {
	/*	height:500px;*/
	width: 100%;
	/* overflow: auto; */
	border-spacing: 0;
	border-collapse: separate;
	user-select: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

table#audio thead th {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1;
}

/*table#audio thead {
	position:sticky;
	width:100%;
	top:0;
	z-index:10;
}*/

table#audio thead th {
	padding: 5px;
	width: 100%;
	border-bottom: 1px solid #ddd;
	height: 25px;
	font-weight: bold;
	font-size: 0.9em;
	/*	background-color:#fafafa;*/
	background-color: #373b3e;
	border: 1px solid #3e4144;
	color: #fff;
}

table#audio tbody td {
	padding: 5px;
	width: 100%;
	cursor: default;
	border-bottom: 1px solid #333;
	/*border-top:1px solid #fff;*/
	height: 45px;
	cursor: default;
	line-height: 1.25;
	font-size: 14px;
	/*	-webkit-transition: padding .1s ease-out;
	-moz-transition: padding .1s ease-out;
	-o-transition: padding .1s ease-out;
	transition: padding .1s ease-out;*/
}

table#audio thead th div.uid,
table#audio tbody td div.uid {
	display: table-cell;
	height: 100%;
	vertical-align: middle;
	padding-right: 20px;
	min-width: 100px;
	width: 100px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

table#audio thead th div.title,
table#audio tbody td div.title {
	display: table-cell;
	height: 100%;
	min-width: 300px;
	vertical-align: middle;
	width: 100%;
}

table#audio thead th div.title {
	min-width: 312px;
}

table#audio thead th div.intro,
table#audio thead th div.length,
table#audio tbody td div.intro,
table#audio tbody td div.length {
	display: table-cell;
	height: 100%;
	min-width: 92px;
	vertical-align: middle;
	padding-right: 20px;
	text-align: center;
}

table#audio thead th div.client,
table#audio tbody td div.client,
table#audio thead th div.album,
table#audio tbody td div.album,
table#audio thead th div.category,
table#audio tbody td div.category,
table#audio thead th div.lastplayed,
table#audio tbody td div.lastplayed {
	display: table-cell;
	height: 100%;
	vertical-align: middle;
	padding-right: 20px;
	text-align: center;
	min-width: 180px;
	width: 180px;
	max-width: 180px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

table#audio thead th div.type,
table#audio tbody td div.type {
	display: table-cell;
	height: 100%;
	vertical-align: middle;
	padding-right: 20px;
	text-align: center;
	min-width: 200px;
	width: 200px;
	max-width: 200px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

table#audio thead th div.year,
table#audio tbody td div.year {
	display: table-cell;
	height: 100%;
	min-width: 80px;
	vertical-align: middle;
	padding-right: 20px;
	text-align: center;
}

table#audio thead th div.album,
table#audio tbody td div.album {
	display: table-cell;
	height: 100%;
	vertical-align: middle;
	padding-right: 20px;
	text-align: center;
	min-width: 150px;
	width: 150px;
	max-width: 150px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

table#audio tbody td div.title span.title {
	font-weight: bold;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 300px;
	width: 300px;
}

table#audio tbody td div.title span.artist {
	font-size: 0.9em;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 300px;
	width: 300px;
}

table#audio thead td div.title {
	min-width: 300px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
}

table#audio thead .sort {
	cursor: hand;
	cursor: pointer;
}

/*table#audio tbody td.current {
	border-top:2px solid #666;
	border-bottom:2px solid #666;
/*	padding-top:20px;
	padding-bottom:20px;
} */

table#audio tbody td div.title {
	border: 1px solid transparent;
	border-radius: 5px;
	padding-left: 5px;
	padding-right: 5px;
	-webkit-box-shadow: 0px 0px 0px 1px transparent;
	-moz-box-shadow: 0px 0px 0px 1px transparent;
	box-shadow: 0px 0px 0px 1px transparent;
}

table#audio tbody td.current div.title {
	border-color: #fff;
	-webkit-box-shadow: 0px 0px 0px 1px #000;
	-moz-box-shadow: 0px 0px 0px 1px #000;
	box-shadow: 0px 0px 0px 1px #000;
}

table#audio thead th div.icon,
table#audio tbody td div.icon {
	display: table-cell;
	height: 100%;
	vertical-align: middle;
	padding-right: 10px;
	padding-left: 10px;
	min-width: 50px;
	width: 59px;
	max-width: 50px;
	text-align: center;
}

table#audio thead th div.moveicon,
table#audio tbody td div.moveicon {
	display: table-cell;
	height: 100%;
	vertical-align: middle;
	padding-right: 20px;
	padding-left: 0px;
	min-width: 50px;
	width: 50px;
	text-align: center;
	cursor: move;
}

.circlebox {
	display: none;
	position: absolute;
	background-color: #fff;
	background-repeat: no-repeat;
	background-image: url("../images/stop-icon.png");
	background-position: center;
	border-radius: 50%;
	width: 33px;
	height: 33px;
	margin-top: -8px;
	z-index: 0;
}

.circle {
	position: relative;
	margin-top: 3px;
	margin-left: -1px;
}

/*------ SEARCH BAR ------*/

.search-bar {
	background-color: #222;
	border-top: 1px solid #3e4144;
	border-bottom: 1px solid #3e4144;
	/* padding: 5px; */
	width: 100%;
	color: #fff;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 6px 3px;
}

/* 
.search-bar {
    background-color: #333;
    padding-top: 5px;
    padding-bottom: 5px;
} */

.search-bar .cellmod {
	/* margin-left: 2.5px;
    margin-right: 2.5px;
    margin-top: 5px; */
	margin: 2.5px;
	margin-bottom: 4px;
}

.search-bar input,
.search-bar button,
.search-bar .input-group-text,
.search-bar select,
.search-bar #page {
	/*font-size:0.75em!important;*/
}

.search-bar .col-xs-2 {
	padding-left: 10px;
}

.search-bar #bookmarks,
.search-bar #tags,
.search-bar #categorys,
.search-bar #types {
	/* width: 200px; */
	max-width: 250px;
}

/*.page {
	width:150px;
	display:inline-block;
	margin-left:10px;
}

.page .ui-widget-content {
	font-size:12px!important;
	width:80px;
	padding-top:5px;
	padding-bottom:5px;
}

.page #page {
	width:50px;
}*/

/*.search-bar button {
	-webkit-transition: all 0.10s ease-in-out;
	-moz-transition: all 0.10s ease-in-out;
	-ms-transition: all 0.10s ease-in-out;
	-o-transition: all 0.10s ease-in-out;
	border-radius: 4px;
	border:1px solid #ccc;
	background-color:#fafafa;
	padding-top:5px;
	padding-bottom:5px;
	cursor: hand;
	cursor: pointer;
}*/

/*.search-bar button:active {
	box-shadow: 0 0 5px #9dc2ee;
	border: 1px solid #2872f4;
}
*/

.search-bar input[type="search"] {
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	border-radius: 4px;
	border: 1px solid #ccc;
	background-color: #fafafa;
	padding: 5px;
}

.search-bar input[type="search"]:focus {
	box-shadow: 0 0 5px #9dc2ee;
	border: 1px solid #2872f4;
}

#resultcount {
	width: 195px;
}

#bookmarklist {
	width: 100%;
}

/*------ AUDIO UPLOADER MAIN ------*/

.mainbar {
	height: 38px;
}

#seguesedit {
	width: 100%;
	border: 1px solid #3e4144;
	margin-bottom: 0px;
	margin-top: 0px;
	overflow-x: none;
	height: 128px;
	background: #222222;
	/* Old browsers */
	background: -moz-linear-gradient(top, #222222 0%, #000000 100%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(top, #222222 0%, #000000 100%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #222222 0%, #000000 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#000000', GradientType=0);
	/* IE6-9 */
	user-select: none;
	/* supported by Chrome and Opera */
	-webkit-user-select: none;
	/* Safari */
	-khtml-user-select: none;
	/* Konqueror HTML */
	-moz-user-select: none;
	/* Firefox */
	-ms-user-select: none;
	/* Internet Explorer/Edge */
}

#seguesedit .wave {
	height: 126px;
	width: 100%;
	background-color: #222;
	/* margin-bottom:5px; */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	box-shadow: 0 0 4px #666;
}

#meterrec {
	/*	width:748px;
	height:20px;*/
	background-color: #333;
	margin-top: 1px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	display: block;
	border: 1px solid #444;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

#wavemain .volume {
	text-align: center;
	width: 100%;
	min-width: 500px;
	max-width: 919px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
}

#wavemain .volume .slider {
	margin-top: 15px;
}

#recmicvolume.slider::-webkit-slider-thumb,
#wavemain .volume .slider::-webkit-slider-thumb {
	background: #aa0000;
}

#recmicvolume.slider::-moz-range-thumb,
#wavemain .volume .slider::-moz-range-thumb {
	background: #aa0000;
}

.micvol {
	overflow: hidden;
	border-radius: 5px;
	width: 0%;
	height: 90%;
	position: absolute;
	top: 5%;
	left: 0;
	bottom: 5%;
}

.volmeter {
	height: 100%;
	background: #58ff32;
	/* Old browsers */
	background: -moz-linear-gradient(
		left,
		#00aa00 0%,
		#00aa00 65%,
		#aa0000 65%,
		#aa0000 100%
	);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(
		left,
		#00aa00 0%,
		#00aa00 65%,
		#aa0000 65%,
		#aa0000 100%
	);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(
		to right,
		#00aa00 0%,
		#00aa00 65%,
		#aa0000 65%,
		#aa0000 100%
	);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#58ff32', endColorstr='#ff0000', GradientType=1);
	/* IE6-9 */
}

.micvolback {
	border-radius: 5px;
	width: 100%;
	height: 90%;
	background: #333;
	position: absolute;
	top: 5%;
	left: 0;
	bottom: 5%;
}

.recvolume {
	height: 10px;
	width: 100%;
	margin-top: 5px;
	margin-bottom: 10px;
	position: relative;
}

.recmicvolback {
	border-radius: 2px;
	width: 100%;
	height: 100%;
	background: #333;
	position: absolute;
}

.recmicvol {
	overflow: hidden;
	border-radius: 2px;
	width: 0%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
}

.recvolmeter {
	height: 100%;
	background: #58ff32;
	/* Old browsers */
	background: -moz-linear-gradient(
		left,
		#00aa00 0%,
		#00aa00 65%,
		#aa0000 65%,
		#aa0000 100%
	);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(
		left,
		#00aa00 0%,
		#00aa00 65%,
		#aa0000 65%,
		#aa0000 100%
	);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(
		to right,
		#00aa00 0%,
		#00aa00 65%,
		#aa0000 65%,
		#aa0000 100%
	);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#58ff32', endColorstr='#ff0000', GradientType=1);
	/* IE6-9 */
}

.recorddevice {
	position: absolute;
	top: 50%;
	left: 10px;
	right: 10px;
	display: inline-block;
	text-align: center;
	transform: translateY(-50%); /* Center the span vertically */
	cursor: default;
	user-select: none;
	overflow: hidden; /* Hide overflow */
	white-space: nowrap; /* Prevent text from wrapping */
	text-overflow: ellipsis; /* Add ellipsis when text overflows */
}

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

.search-bar .input-group {
	margin-bottom: 0;
}

.uploadfields .input-group-prepend .input-group-text {
	/*width:<?php echo ($mcats == 1 ? "62" : "90"); ?>px;*/
	width: 90px;
}

.uploadfields {
	margin-top: 0px;
	padding-left: 10px;
	padding-right: 10px;
}

#edittypes {
	width: 100%;
}

.cues button,
.cues span {
	width: 100%;
	margin-bottom: 10px;
}

.notes {
	resize: none;
	height: 100px !important; /* Was 140px */
}

.tabheight {
	height: 170px;
}

.uploadfields .nav {
	margin-top: 10px;
}

.mainbar {
	margin-bottom: 10px;
}

#SaveEdit {
	float: right;
}

.uploadfields.uploader .col-md-1,
.uploadfields.uploader .col-md-2,
.uploadfields.uploader .col-md-3,
.uploadfields.uploader .col-md-4,
.uploadfields.uploader .col-md-5,
.uploadfields.uploader .col-md-6,
.uploadfields.uploader .col-md-12 {
	padding-left: 5px !important;
	padding-right: 5px !important;
}

.uploadfields .nav-link {
	color: #888 !important;
	background-color: rgba(0, 0, 0, 0.25);
	margin-right: 5px !important;
}

.uploadfields .nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
	background-color: #555 !important;
	color: #fff !important;
}

.centerlabel {
	text-align: center;
	vertical-align: middle;
	width: 100%;
	display: inline-block;
	padding: 0.375rem 0.75rem;
}

#seguesedit {
	position: relative;
}

#noaudioloaded,
#loading {
	background-color: rgba(0, 0, 0, 1);
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	display: none;
	z-index: 1000;
}

#noaudioloaded .label,
#loading .label {
	position: relative;
	top: 35%;
	font-size: 22px;
}

#importaudio,
#RecordAudio,
#EnableMic,
#DownloadAudioEdit {
	width: 45px;
}

#meterrec {
	margin-top: 0;
	height: 10px !important;
	border-radius: 0 !important;
}

#settingspanel .row {
	margin-left: 0;
	margin-right: 0;
}

.daypart {
	width: 100%;
	height: auto;
}

.noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.daypart th,
.daypart td {
	width: 4%;
	line-height: 15px;
	text-align: center;
	font-size: 0.7em;
}

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

.circle-grey {
	width: 12px;
	height: 12px;
	background-color: #444;
	border-color: #333;
	border-radius: 50%;
	border-width: 1px;
	border-style: solid;
	margin: auto;
}

.circle-green {
	background-color: #00aa00;
	border-color: #005500;
}

.circle-selecting {
	opacity: 0.5;
}

.dragarea {
	position: absolute;
	background-color: rgba(255, 255, 255, 0.25);
	border-width: 1px;
	border-color: white;
	top: 0px;
	left: 0px;
	width: 100px;
	height: 100px;
	display: none;
	pointer-events: none;
	/* z-index: 2000; */
}

#AddTag,
#RemoveTags {
	font-size: 13px;	
}

.edittags {
	width: 100%;
	height: 110px;
	border:1px solid #444;
	overflow: auto;
	border-radius: 5px;
}

.edittags #edittaglist {
	list-style-type: none; /* Remove bullet points */
	padding: 0;
	margin: 0;
}

ul#edittaglist li:nth-child(even) {
	background-color: #111;
}

ul#edittaglist li:nth-child(odd) { /* Style for odd rows */
	background-color: #222;
}

ul#edittaglist li { /* Additional styling for the list items */
	padding: 5px;
	border-bottom: 1px solid #333;
	cursor: default; /* Change cursor to pointer on hover */
	user-select: none; /* Disable text selection */
	/* border-bottom: 1px solid #ddd; */
}

ul#edittaglist li.selected {
	background: #3081f6;
	background: -moz-linear-gradient(top, #4e85d3 0%, #3081f6 100%);
	background: -webkit-linear-gradient(top, #4e85d3 0%, #3081f6 100%);
	background: linear-gradient(to bottom, #4e85d3 0%, #3081f6 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#4e85d3', endColorstr='#3081f6', GradientType=0);
}
    
/* ul.taglist li.selected:nth-child(even) {
	background-color: #4d85d3;
}

ul.taglist li.selected:nth-child(odd) {
	background-color: #3081f5;
} */

/*	input {
    background-color:#333!important;
    color:#fff!important;
    border-color:#555!important;
}

.input-group-text {
    background-color:#222!important;
    border-color:#555!important;
}*/

/*------ SEGUE MAIN ------*/

#wavemain {
	/* position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0; */
	/* display: flex; */
	/* flex-direction: column; */
	border: 1px solid #3e4144;
	color: #fff;
	/* padding-bottom: 20px; */
	background: #2a2a2a;
	background: -moz-linear-gradient(top, #2a2a2a 0%, #222222 100%);
	background: -webkit-linear-gradient(top, #2a2a2a 0%, #222222 100%);
	background: linear-gradient(to bottom, #2a2a2a 0%, #222222 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#2a2a2a', endColorstr='#222222', GradientType=0);
	flex-direction: column;
	height: 100%;
}

.transportcontrols {
	text-align: center;
	margin-top: 10px;
}

.transportcontrols button,
.transportcontrols span {
	/* margin: 0 5px; */
	margin: 0 1px;
}

#waveloader,
#linkloader {
	position: absolute;
	width: 100%;
	height: 0;
	background-color: #000000;
	z-index: 30;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

#segues {
	/* position: relative; */
	width: 100%;
	height: 100%;
	border: 1px solid #3e4144;
	/* margin-bottom:10px; */
	margin-top: 0px;
	overflow-x: hidden;
	overflow-y: hidden;
	background: #222222;
	background: -moz-linear-gradient(top, #222222 0%, #000000 100%);
	background: -webkit-linear-gradient(top, #222222 0%, #000000 100%);
	background: linear-gradient(to bottom, #222222 0%, #000000 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#000000', GradientType=0);
	user-select: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

#segues .bar {
	position: absolute;
	height: 255px;
	z-index: 20;
}

#wavemain .wave {
	height: 80px;
	width: 100%;
	background-color: #222;
	margin-bottom: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	box-shadow: 0 0 4px #666;
	overflow: hidden;
}

#wavemain .controls {
	width: 150px;
}

.wave .canvas {
	background: none;
	position: absolute;
	top: 18px;
	/* width: 100%;
    height: -webkit-calc(100% - 18px);
    height: -moz-calc(100% - 18px);
    height: calc(100% - 18px); */
	z-index: 10;
}

/*------ VT RECORD MAIN ------*/

#vtloader {
	position: absolute;
	width: 100%;
	height: 0;
	background-color: #000000;
	z-index: 10;
	background-image: url("../images/loader-06.gif");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 300px;
}

#main {
	position: relative;
	width: 100%;
	border: 1px solid #3e4144;
	margin-bottom: 10px;
	margin-top: 0px;
	overflow-x: scroll;
	background: #222222;
	/* Old browsers */
	background: -moz-linear-gradient(top, #222222 0%, #000000 100%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(top, #222222 0%, #000000 100%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #222222 0%, #000000 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#000000', GradientType=0);
	/* IE6-9 */
	user-select: none;
	/* supported by Chrome and Opera */
	-webkit-user-select: none;
	/* Safari */
	-khtml-user-select: none;
	/* Konqueror HTML */
	-moz-user-select: none;
	/* Firefox */
	-ms-user-select: none;
	/* Internet Explorer/Edge */
}

#main .bar {
	position: absolute;
	height: 255px;
	z-index: 30;
}

#main .wave {
	height: 80px;
	width: 100%;
	background-color: #222;
	margin-bottom: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	box-shadow: 0 0 4px #666;
}

.caption {
	position: relative;
	top: 0;
	width: 100%;
	overflow: hidden;
	height: 18px;
	color: #ddd;
	background-color: #333;
	border-bottom: 1px solid #3e4144;
	z-index: 5;
	font-size: 10px;
	padding-left: 5px;
	padding-right: 5px;
}

.waveerror,
.recordvt {
	background-color: #aa0000;
}

#vtwave {
	/*background-color:#222222;*/
}

#wave1 div.caption,
#vtwave1 div.caption {
	text-align: right !important;
}

#myAudio {
	background-color: #222;
	border: 1px solid #3e4144;
	width: 400px;
	height: 70px;
	margin-top: 20px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
}

.vjs-record .vjs-device-button.vjs-control {
	/*	height:3.6em!important;*/
	height: 50px !important;
	margin-top: -25px !important;
}

.vjs-record button.vjs-device-button.vjs-control.vjs-icon-audio-perm::before,
.vjs-record button.vjs-device-button.vjs-control.vjs-icon-av-perm::before,
.vjs-record button.vjs-device-button.vjs-control.vjs-icon-screen-perm::before,
.vjs-record button.vjs-device-button.vjs-control.vjs-icon-video-perm::before {
	font-size: 1em !important;
}

#recordWave {
	margin-top: 20px;
	width: 0;
}

#recordOp {
	width: 150px;
}

.controls {
	width: 150px;
}

#volume {
	width: 100%;
	display: block;
}

#meter {
	/*	width:780px;
	height:20px;*/
	background-color: #333;
	margin-top: 10px;
	/*	margin-left:auto;
	margin-right:auto;*/
	display: block;
	border: 1px solid #444;
	border-radius: 5px;
}

table#playlist tbody tr td.drop,
table#xlogtable tbody tr td.drop {
	border-bottom: 5px solid #000 !important;
}

.disable-select {
	user-select: none;
	/* supported by Chrome and Opera */
	-webkit-user-select: none;
	/* Safari */
	-khtml-user-select: none;
	/* Konqueror HTML */
	-moz-user-select: none;
	/* Firefox */
	-ms-user-select: none;
	/* Internet Explorer/Edge */
}

/* --- CSS FOR NOTES START --- */

.whiteboard {
	color: #333;
	width: 30%;
	position: fixed;
	top: 2.5%;
	right: 2.5%;
	height: 55%;
	min-height: 350px;
	min-width: 350px;
	z-index: 35;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	border-radius: 15px;
	display: none;
	background-color: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(5px);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#e0e0e0', GradientType=0);
	z-index: 1000;
}

#stationnotes {
	height: 100%;
	overflow-y: auto;
	padding: 15px;
}

#hournotes {
	height: 100%;
	overflow-y: auto;
	padding: 15px;
}

#stationnotecontent,
#hournotecontent {
	height: calc(100% - 65px);
	height: -o-calc(100% - 65px);
	height: -webkit-calc(100% - 65px);
	height: -moz-calc(100% - 65px);
	width: 100%;
	margin-top: 20px;
}

#StationNotes,
#HourNotes {
	width: 100%;
	height: 100%;
	resize: none;
	background-color: transparent;
	border: none;
}

/* --- CSS FOR NOTES END --- */

/* --- CSS FOR PLAY PROGRESS BAR START --- */

#OnAirControls {
	color: #fff;
}

#OnAirControls .btn {
	min-width: 45px;
}

#OnAirControls div.timeleft {
	width: 120px;
	/* padding-right: 5px !important; */
	/* padding-left: 3px !important; */
}

#NowPlaying {
	width: 400px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background-color: #111111;
	color: #ffffff;
	padding: 6px 20px;
	height: 38px;
	border-radius: 0.25rem;
	border: 1px solid #333333;
	text-transform: capitalize;
}

.play-console {
	height: 38px;
	background-color: #111111;
	border: 1px solid #333333;
	border-radius: 0.25rem;
	overflow: hidden;
	flex: 1;
}

#playingprogressbar {
	height: 36px;
	background-color: #00aa00;
	/* border-radius: .25rem; */
}

.onairlight {
	background-color: #aa0000;
	color: #ffffff;
	border-radius: 0.25rem;
	width: 75px;
	padding: 5px;
	border: 1px solid #333333;
}

/* --- CSS FOR PLAY PROGRESS BAR END --- */

/* --- ALT MODAL STYLE START --- */

.modal-content {
	border: 10px solid #999 !important;
	background-color: #222 !important;
	color: #fff !important;
	/* box-shadow: 0 0 30px #aaa; */
}

.modal-content .close {
	color: #fff !important;
}

.modal-content .modal-header {
	border-bottom-color: #444;
}

.modal-content .modal-footer {
	border-top-color: #444;
}

/* --- ALT MODAL STYLE END --- */

/* --- ALT CONTEXT MENU STYLE START --- */

.context-menu-list {
	background-color: #333 !important;
	color: #fff;
}

li.context-menu-item {
	background-color: #333;
	color: #fff;
}

li.context-menu-separator {
	border-color: #444;
}

li.context-menu-disabled {
	background-color: #333 !important;
}

.context-menu-submenu::after {
	border-color: transparent transparent transparent #fff !important;
}

/* --- ALT CONTEXT MENU STYLE END --- */

#filelist .file {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #444;
}

/* .legend {
	margin-left: 5px;
} */

.subnote {
	font-size: 0.75em;
	color: #aaa;
	line-height: 150% !important;
	padding-top: 10px;
}

.toggle {
	margin-top: -3px;
}

.settingoption {
	margin-bottom: 20px;
	width: 100%;
}

.settingoption-nobottom {
	width: 100%;
}

.jconfirm-box {
	border: 10px solid #888;
	background-color: #333 !important;
	border-radius: 15px !important;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) !important;
}

.settingoption {
	display:flex;
	flex-direction: row;
}

.settingcol {
	flex-direction: column;
}

.opttog {
	width:75px;
	min-width:75px;
	align-content: center;
}

.optspin {
	width:120px;
	min-width:120px;
	align-content: center;
	margin-right:10px;
}

.optrad {
	width:120px;
	min-width:120px;
	align-content: center;
	margin-right:10px;
}

.optdesc {
	align-content: center;
}

.optpre {
	align-content: center;
	margin-right:10px;
	min-width:55px;
}

.optgain {
	width:100px;
}

.optval {
	align-content: center;
	margin-left:10px;
}

.settingoption .input-group {
	margin-bottom:0;
}

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

#settingsModal .nav-item {
	margin-bottom:5px;
}

#settingsModal .version {
	flex:1;
	text-align: left;
	font-size: 0.75em;
	color: #aaa;
}


/* --- CACHE MANAGER STYLE START --- */

#cacheModal .modal-body {
	max-height: 50vh;
	overflow-y: auto;
	padding: 0px 1px;
}

.cache-table {
	text-align: left;
	vertical-align: middle;
	font-size: 0.8em;
	width: 100%;
}

.cache-table thead th {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	background-color: #333;
}

.cache-table th {
	padding: 3px 10px;
}

.cache-table td {
	padding: 3px 10px;
	border: 1px solid #444;
}

/* --- CACHE MANAGER STYLE END --- */

/* --- AUDIO HISTORY STYLE START --- */

#historyloader {
	position: absolute;
	width: 100%;
	height: 0;
	background-color: #000000;
	z-index: 10;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

#historyModal .modal-body {
	max-height: 50vh;
	overflow-y: auto;
	padding: 0px 1px;
}

.history-table {
	text-align: center;
	vertical-align: middle;
	font-size: 0.8em;
	width: 100%;
}

.history-table thead th {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	background-color: #333;
}

.history-table td {
	border: 1px solid #444;
}

.history-table .weekend {
	background-color: #111;
}

.history-table .now,
.history-table .today {
	background-color: #555;
}

.theuid {
	background-color: #80ff80 !important;
	color: #222 !important;
}

.theartist {
	background-color: #ffff99 !important;
	color: #222 !important;
}

.rightnow {
	border: 2px solid #aa0000 !important;
}

.history-table td.red {
	background-color: #aa0000;
	color: #fff;
}

.history-table td.green {
	background-color: #008800;
	color: #fff;
}

/* --- AUDIO HISTORY STYLE END --- */

.notebox {
	background-color: #2a2a2a;
	border: 3px solid #444;
	border-radius: 5px;
	padding: 10px;
	margin: 10px 0;
	font-size: 0.85em;
	text-align: left;
	display: flex;
	flex-direction: row;
}

.notebox i.fa {
	margin-right: 20px;
	margin-top: 4px;
}

.notebox span {
}

.radiobuttons .active {
	background-color: #007bff !important;
}

#completeOverlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.75);
	z-index: 10000;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

#hass {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: #000;
	opacity: 0.8;
	filter: alpha(opacity=80);
	overflow: hidden;
	z-index: 10000;
	background-image: url("../images/1450.png");
	background-position: center;
	background-repeat: no-repeat;
}

#current-playlist button {
	min-width: 45px;
	margin-top: 5px;
}

.multiS {
	cursor: pointer;
	cursor: hand;
}

/* --- LOG MODAL START --- */

#logloader {
	position: absolute;
	width: 100%;
	height: 0;
	background-color: #000000;
	z-index: 10;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

#logloader .modal-body {
	max-height: 50vh;
	overflow-y: auto;
	padding: 0px 1px;
}

.rightnote {
	font-size: 0.8em;
	color: #888;
	text-align: right;
	margin-bottom: 10px;
}

/* --- STATION CHOICE STYLE START --- */

#stationcontainer {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	/*	background-color:#111;*/
	text-align: center;
	padding: 50px 20px;
	color: #fff;
}

#stationcontainer h2 {
	margin-bottom: 20px;
}

#stationcontainer .loginlogo img.logo {
	width: 400px;
	height: auto;
	margin-bottom: 10px;
}

.stationcard {
	width: 200px;
	display: inline-block;
	margin: 10px;
	color: #fff;
	text-align: center;
	cursor: hand;
	cursor: pointer;
	vertical-align: top;
}

.stationcard .logo {
	width: 200px;
	height: 150px;
	background-color: #444;
	padding: 20px;
	border-radius: 5px;
	border: 1px solid #555;
	margin-bottom: 20px;
	box-shadow: 0 0 20px #111;
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
	transition: box-shadow 0.25s ease;
}

.stationcard .logo:hover {
	box-shadow: 0 0 20px #444;
}

.stationcard .logo img {
	width: 90%;
}

.stationcardiso {
	position: relative;
	width: 200px;
	display: inline-block;
	margin: 10px;
	color: #fff;
	text-align: center;
}

.offline {
	background-image: url("../images/offline.png");
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 5px;
}

.stationcardiso .logo {
	width: 200px;
	height: 150px;
	background-color: #444;
	/*	padding:20px;*/
	border-radius: 5px;
	border: 1px solid #555;
	margin-bottom: 20px;
	box-shadow: 0 0 20px #111;
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
	transition: box-shadow 0.25s ease;
}

.stationcardiso .logo img {
	width: 90%;
}

/* --- STATION CHOICE STYLE END --- */

.greyscale {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: gray;
	/* IE 6-9 */
}

.removevt {
	margin-right: 15px;
	opacity: 0.4;
	filter: alpha(opacity=40);
	width: auto;
	height: 16px;
	margin-bottom: 3px;
	cursor: hand;
	cursor: pointer;
}

.removevt:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}

#filelist .vterror {
	color: #aa0000;
}

/* --- QUICK KEYS STYLE START --- */

#qs-topbar {
	display: flex;
	flex-direction: row;
	padding: 2px;
	/* padding-top: 1px;
    padding-bottom: 5px;
    white-space: nowrap; */
}

#qs-topbar button:first-child {
	margin-left: 0 !important;
}

#qs-topbar button:last-child {
	margin-right: 0 !important;
}

#quicksetoptions {
	flex: 1;
	margin-right: 5px;
	/* float: left;
    width: 70%;
    margin-right: 10px; */
}

/* #quickkeys {
    width: 100%;
    height: 100%;
    display: table;
} */

#quickkeys {
	display: flex;
	flex: 1;
	flex-direction: row;
	flex-wrap: wrap;
	overflow-y: hidden;
}

/* .quickkeycol {
    vertical-align: middle;
    display: table-cell;
    padding: 2px;
    height: 10px;
    overflow: hidden;
} */

.quickkeycol {
	display: flex;
	padding: 2px;
	/* height: 10px; */
	overflow: hidden;
}

.quickkey {
	position: relative;
	background-color: #333333;
	width: 100%;
	height: 100%;
	color: #fff;
	border: 1px solid #ccc;
	border-radius: 5px;
	/* display: flex;
    flex-direction: column; */
	align-items: center;
	justify-content: center;
	padding: 5px;
	cursor: hand;
	cursor: pointer;
	background: linear-gradient(to top, darken(#339966, 10%) 50%, #339966 100%);
	overflow: hidden;
}

.quickkey:hover {
	border-color: #0066cc;
}

.quickkey:active {
	opacity: 0.95;
	filter: alpha(opacity=95);
}

/* .quickkey .qkicons {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    text-align: center;
    height: 30px;
}

.quickkey .qkicons img {
    margin: 5px;
    width: 5%;
    min-width: 16px;
} */

.quickkey .innerbox {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	max-width: 100%;
	max-height: 100%;
}

.quickkey .innertitle {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex: 1;
	/* border: 1px solid #000; */
	text-align: center;
	font-size: clamp(10px, 2vw, 22px);
	line-height: 120%;
}

.quickkey .innertime {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	/* height: 25px; */
	/* border: 1px solid #000; */
	font-size: clamp(10px, 2vw, 22px);
	font-weight: bold;
}

.quickkey .innertime:empty {
	display: none;
}

.quickkey .qkicons {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.quickkey .qkicons img {
	margin: 5px 5% 0;
	width: 20%;
	min-width: 8px;
	max-width: 32px;
}

.quickkey .qkicons img:first-child {
	margin-left: 0;
}

.quickkey .qkicons img:last-child {
	margin-right: 0;
}

/* .keylegend {
    font-family: inherit!important;
    font-size: clamp(10px, 2vw, 22px);
    line-height: 120%;
    position: relative;
    text-align: center;
    width: 100%;
    vertical-align: middle;
    top: 0px;
    max-height: 50%;
    max-width: 100%;
    overflow: hidden;
}

#quickkeyscontainer .keylegend {
    font-size: 12px;
    line-height: 100%;
} */

.quickkey .qkicons .fade {
	opacity: 0.05;
}

.quicksettoolbar {
	height: 60px;
}

.qkprogress {
	width: 0%;
	background: rgba(0, 0, 0, 0.25);
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
}

.nokeys {
	text-align: center;
	width: 550px;
	color: white;
	border: 10px solid #999999;
	-webkit-box-shadow: 0px 0px 10px 10px rgba(42, 42, 42, 0.4);
	-moz-box-shadow: 0px 0px 10px 10px rgba(42, 42, 42, 0.4);
	box-shadow: 0px 0px 10px 10px rgba(42, 42, 42, 0.4);
	border-radius: 5px;
	background: #2a2a2a;
	/* Old browsers */
	background: -moz-linear-gradient(top, #2a2a2a 0%, #222222 100%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(top, #2a2a2a 0%, #222222 100%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #2a2a2a 0%, #222222 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#2a2a2a', endColorstr='#222222', GradientType=0);
	/* IE6-9 */
	margin: auto;
	padding: 2em;
}

/* .qkcontainer {
    width: 100%;
    display: table-cell;
    height: 100%;
} */

/* .quickkeycol {
    display: inline-block;
} */

/* .quickkey {
	container: wvt-quick-key / size;
}

.quickkey .innertime {
	font-size: 16px;
}

@container wvt-quick-key (max-width: 140px) {
	.quickkey .innertime {
		font-size: 10px;
		background: green;
	}
}

@container wvt-quick-key (max-height: 60px) {
	.quickkey .innertime {
		font-size: 10px;
		background: red;
	}
} */

/* --- QUICK KEYS STYLE END --- */

/* --- XLOG START --- */

#xlogblock {
	flex: 0.75;
	padding-left:10px;
}

#xlogcontainer {
	/* flex: 1;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow-y: scroll; */
}

/* --- XLOG END --- */

/* --- CUSTOM VOICE TRACK START --- */

#cvtblock {
	display: flex;
}

#cvtcontainer {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.cvtstation {
	color: #fff;
	min-height: 50px;
	background-color: #333;
	margin-bottom: 1px;
}

.cvtstation .grdback {
	display: flex;
	min-height: 50px;
	padding: 10px;
}

.cvtstation .cvtcol {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 16%;
	padding: 5px;
	text-align: center;
}

.cvtstation.current {
	background-color: #0066cc;
}

.cvtstation .station-icon {
	width: 40px;
	min-width: 40px;
	cursor: pointer;
	cursor: hand;
}

.cvtstation .stationcvt {
	min-width: 120px;
	width: 50%;
	text-align: left;
	justify-content: left;
	border-radius: 5px;
	cursor: pointer;
	cursor: hand;
}

.cvtstation .playcvt {
	cursor: pointer;
	cursor: hand;
}

.cvtstation .playcvt .circlebox {
	margin-top: 0;
}

.cvtstation .uidcvt {
	width: 20%;
	min-width: 130px;
}

.cvtstation .lengthcvt {
	width: 10%;
	min-width: 80px;
}

.cvtstation .dumpcvt {
	width: 40px;
	cursor: pointer;
	cursor: hand;
}

.cvtstation .grdback {
	background: -moz-linear-gradient(
		top,
		rgba(255, 255, 255, 0.05) 0%,
		rgba(255, 255, 255, 0) 15%,
		rgba(0, 0, 0, 0) 85%,
		rgba(0, 0, 0, 0.05) 100%
	);
	background: -webkit-linear-gradient(
		top,
		rgba(255, 255, 255, 0.05) 0%,
		rgba(255, 255, 255, 0) 15%,
		rgba(0, 0, 0, 0) 85%,
		rgba(0, 0, 0, 0.05) 100%
	);
	background: linear-gradient(
		top,
		rgba(255, 255, 255, 0.05) 0%,
		rgba(255, 255, 255, 0) 15%,
		rgba(0, 0, 0, 0) 85%,
		rgba(0, 0, 0, 0.05) 100%
	);
}

.cvtstation.hasaudio {
	color: yellow;
}

.cvtstation .stationcvt:hover {
	background-color: #555;
}

.cvtstation .stationcvt:active {
	background-color: #444;
}

.cvtstation.current .stationcvt {
	cursor: default;
	pointer-events: none;
}

.cvtstation .dumpcvt.noselect {
	pointer-events: none;
}

.cvtstation .dumpcvt:hover {
	color: #ffffff;
}

.cvtstation .dumpcvt:active {
	color: #dddddd;
}

.cvtstation .noaudio {
	opacity: 0.25;
	pointer-events: none;
}

/* --- CUSTOM VOICE TRACK END --- */

#instantaudio {
	border-bottom: 1px solid #3e4144;
	color: #fff;
	background: transparent;
	/* Old browsers */
	width: 25%;
	min-width: 370px;
	/* padding-left: 3px;
    padding-top: 2px; */
	cursor: normal !important;
}

.slot {
	position: relative;
	padding: 12px 0px;
	margin: 3px;
	border: 1px solid #888;
	background-color: #222;
	border-radius: 5px;
	flex: 1;
}

.slot .progress {
	width: 0%;
	height: 100%;
	background: rgba(150, 150, 150, 0.15);
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	transition: width 1s linear;
}

.progintro {
	background: rgba(252, 183, 0, 0.2) !important;
}

.slot .time {
	font-size: 12px;
	color: #fff;
	padding-top: 8px;
	font-weight: bold;
}

.slot .title {
	width: 100%;
	max-width: 310px;
	font-size: 12px;
	color: #fff;
	padding-top: 8px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.volume_slider {
	padding-top: 6px;
}

.slider {
	-webkit-appearance: none;
	width: 100%;
	height: 8px;
	border-radius: 5px;
	background: #555;
	outline: none;
	opacity: 0.7;
	-webkit-transition: 0.2s;
	transition: opacity 0.2s;
}

#livemic .slider {
	background: transparent;
}

/* #audioinput .slider,
#audiooutput .slider {
    background: transparent;
} */

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #006699;
	cursor: pointer;
}

.slider::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #006699;
	cursor: pointer;
}

.sliderval {
	font-size: 12px;
	display:inline-block;
	min-width:35px!important;
	font-variant-numeric: tabular-nums;
}

.instant_startrecord,
.instant_stoprecord {
	border: none;
	background-color: #333;
	color: #fff;
	padding: 5px 10px;
	border-radius: 5px;
	height: 32px;
	min-width: 202px;
	max-width: 202px;
	margin: 5px;
	margin-top: 10px;
}

#seguecontainer {
	flex: 1;
	overflow: hidden;
	display: flex;
	/* height: 350px; */
}

#instantaudiostack {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.iconcart,
.removecart {
	opacity: 0.4;
	filter: alpha(opacity=40);
	width: auto;
	height: 16px;
	margin-bottom: 3px;
	cursor: hand;
	cursor: pointer;
}

.removecart:hover {
	opacity: 1;
	filter: alpha(opacity=100);
	cursor: hand;
	cursor: pointer;
}

/*.iconcart:hover {
	opacity: 1;
	filter: alpha(opacity=100);
	cursor: hand;
	cursor: pointer;
}*/

.iconactive {
	opacity: 1;
	filter: alpha(opacity=100);
}

.disableSave {
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

/* Firefox Scrollbar */

:root {
	scrollbar-color: #777 #444 !important;
	scrollbar-width: thin !important;
	scrollbar-height: thin !important;
}

div.whiteboard textarea {
	scrollbar-color: #888 rgba(90, 90, 90, 0.5) !important;
}

/*Chrome Scrollbar */

::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

::-webkit-scrollbar-track {
	background-color: #444;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

div.whiteboard textarea::-webkit-scrollbar-track {
	background-color: transparent;
	-webkit-box-shadow: none;
}

scrollbar-thumb,
::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background-color: #777;
	border: 2px solid #444;
}

div.whiteboard textarea::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background-color: #888;
	border: none;
}

.markerpick,
.markerpicktimeonly {
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 20px;
	padding-top: 0;
	border-radius: 10px;
	border: 1px solid #2e2e2e;
	background-color: #1b1b1b;
}

.markerpicktimeonly .timepicker {
	margin-left: auto !important;
	margin-right: auto !important;
}

.timepicker-sbs {
	width: 100% !important;
}

.togglepad .toggle,
.togglepadtimeonly .toggle {
	margin-right: 20px;
}

.togglepadtimeonly {
	justify-content: center;
}

.togglepadtimeonly .toggle:last-child {
	margin-right: 0;
}

.bootstrap-datetimepicker-widget table.table-condensed {
	height: 300px;
}

.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover,
.bootstrap-datetimepicker-widget table td.second:hover,
.bootstrap-datetimepicker-widget table td span:hover,
.bootstrap-datetimepicker-widget table th:hover {
	color: #000;
}

.bootstrap-datetimepicker-widget table th.dow,
.bootstrap-datetimepicker-widget table td span {
	color: #fff;
}

.bootstrap-datetimepicker-widget .datepicker {
	flex: 0 0 58.333333%;
	max-width: 58.333333%;
}

.bootstrap-datetimepicker-widget .timepicker {
	flex: 0 0 41.666667%;
	max-width: 41.666667%;
}

.dateonly .bootstrap-datetimepicker-widget .datepicker {
	flex: 0 0 58.333333%;
	max-width: 100%;
}

.bootstrap-datetimepicker-widget table td.disabled:hover {
	color: #444;
}

.datetimebox {
	font-size: 12px !important;
	padding: 5px !important;
	text-align: center !important;
	height: auto !important;
	margin-top: -2px !important;
}

/****** LIVE MIC STUFF START *******/

#livemic,
#livemic div {
	display: flex;
	justify-content: center;
	align-items: center;
}

#livemic .disabled {
	opacity: 0.5;
	filter: alpha(opacity=50);
}

#livemic .module {
	border: 1px solid #111;
	background: #333;
	border-radius: 5px;
	background: rgba(59, 59, 59, 1);
	background: -moz-linear-gradient(
		top,
		rgba(59, 59, 59, 1) 0%,
		rgba(56, 56, 56, 1) 47%,
		rgba(54, 54, 54, 1) 100%
	);
	background: -webkit-gradient(
		left top,
		left bottom,
		color-stop(0%, rgba(59, 59, 59, 1)),
		color-stop(47%, rgba(56, 56, 56, 1)),
		color-stop(100%, rgba(54, 54, 54, 1))
	);
	background: -webkit-linear-gradient(
		top,
		rgba(59, 59, 59, 1) 0%,
		rgba(56, 56, 56, 1) 47%,
		rgba(54, 54, 54, 1) 100%
	);
	background: -o-linear-gradient(
		top,
		rgba(59, 59, 59, 1) 0%,
		rgba(56, 56, 56, 1) 47%,
		rgba(54, 54, 54, 1) 100%
	);
	background: -ms-linear-gradient(
		top,
		rgba(59, 59, 59, 1) 0%,
		rgba(56, 56, 56, 1) 47%,
		rgba(54, 54, 54, 1) 100%
	);
	background: linear-gradient(
		to bottom,
		rgba(59, 59, 59, 1) 0%,
		rgba(56, 56, 56, 1) 47%,
		rgba(54, 54, 54, 1) 100%
	);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3b3b3b', endColorstr='#363636', GradientType=0);
	padding: 0px 20px;
}

#livemic #MicLive {
	width: 200px;
}

#livemic .fader {
	position: relative;
}

#livemic .mid {
	flex-grow: 0;
}

#livemic #liveconnect {
	flex-grow: 1;
}

#livemic .slider {
	width: 80px;
	z-index: 1000;
}

#livemic .legend {
	background-color: #eee;
	color: #444;
	font-size: 11px;
	font-weight: thin;
	border: 1px solid #ccc;
	width: 60px;
	height: 20px;
	border-radius: 2px;
	margin: 15px auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* #livemic #livedip .legend {
    padding-left: 5px;
    padding-right: 5px;
    width: 110px;
} */

#livemic .button {
	border: 3px solid #222;
	width: 60px;
	height: 40px;
	border-radius: 5px;
	margin: 10px 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	cursor: hand;
	transition: all 0.15s ease-in-out;
	color: #fff;
	font-size: 14px;
	user-select: none;
	/* supported by Chrome and Opera */
	-webkit-user-select: none;
	/* Safari */
	-khtml-user-select: none;
	/* Konqueror HTML */
	-moz-user-select: none;
	/* Firefox */
	-ms-user-select: none;
	/* Internet Explorer/Edge */
}

#livemic .button:active {
	border-width: 4px;
}

#livemic .active {
	filter: brightness(120%) !important;
	box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.25);
}

.switcher {
	margin: 10px 15px 10px 15px;
}

.switcher .button {
	margin: 0 !important;
	border-radius: 0 !important;
	border-left-width: 1.5px !important;
	border-right-width: 1.5px !important;
	width: 80px !important;
}

.switcher .button:first-of-type {
	border-top-left-radius: 5px !important;
	border-bottom-left-radius: 5px !important;
	border-left-width: 3px !important;
}

.switcher .button:last-of-type {
	border-top-right-radius: 5px !important;
	border-bottom-right-radius: 5px !important;
	border-right-width: 3px !important;
}

#livemic .red {
	background: rgba(210, 52, 25, 1);
	background: -moz-linear-gradient(
		top,
		rgba(210, 52, 25, 1) 0%,
		rgba(220, 69, 46, 1) 50%,
		rgba(187, 41, 22, 1) 51%,
		rgba(187, 46, 27, 1) 71%,
		rgba(180, 46, 34, 1) 100%
	);
	background: -webkit-gradient(
		left top,
		left bottom,
		color-stop(0%, rgba(210, 52, 25, 1)),
		color-stop(50%, rgba(220, 69, 46, 1)),
		color-stop(51%, rgba(187, 41, 22, 1)),
		color-stop(71%, rgba(187, 46, 27, 1)),
		color-stop(100%, rgba(180, 46, 34, 1))
	);
	background: -webkit-linear-gradient(
		top,
		rgba(210, 52, 25, 1) 0%,
		rgba(220, 69, 46, 1) 50%,
		rgba(187, 41, 22, 1) 51%,
		rgba(187, 46, 27, 1) 71%,
		rgba(180, 46, 34, 1) 100%
	);
	background: -o-linear-gradient(
		top,
		rgba(210, 52, 25, 1) 0%,
		rgba(220, 69, 46, 1) 50%,
		rgba(187, 41, 22, 1) 51%,
		rgba(187, 46, 27, 1) 71%,
		rgba(180, 46, 34, 1) 100%
	);
	background: -ms-linear-gradient(
		top,
		rgba(210, 52, 25, 1) 0%,
		rgba(220, 69, 46, 1) 50%,
		rgba(187, 41, 22, 1) 51%,
		rgba(187, 46, 27, 1) 71%,
		rgba(180, 46, 34, 1) 100%
	);
	background: linear-gradient(
		to bottom,
		rgba(210, 52, 25, 1) 0%,
		rgba(220, 69, 46, 1) 50%,
		rgba(187, 41, 22, 1) 51%,
		rgba(187, 46, 27, 1) 71%,
		rgba(180, 46, 34, 1) 100%
	);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#d23419', endColorstr='#b42e22', GradientType=0);
	filter: brightness(70%);
}

#livemic .green {
	background: rgba(41, 172, 27, 1);
	background: -moz-linear-gradient(
		top,
		rgba(41, 172, 27, 1) 0%,
		rgba(55, 186, 38, 1) 50%,
		rgba(41, 154, 24, 1) 51%,
		rgba(43, 152, 27, 1) 71%,
		rgba(53, 150, 34, 1) 100%
	);
	background: -webkit-gradient(
		left top,
		left bottom,
		color-stop(0%, rgba(41, 172, 27, 1)),
		color-stop(50%, rgba(55, 186, 38, 1)),
		color-stop(51%, rgba(41, 154, 24, 1)),
		color-stop(71%, rgba(43, 152, 27, 1)),
		color-stop(100%, rgba(53, 150, 34, 1))
	);
	background: -webkit-linear-gradient(
		top,
		rgba(41, 172, 27, 1) 0%,
		rgba(55, 186, 38, 1) 50%,
		rgba(41, 154, 24, 1) 51%,
		rgba(43, 152, 27, 1) 71%,
		rgba(53, 150, 34, 1) 100%
	);
	background: -o-linear-gradient(
		top,
		rgba(41, 172, 27, 1) 0%,
		rgba(55, 186, 38, 1) 50%,
		rgba(41, 154, 24, 1) 51%,
		rgba(43, 152, 27, 1) 71%,
		rgba(53, 150, 34, 1) 100%
	);
	background: -ms-linear-gradient(
		top,
		rgba(41, 172, 27, 1) 0%,
		rgba(55, 186, 38, 1) 50%,
		rgba(41, 154, 24, 1) 51%,
		rgba(43, 152, 27, 1) 71%,
		rgba(53, 150, 34, 1) 100%
	);
	background: linear-gradient(
		to bottom,
		rgba(41, 172, 27, 1) 0%,
		rgba(55, 186, 38, 1) 50%,
		rgba(41, 154, 24, 1) 51%,
		rgba(43, 152, 27, 1) 71%,
		rgba(53, 150, 34, 1) 100%
	);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#29ac1b', endColorstr='#359622', GradientType=0);
	filter: brightness(70%);
}

#livemic .yellow {
	background: rgba(252, 234, 187, 1);
	background: -moz-linear-gradient(
		top,
		rgba(252, 234, 187, 1) 0%,
		rgba(252, 205, 77, 1) 50%,
		rgba(248, 181, 0, 1) 51%,
		rgba(251, 223, 147, 1) 100%
	);
	background: -webkit-gradient(
		left top,
		left bottom,
		color-stop(0%, rgba(252, 234, 187, 1)),
		color-stop(50%, rgba(252, 205, 77, 1)),
		color-stop(51%, rgba(248, 181, 0, 1)),
		color-stop(100%, rgba(251, 223, 147, 1))
	);
	background: -webkit-linear-gradient(
		top,
		rgba(252, 234, 187, 1) 0%,
		rgba(252, 205, 77, 1) 50%,
		rgba(248, 181, 0, 1) 51%,
		rgba(251, 223, 147, 1) 100%
	);
	background: -o-linear-gradient(
		top,
		rgba(252, 234, 187, 1) 0%,
		rgba(252, 205, 77, 1) 50%,
		rgba(248, 181, 0, 1) 51%,
		rgba(251, 223, 147, 1) 100%
	);
	background: -ms-linear-gradient(
		top,
		rgba(252, 234, 187, 1) 0%,
		rgba(252, 205, 77, 1) 50%,
		rgba(248, 181, 0, 1) 51%,
		rgba(251, 223, 147, 1) 100%
	);
	background: linear-gradient(
		to bottom,
		rgba(252, 234, 187, 1) 0%,
		rgba(252, 205, 77, 1) 50%,
		rgba(248, 181, 0, 1) 51%,
		rgba(251, 223, 147, 1) 100%
	);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93', GradientType=0);
	filter: brightness(80%);
}

#livemic .meter {
	border: 1px solid #333;
	border-radius: 5px;
	height: 6px;
	/* margin:15px; */
	/* margin-left: 15px; */
	overflow: hidden;
	/* width: 50px; */
	background-color: #222;
	border-bottom-color: #444;
	border-right-color: #444;
	justify-content: start;
	position: absolute;
	/* bottom: -10px; */
	left: 0;
	width: 80px;
	z-index: 0;
}

#livemic .metervol {
	width: 0%;
	height: 100%;
	background-color: #00aa00;
}

#livemic .sliderval {
	color: #fff;
	margin-left: 10px;
	min-width: 32px;
}

#livemic .flashmutebutton {
	-webkit-animation: MuteButton 1s infinite;
	/* Safari 4+ */
	-moz-animation: MuteButton 1s infinite;
	/* Fx 5+ */
	-o-animation: MuteButton 1s infinite;
	/* Opera 12+ */
	animation: MuteButton 1s infinite;
	/* IE 10+, Fx 29+ */
}

@-webkit-keyframes MuteButton {
	0%,
	49% {
		opacity: 1;
		filter: alpha(opacity=100);
	}
	50%,
	100% {
		opacity: 0.5;
		filter: alpha(opacity=50);
	}
}

/****** LIVE MIC STUFF END *******/

/* --- MONITOR START --- */

#monitor {
	color: #fafafa;
	padding: 10px;
}

#monitor .hidden {
	display: none;
}

#monitor .error {
	background: #aa0000;
	background: -moz-linear-gradient(
			top,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.6) 48%,
			rgba(255, 255, 255, 0.6) 50%,
			rgba(255, 255, 255, 0.58) 52%,
			rgba(255, 255, 255, 0) 100%
		),
		-moz-linear-gradient(#aa0000, #aa0000);
	background: -webkit-linear-gradient(
			top,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.6) 48%,
			rgba(255, 255, 255, 0.6) 50%,
			rgba(255, 255, 255, 0.58) 52%,
			rgba(255, 255, 255, 0) 100%
		),
		-webkit-linear-gradient(#aa0000, #aa0000);
	background: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0) 0%,
			rgba(255, 255, 255, 0.1) 48%,
			rgba(0, 0, 0, 0.15) 50%,
			rgba(0, 0, 0, 0.2) 52%,
			rgba(0, 0, 0, 0.3) 100%
		),
		linear-gradient(#aa0000, #aa0000);
	color: #fff !important;
}

#monitor .ok {
	background: #267348;
	background: -moz-linear-gradient(
			top,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.6) 48%,
			rgba(255, 255, 255, 0.6) 50%,
			rgba(255, 255, 255, 0.58) 52%,
			rgba(255, 255, 255, 0) 100%
		),
		-moz-linear-gradient(#267348, #267348);
	background: -webkit-linear-gradient(
			top,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.6) 48%,
			rgba(255, 255, 255, 0.6) 50%,
			rgba(255, 255, 255, 0.58) 52%,
			rgba(255, 255, 255, 0) 100%
		),
		-webkit-linear-gradient(#267348, #aa0000);
	background: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0) 0%,
			rgba(255, 255, 255, 0.1) 48%,
			rgba(0, 0, 0, 0.15) 50%,
			rgba(0, 0, 0, 0.2) 52%,
			rgba(0, 0, 0, 0.3) 100%
		),
		linear-gradient(#267348, #267348);
	color: #fff !important;
}

#monitor .info {
	background: #ee8702;
	background: -moz-linear-gradient(
			top,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.6) 48%,
			rgba(255, 255, 255, 0.6) 50%,
			rgba(255, 255, 255, 0.58) 52%,
			rgba(255, 255, 255, 0) 100%
		),
		-moz-linear-gradient(#ee8702, #ee8702);
	background: -webkit-linear-gradient(
			top,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.6) 48%,
			rgba(255, 255, 255, 0.6) 50%,
			rgba(255, 255, 255, 0.58) 52%,
			rgba(255, 255, 255, 0) 100%
		),
		-webkit-linear-gradient(#ee8702, #ee8702);
	background: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0) 0%,
			rgba(255, 255, 255, 0.1) 48%,
			rgba(0, 0, 0, 0.15) 50%,
			rgba(0, 0, 0, 0.2) 52%,
			rgba(0, 0, 0, 0.3) 100%
		),
		linear-gradient(#ee8702, #ee8702);
	color: #fff !important;
}

#monitor .disabled {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#232323+0,292929+12,2f2f2f+25,212121+39,141414+50,000000+51,080808+60,141414+76,0d0d0d+91,090909+100 */
	background: rgb(35, 35, 35);
	/* Old browsers */
	background: -moz-linear-gradient(
		top,
		rgba(35, 35, 35, 1) 0%,
		rgba(41, 41, 41, 1) 12%,
		rgba(47, 47, 47, 1) 25%,
		rgba(33, 33, 33, 1) 39%,
		rgba(20, 20, 20, 1) 50%,
		rgba(0, 0, 0, 1) 51%,
		rgba(8, 8, 8, 1) 60%,
		rgba(20, 20, 20, 1) 76%,
		rgba(13, 13, 13, 1) 91%,
		rgba(9, 9, 9, 1) 100%
	);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(
		top,
		rgba(35, 35, 35, 1) 0%,
		rgba(41, 41, 41, 1) 12%,
		rgba(47, 47, 47, 1) 25%,
		rgba(33, 33, 33, 1) 39%,
		rgba(20, 20, 20, 1) 50%,
		rgba(0, 0, 0, 1) 51%,
		rgba(8, 8, 8, 1) 60%,
		rgba(20, 20, 20, 1) 76%,
		rgba(13, 13, 13, 1) 91%,
		rgba(9, 9, 9, 1) 100%
	);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(
		to bottom,
		rgba(35, 35, 35, 1) 0%,
		rgba(41, 41, 41, 1) 12%,
		rgba(47, 47, 47, 1) 25%,
		rgba(33, 33, 33, 1) 39%,
		rgba(20, 20, 20, 1) 50%,
		rgba(0, 0, 0, 1) 51%,
		rgba(8, 8, 8, 1) 60%,
		rgba(20, 20, 20, 1) 76%,
		rgba(13, 13, 13, 1) 91%,
		rgba(9, 9, 9, 1) 100%
	);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#232323', endColorstr='#090909', GradientType=0);
	/* IE6-9 */
	color: #666;
}

#monitor .monitorborder {
	border: 1px solid #444;
	border-top-color: #333;
	border-left-color: #333;
	padding: 10px;
	border-radius: 15px;
	background-color: #1a1a1a;
	margin: 3px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

#monitor #applications {
	display: flex;
	flex-wrap: wrap;
}

#monitor #applications .cell {
	min-width: 16.66666666666667%;
	width: 16.66666666666667%;
	max-width: 16.66666666666667%;
	padding: 5px;
	display: flex;
}

#monitor #applications .app {
	display: flex;
	width: 100%;
	border: 1px solid #aaa;
	background-color: #222;
	color: #888;
	padding: 5px 10px;
	border-radius: 15px;
	justify-content: center;
	align-items: center;
	text-align: center;
	overflow: hidden;
}

#monitor #applications .app .name {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

#monitor .stationstatus {
}

#monitor .stationstatus .status {
	font-weight: bold;
	font-size: 3em;
	text-align: center;
	text-transform: uppercase;
}

#monitor #stations {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
}

#monitor .station {
	height: 100%;
}

#monitor .station .idpanel {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}

#monitor .station .logo {
	border: 1px solid #555;
	border-top-color: #3a3a3a;
	border-left-color: #3a3a3a;
	background-color: #222;
	border-radius: 5px;
	padding: 10px 20px;
	margin-bottom: 10px;
	width: 100%;
	height: 70%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

#monitor .station .logo img {
	max-height: 50px;
}

#monitor .station .name {
	border: 1px solid #555;
	border-top-color: #3a3a3a;
	border-left-color: #3a3a3a;
	background-color: #222;
	border-radius: 5px;
	padding: 10px 20px;
	width: 100%;
	height: 30%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.5em;
	font-weight: bold;
}

#monitor .station .infopanel {
	border: 1px solid #555;
	border-top-color: #3a3a3a;
	border-left-color: #3a3a3a;
	background-color: #222;
	border-radius: 5px;
	padding: 10px 20px;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	/* justify-content: center;
    align-items: center; */
}

#monitor .station .infopanel .listitems {
	display: flex;
	flex-direction: column;
	height: 100%;
}

#monitor .station .infopanel .listitems .listline {
	border: 1px solid #555;
	border-top-color: #3a3a3a;
	border-left-color: #3a3a3a;
	border-radius: 5px;
	background-color: #222;
	padding: 5px 10px;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 5px 0;
}

#monitor .station .infopanel .listitems .listline:first-of-type {
	margin-top: 0;
}

#monitor .station .infopanel .listitems .listline:last-of-type {
	margin-bottom: 0;
}

#monitor .station .nowplaying {
	position: absolute;
	border: 1px solid #555;
	border-top-color: #3a3a3a;
	border-left-color: #3a3a3a;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	padding: 1em;
}

#monitor .station .nowplaying .overlay {
	background-color: rgba(0, 0, 0, 0.5);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 5;
}

#monitor .station .nowplaying .title {
	font-weight: bold;
	/* font-size: 2.2em; */
	font-size: 1.5em;
	line-height: 1em;
	text-shadow: 0px 0px 10px #000;
	text-overflow: ellipsis;
	z-index: 10;
	text-align: center;
}

#monitor .station .log {
	border: 1px solid #555;
	border-top-color: #3a3a3a;
	border-left-color: #3a3a3a;
	background-color: #222;
	border-radius: 5px;
	padding: 10px 20px;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

#monitor .station .log .nothingfound {
	display: none;
	font-size: 2.2em;
	font-weight: bold;
	letter-spacing: -1px;
	color: #aaa;
	position: absolute;
	left: 5%;
	top: 5%;
	right: 5%;
	bottom: 5%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#monitor .station .log .logcontent {
	overflow-y: auto;
	position: absolute;
	left: 5%;
	top: 5%;
	right: 5%;
	bottom: 5%;
}

#monitor .station .log .logcontent ul li.list-group-item {
	background-color: transparent !important;
	border: none !important;
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}

#monitor .station .vupanel {
	border: 1px solid #555;
	border-top-color: #3a3a3a;
	border-left-color: #3a3a3a;
	background-color: #222;
	border-radius: 5px;
	padding: 10px 20px;
	width: 100%;
	height: 100%;
	/* display: flex;
    justify-content: center;
    align-items: center; */
}

#monitor .station .monitorvu {
	width: 100%;
	height: 100%;
	border: 1px solid #333;
	background-color: #111;
	position: relative;
}

#monitor .station .vumeter {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 0%;
	background: #bfd255;
}

#monitor .logstatus,
#monitor .trafficstatus {
	cursor: hand;
	cursor: pointer;
}

.errorpanel {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	right: 5%;
	left: 5%;
	bottom: 5%;
	top: 5%;
	font-size: 28px;
}

/* --- MONITOR END --- */

#PlayNext {
	width: 150px;
}

#AutoMode,
#StopPlay {
	width: 95px;
}

.calendarHours {
	width: 100%;
	display: grid;
	grid-template-rows: 16.66666666666667% 16.66666666666667% 16.66666666666667% 16.66666666666667% 16.66666666666667% 16.66666666666667%;
	grid-auto-flow: column;
}

.calendarHours button {
	margin: 2px;
	border-radius: 5px;
	color: #fff;
	outline: none !important;
}


#LinkRecorderButton {
	display: none;
}

#LinkRecorder {
	display:none;
	height:100%;
	color:#fff;
}

#LinkRecorder #linkcontainer {
	display:flex;
	flex-direction: column;
	flex-wrap: nowrap;
	width:100%;
	height: 100%;
	gap: 5px;
	padding:5px;
}

#LinkRecorder #linkcontainer #linkbottom {
	display:flex;
	flex-direction: row;
	gap: 5px;
}

#LinkRecorder #linkcontainer #linktop {
	display:flex;
	gap:5px;
	flex-direction: column;
}

#LinkRecorder #linkcontainer #linktop,
#LinkRecorder #linkcontainer #linkbottom {
	flex:1;
}

#LinkRecorder #linkcontainer .playdump {
	display:flex;
	flex-direction: row;
	width:100%;
	height:100%;
	gap: 5px;
}

#LinkRecorder #linkcontainer .playdump button {
	flex:1;
}

.button-label {
	font-size:0.9em;
	margin-left:10px;
	margin-right:10px;
	/* display:block; */
	/* line-height: 1.2; */
}

/* #LinkRecorder #linkcontainer .playdump #linkplay {
	flex:1;
}

#LinkRecorder #linkcontainer .playdump #linkdump {
	flex:0.75;
} */

#LinkRecorder #linkcontainer .linkitems {
	display:flex;
	flex-direction: column;
	gap: 5px;
	flex:1;
	min-width:65%;
}

#LinkRecorder #linkcontainer .linkitem {
	font-size:12px;
	text-align:center;
	white-space: nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
	align-content: center;
	flex:1;
}

#LinkRecorder #linkcontainer .linkitems .linkitemrecord {
	max-height:1px;
	min-height: 1px;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
}

#LinkRecorder #linkcontainer .linkitems.recording div:nth-child(3) {
	color:#ff9b9d;
}

#LinkRecorder #linkcontainer .linkitems div:nth-child(3),
#LinkRecorder #linkcontainer .linkitems div:nth-child(4) {
	display:none;
}

#LinkRecorder #linkcontainer .linkitems div:nth-child(7) {
	display:block;
}

#LinkRecorder #linkcontainer .linkitems.recording div:nth-child(3),
#LinkRecorder #linkcontainer .linkitems.recording div:nth-child(4) {
	display:block;
}

#LinkRecorder #linkcontainer .linkitems.recording div:nth-child(6),
#LinkRecorder #linkcontainer .linkitems.recording div:nth-child(7) {
	display:none;
}

#LinkRecorder #linkcontainer #linkbottom button {
	flex:1;
}

#LinkRecorder #linkcontainer #linkduration {
	font-size: 0.9em;
}

#LinkRecorder #linkcontainer #linkduration.disabled {
	opacity: 0.5;
}

#LinkRecorder #linkcontainer .linkrecorditem {
	display:none;
}


#LinkRecorder #linkcontainer .fillup {
	flex:1;
}

#LinkRecorder #linkcontainer #linkbottom #linkdorecord {
	flex:1;
}

#LinkRecorderSegue {
	display:block;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	flex-wrap: nowrap;
	width:100%;
	height:100%;
	color:#fff;
	padding:10px; 
	gap: 5px;
}

#LinkRecorderSegue .linkmid-wave {
	flex:1;
	height:100%;
	margin-top:5px;
}

#LinkRecorderSegue #wavelinkrecorder {
	width:100%;
	height:50px;
}

#LinkRecorder #linkrecorderlevelback {
	background-color: #333;
	width:100%;
	height:6px;
	border-radius:2px;
	overflow:hidden;
	position:absolute;
	top:42%;
}

#LinkRecorder #linkrecorderlevel {
	background-color: green;
	width:0;
	height:100%;
}

.slidermod {
	display:flex;
	flex-direction: row;
	gap: 5px;
}

.slidermodule {
	padding-bottom:5px;
	flex:1;
	position: relative;
}

.slidermodule .slider {
	background: transparent;
}

.slidermod .fa,
.slidermod .sliderval {
	align-content: center;
	padding-right:5px;
	min-width:40px;
	text-align:right;
}

.slidermod .fa {
	min-width:30px;
	text-align: center;
}

.boxresize:last-of-type {
	min-height:200px;
}

.input-volume-device {
	position:relative;
	flex:0 0 75%;
}

.input-volume-slider {
	position: relative;
	flex:0 0 20%;
	display:flex;
	padding-left:20px;
	padding-right:10px;
}

.input-volume-slider .slider {
	flex-grow:1;
}

.input-volume-slider .sliderval {
	width:60px;
	align-content: center;
	text-align: right;
}

.input-volume-reset {
	position: relative;
	flex:0 0 5%;
}

/* --- CSS TO OVERRIDE FOR TABLETS AND SMALLER SCREENS --- */

/* Portrait and Landscape */

@media only screen and (max-width: 1390px) {
	#livemic .module {
		padding-left: 10px;
		padding-right: 10px;
	}
	#livemic #MicLive {
		width: 150px;
	}
}

@media only screen and (max-width: 1366px) {
	.tooltip {
		display: none !important;
	}
	/* #hour-bar .hourbuttons {
		vertical-align: middle;
	} */
	.show {
		display: none;
	}
	#hour-bar .hourbuttons button.dayClicked,
	#hour-bar .hourbuttons button.hourClicked {
		font-size: 0.75em;
	}
	#logo {
		display: none;
	}
	table#audio {
		font-size: 0.75em;
	}

	table#audio tbody td div.lastplayed {
		font-size: 0.7em;
	}

*/
	#livemic .slider {
		width: 40px;
	}
	#livemic .meter {
		/* width: 40px; */
	}
	#livemic .legend {
		display: none;
	}
	#livemic .button {
		font-size: 12px;
		height: 32px;
		width: 50px;
	}
}

@media only screen and (max-width: 1112px) {

}

@media only screen and (max-width: 1024px) {

	#current-playlist .btn {
		font-size: 1em;
	}
	#OnAirControls {
		padding-left: 0px;
		padding-right: 0px;
	}
	#OnAirControls #Sequencer {
		padding-left: 0;
		padding-right: 0;
	}
	#OnAirControls table td {
		padding: 2px;
		padding-bottom: 3px;
		width: 95px;
		min-width: 95px;
	}
	#OnAirControls .btn {
		padding: 4px;
		font-size: 0.7em;
		margin: 0;
		min-width: 48px;
	}
	#OnAirControls #NowPlaying {
		font-size: 0.7em;
		padding-bottom: 5px;
		padding-top: 1px !important;
		padding-left: 10px;
		padding-right: 10px;
		height: 30px;
		width: 200px;
		margin: 0;
	}
	#OnAirControls #TimeLeft {
		/* padding: 5px;
        padding-top: 7px; */
		font-size: 0.7em;
		margin: 0;
		height: 28px !important;
		/* width: 100%; */
	}
	#OnAirControls div.timeleft {
		width: 85px;
	}
	#OnAirControls #Clock {
		/* padding: 5px;
        padding-top: 7px; */
		font-size: 0.7em;
		margin: 0;
		height: 28px !important;
		width: 175px !important;
	}
	.play-console-container {
		width: 100%;
		margin: 0;
	}
	#playingprogressbar {
		height: 100%;
		border-radius: 0;
		margin: 0;
	}
	.play-console {
		height: 27px;
		overflow: hidden;
		border-radius: 5px;
		border: 1px solid #333;
		margin: 0;
	}

	.search-bar {
		padding-top: 5px;
		padding-bottom: 5px;
	}
	.search-bar .first-col {
		padding-left: 5px;
	}
	#audio-search-bar .custom-select {
		font-size: 0.7em !important;
		width: 150px;
	}
	#audio-search-bar .input-group-text,
	#audio-search-bar .form-control,
	#audio-search-bar .btn {
		font-size: 0.7em;
	}
	#audiotable {
		top: 43px;
	}
	h2.station-choice {
		margin-top: 20px;
		font-size: 3vw;
	}
	#stationcontainer {
		width: 90%;
		padding-left: 0;
		padding-right: 0;
	}
	#audio-search-bar .custom-select {
		width: 157px;
	}
	#audio-search-bar .col-3 {
		padding-left: 0;
		padding-right: 8px;
	}
	#audio-search-bar .col-2 {
		padding-left: 0;
		padding-right: 0;
		max-width: 16%;
	}
	#audio-search-bar .col-2:last-child {
		max-width: 300px;
		width: 300px;
		flex: 0 0 18%;
	}
	#livemic #modqk {
		display: none;
	}

	#PlayNext {
		width: 100px;
	}
	#AutoMode,
	#StopPlay {
		width: 70px;
	}

	#hour-bar .hour-bar .hourbuttons {
		gap:0;
	}

	#hour-bar .hour-bar .hour {
		font-size:9px;
	}

	#hour-bar .hour-bar .hour button {
		padding:0;
	}

	.wavebottom .btn,
	.wavebottom #vtmicinfo {
		font-size:12px!important;
	}

	.wavebottom .transportcontrols .btn {
		max-width:125px;
	}

	.wavebottom #ZoomOut,
	.wavebottom #ZoomIn {
		display: none;
	}

	#wavemain .volume {
		max-width:680px;
	}

	/* .scaled-bottom {
    	transform: scale(0.85);
    	transform-origin: center;
	} */

}

@media only screen and (max-width: 834px) {

	.hour-bar .hourdropdown {
		display: block;
		width: 100%;
		max-width: 100%;
	}
	.hour-bar .hour {
		display: none;
	}

	/* .hour-bar .hourdropdown {
		display: block;
		width: 100%;
		max-width: 100%;
	}
	.hour-bar .hourbuttons {
		display: none;
	} */

	.hour-bar .custom-select {
		font-size: 0.7em;
		width: 100%;
		text-align: center;
	}

	#current-playlist .btn {
		font-size: 1em;
		/* margin: 0; */
	}
	#current-playlist button.btn {
		/* margin-top: 3px; */
		min-width: 48px;
		width: 48px;
		padding: 6px 4px;
		font-size: 1em;
	}
	#audio-search-bar .custom-select {
		width: 107px;
	}
	#audio-search-bar .col-3 {
		padding-left: 0;
		padding-right: 8px;
	}
	#audio-search-bar .col-2 {
		padding-left: 0;
		padding-right: 0;
		max-width: 15%;
	}
	#audio-search-bar .col-2:last-child {
		max-width: 300px;
		width: 300px;
		flex: 0 0 20%;
	}
	.hour-bar tr {
		display: flex;
		flex-wrap: wrap;
	}
	#hour-bar .hourbuttons button {
		height: 32px;
	}
	#hour-bar .hourbuttons .nav {
		font-size: 1.3em;
	}
	#hour-bar .hourbuttons .hour {
		font-size: 1em;
		min-width: 7.5%;
	}
	#OnAirControls table tr {
		display: flex;
		flex-wrap: wrap;
	}
	#OnAirControls table tr td {
		padding: 2px;
		padding-bottom: 3px;
	}
	#OnAirControls table tr td .btn {
		padding: 4px;
		padding-top: 5px;
		font-size: 0.7em;
		/* height: 28px; */
		margin: 0;
		margin-top: 1px;
		width: 97% !important;
	}
	#OnAirControls table td.shrink {
		width: 300px;
	}
	#OnAirControls #NowPlaying {
		width: 100%;
	}
	#OnAirControls .play-console-container {
		width: 250px;
	}
	#OnAirControls #TimeLeft {
		padding: 5px;
		padding-top: 3px;
		margin: 0;
		padding-bottom: 1px;
		border-radius: 5px;
		border: 1px solid #333;
		width: 118px;
		background-color: #111;
	}
	.togchain,
	.playn {
		/* width: 250px!important; */
	}
	.liveauto,
	.automode {
		/* width: 134px!important; */
	}
	.modal-dialog {
		max-width: 97% !important;
	}
	#settingsModal .modal-body {
		font-size: 0.8em !important;
	}
	/* table#audio thead th div.uid,
    table#audio tbody td div.uid {
        padding-right: 0;
        min-width: 70px;
        width: 70px;
    } */
	#audio .mobile {
		min-width: 41px !important;
	}
	/* #OpenLiveMic,
	#livemic {
		display: none;
	} */

	#OnAirControls #Clock {
		padding-right:0!important;
	}

	#Sequencer #Clock {
		flex:1;
	}

	#Sequencer #Clock div {
		height:100%!important;
	}

	#Sequencer .play-console {
		/* margin-top:5px; */
	}

	#livemic {
		margin-bottom:1px;
	}

	#livemic .module {
		padding:0px;
		/* border: none;
		background: none; */
	}

	#livemic .module .button {
		margin: 5px 5px;
	}

	#livemic #audioinput {
		min-width: 180px;
	}

	#livemic .module:first-of-type {
		display:none;
	}

}

/* Was 480px - changed to 520px when working on the iPhone Sept 2023 */
@media only screen and (max-width: 520px) {

	#RefreshLog,
	#overall,
	#xlog {
		display:none;
	}

	#LinkRecorderButton {
		display: inline-block;
	}

	#LinkRecorder {
		display:flex;

	}

	/* .boxresize:last-of-type {
		min-height: 290px;
	} */

	#ShowSegues {
		display: none;	
	}

	#vtmicinfo {
		display: none;
	}

	#OnAirControls #Sequencer {
		flex-wrap: wrap;
	}
	#OnAirControls #Sequencer .play-console {
		flex-basis: 60%;
	}

	#OnAirControls .liveauto,
	#OnAirControls .automode,
	#OnAirControls .playn {
		flex:1;
	}

	#OnAirControls #PlayNext,
	#OnAirControls #AutoMode,
	#OnAirControls #StopPlay {
		min-width:100px;
		width: 100%;
	}

	#OnAirControls .playn {
		padding-right:2px;
	}

	#hour-bar .hour-bar {
		display:flex;
		flex-direction: row;
		gap:2px;
	}

	#hour-bar .hour-bar .btn {
		margin-left: 0!important;
		margin-right:0!important;
		border:none!important;
		background:none!important;
		box-shadow: none!important;
		padding-left:0!important;
		padding-right:0!important;
	}

	#hour-bar .hour-bar .custom-select {
		height:27px!important;
		padding-top:5px!important;
		margin-top:1px!important;
		margin-bottom:1px!important;
	}

	table#playlist thead th,
	table#xlogtable thead th,
	table#playlist tbody td,
	table#xlogtable tbody td {
		padding: 5px 5px;
		font-size: 12px;
	}

	table#playlist thead th div.status,
	table#playlist tbody td div.status {
		min-width:40px;
		padding-right:0;
		padding-left:0;
	}

	table#playlist thead th div.moveicon,
	table#playlist tbody td div.moveicon {
		min-width:25px;
		width:25px;
		padding-right:0;
	}

	table#playlist .uid {
		display:none!important;
	}

	#livemic #MicLive {
		width: 100px;
	}

	#livemic .module:first-of-type,
	#livemic #livedip .fader {
		display:none;
	}

}

/* NEW CSS SPINNER START */
.spinner {
	width: 80px;
	height: 80px;
	margin: 0 auto;
	border: 8px solid rgba(0, 0, 0, 0.2);
	border-top: 8px solid #007bff; /* Change the color to your preferred spinner color */
	border-radius: 50%;
	animation: spin 1s linear infinite; /* Adjust animation duration as needed */
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
/* NEW CSS SPINNER END */

/* CSS SPINNER START */

.sk-chase {
	width: 80px;
	height: 80px;
	position: relative;
	animation: sk-chase 2.5s infinite linear both;
}

.sk-chase-dot {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	animation: sk-chase-dot 2s infinite ease-in-out both;
}

.sk-chase-dot:before {
	content: "";
	display: block;
	width: 25%;
	height: 25%;
	background-color: #fff;
	border-radius: 100%;
	animation: sk-chase-dot-before 2s infinite ease-in-out both;
}

.sk-chase-dot:nth-child(1) {
	animation-delay: -1.1s;
}

.sk-chase-dot:nth-child(2) {
	animation-delay: -1s;
}

.sk-chase-dot:nth-child(3) {
	animation-delay: -0.9s;
}

.sk-chase-dot:nth-child(4) {
	animation-delay: -0.8s;
}

.sk-chase-dot:nth-child(5) {
	animation-delay: -0.7s;
}

.sk-chase-dot:nth-child(6) {
	animation-delay: -0.6s;
}

.sk-chase-dot:nth-child(1):before {
	animation-delay: -1.1s;
}

.sk-chase-dot:nth-child(2):before {
	animation-delay: -1s;
}

.sk-chase-dot:nth-child(3):before {
	animation-delay: -0.9s;
}

.sk-chase-dot:nth-child(4):before {
	animation-delay: -0.8s;
}

.sk-chase-dot:nth-child(5):before {
	animation-delay: -0.7s;
}

.sk-chase-dot:nth-child(6):before {
	animation-delay: -0.6s;
}

@keyframes sk-chase {
	100% {
		transform: rotate(360deg);
	}
}

@keyframes sk-chase-dot {
	80%,
	100% {
		transform: rotate(360deg);
	}
}

@keyframes sk-chase-dot-before {
	50% {
		transform: scale(0.4);
	}
	100%,
	0% {
		transform: scale(1);
	}
}

/* CSS SPINNER END */

@media only screen and (max-width: 812px) {
}

/* Was 412px but changed to 520px Sept 2023 to sort the station choice screen */
@media only screen and (max-width: 520px) {

	#settingsModal .version {
		flex:none;
		width:100%;
		text-align:right;
	}


	/* .hour-bar .hourdropdown {
        display: block;
        width: 60%;
        max-width: 60%;
    }
    .hour-bar .hour {
        display: none;
    } */
	.hour-bar .nav {
		width: 20%;
	}
	/* .hour-bar .custom-select {
        font-size: 0.7em!important;
        width: 100%;
        text-align: center;
    } */
	#hour-bar #current-playlist #multistation {
		margin-right: 0 !important;
	}
	/* #current-playlist span.btn {
        height: 28px;
        font-size: 0.59em;
        padding-top: 6px;
        margin-right: 5px;
        padding-left: 8px;
        padding-right: 8px;
    } */
	#ShowStationNotes,
	#ShowHourNotes,
	#FollowLog,
	#settings {
		/* display: none; */
	}
	/* #current-playlist button.btn {
        width: 35px;
        height: 28px;
    } */
	.loginlogo img.logo {
		width: 100% !important;
	}
	h2.station-choice {
		margin-top: 20px;
		font-size: 1em;
		padding-bottom: 20px;
	}
	#stationcontainer {
		padding-top: 25px;
		padding-bottom: 25px;
	}
	.stationcard {
		width: 100%;
		display: flex;
		margin-left: 0;
		margin-right: 0;
		padding: 10px;
		/* background-color: rgba(0, 0, 0, 0.2); */
		/* border: 1px solid #444; */
		border-radius: 5px;
		box-shadow: 0 0 10px rgba(0, 0, 0);
		background-color: #22222255;
		backdrop-filter: blur(10px);
	}
	.stationcard .logo {
		width: 40%;
		height: 100px;
		margin-bottom: 0;
	}
	.stationcard p.title {
		display: inline-block;
		margin-top: auto;
		margin-bottom: auto;
		margin-left: 20px;
		width: 158px;
		text-align: left;
	}
	#OnAirControls .shrink {
		width: 280px !important;
	}
	#OnAirControls #TimeLeft {
		padding-top: 2px;
		padding-bottom: 2px;
		width: 100%;
	}
	#OnAirControls #NowPlaying {
		padding-top: 5px;
		font-size: 0.8em;
	}
	/* #OnAirControls .liveauto,
    #OnAirControls .playn,
    #OnAirControls .automode,
    #OnAirControls .togchain {
        width: 25%!important;
    } */
	#OnAirControls .playn .btn {
		margin-right: 0 !important;
	}
	/* table#audio thead th div.inote,
    table#audio tbody td div.inote,
    table#audio thead th div.iover,
    table#audio tbody td div.iover,
    table#audio thead th div.isplit,
    table#audio tbody td div.isplit,
    table#audio thead th div.album,
    table#audio tbody td div.album,
    table#audio thead th div.category,
    table#audio tbody td div.category,
    table#audio thead th div.client,
    table#audio tbody td div.client,
    table#audio thead th div.year,
    table#audio tbody td div.year,
    table#playlist thead th div.ifade,
    table#playlist tbody td div.ifade,
    table#playlist thead th div.inote,
    table#playlist tbody td div.inote,
    table#playlist thead th div.iover,
    table#playlist tbody td div.iover,
    table#playlist thead th div.isplit,
    table#playlist tbody td div.isplit,
    table#playlist thead th div.album,
    table#playlist tbody td div.album,
    table#playlist thead th div.category,
    table#playlist tbody td div.category,
    table#playlist thead th div.year,
    table#playlist tbody td div.year,
    table#playlist thead th div.length,
    table#playlist tbody td div.length,
    table#playlist thead th div.intro,
    table#playlist tbody td div.intro,
    table#playlist .iimport {
        display: none!important;
    } */
	.nomobile {
		display: none;
	}
	.first-col {
		flex: 0 0 13% !important;
		max-width: 13% !important;
	}
	.mob1 {
		flex: 0 0 46% !important;
		max-width: 46% !important;
	}
	.mob2 {
		flex: 0 0 40% !important;
		max-width: 40% !important;
	}
	.quickkey {
		padding: 5px;
	}
	/* .quickkey .qklength {
        background-color: rgba(0, 0, 0, 0.15);
        border-radius: 20px;
        font-size: 0.75em;
        height: 18px;
        min-width: 45px;
    } */
	/* #quicksetoptions {
        width: 68%;
    } */
}

.dragover {
	opacity: 0.75;
}

/***** MODS ******/

table#audio thead th,
table#playlist thead th,
table#xlogtable thead th {
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5) !important;
}

#NowPlaying,
.play-console,
#TimeLeft,
#Clock div,
.slot,
.nav-item .active,
.dayClicked,
.hourClicked,
.calendarHourClicked,
.btn {
	box-shadow: 0 1px 0px rgba(0, 0, 0, 0.5) !important;
	transition: opacity 0.5s ease-in-out;
}

.hourClicked:hover,
.calendarHourClicked:hover,
.btn:hover {
	opacity: 0.75;
	filter: alpha(opacity=75);
}

.slot {
	background: #101010;
	background: -moz-linear-gradient(top, #202020 0%, #101010 100%);
	background: -webkit-linear-gradient(top, #202020 0%, #101010 100%);
	background: linear-gradient(to bottom, #202020 0%, #101010 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#202020', endColorstr='#101010', GradientType=0);
	border-color: rgba(255, 255, 255, 0.1) !important;
	border-bottom-color: rgba(0, 0, 0, 0.5) !important;
	border-right-color: rgba(0, 0, 0, 0.5) !important;
	border-top-color: rgba(255, 255, 255, 0.2) !important;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5) !important;
}

.nav-item .active,
.dayClicked,
.hourClicked,
.calendarHourClicked,
.btn-dark {
	background: #373737;
	background: -moz-linear-gradient(top, #404040 0%, #373737 100%);
	background: -webkit-linear-gradient(top, #404040 0%, #373737 100%);
	background: linear-gradient(to bottom, #404040 0%, #373737 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#404040', endColorstr='#373737', GradientType=0);
	border-bottom-color: rgba(0, 0, 0, 0.5) !important;
	border-right-color: rgba(0, 0, 0, 0.5) !important;
	border-left-color: rgba(255, 255, 255, 0.05) !important;
	border-top-color: rgba(255, 255, 255, 0.2) !important;
}

.calendarHours .pm {
	background: #2a2a2a;
	background: -moz-linear-gradient(top, #3a3a3a 0%, #2a2a2a 100%);
	background: -webkit-linear-gradient(top, #3a3a3a 0%, #2a2a2a 100%);
	background: linear-gradient(to bottom, #3a3a3a 0%, #2a2a2a 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3a3a3a', endColorstr='#2a2a2a', GradientType=0);
}

.calendarHours .btn-danger,
.btn-danger {
	background: #880000;
	background: -moz-linear-gradient(top, #aa0000 0%, #880000 100%);
	background: -webkit-linear-gradient(top, #aa0000 0%, #880000 100%);
	background: linear-gradient(to bottom, #aa0000 0%, #880000 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#aa0000', endColorstr='#880000', GradientType=0);
	border-bottom-color: rgba(0, 0, 0, 0.5) !important;
	border-right-color: rgba(0, 0, 0, 0.5) !important;
	border-left-color: rgba(255, 255, 255, 0.05) !important;
	border-top-color: rgba(255, 255, 255, 0.2) !important;
}

.purple {
	background: #7401b8;
	background: -moz-linear-gradient(top, #8d00dd 0%, #7401b8 100%);
	background: -webkit-linear-gradient(top, #8d00dd 0%, #7401b8 100%);
	background: linear-gradient(to bottom, #8d00dd 0%, #7401b8 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#8d00dd', endColorstr='#7401b8', GradientType=0);
	border-bottom-color: rgba(0, 0, 0, 0.5) !important;
	border-right-color: rgba(0, 0, 0, 0.5) !important;
	border-left-color: rgba(255, 255, 255, 0.05) !important;
	border-top-color: rgba(255, 255, 255, 0.2) !important;
}

.btn-warning {
	background: #efa230;
	background: -moz-linear-gradient(top, #e8b238 0%, #efa230 100%);
	background: -webkit-linear-gradient(top, #e8b238 0%, #efa230 100%);
	background: linear-gradient(to bottom, #e8b238 0%, #efa230 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e8b238', endColorstr='#efa230', GradientType=0);
	border-bottom-color: rgba(0, 0, 0, 0.5) !important;
	border-right-color: rgba(0, 0, 0, 0.5) !important;
	border-left-color: rgba(255, 255, 255, 0.05) !important;
	border-top-color: rgba(255, 255, 255, 0.2) !important;
}

.btn-success {
	background: #008800;
	background: -moz-linear-gradient(top, #00aa00 0%, #008800 100%);
	background: -webkit-linear-gradient(top, #00aa00 0%, #008800 100%);
	background: linear-gradient(to bottom, #00aa00 0%, #008800 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#444', endColorstr='#008800', GradientType=0);
	border-bottom-color: rgba(0, 0, 0, 0.5) !important;
	border-right-color: rgba(0, 0, 0, 0.5) !important;
	border-left-color: rgba(255, 255, 255, 0.05) !important;
	border-top-color: rgba(255, 255, 255, 0.2) !important;
}

.btn-primary {
	background: #3081f6;
	background: -moz-linear-gradient(top, #4e85d3 0%, #3081f6 100%);
	background: -webkit-linear-gradient(top, #4e85d3 0%, #3081f6 100%);
	background: linear-gradient(to bottom, #4e85d3 0%, #3081f6 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#4e85d3', endColorstr='#3081f6', GradientType=0);
	border-bottom-color: rgba(0, 0, 0, 0.5) !important;
	border-right-color: rgba(0, 0, 0, 0.5) !important;
	border-left-color: rgba(255, 255, 255, 0.05) !important;
	border-top-color: rgba(255, 255, 255, 0.2) !important;
}

.btn-secondary {
	background: #605f61;
	background: -moz-linear-gradient(top, #6a6a6a 0%, #605f61 100%);
	background: -webkit-linear-gradient(top, #6a6a6a 0%, #605f61 100%);
	background: linear-gradient(to bottom, #6a6a6a 0%, #605f61 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#6a6a6a', endColorstr='#605f61', GradientType=0);
	border-bottom-color: rgba(0, 0, 0, 0.5) !important;
	border-right-color: rgba(0, 0, 0, 0.5) !important;
	border-left-color: rgba(255, 255, 255, 0.05) !important;
	border-top-color: rgba(255, 255, 255, 0.2) !important;
}

.dayClicked,
.hourClicked,
.calendarHourClicked {
	border: 1px solid #343a40 !important;
	border-bottom-color: rgba(0, 0, 0, 0.5) !important;
	border-right-color: rgba(0, 0, 0, 0.5) !important;
	border-top-color: rgba(255, 255, 255, 0.2) !important;
}

#hour-bar .pm {
	background: #2a2a2a;
	background: -moz-linear-gradient(top, #3a3a3a 0%, #2a2a2a 100%);
	background: -webkit-linear-gradient(top, #3a3a3a 0%, #2a2a2a 100%);
	background: linear-gradient(to bottom, #3a3a3a 0%, #2a2a2a 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3a3a3a', endColorstr='#2a2a2a', GradientType=0);
}

.calendarHours button.active-hour,
#hour-bar .hourbuttons button.active-hour {
	background: #3081f6;
	background: -moz-linear-gradient(top, #4e85d3 0%, #3081f6 100%);
	background: -webkit-linear-gradient(top, #4e85d3 0%, #3081f6 100%);
	background: linear-gradient(to bottom, #4e85d3 0%, #3081f6 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#4e85d3', endColorstr='#3081f6', GradientType=0);
}

#hour-bar .hourbuttons button.locked {
	background: #880000;
	background: -moz-linear-gradient(top, #aa0000 0%, #880000 100%);
	background: -webkit-linear-gradient(top, #aa0000 0%, #880000 100%);
	background: linear-gradient(to bottom, #aa0000 0%, #880000 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#aa0000', endColorstr='#880000', GradientType=0);
}

#segues {
	background: #1a1a1a;
	background: -moz-linear-gradient(top, #202020 0%, #1a1a1a 100%);
	background: -webkit-linear-gradient(top, #202020 0%, #1a1a1a 100%);
	background: linear-gradient(to bottom, #202020 0%, #1a1a1a 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#202020', endColorstr='#1a1a1a', GradientType=0);
}

#wavemain .wave {
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
	background: #101010;
	background: -moz-linear-gradient(top, #202020 0%, #101010 100%);
	background: -webkit-linear-gradient(top, #202020 0%, #101010 100%);
	background: linear-gradient(to bottom, #202020 0%, #101010 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#202020', endColorstr='#101010', GradientType=0);
	/* border: 1px solid rgba(255, 255, 255, 0.25);
    border-right-color: rgba(0, 0, 0, 0.5);
    border-bottom-color: rgba(0, 0, 0, 0.5); */
	border-radius: 5px;
	overflow: hidden !important;
	/* position: relative; */
	z-index: 10 !important;
}

#wavemain .wave wave {
	overflow: hidden !important;
}

.play-console {
	position: relative;
}

#playlist-date {
	display: block;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/* line-height: 16px; */
}

#hourtiming {
	display: block;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/* line-height: 16px; */
}

#OnAirControls #Sequencer {
	display: flex;
	flex-direction: row;
	padding: 5px;
	gap:5px 2px;
}

#OnAirControls #Clock {
	width: 275px;
	padding-right: 5px;
}

#OnAirControls #Clock div,
#OnAirControls #TimeLeft {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 38px;
	background-color: #111111;
	border: 1px solid #333333;
	border-radius: 0.25rem;
	display: grid;
	align-items: center;
	justify-content: center;
	width: 100%;

}

#OnAirControls #NowPlaying {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: auto;
	display: flex;
	justify-content: left;
	text-align: left;
	align-items: center;
	border: none;
	box-shadow: none;
	background: none;
	padding-top: 4px;
	background: -moz-linear-gradient(
		top,
		rgba(0, 0, 0, 0.1) 0%,
		rgba(0, 0, 0, 0.3) 100%
	);
	background: -webkit-linear-gradient(
		top,
		rgba(0, 0, 0, 0.1) 0%,
		rgba(0, 0, 0, 0.3) 100%
	);
	background: linear-gradient(
		top,
		rgba(0, 0, 0, 0.1) 0%,
		rgba(0, 0, 0, 0.3) 100%
	);
}

.play-console-container {
	padding-left: 5px;
	padding-right: 5px;
}

#PlayNext.btn {
	margin-right: 0px !important;
}

table#audio td,
table#playlist td,
table#xlogtable td {
	position: relative !important;
}

.gradback {
	/* border: 1px solid red; */
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: -moz-linear-gradient(
		top,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0) 15%,
		rgba(0, 0, 0, 0) 85%,
		rgba(0, 0, 0, 0.075) 100%
	);
	background: -webkit-linear-gradient(
		top,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0) 15%,
		rgba(0, 0, 0, 0) 85%,
		rgba(0, 0, 0, 0.075) 100%
	);
	background: linear-gradient(
		top,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0) 15%,
		rgba(0, 0, 0, 0) 85%,
		rgba(0, 0, 0, 0.075) 100%
	);
	pointer-events: none;
}

#ToggleChain.btn-dark,
#AutoMode.btn-dark {
	color: #222;
	text-shadow: 1px 1px 1px #555;
}

.modal-content {
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
	border-radius: 1rem !important;
}

.modal-content .panel {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-bottom: 35px;
	/* margin-top: 20px; */
}

.modal-content .panel .btn {
	font-size: 2rem;
	margin: 10px;
	width: 90px;
	height: 90px;
}

.modal-content .panel #monitor,
.modal-content .panel #overall {
	width: 93%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.modal-content .panel #monitor .stationstatus .status {
	font-size: 2.5em;
}

#floatCanCon {
	width: 610px;
	height: 130px;
}

#floatCanCon.floatingNote {
	min-height: 130px;
}

.cancon {
	position: relative;
	width: 100%;
	font-size: 20px;
	letter-spacing: -0.5px;
	font-weight: bold;
}

.cancon img {
	width: 84px;
	height: auto;
	position: absolute;
	top: 0;
	right: 0;
}

#whatsnew .close,
.whiteboard .close,
.floatingNote .close,
.modal-content .close {
	/* background-color: #aa0000;
    border-radius: 50%; */
	width: 20px;
	height: 20px;
	/* display: flex;
    justify-content: center;
    align-items: center; */
	font-size: 18px;
	margin-top: 0 !important;
	margin-right: 0 !important;
	padding: 0px 1px 2px 0px !important;
	outline: none;
	cursor: default;
}

.close img {
	width: 100%;
	height: auto;
}

#whatsnew .close,
.whiteboard .close,
.floatingNote .close {
	color: #aaa;
	text-shadow: none;
	font-size: 13px;
	width: 16px;
	height: 16px;
}

.floatingNoteClose {
	position: absolute;
	top: 7px;
	right: 7px;
}

.floatingNote .close:hover {
	color: #fff;
}

.floatingNote {
	border-radius: 15px;
	background: #e0e0e0;
	background: -moz-linear-gradient(top, #fafafa 0%, #e0e0e0 100%);
	background: -webkit-linear-gradient(top, #fafafa 0%, #e0e0e0 100%);
	background: linear-gradient(to bottom, #fafafa 0%, #e0e0e0 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#e0e0e0', GradientType=0);
	color: #333;
	padding: 10px 20px;
	padding-top: 26px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	position: absolute;
	width: 20%;
	height: 20%;
	min-height: 175px;
	min-width: 350px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	/* cursor: move; */
}

.floatingNote .innerNote {
	overflow: auto;
	width: 100%;
	height: 100%;
}

table#audio thead th img,
table#audio tbody td img,
table#playlist thead th img,
table#playlist tbody td img,
table#xlogtable thead th img,
table#xlogtable tbody td img {
	width: 32px;
}

.notset {
	opacity: 5%;
}

#hour-bar button img {
	width: 22px;
	margin-top: -2px;
}

.xdsoft_datetimepicker {
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
}

table.thinrow tbody td {
	height: 20px !important;
}

table.thinrow tbody td img {
	min-width: 24px !important;
	width: 24px !important;
}

table.thinrow div.icon {
	padding-left: 5px !important;
	padding-right: 5px !important;
	min-width: 34px !important;
}

table.thinrow tbody td .title .title,
table.thinrow tbody td .title .artist {
	display: inline-block !important;
	min-width: auto !important;
	width: 55% !important;
	margin-top: 4px !important;
	margin-left: 4px !important;
	margin-right: 4px !important;
}

table.thinrow tbody td .title .artist {
	width: 35% !important;
}

#wavemain #vtwaverec {
	background: #550000;
	background: -moz-linear-gradient(top, #660000 0%, #550000 100%) !important;
	background: -webkit-linear-gradient(top, #660000 0%, #550000 100%) !important;
	background: linear-gradient(to bottom, #660000 0%, #550000 100%) !important;
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#660000', endColorstr='#550000', GradientType=0) !important;
	overflow: hidden;
}

.caption {
	background: #333333;
	background: -moz-linear-gradient(top, #292929 0%, #333333 100%);
	background: -webkit-linear-gradient(top, #292929 0%, #333333 100%);
	background: linear-gradient(to bottom, #292929 0%, #333333 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#292929', endColorstr='#333333', GradientType=0);
}

.recordvt {
	background: #aa0000;
	background: -moz-linear-gradient(top, #880000 0%, #aa0000 100%);
	background: -webkit-linear-gradient(top, #880000 0%, #aa0000 100%);
	background: linear-gradient(to bottom, #880000 0%, #aa0000 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#880000', endColorstr='#aa0000', GradientType=0);
}

.whiteboard h3 {
	pointer-events: none;
}

#notes {
	min-height: 350px;
	min-width: 350px;
}

.panel .buttonrow {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 76%;
}

#optionsModal .panel {
	align-items:initial;
}

.macbutton {
	font-size: 14px;
	display: flex;
	flex-direction: column;
	margin: 5px 10px;
	padding: 20px 0px;
	width: 80px;
	text-align: center;
	border-radius: 5px;
	transition: all 0.1s ease-in-out;
}

.macbutton:hover {
	cursor: pointer;
	opacity: 0.65;
}

.macbutton:active {
	opacity: 0.25;
}

.macbutton img {
	width: 80%;
	max-width:48px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
}

.macbutton span {
	width: 100%;
}

.macbutton.btn-dark {
	background: transparent !important;
}

.macbutton.active > img {
	-webkit-filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 1));
}

.monitorerror {
	color: #cc0000 !important;
}

#wavetimes {
	width: 100%;
	display: flex;
	flex-direction: row;
	font-size: 10px;
	background: #333333;
	background: -moz-linear-gradient(top, #292929 0%, #333333 100%);
	background: -webkit-linear-gradient(top, #292929 0%, #333333 100%);
	background: linear-gradient(to bottom, #292929 0%, #333333 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#292929', endColorstr='#333333', GradientType=0);
	border: 1px solid #555;
	height: 22px;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5) !important;
}

#seguecontainer {
	position: relative;
}

#timehover {
	top: 0;
	left: 0;
	width: 200px;
	height: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	z-index: 1000;
	font-size: 12px;
	border-radius: 15px;
	background: #e0e0e0;
	background: -moz-linear-gradient(top, #fafafa 0%, #e0e0e0 100%);
	background: -webkit-linear-gradient(top, #fafafa 0%, #e0e0e0 100%);
	background: linear-gradient(to bottom, #fafafa 0%, #e0e0e0 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#e0e0e0', GradientType=0);
	color: #333;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
}

#wavegrid {
	width: 100%;
	height: 100%;
	/* position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; */
	background-color: transparent;
}

.dim {
	opacity: 0.2;
	filter: alpha(opacity=20);
}

.bootstrap-datetimepicker-widget table td.day {
	width: 14%;
}

.dateonly li.picker-switch {
	display: none;
}

.modal-ku {
	max-width: 550px !important;
	margin: auto;
}

.modal-ku2 {
	max-width: 600px !important;
	margin: auto;
}

.predefinedcommands {
	border: 1px solid #555;
	border-radius: 5px;
	overflow-y: auto;
	height: 300px;
}

.predefinedcommands div {
	border-bottom: 1px solid #333;
	padding: 10px;
	user-select: none;
}

.predefinedcommands div.predefinedcommand:hover {
	background-color: rgba(255, 255, 255, 0.05);
	cursor: pointer;
}

.predefinedcommands div.predefinedcommand:active {
	background-color: rgba(255, 255, 255, 0.2);
	cursor: pointer;
}

.predefinedcommands div.predefinedcommand.active {
	background: #3081f6;
	background: -moz-linear-gradient(top, #4e85d3 0%, #3081f6 100%);
	background: -webkit-linear-gradient(top, #4e85d3 0%, #3081f6 100%);
	background: linear-gradient(to bottom, #4e85d3 0%, #3081f6 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#4e85d3', endColorstr='#3081f6', GradientType=0);
	cursor: pointer;
}

.predefinedcommands div span.name {
	display: inline-block;
	width: 42%;
	white-space: nowrap;
}

.predefinedcommands div span.duration {
	display: inline-block;
	width: 8%;
	white-space: nowrap;
}

.predefinedcommands div span.category {
	display: inline-block;
	width: 20%;
	white-space: nowrap;
}

.predefinedcommands div span.hour {
	display: inline-block;
	width: 5%;
	white-space: nowrap;
}

.predefinedcommands div span.starttime {
	display: inline-block;
	width: 10%;
	white-space: nowrap;
}

.predefinedcommands div span.type {
	display: inline-block;
	width: 15%;
	white-space: nowrap;
}

/* .trimcontrols {
	padding-left: 5px;
	padding-right: 5px;
} */

.trimcontrols .cues {
	flex: 1;
	margin-right: 2.5px;
	margin-left: 2.5px;
}

.trimcontrols .cues * {
	font-size: 13px;
}

/* .trimcontrols .cues:last-child {
	margin-right: 0;
} */

/* --- CSS FOR FLASHING START --- */

.flashredblack {
	-webkit-animation: RedBlack 1s infinite;
	-moz-animation: RedBlack 1s infinite;
	-o-animation: RedBlack 1s infinite;
	animation: RedBlack 1s infinite;
}

@-webkit-keyframes RedBlack {
	0%,
	49% {
		background: #880000;
		background: -moz-linear-gradient(top, #aa0000 0%, #880000 100%);
		background: -webkit-linear-gradient(top, #aa0000 0%, #880000 100%);
		background: linear-gradient(to bottom, #aa0000 0%, #880000 100%);
		filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#444', endColorstr='#880000', GradientType=0);
	}
	50%,
	100% {
		background: #111111;
	}
}

.flashsavesegue {
	-webkit-animation: SaveSegue 1s infinite;
	-moz-animation: SaveSegue 1s infinite;
	-o-animation: SaveSegue 1s infinite;
	animation: SaveSegue 1s infinite;
}

@-webkit-keyframes SaveSegue {
	0%,
	49% {
		background: #880000;
		background: -moz-linear-gradient(top, #aa0000 0%, #880000 100%);
		background: -webkit-linear-gradient(top, #aa0000 0%, #880000 100%);
		background: linear-gradient(to bottom, #aa0000 0%, #880000 100%);
		filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#444', endColorstr='#880000', GradientType=0);
		/* border-bottom-color: rgba(0, 0, 0, 0.5)!important;
        border-right-color: rgba(0, 0, 0, 0.5)!important;
        border-top-color: rgba(255, 255, 255, 0.2)!important; */
	}
	50%,
	100% {
		background: #373737;
		background: -moz-linear-gradient(top, #404040 0%, #373737 100%);
		background: -webkit-linear-gradient(top, #404040 0%, #373737 100%);
		background: linear-gradient(to bottom, #404040 0%, #373737 100%);
		filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#404040', endColorstr='#373737', GradientType=0);
		/* border-bottom-color: rgba(0, 0, 0, 0.5)!important;
        border-right-color: rgba(0, 0, 0, 0.5)!important;
        border-top-color: rgba(255, 255, 255, 0.2)!important; */
	}
}

.flashrecording {
	-webkit-animation: Recording 1s infinite;
	-moz-animation: Recording 1s infinite;
	-o-animation: Recording 1s infinite;
	animation: Recording 1s infinite;
}

@-webkit-keyframes Recording {
	0%,
	49% {
		background: #880000;
		background: -moz-linear-gradient(top, #aa0000 0%, #880000 100%);
		background: -webkit-linear-gradient(top, #aa0000 0%, #880000 100%);
		background: linear-gradient(to bottom, #aa0000 0%, #880000 100%);
		filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#aa0000', endColorstr='#880000', GradientType=0);
		border-bottom-color: rgba(0, 0, 0, 0.5) !important;
		border-right-color: rgba(0, 0, 0, 0.5) !important;
		border-top-color: rgba(255, 255, 255, 0.2) !important;
	}
	50%,
	100% {
		background: #660000;
		background: -moz-linear-gradient(top, #990000 0%, #660000 100%);
		background: -webkit-linear-gradient(top, #990000 0%, #660000 100%);
		background: linear-gradient(to bottom, #990000 0%, #660000 100%);
		filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#990000', endColorstr='#660000', GradientType=0);
		border-bottom-color: rgba(0, 0, 0, 0.5) !important;
		border-right-color: rgba(0, 0, 0, 0.5) !important;
		border-top-color: rgba(255, 255, 255, 0.2) !important;
	}
}

/* --- CSS FOR FLASHING END --- */

.shine {
	background: rgba(255, 255, 255, 0.05);
	background-image: linear-gradient(
		to right,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.15) 20%,
		rgba(255, 255, 255, 0) 40%,
		rgba(255, 255, 255, 0) 100%
	);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: inline-block;
	position: relative;
	-webkit-animation-duration: 2s;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-name: placeholderShimmer;
	-webkit-animation-timing-function: linear;
}

@-webkit-keyframes placeholderShimmer {
	0% {
		background-position: -668px 0;
	}
	100% {
		background-position: 668px 0;
	}
}

#whatsnew {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(px);
	z-index: 20000;
	border-radius: 15px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	transition: all 1s ease-in-out;
	width: 90%;
	height: 80%;
	max-width: 1000px;
	max-height: 750px;
}

#slideshow {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
	overflow: hidden;
	display: flex;
	align-items: center;
	text-align: center;
}

#slideshow h1 {
	font-weight: bold;
	letter-spacing: -1px;
	font-size: 3rem;
}

#slideshow h2 {
	letter-spacing: -1px;
	font-size: 1.4rem;
}

#slideshow > div {
	position: absolute;
	top: 5%;
	left: 5%;
	right: 5%;
	bottom: 5%;
	overflow: hidden;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#slideshow > div img {
	width: max-content;
	max-width: 100%;
	height: max-content;
}

#whatsnew #NextAndPrev {
	position: absolute;
	bottom: 2%;
	left: 50%;
	transform: translateX(-50%);
}

#whatsnew #NextAndPrev i {
	font-size: 32px;
	color: #999;
	cursor: hand;
	cursor: pointer;
	transition: color 0.25s ease-in-out;
	margin-left: 20px;
	margin-right: 20px;
}

#whatsnew #NextAndPrev i:hover {
	color: #444;
}