@import url("./colors.css");

body {
  font-family: "Graphik-Starwood";
}

/* container */

#map-panel {
  display: inline-block;
}

#title {
  font-size: 25pt;
  font-family: "FreigDisPro";
  padding: 12px 0;
  text-align: center;
  width: 100%;
}

#capacity-panel {
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 10px;
  text-align: center;
}

#venue-list-panel {
  color: var(--color-white) !important;
  display: inline-block;
  margin-top: 10px;
  width: 242px;
}

ul.venues-list {
  background: var(--color-white);
  list-style-type: none;
  padding: 0;
  margin-left: 30px; 
}

ul.venues-list h1 {
  color: var(--color-white) !important;
}

.step1 .accordion {
  width: 310px;  
  margin-top: 0;
}

ul.venues-list h1 {  
  font-family: "Graphik-Starwood";
  color: var(--color-charcoal) !important;
  display: block;
  padding: 6px 10px;  
  text-align: left;
  font-size: 1.1rem;    
  width: 100%;    
  font-weight: bold;
  margin-top: 12px;
  line-height: 22px;
}

ul.venues-list h2 {  
  font-family: "Graphik-Starwood";
  color: var(--color-charcoal) !important;
  display: block;
  padding: 6px 0;  
  padding-left: 30px;
  text-align: left;
  font-size: 1.1rem;
  width: 100%;
  line-height: 18px;
}

ul.venues-list h3 {  
  font-family: "Graphik-Starwood";
  color: var(--color-charcoal) !important;
  display: block;
  padding: 6px 0;
  padding-left: 60px;
  text-align: left;
  font-size: 1.1rem;
  width: 100%;
  background: var(--color-white) !important;
  line-height: 18px;
}

ul.venues-list h1:hover {  
  background: var(--color-sage);  
  text-decoration: none;
}

ul.venues-list h2:hover {  
  background: var(--color-sage);  
  text-decoration: none;  
}

ul.venues-list h3:hover {
  background: var(--color-sage) !important;  
  text-decoration: none;
}

.venues-list-item-border {
  border-bottom: 1px solid var(--color-brown);
}

.venues-list {
  list-style: none;
  margin: 0;
}

.capacity-chart-lable {
  border: 1px solid var(--color-black);
  color: var(--color-white);
  display: inline-block;
  font-size: 18pt;
  margin: 0 auto;
  text-align: center;
  transition: all 0.5s ease-in-out;
  width: 213px;
}

.capacity-chart-lable a {
  background: var(--color-black);
  display: block;
  color: var(--color-white);
  transition: all 0.5s ease-in-out;
  padding: 19px 0;
  width: 100%;
}

.capacity-chart-lable a:hover {
  background: var(--color-white);
  color: var(--color-black);
  transition: all 0.5s ease-in-out;
}

.capacity-chart-lable:hover {
  background: var(--color-white);
  text-decoration: none;
  transition: all 0.5s ease-in-out;
}

.capacity-chart-lable:hover a {
  color: var(--color-black);
  text-decoration: none;
  transition: all 0.5s ease-in-out;
}

#convert-button-panel {
  display: block;
  margin: 20px auto;
  text-decoration: none;
  width: 213px;
}

#convert-button-table,
td {
  border: 1px solid var(--color-black);
}

#convert-button-table td a {
  color: var(--color-black);
  display: block;
  padding: 15px 0;
  width: 100%;
}

#convert-button-table tr td {
  color: var(--color-white);
  text-decoration: none;
  transition: all 0.5s ease-in-out;
  width: 107px;
}

#convert-button-table td:hover {
  color: var(--color-white);
  text-decoration: none;
  transition: all 0.5s ease-in-out;
  background: var(--color-black);
}

#convert-button-table td:hover a {
  color: var(--color-white);
  text-decoration: none;
}

.active-boton-convert {
  color: var(--color-white) !important;
  background: var(--color-black);
}

