/* TODO: hide opc message - might work with jquery on live system because it
         wouldn't be cross domain * /
div.topbox      {display: none;}
div.lrmargin    {margin: 0;}
*/

/*  Basically very (!) nice way for cover resizing IF they were initialy the
    same (ratio) size: https://stackoverflow.com/a/26573319

    .wrapper { float: left; clear: left; display: table; table-layout: fixed; padding-bottom: 62.5%; max-width: 100px; max-height: 150px; }
    img.recordcoverx { display: table-cell; width: 100%; }

    In Template:
    <div class="wrapper col-xs-12">
        <span class="tub-resultnumber"><?=$this->recordNumber?></span>
        <?=$cover ?>
    </div>
*/

th.coreTable {
    width: 30%;
}

.red {
    background-color:red;
}

.tub-bibliographic > div {
    line-height: 1.35rem;
    padding-top: 0.15rem;;
}

/* tooltips (buttons) font, color... */
.tooltip {}



/**
 * TUB: Overrides & custom classes
 *
 * Check with Oliver if they are really needed (and where/when)
 */
label {display: inline;}

.pager li > a {
    display: inline-block;
    padding: 5px 14px;
    background-color: #fff;
    border: none;
}

/* Bookbag toogle inline */
#bookbag-menu .tub_bookbag_on  {color: #576ca0; font-size:small; font: 15px Helvetica, Arial, "Lucida Sans Unicode", "Lucida Grande", sans-serif;}
/*#bookbag-menu .tub_bookbag_off {color: #a8ddf0; font-size:small;}*/
#bookbag-menu .tub_bookbag_off {color: #576ca0; font-size:small; font: 15px Helvetica, Arial, "Lucida Sans Unicode", "Lucida Grande", sans-serif;}

/** class to make stuff "invisible" but still readable by screen readers
 * maybe use .offcanvas ?!?
 **/
.offscreen {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    display:inline;
}

.powered-by {
   background-image: url("../../../themes/bootprint3-tub/images/vufind_logo.png");
   background-size: 100px;
   background-position: right;
   background-repeat: no-repeat;
   height: 40px;
}

.tag {
    font-family: Arial, sans-serif;
    width: 200px;
    position: relative;
    top: 5px;
    font-weight: bold;
    text-transform: uppercase;
    display: block;
    float: left;
}


.tub_loading {
   // Loading icon; always this way: <i class="tub_loading fa fa-circle-o-notch fa-spin"></i> <?=$this->transEsc('Loading')?>...
}


.tubbadge {
   float: right;
   font-size: 85%;
   margin-top: 1px;
   display: inline-block;
   font-size: 12px;
   font-weight: bold;
   line-height: 1;
   min-width: 10px;
   padding: 3px 7px;
   text-align: center;
   vertical-align: baseline;
   white-space: nowrap;
}

