* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
body {
  font-family: Arial, sans-serif;
  background: rgb(20 20 20);
  margin: 0;
  text-align: center;
  color: rgb(200 200 200);
}

h1 {
  margin: 5px;
  font-size: x-large;
}

.cargar-datos {
   padding: 10px;
}
.cargar-datos button {
  margin: 6px 2px;
}
.btn-guardar {
   width: 60px;
   height: auto;
   padding: 2px 4px;
   background: rgb(20 20 20);
   border: solid 1px rgb(200 200 200);
   color: rgb(200 200 200);
}
.btn-cargar {
   width: 60px;
   height: auto;
   padding: 2px 4px;
   background: rgb(20 20 20);
   border: solid 1px rgb(200 200 200);
   color: rgb(200 200 200);
}
.btn-igualar {
  width: 70px;
  height: auto;
  padding: 2px 4px;
  background: rgb(20 20 20);
  border: solid 1px rgb(200 200 200);
  color: rgb(200 200 200);
}
.btn-comparar {
  width: 70px;
  height: auto;
  padding: 2px 4px;
  background: rgb(20 20 20);
  border: solid 1px rgb(200 200 200);
  color: rgb(200 200 200);
}
.btn-mas {
  display: inline-block;
  width: 70px;
  height: auto;
  padding: 2px 4px;
  background: rgb(20 20 20);
  border: solid 1px rgb(200 200 200);
  color: rgb(200 200 200);
  text-decoration: none;
  font-size: small;
  border-radius: 4px;
}
.btn-volver {
  width: 70px;
  height: auto;
  padding: 2px 4px;
  background: rgb(20 20 20);
  border: solid 1px rgb(200 200 200);
  color: rgb(200 200 200);
  text-decoration: none;
  font-size: small;
  border-radius: 4px;
}

h2 {
  margin: 0;
  font-size: large;
}

#nfl-teams {
  width: 100%;
  color: rgb(200 200 200);
  background: rgb(20 20 20);
  text-align: center;
}
#nfl-teams-local {
  width: 100%;
  color: rgb(200 200 200);
  background: rgb(20 20 20);
  text-align: center;
}
/* Esto es para la paágina guardadas */
#nfl-partidos {
  width: 80%;
  color: rgb(200 200 200);
  background: rgb(20 20 20);
  text-align: center;
  margin-bottom: 10px;
}

.container {
  display: flex;
  justify-content: space-around;
  width: 100vw;
  margin: 0px;
}

.equipo {
  background: rgb(20 20 20);
  border-radius: 8px;
  width: 50%;
  /*box-shadow: 0 0 5px rgba(0,0,0,0.1);*/
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nro-ataques {
   display: inline-flex;
   justify-content: space-around;
   align-items: center;
   font-size: small;
   border: solid 1px rgb(100 100 100);
   border-radius: 5px;
   width: 96%;
   padding: 2px 0;
   margin: 2px 0;
}
.nro-ataques div {
  font-size: smaller;
}

.cuartos {
  width: 17px;
  height: 20px;
  margin: 1px;
  padding: 0;
  font-size: xx-small;
  background: rgb(20 20 20);
  border: solid 1px rgb(200 200 200);
  color: rgb(200 200 200);
}

input {
   width: 40px;
   height: auto;
   text-align: center;
   background-color: rgb(100 100 100);
   color: rgb(200 200 200);
   border: none;
   border-radius: 4px;
   margin-left: 2px;
}

.buttons {
  width: 50vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0px;
}

button {
  padding: 8px 2px;
  margin: 2px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  /*font-weight: bold;*/
  font-size: small;
  width: 23vw;
  justify-self: center;
}

.btn-deshacer {
  /*grid-column: 1 / 3;
  justify-self: center;*/
  background-color: rgb(20 20 20);/*rgb(60 45 30);*/
  color: rgb(200 200 200);
  border: 2px solid rgb(100 100 100);
  /*width: calc(46vw + 2px);*/
  display: flex;
  justify-content: center;
  align-items: center;
}


/* botones visitantes */
#btn-visitante-corrida {
  background: rgba(20, 80, 170, 0.5);
  border: solid 2px rgba(20, 80, 170, 0.8);
  color: rgb(220 220 220);
}
#btn-visitante-pase {
  background: rgba(52, 152, 219, 0.5);
  border: solid 2px rgb(52, 152, 219);
  color: rgb(220 220 220);
}
#btn-visitante-corridaQB {
  background: rgb(35, 190, 215, 0.5);
  border: 2px solid rgb(35, 190, 215);
  color: rgb(220 220 220);
}
#btn-visitante-spike {
  background: rgba(0, 250, 250, 0.5);
  border: 2px solid rgb(0, 250, 250);
  color: rgb(220 220 220);
}
#btn-visitante-flagF {
  background: rgba(180, 250, 80, 0.5);
  border: 2px solid rgb(180, 250, 80);
  color: rgb(200, 200, 200);
}
#btn-visitante-diez {
  background: rgba(150, 220, 80, 0.5);
  border: 2px solid rgb(150, 220, 80);
  color: rgb(200, 200, 200);
}
#btn-visitante-redZone {
  background: rgba(100, 180, 70, 0.5);
  padding-right: 0;
  border: 2px solid rgb(100, 180, 70);
  color: rgb(200, 200, 200);
}
#btn-visitante-gol { 
  background-color: rgba(50, 130, 50, 0.5);
  color: rgb(200 200 200);
  border: 2px solid rgb(50, 130, 50);
}
#btn-visitante-anotacion { 
  background-color: rgba(10, 90, 70, 0.5); 
  color: rgb(200 200 200);
  border: 2px solid rgb(10, 90, 70);
  /*background: rgb(15 70 170);
  background: rgb(61 47 147);*/
}

