/*
	Estilos epeciales para el proyecto : Josmar
	Elaborado por: Natsumi Franco
	Fecha: Septiembre 2017
	Edición: Septiembre 2017
	
		A) General
		B) Catalogos
		C) Solicitudes / Tickets
		D) Reportes
		E) Clientes
		F) Folios
		G) Usuarios

*/

/* A) General */
.row_option_btn i {
			display: block !important;
			color: #fff !important;
			font-size: 1.5em;
		}	
	
	@media (min-width:100px) and (max-width:750px) {
		.row_option_btn i { font-size: 1em; left: initial; right: 5px; }
		.row_option_btn { font-size: .8em !important; }
	}
	
.crumb_nav_option {
		background-color: #05f0d0;
		border-radius: 50px;
		text-align: center;
		padding: 10px 15px;
		font-size: .8em;
		cursor: pointer;
		color: #fff;
	}
	.crumb_nav_option i { vertical-align: middle; }
	
.flex_catalog {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content:center;
		align-content: flex-start;
	}

.cursor_pointer { cursor: pointer; }

.lowercase { text-transform: lowercase; }


#submenu_manage {
		margin: 0px auto;
		text-align: right;
		width: 90%;
	}
	.btn_menu_manage {
			border: solid 1px #00498e;
			display: inline-block;
			cursor: pointer;
			color: #1d83cb;
			padding: 10px;
			margin: 10px;
		}

