@charset "ISO-8859-1";

html, body{
    height: 100%;
}

/*=======================================================*/
/*======================= modals ========================*/
/*=======================================================*/

/** Set a custom modal size 
@media (min-width: 992px) {
    .modal-dialog {
        max-width: 90%;
        max-height: 90%;
        width: 90%;
        height: 90%;
    }
}*/

/** Set modal to 90% */
.modal-90 {
    max-width: 90%;
    max-height: 90%;
    width: 90%;
    height: 90%; 
}

/** Set modal to 80% */
.modal-80 {
    max-width: 80%;
    max-height: 80%;
    width: 80%;
    height: 80%; 
}

/** Set modal to 70% */
.modal-70 {
    max-width: 70%;
    max-height: 70%;
    width: 70%;
    height: 70%; 
}

.modal-w70 {
    max-width: 70%;
    width: 70%;
}

.modal-w50 {
    max-width: 50%;
    width: 50%;
}


/* Adjust modal width to content */
/* https://stackoverflow.com/questions/34307647/bootstrap-modal-dynamic-width/52997035 */
/* �ltima respuesta */

.modal-dialog {
  position: relative;
  display: table;
  overflow: auto;
  width: auto;
  min-width: 300px;
}
.modal-body { /* Restrict Modal width to 90% */
  overflow-x: auto !important;
  max-width: 90vw !important;
}

/* .modal-dialog { Width
    max-width: 100%;
    width: auto !important;
    display: inline-block;
}

.modal {
    text-align: center;
}

.modal-dialog {
    text-align: left; you'll likely want this
    max-width: 100%;
    width: auto !important;
    display: inline-block;
} */


/*=======================================================*/
/*======================= pref ==========================*/
/*=======================================================*/


.full_width{
    width: 100%;
}

label{
	margin-bottom: 0px;
}


/*=======================================================*/
/*======================= catalog =======================*/
/*=======================================================*/

/** Custom the tabs */
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    width: 100%;
    text-align: center;
}

.ui-tabs .ui-tabs-nav li {
    width: 33%;
}

/* custom the table for main catalog */
.table_equal{
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

.table_equal td{
    padding: 5px;
    height: 100%;
}

.table_equal tr{
    height: 100%;
}

.bigb{
    width: 100%;
    height: 100%;
    white-space: normal;
}

#table_search { width: 100%; }
#table_search td {    
	text-align: center; 
	vertical-align: middle;
}

/*====================================================*/
/*======================= text =======================*/
/*====================================================*/

#text_frame{
	position: relative;
    width: 100%;
    height: 200px;  
    border: 1px solid black;
}

#text_wrap{
	display: flex;
    position: absolute;
    width: 100%;
    overflow: hidden;
}

#text_test{
	white-space: pre;
    width: fit-content;
}

#text_title{
    width: 100%;
}



/*====================================================*/
/*======================= time =======================*/
/*====================================================*/

.modal-corner {
   position: absolute;
   top: 0px;
   right: 0px;
   font-size: 100%;
}

.modal-corner .modal-body{
	   padding: 0.2rem;
}

.modal-corner .modal-footer{
       padding: 0.2rem;
}

/*====================================================*/
/*==================== settings ======================*/
/*====================================================*/

.ctr_input {
	padding: 0px;
}

/*====================================================*/
/*==================== datatables=====================*/
/*====================================================*/

.columna-ajustada {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 35vw;  /* la columna ocupa hasta el 30% del ancho de la ventana */
    display: inline-block;
    vertical-align: middle;
}