/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/open-sans-v28-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/open-sans-v28-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/open-sans-v28-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/open-sans-v28-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/open-sans-v28-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/open-sans-v28-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* FFx3.5+/Safari/Opera10+ */
@font-face {
  font-family:Topaz;
  font-size: 12;
  src: url('/fonts/TopazPlus_a1200_v1.0.ttf');
}

div.amiga-topaz {
  font-family:"TopazPlus a600a1200a4000", Topaz, "Lucida Console", monospace, Monaco;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Open Sans', 'Segoe UI', 'Roboto', 'Oxygen',
  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
  sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

div.cp_tree-table_cell > button.filetype-m3u {
  font-size: 14px;
  color: #1959ef;
}
div.cp_tree-table_cell > button.filetype-mp3 {
  font-size: 14px;
  color: #418d31;
}
div.cp_tree-table_cell > button.filetype-flac {
  font-size: 14px;
  color: #418d31;
}
div.cp_tree-table_cell > button.filetype-m4a {
  font-size: 14px;
  color: #418d31;
}
div.cp_tree-table_cell > button.filetype-ogg {
  font-size: 14px;
  color: #418d31;
}
div.cp_tree-table_cell > button.filetype-nfo {
  font-size: 14px;
  color: #c11010;
}
div.cp_tree-table_cell > button.filetype-sfv {
  font-size: 14px;
  color: #b3b3b3;
}
div.cp_tree-table_cell > button.filetype-txt {
  font-size: 14px;
  color: #77193f;
}
div.cp_tree-table_cell > button.filetype-jpeg {
  font-size: 14px;
  color: #d68441;
}

div.cp_tree-table_cell > p.column-size {
  vertical-align: middle;
  text-align: center;
}

div.cp_tree-table_row:hover {
  background-color: rgba(25, 118, 210, 0.12); /* lemonchiffon */
}

section {
  display: flex;
  align-items: center;
  height: 120px;
  background: #fff;
  width: 95%;
  position: relative;
  margin-bottom: 5px;
}

section i {
  flex: 1 1 100%;
  height: calc(1px * var(--c)/2.5); /* calc(120px * var(--c)/360); for oszillator mode */
  border-top-left-radius: 55%;
  border-top-right-radius: 55%;
  background: hsl(calc(calc(var(--c) + 310) * 0.6), 52%, 60%);
}

audio {
  width: calc(100% - 2em);
  bottom: 1em;
  opacity: .7;
}
/* prohibit ugly centering when shrinking width of table */
div.cp_tree-table_row div.cp_tree-table_cell {
  white-space: nowrap;
}