@charset "utf-8";

	/* Formularios */
fieldset {
	margin-bottom: 1rem;
	overflow: visible;
}

input[type="text"], input[type="password"], input[type="email"], input[type="url"],
input[type="number"], input[type="date"], textarea, select {
	width: 100%;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="url"]:focus, input[type="number"]:focus, input[type="date"]:focus,
textarea:focus, select:focus {
	/* Experimental */
	box-shadow: 0 0 2px rgba(30,140,190,.8);
}

input[type="submit"], input[type="button"].submit, button[type="submit"],
button.submit, .btn-send {
    padding: 0.5rem 1rem;
}

input[type="reset"], input[type="button"].reset, button[type="reset"],
button.reset, .btn-simple {
	outline: none;
	border: none;
	background: none;
	color: #303030;
	cursor: pointer;
	margin-right: 1.5rem;
}

input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner,
button::-moz-focus-inner {
	border: 0;
}

form *[readonly], form *[disabled], input[type="submit"][disabled],
input[type="reset"][disabled], select.disabled {
	border: 1px dotted #7d7d7d;
	background: #e3e3e3;
}
select option[disabled] { display: none; }

div.submit-box { position: relative; }
div.loading-box {
	position: absolute;
	width: 100%;
}
div.loading {
	position: relative;
	padding-top: 2px;
	text-align: center;
}
div.spinner {
	width: 2rem;
	height: 2rem;
	margin: 0 auto;
	border: 4px solid #eee;
	border-top: 4px solid rgba(0, 0, 0, .6);
	border-radius: 50%;
	animation: btnSpinner 1.5s linear infinite;
}
@keyframes btnSpinner {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

#img-captcha, #captcha-refresh { cursor: pointer; }
div.form-row, div.form-group {
	position: relative;
	margin-bottom: 1rem;
	overflow: visible;
}
div.form-group div.form-row { margin-bottom: 0; }
input[type="text"].input-error, input[type="password"].input-error,
input[type="email"].input-error, input[type="url"].input-error,
input[type="number"].input-error, input[type="date"].input-error,
textarea.input-error, select.input-error {
	border: 1px solid #dd4b39;
}
small.error-msg {
	color: #dd4b39;
	display: none;
}

	/* Modal boxes */
.modal-box-wrapper { background-color: rgba(0, 0, 0, .6); }
.modal-box-wrapper-no-bg { background-color: none; }
.modal-box { background-color: #fff; }
.btn-modal-close-wrapper { height: 1rem; }
.btn-modal-close {
	float: right;
	padding: 1px 3px;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.2rem;
	color: #eee;
	transition: all .18s ease;
}
.btn-modal-close:hover {
	color: #303030;
	background: #eee;
	text-decoration: none;
	cursor: pointer;
}
.btn-modal-close::before, .btn-modal-close::after { display: none; }

	/* Alertas */
div.black-box { background-color: #000; }
div.red-box { background-color: #f44336; }
div.orange-box { background-color: #ff9800; }
div.green-box { background-color: #4CAF50; }
div.blue-box { background-color: #2196F3; }
div.black-box, div.red-box, div.orange-box, div.green-box, div.blue-box { color: #fff; }

	/* Snackbar / Toast */
.snackbar {
	border-radius: 4px;
	background-color: rgba(0, 0, 0, .6);
	color: #fff;
	top: 0;
}
.snackbar-show { animation: snackFadeIn 0.5s; }
.snackbar-hide {
	opacity: 0;
	animation: snackFadeOut 0.5s;
}
@keyframes snackFadeIn {
	from {top: -4rem; opacity: 0;}
	to {top: 0; opacity: 1;}
}
@keyframes snackFadeOut {
	from {top: 0; opacity: 1;}
	to {top: -4rem; opacity: 0;}
}

	/* Flechas para Tooltips */
.arrow-up, .arrow-right, .arrow-down, .arrow-left {
	position: absolute;
	border: 10px solid transparent;
	width: 0;
	height: 0;
}
.arrow-up {
	border-top: none;
	border-bottom-color: #fff;
}
.arrow-right {
	border-right: none;
	border-left-color: #fff;
}
.arrow-down {
	border-down: none;
	border-top-color: #fff;
}
.arrow-left {
	border-left: none;
	border-right-color: #fff;
}

	/* Tooltips */
.tooltip {
	position: relative;
	visibility: hidden;
}
.tooltip-left .arrow-right {
	top: -2rem;
	border-left-color: rgba(0, 0, 0, .8);
}
.tooltip-right .arrow-left {
	top: -2rem;
	right: 0;
	border-right-color: rgba(0, 0, 0, .8);
}
.tooltip .tooltip-content {
	position: absolute;
  padding: 1rem;
  width: 80%;
  background: rgba(0, 0, 0, .8);
	z-index: 1201 !important;
	font-size: 0.8rem;
}
.tooltip .tooltip-content p { color: #eee; }
.tooltip-left .tooltip-content {
	top: -4rem;
	left: -80%;
}
.tooltip-right .tooltip-content {
	top: -2rem;
  left: 100%;
}

	/* Sugerencias */
.sugerencia { position: relative; }
.sugerencia ul {
	position: absolute;
	width: 100%;
}
.sugerencia ul li {
	padding: 0 1rem;
	overflow: hidden;
}
.sugerencia ul li a { display: block; }
.sugerencia ul li.selected {}

	/* Tabs */
div.tabs { overflow: hidden; }
div.tab-content { animation: fadeEffect 1s; }
@keyframes fadeEffect {
	from {opacity: 0;}
	to {opacity: 1;}
}

	/* Sort Order y Paginador */
div.orderby-box { margin-bottom: 5px; }
div.orderby-box select {
	padding: 2px 5px;
	background: transparent;
}
div.orderby-box select { width: 270px; }
div.orderby-box input[type="submit"] {
	padding: 5px;
	font-size: 0.8rem;
}
div.pager-box { font-size: 0.8rem; }
div.pager-box input {
	width: 40px;
	padding: 2px 5px;
	background: transparent;
}
div.pager-box ul, div.pager-box li { display: inline-block; }
div.pager-box li a { padding: 2px 5px; }
div.pager-box li a:hover {
	color: #fff;
	background: rgba(0, 0, 0, .8);
}
div.pager-box li a.current-option, div.pager-box li a.current-option:hover {
	color: #303030;
	background: #eee;
}
div.pager-box li a.previous-page.current-option, div.pager-box li a.next-page.current-option {
	color: #e3e3e3;
	background: none;
}
ul.ipp li a { border: 1px solid rgba(0, 0, 0, .4); }

	/* Tablas */
table.cptable {
	border-spacing: 0;
	border-collapse: collapse;
	margin-bottom: 1rem;
}
table.cptable th, table.cptable td {
	border: dotted 1px rgba(0, 0, 0, .2);
	padding: 0 4px;
}
table.cptable tr:nth-child(even) { background: rgba(255, 255, 255, .4); }
table.cptable thead tr.title-row th {
	text-align: left;
	color: #505050;
	background-color: rgba(255, 255, 204, .4);
}
	/* Tabla Sorteable */
table.sorteable thead tr.title-row, table.editable tbody tr { cursor: pointer; }
table.sorteable thead tr.title-row th {
	background-image: url('img/up_down.png');
	background-repeat: no-repeat;
	background-position: center right;
}
table.sorteable thead tr.title-row th.thUp { background-image: url('img/up.png'); }
table.sorteable thead tr.title-row th.thDown { background-image: url('img/down.png'); }
table.sorteable thead tr.title-row th:hover, table.sorteable th.thHover {
	background-color: rgba(255, 255, 204, .8);
}

div.filtro-box { font-size: 0.8rem; }
div.filtro-box input {
	width: 250px;
	padding: 2px 5px;
	background: transparent;
}
	/* Tabla Editable */
table.editable tbody tr.selected, table.editable tbody tr:hover, table.editable tbody tr.trHover {
	color: #fff;
	background: rgba(0, 0, 0, .6);
}

form.form-table th button {
	width: 20px;
	height: 20px;
	margin-right: 2px;
	outline: none;
	border: 1px solid rgba(0, 0, 0, .4);
	background-repeat: no-repeat;
	background-position: center center;
	vertical-align: middle;
	cursor: pointer;
}
form.form-table th button:hover {
	border: 1px solid rgba(0, 0, 0, .8);
}
form.form-table button span {
	position: absolute;
	visibility: hidden;
}
button.btn-new { background-image: url('img/new.png'); }
button.btn-edit { background-image: url('img/edit.png'); }
button.btn-delete { background-image: url('img/delete.png'); }
button.btn-pdf { background-image: url('img/pdf.png'); }
button.btn-xls { background-image: url('img/xls.png'); }
button.btn-refresh { background-image: url('img/refresh.png'); }

button[disabled].btn-new, button.btn-new:disabled, button.btn-new-disabled { background-image: url('img/new_disabled.png'); }
button[disabled].btn-edit, button.btn-edit:disabled, button.btn-edit-disabled { background-image: url('img/edit_disabled.png'); }
button[disabled].btn-delete, button.btn-delete:disabled, button.btn-delete-disabled { background-image: url('img/delete_disabled.png'); }
button[disabled].btn-pdf, button.btn-pdf:disabled, button.btn-pdf-disabled { background-image: url('img/pdf_disabled.png'); }
button[disabled].btn-xls, button.btn-xls:disabled, button.btn-xls-disabled { background-image: url('img/xls_disabled.png'); }
button[disabled].btn-refresh, button.btn-refresh:disabled, button.btn-refresh-disabled { background-image: url('img/refresh_disabled.png'); }

form.form-table input[type="text"], form.form-table select, form.form-table textarea { padding: 0.2rem; }
form.form-table input[type="text"].input-error, form.form-table select.input-error, form.form-table textarea.input-error { border: 1px solid #dd4b39; }
form.form-table input[type="submit"] {
	font-size: 0.8rem;
	padding: 0.4rem 1rem;
}

div#context-menu {
	padding: 2px;
	width: 180px;
	background-color: rgba(255, 255, 255, .8);
	border: 1px solid #505050;
}
div#context-menu button {
	margin: 0;
	padding: 5px 0 5px 26px;
	width: 100%;
	outline: none;
	border: none;
	font-size: 0.8rem;
	text-align: left;
	color: #505050;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 4px 6px;
	cursor: pointer;
	transition: all .18s ease;
}
div#context-menu button:hover {
	color: #fff;
	background-color: rgba(0, 0, 0, .8);
}

/************/

/*
 * Clases genéricas
 */
.centrar { text-align: center; }
.tac { text-align: center; }
.tar { text-align: right; }
.tal { text-align: left; }
.mb0 { margin-bottom: 0; }
.mb1 { margin-bottom: 1rem; }
.mb2 { margin-bottom: 2rem; }
.mt1 { margin-top: 1rem; }
.mr1 { margin-right: 1rem; }
.ml1 { margin-left: 1rem; }
.p1 { padding: 1rem; }
.pr1 { padding-right: 1rem; }
.pl1 { padding-left: 1rem; }
.lista {
	list-style: circle;
	margin-left: 2rem;
}
.pa { position: absolute; }
.pr { position: relative; }
.fl { float: left; }
.fr { float: right; }

@media(max-width: 670px) {
		/* Tooltip */
	.tooltip-left .arrow-right, .tooltip-right .arrow-left {
		top: -0.7rem;
		left: 1rem;
		border-top: none;
		border-bottom-color: rgba(0, 0, 0, .8);
	}
	.tooltip-left .arrow-right {
		border-right: 10px solid transparent;
		border-left-color: transparent;
	}
	.tooltip-right .arrow-left {
		border-left: 10px solid transparent;
		border-right-color: transparent;
	}
	.tooltip-left .tooltip-content, .tooltip-right .tooltip-content {
		top: 0;
	  left: 0;
	  width: 100%;
	}
}
/******************************************/


/******************************************/