.modal-backdrop,
.modal-backdrop.in {
	background: #030f33;
	opacity: 0.7;
}

/*GENERAL*/
.modal {
	background: rgba(3,15,51, 0.1);
}
	.modal.notification .modal-dialog {
		width: 400px;
	}
	.modal.expanded .modal-dialog {
		width: 750px;
	}
	.modal.center {
		text-align: center;
	}
	.modal .modal-content {
		padding: 30px;
	}
		.modal h4,
		.modal h5 {
			font-size: 2em;
			font-weight: 600;
			line-height: 1em;
			margin-bottom: 15px;
			overflow-wrap: break-word;
		}
		.modal h5 {
			font-size: 1.5em;
			margin-bottom: 15px;
			margin-top: 30px;
		}
			.modal h5:first-child {
				margin-top: 10px;
			}
		.modal h6 {
			margin-bottom: 5px;
		}

		.modal .no-margin-bottom {
			margin-bottom: 0;
		}
		.modal .no-margin-top {
			 margin-top: 0;
		 }

		.modal .close {
			font-size: 4em;
			position: absolute;
			right: 15px;
			top: 0;
			text-shadow: none;
		}

		.modal p {
			width: auto;
		}

		.modal .fields-required {
			margin-bottom: 20px;
			margin-top: 10px;
		}

		.modal .side-info-box {
			background: rgba(69, 134, 244, 0.1);
			border-radius: 6px;
			color: #000;
			font-size: 12px;
			font-weight: normal;
			padding: 4px 10px;
			position: absolute;
			right: 0;
			bottom: 5px;
		}

		/*MODAL-SECTIONS*/
		.modal .modal-header,
		.modal .modal-body,
		.modal .modal-footer {
			border: 0;
			padding: 0;
			z-index: 1;
		}

		/*HEADER*/
		.modal .modal-header .modal-subtitle {
			color: #4586F4;
			font-size: 0.8em;
			text-transform: uppercase;
		}
		.modal .modal-header .modal-description {
			font-size: 0.9em;
		}
			.modal .modal-header .modal-description p {
				margin-bottom: 0;
			}
		.modal .modal-header .modal-title-description {
			margin-bottom: 20px;
		}		

		/*BODY*/
		/*Modal Receivable Preview*/
		.modal .strong {
			font-weight: 600;
		}

		.modal .details {
			font-size: 0.9em;
			margin-top: 5px;
		}

		.modal .modal-status {
			font-size: 0.8em;
			text-transform: uppercase;
			margin-top: 10px;
			margin-bottom: 2em;
		}
			.modal .modal-status-text {
				font-weight: bold;
			}

		.modal .modal-body .description {
			margin-bottom: 15px;
		}
			.modal .modal-body .description .additional-items .form-group {
				padding-left: 20px;
			}
			.modal .modal-body .description .additional-items .form-group label {
				padding-left: 0;
			}

		.modal .modal-body .modal-extra {
			background: #e5e5e5;
			font-size: 0.9em;
			padding: 15px;
			text-align: center;
		}
		.modal .modal-body .modal-program {
			background: #e0e0e0;
			margin: 0 0 35px;
			padding: 20px;
		}
		.modal .modal-body .modal-program.approved {
				background: #e9f6f6;
			}
			.modal .modal-body .modal-program strong {
				color: #4a6666;
				font-size: 0.8em;
				font-weight: 600;
				text-transform: uppercase;
			}
			.modal .modal-body .modal-program .amount-description {
				color: #4a6666;
				font-size: 0.8em;
				margin-bottom: 20px;
			}
			.modal .modal-body .modal-program.approved .row {
				color: #7f7f7f;
			}
			.modal .modal-body .modal-program .row {
				color: #333;
				font-size: 0.8em;
			}
			.modal .modal-body .modal-program .row.title {
				font-weight: 600;
				margin-bottom: 5px;
				text-transform: uppercase;
			}
			.modal .modal-body .modal-program .row.cycle {
				color: #000;
			}
				.modal .modal-body .modal-program .row.cycle .value {
					font-weight: 600;
				}
				.modal .modal-body .modal-program .row .value {
					text-align: right;
				}
			.modal .modal-body .modal-program .row.total {
				color: #000;
				font-size: 1.1em;
				font-weight: 600;
				margin-top: 5px;
				text-transform: uppercase;
			}
				.modal .modal-body .modal-program .row.total .value {
					font-size: 1.1em;
				}

			.modal .modal-body .small {
				display: block;
				font-size: 0.75em;
				font-style: italic;
			}

			/*Detalles de una PO en el request de Invoice o POs*/
			.modal .collapsable {
				cursor: pointer;
				position: relative;
			}
				.modal .collapsable.expanded {
					border-bottom: 0;
				}
					.modal .collapsable-toggle {
						color: #4586F4;
						position: absolute;
						top: 0;
						left: -6px;
					}
					.modal .collapsable-toggle .more,
					.modal .collapsable.expanded .collapsable-toggle .less {
						display: inline-block;
					}
					.modal .collapsable-toggle .less,
					.modal .collapsable.expanded .collapsable-toggle .more {
						display: none;
					}

				.modal .collapsable.expanded .collapsable-info {
					border-bottom: 0;
					display: block;
				}
				.modal .collapsable-content {
					font-family: arial;
					padding: 15px 10px;
				}
				.modal .collapsable-info {
					background: rgba(120,168,228,0.1);
					color: #666;
					display: none;
					font-size: 0.9em;
				}
					.modal .collapsable-content .col-separator {
						border-right: 1px solid #ccc;
					}
				.modal .collapsable-info.expanded {
					border-bottom: 1px solid #e5e5e5;
					display: block;
				}
					.modal .collapsable-info .highlight {
						color: #000;
						font-weight: 700;
						text-transform: uppercase;
					}
						.modal .collapsable-info .highlight.margin-top {
							margin-top: 12px;
						}
						.modal .collapsable-info .highlight.margin-bottom {
							margin-bottom: 12px;
						}
			.modal ul li {
				margin-bottom: 10px;
			}
			.modal .dropdown-menu>li {
				margin-bottom: 0;
			}

			/*Form-section*/
			.modal .modal-section {
				border-bottom: 1px solid #eeeeee;
				padding-bottom: 20px;
				margin-bottom: 20px;
			}
			.modal .modal-section.last,
			.modal .modal-section.noborder {
				border-bottom: 0;
			}
			.modal .modal-section.no-pad-bottom {
				padding-bottom: 0
			}
				.modal .modal-section-title {
					font-weight: bold;
					text-transform: uppercase;
					margin-bottom: 10px;
				}

		/*FOOTER*/
		.modal .modal-footer.mtop {
			margin-top: 40px;
		}
		.modal .modal-footer .accept {
			margin-bottom: 40px;
		}
		.modal .modal-footer .accept,
		.modal .modal-footer .btn-request {
			display: none;
		}

		.modal .modal-footer .otp {
			margin-bottom: 40px;
		}
			.modal .modal-footer .otp label {
				margin-right: 20px;
			}
			.modal .modal-footer .otp .request-code {
				color: #777;
				height: 40px;
				line-height: 1em;
			}
				.modal .modal-footer .otp .request-code p {
					font-style: italic;
				}
				.modal .modal-footer .otp .request-code .btn-link {
					border: 0;
					font-weight: normal;
					padding: 0;
				}

	.modal .legal {
		font-size: 10px;
		text-align: left;
		margin-bottom: 2em;
		margin-top: 3em;
	}

	.modal .icon {
		color: #4586F4;
		display: block;
		font-size: 10em;
		margin: 20px 0 40px;
		text-align: center;
	}

	.modal .selectable {
		float: left;
		margin-right: 15px;
	}

	.modal .btn-modal-close {
		color: #7f7f7f;
		text-transform: uppercase;
	}
	.modal .form-buttons {
		margin-top: 20px;
		text-align: right;
	}
		.modal.form-data form {
			margin-top: 20px;
		}

	/*OK/ERROR*/
	.modal.background-ok .modal-content {
		background: #4586F4;
	}
	.modal.background-error .modal-content {
		background: #001469;
	}
		.modal.background-ok .modal-body,
		.modal.background-error .modal-body {
			padding: 0;
		}
			.modal.background-ok .modal-body p,
			.modal.background-error .modal-body p {
				margin: 0;
			}
		.modal.background-ok .modal-content .icon,
		.modal.background-error .modal-content .icon,
		.modal.background-ok .modal-content h4,
		.modal.background-error .modal-content h4,
		.modal.background-ok .modal-content p,
		.modal.background-error .modal-content p {
			color: #fff;
		}

		.modal.background-ok .btn-modal-close,
		.modal.background-error .btn-modal-close,
		.modal.background-ok .close,
		.modal.background-error .close {
			color: rgba(255,255,255,0.9);
		}
		.modal.background-ok .modal-footer,
		.modal.background-error .modal-footer {
			text-align: center;
		}
		.modal.background-ok .modal-footer .btn-primary,
		.modal.background-ok .modal-footer .btn-primary:focus,
		.modal.background-ok .modal-footer .btn-primary.focus,
		.modal.background-ok .modal-footer .btn-primary:hover,
		.modal.background-ok .modal-footer .btn-primary:active,
		.modal.background-ok .modal-footer .btn-primary.active.focus,
		.modal.background-ok .modal-footer .btn-primary.active:focus,
		.modal.background-ok .modal-footer .btn-primary.active:hover,
		.modal.background-ok .modal-footer .btn-primary.focus:active,
		.modal.background-ok .modal-footer .btn-primary:active:focus,
		.modal.background-ok .modal-footer .btn-primary:active:hover {
			background: #030F33;
			color: #fff !important;
			margin-top: 20px;
		}

