﻿/**
 *  Gap Finder Css
 **/
body, html
{
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  background-color: #0d1012;
}
.modal {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;    
}
a {
text-decoration:none;
}
a:hover,
a:active {
  outline: 0;
}
.clearfix {
  *zoom: 1;
}inp
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after {
  clear: both;
}
.collapse {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.35s ease;
  -moz-transition: height 0.35s ease;
  -o-transition: height 0.35s ease;
  transition: height 0.35s ease;
}
.collapse.in {
  height: auto;
}
.body
{
	height:100%;
	min-height:100%;
}
.navbar {
    margin-bottom: 10px;
}
.main
{
	display: table; 
    width: 100%;
    height:100%;
	min-height:100%;
}
.main > div {   
    display: table-row;   
    width: 100%;
}
.main > div > div {   
    display: table-cell;   
    width: 100%;
}
.main-content > div, .main-content > div > div
{
	height: 100%;
	min-height:100%;
}
/*
 * Loader
 */
.appBusy
{
	background-color:rgba(0,0,0,0.8);
	width: 100%;
	height:100%;
	z-index: 100000;
	position: absolute;
	top: 0;
	left:0;
}
.appBusy .loader{
    background: #FFF1A8 -webkit-gradient(linear,left top,left bottom,from(#FFE090),to(#FFF2B0));
    background-color: #FFF1A8;
    color: black;
    left: 50%;
    padding: 3px 6px;
    position: absolute;
    top: 0;
	width: 150px;
	margin-left:-75px;
	text-align: center;
    border-radius: 0 0 5px 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    box-shadow: rgba(0,0,0,0.246094) 0px -3px 5px,rgba(0,0,0,0.246094) 0px 3px 5px;
    -moz-box-shadow: rgba(0,0,0,0.246094) 0px -3px 5px,rgba(0,0,0,0.246094) 0px 3px 5px;
    -webkit-box-shadow: rgba(0,0,0,0.246094) 0px -3px 5px,rgba(0,0,0,0.246094) 0px 3px 5px;
}
/*
 * Playlist
 */
.playlist-main
{
	display: table; 
    height: 100%;
	min-height:100%;
    margin: 0 5%;
    width: 90%;
}
.playlist-main > div {   
    display: table-row;   
}
.playlist-main > div > div {   
    display: table-cell;   
}
.playlist-main > div > .select2-container {
    display: inline-block;
}
.playlist-main .player-wrapper {
    background: #242a2a;
	padding: 7px 13px 7px;
    border-bottom: 1px solid #303a3a;
}
.playlist-container > div
{
	height: 100%;
	min-height:100%;
	position: relative;
}
.playlists, .fingerprints {
    height: 100%;
    min-height: 100%;
}
.errorList {
    height:1000px;
    width: 100%;
}
.playlists .ngViewport,
.errorList .ngViewport,
.fingerprints .ngViewport {
    outline: none;
}
.playlists .ngViewport {
    background: url(../Images/playlist-bg.gif) repeat-y 7px top transparent;
}
.playlists-channel-search {
	height:15px;
}

/*
 * Player
 */