#btn-visitante-flagC {
  background: rgba(250, 250, 0, 0.5);
  border: 2px solid rgb(250, 250, 0);
  color: rgb(200 200 200);
}
#btn-visitante-presionQB {
  background-color: rgba(250, 200, 10, 0.5);
  color: rgb(200 200 200);
  border: 2px solid rgb(250 200 10);
}
#btn-visitante-despeje { 
  background-color: rgba(250, 140, 20, 0.5);
  color: rgb(200 200 200);
  border: 2px solid rgb(250 140 20);
}
#btn-visitante-golNG {
  background: rgba(250, 80, 20, 0.5);
  color: rgb(230 230 230);
  border: 2px solid rgb(250 80 20);
}
#btn-visitante-intercepcion { 
  background-color: rgb(250, 20, 10, 0.5);
  color: rgb(230 230 230);
  border: 2px solid rgb(250 20 10);
}
#btn-visitante-fumble { 
  background-color: rgba(250, 20, 10, 0.5); 
  color: rgb(230 230 230);
  border: 2px solid rgb(250 20 10);
}
#btn-visitante-entrega { 
  background-color: rgba(250, 0, 0, 0.5);
  color: rgb(230 230 230);
  border: 2px solid rgb(250 20 10);
}
#btn-visitante-safety { 
  background-color: rgba(250, 0, 0, 0.5);
  color: rgb(230 230 230);
  border: 2px solid rgb(250 20 10);
}

/* botones local */
#btn-local-corrida {
  /*background: rgba(20, 80, 170, 0.8);*/
  background: rgba(20, 80, 170, 0.5);
  border: solid 2px rgba(20, 80, 170, 0.8);
  color: rgb(220 220 220);
}
#btn-local-pase {
  /*background: rgb(52, 152, 219);*/
  background: rgba(52, 152, 219, 0.5);
  border: solid 2px rgb(52, 152, 219);
  color: rgb(220 220 220);
}
/*#btn-local-corridaQB {
  background: rgb(35, 190, 215);
}*/
#btn-local-corridaQB {
  background: rgb(35, 190, 215, 0.5);
  border: 2px solid rgb(35, 190, 215);
  color: rgb(220 220 220);
}
/*#btn-local-spike {
  background: rgb(0 250 250);
}*/
#btn-local-spike {
  background: rgba(0, 250, 250, 0.5);
  border: 2px solid rgb(0, 250, 250);
  color: rgb(220 220 220);
}
/*#btn-local-flagF {
  background: rgb(180 250 80);
}*/
#btn-local-flagF {
  background: rgba(180, 250, 80, 0.5);
  border: 2px solid rgb(180, 250, 80);
  color: rgb(200, 200, 200);
}
/*#btn-local-diez {
  background: rgb(150 220 80);
}*/
#btn-local-diez {
  background: rgba(150, 220, 80, 0.5);
  border: 2px solid rgb(150, 220, 80);
  color: rgb(200, 200, 200);
}
/*#btn-local-redZone {
  background: rgb(100 180 70);
  padding-right: 0;
}*/
#btn-local-redZone {
  background: rgba(100, 180, 70, 0.5);
  padding-right: 0;
  border: 2px solid rgb(100, 180, 70);
  color: rgb(200, 200, 200);
}
/*#btn-local-gol { 
  background-color: rgb(50 130 50);
  color: rgb(200 200 200);
}*/
#btn-local-gol { 
  background-color: rgba(50, 130, 50, 0.5);
  color: rgb(200 200 200);
  border: 2px solid rgb(50, 130, 50);
}
/*#btn-local-anotacion { 
  background-color: rgb(10 90 70); 
  color: rgb(200 200 200); 
}*/
#btn-local-anotacion { 
  background-color: rgba(10, 90, 70, 0.5); 
  color: rgb(200 200 200);
  border: 2px solid rgb(10, 90, 70);
}