/*FILTER-PANEL*/
.modal.filter-panel .filter-check-allnone {
	color: #888;
	margin-bottom: 15px;
	margin-top: -15px;
}
	.modal.filter-panel .filter-check-allnone label {
		cursor: pointer;
		font-size: 0.9em;
		font-weight: 300;
	}


/*-PURCHASEORDER-NEW MODAL*/
.modal .notification-box {
	background: rgba(107, 168, 233, 0.1);
	padding: 15px 15px 10px;
	margin-bottom: 20px;
}
	.modal .notification-icon {
		position: relative;
	}
		.modal .notification-box i {
			font-size: 4.5em;
			margin-top: 15px;
			margin-left: 25px;
		}
		.modal .notification-box i.single {
			margin-left: 5px;
			margin-top: 10px;
		}
		.modal .notification-box .badge {
			background: #4586F4 none repeat scroll 0 0;
			color: #fff;
			font-size: 1.5em;
			left: 30px;
			position: absolute;
			top: 5px;
			border-radius: 20px;
			-moz-border-radius: 20px;
			-webkit-border-radius: 20px;
		}
	.modal .notification-box p {
		font-size: 0.9em;
		font-style: italic;
	}

	.modal .notification-box .link {
		font-size: 0.9em;
		font-style: italic;
		text-decoration: underline;
	}
	

