/**
 * Description: Hoja de estilos principal del proyecto Clickbox.
 * Version: 1.0.0
 * Author: German Acosta
 */

/* ==========================================================================
   Para dispositivos cuya resolución no es mayor a 320px en Width
   ========================================================================== */

	@media (max-width:320px) {
		/* Navbar
	       ========================================================================== */

			.navbar-brand {
				padding:0px;
			}

			.navbar-default {
				background-color:#0270a6;
			}

			.logo {
				max-height:60px;
			}


		/* General styles.
		   ========================================================================== */
			
			html {
				/*position:relative;*/
			}

			body {
				font-size:14px;
				background-color:#ecf0f1;
			}

	       a {
	       		color:#e27c3a;
	       }

	       a:hover {
		       	color:#e27c3a;
	       }

	       .btn {
	       		font-size:14px;
	       		padding:7px 7px;
	       		height:40px;
	       }

	       .form-control {
	       		height:40px;
	       		font-size:14px;
	       }

	       select.form-control {
	       		height:40px;
	       }

	       .form-control:focus {
	       		border-color:#0270A6;
	       }

	       .btn-primary {
	       		background-color:#0270a6;
	       		border-color:#02689A;
	       }

	       .btn-primary:hover {
	       		background-color:#026697;
	       }

	       .rut-search .input-group-btn:last-child >.btn, .rut-search .input-group-btn:last-child >.btn-group {
	       		margin-top:25px;
	       }

	       .greyed-out {
	       		opacity: 0.4;
    			filter: alpha(opacity=40); /* msie */
    			cursor:not-allowed;
	       }

		/* Footer
		   ========================================================================== */
			html,
			body {
				height: 100%;
			}

			.content {
				min-height: 100%;
				height: auto;
				margin: 0 auto -50px;
				padding: 0 0 100px;
			}

			#footer {  
				background-color:#0270a6;
				color: #ffffff;
				width: 100%;
			}
	}

