body {
    padding-top: 4px;
    font-family: "Roboto", sans-serif;
    background-color: #fff7ff;
    color: black;
}

.starter-template {
    padding: 40px 15px;
    text-align: center;
}

a.navbar-brand {
    padding: 0;
    border: 0;
    margin: 0;
}

.form-group-sm .control-label {
    font-size: smaller;
}

.tt-menu {
    width: 422px;
    margin: 0 0;
    padding: 1px 6px;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.scrollable-typeahead-menu .tt-menu {
    max-height: 200px;
    overflow-y: auto;
}

.tt-suggestion {
    padding: 3px 3px;
    line-height: 24px;
}

.tt-suggestion:hover {
    cursor: pointer;
    color: #fff;
    background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
    color: #fff;
    background-color: #0097cf;
}

.tt-suggestion p {
    margin: 0;
}

/* get typeahead controls to align properly */
.form-inline .form-control,.twitter-typeahead {
    vertical-align: middle !important;
}

/* safe? needed so that typeahead spans stretch */
form:not(.form-inline) .twitter-typeahead {
    width: 100% !important;
}

.item-label {
    font-weight: bolder;
}

/* adds indicator to collapsing panel headings, note custom heading classname
   so don't have to use it for panels with collapse */

.collapsing-panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e113";    /* adjust as needed, taken from bootstrap.css */
    color: grey;         /* adjust as needed */
}

.collapsing-panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
}

.collapsing-panel-heading a.accordion-toggle {
    text-decoration: none;
}

.fixed-panel {
    max-height: 40em;
    overflow-y: scroll;
    overflow-x: hidden;
}

/* for debugging grids */
.dbgb {
    border: solid 1px grey;
    background-color: lightgrey;
}

.hoverPointer:hover {
    cursor: pointer;
}

.pagination_vertical {
    width: 40px !important;
}

.pagination_vertical li a {
    width:40px;
    max-width:40px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
}

.pagination_vertical > li:first-child > a,
.pagination_vertical > li:first-child > span {
    margin-left: -1px !important;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0 !important;
}
.pagination_vertical > li:last-child > a,
.pagination_vertical > li:last-child > span {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 0 !important;
}

/* TODO specific colour styles - are these used? */

.colorBcgLightCyan{
    background-color: lightcyan;
}

.colorBcgLightGreenBlue {
    background-color: #e4ebd6 !important;
}

.colorBcgLightGreenYellow {
    background-color: #d6ebe3 !important;
}

/*Fix for modal header covering round border of its parent*/
.bg_modal_fix {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.btn_no_border {
    background-color: inherit !important;
    border: none !important;
}

.btn_menu {
    color: white;
    background-color: #005f6f;
    border-top: none;
    border-radius: 0;
    border-color: #00414c;
}

.btn_menu:hover {
    color: white;
    background-color: #00414c;
    border-top: none;
    border-radius: 0;
    border-color: #00414c;
}

.btn_menu.selected {
    color: white;
    background-color: #00414c;
    border-top: none;
    border-radius: 0;
    border-color: #00414c;
}

.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;
    background: white;
    cursor: inherit;
    display: block;
}

.error_field {
    background-color: hsl(0,80%,97%) !important;
    border-color: red !important;
    -webkit-box-shadow: inset 0 1px 1px hsla(0,100%,10%,.075), 0 0 8px hsla(0,100%,50%, .6) !important;
    box-shadow: inset 0 1px 1px hsla(0,100%,10%,.075), 0 0 8px hsla(0,100%,50%, .6) !important;
}

.warning_field {
    background-color: hsl(50,82%,90%) !important;
    border-color: #eac715 !important;
    -webkit-box-shadow: inset 0 1px 1px hsla(50,82%,10%,.075), 0 0 8px hsla(50,82%,60%, .6) !important;
    box-shadow: inset 0 1px 1px hsla(50,82%,10%,.075), 0 0 8px hsla(50,82%,60%, .6) !important;
}

.warning_cell {
    background-color: hsl(46,100%,85%) !important;
    border-left: solid 5px #f0ad4e !important;
}

.message {
    background-color: #cec;
    border: solid 2px black;
    padding: 1em;
    margin-bottom: 1em;
    text-align: center;
    font-weight: bold;
}

.messageError {
    background-color: #ecc;
    border: solid 2px black;
    padding: 1em;
    margin-bottom: 1em;
    text-align: center;
    font-weight: bold;
}

.messageWarning {
    background-color: #fb6;
    border: solid 2px black;
    padding: 1em;
    margin-bottom: 1em;
    text-align: center;
    font-weight: bold;
}

.clickable { cursor: pointer; }

.checkbox_size_fix{
    width: 27px !important;
    height: 27px !important;
}

.validationList {
   list-style-type: none;
   padding: 0em;
   border-radius: 0.5em;
   border: 1px solid grey;
}

.validationListError, .validationListWarning, .validationListInfo {
   padding: 0.5em;
   font-size: larger;
   font-weight: bolder;
   border-radius: 0.5em;
}

.pad_t_1em{
    padding-top: 1em;
}

.pad_t_05em{
    padding-top: 0.5em;
}

.pad_b_1em{
    padding-bottom: 1em;
}

.pad_b_05em{
    padding-bottom: 0.5em;
}

.pad_l_20px{
    padding-left: 20px !important;
}

.pad_1em {
   padding: 1em;
}

.mg_t_1em {
    margin-top: 1em;
}

.mg_t_2em {
    margin-top: 2em;
}

.mg_b_1em {
    margin-bottom: 1em;
}

table.longText {
    table-layout:fixed;
}