/*-PAYMENTSLIPS MODAL*/
.modal #paymentslip-info {
	margin-bottom: 40px;
}
.modal #paymentslip-payments #additionalpayments {
	font-size: 1em;
	margin-top: 0;
	margin-bottom: 60px;
}
.modal #paymentslip-totals .total {
	font-weight: 600;
}
.modal #paymentslip-totals .cutoffwarning {
	margin-top: 30px;
}
.modal #paymentslip-totals .panel-details {
	margin-top: -40px;
}
	.modal #paymentslip-totals .panel-details .checkbox {
		margin: 0;
	}
	.modal #paymentslip-totals .panel-details-content {
		padding-left: 20px;
	}
		.modal #paymentslip-totals .panel-details-content #exchange {
			line-height: 1em;
			margin-top: 2px;
			margin-bottom: 10px;
		}
		.modal #paymentslip-totals .panel-details-content strong {
			font-size: 0.9em;
		}
		.modal #paymentslip-totals .panel-details-content .note {
			margin-bottom: 0;
			margin-top: 5px;
		}

@media screen and (max-width: 767px) {
	.modal.expanded .modal-dialog,
	.modal.notification .modal-dialog {
		margin: 20px auto;
		width: 95%;
	}

		.modal.expanded .modal-dialog .col-xs-12 {
			padding: 0;
		}
}