style.css

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

body {
    background-color: rgb(50, 54, 57);
    margin: 0;
    color: white;
    padding: 5px 5px;
    font-family: 'Open Sans', sans-serif;
}

.grid {
    display: grid;
    grid-template-columns: 4fr 1fr;
    grid-template-areas: "main sidebar";
    align-content: start;
    gap: 5px;
}

.main {
    grid-area: main;
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-areas: "main-flex-left main-flex-rigth"
                         "tabla      tabla";
    align-content: start;
    justify-content: stretch;
    gap: 5px;
}

.main-flex-left {
    grid-area: main-flex-left;
    display: grid;
    gap: 5px;
    align-content: start;
    width: 100%;   
}

.main-flex-right {
    grid-area: main-flex-rigth;
    display: grid;
    gap: 5px;
    align-content: start;
}

@media (max-width: 667px) {

    .grid, .main, .main-flex-left {
        display: block;
        margin: 5px 0;
    }

    .title-bar i:last-of-type {
        display: none;
    }

    table, thead, tbody, th, td, tr { 
        display: block;
	}
	
	thead tr { 
		display: none;
	}
	
	
	td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
        padding-left: 50%; 
    }
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 0;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}

    	/*
	Label the data
	*/
	td:nth-of-type(1):before { content: "Tipo"; }
	td:nth-of-type(2):before { content: "Aerolínea"; }
	td:nth-of-type(3):before { content: "Vuelo"; }
	td:nth-of-type(4):before { content: "Ruta"; }
	td:nth-of-type(5):before { content: "Inter/Dom"; }
	td:nth-of-type(6):before { content: "ST"; }
	td:nth-of-type(7):before { content: "ET"; }
	td:nth-of-type(8):before { content: "AT"; }
	td:nth-of-type(9):before { content: "Demora"; }
    td:nth-of-type(10):before { content: "Remark"; }
    td:nth-of-type(11):before { content: "Posición"; }
    td:nth-of-type(12):before { content: "Puerta"; }
	td:nth-of-type(13):before { content: "Cinta"; }
	td:nth-of-type(14):before { content: "chkF"; }
	td:nth-of-type(15):before { content: "chkT"; }
	td:nth-of-type(16):before { content: "Pax"; }
    td:nth-of-type(17):before { content: "Term"; }
}

.sidebar {
    grid-area: sidebar;
    display: grid;
    align-content: start;
    gap: 5px;
}

.tablavuelos {
    grid-area: tabla;
}



.not-selected {
    opacity: 0.3;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    border: solid black 1px;
    background-color: rgb(50, 54, 57);
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    border: solid grey 1px;
}


.tablavuelos thead {
    background-color: black;
}

.tablavuelos table {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
}

.tablavuelos table tr {
    border-bottom: solid black 1px;
}

.arribo {
    fill: #e09431;
    color: #e09431;
}

.partida {
    fill: #2aa7d8;
    color:#2aa7d8;
}

.posiciones path:hover {
    fill-opacity: 1;
    fill: blue;
    stroke: blue;
}

.tooltip {
    position: absolute;
    pointer-events: none;
    background-color: rgba(0,0,0,0.9);
    color: white;
    display: none;
    padding: 0.5em;
    /* width: max-content; */
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .3);
    z-index: 2;
    text-anchor: middle;
}

.zoom {
    transform: scale(2);
    z-index: 1;
    transform-origin: top right;
}

.zoom.posiciones {
    transform: scale(2.5);
    z-index: 1;
    transform-origin: top right;
}

header img {
    height: 4em;
}

header {
    display: flex;
    flex-direction: column;
    padding: 5px 3px;
    text-align: center;
}

header input {
    padding: 10px;
    width: 80%;
    margin: 5px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    border-radius: 3px;
}

.title-bar {
    display: flex;
    justify-content: space-between;
    padding: 3px 6px;
}

.title-bar i {
    padding: 3px;
}

.clickable {
    cursor: pointer;
}

.ignore-events {
    pointer-events: none;
}

.mostradores .flexcontainer {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    justify-content: center;
    align-items: center;
}

.mostradores .flexcontainer div {
    background-color: steelblue;
    /* width: 3rem; */
    /* height: 3rem; */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    margin: 5px;
}

.histograma .axis text, .delays text {
    font-size: 1rem;
    font-family: 'Open Sans', sans-serif;
}

svg text {
    font-family: 'Open Sans', sans-serif;
}

.hide {
    display: none;
}

.histograma .fa-expand {
    display: none;
}

.totals .flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.totals .flex div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.totals .flex i {
    font-size: 2em;
    margin-bottom: 5px;
}

.totals .content {
    padding: 5px;
}

.fa-file-excel {
    cursor: pointer;
    padding: 5px;
}

.mostrador-activo {
    position: relative;
}

.mostrador-activo::before {
    content: "\f108";  /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: "Font Awesome 5 Free";
    left:3px;
    position:absolute;
    top:1px;
    font-size: 0.7em;
 }

/* [data-aero='AU'] { fill: steelblue }
[data-aero='LA'] { fill: steelblue }
[data-aero='JJ'] { fill: steelblue }
[data-aero='UA'] { fill: steelblue }
[data-aero='AR'] { fill: steelblue }
[data-aero='G3'] { fill: steelblue }
[data-aero='QT'] { fill: steelblue }
[data-aero='4M'] { fill: steelblue }
[data-aero='AD'] { fill: steelblue }
[data-aero='AC'] { fill: steelblue }
[data-aero='KL'] { fill: steelblue }
[data-aero='PZ'] { fill: steelblue }
[data-aero='OB'] { fill: steelblue }
[data-aero='H2'] { fill: steelblue }
[data-aero='LP'] { fill: steelblue }
[data-aero='IB'] { fill: steelblue }
[data-aero='ET'] { fill: steelblue }
[data-aero='EK'] { fill: steelblue }
[data-aero='AV'] { fill: steelblue }
[data-aero='CU'] { fill: steelblue }
[data-aero='CM'] { fill: steelblue }
[data-aero='AOG'] { fill: steelblue }
[data-aero='AF'] { fill: steelblue }
[data-aero='ES'] { fill: steelblue }
[data-aero='5X'] { fill: steelblue }
[data-aero='AA'] { fill: steelblue }
[data-aero='M3'] { fill: steelblue }
[data-aero='XL'] { fill: steelblue }
[data-aero='LH'] { fill: steelblue }
[data-aero='ZP'] { fill: steelblue }
[data-aero='UX'] { fill: steelblue }
[data-aero='AZ'] { fill: steelblue }
[data-aero='AMS'] { fill: steelblue }
[data-aero='DI'] { fill: steelblue }
[data-aero='WK'] { fill: steelblue }
[data-aero='BA'] { fill: steelblue }
[data-aero='DL'] { fill: steelblue }
[data-aero='IB_'] { fill: steelblue }
[data-aero='TK'] { fill: steelblue }
[data-aero='QR'] { fill: steelblue }
[data-aero='AM'] { fill: steelblue }
[data-aero='NZ'] { fill: steelblue } */

.fas.fa-info {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
  }
  
  .fas.fa-info .tooltipDemDiv {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
  }
  
  .fas.fa-info:hover .tooltipDemDiv {
    visibility: visible;
  }