/*
:root {
  --survey-card-width: clamp( );
}
*/

body {
  padding-top: 56px;
  background-image: url("https://cdn.patasalada.mx/img/fondo/fondo-horizontal-1.png");
  background-attachment: fixed;
}

main {
  padding-top: 2vw;
  padding-left: 15vw;
  padding-right: 15vw;

}

.main-entity {
  height: calc(100dvh - 4.5rem);
  display: grid;
  align-items: center;
  justify-content: center;
}

.logo-empresa {
  max-width: 500px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.survey {
  background-color: white;
  border: 1px solid;
  border-color: #06786c;
  border-radius: 23px;
  padding: 8px 16px 32px 16px;
  --bs-bg-opacity: .3 !important;
}

.card-menu {
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: 45% 45%;

  --bs-bg-opacity:0.5;
}

.card-entity {
  position: relative;
  border: 1px solid;
  border-color: #06786c;
  width: 1fr /*clamp( 100px, 40vw, 500px )*/;
  background-color: white;
  display: grid;
  grid-template: "card-logo card-text";
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
  padding-right: 16px;
  margin: 1rem;
  /*border-radius: 23px;*/
  --bs-bg-opacity: 1.0;
}

.card-logo {
  grid-area: card-logo;
  width: 60%;
}

.card-logo img {
  width: clamp( 80px, 20vw,200px);
  border-radius: 15px;
}

.card-text {
  grid-area: card-text;
  width: 100%;
  /*font-family: 'Montserrat' !important;*/
  font-size: clamp(1em, 1.5vw, 2em);
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 16px;
  padding-right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
}

.card-text a {
  text-decoration: none;
  text-align: end;
  color: #06786c;
}

.card-text a:link {
  color: #06786c;
}

.card-text a:visited {
  color: #06786c;
}


@media (width <576px) {

  body {
    background-image: url("https://cdn.patasalada.mx/img/fondo/fondo-vertical-1.png");
    background-repeat: no-repeat;
    background-size: cover;
  }

  main {
    padding-left: 2vw;
    padding-right: 2vw;
    padding-bottom: 8vh;
  }

  .logo-empresa {
    max-width: 150px;
  }

  h4 {
    font-size: 16px;
  }

  .card-menu {
    grid-template-columns: 1fr;
  }

  .card-entity {
    margin: 0.25rem;
  }

  .card-text {
    font-size : 14pt;
  }
/*
  table {
    font-size: 8pt;
  }

  th button {
    font-size: 8pt !important;
  }*/
}

@media (width >=576px) {

  body {
    background-image: url("https://cdn.patasalada.mx/img/fondo/fondo-vertical-1.png");
    background-repeat: no-repeat;
    background-size: cover;
  }

  main {
    padding-left: 4vw;
    padding-right: 4vw;
    padding-bottom: 8vh;
  }

  .card-menu {
    grid-template-columns: 1fr;
  }

  .card-entity {
    margin: 0.5rem;
  }

  .card-text {
    font-size : 18pt;
  }
}

@media (width >=768px) {

  body {
    background-image: url("https://cdn.patasalada.mx/img/fondo/fondo-horizontal-1.png");
    background-repeat: no-repeat;
    background-size: cover;
  }

  main {
    padding-left: 4vw;
    padding-right: 4vw;
    padding-bottom: 64px;
  }

  .card-menu {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-entity {
    margin: 1rem;
  }

  .card-text {
    font-size: 16pt;
  }

  .survey {
    padding: 16px 32px 16px 32px;
  }
}

@media (width >=992px) {

  main {
    padding-left: 8vw;
    padding-right: 8vw;
  }

  .card-text {
    font-size: 18pt;
  }
}

@media (width >=1200px) {

  main {
    padding-left: 12vw;
    padding-right: 12vw;
  }

  .card-text {
    font-size: 18pt;
  }
}

@media (width >=1400px) {

  main {
    padding-left: 22vw;
    padding-right: 22vw;
  }

  .card-text {
    font-size: 20pt;
  }
}


/*
@media (max-width: 1400px) {
  .survey {
    width: 70%;
  }

  .card-unit {
    width: 250px;
  }
}

@media (max-width: 1200px) {
  .survey {
    width: 80%;
  }

  .card-unit {
    width: 158px;
  }
}

@media (max-width: 900px) {
  .survey {
    width: 95%;
  }

  .card-unit {
    width: 150px;
  }
}

@media (max-width: 320px) {
  .survey {
    width: 100%;
  }

  .card-unit {
    width: 200px;
  }
}
*/



.btn-outline-success {
  --bs-btn-color: #06786c;
  --bs-btn-border-color: #06786c;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #06786c;
  --bs-btn-hover-border-color: #06786c;
  --bs-btn-focus-shadow-rgb: 25, 135, 84;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #06786c;
  --bs-btn-active-border-color: #06786c;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #06786c;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #06786c;
  --bs-gradient: none;
}