@font-face {
  font-family: 'charter';
  src: url('charter_regular-webfont.woff2') format('woff2'),
       url('charter_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.graph-label {
  padding-top: 0px;
  vertical-align: text-bottom;
  margin-top: 0px;
  text-align: center;
}
.total-label{
  font-weight: bold;
  text-align: center;
}

body { 
  /* Arreglo de Bootstrap por navbar fixed-to-top */
  padding-top: 70px; 
  background-color: rgb(240, 240, 240);
}

a.navbar-brand small {
  font-size: 0.5em;
}

div#passionistas textarea, div#passionistas li {
  font-size: 0.8em;
}

div#passionistas div.card {
  margin-bottom: 1em;
}

th.sortable {
  cursor: pointer;
  white-space: nowrap;
}

td.number, th.number {
  text-align: right;
}

div#evolution-chart-card {
  font-family: charter;
}

div#histogram-chart-card {
  font-family: charter;
}

td svg text {
  font-weight: bold;
}

.positive {
  fill: #78a079;
  color: #78a079;
}
.negative {
  fill: #ec4f47;
  color: #ec4f47;
}
.neutral {
  fill: rgb(0, 0, 0, 0.5);
}

div#levers-card {
  font-family: charter;
}
table.levers tbody tr td {
  padding-top: 15px;
  padding-bottom: 10px;
}
table.levers td.total {
  color: #0b2757;
  font-weight: bold;
}
table.levers text.percent {
  font-weight: normal;
}

.visible-columns-disabled-btn {
  background-color: rgb(236, 233, 233);
  color: rgb(155, 155, 155);

  /* Other styles for the disabled button */
}


table.levers th.light-border-left,  table.levers td.light-border-left  { border-left:  dotted 2px rgba(190, 190, 190, 0.2); }
table.levers th.light-border-right, table.levers td.light-border-right { border-right: dotted 2px rgba(190, 190, 190, 0.2); }


.no-quantile  { fill: #0b2757; background: #0b2757 }
.quantile-5   { fill: #78a079; background: #78a079 }
.quantile-4   { fill: #a4d79f; background: #a4d79f }
.quantile-3   { fill: #f0c60a; background: #f0c60a }
.quantile-2   { fill: #f0905e; background: #f0905e }
.quantile-1   { fill: #ec4f47; background: #ec4f47 }

/*.tilenumber   { fill: #5A708C; background: #5A708C }*/
.tilenumber   {   
  fill: #2b8bfc; 
  background: #2b8bfc; 
  font-size: 1em !important; 
  font-weight: bold; }

span.version-2-mark {
  font-weight: bold;
  font-size: 0.75em;
}

div#mosaic-cards-container {
  font-family: charter;
}

div.mosaic-tile {
  overflow: auto;
  z-index: 1;
}
div.mosaic-tile div.blurred-back {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  filter: blur(8px);
}
div.mosaic-tile img.card-img          { z-index: 1; }
div.mosaic-tile div.card-img-overlay  { z-index: 1; }

div.mosaic-tile span {
  border-radius: 2px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  color: rgb(255, 255, 255, 1);
  position: absolute;
}

div.mosaic-tile span.no-quantile, div.mosaic-tile span.quantile-3 { background-color: rgb(0, 0, 0, 0.5); }
div.mosaic-tile span.y-0 { top: 10px; }
div.mosaic-tile span.y-1 { top: 40%; }
div.mosaic-tile span.y-2 { bottom: 10px; }
div.mosaic-tile span.x-0 { left: 10px; }
div.mosaic-tile span.x-1 { right: 10px; }

div.mosaic-tile span.type-icon {
  background-image: url('/img/ig_type_sprite.png');
  height: 32px;
  width: 32px;
  margin-right: -8.5px;
  display: block;
  background-color: transparent;
  right: 15px;
  position: absolute;
  top: 20%;
  z-index: 1;
}
div.mosaic-tile span.type-icon.image {
  background-image: none;
}
div.mosaic-tile span.type-icon.carousel, div.mosaic-tile span.type-icon.carousel_album {
  background-position-x: 0px;
  background-position-y: 0px;
}
div.mosaic-tile span.type-icon.igtv {
  background-position-x: -34px;
  background-position-y: 0px;
}
div.mosaic-tile span.type-icon.video {
  background-position-x: 0px;
  background-position-y: -34px;
}
div.mosaic-tile span.type-icon.reel {
  background-position-x: -34px;
  background-position-y: -34px;
}
div.mosaic-tile span.type-icon.tiktok {
  background-image: url('/img/tiktok-icon.png');
  opacity: 0.7;
}

div.mosaic-tile:hover div.mosaic-buttons {
  visibility: visible;
}
div.mosaic-buttons {
  visibility: hidden;
  position: absolute;
  left: 1em;
  top: 1em;
  z-index: 2;
}

thead tr.aggregates {
  background-color: rgb(248, 248, 248);
  font-size: 0.8em;
  line-height: 0.4em;
  color: rgb(100, 100, 100);
}
thead tr.aggregates th.value {
  text-align: right;
}

div.post-view img.card-img {
  width: auto;
  margin: 10px;
  border: solid 1px rgb(170, 170, 170);
}

/* Style for the menu */
.context-menu {
  position: absolute;
  background: rgb(242,242,242);
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  display: block;
  z-index: 9999;
}

.context-menu a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: #333;
}

.context-menu a:hover {
  background-color: #f0f0f0;
}