/* Summary */
.summary_container {
		background-color: rgba(242,242,242,.95);
		padding-bottom: 20px;
		position: relative;
		margin: 20px auto;
		text-align: left;
		max-width: 90%;
		display: block;
		width: 100%;
	}
	.summary_header {
			background-color: #00498e;
			box-sizing: border-box;
			padding: 15px 10px;
			text-align: left;
			font-size: 1.3em;
			display: block;
			color: #fff;
			width: 100%;
		}
		.summary_header .this_close { height: initial; width: initial; color: #FFFFFF; }
	
	.summary_content {
			margin: 20px auto;
			display: block;
			width: 95%;
		}

	.summary_gallery { margin: 10px; width: 300px; }

/* Summary tickets */
#ticket_summary {
		background-color: #FFFFFF;
		padding-bottom: 30px;
		margin: 100px auto;
		position: relative;
		padding: 10px;
		width: 500px;
	}
	#ticket_summary_header {
			background-color: #00498e;
			box-sizing: border-box;
			height: 100px;
			width: 100%;
		}
		#ticket_summary_header img { margin: 15px; width: 80px; }
		
		#ticket_summary_header .this_close {
				border-radius: 50%;
				position: absolute;
				color: #ffffff;
				height: initial;
				width: initial;
				padding: 20px;
				right: 0px;
				top: 0px;
			}
	
	#ticket_summary_title {
			text-align: center;
			margin: 0px auto;
			margin-top: -50px;
			width: 300px;
		}
		#ticket_summary_photo {
				background-repeat: no-repeat;
				background-position: center;
				background-color: #ffffff;
				box-sizing: border-box;
				background-size: 70%;	
				vertical-align: top;
				border-radius: 50%;
				margin: 0px auto;
				display: block;
				height: 100px;
				width: 100px;
			}
			
		#ticket_summary_title sub { color: #3a3a3a; }
		#ticket_summary_title p { font-size: 1.1em; color: #7b7b7b; }
		
	.ticket_summary_sep {
			background-color: #cfe4e1;
			margin-bottom: 25px;
			border: none;
			height: 1px;
			width: 100%;
		}
	.ticket_summary_sub { display: block; font-size: .8em; color: #656565; }
	.ticket_summary_p { color: #0081c6; }
	
	.ticket_summary_duo {
			display: inline-block;
			position: relative;
			margin-right: 3%;
			width: 45%;	
		}
		.ticket_summary_duo .tooltip { position: absolute; right: 0px; top: 15px; }

	.ticket_summary_img {
			margin: 10px auto;
			display: block;
			width: 80%;
		}

/* Mini summary */
	#min_summary {
		background-color: #FFFFFF;
		padding-bottom: 30px;
		margin: 100px auto;
		position: relative;
		padding: 10px;
		width: 500px;
	}
	#min_summary_header {
			background-color: #00498e;
			box-sizing: border-box;
			text-align: center;
			padding: 20px;
			width: 100%;
		}
		
		#min_summary_header p {
				font-size: 1.1em;
				color: #fff;	
			}
		
		#min_summary_header sub { color: #aec9ff; }
		
		#min_summary_header .this_close {
				border-radius: 50%;
				position: absolute;
				padding: 16px 20px;
				color: #ffffff;
				height: initial;
				width: initial;
				right: 10px;
				top: 10px;
			}	

	#min_summary_content { text-align: left; }
		#min_summary_content p {
				display: block;
				color: #777777;
				margin: 20px;
			}
			#min_summary_content p span { color: #22a94d; }
			
	
	
	@media (min-width:100px) and (max-width:600px) { #min_summary { width: 80%; } }
 
/* B) Catalogos */	
.catalog_container {
		border: #d3d9e7 1px solid;
		display: inline-block;
		border-radius: 10px;
		vertical-align: top;
		position: relative;
		padding: 20px;
		height: 350px;
		margin: 10px; 
		width: 25%;  
	}	
	.catalog_container_item { overflow: auto; height: 250px; }
		.catalog_container h3 { font-family: 'montserratregular'; margin: 20px 0px; text-align: center; }	
		.catalog_container .catalog_item { border-radius: 10px; line-height: 2.5; cursor: pointer; color: #555555; }	
			.catalog_container .catalog_item span { margin-right: 20px; margin-left: 20px; color: #b7b7b7; }	
			.catalog_container .catalog_item i { margin-right: 10px; margin-left: 10px; color: #1ead9a; }
			
		.catalog_container .catalog_item:hover { background-color: #6CA4D9; color: #FFFFFF; }
			.catalog_container .catalog_item:hover span { color: #FFFFFF; }
			.catalog_container .catalog_item:hover i { color: #FFFFFF; }
			
		.catalog_container .catalog_item_check { background-color: #6CA4D9; color: #FFFFFF; }
			.catalog_container .catalog_item_check span { color: #FFFFFF; }
			.catalog_container .catalog_item_check i { color: #FFFFFF; }
	
	.catalog_btn_add {
			transform: translateX(-50%);
			background-color: #00498e;
			border-radius: 50px;
			padding: 10px 20px;
			text-align: center;
			position: absolute;
			margin: 0px auto;
			cursor: pointer;
			display: block;
			color: #FFFFFF;
			width: 200px;
			bottom: 10px;
			left: 50%;
		}
		.catalog_btn_add i { vertical-align: middle; }
		
#catalog_options {
		background-color: #FFFFFF;
		padding-bottom: 30px;
		margin: 100px auto;
		position: relative;
		padding: 10px;
		width: 500px;
	}
	#catalog_options_header {
			background-color: #6CA4D9;
			box-sizing: border-box;
			text-align: center;
			padding: 20px;
			width: 100%;
		}
		
		#catalog_options_header p {
				font-size: 1.1em;
				color: #fff;	
			}
		
		#catalog_options_header sub {
				font-family: 'montserratregular';
				color: #08436d;
			}
		
		
		#catalog_options_header .this_close {
				border-radius: 50%;
				position: absolute;
				padding: 16px 20px;
				color: #d63636;
				height: initial;
				width: initial;
				right: 0px;
				top: 0px;
			}	

	#catalog_description { text-align: left; margin: 20px auto; width: 80%; }

	#catalog_options_menu { text-align: center; }
		.catalog_options_btn {
			    display: inline-block;
				vertical-align: top;
				color: #08436d;
				cursor: pointer;
				margin: 20px;
			}
			
	
	@media (min-width:990px) and (max-width:1280px) {
		.catalog_container { width: 40%; }
	}
		
	@media (min-width:100px) and (max-width:990px) {
		.catalog_container { margin: 20px auto; display: block; width: 80%; }
	}	
	
	@media (min-width:100px) and (max-width:600px) {		
		#catalog_options { width: 80%; }
		.catalog_options_btn {
				border-bottom: #b5b5b5 solid 1px;
				padding: 30px 0px;
				display: block;
			}
			.catalog_options_btn:last-child { border: none; }
	}	
	
/* C) Solicitudes / Tickets */

.request_folio {
	    font-family: 'montserratregular';
		position: absolute;
		font-size: 1.3em;
		color: #00498e;
		right: 10px;
		top: 8px;
	}

.st_ticket_column { flex: 1 1 150px !important; }
	.st_ticket_column i {
			position: initial !important;
			margin: 0px auto;
			display: block;
		}

.st_ticket_100 { flex: 1 1 150px !important; }

.request_options_btn { background-color: #6ca4d8; color: #FFF !important; flex-direction: column; cursor: pointer; }
	.request_options_btn i { display: block !important; color: #fff !important; }

.request0 { background-color: #6ca4d8; }
.request1 { background-color: #d8c16c; }
.request2 { background-color: #8cd86c; }
.request3 { background-color: #6cd8c4; }
.request4 { background-color: #d86c6c; }
.request5 { background-color: #1E8A21; }
.request6 { background-color: #25a5ff; }
	
/* D) Reportes */

#report_search_content { text-align: center; margin: 20px 0px; }

	#report_search_options {
			vertical-align: middle;
			box-sizing: border-box;
			display: inline-block;
			padding: 23px 10px;
			margin: 20px 0px;
			height: auto;
		}	
		#report_search_content label.label_spry {
				font-family: 'montserratlight';
				font-size: .8em;
				color: #515175;
			}

		#report_search_content .aTextField {
				border: #57678d 1px double !important;
				font-family: 'montserratlight';
				border-radius: 20px;
				color: #57678d;
			}

		#report_search_content .aSelect {
				border: #57678d 1px double !important;
				font-family: 'montserratlight';
				background-image: none;
				border-radius: 20px;
				color: #57678d;
			}

		#report_search_content .date_calendar { color: #57678d; right: 15px; top: 52%; }	

	#filter_content .input_section { margin: 15px 0px !important; }

		#report_search_content .report_search_btn {
				background-color: #4b96dc;
				display: inline-block;
				border-radius: 50px;
				vertical-align: top;
				padding: 10px 13px;
				cursor: pointer;
				color: #fff;
			}

.report_colum { flex: 1 1 100px !important; }
.report_icon { display: block !important; color: #1c84ca !important; font-size: 1.4em; }
.st_column_direction { flex-direction: column !important; }

.report_container { margin: 20px auto; overflow: auto; width: 90%; }
	#report_week_ow { border-radius: initial !important; margin: 0px !important; min-width: 1500px; max-width: 1500px; }
	#report_week_sv { border-radius: initial !important; margin: 0px !important; min-width: 2800px; max-width: 2800px; }

#report_intro { margin: 20px auto; width: 90%; }
	#report_intro p { text-align: left; color: #626262; }

/* E) Clientes */

.cli_validate_item { color: #FFF !important; flex-direction: column; cursor: pointer; }
	.cli_validate_item i { display: block !important; color: #fff !important; }

/* F) Folios */

/* Buscador */

#autocomplete_search {
		position: relative;
		text-align: right;
		margin: 0px auto;
		width: 74%;
	}
	#autocomplete_search label.label_spry {
			font-family: 'montserratlight';
			font-size: .8em;
			color: #1c84c9;
		}
		
	#autocomplete_search .aTextField {
			border-bottom: #1c84c9 1px double !important;
			font-family: 'montserratlight';
			border: #1c84c9 1px double;
			border-radius: 20px;
			color: #1c84c9;
		}

/* Buscador ( end ) */

.folio_color_container { width: 200px; }
	.folio_color_span {
			display: inline-block;
			margin-right: 10px;
			height: 15px;
			width: 15px;
		}
		.folio_used { background: rgb(83, 140, 173) !important; }
			.folio_used p { color: #FFFFFF !important; }

		.folio_available{ background: #4eaf5e !important; }
			.folio_available p { color: #FFFFFF !important; }

		.folio_asigned { background: #ce8729 !important; }
			.folio_asigned p { color: #FFFFFF !important; }

		.folio_damaged { background: #000 !important; }
			.folio_damaged p { color: #FFFFFF !important; }

.folio_square {
		box-sizing: border-box;
		padding: 10px 20px;
		border-radius: 5px;
		text-align: center;
		margin: 3px;
		width: 19%;
	}
	.folio_square p { 
			color: #ce8729;
			-webkit-user-select: initial;
			-moz-user-select: initial;
			-ms-user-select: initial;
			user-select: initial;
		}

/* F1) Lista de hologramas dentro manage */
.multiple_inputs_flex {
		flex-wrap: wrap;
		display: flex;
	}
.especial-rec {
		background: #e4e2e2;
		border-radius: 4px;
		flex: 1 1 200px;
		margin: 5px;
	}	
	.folio-cont { padding: 10px 0px; min-height: 20px; color: #5a5856; }
		.folio-cont p { text-align: center; }
			.especial-rec.missed {
					background: rgba(255, 0, 0, 0.2);
				}.missed p { color: #ff0000 !important; }
				.delete-folio {
						float: right;
						margin-right: 10px;
						cursor: pointer;
					}
		.folio-cont .tooltip p {
			    transform: none !important;
				position: initial !important;
			}

/* F2) Eliminar folios por rango */
#folio_preview { 
		display: inline-block;
		background: #1d83cb;
		padding: 10px 25px;
		margin-top: 50px;
		cursor: pointer;
		color: #FFFFFF; 
	}

#infoDelete #delete_container {
		justify-content: center;
		flex-wrap: wrap;
		display: flex;
	}
	#infoDelete .deleteFolio {
			background: #e4e2e2;
			border-radius: 4px;
			text-align: center;
			padding: 10px 0px; 
			flex: 1 1 200px;
			color: #5a5856;
			margin: 5px;
		}

#folio_delete {
		background: #2ecc71;
		padding: 10px 15px;
		text-align: center;
		margin: 0px auto;
		cursor: pointer;
		color: #FFFFFF;
		display: block;
		width: 200px;
	}

/* F3 ) Resumen, buscador de folios */

#folio_search_container {
			margin: 20px auto;
			text-align: right;
			display: block;
	    	width: 90%;
		}
		#folio_search_container label.label_spry {
				font-family: 'montserratlight';
				font-size: .8em;
				color: #515175;
			}

		#folio_search_container .aTextField {
				border: #57678d 1px double !important;
				font-family: 'montserratlight';
				border-radius: 20px;
				color: #57678d;
			}

		#folio_search_container .aSelect {
				border: #57678d 1px double !important;
				font-family: 'montserratlight';
				background-image: none;
				border-radius: 20px;
				color: #57678d;
			}
		
		#folio_search_btn {
				background-color: #4b96dc;
				display: inline-block;
				border-radius: 50px;
				vertical-align: top;
				padding: 10px 13px;
     			margin-top: 44px;
				cursor: pointer;
				color: #fff;
			}

/* G) Usuarios */
.sudi_user_container {
		align-content: flex-start;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		margin: 0 auto;
		display: flex;
		width: 90%;
	}
	.sudi_user_element {
			background-color:transparent;
			border: #d3d9e7 solid 1px;
			box-sizing: border-box;
   			border-radius: 10px;
			margin: 10px auto;
			padding: 15px;
			display: block;
			width: 400px;
		}
	.sudi_user_info { width: 100%; }
		.sudi_user_info h3 { font-size:1.3em; color: #656578;  }
		.sudi_user_info p { font-size:.9em; color: #adadc6; }
		.sudi_user_info span { font-size:.7em; display:block; color: #85adff; }