/* ==========================================================================
   Para dispositivos cuya resolución es al menos 321px en Width (Xtra Small - XS)
   ========================================================================== */

	@media (min-width:321px) {
		/* Navbar
	       ========================================================================== */

			.navbar {
				min-height: 60px;
			}

			.navbar-collapse {
				min-height:60px;
			}

			.navbar-brand {
				padding:0px;
			}

			.navbar-default {
				/*background-color:#0270a6;*/
			}

			.nav-tabs {
				margin-bottom:20px;
			}

			.logo {
				max-height:60px;
			}


		/* General styles.
		   ========================================================================== */
			
			html {
				/*position:relative;*/
			}

			body {
				font-size:14px;
				background-color:#ecf0f1;
				/*background:url('../img/general/pattern.png') repeat;*/
			}

			.error-container {
				display: flex;
				justify-content: center;
			}

			.error-container > .error404 {
				align-self: center;
			}

       		a {
	       		color:#e27c3a;
	       	}

	       a:hover {
		       	color:#e27c3a;
	       }

	       .btn {
	       		font-size:14px;
	       		height:40px;
	       		padding:7px 7px;
	       }

	       .btn-left-margin {
	       		margin-left:5px;
	       }

	      	.input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group {
				height:38px;
	       }

      	 	.form-control {
	       		height:40px;
	       		font-size:14px;
	       	}

	       	select.form-control {
	       		height:40px;
	       	}

	       	.form-control:focus {
	       		/*border-color:#0270A6;*/
	       	}

	       	.btn-primary {
	       		/*background-color:#0270a6;*/
	       		/*border-color:#02689A;*/
	       }

	       	.btn-primary:hover {
	       		/*background-color:#026697;*/
	       	}

	       	.rut-search .input-group-btn:last-child >.btn, .rut-search .input-group-btn:last-child >.btn-group {
	       		margin-top:25px;
	       	}

	       	.greyed-out {
	       		opacity: 0.4;
    			filter: alpha(opacity=40); /* msie */
    			cursor:not-allowed;
	       	}

	       	.panel-acl label {
	       		padding:0px 15px;
	       	}

	       	.action-col {
	       		max-width:30px;
	       		width:30px;
	       	}

	       .ajax-loader {
				cursor: wait;
				background:#ffffff url('../img/general/loader.gif') no-repeat center center;
				background-color:#FFF;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
				filter: alpha(opacity=75);
				opacity: 0.75;
				position: fixed;
				left: 0px;
				top: 0px;
				width: 100%;
				height: 100%;
				z-index: 9999;
				display:none;
			}

			.ajax-loader div {
				position:absolute;
				top:calc(43% - 90px)
			}

			.separator {
				margin-bottom:50px;
			}

			.separator-md {
				margin-bottom:25px;
			}

			hr.reduced {
				margin-top:5px;
				margin-bottom:10px;
			}

			.empty-column {
				border:1px dashed #CCC;
				border-radius:10px;
				color:#CCC;
				padding:30px 0;
				font-style:italic;
			}

			.empty-column-small {
				border:1px dashed #CCC;
				border-radius:10px;
				color:#CCC;
				padding:5px 0;
				font-style:italic;	
			}

			.empty-column-row {
				margin-left:0px;
				margin-right:0px;
			}

			.non-labeled-margin {
				margin-top:25px;
			}

			.image-not-available {
				max-height:200px;
				margin:auto;
			}

			.file-type-icon {
				max-height:24px;
			}

			.btn-margin-up {
				margin-top:24px;
			}

			.panel-left-title {
				color:#CCCCCC;
			}

			.panel-left-title img {
				margin:auto;
				max-height:70px;
			}

			.td-image-col img {
				max-height:80px;
				margin:auto;
			}

			input[type="radio"] {
				margin-right:5px;
				margin-left:5px;
			}

		/* Panels
	      ========================================================================== */
			.panel-heading {
				padding:2px 15px;
			}

			.panel {
				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		   	}

		   	.panel-heading h4 a {
		   		color:white;
		   		font-style:italic;
		   	}

		/* Footer
		   ========================================================================== */
			html,
			body {
				height: 100%;
			}

			.content {
				min-height: 100%;
				height: auto;
				margin: 0 auto -50px;
				padding: 0 0 100px;
			}

			#footer {  
				background-color:#333333;
				color: #ffffff;
				width: 100%;
			}
		/* Menu
	       ========================================================================== */
			.menu-item {
				background-color:#333333;
				border:1px solid white;
				color:white;
				padding:5px 0px;
			}

			.menu-item a {
				color:white;
			}

			.menu-item i {
				margin-bottom:5px;
			}

			.menu-selected {
				background-color:#008cba;
			}

		/* Image Container
		   ========================================================================== */
		   .image-container {
				position:relative;
				padding-bottom:50%;
				width:100%;
		   }

		   .image-container > div {
				position:absolute;
				height:100%;
				width:100%;
		   }

		   .image-container > div > img {
				position:absolute;
				top:0;
				right:0;
				bottom:0;
				left:0;
				max-height:130px;
				margin:auto;
		   }

		   .building-logo-image-container {
				position:relative;
				padding-bottom:50%;
				width:100%;
		   }

		   .building-logo-image-container > div {
				position:absolute;
				height:100%;
				width:100%;
		   }

		   .building-logo-image-container > div > img {
				position:absolute;
				top:0;
				right:0;
				bottom:0;
				left:0;
				max-height:120px;
				margin:auto;
		   }

		   .remove-image {
		   		/*background:url('../img/actions/close.png') center center no-repeat;*/
		   		position:absolute;
		   		right:10px;
		   }

		   .remove-edit-image-container {
		   		position: absolute;
				right: 10px;
				z-index: 9999;
		   }

		   .file-icon {
				max-height:32px;
		   }

		   .gray-image {
				-webkit-filter: grayscale(100%);
				-moz-filter: grayscale(100%);
				-o-filter: grayscale(100%);
				-ms-filter: grayscale(100%);
				filter: grayscale(100%); 
		   }

		/* Colores para los status de las cotizaciones
		   ========================================================================== */

		   .preparacion {
				background:#e67e22;
				color:white;
		   }

		   .cotizado {
		   		background:#2980b9;
		   		color:white;
		   }

		   .finalizado {
		   		background:#27ae60;
		   		color:white;
		   }

		   .no_aprobado {
		   		background:#c0392b;
		   		color:white;
		   }

		   .descartado {
		   		background:#95a5a6;
		   		color:white;
		   }

		   .aprobado {
		   		background:#2c3e50;
		   		color:white;
		   }

		/* Cotizaciones
		   ========================================================================== */
		   .td-title {
				max-width:250px;
				width:250px;
			}

			.table-row-title {
				background:#333333;
				color:white;
			}

			.status-badge {
				border-radius:10px;
				font-weight: bold;
				font-size:20px;
				padding:6px;
			}

		/* Error page
		   ========================================================================== */
		   .error-image-container {
				margin-top:50%;
		   }

		   .error-image-container img {
				margin:auto;
				padding:15px 0;
		   }

		   .error-message {
		   		margin-bottom:-110px;
		   }
	}

/* ==========================================================================
   Para dispositivos cuya resolución es al menos 480px en Width
   ========================================================================== */

	@media (min-width:480px) {

		/* Image Container
		   ========================================================================== */
		   .image-container {
				position:relative;
				padding-bottom:50%;
				width:100%;
		   }

		   .image-container > div {
				position:absolute;
				height:100%;
				width:100%;
		   }

		   .image-container > div > img {
				position:absolute;
				top:0;
				right:0;
				bottom:0;
				left:0;
				max-height:230px;
				margin:auto;
		   }

		   .building-logo-image-container {
				position:relative;
				padding-bottom:50%;
				width:100%;
		   }

		   .building-logo-image-container > div {
				position:absolute;
				height:100%;
				width:100%;
		   }

		   .building-logo-image-container > div > img {
				position:absolute;
				top:0;
				right:0;
				bottom:0;
				left:0;
				max-height:180px;
				margin:auto;
		   }

		/* Error page
		   ========================================================================== */
		   .error-image-container {
				margin-top:35%;
		   }

		   .error-image-container img {
				margin:auto;
				padding:15px 0;
		   }
		
	}

