/* Sorted alphabetically, with @media queries at the end */
a[aria-expanded=true] .fa-chevron-right.switchable {
    display: none;
}
a[aria-expanded=false] .fa-chevron-down.switchable {
    display: none;
}


.actions ul.dropdown-menu li {
    padding: 0;
    border-right: none;
}

.active-inactive-status .min-width-constraint {
    display: inline-block; /* Needed to override span's default behaviour */
    min-width: 5em;
    line-height: 14px; /* Slightly fatter line height of Bootstrap 2 labels */
}

.alert .popover {
    color: black;
}

.asciiEntry {
    /* From code/pre markup of bootstrap.css */
    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
}

.ajax-infiniti-spinner {
    margin: 12px;
    width: 18px;
    height: 18px;
    box-sizing: border-box;

    border: solid 2px transparent;
    border-top-color: #29d;
    border-left-color: #29d;
    border-radius: 50%;

    -webkit-animation: nprogress-spinner 400ms linear infinite;
    animation: nprogress-spinner 400ms linear infinite;
}

.back-to-top {
    display: none;
    margin: 0;
    position: fixed;
    bottom: 0;
    right: 25%; /* between walkme and freshdesk overlays */
    font-size: 16px;
    text-decoration: none;
    z-index: 100;
    border-radius: 0.25em 0.25em 0 0;
}

.badge-white.badge-white {
    background-color: white;
    color: blue;
    border: grey thin solid;
    border-radius: 6px;
}

.badge-danger.badge-danger {
    background-color: #d9534f;
    color: white;
}

.bibref-merge-title,
.user-merge-username,
.user-merge-show-always,
.bibref-merge-target-field,
.user-merge-target-field,
.bibref-merge-source-field,
.user-merge-source-field,
.bibref-merge-resource,
.user-merge-contact {
    padding: 4px 0;
    border-top: 1px grey solid;
}

.black-text {
    color: #000000;
}

.breadcrumb {
    margin-bottom: 15px;
    margin-right: 30px;
}

/* TODO: Remove #page-wrapper from pages and collapse this class into the primary .breadcrumb class */
.breadcrumb-margin {
    margin-top: 15px;
}

.btn-link:hover {
    text-decoration: none;
}

.btn-yellow {
    color: #8a6d3b;
    background-color: lightgoldenrodyellow;
    border-color: #F8E514;
}
.btn-yellow:hover,
.btn-yellow:focus {
    background-color: #F8E514;
    border-color: #f0ad4e;
}

/* require btn-success or btn-warning, so purple buttons can leverage existing bootstrap markup */
.btn-success.purple.purple.purple,
.btn-warning.purple.purple.purple {
    background-color: #9b59b6;
    border-color: #8e44ad;
}
.btn-success.purple.purple.purple:hover,
.btn-success.purple.purple.purple:focus,
.btn-success.purple.purple.purple.focus,
.btn-success.purple.purple.purple:active,
.btn-success.purple.purple.purple.active,
.open > .dropdown-toggle.btn-success.purple.purple.purple,
.btn-warning.purple.purple.purple:hover,
.btn-warning.purple.purple.purple:focus,
.btn-warning.purple.purple.purple.focus,
.btn-warning.purple.purple.purple:active,
.btn-warning.purple.purple.purple.active,
.open > .dropdown-toggle.btn-warning.purple.purple.purple {
    background-color: #8e44ad;
    border-color: #703789;
}
fieldset[disabled] .btn-success.purple.purple.purple.active,
fieldset[disabled] .btn-warning.purple.purple.purple.active {
    background-color: #9b59b6;
    border-color: #8e44ad;
}
.btn-success.purple.purple.purple .badge,
.btn-warning.purple.purple.purple .badge {
    color: #9b59b6;
    background-color: #fff;
}

.carousel-caption {
    color: #000000;
    text-shadow: none;
    top: auto;
    bottom: 0.5em;
    left: 0;
    right: 0;
    font-size: 1.2vw; /* By default, 120% of tagcloud font-size */
    height: 3.6vw; /* font-size * 3 */
    min-height: 3.6vw;
    max-height: 3.6vw;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0px;
    padding-bottom: 0px;
    overflow: hidden;
}

.carousel-control {
    width: 10%;
}

.carousel-control, .picpac-carousel-control {
    color: lightblue;
    text-shadow: none;
    opacity: 1;
}

.carousel-control:hover, .carousel-control:hover:focus,
.picpac-carousel-control:hover, .picpac-carousel-control:hover:focus
{
    color: steelblue;
    text-decoration: none;
    filter: none;
    outline: 0;
    opacity: 1;
}

.carousel-control:focus, .picpac-carousel-control:focus {
    color: lightblue;
    text-decoration: none;
    filter: none;
    outline: 0;
    opacity: 1;
}

/* Derived from glyphicon classes */
.carousel-control .fa, .picpac-carousel-control .fa {
    font-style: normal;
    font-weight: 400;
    line-height: 1;

}

.carousel-control .fa-chevron-circle-left {
    left: 50%;
    margin-left: -15px;
}

.carousel-control .fa-chevron-circle-right {
    right: 50%;
    margin-right: -15px;
}

.carousel-control .fa-chevron-circle-left, .carousel-control .fa-chevron-circle-right {
    position: absolute;
    top: 50%;
    top: -webkit-calc(50% - (3.6vw + 0.5em + 10px) / 2);
    top: -moz-calc(50% - (3.6vw + 0.5em + 10px) / 2);
    top: calc(50% - (3.6vw + 0.5em + 10px) / 2);
    z-index: 5;
    display: inline-block;
    margin-top: -15px;
}

.carousel-control .fa-chevron-circle-left, .carousel-control .fa-chevron-circle-right,
.picpac-carousel-control .fa-chevron-circle-left, .picpac-carousel-control .fa-chevron-circle-right {
    width: 3vw;
    height: 3vw;
    font-size: 3vw;
}


.carousel-control.left, .carousel-control.right {
    background-image: none;
    background-repeat: no-repeat;
}

.carousel-inner.center {
    text-align: center;
}

.carousel-inner > .item {
    /* Requires parent to have a well-defined height for this to work correctly. */
    height: 100%;
}

/* If the carousel is marked-up as a .row then child .rows usually won't desire the same margin offset */
.carousel.row .row {
    margin-left: 0px;
    margin-right: 0px;
}

.carousel-image-box {
    height: auto; /* Generic fallback for older browsers. Not equivalent to correct calc behaviour. */
    height: -webkit-calc(100% - 1em - 3.6vw);
    height: -moz-calc(100% - 1em - 3.6vw);
    height: calc(100% - 1em - 3.6vw);
    /* Pad out the carousel control bars */
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 10px;
}

