.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);
}