html,
body {
    height: 100%;
    /* text-align: center; */
    vertical-align: middle;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
body::-webkit-scrollbar {
  display: none;
  width: 0 !important;
}

#cvs {
    /* width: 980px; */
    /* height: 400px; */
    background-color: black;
}

.songlist-body {
    /* overflow-y: scroll;
    max-height: 700px; */
}

.songListItem {
    color: blue;
    cursor: default;
}
[data-theme="dark"] .songListItem {
    color: #007bff;
}

/* BEGIN FONT IN CANVAS */
@font-face {
    font-family: 'MohrRounded';
    src: url('MohrRounded-Bold.ttf');
}
/* END FONT IN CANVAS */

.mohrrounded {
	font-family: 'MohrRounded';
	width: 0px;
	height: 0px;
}

.table-fixed thead tr:nth-child(1) th{
    background: #f1f1f1;
    position: sticky;
    top: -1px;
    z-index: 10;
}

.table thead tr th{
	vertical-align: top;
}
.table thead{
	background-color: #f1f1f1;
}
.table th, .table td{
	-moz-hyphens: auto !important;
	-ms-hyphens: auto !important;
	-webkit-hyphens: auto !important;
	hyphens: auto !important;
}

/* BEGIN SEARCH BOX INPUT COLOR */
.dataTables_filter input, .dataTable th.searchable input{
	font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji", FontAwesome;
	color: magenta !important;
}
.dataTables_filter input:focus, .dataTable th.searchable input:focus{
	color: #495057 !important;
}
[data-theme="dark"] .dataTables_filter input:focus, .dataTable th.searchable input:focus{
	color: inherit !important;
}
 /* custom placeholder */
.dataTables_filter input::-webkit-input-placeholder, .dataTable th.searchable input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	opacity: 0.5;
}
.dataTables_filter input::-moz-placeholder, .dataTable th.searchable input::-moz-placeholder { /* Firefox 19+ */
	opacity: 0.5;
}
.dataTables_filter input:-ms-input-placeholder, .dataTable th.searchable input:-ms-input-placeholder { /* IE 10+ */
	opacity: 0.5;
}
.dataTables_filter input:-moz-placeholder, .dataTable th.searchable input:-moz-placeholder { /* Firefox 18- */
	opacity: 0.5;
}
/* END SEARCH BOX INPUT COLOR */

.message_close:hover{
	cursor: pointer;
}
.form-check-input,.form-check-label{
	cursor: pointer;
}

/* BEGIN MODAL FULLPAGE */
/*
.modal {
  padding: 0 !important;
}
.modal .modal-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
}
.modal .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}
.modal .modal-body {
  overflow-y: auto;
}*/
/* END MODAL FULLPAGE */

/* BEGIN SCROLL TABLE BODY */
#resize_wrapper {
	position: absolute;
	top: 0em;
	left: 1em;
	right: 1em;
	bottom: 1em;
}
/* END SCROLL TABLE BODY */

/* BEGIN TOP SEARCH BAR */
.dataTables_filter label, .dataTables_length label{
	width: 100%;
}
#songlist-table_filter label {
	margin-bottom: 0px;
	padding-top: 5px;
	/* position: relative; */
}
#songlist-table_filter input {
	padding-left: 2rem;
}
/* END SEARCH BAR */

/* BEGIN VISTED LINK */
.played {
	color: #551A8B;
}
[data-theme="dark"] .played {
	color: #6d65e8;
}
/* END VISTED LINK */

/* BEGIN REMOVE SMALL HEIGHT AT TABLE HEADER */
#headerrow,.filter-row {
	height: 0px !important;
}
/* END REMOVE SMALL HEIGHT AT TABLE HEADER */

/* BEGIN INLINE BUTTONS ON MODAL FOOTER */
.modal-footer { 
	display: block;
}
/* END INLINE BUTTONS ON MODAL FOOTER */

.thetitle .btnaction {
	height: 0px;
	width: 0px;
	visibility: hidden;
}

/* BEGIN ANIMATED RECORD BUTTON */
.record-div {
	cursor: pointer;
}
.record-div:hover .btnrecord.not-recording{
	background-color: #bb2d3b;
}
.btnrecord {
	width: 1.5em;
	height: 1.5em;
	/* font-size: 1em; */
	/* background-color: red; */
	/* border: 0; */
	border-radius: 1.5em;
	/* margin: 18px; */
	outline: none;
	border-color: transparent;
}
.btnrecord:active:focus,.btnrecord:active,.btnrecord:focus,.btnrecord:hover{
	border-color: transparent;
	box-shadow: inherit;
}
.not-recording{
	background-color: darkred;
}
.not-recording:focus{
	background-color: darkred;
}
.not-recording:focus:hover{
	background-color: #bb2d3b;
}

.recording{
	background-color: red;
	animation-name: pulse;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.recording:active:focus,.recording:active,.recording:focus,.recording:hover{
	background-color: red;
}

@keyframes pulse{
	0%{
		box-shadow: 0px 0px 5px 0px rgba(173,0,0,.3);
	}
	65%{
		box-shadow: 0px 0px 5px 10px rgba(255,0,0,.5);
	}
	90%{
		box-shadow: 0px 0px 0px 15px rgba(173,0,0,0);
	}
}
/* END ANIMATED RECORD BUTTON */