.carousel-image-box > .center {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.carousel-image-box > img {
    max-width: 100%;
    max-height: 100%;
}

.carousel-image-box .fa {
    color: #C0C0C0;
}

#catalogueSourceHeader.deleted,
#catalogueSourceMediaType.deleted,
#userSourceHeader.deleted {
    text-decoration: line-through;
    color: red;
}

.img-margin-auto:not(.skip-margin-auto) {
    margin-left: auto;
    margin-right: auto;
}
/* Was missing from bootstrap 3.3.1 for horizontal collapse. See bootstrap-collapse-horizontal.js for more information */
.collapsing.width {
    -webkit-transition: width 0.5s linear;
    -o-transitiony:  width 0.5s linear;
    transition:  width 0.5s linear;
    width: 0;
    height: auto;
}

.concord-force-td-overflow {
    white-space: nowrap;
    overflow: hidden;
}

.content {
  min-height: 700px;
  overflow: visible;
}

.content.no-sidebar {
    margin-left: 0 !important;
}

.custom-label-horizontal-separator {
    border-bottom: 2px #ddd solid;
    padding-bottom: 15px;
}

#customTagInfoSelect option {
    font-family: monospace;
}

.dashboard-stat-extra {
    font-weight: lighter;
    font-family: 'Lato', 'Open Sans', 'sans-serif';
    font-style: italic;
    font-size: 13px;
    position: absolute;
    right: 50px;
}

div.row-hover:hover,
tr.row-hover:hover {
    background-color: #f5fafc;
}

div.hover-darken-trigger:hover .hover-darken-target {
    filter: brightness(70%);
}

.ellipsis-overflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fa-10vw {
    font-size: 10vw;
}

/* Adblock is fairly common nowadays and filter lists like Fanboy's Social Blocking List will block our social network buttons unless renamed */
/* Using details from font-awesome 4.1.0 */

.fa-alt-google-plus:before {
    content: "\f0d5";
}

.fa-alt-google-plus-square:before {
    content: "\f0d4";
}

.fa-alt-facebook-square:before {
    content: "\f082";
}

.fa-alt-twitter:before {
    content: "\f099";
}

.fa-alt-vimeo-square:before {
    content: "\f194";
}

.fa-alt-youtube-square:before {
    content: "\f166";
}

.fa-alt-youtube:before {
    content: "\f167";
}

/* Unicode entities not defined in font-awesome.css but using the generic typeface pages of the font-awesome font */
.fa-custom-mac-control-key:before {
    content: "\2318";
}

/* fa-fw for fa-2x icons */
.fa-fw-2x {
    width: 2.57142858em; /* double fa-fw */
    text-align: center;
}

.gold {
    color: #F8E514;
}
.gold-bg {
    background-color: #F8E514;
}

#fc_chat_layout {
    right: 130px !important;
}

/* Nudge support button to show version footer */
.freshwidget-button {
    left: calc(100% - 200px) !important;
}

/*
Used when we want to override background colours on Bootstrap elements with different standard Bootstrap colours
but when we can't do directly because Bootstrap class order throws out the specificity wanted in this case.
Uses the duplicate self-reference trick to increase css selectivity.
*/
.force-bg-danger.force-bg-danger.force-bg-danger.force-bg-danger {
    background-color: #f2dede;
}

.force-bg-info.force-bg-info.force-bg-info.force-bg-info {
    background-color: #d9edf7;
}

.force-bg-label-danger.force-bg-label-danger.force-bg-label-danger.force-bg-label-danger {
    background-color: #d9534f;
}

.force-bg-label-info.force-bg-label-info.force-bg-label-info.force-bg-label-info {
    background-color: #5bc0de;
}

.force-bg-label-success.force-bg-label-success.force-bg-label-success.force-bg-label-success {
    background-color: #5cb85c;
}

.force-bg-label-success.force-bg-label-success.force-bg-label-success.force-bg-label-success.hatched-pattern {
    background:
            repeating-linear-gradient(
                    45deg,
                    #ffffff,
                    #ffffff 10px,
                    #5cb85c 10px,
                    #5cb85c 20px
            );
}

.force-bg-label-warning.force-bg-label-warning.force-bg-label-warning.force-bg-label-warning {
    background-color: #f0ad4e;
}

.force-bg-primary.force-bg-primary.force-bg-primary.force-bg-primary {
    color: #fff;
    background-color: #337ab7;
}

.force-bg-success.force-bg-success.force-bg-success.force-bg-success {
    background-color: #dff0d8;
}

.force-bg-success.force-bg-success.force-bg-success.force-bg-success.hatched-pattern {
    background:
            repeating-linear-gradient(
                    45deg,
                    #ffffff,
                    #ffffff 10px,
                    #dff0d8 10px,
                    #dff0d8 20px
            );
}

.force-bg-warning.force-bg-warning.force-bg-warning.force-bg-warning {
    background-color: #fcf8e3;
}

.force-bg-grey.force-bg-grey.force-bg-grey.force-bg-grey {
    background-color: #dddddd;
}

.force-bg-grey.force-bg-grey.force-bg-grey.force-bg-grey.hatched-pattern {
    background:
            repeating-linear-gradient(
                    45deg,
                    #ffffff,
                    #ffffff 10px,
                    #dddddd 10px,
                    #dddddd 20px
            );
}

.force-bg-lightgrey.force-bg-lightgrey.force-bg-lightgrey.force-bg-lightgrey {
    background-color: #F7F7F7;
}

.force-fg-text-success.force-fg-text-success.force-fg-text-success.force-fg-text-success {
    color: #3c763d;
}

/* Boosted versions of Bootstrap's text-* classes for overpowering more specific CSS classes */
.force-text-center.force-text-center.force-text-center.force-text-center {
    text-align: center;
}

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

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

/* Margin of form controls; for stacking */
/* Margin of buttons when marked-up as input-group-btn */
.form-control.stack-margin, .input-group-btn .btn.stack-margin {
    margin-bottom: 15px;
}

.form-sidebar .alert {
    margin: 10px 0px 30px 0px;
}

.form-sidebar .alert i {
    margin-bottom: 30px;
}

.form-sidebar h6 {
    font-weight: 600;
    text-transform: uppercase;
}

.form-sidebar p {
    color: #777e86;
}

.form-sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.form-sidebar ul a {
    text-decoration: underline;
}



#circGreetingName {
    font-size: 16px;
    font-weight: bold;
}

/* Sometimes you don't want responsive grid as it is very wasteful of available space. */
.stop-assuming-100-percent-bootstrap {
    min-width: 0;
    width: auto;
    display: inline;
}

