body {
		padding: 0 5px;
		background-color: rgb(252, 252, 252);
	}

	.header {
		font-size: 20px;
		text-align: center;
	}

	.header-table {
		font-size: 14px;
		font-family: 'Helvetica Neue','Segoe UI',Helvetica,Verdana,sans-serif;
		font-weight: 400;
		fill: #43474b;
		cursor: default;
		text-align: center;
		margin-bottom: 5px;
	}

	/* #page { */
		/* min-width: 900px; */
		/* max-width: 1055px; */
		/* margin: 0 auto; */
	/* } */
	
	table {
		font-size: 13px;
		font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, Verdana, sans-serif;
	}
	
	.dx-datagrid-content .dx-datagrid-table .dx-row > td {
		text-align: center;
		vertical-align: middle;
	}

	td[role="columnheader"] div {
		text-align: center;
		vertical-align: middle;
	}

	.container {
		overflow: hidden;
		margin: 20px auto;
	}

	.graphic {
		min-height: 400px;
		position: relative;
		padding: 5px 5px 5px 5px;
		border-radius: 0px;
		background-color: #fff;
		border: 1px solid #ddd;
		box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.1);
	}

	.left {
		float: left;
		width: 49%;
	}

	.right {
		float: right;
		width: 49%;
	}

	.apply-filter-option {
		position: absolute;
		z-index: 1;
		vertical-align: middle;
	}

	.apply-filter-option > span {
		position: relative;
		top: 2px;
		margin-right: 10px;
	}

	.apply-filter-option > div {
		display: inline-block;
		vertical-align: middle;
	}
	
	.save {
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAG7AAABuwBHnU4NQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFeSURBVDiNY2CgMmBkYGBgmNm24YmkrDgDAwMDAxs7JzsbGyf75Vc3uYRFBRixafr//z/Dy+dvfgl+ZytMLvGdgSzHwsDAwCAqKfJby0hbgYGBgeHrp18MXz//YuAX4mWwtTFAMejZi1cMT1+8ZjA10GY4dOQ8hxybaPvc7q28yaXe3TA1TKR45+mL1wxnLlyF86UVZARUtBSr5vVsLiPLQGxAWkFGQFlTuRJmKEkGSkuIMpgYaGM1lJuXJ5OBARqGyICFjZmBkZGR4fOH7wy7953EavCe/acY/vz6gyLGysbKgNVAdg5mBlEpbgZPKRtSHA8HFIchOkBx4cX71xgYSbTi/z8GBn1FLewGcvGwMHjYG5Nk4I6DZ1H4tPUyDDz8QpxmeR4iDcSmkFgw6kLcCokFLAwMDAwvn7xkPff7/INnzG9kf/389Z8UA+4/ec74+dbXx29fvmEl3xl4AABVV2LJkBn9EQAAAABJRU5ErkJggg==')        
	}

	.play {
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAG7AAABuwBHnU4NQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAJeSURBVDiNpZXLTxNRGMXPnYd98Ji2kEKCogVsY5RHxYU7H4kiuDDGlI0bTcSASBViiahoDfERRiE2McTHzugCVi4oEk2QPwA1JkIIEowbWjW2MNMwTdu5LhRpOygTOLube75fzvfN3HsBnWrquu/U42P0mC7eenTUaDCN6/Fyaxl8t59eL92y+bwUi8U2BPR4BtmyWvmxy7XdY7NZ8yanptcPbPMH8s0mebCqqvJgjtnEp++Jo1EHpfQUv4T+9uPWaHatZobN/oFtVqFgfE+tuy4bBgC+OsscUvxA0oCeu69/lmoSnrvWv6Og0P48z5xrB4BvP75bq2t2mVmG1SSnlBJxZKGssyF3NhCkl5TkQiAQpF5vA4n/TZiTm3fBXV3pdrrKS5yu8hKD0aCuBgOAm2/BEkKPia8ip70NJA6W3FOYxTMZLVMKI8Po+nvgP0CSvnprH1QI4mjU0XlYmCGUlmQAdZGyxXIvaApHfi9W2l03MJECBUP+1Kpkw0AeyZOE0CAAUCBj4BwhUFRVhZ45+scol6NEvSCI+Oosc73DkRoG+JwBjMnSg3fvP+7dZOQFAFhS4nZKKQghGuCN/UiJI+RlZ71lNhCkBoUstMiS0Jbu0VS1dvftzLcUPttdU+XmuZWDNDk1/eVK8wkHAPQOy8WEJK6meCpePmT7ml6v6fNhT8encHh+38TEhzeSJCey98XRqANsooWLozsbtmrCZXk8g+xW9+JARYWjsbioSEhP+D/987YZGmpMYQhn2+88mZHkWMdaoGWt+Wn7u5rEUCjcOh8OmfRCdUnvE/ALhQrOGW6Id7oAAAAASUVORK5CYII=')        
	}
	
	.transcription {
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAABuwAAAbsAR51ODUAAAKqSURBVDhPlZTPT9NgGMe/XdlWJlPCJG6AG0xAxtyQYQQTEy96M2jiyQMXI/+BIcarF4gJXk30YExMwIuJ8cdNIRgzjIYhEYIShIkwYbBB27GtG/Xt27JsdsP5Sd6uz9On336fJ+875va9R1UAvGT9H7I8NTjQn9aiHIpgd0uTM+hssGupf/N9MYzwSsQ1OHAzrKVyVCgXZ4MD3YFTNLFPWpIQ3Yrj2FEbWNagZVUEcVcR1KJCCivz2NiM4fHIC4iJhJYpD+ownyfPXoIXE8hms7mYMRhgr63BtcsXae4gdA47vK042+nFuTN+XLrQA6v1ENLpNDytbq3iYHQOTzQ2YHr2G3oCPuwmU5gITiHgb0O7Jhjjk3g3JyEun5zsG3qvtkFQOhIE4a5OcO13FB8+TmNmbgEmoxEcZ6JuFeJ8CvdHp1Fb34LjnLlgW/A8j1DoS5WuZYuFg8/TjK3YNiLrUezwIr7OL1Kx4dEQbI4m8hGzVq1H5/D567dkZhICPg+6OjxYj26BNXJUzNXkxvm2wxCSMj4tpbQ3CtEJ3rh+FZXEAcMwNDaaLRgeUZ11ua3odCrPgPmIBD65R2vy0bdcyeXE4oI6M5ujkX6kvc6E0M8UpKyMNoeR1vxNyY29TcVCqLG7yMw42KtZ2MjI51YlLK5niHhxQdrywo+w7kSMzUqw1TdTMQUvcbcnAx7izGJmUGtl6drgczuHYiA1oeWVNXfw80zB2hTl1X0x5SgrLQpkZnXVFTCxDLJkfJ4iLtVhFaFvaGLZ7/c5lftWuxG9py0YmRSxEsvQ51c6LbAfYfFwnKfOtX14q+QM81mKZvBgjMevuCqm8GZmF0+DIohWAWUJpjMybVfOe7tYTqGkYIaczZ0dvuwlkn8ohZIz7L3zqp/8WNWoXDD+BwNaKFCeuDEWAAAAAElFTkSuQmCC')
	}
	
	.rec-actions {
		height: 20px;
		display: inline-flex;
	}

	.action {
		opacity: 1.0;
		cursor: pointer;
	}

	.icon {
		width: 20px;
		height: 20px;
	}

	.card {
	  margin: 6px;
	}