﻿/******************* Diseño responsive **********************/

@media only screen and (min-width: 1280px) and (max-width: 1365px) {

	body{
		overflow-x: visible;
	}
	
	#header_container {
		/* background: yellow; */
	}
	
	#header {
		width: 1224px;
	}
	
	#navbar {
    	padding: 0 0px 5px;
	}
	
	#container {
		margin: 0 auto;
		padding: 0 0 10px 0;
		width: 1224px;
	}
	
	#container #column {
		width: 240px;
		margin-right: 10px;
	}
	
	#menu_tabs.fixed {
		width: 1224px;
	}	
	
	body.detail.maximize #menu_tabs.fixed{
		max-width: 1224px;
	}
	
	body.detail.maximize #header_object.fixed{
		max-width: 1204px;
	}
	
	#content {
		float: left;
		width: 970px;
	}
	
	#main fieldset input.size12 {
		width: 615px;
	}
	
	#main fieldset select.size12 {
		width: 623px;
	}
	
	.selectize-control.size12 {
		width: 623px;
	}
		

	#main .tabContent.tab_summary .left {
		width: calc(55% - 20px);
	}	
	
	/* Multiselect 3 tipos definidos, el que se ordena ya es responsive */
	
	.ui-multiselect div.selected {
		width: 280px !important;
	}
	
	.ui-multiselect div.available {
		width: 280px !important;
		margin: 0 0 0 320px !important;
	}
	
	.ui-separate {
		margin-left: 291px !important;
	}
	
	.compare-selector .select-left,
	#documentos #destino {		
		width: 280px !important;
	}
	
	.compare-selector .select-left-container .ui-widget-header,
	#documentos #destino_contenedor .ui-widget-header {
		width: 280px !important;
	}
	
	.compare-selector .select-right,
	#documentos #origen {		
		width: 280px !important;
		margin: 0 0 0 28px !important;
	}
	
	.compare-selector .select-right-container .ui-widget-header,
	#documentos #origen_contenedor .ui-widget-header {
		width: 280px !important;
		margin: 0 0 0 28px !important;
	}	
	
	.compare-selector .separa_documentos{
		margin-left: 286px !important;
	}	
	
	#documentos .ui-separate {
		margin-left: 291px !important;
	}		
}

@media only screen and (max-width: 1279px) and (min-width: 1230px) {
	body{
		overflow-x: hidden;
	}
	
	#header_container {
		/* background: red; */
	}
	
	#header {
		width: 100%;
	}
	
	#navbar {
		width: 100%;
		margin: 0 auto;
	}
	
	#container {
		width: 100%;
	}
	
	#container #column {
		width: 240px;
		margin-right: 10px;
	}
	
	#content {
		float: left;
		width: calc(100% - 252px);
	}
	
	body.detail.maximize #content {
		width: 100%;
	}
	 
	body.detail.maximize #menu_tabs, 
	body.detail.maximize #menu_tabs.fixed {
		width: 100%;
	}
	
	#sidebar {
		max-width: 230px;
		min-width: 230x;
		padding: 20px 2px 0px 15px;
	}
	
	#content #main {
		max-width: 100%;
	}
	
	#main fieldset input.size12 {
		width: 565px;
	}
	
	#main fieldset select.size12 {
		width: 573px;
	}
	
	.selectize-control.size12 {
		width: 573px;
	}
	
	#sidebar .links .description .mdi-eye:before {
		/* No nos interesa el visor en responsive */
		content: '';
	}	
	
	/* Multiselect 3 tipos definidos, el que se ordena ya es responsive */
	
	.ui-multiselect div.selected {
		width: 280px !important;
	}
	
	.ui-multiselect div.available {
		width: 280px !important;
		margin: 0 0 0 320px !important;
	}
	
	.ui-separate {
		margin-left: 291px !important;
	}
	
	.compare-selector .select-left,
	#documentos #destino {		
		width: 280px !important;
	}
	
	.compare-selector .select-left-container .ui-widget-header,
	#documentos #destino_contenedor .ui-widget-header {
		width: 280px !important;
	}
	
	.compare-selector .select-right,
	#documentos #origen {		
		width: 280px !important;
		margin: 0 0 0 28px !important;
	}
	
	.compare-selector .select-right-container .ui-widget-header,
	#documentos #origen_contenedor .ui-widget-header {
		width: 280px !important;
		margin: 0 0 0 28px !important;
	}	
	
	.compare-selector .separa_documentos{
		margin-left: 286px !important;
	}	
	
	#documentos .ui-separate {
		margin-left: 291px !important;
	}	
}

