/*! crud-responsive.css v1.0.0 | MIT License | onesoftperu.com/erp/public/styles/crud.css */

/*
 * Especificaciones de disenio al CRUD responsive.
 * ===============================================
 */

/** 
 * movil-portrait hasta movil-landscape:
 * Cuando el ancho de la pantalla tenga un ancho menor o igual a 767px
 */
 @media all and (max-width: 767px) {
	.col-25,
	.col-40,
	.col-50,
	.col-60, 
  	.col-75,
  	.col-100, 
  	.frm-container input[type=submit], 
  	.frm-container input[type=button] {
    	width: 100%;
    	margin-top: 0;
	}
	  
	/* Cuadro de texto de búsqueda en el catálogo */
	.frm-container input[type=text].catalogo-txt-search {
		max-width: 70%;
  	}
	
	.div-modal {
		width: 100%;
	}

	/*
	 * mostrar video
	 */
	.col-video {
		width: 100%;
	}
	.col-video iframe {
		height: 200px;
	}

	/* Hacer que las dos columnas se apilen una sobre otra 
 	 * en lugar de una al lado de la otra 
 	 */
	/* Force table to not be like tables anymore */
	.table-list{
		border: 1px solid var(--table-list-td-border);
		font-size: .8rem;
	}
	.table-list table, .table-list thead, 
	.table-list tbody, .table-list th, 
	.table-list td, .table-list tr { 
		display: block;
		text-align: left; 
	}
		
	/* Hide table headers (but not display: none;, for accessibility) */
	.table-list thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
		
	.table-list tr { 
		/*border: 1px solid #ccc;*/
		/*border: 1px solid var(--table-list-tr-border);*/ 
	}
		
	.table-list td { 
		/* Behave  like a "row" */
		border: none;
		/*border-bottom: 1px solid #eee;*/
		/*border: 1px solid var(--table-list-td-border);*/
		position: relative;
		padding-left: 30%;
		/*padding-left: 5px;*/
	}

	.table-list .text-align-left { 
		/* Alinear texto a la izquierda */
		text-align: left;
	}

	.table-list .text-align-center { 
		/* Alinear texto a la izquierda */
		text-align: center;
	}

	.table-list .text-align-right { 
		/* Alinear texto a la derecha */
		text-align: right;
		font-weight: bold;
		font-size: 1rem;
	}
		
	.table-list td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		/*width: 1px;*/ 
		padding-right: 10px; 
		white-space: nowrap;
		font-weight: bold;
	}

	/* Hacer que las dos columnas se apilen una sobre otra 
 	 * en lugar de una al lado de la otra 
 	 */
	/* Force table to not be like tables anymore */
	.table-list-detail table, .table-list-detail thead, 
	.table-list-detail tbody, .table-list-detail th, 
	.table-list-detail td, .table-list-detail tr { 
		display: block;
		text-align: left;
	}
		
	/* Hide table headers (but not display: none;, for accessibility) */
	.table-list-detail thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
		
	.table-list-detail tr { 
		/*border: 1px solid #ccc;*/
		/*border: 1px solid var(--table-list-tr-border);*/ 
	}
		
	.table-list-detail td { 
		/* Behave  like a "row" */
		border: none;
		/*border-bottom: 1px solid #eee;*/
		border: 1px solid var(--table-list-td-border);
		position: relative;
		padding-left: 50%; 
	}
		
	.table-list-detail td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		font-weight: bold;
	}

	/*
	 * Objects form
	 */
	.frm-container select {
		width: 100%;
		max-width: 100%;
	}

}


/** 
  * tablet-portrait hasta tablet-landscape:
  * Cuando el ancho de la pantalla tenga un ancho mayor o igual a 768px
  * y un ancho menor o igual a 1023px
*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1023px) {
	/*
	 * mostrar video
	 */
	.col-video {
		width: 75%;
	}
	
	.col-video iframe {
		height: 250px;
	}

	/* Cuadro de texto de búsqueda en el catálogo */
	.frm-container input[type=text].catalogo-txt-search {
		max-width: 60%;
  	}
}
	
/** 
  * desktop:
  * Cuando el ancho de la pantalla tenga un ancho mayor o igual a 1024px
 */
@media all and (min-width: 1024px) {
	/*
	 * mostrar video
	 */
	.col-video {
		width: 50%;
	}
	
	.col-video iframe {
		height: 300px;
	}

	/* Cuadro de texto de búsqueda en el catálogo */
	.frm-container input[type=text].catalogo-txt-search {
		max-width: 50%;
  	}
}

/* 
 * Gallery of Catalog 
 */

@media all and (min-width: 768px) {
	#gallery_img {
		grid-template-columns: repeat(4, 1fr);
	}
} 
@media all and (min-width: 426px) and (max-width: 767px) {
	#gallery_img {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media all and (max-width: 425px) {
	#gallery_img {
		grid-template-columns: repeat(2, 1fr);
	}
}