/* titillium-web-300 - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/titillium-web-v10-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/titillium-web-v10-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/titillium-web-v10-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/titillium-web-v10-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/titillium-web-v10-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/titillium-web-v10-latin-300.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}
/* titillium-web-700 - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/titillium-web-v10-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/titillium-web-v10-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/titillium-web-v10-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/titillium-web-v10-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/titillium-web-v10-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/titillium-web-v10-latin-700.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}

/* jetbrains-mono-300 - latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/jetbrains-mono-v6-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/jetbrains-mono-v6-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/jetbrains-mono-v6-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/jetbrains-mono-v6-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/jetbrains-mono-v6-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/jetbrains-mono-v6-latin-300.svg#JetBrainsMono') format('svg'); /* Legacy iOS */
}
/* jetbrains-mono-700 - latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/jetbrains-mono-v6-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/jetbrains-mono-v6-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/jetbrains-mono-v6-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/jetbrains-mono-v6-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/jetbrains-mono-v6-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/jetbrains-mono-v6-latin-700.svg#JetBrainsMono') format('svg'); /* Legacy iOS */
}

html {

}

body {
    font-family: 'Titillium Web', sans-serif;
    background:#202020;
    color:#f0f0f0;
}
    
.mdl-layout-title {
    font-family: 'Titillium Web', sans-serif;
}

h1, h2, h3, h4, h5, h6, b, strong { font-weight:700; }

pre, .monospace {
    font-family: 'JetBrains Mono', monospace;
}

.page-content {
    margin-bottom:20pt;
    min-height:calc(100vh - 70pt);
}

* {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input, textarea, *[contenteditable=true] {
    -webkit-touch-callout:default;
    -webkit-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;
}

.mdl-layout__content {
  background:#202020;
}

.card {
  border-radius:5pt;
  overflow:hidden;
  margin-left:20pt;
  margin-top:20pt;
  background:#303030;
  color:#c0c0c0;
  box-shadow:3pt 3pt 3pt rgba(0,0,0,0.2);
  width:calc(100% - 40pt);
}

.card-title {
  font-family:Titillium Web;
  font-size:12pt;
  color:#a0a0a0;
  padding-top:10pt;
  padding-left:15pt;
  padding-bottom:10pt;
  overflow:hidden;
  vertical-align:middle;
  line-height:15pt;
}

.card-title-tag {
  display:inline-block;
  color:#808080;
  font-size:9pt;
  padding-top:3pt;
  padding-bottom:3pt;
  padding-left:8pt;
  padding-right:8pt;
  margin-left:5pt;
  background:#f0f0f0;
  float:right;
  vertical-align:middle;
}

.card-buttons {
  position:absolute;
  top:0;
  right:10pt;
  font-size:12pt;
  line-height:15pt;
  padding-top:10pt;
  padding-bottom:10pt;
  z-index:10;
  font-weight:700;
}

.card-button {
  width:16pt;
  height:16pt;
  background:#a05050;
  text-align:center;
  vertical-align:middle;
  font-size:9pt;
  line-height:16pt;
  border-radius:8pt;
  cursor:pointer;
}

.card-content {
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

@media screen and (min-width: 900px) {
  .card {
    display:inline-block;
    width:calc(50% - 40pt);
  }
}

@media screen and (min-width: 1200px) {
  .card {
    display:inline-block;
    width:calc(33% - 40pt);
  }
}

@media screen and (min-width: 1800px) {
  .card {
    display:inline-block;
    width:calc(25% - 40pt);
  }
}

.packery-drop-placeholder {
  outline: 3px dashed #444;
  outline-offset: -6px;
  /* transition position changing */
  -webkit-transition: -webkit-transform 0.2s;
          transition: transform 0.2s;
}

.mdl-data-table {
    color:#c0c0c0;
    background:#404040;
}

.mdl-navigation, .mdl-layout__drawer {
  background:#404040;
  color:#c0c0c0;
}

.mdl-navigation__link  {
  color:#c0c0c0 !important;
  text-overflow:ellipsis;
  overflow:hidden;
  direction: rtl;
    text-align: left;
}