/* Standard Bootstrap .has-error colouration; for dealing with a placeholder quirk */
/* http://stackoverflow.com/a/19621330 */
.has-error input[type="text"]::-webkit-input-placeholder,
.has-error input[type="text"]:-moz-placeholder,
.has-error input[type="text"]::-moz-placeholder,
.has-error input[type="text"]:-ms-placeholder {
    color:#A94442;
}
/* Increasing specificity to force red colouration instead of old detailed admin stylings in bootstrap-overrides.css */
.has-error.has-error.has-error.has-error.has-error .input-group-addon {
    color: #A94442;
    background-color: #F2DEDE;
    border-color: #A94442;
}

.header {
    margin-bottom: 15px;
}

/*
Useful for jQuery (style) vs Bootstrap (class) hide/show style specificity for older pre-BS3 pages.
Using duplication selector specificity trick to raise this above normal bootstrap 'display:' and below jQuery 'style=' specificity.
http://stackoverflow.com/a/19399881/2805324
*/
.hide-unimportant.hide-unimportant.hide-unimportant.hide-unimportant {
    display: none;
}

/* Version of ul.actions classes for situations where <ul><li> doesn't play well with its parent or sibling elements. Add 'icon-action' to applicable <i> blocks. */
/* We could replace usages of the <ul><li> icon markup with this 'action-icon' markup for consistency and flexibility. */
i.action-icon {
    font-size: 17px;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.6;
    -moz-transition: opacity .1s linear;
    -webkit-transition: opacity .1s linear;
    -o-transition: opacity .1s linear;
    transition: opacity .1s linear;
}

/* Remove dotted rectangle that can sometimes surround and persist on a button on focus */
i.action-icon:focus, ul.actions li button:focus, ul.actions li a:focus {
    outline: none;
}

i.action-icon.disabled.disabled.disabled.disabled,
#configureLibraryTabContent i.action-icon.fa-times.disabled.disabled.disabled.disabled {
    color: #C1C1C1;
    cursor: default;
    opacity: 0.6;
}

i.action-icon.fa-check,
i.action-icon.green-action {
    color: #468847;
}

i.action-icon.fa-chevron-up, i.action-icon.fa-chevron-up {
    color: #000000;
}

i.action-icon.fa-times,
i.action-icon.red-action {
    color: #B94A48;
}

i.action-icon.fa-times-circle,
ul.actions .fa-times-circle,
i.action-icon.orange-action {
    color: #FAA732;
}

/* TODO: Make colouration consistent between this and the #configureLibraryTabContent version */
i.action-icon.fa-times.disabled.disabled.disabled.disabled {
    color: #526273;
    cursor: default;
}

i.action-icon:hover{
    opacity: 1;
}

i.icon-small {
    font-size: 15px;
}

img.backwardGlanceCoverImageDisplaySizing {
    max-height: 128px;
    max-width: 100px;
}

img.similarRecordsCoverImageDisplaySizing,
img.dashboardCoverImageDisplaySizing {
    max-height: 60px;
    max-width: 45px;
    /* Ditto */
    height: 60px;
    width: 45px;
}

img.digitalCirculationConfirmSmallCoverSizing {
    max-height: 100px;
}

img.weblinkCoverImageDisplaySizing {
    max-height: 400px;
    max-width: 282px;
}

img.opacItemCoverImageDisplaySizing,
img.coverImageModalDisplaySizing,
img.mergeToolCoverImageDisplaySizing {
    max-height: 256px;
    max-width: 192px;
}

img.britannicaCoverImageDisplaySizing,
img.catalogueCoverImageDisplaySizing,
img.overdriveCoverImageDisplaySizing,
img.opacCoverImageDisplaySizing,
img.worldbookCoverImageDisplaySizing,
img.z3950CoverImageDisplaySizing,
img.resourceReportCoverImageDisplaySizing,
img.myListCoverImageDisplaySizing
{
    max-height: 128px;
    /* max-width: 110px; */
}

img.myListCoverImageDisplaySizing.showing-media-icon {
    padding: 25% 0;
}

.indent-50px.indent-50px.indent-50px.indent-50px {
    padding-left: 50px;
}

td.indent-50px.indent-50px.indent-50px.indent-50px {
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
}



.input-group-addon {
    min-width:35px;
}



.label-red-black.label-red-black {
    background-color: black;
    color: red;
}

.label-red-black[href]:hover,
.label-red-black[href]:focus {
    color: darkred;
}

.label-dark-monochrome.label-dark-monochrome {
    background-color: black;
    color: white;
}

.label-dark-monochrome[href]:hover,
.label-dark-monochrome[href]:focus {
    color: cyan;
}

.label-purple.label-purple {
    background-color: #9b59b6;
}
.label-purple[href]:hover,
.label-purple[href]:focus {
    background-color: #8e44ad;
}
.label-pale-warning.label-pale-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border: thin solid #8a6d3b;
}
.label-pale-warning[href]:hover,
.label-pale-warning[href]:focus {
    background-color: #f7ecb5;
}
.label-pale-purple.label-pale-purple {
    color: black;
    background-color: #e4b1ff;
    border: thin solid #8e44ad;
}
.label-pale-purple[href]:hover,
.label-pale-purple[href]:focus {
    background-color: #e58cff;
}
.label-white.label-white {
    background-color: white;
    color: black;
    border: black thin solid;
}

.label-white[href]:hover,
.label-white[href]:focus {
    background-color: lightgrey;
}

.label-larger.label-larger {
    font-size: 100%;
}

.labels-without-bold label {
    font-weight: normal;
}

/* Workaround. See .tab-pane notes */
#libraryAccessControlContent .tab-pane {
    padding-top: 0;
}

.libraryAccessControlRow:not(:first-child) {
    /* thin-outline-top-xs */
    box-shadow: 0 -1px 0 0 #DDDDDD;
}

#librarySearchBarGroup .min-width-constraint {
    min-width: 12em;
}

#linkInputTA {
    white-space: pre;
    word-wrap: normal;
    overflow-x: auto;
    overflow-y: hidden;
    margin-top: 5px;
    margin-bottom: 5px;
}

.longer-tooltip .tooltip-inner {
    max-width: 600px;
}

.login-wrapper .no-account {
    margin-top: 0px;
}

.login-wrapper .no-account p {
    color: #777 ;
    margin-bottom: 0px;
}

#main-stats {
	margin-left: -15px;
	margin-right: -15px;
}

.margin-bottom-fat {
    margin-bottom: 3vw;
    margin-bottom: -webkit-calc(3vw + 0.75em);
    margin-bottom: -moz-calc(3vw + 0.75em);
    margin-bottom: calc(3vw + 0.75em);
}

.margin-bottom-modest {
    margin-bottom: 2vw;
    margin-bottom: -webkit-calc(2vw + 0.5em);
    margin-bottom: -moz-calc(2vw + 0.5em);
    margin-bottom: calc(2vw + 0.5em);
}