table.font_fix14 {
    font-size: 14px;
}

td.longText {
    word-wrap:break-word;
}

.tooltip-inner {
    word-wrap:break-word;
}

#tableQuoteCreate td {
    border: 1px black solid;
}

/* Don't print link hrefs - override Bootstrap style */
@media print {
    a[href]:after {
        content: none
    }
}

/*additional button collors for different object states*/
/*lightness=80%, hover lightness=65%*, border -10%*/
.yellow {
  background-color: hsl(35,84%,62%) !important;
  color: white !important;
}

.lpink {
    background-color: hsl(1,63%,90%);
}

.dpink {
  background-color: hsl(1,64%,58%);
  color: white;
}

.btn-lpink {
   color: black;
   background-color: hsl(1,63%,90%);
   border-color: hsl(1,63%,80%);
}

.btn-lpink:hover {
    color: black;
    background-color: hsl(1,63%,65%);
    border-color: hsl(1,63%,55%);
}

.btn-lpink.disabled:hover,
.btn-lpink[disabled]:hover,
fieldset[disabled] .btn-lpink:hover,
.btn-lpink.disabled:focus,
.btn-lpink[disabled]:focus,
fieldset[disabled] .btn-lpink:focus,
.btn-lpink.disabled.focus,
.btn-lpink[disabled].focus,
fieldset[disabled] .btn-lpink.focus {
    background-color: hsl(1,63%,80%);
    border-color: hsl(1,63%,70%);
}

.lgrey {
    background-color: hsl(0,0%,80%);
}

.btn-lgrey {
    color: black;
    background-color: hsl(0,0%,80%);
    border-color: hsl(0,0%,70%);
}

.btn-lgrey:hover {
    color: black;
    background-color: hsl(0,0%,65%);
    border-color: hsl(0,0%,55%);
}

.btn-lgrey.disabled:hover,
.btn-lgrey[disabled]:hover,
fieldset[disabled] .btn-lgrey:hover,
.btn-lgrey.disabled:focus,
.btn-lgrey[disabled]:focus,
fieldset[disabled] .btn-lgrey:focus,
.btn-lgrey.disabled.focus,
.btn-lgrey[disabled].focus,
fieldset[disabled] .btn-lgrey.focus {
    background-color: hsl(0,0%,80%);
    border-color: hsl(0,0%,70%);
}

.dgrey {
    background-color: hsl(0,0%,70%);
}

.btn-dgrey {
    color: white;
    background-color: hsl(0,0%,60%);
    border-color: hsl(0,0%,50%);
}

.btn-dgrey:hover {
    color: white;
    background-color: hsl(0,0%,45%);
    border-color: hsl(0,0%,35%);
}

.btn-dgrey.disabled:hover,
.btn-dgrey[disabled]:hover,
fieldset[disabled] .btn-dgrey:hover,
.btn-dgrey.disabled:focus,
.btn-dgrey[disabled]:focus,
fieldset[disabled] .btn-dgrey:focus,
.btn-dgrey.disabled.focus,
.btn-dgrey[disabled].focus,
fieldset[disabled] .btn-dgrey.focus {
    background-color: hsl(0,0%,60%);
    border-color: hsl(0,0%,50%);
}

.sidebar {
    /* position: fixed; */
    /* top: 51px; */
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #fff7ff;
    border-right: 1px solid #eee;
}

/* hide sidebar for print */
@media print {
    .sidebar {
        display: none !important;
    }
}

/* Sidebar navigation */
.nav-sidebar {
    margin-right: -21px; /* 20px padding + 1px border */
    margin-bottom: 20px;
    margin-left: -20px;
}
.nav-sidebar > li > a {
    padding-right: 20px;
    padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
    color: #fff;
    background-color: #005f6f;
}

.toolbar-brand {
    float: left;
    padding-left: 1em;
}

/* adds indicator to collapsing panel headings, note custom heading classname
    so don't have to use it for panels with collapse */

.sidebar-menu-panel-heading .accordion-toggle:after {
    float: right !important;
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e252";    /* adjust as needed, taken from bootstrap.css */
    color: grey;         /* adjust as needed */
}

.sidebar-menu-panel-heading .accordion-toggle.collapsed:after {
    float: right !important;
    /* symbol for "collapsed" panels */
    content: "\e250";    /* adjust as needed, taken from bootstrap.css */
    color: grey;         /* adjust as needed */
}

.sidebar-menu-panel-heading a.accordion-toggle {
    text-decoration: none;
}

.list-group-noborder .list-group-item {
    border: 0;
}

/* spinner animation */

.glyphicon.spinning {
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;

}

@keyframes spin {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1) rotate(360deg); }
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

a.no-decoration:hover, a.no-decoration:focus{
    text-decoration: none;
}

.addonLabelOverride{
    min-width: 258px;
    text-align: left;
}

.bg_white{
    background-color: white !important;
}

.tooltip.in {
    opacity: 2;
}
.tooltip-inner {
    max-width: 1200px;
    color: black;
    text-align: justify;
    background-color: #56b0ff;
    border-radius: 10px;
}
.bg_disabled_grey {
   background-color: #eee !important;
}

.kitAwaitingTreatInOrder {
   background-color: #FBC715;
}
.kitTreatAvailable {
   background-color: #79F803;
}
.kitTreatUnavailable {
   background-color: #EFBFE2;
}
.kitTreatUsed {
   background-color: #92BBFF;
}

.treatDestroyed {
   background-color: #9BACB6;
}

.alert-sm {
   padding-top: 2px !important;
   padding-bottom: 2px !important;
   margin-bottom: 2px !important;
}