/* ==========================================================================
   Para dispositivos cuya resolución es al menos 768px en Width (Small - SM)
   ========================================================================== */

	@media (min-width:691px) {
		/* Image Container
		   ========================================================================== */
		   .image-container {
				position:relative;
				padding-bottom:45%;
				width:100%;
		   }

		   .image-container > div {
				position:absolute;
				height:100%;
				width:100%;
		   }

		   .image-container > div > img {
				position:absolute;
				top:0;
				right:0;
				bottom:0;
				left:0;
				max-height:260px;
				margin:auto;
		   }

		   .building-logo-image-container {
				position:relative;
				padding-bottom:50%;
				width:100%;
		   }

		   .building-logo-image-container > div {
				position:absolute;
				height:100%;
				width:100%;
		   }

		   .building-logo-image-container > div > img {
				position:absolute;
				top:0;
				right:0;
				bottom:0;
				left:0;
				max-height:285px;
				margin:auto;
		   }

		/* Error page
		   ========================================================================== */
		   .error-image-container {
				margin-top:30%;
		   }

		   .error-image-container img {
				margin:auto;
				padding:15px 0;
		   }
	}

/* ==========================================================================
   Para dispositivos cuya resolución es al menos 768px en Width (Small - SM)
   ========================================================================== */

	@media (min-width:768px) {
		/* Image Container
		   ========================================================================== */
		   .image-container {
				position:relative;
				padding-bottom:45%;
				width:100%;
		   }

		   .image-container > div {
				position:absolute;
				height:100%;
				width:100%;
		   }

		   .image-container > div > img {
				position:absolute;
				top:0;
				right:0;
				bottom:0;
				left:0;
				max-height:135px;
				margin:auto;
		   }

		   .building-logo-image-container {
				position:relative;
				padding-bottom:50%;
				width:100%;
		   }

		   .building-logo-image-container > div {
				position:absolute;
				height:100%;
				width:100%;
		   }

		   .building-logo-image-container > div > img {
				position:absolute;
				top:0;
				right:0;
				bottom:0;
				left:0;
				max-height:320px;
				margin:auto;
		   }

		/* Error page
		   ========================================================================== */
		   .error-image-container {
				margin-top:30%;
		   }

		   .error-image-container img {
				margin:auto;
				padding:15px 0;
		   }
	}

/* ==========================================================================
   Para dispositivos cuya resolución es al menos 992px en Width (Medium - MD)
   ========================================================================== */

	@media (min-width:992px) {

		/* General styles.
		   ========================================================================== */
			.vertical-line-right {
				border-right:1px solid #e5e5e5;
			}

			.vertical-line-left {
				border-left:1px solid #e5e5e5;
			}

		/* Image Container
		   ========================================================================== */
		   .image-container {
				position:relative;
				padding-bottom:70%;
				width:100%;
		   }

		   .image-container > div {
				position:absolute;
				height:170%;
				width:100%;
		   }

		   .image-container > div > img {
				position:absolute;
				top:0;
				right:0;
				bottom:0;
				left:0;
				max-height:250px;
				margin:auto;
		   }

		   .building-logo-image-container {
				position:relative;
				padding-bottom:50%;
				width:100%;
		   }

		   .building-logo-image-container > div {
				position:absolute;
				height:250%;
				width:100%;
		   }

		   .building-logo-image-container > div > img {
				position:absolute;
				top:0;
				right:0;
				bottom:0;
				left:0;
				max-height:120px;
				margin:auto;
		   }

		/* Error page
		   ========================================================================== */
		   .error-image-container {
				margin-top:15%;
		   }

		   .error-image-container img {
				margin:auto;
				padding:15px 0;
		   }
	}

/* ==========================================================================
   Para dispositivos cuya resolución es al menos 1200px en Width (Large - LG)
   ========================================================================== */

	@media (min-width:1200px) {
		/* Image Container
		   ========================================================================== */
		   .image-container {
				position:relative;
				padding-bottom:70%;
				width:100%;
		   }

		   .image-container > div {
				position:absolute;
				height:170%;
				width:100%;
		   }

		   .image-container > div > img {
				position:absolute;
				top:0;
				right:0;
				bottom:0;
				left:0;
				max-height:250px;
				margin:auto;
		   }

		   .building-logo-image-container {
				position:relative;
				padding-bottom:50%;
				width:100%;
		   }

		   .building-logo-image-container > div {
				position:absolute;
				height:250%;
				width:100%;
		   }

		   .building-logo-image-container > div > img {
				position:absolute;
				top:0;
				right:0;
				bottom:0;
				left:0;
				max-height:120px;
				margin:auto;
		   }

		/* Error page
		   ========================================================================== */
		   .error-image-container {
				margin-top:15%;
		   }

		   .error-image-container img {
				margin:auto;
				padding:15px 0;
		   }
	}