.margin-bottom-thin {
    margin-bottom: 1vw;
    margin-bottom: -webkit-calc(1vw + 0.25em);
    margin-bottom: -moz-calc(1vw + 0.25em);
    margin-bottom: calc(1vw + 0.25em);
}

.margin-top-fat {
    margin-top: 3vw;
    margin-top: -webkit-calc(3vw + 0.75em);
    margin-top: -moz-calc(3vw + 0.75em);
    margin-top: calc(3vw + 0.75em);
}

.margin-top-modest {
    margin-top: 2vw;
    margin-top: -webkit-calc(2vw + 0.5em);
    margin-top: -moz-calc(2vw + 0.5em);
    margin-top: calc(2vw + 0.5em);
}

.margin-top-thin {
    margin-top: 1vw;
    margin-top: -webkit-calc(1vw + 0.25em);
    margin-top: -moz-calc(1vw + 0.25em);
    margin-top: calc(1vw + 0.25em);
}

#markForDeleteButton.deleted {
    color: red;
}

/* Fixes a floating TinyMCE tooltip issue */
.mce-tooltip {
    position: fixed !important;
}

.merge-resource-barcode {
    text-transform: uppercase;
}

/* Ported from layout-ext.css for first-cut conversion sweep from Bootstrap 2 to 3. Could benefit from review and potential consolidation */
.minimal-padding, .minimal-padding td, td.minimal-padding {
    padding: 1px;
}

.mini-switch.input-group, .mini-switch.input-group > input[type='text'], .mini-switch.input-group > input[type='number'], .mini-switch.input-group > select   {
    min-height: 38px;
    height: 38px;
    width: 100%;
}
.mini-switch.input-group .input-group-addon {
    width: 90px;
}

.disabled-user-text-block {
    color: #8B8B8B;
    font-style: italic;
    /* background-color: #F9F9F9; */
}
.disabled-user-text-block > td {
    color: #8B8B8B;
    font-style: italic;
    /* background-color: #F9F9F9; */
}

#messages-tray {
    position: fixed;
    top: 52px;
    bottom: 0;
    width: 450px;
    right: -450px;
    background-color: lightyellow;
    border: 2px tan solid;
}

#messages-tray .wrapper {
  position: relative;
  height: 100%;
  width: 410px;
  margin: 20px;
  overflow: auto;
}

.navbar {
    max-height: 54px;
}

.navbar .not-prod {
    color: #DD00DD;
    line-height: 15px;
    font-size: 15px;
}

.navbar .libsupport {
    color: #FFBF00;
    line-height: 15px;
    font-size: 15px;
}

.navbar .self-service {
    color: #00cc00 !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    letter-spacing: 3px;
    border-right: 1px solid #101417;
    margin-right: 20px;
}

.navbar .portal-collection {
    color: #ffbf00;
    text-transform: uppercase !important;
    font-size: 20px !important;
    letter-spacing: 3px;
}

.navbar .portal-collection-blurb {
    color: #ffbf00;
    font-style: italic;
    font-family: serif;
    font-size: 20px;
}

#navbar-user .not-self {
    color: red;
}

#navbar-user li:hover .development-shortcut {
    color: red !important;
}

.navbar-brand {
    min-width: 160px;
}

.navbar-brand>img {
    margin-left: auto;
    margin-right: auto;
}

.navbar .settings {
    font-size: 15px;
}

.navbar .settings i {
    font-size: 20px !important;
}

.navbar-inverse .nav>li>a {
    height: 50px;
}

.navbar-inverse input.search {
    margin-right: 15px !important
}

.no-border.no-border.no-border.no-border {
    border: none;
}

.no-gutter, .no-horizontal-padding {
    padding-left:0;
    padding-right:0;
}

.no-gutter-cascade [class*="col-"] {
    padding-left:0;
    padding-right:0;
}

.no-hover-bg-colour.no-hover-bg-colour.no-hover-bg-colour.no-hover-bg-colour:hover,
.no-hover-bg-colour.no-hover-bg-colour.no-hover-bg-colour.no-hover-bg-colour:hover td {
    background-color: transparent;
}

/* See .no-left-margin-[breakpoint] for screen-size specific margin removals; or to work with col-*-offsets */
.no-left-margin {
    margin-left: 0;
}

.no-margin {
    margin: 0px 0px 0px 0px;
}

.no-right-margin {
    margin-right: 0;
}

.no-vertical-padding {
    padding-top: 0;
    padding-bottom: 0;
}

.normal-cursor {
    /* By 'default' this means the standard cursor for a platform/browser rather than the 'auto' default of cursor display logic */
    cursor: default;
}

/* Equivalent to <div class="center margin-top margin-bottom" style="font-style: italic; color: #696D73;"><h4></h4></div> */
.opac-display-pane-title {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #696D73;
    font-style: italic;
    font-size: 18px;
}

/* Portlet text is currently not size responsive. Same as lg:opac-display-pane-title */
/* This is *roughly* equivalent to a pixel height of 56px (in FireFox); portlet should assume somewhat more than this */
.opac-display-pane-title-portlet {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    margin-bottom: 15px;
    color: #696D73;
    font-style: italic;
    font-size: 18px;
}

.opac-refinement-name {
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    color: #777;

}

/* lg-sweep only. Revise for multi-screen */
.order-cost-large {
    font-size: 20px;
    font-weight: bold;
}

.overdue-current-loans-count {
    display: inline-block; /* Needed to override span's default behaviour */
    min-width: 8em;
}

.overdue-returns-count {
    display: inline-block; /* Needed to override span's default behaviour */
    min-width: 100%;
}

.pad-col-evenly, .pad-top-and-bottom-15 {
    /* Same values as left/right padding of bootstrap col-* classes */
    /* Use .row.collapse-vertical-margin to treat vertical padding the same way as .row treats horizontal padding */
    padding-top: 15px;
    padding-bottom: 15px;
}

/*
Usual debate as whether we want declarative (.class) or semantic (element dom) styling.
I generally think semantic styling is better; but it requires more thought, time and design to do properly - like OOP polymorphism.
*/
.padding-sides-30 {
    padding-left: 30px;
    padding-right: 30px;
}

.pad-top-and-bottom-5.pad-top-and-bottom-5.pad-top-and-bottom-5.pad-top-and-bottom-5 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.pad-top-and-bottom-10.pad-top-and-bottom-10.pad-top-and-bottom-10.pad-top-and-bottom-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Ported from BS2 layout-ext for printing purposes */
@page land { size: A4 landscape; }
@page port { size: A4 portrait; }
@media print {
    abbr[title]:after {
        content: " (" attr(title) ")";
    }
}

