/**
 * Description: Hoja de estilos principal del proyecto Clickvisitas.
 * 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;
			}

		/* Menu
	       ========================================================================== */

		    .menu-image-container {
				margin:auto;
		    }

		    .menu-image-container img {
				padding:10px 0;
		    }

		    .menu {
		    	margin-bottom:25px;
		    }

		    .shadowed {
				-webkit-filter: drop-shadow(0px 0px 20px rgba(244,125,49,2));
				-moz-filter: drop-shadow(0px 0px 20px rgba(244,125,49,2));
				-ms-filter: drop-shadow(0px 0px 20px rgba(244,125,49,2));
				-o-filter: drop-shadow(0px 0px 20px rgba(244,125,49,2));
				filter: drop-shadow(0px 0px 20px rgba(244,125,49,2));
		    }

		    .zoomed {
		    	transform:scale(1.2);
		    }

		/* 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;
	       }

	       .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)
			}

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

		/* Modals
		   ========================================================================== */
			.modal-header {
				background-color:#0270a6;
				color:white;
				border-top-right-radius: 
			}

			.modal .close {
				color:white;
			}

		/* 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-turnstile {
		   		max-height:400px;
		   		height:400px;
		   		overflow-y: scroll;
		   		overflow-x: hidden;
			   }			

		/* Pagination
		   ========================================================================== */
		   .pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
		   		background-color:#026697;
		   }

		   .pagination>li>a, .pagination>li>span {
		   		background-color:#0270a6;
		   }

		   .pagination>.disabled>span, .pagination>.disabled>span:hover, .pagination>.disabled>span:focus, .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus {
		   		background-color:#0298E2;
		   }

		   .pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus {
		   		background-color:#FFFFFF;
		   		color:#000;
		   }

		/* 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%;
			}

		/* Errors
		   ========================================================================== */
		   .error404 img {
		   		margin:auto;
		   }

		/* Dashboard elements.
		   ========================================================================== */
			.dashboard-element {
				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
				font-size:18px;
				height:100px;
				vertical-align: middle;
			}

			.dashboard-element .number {
				font-size:50px;
			}

			.dashboard-info, .dashboard-icon {
				height:100px;
				line-height:100px;
			}

			.dashboard-info span, .dashboard-icon span {
				display: inline-block;
				vertical-align: middle;
				line-height: normal;
			}

			.dashboard-number {
				height:100px;
				line-height:100px;
				padding:5px;
			}

			.element-green {
				color:white;
				background-color:#1abc9c;
			}

			.element-red {
				color:white;
				background-color:#e74c3c;
			}

			.element-blue {
				color:white;
				background-color:#3498db;
			}

			.element-yellow {
				color:black;
				background-color:#f1c40f;
			}

			.element-purple {
				color:white;
				background-color:#9b59b6;
			}

			.element-brown {
				color:white;
				background-color:#34495e;
			}
}

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

	@media (min-width:321px) {

	    /* Navbar
	       ========================================================================== */

			.navbar-brand {
				padding:0px;
			}

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

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

			.logo {
				max-height:60px;
			}

		/* Menu
	       ========================================================================== */

		    .menu-image-container {
				margin:auto;
		    }

		    .menu-image-container img {
				padding:10px 0;
		    }

		    .menu {
		    	margin-bottom:25px;
		    }

		    .shadowed {
				-webkit-filter: drop-shadow(0px 0px 20px rgba(244,125,49,2));
				-moz-filter: drop-shadow(0px 0px 20px rgba(244,125,49,2));
				-ms-filter: drop-shadow(0px 0px 20px rgba(244,125,49,2));
				-o-filter: drop-shadow(0px 0px 20px rgba(244,125,49,2));
				filter: drop-shadow(0px 0px 20px rgba(244,125,49,2));
		    }

		    .zoomed {
		    	transform:scale(1.2);
		    }

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

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

			.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;
			}

			select.select-multiple {
				height:90px;
			}

	       .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;
			}

			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;
			}

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

			.td-image-col {
				max-width:125px;
				width:80px;
			}

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

			.turnstile-image {
				max-width:200px;
				margin:auto;
			}

		/* Modals
		   ========================================================================== */
			.modal-header {
				background-color:#0270a6;
				color:white;
				border-top-right-radius: 
			}

			.modal .close {
				color:white;
			}

		/* 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-turnstile > .panel-body {
		   		max-height:400px;
		   		overflow-y: scroll;
		   		overflow-x: hidden;
		   	}

		/* Pagination
		   ========================================================================== */
		   .pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
		   		background-color:#026697;
		   }

		   .pagination>li>a, .pagination>li>span {
		   		background-color:#0270a6;
		   }

		   .pagination>.disabled>span, .pagination>.disabled>span:hover, .pagination>.disabled>span:focus, .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus {
		   		background-color:#0298E2;
		   }

		   .pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus {
		   		background-color:#FFFFFF;
		   		color:#000;
		   }
		/* Positions job
		   ========================================================================== */
		   .position_free {
				background: #27ae60;
				margin-top: 1%;
				margin-right: 1%;
				width:200px;
				height:180px;
			}
			.position_bussi {
				background: #e74c3c;
				margin-top: 1%;
				margin-right: 1%;
				width:200px;
				height:180px;
			}
			/* End Positions job
		   ========================================================================== */

		/* Parking
		   ========================================================================== */
		   .parking {
		   		background: url('../img/general/parking_space.png') no-repeat center center;
		   		height:273px;
		   }

		   .parking p {
		   		color:white;
		   		margin-top:100%;
		   }

		   .parking span {
		   		color:white;
		   }

		   .parking-taken {
		   		background: url('../img/general/car.png') no-repeat center center;
		   		background-size:contain;
				margin-top:25%;   
				height:160px;
		   }

		   .parking-disabled {
				background: url('../img/general/parking_space_Blok.png') no-repeat center center;
				background-size:contain;
				margin-top:25%;   
		 		height:160px;
			}

		   .parking-no-taken {
		   		background-size:contain;
				margin-top:25%; 
				height:160px;
	   	    }	

		   .parking-company {
				background-color:white;
				border-radius:10px;
				font-weight: bold;
				padding:5px;
				margin: 2% 5% 2% 5%;
				width: 90%;
			}				   
			   
		   .parking-select-btn {
				background-color:#27ae60;
				border-color:#208F4F;
				font-size: 12px;
				height: 35px;
				padding: 5px 5px;
		   }

		   .parking-space-link, .parking-space-employee-link {
		   		background-color:white;
		   		border-radius:10px;
		   		font-weight: bold;
				padding:5px;
				margin: 0 5% 0 5%;
				width: 90%;
			}
			.parking-space-link, .parking-qr {
				background-color:white;
				border-radius:10px;
				font-weight: bold;
			 	padding:5px;
			 	margin: 0 5% 0 5%;
			 	width: 90%;
				 
		 }

		   .parking-space-type {
				max-height:25px;
				position:absolute;
				right:15%;
		   		top:5%;
		    }

		   .parking-space-record {
				max-height:25px;
				position:absolute;
				right:31%;
			    top:5%;
		   }

		   .parking-space-kind {
				max-height:25px;
				position:absolute;
				right:47%;
				top:5%;
		   }

		   .parking-space-delete {
				max-height:23px;
				position:absolute;
				right:75%;
				top:7%;
	   		}

			.parking-space-qr {
				height:0px;
				position:absolute;
				right:64%;
			    top:5%;
	        } 

		   .parking-space-heading {
				 max-height:20px;
		   }

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

		   .floor-row h4 {
				background-color: #e27c3a;
				border-radius: 10px;
				color: white;
				padding: 5px;
		   }

		   .parking-detail {
				background-color: white;
				border-radius: 10px;
				display:none;
				float: left;
				position: absolute;
				padding: 25px;
				width: 500px;
				z-index:9999;
		   }

		   .handicap {
				left: 50%;
		   	    max-height: 55px;
				top: 50px;
				transform: translate(-50%, 0);
				position: absolute;
		   }

		   .slick-prev {
				left:-19px!important;
		   }

		   .slick-next {
				right:-19px!important;
		   }

		   .slick-arrow:before {
				color:#0270A6!important;
		   }


		/* JobPosition
		   ========================================================================== */
		   .jobposition {
			margin-top: 4px;
			background: url('../img/general/job_position_emprty2.png') no-repeat center center;
			height:240px;
			}

			.jobposition h5 {
				color:white;
			}			
			.jobposition p {
					color:white;
					margin-top:100%;
			}

			.jobposition span {
					color:white;
			}

			.jobposition-taken {
				background: url('../img/general/EnUso.png') no-repeat center center;
				background-size:contain;
				margin-top:10%;   
				height:140px;
			}

			.jobposition-disabled {
				background: url('../img/general/disabled.png') no-repeat center center;
				background-size:contain;
				margin-top:10%;   
				height:140px;
			}

			.jobposition-no-taken {
				background: url('../img/general/libre.png') no-repeat center center;
				background-size:contain;
				margin-top:10%;   
				height:140px;
				}	

			.jobposition-qr {
				max-height:30px;
				position:absolute;
				right:31%;
				top:85%;
				}

			.jobposition-history {
				max-height:30px;
				position:absolute;
				right:12%;
				top:85%;
				}				
			.jobposition-free {
				max-height:30px;
				position:absolute;
				right:52%;
				top:85%;
				}				
	

				/*revisar si se mantendrán*/		

			.jobposition-company {
				background-color:white;
				border-radius:10px;
				font-weight: bold;
				padding:5px;
				margin: 2% 5% 2% 5%;
				width: 90%;
			}				   
				
			.jobposition-select-btn {
				background-color:#27ae60;
				border-color:#208F4F;
				font-size: 12px;
				height: 35px;
				padding: 5px 5px;
			}

			.jobposition-space-link, .jobposition-space-employee-link {
					background-color:white;
					border-radius:10px;
					font-weight: bold;
				padding:5px;
				margin: 0 5% 0 5%;
				width: 90%;
			}

			.jobposition-space-type {
				max-height:30px;
				position:absolute;
				right:11%;
					top:5%;
			}



			.jobposition-space-kind {
				max-height:30px;
				position:absolute;
				right:51%;
				top:5%;
			}

			.jobposition-space-delete {
				max-height:30px;
				position:absolute;
				right:71%;
				top:7%;
				}

			.jobposition-space-heading {
				max-height:30px;
			}

			
			.jobposition-detail {
				background-color: white;
				border-radius: 10px;
				display:none;
				float: left;
				position: absolute;
				padding: 25px;
				width: 500px;
				z-index:9999;
			}

		/* 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%;
			}

		/* Errors
		   ========================================================================== */
		   .error404 img {
		   		margin:auto;
		   }

		/* Dashboard elements.
		   ========================================================================== */
			.dashboard-element {
				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
				font-size:18px;
				height:100px;
				vertical-align: middle;
			}

			.dashboard-element .number {
				font-size:50px;
			}

			.dashboard-info, .dashboard-icon {
				height:100px;
				line-height:100px;
			}

			.dashboard-info span, .dashboard-icon span {
				display: inline-block;
				vertical-align: middle;
				line-height: normal;
			}

			.dashboard-number {
				height:100px;
				line-height:100px;
				padding:5px;
			}

			.element-green {
				color:white;
				background-color:#1abc9c;
			}

			.element-greent {
				color:black;
				background-color:#1abc9c;
			}			
			.element-green small {
				color:white;
			}

			.element-red {
				color:white;
				background-color:#e74c3c;
			}
			.element-redt {
				color:black;
				background-color:#e74c3c;
			}

			.element-red small {
				color:white;
			}

			.element-blue {
				color:white;
				background-color:#3498db;
			}

			.element-yellow {
				color:black;
				background-color:#f1c40f;
			}

			.element-purple {
				color:white;
				background-color:#9b59b6;
			}

			.element-brown {
				color:white;
				background-color:#34495e;
			}

			.element-orange {
				color:white;
				background-color:#e67e22;
			}
		/* Office
		   ========================================================================== */
		.office-element {
				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
				font-size:11px;
				width: 100px;
				height:40px;
				vertical-align: middle;
			}

			.office-element .number {
				font-size:10px;
			}

			.office-info {
				height:2px;
				line-height:2px;
			}

			.office-info span {
				display: inline-block;
				vertical-align: middle;
				line-height: normal;
			}

			.office-min-element {
				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
				font-size:11px;
				width: 98%;
				height:30px;
				vertical-align: middle;
			}
			.office-min-element .number {
				font-size:10px;
			}

			.office-min-info {
				height:2px;
				line-height:2px;
			}

			.office-min-info span {
				display: inline-block;
				vertical-align: middle;
				line-height: normal;
			}

			
		/* Buildings
		   ========================================================================== */
			.empty-buildings img {
				margin:auto;
				max-width:350px;
				width:350px;
			}

			.checkbox-days label {
				margin-right:30px;
			}

			.token {
				background-color: #f1c40f;
				padding: 10px;
				border-radius: 10px;
				color:white;
			}

		/* Wicked Picker Plugin
		   ========================================================================== */
		   .wickedpicker {
				z-index:9999;
			}

			.wickedpicker__title {
				background-color:#0270a6!important;
				color:white!important;
			}

		/* Entrance Validation
		   ========================================================================== */
		   .entrance-types img {
				max-width:65px;
				width:65px;
			    margin: 15px 0px;
		   }

		   ul.ui-autocomplete {
		   		z-index:9999;
		   }

		   .ui-menu .ui-menu-item-wrapper {
		   		display:block;
		   }

		   .employee-info img {
		   		max-width:200px;
		   		margin:auto;
		   }

		   .reserved-date h4 {
		   	    background-color: #27ae60;
				border-radius: 10px;
				color: white;
				padding: 5px;
		   }

		   .not-found h4 {
		   		background-color: #e74c3c;
				border-radius: 10px;
				color: white;
				padding: 25px;
		   }

		   .rut-search #search-btn {
				margin-top:22px;
		   }

		   .flag img {
				height:32px;
		   }

		   .title-with-background {
		   		padding:10px;
		   		border-radius:5px;
		   }

		   .validation-tabs li{
		   		width:33%;
		   		height:90px;
		   		border-color:rgb(236, 240, 241)!important;
		   	}

		   .validation-tabs a {
		   		height:90px;
		   		border-color:rgb(236, 240, 241)!important;
		   }

		   .validation-tabs img {
		   		max-width:45px;
				width:45px;
			    /*margin: 15px 0px;*/
		   }

		   .nav-tabs {
		   		border-bottom: none!important;
		   }

		   .visitant-picture {
			   max-width:220px;
			   margin-left:auto;
			   margin-right:auto;
		   }
	}

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

	@media (min-width:480px) {
		/* Dashboard elements.
		   ========================================================================== */
			.dashboard-element {
				font-size:18px;
				height:100px;
				vertical-align: middle;
			}

			.dashboard-element .number {
				font-size:50px;
			}

			.dashboard-info, .dashboard-icon {
				padding:0px 5px;
				height:100px;
				line-height:100px;
			}

			.dashboard-number {
				padding:0px;
				height:100px;
				line-height:100px;
			}

			.dashboard-info span, .dashboard-icon span, .dashboard-number span {
				display: inline-block;
				vertical-align: middle;
				line-height: normal;
			}
	}

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

	@media (min-width:691px) {
		/* Dashboard elements.
		   ========================================================================== */
			.dashboard-element {
				font-size:18px;
				height:100px;
				max-width:inherit;
				margin-left:inherit;
				vertical-align: middle;
			}

			.dashboard-element .number {
				font-size:50px;
			}

			.dashboard-info, .dashboard-icon {
				padding:0px 5px;
				height:100px;
				line-height:100px;
			}

			.dashboard-number {
				padding:0px;
				height:100px;
				line-height:100px;
			}

			.dashboard-info span, .dashboard-icon span, .dashboard-number span {
				display: inline-block;
				vertical-align: middle;
				line-height: normal;
			}
	}

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

	@media (min-width:992px) {
		/* Dashboard elements.
		   ========================================================================== */
			.dashboard-element {
				font-size:18px;
				height:100px;
				vertical-align: middle;
			}

			.dashboard-element .number {
				font-size:40px;
			}

			.dashboard-info, .dashboard-icon {
				padding:0px 5px;
				height:100px;
				line-height:100px;
			}

			.dashboard-number {
				padding:0px;
				height:100px;
				line-height:100px;
			}

			.dashboard-info span, .dashboard-icon span, .dashboard-number span {
				display: inline-block;
				vertical-align: middle;
				line-height: normal;
			}
	}

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

	@media (min-width:1200px) {

	}