.cap-label-sm {
	font-size: 1em;
}

.cap-label-smmd {
  font-size: 2em;
}

.cap-sbox-xl {
	width: 50em;
}

.cap-sbox-lg {
	width: 30em;
}

.cap-sbox-mdlg {
	width: 20em;
}

.cap-sbox-md {
	width: 15em;
}

.cap-sbox-smmd {
  width: 10em;
}

.cap-sbox-sm {
  width: 6em;
}

.cap-sbox-xs {
  width: 3em;
}

.cap-tbox-xl {
	width: 45em;
}

.cap-tbox-lg {
	width: 30em;
}

.cap-tbox-mdlg {
	width: 20em;
}

.cap-tbox-md {
	width: 15em;
}

.cap-tbox-smmd {
  width: 10em;
}

.cap-tbox-sm {
  width: 6em;
}

.cap-tbox-xs {
  width: 3em;
}

.cap-tbox-int {
  width: 4em;
  text-align: right;
}

.cap-tbox-num {
  width: 6em;
  text-align: right;
}

.cap-align-left {
  text-align: left;
}

.cap-align-centre {
  text-align: center;
}

.cap-align-right {
  text-align: right;
}

.cap-align-middle {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

.cap-password i {
	margin-left: -30px;
  cursor: pointer;
}

.cap-required:after {  /* used to denote required fields */
	content: "*";
	color: red;
}

.cap-font-smaller { 
	font-size:85%;
}

.cap-errorMessage { ;
	color: red;
}

select {
    -webkit-appearance: menulist; /* this is for chrome on windows for dropdown select boxes (at least, perhaps Safari on Mac too) acts badly if we do not do this */
} 

/* .selectpicker {
	display: block;
	margin: 0 auto;
	padding-left: 200px;	
	
} */

input[type=text],
input[type=password] {
	padding-left: 14px;  /* cannot seem to decrease left padding of select boxes so we have increased the left padding of most input boxes */
}

input[type="text"][readonly] {
	background-color: fefefe;
}

input[type="text"][disabled] {
	background-color: fefefe;
}

.cap-nav-active {
  /*background-color: #FFDE16;*/
  color: #000000;
  /*font-weight: bold;*/
  border-style: solid;
  border-width: 2px;
  border-color: #FFDE16;

}

.navbar-default .navbar-nav > li > a:hover {
  color: #000000;
  border-style: solid;
  border-width: 2px;
  border-color: #FFDE16;
}

.label-as-badge {
    border-radius: 1em;  /* used for the new messages indicator in the nav area. credit to: http://stackoverflow.com/questions/18730116/twitter-bootstrap-3-0-how-do-i-badge-badge-important-now */
}

.nav-tabs > li, .nav-pills > li {  /* used for tabs */
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}

.nav-tabs {  /* used for tabs */
    text-align:center;
}

h5 {
	font-family: sans-serif;
	background: #FFDE16;
	color: 000;
	border-color: #FFDE16;
	/*text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;*/

}
/*.navbar-default .navbar-nav > li > a:focus {
  background-color: #FFDE16;
  color: #FFFFFF;
}*/

/*.navbar-default .navbar-nav > li > a:active {
  background-color: #FFFFFF;
  color: #FFDE16;
}*/

/* bootstrap defines a default progress bar as blueish 
   we define as grey to match the other bootstrap default elements like button */
.progress-bar-default {
	background: #bbbbbb;
}

/* bootstrap does not defines a primary progress bar colour */
.progress-bar-primary {
	background: #2196f3;
}	

.progress {
	height: 20px;
	
}

#ui-datepicker-div { 
	font-size: smaller; 
}

.chart-container {
  position: relative;
  margin: auto;
}

/* bootstrap does not define a primary table colour */
.primary {
	background-color: rgba(33, 150, 243, 0.2) !important; 
}

.primary:hover td {
	background-color: rgba(33, 150, 243, 0.3) !important; 
}

/* bootstrap's default table colour is no colour */
.default {
	background-color: rgba(187, 187, 187, 0.1) !important; 
}

.default:hover td {
	background-color: rgba(187, 187, 187, 0.2) !important; 
}

.capulus-yellow {
	color: #FFDE16;
}

.capulus-grey {
	color: grey;
}

.ui-datepicker-trigger {
	position: relative;
	top: -3px;
	right: -3px;
	height: 20px
}

.cap-help {
	color: #2196F3;
	font-size: 1.25em;
}

.cap-help-modal-title {
	background-color: #2196F3; 
	color: #FFFFFF;
	font-size: 2em;
}

input[type=checkbox] {
	transform: scale(0.85);
}