/*#btn-local-flagC {
  background: rgb(250, 250, 0);
}*/
#btn-local-flagC {
  background: rgba(250, 250, 0, 0.5);
  border: 2px solid rgb(250, 250, 0);
  color: rgb(200 200 200);
}
/*#btn-local-presionQB {
  background-color: rgb(250, 200, 10);
  color: black;
}*/
#btn-local-presionQB {
  background-color: rgba(250, 200, 10, 0.5);
  color: rgb(200 200 200);
  border: 2px solid rgb(250 200 10);
}
/*#btn-local-despeje { 
  background-color: rgb(250, 140, 20);
  color: black;
}*/
#btn-local-despeje { 
  background-color: rgba(250, 140, 20, 0.5);
  color: rgb(200 200 200);
  border: 2px solid rgb(250 140 20);
}
/*#btn-local-golNG {
  background: rgb(250 80 20);
  color: rgb(230 230 230);
}*/
#btn-local-golNG {
  background: rgba(250, 80, 20, 0.5);
  color: rgb(230 230 230);
  border: 2px solid rgb(250 80 20);
}
/*#btn-local-intercepcion { 
  background-color: rgb(250 20 10);
  color: rgb(230 230 230); 
}*/
#btn-local-intercepcion { 
  background-color: rgb(250, 20, 10, 0.5);
  color: rgb(230 230 230);
  border: 2px solid rgb(250 20 10);
}
/*#btn-local-fumble { 
  background-color: rgb(250, 20, 10); 
  color: rgb(230 230 230);
}*/
#btn-local-fumble { 
  background-color: rgba(250, 20, 10, 0.5); 
  color: rgb(230 230 230);
  border: 2px solid rgb(250 20 10);
}
/*#btn-local-entrega { 
  background-color: rgb(250 0 0);
  color: rgb(230 230 230);
}*/
#btn-local-entrega { 
  background-color: rgba(250, 0, 0, 0.5);
  color: rgb(230 230 230);
  border: 2px solid rgb(250 20 10);
}
/*#btn-local-safety { 
  background-color: rgb(250 0 0);
  color: rgb(230 230 230);
}*/
#btn-local-safety { 
  background-color: rgba(250, 0, 0, 0.5);
  color: rgb(230 230 230);
  border: 2px solid rgb(250 20 10);
}

/*.f {
  bills	rgb(96 198 228) rgb(72 156 165)
  chiefs	rgb(72 162 201)
  eagles	rgb(60 132 180)
  lions	rgb(60 150 198)
  dolphins	rgb(84 144 174)
  cowboys	rgb(72 168 153)
  packers	rgb(144	162	180)
  ravens	rgb(132	132	138) rgb(156 156 138)
  giants	rgb(156	144	162)
  chargers	rgb(108	114	162)
  raiders	rgb(144	126	183)
  commanders	rgb(156	108	189)

}*/
/*.segunYo {
  lions	rgb(60 150 198)
  eagles	rgb(60 132 180)
  chiefs	rgb(72 162 201)
  bills	rgb(96 198 228) rgb(72 156 165)
  dolphins	rgb(84 144 174)
  cowboys	rgb(72 168 153)
  ravens	rgb(132	132	138) rgb(156 156 138)
  packers	rgb(144	162	180)
  giants	rgb(156	144	162)
  chargers	rgb(108	114	162)
  raiders	rgb(144	126	183)
  commanders	rgb(156	108	189)
}*/
/*.d {
1. rgb(156, 108, 189)
2. rgb(156, 144, 162)
3. rgb(132, 132, 138)
4. rgb(144, 126, 183)
5. rgb(72, 156, 165)
6. rgb(96, 198, 228)
7. rgb(72, 162, 201)
8. rgb(84, 144, 174)
9. rgb(60, 150, 198)
10. rgb(60, 132, 180)
11. rgb(144, 162, 180)
12. rgb(108, 114, 162)
13. rgb(72, 168, 153)-
14. rgb(156, 156, 138)
}*/
/*.temperatura {
1. rgb(144, 126, 183)
2. rgb(108, 114, 162)
3. rgb(132, 132, 138)
4. rgb(60, 150, 198) 
5. rgb(60, 132, 180) 
6. rgb(72, 162, 201) 
7. rgb(96, 198, 228) 
8. rgb(144, 162, 180)
9. rgb(84, 144, 174) 
10. rgb(72, 156, 165)
11. rgb(72, 168, 153)
12. rgb(156, 156, 138)
13. rgb(156, 108, 189)
14. rgb(156, 144, 162)
}*/
/*.l{
1. rgb(72, 168, 153) - Azul
2. rgb(72, 156, 165) - Azul
3. rgb(96, 198, 228) - Azul
4. rgb(72, 162, 201) - Azul
5. rgb(84, 144, 174) - Azul
6. rgb(60, 150, 198) - Azul
7. rgb(60, 132, 180) - Azul
8. rgb(144, 162, 180) - Azul
9. rgb(108, 114, 162) - Azul
10. rgb(156, 156, 138) - Gris
11. rgb(132, 132, 138) - Gris
12. rgb(156, 144, 162) - Gris
13. rgb(144, 126, 183) - Violeta
14. rgb(156, 108, 189) - Violeta
}*/
/*
1. rgb(60, 150, 198) - R:60 G:150 B:198
2. rgb(60, 132, 180) - R:60 G:132 B:180
3. rgb(72, 168, 153) - R:72 G:168 B:153
4. rgb(72, 162, 201) - R:72 G:162 B:201
5. rgb(72, 156, 165) - R:72 G:156 B:165
6. rgb(84, 144, 174) - R:84 G:144 B:174
7. rgb(96, 198, 228) - R:96 G:198 B:228
8. rgb(108, 114, 162) - R:108 G:114 B:162
9. rgb(132, 132, 138) - R:132 G:132 B:138
10. rgb(144, 162, 180) - R:144 G:162 B:180
11. rgb(144, 126, 183) - R:144 G:126 B:183
12. rgb(156, 156, 138) - R:156 G:156 B:138
13. rgb(156, 144, 162) - R:156 G:144 B:162
14. rgb(156, 108, 189) - R:156 G:108 B:189
*/
/*
1. rgb(156, 108, 189) 
2. rgb(108, 114, 162) 
3. rgb(144, 126, 183) 
4. rgb(60, 132, 180)
5. rgb(132, 132, 138) 
6. rgb(84, 144, 174)
7. rgb(156, 144, 162) 
8. rgb(60, 150, 198)
10. rgb(156, 156, 138)
9. rgb(72, 156, 165)
12. rgb(144, 162, 180)
11. rgb(72, 162, 201)
13. rgb(72, 168, 153)
14. rgb(96, 198, 228)
*/