/* REPLACE WITH VUFIND-DEFAULT-CLASS IN TEMPLATES */
.tub_label {
  /* Just renamed vufind class "label" to tub_label- no formatting needed */
}
.tublabel-success {color: #028302;}
.tublabel-danger  {color: #a41915;}
.tublabel-info    {color: #1c5f74;}
/* end REPLACE WITH VUFIND-DEFAULT-CLASS */

/* Finally just use "fa-li fa-angle-right" https://fortawesome.github.io/Font-Awesome/examples/ */
.tub_lielement {
    color: #6BC1BB;
    font-style: normal;
    font-size: 20px;
    font-family: FontAwesome;
    padding-left: 10px;
}

.showmore,.showless {
    color: #576CA0;
}

.showmore:hover,.showless:hover {
    text-decoration: underline;
    cursor: pointer;
}
/*
.navbar-brand-beta {
    background-image: url("../../../themes/bootprint3-tub/images/tubfind-logo-beta.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    color: transparent;
    height: 65px;
    margin-top: 5px;
    width: 170px;
    float: left;padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
    height: 50px;
}
.navbar-brand-beta:hover,.navbar-brand-beta:focus{text-decoration: none}
.navbar-brand-beta > img {display: block}
*/
.table.table-striped tbody tr th.sample {
    width: 100px;
}

@media (max-width: 991px) and (max-width: 479px) {
    .table.table-striped tbody tr th.sample {
        width: 70px;
        font-size: smaller;
    }
    .table.table-striped tbody tr td.sample {
        font-size: smaller;
    }
}

.sidebar.detailedrecordview {
    background: #fff;
    border: solid #ddd 1px;
}

.close-modal {
    font-size: 2rem;
}

/*  Apple Special Fun (modals are zoomed problem)
    https://github.com/jschr/bootstrap-modal/issues/64#issuecomment-55794181
    @todo: Try targeting IOS (Safari) only - 0 padding looks bad
    @todo: Check if a new version of bootstrap fixes this problem and remove!
*/
@media (max-width: 768px) {
  body {padding-right: 0px !important}
  .modal-open {overflow-y: auto;}
}

@media (max-width: 991px) {
    .result .right {
        min-height: 1px; /* IOS seems not to understand auto */
    }
}

#apbranding-box .tubsearch {
    display: none;
}

#apbranding-box .tublogo {
    width: 170px !important;
}

.search-submit {
    padding: 5px;
    vertical-align: middle;
    background-color: #d8f2fc;
    border: 1px solid #aaa;
    font-weight: bold;
}

.btn-primary {
    padding: 5px;
    vertical-align: middle;
    background-color: #d8f2fc;
    border: 1px solid #aaa;
    font-weight: bold;
    color: black;
}

.active-filters .filters .filter-value {
    padding: 2px 8px;
    margin: 5px;
    font-weight: normal;
    color: #000;
    background: #d8f2fc;
    border: 1px solid #aaa;
    white-space: nowrap;
    display: inline-block;
}

body a, body .btn-link {
    color: #576CA0;
}

.searchForm_lookfor, .searchForm_type {
    border-color: #aaa;
}

.slider-container .slider-handle {
    background: #d8f2fc;
    border: 1px solid #aaa;
}

/*
.searchForm .nav-tabs li.active a, .searchForm .nav-tabs li.active a:hover {
    background: #FFF;
    border-color: #d8f2fc;
    border-bottom-color: rgb(97, 145, 68);
    border-bottom: 0;
    text-decoration: none;
    z-index: 5;
}
*/
/*
.searchForm .nav-tabs li.active a, .searchForm .nav-tabs li.active a:hover {
    z-index: 1000;
}
*/
body {
    background: url("../images/tub/bg-tile.jpg") repeat fixed 50% 0 rgb(221, 221, 221);
    margin: 2.5em 0;
}

.header {
    margin-bottom: 3em;
}

.tulogo {
    float: left;
    height: 105px;
    width: 230px;
}

.branding {
    background-color: #f8f4f3;
    float: right;
    height: 105px;
    width: 740px;
}

.clear {
    clear: both;
}

#access {
    background: linear-gradient(#252525, #0a0a0a) repeat scroll 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    clear: both;
    display: inline;
    float: left;
    margin-bottom: 1em;
    margin-top: 0;
    width: 100%;
}

#access ul {
    font-size: 14px;
    list-style: outside none none;
    padding-left: 0;
}


#access li {
    float: left;
    position: relative;
}

#access ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    display: none;
    float: left;
    left: 0;
    margin: 0;
    position: absolute;
    top: 3.333em;
    width: 188px;
    z-index: 99999;
}

#access a {
    color: #eee;
    display: block;
    line-height: 3.333em;
    padding: 0 1.2125em;
    text-decoration: none;
}

#access li:hover > a, #access a:focus {
    background: linear-gradient(#f9f9f9, #e5e5e5) repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #373737;
}
#access li:hover > a, #access ul ul *:hover > a, #access a:focus {
    background: none repeat scroll 0 0 #d0de9b;
}

.breadcrumbs, .main, .footer {
    padding: 0.8em;
}
/*
.searchbox, .breadcrumbs, .footer {
    background-color: #fff;
}
*/
/*
.main {
    background-color: #fff;
    display: block;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    width: 1200px;
}
*/
.footer {
    background-color: #fff;
    margin-top: 3em;
}
/*
#result0, #result2, #result4, #result6, #result8, #result10, #result12, #result14, #result16, #result18 {
    background-color: #eff3dc;
}
*/
.record {
    background: none repeat scroll 0 0 #ffffff !important;
}

