/* Sticky footer styles
-------------------------------------------------- */
.cursor-pointer {
	cursor: pointer;
}

@media (min-width: 768px) {
	.modal-md {
		max-width: 480px;
	}
}

@media (min-width: 768px) {
	.seven-cols .col-md-1,
	.seven-cols .col-sm-1,
	.seven-cols .col-lg-1 {
		width: 100%;
		*width: 100%;
	}
}

@media (min-width: 992px) {
	.seven-cols .col-md-1,
	.seven-cols .col-sm-1,
	.seven-cols .col-lg-1 {
		width: 14.285714285714285714285714285714%;
		*width: 14.285714285714285714285714285714%;
	}
}

/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */
@media (min-width: 1200px) {
	.seven-cols .col-md-1,
	.seven-cols .col-sm-1,
	.seven-cols .col-lg-1 {
		width: 14.285714285714285714285714285714%;
		*width: 14.285714285714285714285714285714%;
	}
}


@media (min-width: 768px) {
	.five-cols .col-md-1,
	.five-cols .col-sm-1,
	.five-cols .col-lg-1 {
		width: 50%;
		*width: 50%;
	}
}

@media (min-width: 992px) {
	.five-cols .col-md-1,
	.five-cols .col-sm-1,
	.five-cols .col-lg-1 {
		width: 20%;
		*width: 20%;
	}
}

/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */
@media (min-width: 1200px) {
	.five-cols .col-md-1,
	.five-cols .col-sm-1,
	.five-cols .col-lg-1 {
		width: 20%;
		*width: 20%;
	}
}

html,
body {
	height: 100%;
	/* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	/* Negative indent footer by its height */
	margin: 0 auto -60px;
	/* Pad bottom by footer height */
	padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
	height: 60px;
	background-color: #f5f5f5;
}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

#wrap > .container {
	padding: 60px 15px 0;
}

.container .credit {
	margin: 20px 0;
}

#footer > .container {
	padding-left: 15px;
	padding-right: 15px;
}

code {
	font-size: 80%;
}

.msg-danger {
	color: red;
	font-size: small;
}

.hide {
	display: none;
}

.show {
	display: block;
}

.fa-sm {
	font-size: 0.63em;
}

.color-pending {
	background-color: yellow;
	color: black;
}

.color-approved {
	border-top: thin white solid;
	background-color: green;
	color: white;
}

.color-denied {
	border-top: thin white solid;
	background-color: red;
	color: white;
}

.color-cancelled {
	border-top: thin white solid;
	background-color: black;
	color: white;
}

.color-available {
	border-top: thin black solid;
	background-color: white;
	color: black;
}
.whiteonwhite {
	color: white;
	background-color: white
}

.blueStyle {
	color: #007bff;
	border-color: #007bff
}

/* A dark translucent div that covers the whole screen */
.ng-modal-overlay {
	position: absolute;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #808080;
	opacity: 0.8;
}

.modal-md {
	max-width: 450px
}

input.ng-invalid {
	border-color: red;
}

input.ng-invalid {
	border-color: red;
}
.btn-sq {
	height: 30px;
	width: 30px
}
.btn-lightblack {
	color:#333333
}

.thickerBorder {
	border-width: medium
}