#page-wrapper {
	margin-top: 15px;
}

/* Extracted from Bootstrap 2 Detail Admin */
/* Might want to shift this from declarative (DOM element) to semantic (class) CSS */
#page-wrapper h4, #portal h4 {
    color: #696d73;
    font-style: italic;
}

#page-wrapper h4 small {
    color: #999999;
}

.panel-default > div > .panel-row-divider {
    border-color: #dddddd;
}

.panel-info > div > .panel-row-divider {
    border-color: #bce8f1;
}
/* Similar to .list-group-items in a panel */
.panel-row-divider {
    padding: 10px 15px;
    border: 1px solid #ddd;
}
/*
.panel-row-divider:first-child {
    border-top: none;
}
.panel-row-divider:last-child {
    border-bottom: none;
}
*/

.personal-info h5.personal-title {
    font-size: 22px;
    margin: 0 0 50px 50px;
    color: #696d73;
    font-style: italic;
}

/* Alphabet buttons of Static PicPAC on 'xs' screens will flow/wrap in the same manner as .picpac-item-group elements */
.picpac-alphabet-flow {
    position: relative;
    min-height: 1px;
    padding: 2px;
    float: left;
    width: 70px; /* Derived from old Bootstrap 2 / DetailAdmin values */
}

.picpac-grouped-search-item, .picpac-grouped-title {
    padding: 9px;
}

.picpac-item-group {
    border: 1px solid #C0C0C0;
    border-radius: 6px;
    padding: 0px;
    /*
    Max-width is required because the source images are not as large as the potential group expansion if unbound by max-width
    If we assume all source images are the same size, then max-width of .picpac-item-group is:
     - ((img-width + img-padding + img-border + img-outer-padding) * 2) + group-border
     - ((150px + 10px + 2px + 18px) * 2) + 2px
    */
    max-width: 362px;
}

.picpac-search-item {
    padding-top: 15px;
    padding-bottom: 15px;
}

.picpac-search-item .tooltip-inner, .picpac-seventh .tooltip-inner, .picpac-thirteenth .tooltip-inner {
    white-space: nowrap;
}

.picpac-search-item img {
    margin-top: 15px;
}

.picpac-search-item img, .picpac-grouped-search-item img {
    border: 1px solid #C0C0C0;
    padding: 5px;
}

.picpac-search-item img:hover, .picpac-grouped-search-item img:hover {
    border: 1px solid lightskyblue;
}

/* Used by PicPac sub-selection icons . Similar to col-*-1 except for 1/7 instead of 1/12. */
.picpac-seventh {
    position: relative;
    min-height: 1px;
    padding: 2px;
    float: left;
    width: 14.28571429%;
}

/* Used by PicPac sub-selection icons . Similar to col-*-1 except for 1/13 instead of 1/12. */
.picpac-thirteenth {
    position: relative;
    min-height: 1px;
    padding: 2px;
    float: left;
    /* width: 7.69230769%; */
}

.picpac-thirteenth img, .picpac-seventh img {
    /* border: 1px solid black; */
    max-height:100px;
}

.picpac-thirteenth .img-rounded, .picpac-seventh .img-rounded {
    border-radius: 5px;
}

.pointer {
    cursor:pointer;
}

/* TODO: Revisit when doing Bootstrap 3 mobile-first pages */
.popover {
    max-width: 414px;
}

/* Ditto */
.popover-content.popover-content.popover-content {
    min-width: 250px;
    /* Required to keep popover arrow aligned with white rather than grey neighbour */
    /* min-height: 60px; */ /* TODO: Remove entirely if the issue it was fixing has gone away */
}

#portal .breadcrumb {
    margin-bottom: 0;
}

#portal .carousel-inner.square-element {
    height: inherit;
}

#portal div.edit-bar {
    text-align: center;
    padding-top: 15px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #DDDDDD;
}

#portal.libpaths-display #portalBuildWrapper {
    margin-top: 15px;
}

#portal .outline {
    /*
    N.B. Bootstrap 3 width sizing can be thrown off by 'border'. You also end up with incorrect jQuery height() results.
    Using outline instead.
    */
    outline: 1px dashed lightgrey;
}

#portal .outline.hover:hover {
    outline: 1px dashed red;
    cursor: move;
}

/* For editor tooltip display; enforcing stronger selectivity. Oddly, overflow-x must be visible for correct display of tooltips with placements of top or bottom. */
#portalBuildWrapper .portalCell.portalCell.portalCell,
#portal .portalBuildCell {
    position : relative;
    height: inherit;
    overflow: visible;
}

#portal .portalCell {
    position : relative;
    height: inherit;
    overflow:hidden;
}

/* This border will not be very evident in build/configure mode due to .outline; hence not shown. */
#portal .portalBuildCell:not(.outline) {
    border-right: 1px solid #DDDDDD;
}

#portal .portalBuildCell:not(.outline):last-child {
    border-right: none;
}

#portal .portalBuildCell .overlay, #portal .portalBuildRow .overlay {
    position:absolute;
    top: 0;
    left: 0px;
    /*height:inherit;*/
    width: 100%;
    z-index: 10;
    /*margin-top: 10px;*/
    padding-top: 2px;
    padding-right: 2px;
}

#portal:not(.libpaths-display) .portalBuildCell > :not(.overlay) {
    opacity: 0.5;
}

#portal .portalBuildCell .overlay > .actions, #portal .portalBuildRow .overlay > .actions {
    /*border: thin solid #D0DDE9;*/
    border: none;
    border-radius: 4px;
    background-color: #ffffff;
}

#portal .portalBuildRow {
    position: relative;
}

#portal .portalBuildRow:first-child {
    border-top: none;
    box-shadow: none;
}

/*
Bootstrap 3 by default uses border-box box-sizing for all elements; which combined with explicit height values throws off
margin-based portal row borders. Hence using explicit dividers instead.
*/
#portal .portalRowNeighourhood > hr {
    margin: 0;
    padding-top: 10px;
    margin-bottom: 10px;
    border: none;
    border-bottom: 1px solid #DDDDDD;
}

#portal .portalRowNeighourhood:last-child > hr {
    display: none;
}

#portal .rowPlaceHolder {
    padding-top: 5px;
    margin-bottom: 5px;
    border-top: 1px solid #edeff1;
    width: 100%;
}

#portal.tab-content .tab-pane > div {
    outline: 1px dashed lightgrey;
}

#portal .ui-state-highlight {
    margin: 0;
    padding: 0;
    float: left;
    border: none;
}

#portal ul.actions {
    padding-top: 5px;
    padding-bottom: 5px;
}

#portal ul.actions li {
    padding: 5px 3px;
}