/*.holdlink {
    background-color: #a8ddf0;
    color: #000000;
    opacity: 1;
}*/
.reservationlink {
    background-color: #a8ddf0;
    margin-right: 0;
    opacity: 1;
}
.holdlink, .reservationlink {
    border: thin solid #aaaaaa;
    border-radius: 3px;
    color: #000;
/*    float: right; */
    font-weight: normal;
    margin-bottom: 0;
/*    margin-left: 5px;
    margin-right: 5px; */
    margin-top: 5px;
    padding: 2px;
    text-align: center;
    width: 115px;
}

.printedicon {
    background-image: url("../../../themes/bootprint3-tub/images/icons/book.png");
}

/* START modding search input 
   @see themes/bootstrap3-tub/js/common.js --> "// Clearable input (search)" */
.clearable{
  background: #fff url(data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=) no-repeat right -10px center;
  border: 1px solid #999;
  padding: 3px 18px 3px 4px; /* Use the same right padding (18) in jQ! */
  border-radius: 3px;
  transition: background 0.4s;
}
.clearable.x  { background-position: right 5px center; }
.clearable.onX{ cursor: pointer; }
/* END modding search input */

/*
.row.result {
    padding: 12px 6px;
    margin: 0 4px;
    border-bottom: 2px dotted #aaa;
}

.searchTab {
    font-size:1.2em;
    border-width: 1px;
    border-style:solid;
    border-color:#ddd;
    color:#fff;
    white-space:nowrap;
    width:170px;
}

li.searchTab.books {
    margin-right: 10px;
    border-top-right-radius: 35px;
    border-top-left-radius: 4px;
}

li.searchTab.articles {
    border-top-left-radius: 35px;
    border-top-right-radius: 4px;
}

li.active {
    background-color: #d8f2fc;
}

.search.container.navbar {
    background: transparent linear-gradient(to bottom, #fff, #eee) repeat scroll 0% 0%;
}

.searchTab > a {
    background: transparent none repeat scroll 100% 0px;
    color: #576ca0;
    float: left;
    line-height: 2em;
    padding-right: 10px;
    text-decoration: none;
    width: 100%;
    text-align: center;
    border: none !important;
}
*/
.unpaywall {
    border: thin solid #aaaaaa;
    border-radius: 3px;
    color: #000;
/*    float: right; */
    font-weight: normal;
    margin-bottom: 0;
/*    margin-left: 5px;
    margin-right: 5px; */
    margin-top: 5px;
    padding: 2px;
    text-align: center;
    width: 115px;
}
  .unpaywall span {
    color: #fff;
    font-family: "Helvetica", "Arial", "sans-serif";
    text-align: center;
    width: 20px;
    height: 20px;
    float: left;
    margin-right: 10px;
    padding-left: 3px;
    border-radius: 40px 0 0 40px;
    cursor: pointer;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: none;
    background: #fff; }
  .unpaywall i {
    color: #20e168; }
  .unpaywall-green i {
    color: green; }
  .unpaywall-gold i {
    color: yellow; }
  .unpaywall-hybrid i {
    color: blue; }
  .unpaywall-bronze i {
    color: red; }
  .unpaywall-closed i {
    color: black; }
/*  .unpaywall.btn-primary:hover, .channel .btn-primary.channel-record.is-selected, .unpaywall.btn-primary:focus, .unpaywall.btn-primary:active {
    background-color: #02c34a; }
*/
.gray-button {
display: inline-block;
margin: 0 5px 0 0;
padding: 3px 6px 2px 6px;
background: #FAFAFA;
border: 1px solid #B0B0B0 !important;
border-radius: 3px;
color: #1D1D1D;
font-size: 14px;
text-shadow: 0px 1px 1px #FFF;
}

div#myCheckouts {
    counter-reset: section;
}
#myCheckouts .row .col-xs-1::before {
    counter-increment: section;
    margin-left: 20px;
    content: counter(section) ": ";
}
.checkboxfacet {
    display: flex;
    padding: .5rem;
    width: 100%;
    line-height: 1.5rem;
    background-color: transparent;
}