.rendimiento {
  font-size: small;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin-top: 8px;
  background: linear-gradient(to right, rgb(180, 108, 183), rgb(84, 114, 174), rgb(132, 132, 136), rgb(60, 108, 102), rgb(0, 198, 228));
  width: 90%;
  border-radius: 50px;
  border: 1px solid rgb(100, 100, 100);
  color: rgb(250 250 250);
  display: flex;
  justify-content: space-around;
}

.color-promedio {
  width: 90%;
  height: 50px;
  border: none;
  border-radius: 4px;
  margin: 8px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: small;
  color: white;
}

.contenedor-barras {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.barra {
  width: 90%;
  height: 15px;
  border-radius: 0px;
  border: 1px solid rgb(20 20 20);
  color: white;
  font-weight: bold;
  text-transform: capitalize;
  font-size: small;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*.corrida {*/
  /*background-color: rgba(20, 80, 170, 0.5);*/
  /*background: rgb(15, 50, 140);
}
.pase {*/
  /*background-color: rgba(60, 170, 250, 0.5);*/ 
/*  background: rgb(70, 130, 180);
}
.corridaQB {
  background: rgba(0, 250, 250, 0.5);
}*/
.corrida {
  background-color: rgba(20, 80, 170, 0.5);
  /*background: rgb(15, 50, 140);*/
}

.pase {
  background-color: rgba(60, 170, 250, 0.5);
  /*background: rgb(70, 130, 180);*/
}
.corridaQB {
  background: rgba(0, 250, 250, 0.5);
}

.spike {
  background: rgb(35, 190, 215);
}  
.flagF {
  background: rgb(180 250 80);
  color: black;
}
.diez { 
  background-color: rgb(150 220 80);
  color: black;
}
.redZone { 
  background-color: rgb(100 180 70);
  color: black;
}
.gol {
  background: rgb(50 130 50);
  color: black;
}
.anotacion {
  background: rgb(0 40 20);
  border: solid 1px rgb(200 200 200);
}

.flagC {
  background-color: rgb(250, 250, 0);
  color: black;
}
.presionQB {
  background-color: rgb(250, 200, 10);
  color: black;
}
.despeje { 
  background-color: rgb(250, 140, 20);
}
.golNG {
  background: rgb(250 80 20);
}
.intercepcion { 
  background-color: rgb(250 20 10);
}
.fumble { 
  background-color: rgb(250, 20, 10);
}
.entrega {
  background: rgb(250 0 0);
}
.safety {
  background: rgb(250 0 0);
}