.errorMessage {
	color: red;
}

div .alert.alert-danger ul li {
	color: white;
}

.usr_pic {
	cursor: pointer;
}

/* css replacement of obsolete <u> tag */
.underline {
	text-decoration: underline;
}

/*fix for datepicker in modal*/
.datepicker {
	z-index: 90000 !important;
}

/* expandable text area fix */
textarea {
	padding-top: 10px;
	padding-bottom: 25px; /* increased! */
	width: 100%; /* changed from 96 to 100% */
	display: block;
}

/* ellipsis feature for responsive effect */
td p.text-overflow {
	width: 400px;
}

/* Custom orange color for Products */
.label-orange {
	background-color: #ffa07a;
}

/* Add loading image to input */
.loading {
	background-image: url("../../resources/img/loading1.gif");
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

/* search field in datatables table */
div.dataTables_wrapper div.dataTables_filter label {
	display: flex;
	align-items: center;
}
div.dataTables_wrapper div.dataTables_filter label input {
	width: 100%;
}

/* Style for index background before search */
div.initIndex {
	background-image: url('../../resources/img/banner.webp');
	background-repeat: no-repeat, no-repeat; 
	background-position: center; 
	min-height: 400px;
}

/* For better reading in s:debug */
#debug table {
	background-color: white;
	color: black;
}

/* make space for louder image on datatables load */
div.dataTables_wrapper>.row:nth-child(2)>.col-sm-12 {
	min-height: 150px;
}

/* fix for the time-picker on modal */
.bootstrap-timepicker-widget.dropdown-menu {
    z-index: 15000!important;
}

/* Change length of displayed chars based on media screen width */
@media screen and (min-width: 1200px) {
	td p.text-overflow {
		width: 100%;
	}
}

@media screen and (max-width: 992px) {
	td p.text-overflow {
		width: 300px;
	}
}

@media screen and (max-width: 600px) {
	td p.text-overflow {
		width: 120px;
	}
}

@media screen and (max-width: 400px) {
	td p.text-overflow {
		width: 80px;
	}
}