/* .raty-div as per .minimal-padding */
.raty-div {
    display: inline;
    vertical-align: text-top;
    color:#F8E514;
	-webkit-text-stroke: 1px #aaa;
    /* Cross-browser CSS equivalent to non-CSS text stroke; but not as crisp unfortunately
    text-shadow:
        -1px -1px 0 #AAAAAA,
         1px -1px 0 #AAAAAA,
        -1px  1px 0 #AAAAAA,
         1px  1px 0 #AAAAAA;
    */
	z-index: 1 ;
}

.search-results-grid .raty-div {
  bottom: 5px;
  position: absolute;
}
.search-results-grid .staff-pick-div {
  top: 10px;
  position: absolute;
}

table.strike-able {
    border-collapse: collapse;
}
table.strike-able tr td,
table.strike-able tr th {
    position: relative;
}

table.strike-able tr.struck-out {
    background-color: lightgrey;
}

table.strike-able tr.struck-out td.strike-able:before {
    content: " ";
    position: absolute;
    top: 50%;
    left: 0;
    border-bottom: 2px solid #d9534f;
    width: 100%;
}

.row.collapse-vertical-margin {
    margin-top: -15px;
    margin-bottom: -15px;
}

.row.narrow-margin {
    margin-left: -5px;
    margin-right: -5px;
}

#reviews .raty-div:not(#newRating) {
    /* Re-evaluate this later for responsive viewport pages */
    min-width: 145px;
    min-height: 30px;
    font-size: 14px; /* Controls size of rating stars. */
}

/*
Allows for columns of same height in a row. With important limitations:
    - Columns are centered automatically.
    - You can have only one line of columns in the same row.
    - Applying Boostrap push, pulls and offset breaks the layout.
Ref: http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
*/
.same-height-columns {
    display: table;
    width: 100%;
}

/* Hack to get 'display: table' to behave correctly alongside form-group margins */
.same-height-columns.form-group {
    width: -webkit-calc(100% + 30px);
    width: -moz-calc(100% + 30px);
    width: calc(100% + 30px);
}

.same-height-col-bottom {
    vertical-align: bottom;
}

.same-height-col-center {
    text-align: center;
    vertical-align: middle;
}

.same-height-col-middle {
    vertical-align: middle;
}

.same-height-col-top {
    vertical-align: top;
}

.same-height-col-xs {
    display: table-cell;
    float: none !important;
}

#samlIntegration .identity-provider-summary {
    width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-notes small {
    font-size: 11px; /* Approx. 8pt font. The smallest practical readable font size for normal typefaces. */
    line-height: 20px; /* Derived from Bootstrap 2 version of 'blockquote small' */
    color: #999999;  /* Derived from Bootstrap 2 version of 'blockquote small' */
}



/* Colour pinched from Google's "Did you mean" */
.showing-results-for-text {
    color: #DD4B39;
    font-style: italic;
}

.showing-results-for-text-standard {
    font-style: italic;
}

/* As per .hide-unimportant */
.show-unimportant.show-unimportant.show-unimportant.show-unimportant {
    display: block;
}

/* Similar to .search-result-notes font-size */
.small-popover-text {
    font-size: 11px;
}

#sidebar-nav {
	padding-top: 0;
}

tbody.similarity-highlighting .similar-field-highlight {
    border: thin solid yellow;
    background-color: lightgoldenrodyellow;
    border-radius: 6px;
    padding: 3px;
}

.skip-action-tinting.skip-action-tinting.skip-action-tinting.skip-action-tinting.skip-action-tinting {
    opacity: 1;
    -moz-transition: unset;
    -webkit-transition: unset;
    -o-transition: unset;
    transition: unset;
}

.step-content {
    margin-top: 5px !important;
    margin-right: 15px !important;
    margin-left: 5px !important;
}

#supplierAddressCollapsible label, #supplierReturnAddressCollapsible label, #customCssSubSection label, #schoolAddressSection label {
    font-weight: normal;
}

.switch-column-small {
    min-width: 94px;
}

/* TODO: Revisit if we actually want this. It accumulates padding for each successive tab */
.tab-pane {
    padding-top: 15px;
}
.tab-pane.leaf-of-portal-view-wireframe {
    padding-top: 0;
}
/* Workaround for Bootstrap Switch Bug - https://github.com/nostalgiaz/bootstrap-switch/issues/407 */
.table-products .table input[type="checkbox"].make-switch {
    margin-top: 0;
}

table.simple-counter {
    counter-reset: simplecounter;
}

.table-striped.inverse-striped > tbody > tr:nth-child(odd) {
  background-color: inherit;
}

.table-striped.inverse-striped > tbody > tr:nth-child(even) {
  background-color: #f9f9f9;
}

td.simple-counter::before {
    counter-increment: simplecounter;
    content: counter(simplecounter);
}

tr.returns-line-item > td {
    border-color: darkgrey !important;
    background-color: #f9f9f9;
}

tr.returns-parent-box > td {
    background-color: #f9f9f9;
    font-style: italic;
}

tr.text-muted-cells > td {
    color: #777777;
}

#tabs-wrapper {
	margin-left: -3px;
	background-color: #fdfdfd;
	text-align: center;
	border-bottom: 1px solid #efeef3;
	display: block;
	height: 48px;
}

#tabs-wrapper a.tab {
    white-space: nowrap;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
}

#tabs-wrapper .tab {
	text-align: center;
	padding: 13px 0px 13px 0px;
	border-right: 1px solid #e8e9ee;
	border-left: 1px solid #e8e9ee;
	float: none;
	display: inline-block;
	cursor: pointer;
	position: relative;
	border-top: 2px solid #fdfdfd;
	margin: 0 -2px 0 -2px;
	box-shadow: 1px 0px 0px 0px white;
	font-style: italic;
	color: #686c72;
	font-size: 14px;
	font-weight: 600;
}

#tabs-wrapper .tab.active {
    background: #fff;
    border-top-color: #3b9ff3;
    color: #3b9ff3;
}

/* Same as Bootstrap's .table-hover but for covering groups of <tr> . */
/* Not as extensive as .table-hover in sub-element behaviour */
tbody.group-hover:hover > tr {
    background-color: #f5f5f5;
}

/* text-align-* as per .minimal-padding */
.text-align-center {
    text-align:center !important;
}

.text-align-left {
    text-align:left !important;
}

.text-align-right {
    text-align:right !important;
}

/* Typically relevant for reservation icons */
.text-purple {
    color: #9b59b6;
}

