/* Project - specific changes to Bootstrap v3.3.7 */

/* [10/18/2017 MC] Fix issue where our menu wraps to a new line
	prior to the responsive hamburger showing up. */
@media (max-width: 991px) {
	.navbar-header {
	    float: none;
	}
	.navbar-left,.navbar-right {
	    float: none !important;
	}
	.navbar-toggle {
	    display: block;
	}
	.navbar-collapse {
	    border-top: 1px solid transparent;
	    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
	}
	.navbar-fixed-top {
	    top: 0;
	    border-width: 0 0 1px;
	}
	.navbar-collapse.collapse {
	    display: none!important;
	}
	.navbar-nav {
	    float: none!important;
	    margin-top: 7.5px;
	}
	.navbar-nav>li {
	    float: none;
	}
	.navbar-nav>li>a {
	    padding-top: 10px;
	    padding-bottom: 10px;
	}
	.collapse.in{
	    display:block !important;
	}
}

.navbar {
	min-height:		35px;
	padding-top:	2px;
	padding-bottom:	2px;
	margin-bottom: 	4px;		
}

/* [10/18/2018 MC] using .row for menu, fix left margin from being negative. */
.navbar-collapse .row {
    margin-right: 5px;
    margin-left: 5px;
}

/* [10/20/2017 MC] compress the menu items a bit (multi-line menu is way too high and items too far apart) */
.nav > li > a {
	padding-top:	2px;	
	padding-bottom:	2px;
	padding-left:	8px;	
	padding-right:	10px;

	color:			black;	
}

/* [11/01/2017 MC] override bootstrap's desire to bold labels. 
	1. In this case only apply to labels for checkboxes.
	2. This only works with labels using the 'for' attribute, not labels that simply wrap the input control.
*/
input[type="checkbox"] + label { 
  	font-weight:		normal;
}

/*
 * [02/28/2018 MC] Bootstrap 3 puts a top margin of 5px on the checkbox, which makes
 * the label next to it look mis-aligned. Zero out the checkbox top-margin.
 */
input[type="checkbox"]  { 
    margin-top: 		0px;
}

/* [12/22/2017 MC] The background color for table-striped from bootstrap.min.css was too subtle for me to see.
 * Use a darker color - #F2F2F2
 */
.table-striped > tbody > tr:nth-of-type(2n+1) {
    background-color: #F2F2F2;
}

/* [12/29/2017 MC] Set the background color for the 'Confirm Delete' modal header to red.  */
.modalConfirmDelete .modal-header {
	background-color: #ffb5b5;
}

/* [01/05/2018 MC] Set the background color for ANY modal header to red.  */
.kyranModalRedTitle  .modal-header{
	background-color: #ffb5b5;
}

/* [01/09/2018 MC] Style File Upload button for bootstrap 3 */
.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    cursor: inherit;
    display: block;
}
label.btn-disabled {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}  

/* [02/21/2018 MC] - When you are styleing a button to look like a hyperlink, 
 *		A) get rid of the button left padding. 
 *		B) allow text to wrap like a link does or else tables will not collapse.
 *		C) keep text left aligned like an anchor (button defaults to center).
 */
.btn-link {
	padding-left: 0px;
	white-space: normal;
	text-align: left;	
}

/* [02/28/2018 MC] I have a situation where we would have resorted to a table.
 * Instead I need to use nested bootstrap grid div tags.
 * When you nest boostrap grid divs like this each one has 20px padding (left and right) 
 * and realestate is already too tight. 
 * Reduce the left and right padding for this case.
 */
.bsNested {
	padding-left: 2px;
	padding-right: 2px;
}

/* [02/28/2018 MC] This is used to highlight the lable associated with an input
 * control that was involved in a validation error condition.
 * This is particularly useful to highlight a checkbox, which by its self
 * is too small to see the border.
 */ 
.has-error-label {
	color:	red;
}

/* 
 * [03/14/2018 MC] Use this style to hide the hyperlink underline,
 * 	when using a hyperlink to make a Bootstrap Accordion header.
 */
.bsAccordionLink {
	text-decoration: none !important;
}

/*
 * [04/30/2018 MC] Vertically (and horizontally) center the text and butttons in pagination navigation row (bootstrapPaginationButton.jsp)
 */
.pagination {
	margin-top:	24px;
}
.nav-pagination-center-vert {
	/* the following aligns the text vertically on center */
	display: flex; 
	justify-content: center; 
	flex-direction: column; 
	height: 42px; 
}
.nav-pagination-center-horiz {
	/* This one aligns the nav button horizontally on center! */
	display: flex; 
	align-items: center;
}

/*
 * [11/27/2018 MC] If you try to use an auto-complete textbox
 * inside a Bootstrap Modal, the list items do not show up.
 * Use z-index to fix this problem - target the ui-autocomplete class
 * that is applied to the textbox by the jQuery UI auto-complete script.
 */
.ui-autocomplete {
    z-index: 9999 !important;
}