.capacity-title {
  color: var(--color-black);
  font-weight: bold;
  text-transform: uppercase;
  padding: 20px 80px;
}

.capacity-table td {
  border: 1px solid var(--color-black);
  padding: 5px 15px;
}

#divider {
  border-right: 1px dotted var(--color-black);
  display: inline-block;
  float: left;
  height: 500px;
  margin: 0 10px;
  width: 1px;
}

.table {
  border-collapse: collapse;
  font-size: 18px;
  margin: 0 auto;
}

.step1 .step-1-columns .capacity-table-lateral-desktop article.tile table {
  width: 200px;
}

.tabla-capacidades {
  color: var(--color-white) !important;
  background-color: var(--color-charcoal);
  font-size: 16px !important;
  padding: 0px;
  height: 50px;
  text-align: center;
  width: 200px !important;  
  text-transform: uppercase;  
}

.step1 .buttons a:hover {
  box-shadow: inset 9999px 9999px hsla(0,0%,100%,.2);  
}

.table.is-narrow td,
.table.is-narrow th {
  padding: 0px;
  text-align: center;
  width: 100px;
  height: 30px;
  vertical-align: middle;
}

#levels-map {
  border: 0px;
}

.modal-close{
  background: var(--color-charcoal);
  border-radius: unset;
  padding: 15px;
}

.modal-close:hover{
  box-shadow: inset 9999px 9999px hsla(0,0%,100%,.2);
}

@media (min-width: 576px) {
  #venue-list-panel {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 242px;
  }

  #capacity-panel {
    margin-bottom: 10px;
    margin-top: 10px;
  }
}

@media (min-width: 501px) {
  #venue-list-panel,
  #capacity-panel {
    margin-bottom: 10px;
    margin-top: 10px;
    float: left;
  }
}

@media only screen and (max-width: 1279.98px) and (min-width: 900px) {
  #title {
    margin-bottom: 10px;
  }

  #title h1 {    
    margin-top: 5px;
    padding-left: 30px;
    font-size: 27px;    
  }

  .menu-label {
    font-size: 18px;    
    padding-bottom: 5px;
  }

  .step1 .rooms div.selectableCombination{
    width: 100px;
    height: 50px;
  }

  .step1 .capacity-table-lateral-desktop{
    margin-left: 0;
  }

  .step1 .accordion .titleFloor {
    font-size: 14px;
  }

  .step1 .accordion {
    width: 220px;
    padding-bottom: 5px;
  }

  ul.venues-list h1,
  ul.venues-list h2,
  ul.venues-list h3 {
    font-size: 0.8rem;    
  }

  ul.venues-list h1{
    margin-bottom: 1.5px;
  }

  ul.venues-list h2 {
    padding-left: 25px;
  }

  .table.is-narrow td,
  .table.is-narrow th {
    padding: 3.5px 3px;
    font-size: 12px;
    height: 22px;
  }

  .tabla-capacidades {    
    font-size: 12px !important;    
    height: 30px; 
  }
}

@media (min-width: 900px) {  
  #spaces-map-panel {
    display: inline-block;
  }
  #venue-list-panel {
    margin-top: 100px;
  }

  #capacity-panel {
    float: left;
  }

  #venue-list-panel {
    float: left;
  }
}

ul.venues-list h1.menu-hover {  
  background: var(--color-sage) !important;
  text-decoration: none;
}

ul.venues-list h1.menu-hover span{
  background: var(--color-sage);  
  color: var(--color-white);
}

ul.venues-list h2.menu-hover {  
  background: var(--color-sage) !important;  
  text-decoration: none;
}

ul.venues-list h3.menu-hover {  
  background: var(--color-sage) !important;  
  text-decoration: none;
}

.step1 .buttons a:hover span{
  background: var(--color-taupe);
  color: var(--color-white);
  border-color: var(--color-taupe);
}

#map_image {
  display: block;
}