.player-main {
	background-color: #242a2a;
	width: 100%;
	display: table; 
    position: relative;
}
.player-box {
	display: table-row; 
	margin: 7px 13px;
}
.player-controls {
	display: table-cell; 
	width: 270px;
    vertical-align: top;
    position: relative;
    top: 24px;
}
.player-info {
    top: 150px;
    left: 0;
    position: absolute;
    margin: 0 0 0 56px;
    width: -webkit-calc(100% - 380px);
    width: calc(100% - 380px);
    box-sizing: border-box;
    line-height: 22px;
    font-family: Arial;
    font-size: 12px;
}
.player-info .seekwrapper {
    float:right;
    position:relative;
}
.player-info .seek {
    float: right;
    margin-top:0;
}
.player-info .detection-plugin {
    color: #1dd6d7;
    margin-right: 15px;
    float: right;
    line-height:24px;
}
.zoom-controls {
    position: absolute;
    height: 24px;
    width: 100px;
    padding-left: 5px;
    left: -106px;
    border-radius: 14px 0 0 14px;
    background-color: #242a2a;
    top: 99px;
    z-index: 100;
}
.zoomBtn {
    background-image: url(../Images/zoom-controls.png);
    background-repeat: no-repeat;
    background-color: transparent;
    width: 25px;
    height: 24px;
    border: none;
    margin: 0;
    padding: 0;
    font-size: 0;
    float: left;
    cursor: pointer;
}
.zoomBtn.fit {background-position: 0 center;}
.zoomBtn.select {background-position: -25px center;}
.zoomBtn.out {background-position: -50px center;}
.zoomBtn.in {background-position: -75px center;}
.play {
    width: 91px;
    height: 91px;
    font-size: 52px;
    padding-left: 18px;
    margin: 0 22px;
    border-radius: 50%;
    border: none;
    background: #def4f4;
    background: -moz-linear-gradient(top,  #def4f4 0%, #8ad8d8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#def4f4), color-stop(100%,#8ad8d8));
    background: -webkit-linear-gradient(top,  #def4f4 0%,#8ad8d8 100%);
    background: -o-linear-gradient(top,  #def4f4 0%,#8ad8d8 100%);
    background: -ms-linear-gradient(top,  #def4f4 0%,#8ad8d8 100%);
    background: linear-gradient(to bottom,  #def4f4 0%,#8ad8d8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#def4f4', endColorstr='#8ad8d8',GradientType=0 );
    cursor: pointer;
    box-shadow: 0px 3px 8px #4d7070, inset 0px 2px 3px #effcfc;
}
.play span {
    background: rgb(125,126,125);
    background: -moz-radial-gradient(center, ellipse cover,  rgba(125,126,125,0.5) 0%, rgba(14,14,14,0.5) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(125,126,125,0.5)), color-stop(100%,rgba(14,14,14,0.5)));
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(125,126,125,0.5) 0%,rgba(14,14,14,0.5) 100%);
    background: radial-gradient(ellipse at center,  rgba(125,126,125,0.5) 0%,rgba(14,14,14,0.5) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.play:hover span {
    background: rgb(125,126,125);
    background: #323a3a;
    background: -moz-radial-gradient(center, ellipse cover,  rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pause {
    padding-left:4px;
}
.play-infos {
    width: 135px;
    float: left;
    margin-top: 16px;
}
.play-info {
    display: inline-block;
    line-height: 24px;
}
.play-info.position {
    color: rgb(255, 255, 0);
}
.play-info.duration {
    color: #f7853d;
    margin-left: 20px;
}

.finger-types {
    float: right;
    width: 125px;
}
.finger-types  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.finger-types ul li {
    border-top: 1px solid #303a3a;
    font-size: 12px;
    color: #1dd6d7;
    font-family: Arial;
    line-height: 24px;
    height: 24px;
    display: block;
    background: none;
}
.finger-types ul li:last-child {
    border-bottom: 1px solid #303a3a;
}
.finger-types input[type="radio"] {
    margin: 5px 5px 0 0;
}
.finger-types .inputs .input-bg {
    width: auto;
}
.finger-types label {
    display: inline-block;
    margin: 0;
}
.fingerprint {
	width: 35px;
	height: 34px;
	line-height: 34px;
    cursor: pointer;
	text-align: center;
    background: url("../Images/fingerprint-buttons.png") 0 0 no-repeat transparent;
    border-width: 0;
    padding: 0;
    margin: 10px 9px 0 0;
    float: left;
}
    .fingerprint.add {background-position: -71px 0;}
    .fingerprint.update {background-position: -35px 0; margin-right: 0;}

.player
{
	display: table-cell; 
}
.player-viewport
{
	height: 123px;
}
.player-timelineviewport
{
	height:24px;
    overflow:visible!important;
}
.player .btn-group {
    padding: 0px;
    line-height: 15px;
    top:150px;
    margin-top:0;
}
.player .btn-group > .dropdown-toggle:first-child {
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-topright: 0;
    border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius-bottomright: 0;
    border-bottom-right-radius: 0;
}
.player .btn-group .player-extend-right {
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topright: 4px;
    border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    border-bottom-right-radius: 4px;
}
.dragable-noselection {
    user-select: none; 
    -o-user-select: none; 
    -moz-user-select: none;
    -khtml-user-select: none; 
    -webkit-user-select: none; 
}
.player-viewport
{
	border: solid 1px #353b3b;
}
.player-scrollbar {
	background: -webkit-linear-gradient(top, #242a2a 40%, #050606 40%, #050606 60%, #242a2a 60%, #242a2a 100%);
	background-size: 10px 13px;
	height: 13px;
	margin-top:4px;
}
.player-thumb {
	background-color: #1dd6d7;
	height: 13px;
	-webkit-border-radius: 6px;
}
/*
 * Icons
 */

.icon-calendar {
  display: inline-block;
  width: 14px;
  height: 14px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("../Images/icons.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
  margin-top: 1px;
}
.icon-calendar {
  background-position: 0 0;
}

/*
 * Data entry
 */
.dataentry {
    /*border: 1px solid rgb(212,212,212);*/
    width: 90%; 
    height: 500px;
    margin: 0 5%;
}

/*
 * Row style by status
 */
.processedSet .ngAggregateText, .Processed span {
    color: #87FFD7 !important;
}
.ngRow.selected .processedSet .ngAggregateText, .ngRow.selected .Processed span {
    color: black !important;
}
.PromoFinal span {
    color: #7fb588;
}
.MusicFinal span {
    color: green;
}
.Problematic {
    color: #FADA0C;
}
/*
.Problematic span{
    color: #F4CCB2;
    background-color: #e84ad8;
}
.Problematic .ngCell.col2 {
    background-image: url(../Images/fingerprint-expired.png);
    background-repeat: no-repeat ; 
    background-position: 0 center;
}
.Problematic .ngCell.col0 {
    background-image: url(../Images/fingerprint-expired-icon.png);
}
*/
.FingerPrintExpired {
    color: #FA0F0F;
}
.PromoMissing span,
.CommercialMissing span {
    color: #f7853d;
    background-color: #2c1c12;
}
.FingerPrintExpired span{
    color: black;
    background-color: #DE7736;
}
.FingerPrintExpired .ngCell.col2 {
    background-image: url(../Images/fingerprint-expired.png);
    background-repeat: no-repeat ; 
    background-position: 0 center;
}
.FingerPrintExpired .ngCell.col0 {
    background-image: url(../Images/fingerprint-expired-icon.png);
}
.MusicMissing span {
    color: #F4CCB2;
    background-color: #2c1c12;
}
.MusicMissing .ngCell.col2 {
    background: url(../Images/fingerprint-missingcommercial.png) no-repeat 0 center transparent;
}
.MusicMissing .ngCell.col0 {
    background-image: url(../Images/fingerprint-missingcommercial-icon.png);
}
.PromoMissing .ngCell.col2,
.CommercialMissing .ngCell.col2 {
    background: url(../Images/fingerprint-missingcommercial.png) no-repeat 0 center transparent;
}
.PromoMissing .ngCell.col0,
.CommercialMissing .ngCell.col0 {
    background-image: url(../Images/fingerprint-missingcommercial-icon.png);
}
.playlists .ngCell.col0 span {
    background: none;
}
.MarkerMissing span {
    background-color: #310c06;
    color: #d62300;
}
.MarkerMissing .ngCell.col2 {
    background: url(../Images/fingerprint-missingmarker.png) no-repeat 0 center transparent;
}
.MarkerMissing .ngCell.col0 {
    background-image: url(../Images/fingerprint-missingmarker-icon.png);
}
.PromoTemporary, .CommercialTemporary {
    color: #aaabab;
}
.PromoTemporary .ngCell.col0, .CommercialTemporary .ngCell.col0 {
    background-image: url(../Images/fingerprint-temporary-icon.png);
}

.playtime {
    color: #525457;
    line-height: 30px;
    min-height: 30px;
    font-size: 14px;
}
.fingername {
    color: #1dd6d7;
    font-size: 24px;
    line-height: 30px;
    float: left;
    width: 630px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inputs {
    float: left;
    margin-bottom: 5px;
}
.seekers {
    top: 22px;
}
.seekers label {
    color: white;
}
.seekers input[type="time"],
.seekers input[type="number"] {
    margin-bottom: 0;
}
.seekers .actions {
    float: right;
}
.filteroptions {
    float: right;
    color: #1dd6d7;
    font-family: Arial;
    margin-top: 5px;
}
.filteroptions label {
    margin-left: 5px;
}
.scan-status {
    vertical-align: top;
    margin-top: 0;
    color: cyan;
}


/* fingerprints */

.fingerprint-dialog input[type="text"],
.fingerprint-dialog input[type="password"],
.fingerprint-dialog input[type="datetime"],
.fingerprint-dialog input[type="datetime-local"],
.fingerprint-dialog input[type="date"],
.fingerprint-dialog input[type="month"],
.fingerprint-dialog input[type="time"],
.fingerprint-dialog input[type="week"],
.fingerprint-dialog input[type="number"],
.fingerprint-dialog input[type="email"],
.fingerprint-dialog input[type="url"],
.fingerprint-dialog input[type="search"],
.fingerprint-dialog input[type="tel"],
.fingerprint-dialog input[type="color"],
.fingerprint-dialog textarea,
.fingerprint-dialog .uneditable-input
{
    color: #1dd6d7;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.fingerprint-dialog input[readonly="readonly"],
.fingerprint-dialog input[disabled="disabled"],
.fingerprint-dialog textarea[readonly="readonly"],
.fingerprint-dialog textarea[disabled="disabled"] {
    color: #999;
}
.fingerprint-dialog input[type="text"] {
    height: 28px;
}
.fingerprint-dialog-error {
     font-size:14px;
     color: #d62300;
     background-color: #310c06;
}
.fingerprint-dialog label,
.todoList label {
    background: -webkit-linear-gradient(#e0eaea, #95b7b7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
.fingerprint-dialog {
    margin-left:auto;
    margin-right:auto;
    background-color:#242a2a;
    padding: 20px;
}
.fingerprint-dialog #fingerprint-status {
    clear: left;
}
.fingerprint-dialog .inline-label {
    display: inline-block;
}
.fingerprint-dialog h1,
.todoList h2 {
    background: -webkit-linear-gradient(top, #fea770 0%,#9c4700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.5em;
}
.input-bg,
.fingerprint-dialog li {
    background: #303a3a;
    background: -moz-linear-gradient(top,  #303a3a 0%, #191a1a 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303a3a), color-stop(100%,#191a1a));
    background: -webkit-linear-gradient(top,  #303a3a 0%,#191a1a 100%);
    background: -o-linear-gradient(top,  #303a3a 0%,#191a1a 100%);
    background: -ms-linear-gradient(top,  #303a3a 0%,#191a1a 100%);
    background: linear-gradient(to bottom,  #303a3a 0%,#191a1a 100%);
    padding: 2px;
    margin: 0;
    display: inline-block;
}
.input-bg.add-on {
    border-width: 0;
    padding: 2px;
    margin: 0;
}
.section .input-bg {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    width: 100%;
}
.fingerprint-dialog textarea {
    margin-top: 0;
}
.fingerprint-dialog .select2-container {
    margin-bottom: 0;
}
.fingerprint-dialog table td {
    padding: 5px;
}
.fingerprint-dialog p.fullwidth {
    width: auto;
}
.resetted {
    margin: 0!important;
}
.fingerprint-dialog .modal-header,
.fingerprint-dialog .modal-body,
.fingerprint-dialog .modal-footer {
    background: none;
    border: none;
    box-shadow: none;
    text-align: left;
    padding-top: 0;
    color: #95b7b7;
}
.todoList {
    position: relative;
    margin: 80px auto 0;
    width: 480px;
    padding-right: 32px;
    font-weight: 300;
    color: #a8a7a8;
    background: #242a2a;
    border-radius: 20px;
    padding: 20px 40px;
}
#loginForm {
    position: relative;
    margin: 10px auto;
    width: 400px;
    padding-right: 32px;
    font-weight: 300;
    color: #a8a7a8;
}
.todoList h2 {
    line-height: 1.5em;
}
.todoList ol {
    list-style-type:none;
    margin-left:0;
    padding-left: 0;
}
.todoList li {
    list-style-type:none;
    margin-bottom: 1em;
}
.todoList label.checkbox {
    display: inline-block;
    padding-left: 5px;
    width: auto;
    float: none;
}
.todoList label {
    float: left;
    width: 90px;
    line-height: 28px;
    padding-right: 10px;
    font-weight: 100;
    text-align: right;
    letter-spacing: 1px;
}
#registerForm label {
    width: 150px;
}
.todoList p {
    margin: 0 0 10px;
}
.todoList input[type=text], .todoList input[type=password] {
  width: 296px;
  height: 28px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.todoList input[type=text]:focus, .todoList input[type=password]:focus {
  outline: 0;
}
.sign-up {
    font-size: 16px;
    font-weight: 100;
    letter-spacing: 1px;
    text-align: center;
    margin-top: 10px;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}
.sign-up a {
    color: #1dd6d7;
}
.sign-up a:hover {
    color: #00857e;
}
.login-submit {
    float: right;
}
#registerForm .login-submit {
    float: left;
    margin-left: 160px;
}
.remember {
    margin-left: 100px;
    float: left;
}
.remember input[type="checkbox"] {
    margin: 0;
}
.fingerprint-btn {
    display: none;
}
.selected .fingerprint-btn {
    display: inline-block;
    text-indent:-9999px;
    width: 16px;
    height: 16px;
    
    border: 0;
    float:left;
    margin: 2px 0;
    cursor: pointer;
}
.selected .fingerprint-processed {
	background: url(../Images/processed.png) no-repeat 0 0 transparent;
}

.selected .fingerprint-edit {
	background: url(../Images/edit.png) no-repeat 0 0 transparent;
}
.selected .fingerprint-hide {
    background: url(../Images/hide.png) no-repeat 0 0 transparent;
}
.selected .fingerprint-play {
    background: url(../Images/play.png) no-repeat 0 0 transparent;
}
.selected .fingerprint-replace {
    background: url(../Images/replace.png) no-repeat 0 0 transparent;
}
.ngRow.selected .buttons {
    width: 100%;
}
.player-extend-right, .player-extend-left {
    z-index: 105;
}
.dayparts-hour, .dayparts-label
{
	font-weight: bold;
}
.dayparts-hour {
    color: #fea770;
    float: left;
    width: 100px;
    line-height: 2.2em;
    text-align: center;
    background: none;
    font-size: 18px;
    font-weight: bold;
    padding-right: 0 15px;
    background-color: #0d1012;
    margin-right: 10px;
}
.dayparts-label
{
	width:60px;
	font-size:11px;
	display: inline-block;
}
.dayparts-status
{
	width:50px;
	font-size:11px;
	display: inline-block;
}
.dayparts-date
{
	width:150px;
	font-size:11px;
	display: inline-block;
}
.dayparts-date button {
    font-size: 10px;
    line-height: 12px;
}
.PlaylistType span {
    width:16px;
    display: inline-block;
    padding: 0 10px 0 11px;
    background-repeat: no-repeat ; 
    background-position: center center;
}
.PlaylistType .Local
{
	background-image: url(../Images/L.png);
}
.PlaylistType .National
{
	background-image: url(../Images/N.png);
}
.PlaylistType .Marker
{
	background-image: url(../Images/M.png);
}
.PlaylistType .Commercial
{
	background-image: url(../Images/C.png);
}
.PlaylistType .LiveIntervention
{
	background-image: url(../Images/I.png);
}
.PlaylistType .Expiry
{
	background-image: url(../Images/E.png);
}
.selected .fingerprint-addlocal {
    background: url(../Images/addlocal.png) no-repeat 0 0 transparent;
}
.selected .fingerprint-addmarker {
    background: url(../Images/addmarker.png) no-repeat 0 0 transparent;
}
.selected .fingerprint-changelocal {
    background: url(../Images/changelocal.png) no-repeat 0 0 transparent;
}
.selected .fingerprint-delete {
    background: url(../Images/delete.png) no-repeat 0 0 transparent;
}
.selected .fingerprint-viewPlays {
    background: url(../Images/viewPlays.png) no-repeat 0 0 transparent;
}
.selected .fingerprint-goToPlay {
    background: url(../Images/goto.png) no-repeat 0 0 transparent;
}
.expand {
left: 0;
top: 7px;
width: 16px;
height: 16px;
background: no-repeat transparent;
border-color: transparent transparent transparent;
background-image: url(../Images/expand.png);
background-size: 12px 12px;
}
.collaps {
left: 0;
top: 7px;
width: 16px;
height: 16px;
background: no-repeat transparent;
border-color: transparent transparent transparent;
background-image: url(../Images/collapse.png);
background-size: 12px 12px;
}

.playlist-container
{
	position: relative;
}
.errors-scroll
{
	width: 10px;
	background-color: white;
	position: absolute;
	top: 44px;
	right: -10px;
}
.hours-scroll
{
	position: absolute;
	top: 30px;
	right: -50px;
}
.hours-scroll ul
{
		margin: 0;
	padding: 0;
}
.hours-scroll li
{
	cursor: pointer;
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: block;
	width: 36px;
}
ul.status {
    padding-left: 0;
}
ul.status li {
/*    border-top: 1px solid rgb(245, 239, 239);*/
    color: #e0eaea;
    list-style-type: none;
    padding: 2px;
    width: -webkit-calc(100% - 30px);
    width: calc(100% - 30px);

}
.uppercase textarea {
     text-transform: uppercase; 
}
.uppercase {
     text-transform: uppercase; 
}
.fingerPrintLength {
    float: left;
    line-height: 30px;
    background-color: rgba(0,0, 0, 0.4);
    padding: 0 10px;
    border-radius: 7px 7px 7px 7px;
    color:white;
    font-family:'Arial Narrow';
	font-weight: bold;
}
.general-content {
    width: 90%;
    margin: 0 5%;
    color:#1dd6d7;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;

}
.inputs .clearable {
    position: relative;
    display: inline-block;
}
.clear-input {
    position: absolute;
    right: 28px;
    top: 10px;
    cursor: pointer;
} 
.export-table-header {
    line-height: 30px;
    color: cyan;
}
.export-table .collapse .gridStyle {
    border: 1px solid #2d3636;
    height: 212px; /* height of 7 rows + the header */
}
.export-table .ngRow .ngCell:first-child {
    border: none;
}
.export-table .ngViewport:focus {
    outline: none;
}
.export-table .ngHeaderCell,
.ngGrid .ngHeaderCell {
    border-left: 1px dotted #0d1012;
}
.export-table .ngHeaderCell:first-child,
.ngGrid .ngHeaderCell:first-child {
    border-left: none;
}
.ngGrid .ngCanvas {
    border: 1px solid #2d3636;
    border-top-width: 0;
}
.playlists .ngCanvas {
    border: none;
}
.export-table .ngCanvas,
.ngGrid .ngRow .ngCell:first-child {
    border: none;
}
.ngFooterPanel .input-bg select {
    background-color: #0d1012;
    border: none;
}

/* ------------------ Experimental for approval -------------------------*/

/* CUSTOM SCROLLBAR */
/* CUSTOM SCROLLBAR */
::-webkit-scrollbar {
  width: 14px;
  height: 14px; }
 
::-webkit-scrollbar:hover {
  height: 18px; }
 
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
  height: 14px;
  width: 14px;
  display: block;
  background: #343434;
  background-repeat: no-repeat; }
 
::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url(../Images/horizontal-decrement-arrow.png);
  background-position: 3px 3px; }
 
::-webkit-scrollbar-button:horizontal:increment {
  background-image: url(../Images/horizontal-increment-arrow.png);
  background-position: 3px 3px; }
 
::-webkit-scrollbar-button:vertical:decrement {
  background-image: url(../Images/vertical-decrement-arrow.png);
  background-position: 3px 3px; }
 
::-webkit-scrollbar-button:vertical:increment {
  background-image: url(../Images/vertical-increment-arrow.png);
  background-position: 3px 3px; }
 
/*::-webkit-scrollbar-button:horizontal:decrement:active {
  background-image: url(../Images/horizontal-decrement-arrow-active.png); }
 
::-webkit-scrollbar-button:horizontal:increment:active {
  background-image: url(../Images/horizontal-increment-arrow-active.png); }
 
::-webkit-scrollbar-button:vertical:decrement:active {
  background-image: url(../Images/vertical-decrement-arrow-active.png); }
 
::-webkit-scrollbar-button:vertical:increment:active {
  background-image: url(../Images/vertical-increment-arrow-active.png); }*/
 
::-webkit-scrollbar-track-piece {
  background-color: #343434; }
 
::-webkit-scrollbar-thumb:vertical {
  height: 50px;
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #4d4d4d), color-stop(100%, #333333));
  border: 1px solid #0d0d0d;
  border-top: 1px solid #666666;
  border-left: 1px solid #666666; }
 
::-webkit-scrollbar-thumb:horizontal {
  width: 50px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4d4d4d), color-stop(100%, #333333));
  border: 1px solid #1f1f1f;
  border-top: 1px solid #666666;
  border-left: 1px solid #666666; }

.errorsNavigatorErrors
{
	position : relative;
}
.errorsNavigatorError
{
	width: 10px;
	height: 2px;
	position: absolute;
	background-color: red;
	cursor:pointer;
}
.errorsNavigatorError1
{
	background-color: blue;
}
.errorsNavigatorError2
{
	background-color: yellow;
}
.magnifying_glass {
	width: 90px;
	height: 200px;
	position: absolute;
	top: -6px;
	right: -50px;
	overflow: hidden;
	display:none;
	border: 1px solid gray;
	background-color: white;
	z-index: 1000;
}
			
.magnifying_glass .magnified_content {
	top: 0px;
	left: 0px;
				
	overflow: visible;
				
	position: absolute;
	display: block;
				
	transform-origin: left top;
	-moz-transform-origin: left top;
	-ms-transform-origin: left top;
	-webkit-transform-origin: left top;
	-o-transform-origin: left top;
				
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}
			
.magnified_content .errorsNavigatorError
{
	width: 90px;
	height: 4px;
}

.fingerprint-dialog audio {
	width: 80%;
}

.wordlist {
  width: 80vw;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 0;
  box-sizing: border-box;
  position: relative;
}
.scrollable-wordlist {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.word {
  padding: 6px 12px;
  border-radius: 4px;
  background: rgba(30, 30, 30, 0.55); /* darker, semi-transparent */
  color: #fff;                        /* white text for contrast */
  width: fit-content;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
  cursor: pointer;
}
.current-word {
  background: #007bff;
  color: #fff;
  align-self: center;
  text-align: center;
}