/* Outline and box-shadow do not adjust the size of elements, thus leaving the bootstrap sizing logic alone. */
/* Judicious use of these can allow for borders on non-table layouts; whilst retaining bootstrap responsive grid behaviour */
.thin-outline-xs {
    outline: #DDDDDD solid thin;
}
.thin-outline-sides-xs {
    box-shadow: 1px 0 0 0 #DDDDDD, -1px 0 0 0 #DDDDDD;
}
.thin-outline-top-xs {
    box-shadow: 0 -1px 0 0 #DDDDDD;
}
.thin-outline-bottom-xs {
    outline: none;
    box-shadow: 0 1px 0 0 #DDDDDD;
}
.thin-outline-top-and-bottom-xs {
    box-shadow: 0 1px 0 0 #DDDDDD, 0 -1px 0 0 #DDDDDD;
}
.tooltip-no-wrap > .tooltip {
    white-space: nowrap;
}

.ui-front { z-index: 1050; }

ul.actions li i.icon-remove.disabled {
	color: #526273;
	cursor: default;
}

ul.actions {margin: 0;padding: 0;float: right;white-space: nowrap;}
ul.actions li {display: inline;border-right: 1px solid #d0dde9;padding: 5px 6px 0px 3px;}
ul.actions li i {font-size: 17px; text-decoration: none;}
ul.actions li i {cursor: pointer;opacity: 0.6;transition: opacity .1s linear;-moz-transition: opacity .1s linear;-webkit-transition: opacity .1s linear;-o-transition: opacity .1s linear;}
ul.actions li i.disabled, span.add-on a i.disabled, span.add-on a i.disabled:hover,
ul.actions li i.disabled:hover {color: #C1C1C1; cursor: default; opacity: 0.6;}
ul.actions li i:hover {opacity: 1;}
/* N.B Use '.action-icon' alongside 'fa fa-...' classes for this display markup */
ul.actions li i.icon-chevron-up, ul.actions li i.icon-chevron-down {color: black;}
ul.actions li i.icon-ok {color: #468847; }
ul.actions li i.icon-remove {color: #B94A48;}
ul.actions li i.icon-remove.disabled { color: #526273; cursor: default; }
ul.actions li i.icon-remove-sign {color: #FAA732;}
ul.actions li.last {border: 0 none;}
/*ul.actions li .make-switch.switch-mini {top:-3px;}*/
ul.action li .make-switch[data-size='mini'] { top: -3px; }
ul.actions.sml li i {font-size: 12px; text-decoration: none;}
ul.actions.text-center {float: none;}
ul.actions.text-left { float:none; }

.users-list .table img.avatar {
    top: 0px;
}

.with-sidebar {
    border-right: 1px solid #edeef1;
    box-shadow: 4px 0px 3px -1px rgba(226, 226, 226, 0.1);
}

/* http://stackoverflow.com/a/18429555/2805324 */
.form-horizontal .form-inline .form-group {
    margin-left: 0;
    margin-right: 0;
}

.wizard-actions {
    margin-top: 30px;
    margin-right: 0px !important;
}

.wizard-steps {
    margin: 12px 0 0 50px !important;
}

.wizard-steps li {
    min-width: inherit !important;
    max-width: inherit !important;
}

/* https://coderwall.com/p/0jezca/vertical-spacing-for-bootstrap-columns */
.col-overflow-margin-top [class*="col-"] + [class*="col-"] {
    margin-top: 15px;
}

/* ***** Screen size responsive @Media overrides of the CSS pulled in from one source or another. e.g. DetailAdmin styles ***** */
/* Pixel width breakpoints derived from bootstrap.css (3.x) */

/*
Due to differences between the viewport measurements of javascript and css (http://www.fourfront.us/blog/jquery-window-width-and-media-queries),
javascript should check viewport size via CSS instead of directly (http://modernizr.com/docs/#mq). e.g. Modernizr.mq('(max-width: 767px)');
*/

/* xs */
@media(max-width: 767px) {
    .carousel-caption {
        /*
        Unfortunately min() was removed from the CSS 3 spec; so we can't bound the text from getting too small on the low-end of wide break-points.
        calc(relative + fixed) is a stop-gap polynomial solution. Who says maths isn't relevant. ;-)
        */
        font-size: 3vw; /* For old browser fallback, same as 120% of tagcloud font-size for xs */
        font-size: -webkit-calc(3vw + 0.5em);
        font-size: -moz-calc(3vw + 0.5em);
        font-size: calc(3vw + 0.5em);
        height: 9vw; /* font-size * 3 */
        height: -webkit-calc((3vw + 0.5em) * 3);
        height: -moz-calc((3vw + 0.5em) * 3);
        height: calc((3vw + 0.5em) * 3);
        min-height: 9vw;
        min-height: -webkit-calc((3vw + 0.5em) * 3);
        min-height: -moz-calc((3vw + 0.5em) * 3);
        min-height: calc((3vw + 0.5em) * 3);
        max-height: 9vw; /* font-size * 3 */
        max-height: -webkit-calc((3vw + 0.5em) * 3);
        max-height: -moz-calc((3vw + 0.5em) * 3);
        max-height: calc((3vw + 0.5em) * 3);
    }
    .carousel-image-box {
        height: -webkit-calc(100% - 1em - ((3vw + 0.5em) * 3));
        height: -moz-calc(100% - 1em - ((3vw + 0.5em) * 3));
        height: calc(100% - 1em - ((3vw + 0.5em) * 3));
    }
    .carousel-image-box .fa-10vw {
        font-size: 25vw; /* Equivalent scaling to .tag-cloud-font-size for xs (i.e. x2.5) */
    }
    .carousel-control .fa-chevron-circle-left, .carousel-control .fa-chevron-circle-right {
        top: -webkit-calc(50% - (((3vw + 0.5em) * 3) + 0.5em + 10px) / 2);
        top: -moz-calc(50% - (((3vw + 0.5em) * 3) + 0.5em + 10px) / 2);
        top: calc(50% - (((3vw + 0.5em) * 3) + 0.5em + 10px) / 2);
    }
    .carousel-control .fa-chevron-circle-left, .carousel-control .fa-chevron-circle-right,
    .picpac-carousel-control .fa-chevron-circle-left, .picpac-carousel-control .fa-chevron-circle-right {
        width: 7.5vw;
        height: 7.5vw;
        font-size: 7.5vw;
    }
    .picpac-search-item {
        min-width: 120px;
    }
    .navbar-toggle:not(.hidden-xs) {
        display: block !important;
    }
    /*
    Remove left margin. As this can impact column offsets, this class must be explicitly stated for a screen size;
    it will not cascade to larger screens. Use .no-left-margin if no screen size will have left margin or require col-*-offsets
    */
    .no-left-margin-xs {
        margin-left: 0;
    }
    .no-right-margin-xs {
        margin-right: 0;
    }
    .opac-display-pane-title {
        font-size: 24px; /* Equivalent to <h3> */
    }
    .tag-cloud-font-size {
        font-size: 2.5vw;
    }
    .tag-cloud-font-min-size {
        font-size: 1em;
    }
}

/* sm */
@media (min-width: 768px) and (max-width: 991px) {
    .carousel-caption {
        font-size: 1.8vw; /* 150% of md+ as sharing 1/2 instead of 1/3 of row */
        height: 5.4vw; /* font-size * 3 */
        min-height: 5.4vw;
        max-height: 5.4vw;
    }
    .carousel-image-box {
        height: -webkit-calc(100% - 1em - 5.4vw);
        height: -moz-calc(100% - 1em - 5.4vw);
        height: calc(100% - 1em - 5.4vw);
    }
    .carousel-image-box .fa-10vw {
        font-size: 15vw; /* 150% of md+ as sharing 1/2 instead of 1/3 of row */
    }
    .carousel-control .fa-chevron-circle-left, .carousel-control .fa-chevron-circle-right {
        top: -webkit-calc(50% - (5.4vw + 0.5em + 10px) / 2);
        top: -moz-calc(50% - (5.4vw + 0.5em + 10px) / 2);
        top: calc(50% - (5.4vw + 0.5em + 10px) / 2);
    }
    .carousel-control .fa-chevron-circle-left, .carousel-control .fa-chevron-circle-right,
    .picpac-carousel-control .fa-chevron-circle-left, .picpac-carousel-control .fa-chevron-circle-right {
        width: 4.5vw;
        height: 4.5vw;
        font-size: 4.5vw;
    }
    /*
    Remove left margin. As this can impact column offsets, this class must be explicitly stated for a screen size;
    it will not cascade to larger screens. Use .no-left-margin if no screen size will have left margin or require col-*-offsets
    */
    .no-left-margin-sm {
        margin-left: 0;
    }
    .no-right-margin-sm {
        margin-right: 0;
    }
    .tag-cloud-font-size {
        font-size: 1.5vw;
    }
    .tag-cloud-font-min-size {
        font-size: 1.5em;
    }
}

/* md */
@media (min-width: 992px) and (max-width: 1199px) {
    /*
    Remove left margin. As this can impact column offsets, this class must be explicitly stated for a screen size;
    it will not cascade to larger screens. Use .no-left-margin if no screen size will have left margin or require col-*-offsets
    */
    .no-left-margin-md {
        margin-left: 0;
    }
    .no-right-margin-md {
        margin-right: 0;
    }
}

/* lg */
@media(min-width: 1200px) {
    /*
    Remove left margin. As this can impact column offsets, this class must be explicitly stated for a screen size;
    it will not cascade to larger screens. Use .no-left-margin if no screen size will have left margin or require col-*-offsets
    */
    .no-left-margin-lg {
        margin-left: 0;
    }
    .no-right-margin-lg {
        margin-right: 0;
    }
    .no-thin-outline-lg {
        outline: none;
        box-shadow: none;
    }
    .same-height-col-lg {
        display: table-cell;
        float: none !important;
    }
    .thin-outline-lg {
        outline: #DDDDDD solid thin;
        box-shadow: none;
    }
    .thin-outline-sides-lg {
        outline: none;
        box-shadow: 1px 0 0 0 #DDDDDD, -1px 0 0 0 #DDDDDD;
    }
    .thin-outline-top-lg {
        outline: none;
        box-shadow: 0 -1px 0 0 #DDDDDD;
    }
    .thin-outline-bottom-lg {
        outline: none;
        box-shadow: 0 1px 0 0 #DDDDDD;
    }
    .thin-outline-top-and-bottom-lg {
        outline: none;
        box-shadow: 0 1px 0 0 #DDDDDD, 0 -1px 0 0 #DDDDDD;
    }
    .col-overflow-margin-top  [class*="col-lg-"] + [class*="col-lg-"] {
        margin-top: 0;
    }
}

/* sm or greater */
@media(min-width: 768px) {
    .no-thin-outline-sm {
        outline: none;
        box-shadow: none;
    }
    .same-height-col-sm {
        display: table-cell;
        float: none !important;
    }
    .thin-outline-sm {
        outline: #DDDDDD solid thin;
        box-shadow: none;
    }
    .thin-outline-sides-sm {
        outline: none;
        box-shadow: 1px 0 0 0 #DDDDDD, -1px 0 0 0 #DDDDDD;
    }
    .thin-outline-top-sm {
        outline: none;
        box-shadow: 0 -1px 0 0 #DDDDDD;
    }
    .thin-outline-bottom-sm {
        outline: none;
        box-shadow: 0 1px 0 0 #DDDDDD;
    }
    .thin-outline-top-and-bottom-sm {
        outline: none;
        box-shadow: 0 1px 0 0 #DDDDDD, 0 -1px 0 0 #DDDDDD;
    }
    .col-overflow-margin-top  [class*="col-sm-"] + [class*="col-sm-"] {
        margin-top: 0;
    }
}

/* md or greater */
@media(min-width: 992px) {
    .no-thin-outline-md {
        outline: none;
        box-shadow: none;
    }
    .same-height-col-md {
        display: table-cell;
        float: none !important;
    }
    .thin-outline-md {
        outline: #DDDDDD solid thin;
        box-shadow: none;
    }
    .thin-outline-sides-md {
        outline: none;
        box-shadow: 1px 0 0 0 #DDDDDD, -1px 0 0 0 #DDDDDD;
    }
    .thin-outline-top-md {
        outline: none;
        box-shadow: 0 -1px 0 0 #DDDDDD;
    }
    .thin-outline-bottom-md {
        outline: none;
        box-shadow: 0 1px 0 0 #DDDDDD;
    }
    .thin-outline-top-and-bottom-md {
        outline: none;
        box-shadow: 0 1px 0 0 #DDDDDD, 0 -1px 0 0 #DDDDDD;
    }
    .col-overflow-margin-top  [class*="col-md-"] + [class*="col-md-"] {
        margin-top: 0;
    }
}

/* sm or smaller */
@media(max-width: 991px) {
    .form-sidebar {
        margin-top: 40px;
    }
    .with-sidebar {
        border-right: 0 none;
        box-shadow: none;
    }
}

/* md or smaller */
@media(max-width: 1199px) {

}

/* sm and md only */
@media (min-width: 768px) and (max-width: 1199px) {
    .content {
        margin-left: 57px;
    }
    #sidebar-nav {
        width: 60px;
    }
    #sidebar-nav #dashboard-menu {
        margin-left: 0px;
    }
}

@media print {
    #breadcrumbBar {
        display: none !important;
    }
    #site-footer {
        display: none !important;
    }
    .printableCover {
        page-break-inside: avoid;
    }
    .noPrintedLink a[href]::after {
        content: '' !important;
    }
}