/* GOTHAM (para títulos, subtítulos y tooltip */
@font-face {
  font-family: "Gotham";
  src: url("./fonts/Gotham/Gotham-Light.otf") format("opentype");
}

@font-face {
  font-family: "Gotham";
  font-weight: 700;
  src: url("./fonts/Gotham/Gotham-Bold.otf") format("opentype");
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Gotham", sans-serif;
}

.blinking {
  animation: blinkingText 1.5s infinite;
}
@keyframes blinkingText {
  0% {
    color: #ef4430;
  }
  49% {
    color: transparent;
  }
  50% {
    color: transparent;
  }
  99% {
    color: transparent;
  }
  100% {
    color: #ef4430;
  }
}

.gradient-custom {
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(45deg, #d4d7d9, #fdefd4);
}

.header {
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


@media (max-width: 500px) {
  #mapa-proyectos-id {
    height: 250px;
  }
  #mapa-actores-id {
    height: 250px;
  }
}
@media (min-width: 501px) {
  #mapa-proyectos-id {
    /* height: 650px; */
    height: 90%;
  }
  #mapa-actores-id {
    /* height: 650px; */
    height: 100%;
  }
}

.header-button button {
  background-color: white;
  color: black;
  border: none;
}

.header-button button:hover {
  background-color: white;
  color: gray;
  border: none;
}

.show > .btn-primary.dropdown-toggle {
  background-color: white;
  color: black;
  border: none;
}

.content-container {
  padding: 30px 0 60px 0;
  background-color: #f6f6f6;
  min-height: calc(100vh - 83px);
}

.graph-card {
  padding: 25px;
  background-color: white;
  border-radius: 15px;
  -webkit-box-shadow: 0 0 5px 2px lightgrey;
  -moz-box-shadow: 0 0 5px 2px lightgrey;
  box-shadow: 0 0 5px 2px lightgrey;
  transition: transform .5s ease;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
  font-family: "Gotham";
  min-width: 250px;
}



#estatal {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 0;
}



.estatal-item {
  height: 400px;
  width: 49%;
}

.barras-historicas {
  width: 67%;
}

.list-project{
  width:31%;
}

.price-forecast {
  width: 78%;
}





@media screen and (min-width: 1100px) {

  .text-container-1 {
    width: 100px;
    height: 600px;
    overflow-y: hidden;
  }


}

@media screen and (max-width: 1100px) {
  #estatal {
    flex-direction: column;
    gap: 25px;
  }

  .estatal-item {
    width: 100%;
    height: auto;
  }

  .barras-historicas {
    width: 100%;
  }

  .list-project{
    width: 100%;
  }

  .price-forecast {
    width: 100%;
  }

  
}


.drawer-nav {
  background-color:#f9f9f9;
  max-width:250px;
  min-height: calc(100vh - 83px);
  -webkit-box-shadow: 0 0 5px 2px lightgrey;
  -moz-box-shadow: 0 0 5px 2px lightgrey;
  box-shadow: 0 0 5px 2px lightgrey;
}
.drawer-control {
  min-height: calc(100vh - 83px);
  -webkit-box-shadow: 0 0 5px 2px lightgrey;
  -moz-box-shadow: 0 0 5px 2px lightgrey;
  box-shadow: 0 0 5px 2px lightgrey;
}

.nav-section {
  border-radius: 15px;
  margin-top: 10px;
  transition: transform .5s ease;
}

.nav-section:hover {
  background-color: #dfdfdfa4;
  color:#ef4430;
  -webkit-box-shadow: 0 0 5px 2px lightgrey;
  -moz-box-shadow: 0 0 5px 2px lightgrey;
  box-shadow: 0 0 5px 2px lightgrey;
  transform: scale(1.05);

}

.dropdown-style {
  border-radius: 15px;
  margin-top: 15px;
  max-width: 200px;
  z-index: 99999999999999999999;
}


.slider-style{
  margin-top: 20px;
  max-width: 200px;
  transition: transform .5s ease;
}
.slider-style:hover {
  transform: scale(1.05);
}



.about-card {
  height:380px; 
  max-height:380px; 
  padding: 15px;
  margin-bottom: 25px;
  overflow-y: 'scroll';
  text-align: justify;
  transition: transform .5s ease;
  border: 1px solid #f1f1f1;
  perspective: 10000px;
}

.about-card:hover {
  -webkit-box-shadow: 0 0 5px 2px #ef4430;
  -moz-box-shadow: 0 0 5px 2px #ef4430;
  box-shadow: 0 0 5px 2px #ef4430;
  transform: scale(1.1) rotateY(180deg);
}

.graph-card:hover {
  -webkit-box-shadow: 0 0 5px 2px #ef4430;
  -moz-box-shadow: 0 0 5px 2px #ef4430;
  box-shadow: 0 0 5px 2px #ef4430;
  transform: scale(1.03);
}


.btn-calculate {
  transition: transform .1s ease;
}
.btn-calculate:hover {
  background-color:#ef4430;
  color: white;
  -webkit-box-shadow: 0 0 5px 2px #ef4430;
  -moz-box-shadow: 0 0 5px 2px #ef4430;
  box-shadow: 0 0 5px 2px #ef4430;
  transform: scale(1.03);
}



/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card-inner:hover {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  font-family: "Gotham";
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: white;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: white;
  color: black;
  transform: rotateY(180deg);
} 


.tab-internacional {
  transition: transform .1s ease;
}
.tab-internacional:hover {
  -webkit-box-shadow: 0 0 5px 2px #ef4430;
  -moz-box-shadow: 0 0 5px 2px #ef4430;
  box-shadow: 0 0 5px 2px #ef4430;
  transform: scale(1.03);
}




.mantine-Switch-label{
  font-size: small;
  color:rgb(134, 142, 150);
}


.card-especiales{
  -webkit-box-shadow: 0 0 5px 2px lightgrey;
  -moz-box-shadow: 0 0 5px 2px lightgrey;
  box-shadow: 0 0 5px 2px lightgrey;
  transition: transform .3s ease;
}
.card-especiales:hover{
  -webkit-box-shadow: 0 0 5px 2px #ef4430;
  -moz-box-shadow: 0 0 5px 2px #ef4430;
  box-shadow: 0 0 5px 2px #ef4430;
  transform: scale(1.03);
}


.mantine-Spoiler-control{
  font-size: small;
  color: #1d2993;
}

.dash-table-tooltip{
  font-size: 10px;
  font-family: 'Gotham';
}


.home-button{
  -webkit-box-shadow: 0 0 5px 2px lightgrey;
  -moz-box-shadow: 0 0 5px 2px lightgrey;
  box-shadow: 0 0 5px 2px lightgrey;
  transition: transform .3s ease;
}
.home-button:hover{
  -webkit-box-shadow: 0 0 5px 2px #ef4430;
  -moz-box-shadow: 0 0 5px 2px #ef4430;
  box-shadow: 0 0 5px 2px #ef4430;
  transform: scale(1.03);
}


.tableu-iframe{
  width: 100%;
  height: 900px;
}