@media only screen and (max-width:1229px) {
	
	body{
		overflow-x: hidden;
	}
	
	#header_container {
		/*background: purple;*/
	}
	
	#header {
		width: 100%;
	}
	
	#navbar {
		width: 100%;
		margin: 0 auto;
		padding: 0 5px 5px 0;
	}
	
	#navbar ul.iconsRight ul li.maxmin{
		margin: 0 5px 0 0;
	}
	
	#navbar .showSidebar {
		display: block;
	}
	
	#container {
		margin: 0 auto;
		padding: 0 0 10px 0;
		width: 100%;
	}
	
	#container #column {
		width: 240px;
		margin-right: 10px;
	}
	
	#content {
		width: calc(100% - 252px);
		position: relative;
	}
	
	body.detail.maximize #content{
		width: 100% !important;
	}
	 
	body.detail.maximize #menu_tabs, 
	body.detail.maximize #menu_tabs.fixed{
		width: 100% !important;
	}
	
	body.detail.maximize #content,
	body.detail.maximize #menu_tabs,
	body.detail.maximize #menu_tabs.fixed {
		max-width: 1229px;
	}
	
	body.detail.maximize #header_object.fixed{
		max-width: 1229px;
		width: calc(100% - 25px) !important;
	}
	
	body.object_type_50 #content form #header_object {
		width: 100%;
	}
	
	#content #main {
		padding: 25px 10px;
		margin: 0 auto;
	}	
	
	body.locator.maximize #content #main,
	body.detail.maximize #content #main {
		max-width: 95%;	
	}
	
	#sidebar {
		position: absolute;
		border: 1px solid #d9d8d8;
		border-right: 0px;
	    top: -92px;
	    right: -10px;
		padding: 10px 10px 0px 10px;
		z-index: 667;
		box-shadow: -5px 2px 20px -14px rgba(0, 0, 0, 0.5);
		display: none;
		overflow: auto;
	}
	
	#sidebar .icons{
		margin-top: 0;
	}
	
	#sidebar .links .description .mdi-eye:before {
		/* No nos interesa el visor en responsive */
		content: '';
	}
}

@media only screen and (max-width:1010px) {
	
	body{
		overflow-x: hidden;
	}
	
	.ribbon {
		position: relative;
	    left: -5px;
	    top: -5px;
	    z-index: 665;
	}
	
	#login_contenedor .ribbon {
		position: fixed;
	    left: -5px;
	    top: -5px;
	    z-index: 665;
	}
	
	#header_container {
		/*background: maroon;*/
	}
	
	#navbar .showMainMenu {
		display: block;
	}
	
	#navbar .showSidebar {
		display: block;
	}
	
	#navbar li.maxmin {
		display: none !important;
	}
	
	#container #column {
		position: absolute;
		top: 118px;
		z-index: 668;
		box-shadow: 5px 2px 20px -14px rgba(0, 0, 0, 0.5);
		display: none;
	}
	
	#content {
		float: left;
    	width: 100%;
	}
	
	body.object_type_50 #navbar {
		display: table !important;
	}
	
	#widgetcontainer .widget0{
		border: 0;
	    border-top: 1px solid #d9d8d8;
	    border-bottom: 1px solid #d9d8d8;
	}	
	
	/***************************************/
	/**********MAXIMIZE RESPONSIVE**********/
	/***************************************/
	
	body.locator .mdi-menu {
		display: block;	
	}
	
	body.locator #content,
	body.locator #navbar {
		width: 100%;
		max-width: 1290px;	
	}
	
	body.locator #navbar .left {
		display: block;
	}
	
	body.locator #column {
		position: absolute;
		z-index: 668;
		box-shadow: 5px 2px 20px -14px rgba(0, 0, 0, 0.5);
		display: none;
	}
	
	body.locator #content #main,
	body.detail #content #main {
		max-width: 95%;	
	}
	
	body.detail #content {
		max-width: 1010px;
		width: 100% !important;	
	}
	
	body.detail #menu_tabs,
	body.detail #menu_tabs.fixed{
		max-width: 1010px;
		width: 100% !important;
		float: none;
	}
	
	body.detail #header_object {	
		max-width: 1280px;
		width: calc(100% - 25px) !important;	
		margin: 0 15px;
	}
	
	body.detail #header_object.fixed {
		max-width: 1260px;
	}
	 
	body.detail.maximize #menu_tabs, 
	body.detail.maximize #menu_tabs.fixed{
		width: 100% !important;
	}
	
	body.detail #container.maximize #sidebar {
		position: absolute;
		border: 1px solid #d9d8d8;
		border-right: 0;
		top: 118px;
		right: -266px;
		padding: 10px 10px 0;
		z-index: 667;
		box-shadow: -5px 2px 20px -14px rgba(0, 0, 0, 0.5);
		display: none;
		overflow: auto;
	}
	
	body.detail #column {
		position: absolute;
		display: none;	
		z-index: 667;	
	}
	
	#column #spanSearchMenu {
		margin-bottom: 0;
		border-top: 0;
		border-bottom: 0;
	}	
	
	#column #services {
		margin-bottom: 0px;
	}	
	
	.ztree {
		border-top: 0 !important;
	}	
}

@media only screen and (max-width:768px) {
	
	body {
		overflow-x: hidden;
	}

	#container {
		display: inline-block;
	}
	
	#header_container {
		/*background: orange;*/
	}
	
	#content {
		width: 100%;
	}
	
	#content #main {
		max-width: 700px;
		margin: 0;
	}
}

@media only screen and (max-width:700px) {
	
	body {
    	min-width: 700px;
		overflow-x: visible;
	}
	
	body.detail #menu_tabs.fixed{
		min-width: 700px !important;
	}
	
	body.detail #header_object.fixed{
		min-width: 680px !important;
	}
}