body {
  background-color: lightblue;
}

h1 {
  color: navy;
  font-weight: 700;
  margin-left: 20px;  
}

.center {
  margin-left: auto;
  margin-right: auto;
}



/*!  Chris sample classes  */
/** NOTE: If you declare a class twice with the same name, class parameters will be combined */
/** If you declare a parameter twice in two classes with same, html code will always take the last declaration ignoring the previous ones. **/
/** In this case with "background-color:" declared twice in general body (at the top of the file and bellow) */

/* css variables to global usage */
:root {
  --binartis_blue: #014b90;
  --binartis_blue2: #014b90a0;
  --binartis_blue_link: #14b5d0;
  --binartis_darkgrey: #777777;


}

/* Links fromat */
a {
  color: var(--color-principal);
  text-decoration: none;
}

a:focus, a:hover {
  color: var(--color-link);
  text-decoration: none;
}

a:focus {
  outline: none;
}

.white_url a {
  color: white;
  text-decoration: none;
}

.white_url a:focus, .white_url a:hover {
  opacity: 0.8;
  text-decoration: none;
}

.white_url a:focus {
  outline: none;
  text-decoration: none;
}


/* Fonts */

@font-face {
  font-family: poppins_bolder;
  src: url(../fonts/poppins/Poppins-SemiBold.ttf);
}

@font-face {
  font-family: poppins_bold;
  src: url(../fonts/poppins/Poppins-Medium.ttf);
}

@font-face {
  font-family: poppins_regular;
  src: url(../fonts/poppins/Poppins-Light.ttf);
}

.poppins_regular{
  font-family: poppins_regular;
}

.poppins_bold{
  font-family: poppins_bold;
}

.poppins_bolder{
  font-family: poppins_bolder;
}

/* tables */

table td, table th {
  height: 30px;
  padding: 10px;
}


/* webpage */

html, body{
  overflow-x: hidden;
  background-color: rgb(231, 231, 231);
  height: 100%;
  margin: 0;
}

.page_container{
  color: var(--color-principal); /* Color del texto */
  min-height: 100vh; /* Altura mínima de la ventana */
  max-width: 1000px; /* Ancho máximo del contenedor */
  margin: 0 auto; /* Centrar horizontalmente */
  padding: 0 50px; /* Espaciado interno */
  background-color: white; /* Fondo blanco */
  box-sizing: border-box; /* Incluye el padding en el tamaño total */

}

.test_title{
  color: var(--color-principal);
  font-size: xx-large;
  padding-top: 50px;
}

.subtitle{
  color: var(--color-principal);
  font-size: 15px;
  padding-top: 50px;
}

.intable{
  color: var(--binartis_darkgrey);
  font-size: 15px;
  padding-top: 5px;
  vertical-align: center;
}

.test_question {
  color: var(--color-principal);
  font-size: 16px;
  height: 35px;
}

.button_inline{
  color: white !important;
  background-color: var(--color-button-bkg);
  border-radius: 7px;
  min-width: 240px;
  width: fit-content;
  height: 60px;
  font-size: 26px;
  margin: 0 auto;
  padding: 10px;
  border: none;
  display: inline-block;
}

.button_give_feedback{
  color: white !important;
  background-color: #aaaaaa;
  border-radius: 7px;
  min-width: 160px;
  width: fit-content;
  height: 40px;
  font-size: 18px;
  margin: 0 auto;
  padding: 10px;
  border: none;
  display: inline-block;
}

.button_answer{
  color: var(--color-button-txt) !important;
  background-color: var(--color-button-bkg);
  border-radius: 3px;
  min-width: 140px;
  width: fit-content;
  height: 30px;
  font-size: 15px;
  margin: 0 auto;
  padding: 5px;
  border: none;
  display: inline-block;
}

.general_title{
  font-size: larger;
}

.input_fields {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.width_300
{
  width: 300px;
}

/* Tools */

.hide_block{ /* Use javascript add_class, remove_class, or toogle to hide/unhide a html element */
  display: none;
}

/*! Feedback popup/modal */

.footer_container_aligned_right{
  display: flex;
  justify-content: flex-end; /* Alinea el contenido a la derecha */
  padding: 20px;
  /* Agrega un ancho si es necesario */
  width: 100%; /* o el ancho deseado */
  box-sizing: border-box; /* Asegúrate de que el padding no aumente el ancho total */
}

.text_aligned_right{
  text-align: right;
}

.center-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 9vh; /* Ajusta la altura según sea necesario */
}


/* -- START ALIGNED TABLE FOR RESULTS */
.aligned-table {
  width: 100%;
  border-collapse: collapse;
}
.aligned-table td {
  width: 100%;
  padding: 10px;
  text-align: left;
  font-family: Arial, sans-serif;
  font-size: 14px;
  word-wrap : break-word;
  overflow-wrap : break-word;
}
/* Define los anchos específicos para las columnas */
.column-1 {width: 40%;}
.column-2 {width: 10%;}
.column-3 {width: 40%;}
.spacer-column { width: 5%}


/* -- END ALIGNED TABLE FOR RESULTS */


/*! Responsive */
/** This is what "format levels" are. Webpage changes his own design based on rules, generally the width */


/* Override classes when width is under max definded with */
@media only screen and (max-width: 427px){

  .test_title {
    color: var(--color-principal);
    font-size: 20pt;
    margin-bottom: -10px;
    text-align: center;
  }

  .button_inline{
    width: 100% !important; /*! important override other rules no matter the case */
    min-width: 0px;
  }

  .input_fields {
    margin-bottom: 40px;
    width: 100% !important;
  }

  .general_title
  {
    text-align: center;
  }

  .lib_data{
    margin-top: 35px;
    text-align: left;
  }



}