.tarjeta-pagos .panel-title {
	color: #FFF !important;
}

h3.dtitle {
	font-family: 'Questrial', sans-serif;
	color: #4C4C4C;
}

.tarjeta-pagos .panel {
	margin-bottom: 20px;
	background-color: #fff;
	border: 1px solid #4c4c4c;
	border-radius: 4px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.tarjeta-pagos .panel-heading {
	background-color: #4c4c4c;
	color: #FFF !important;
}

.tarjeta-pagos .panel-heading h4.productTitle {
	color: #FFF !important;
}

.tarjeta-pagos .cycleTitle {
	color: #FFF !important;
}

.contenedor-pagos .panel-info>.panel-heading h1,
.contenedor-pagos .panel-info>.panel-heading h1 h2,
.contenedor-pagos .panel-info>.panel-heading h1 h3,
.contenedor-pagos .panel-info>.panel-heading h1 h4,
.contenedor-pagos .panel-info>.panel-heading h1 h5 {
	font-family: 'Questrial', sans-serif;
	color: #FFF;
}

.btn-view {
	background-color: transparent !important;
	color: #4c4c4c !important;
	border-color: #e8e8e8 !important;
}

.btn-view .far,
.btn-view .fa {
	color: #4c4c4c !important;
	margin-right:2px !important;
}

.btn-pay {
	background-color: #5cb85c !important;
	color: #FFF !important;
	border-color: transparent !important;
}
.btn-bill {
	color: #8a6d3b;
	background-color: #fcf8e3 !important;
	border-color: transparent !important;
}
.btn-bill-req {
	color: #31708f;
	background-color: #d9edf7 !important;
	border-color: transparent !important;
}
.btn-bill-download {
	color: #3c763d;
	background-color: #dff0d8 !important;
	border-color: transparent !important;
}

.btn-pay .far,
.btn-pay .fa {
	color: #FFF !important;
	margin-right:2px !important;
}
.btn-bill .far,
.btn-bill .fa {
	color: #666 !important;
	margin-right:2px !important;
}
.btn-bill-req .far,
.btn-bill-req .fa {
	color: #666 !important;
	margin-right:2px !important;
}
.btn-bill-download .far,
.btn-bill-download .fa {
	color: #666 !important;
	margin-right:2px !important;
}

.panel-info>.panel-heading p {
	margin: 0px !important;
	color: #FFF !important;
}

.contenedor-pagos>div.card {
	padding: 0px 5px !important
}

.activeBis {
	background-color: #4C4C4C !important;
	border-radius: 4px;
	border: 0px solid #e8e8e8;
	padding-bottom: 0px;
	padding-top: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
}

.activeBis a {
	color: #FFF;
}

.activeBis a:hover {
	background-color: #d9edf7 !important;
	color: #333;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
}

.activeBisNormal {
	background-color: #e8e8e8 !important;
	border-radius: 4px;
	border: 0px solid #e8e8e8;
	padding-bottom: 0px;
	padding-top: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
}

.activeBisNormal a {
	color: #333;
}

.activeBisNormal a:hover {
	background-color: #d9edf7 !important;
	color: #333;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
}

.fa-pendiente,
.fa-pendiente:hover {
	background-color: #ffc107 !important;
}

.fa-pendiente i {
	color: #333;
}

.cycleTitle {
	margin: 0px;
	margin-bottom: 5px;
	/* background-color: #e8e8e8 !important; */
}

.productTitle {
	margin: 0px;
}

.cycleDates {
	margin: 0px
}

.table-orders-id td.date i {
	color: #666 !important;
	font-size: 15px;
	margin-left: 5px;
	position: relative;
	top: 1px;
}

.table-orders-id td.date .label {
	color: #666 !important;
}

.table-orders-id .btn {
	color: #666;
	width: 100%;
	padding: 5px 5px;
	display: inline-block;
	margin-bottom: 5px;
}


.f1-step.active .f1-step-icon {
	background: #5cb85c !important;
}

.f1-step.active p {
	color: #4c4c4c !important;
}

.f1-progress {
	background: #d9edf7;
}

.f1-progress-line {
	background: #5cb85c;
}

.f1-step-icon {
	background: #5cb85c;
	color: #fff;
}

.f1-step.activated .f1-step-icon {
	background: #5cb85c;
	border: 1px solid #3AB2B1;
	color: #3AB2B1;
}

.f1-step.active .f1-step-icon {
	background: #5cb85c;
}

.f1-step p {
	color: #ccc;
}

.f1-step.activated p {
	color: #3AB2B1;
}

.f1-step.active p {
	color: #3AB2B1;
}

.f1 .input-error {
	border-color: #3AB2B1;
}

/** SPINNER CREATION **/
.fade .modal-dialog {
	width: 600px;
	margin: 200px auto !important;
}

.modal .loader {
	position: relative;
	text-align: center;
	margin: 15px auto 35px auto;
	z-index: 9999;
	display: block;
	width: 80px;
	height: 80px;
	border: 10px solid rgba(0, 0, 0, .3);
	border-radius: 50%;
	border-top-color: #000;
	animation: spin 1s ease-in-out infinite;
	-webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
	to {
		-webkit-transform: rotate(360deg);
	}
}

@-webkit-keyframes spin {
	to {
		-webkit-transform: rotate(360deg);
	}
}


/** MODAL STYLING **/

.modal-content {
	border-radius: 0px;
	box-shadow: 0 0 0px 8px rgba(0, 0, 0, 0.7);
}

.modal-backdrop.show {
	opacity: 0.75;
}

.loader-txt p {
	font-size: 13px;
	color: #666;
}

.loader-txt small {
	font-size: 11.5px;
	color: #999;
}
.pagos-main-row {
	padding-top: 100px;
}

div.container.container-pagos div.panel-heading.phpcycle {
	background-color: #8f8f8f !important
}
div.container.container-pagos div.panel-heading.phproduct {
	background-color: #8f8f8f !important
}
div.container.container-pagos div.panel-heading.phperiod {
	background-color: #acacac !important
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	.pagos-main-row {
		padding-top: 20px;
	}

	.pagos-main-row-below {
		padding-bottom: 50px;
		padding-left: 20px;
		padding-right: 20px;
	}

	h3.dtitle {
		font-size: 18px !important
	}

	body>div.container>div>div>div.row.pagos-main-row>div.col-md-12.text-center>p {
		font-size: 16px !important
	}

	body>div.container>div>div>div.row.pagos-main-row>div.col-md-12.contenedor-pagos>div.row>div {
		padding: 10px !important;
	}

	body>div.container>div>div>div.row.pagos-main-row>div.col-md-12.contenedor-pagos>div.row>div>ul>li {
		width: 100% !important;
		border-radius: 0px !important;
		border: 0px !important;
		margin: 0px !important;
	}

	body>div.container>div>div>div.row.pagos-main-row>div.col-md-12.contenedor-pagos>div.row>div>ul>li.activeBis,
	body>div.container>div>div>div.row.pagos-main-row>div.col-md-12.contenedor-pagos>div.row>div>ul>li.activeBisNormal {
		width: 100% !important;
		border-radius: 0px !important;
		border: 0px !important;
		margin: 0px !important;
	}

	body>div.container>div>div>div.row.pagos-main-row>div.col-md-12.contenedor-pagos>div.card.tarjeta-pagos {
		padding: 0px !important
	}

	.card .tarjeta-pagos {
		padding: 0px !important;
		margin: 0px !important;
	}

	body>div.container>div>div>div.row.pagos-main-row>div.col-md-12.contenedor-pagos>div.card.tarjeta-pagos>div>div.panel-body {
		padding: 5px !important;
		margin: 5px !important;
	}

	div.card.tarjeta-pagos div.panel-body table thead {
		display: none !important;
	}

	/* recibo */
	.pagos-recibo {
		margin-right: 0px !important
	}

}

@media (max-width: 767px) {

	.col-xs-12,
	[class*="col-md-"].boxed-inverse,
	[class*="col-md-"].boxed,
	.col-md-6.boxed-inverse:not([class*="col-sm-"]),
	.col-md-6.boxed:not([class*="col-sm-"]),
	.col-md-4.boxed-inverse:not([class*="col-sm-"]),
	.col-md-4.boxed:not([class*="col-sm-"]),
	[class*="col-md-"].boxed-inverse.col-sm-6,
	[class*="col-md-"].boxed.col-sm-6,
	.col-md-6.boxed-inverse:not([class*="col-sm-"]),
	.col-md-6.boxed:not([class*="col-sm-"]),
	.col-md-8.boxed:not([class*="col-sm-"]),
	.col-md-8.boxed:not([class*="col-sm-"]),
	.col-md-8.boxed-inverse:not([class*="col-sm-"]) {
		width: 100% !important;
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	.container-pagos {
		min-height: 800px;
	}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {}


@media only screen and (min-width: 600px) {
	.pagos-main-row {
		padding-top: 20px !important;
	}
}
@media only screen and (min-width: 768px) {
	.pagos-main-row {
		padding-top: 100px !important;
	}
}