:root {
    --menu-font-color: #FADF63;
    --menu-font-muted: #E3A241;
    --titles-font-color: #0c4145;
    --text-font-color: #0F5257;
    --bg-color: #0F5257;
    --sidebar-color: #0c4145;
    --body-color: #FFFAF0; 
    --col-color: BlanchedAlmond;
    --link-color: DarkCyan;
    --menu-font: 'Berkshire Swash';
}

/* berkshire-swash-regular - latin */
@font-face {
  font-family: 'Berkshire Swash';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/berkshire-swash-v8-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Berkshire Swash Regular'), local('BerkshireSwash-Regular'),
       url('./fonts/berkshire-swash-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/berkshire-swash-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/berkshire-swash-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('./fonts/berkshire-swash-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/berkshire-swash-v8-latin-regular.svg#BerkshireSwash') format('svg'); /* Legacy iOS */
}

.logoText {
    font-family: 'Berkshire Swash';
    font-family: var(--menu-font); 
    font-size: larger; 
    margin-right: 5px;
}

.underlinedText {
    text-decoration: underline;
}

footer {
    width: 100%;
}

#mySeries_wrapper, #books_table_wrapper {
    background-color: #0c4145;
    background-color: var(--sidebar-color);
    font-family: 'Berkshire Swash';
    font-family: var(--menu-font);
    border: #0F5257;
    border: 0.25px solid var(--bg-color);
    border-radius: 0.25rem;
    overflow-x: auto;
}

#mySeries_length, #books_table_length {
    font-family: 'Berkshire Swash';
    font-family: var(--menu-font);
    color: #FADF63;
    color: var(--menu-font-color);
    padding-left: 12px;
    padding-top: 8px;
    padding-bottom: 2px;
    text-align-last: center;
}

#mySeries_length label select ,
#books_table_length label select
{
    vertical-align: text-top;
    border-radius: 0.25rem;
}

#mySeries_filter,
#books_table_filter {
    font-family: 'Berkshire Swash';
    font-family: var(--menu-font);
    color: #FADF63;
    color: var(--menu-font-color);
    padding-right: 8px;
    padding-top: 6px;
    padding-bottom: 2px;
}

.dataTables_wrapper .dataTables_filter input {
    margin-left: 0.5em;
    vertical-align: middle;
    border-radius: 0.25rem;
}

.dataTables_wrapper {
        overflow-x: auto;
}

table.dataTable thead th, table.dataTable tfoot th {
    background-color: #0F5257;
    background-color: var(--bg-color);
    color: #E3A241;
    color: var(--menu-font-muted);
}

table.dataTable.stripe tbody tr.odd, 
table.dataTable.display tbody tr.odd {
    background-color: BlanchedAlmond;
    background-color: var(--col-color);
}

table.dataTable.display tbody tr.odd>.sorting_1, 
table.dataTable.order-column.stripe tbody tr.odd>.sorting_1 {
    background-color: BlanchedAlmond;
    background-color: var(--col-color);
}

table.dataTable.stripe tbody tr.even, 
table.dataTable.display tbody tr.even {
    background-color: Cornsilk;
}

table.dataTable.display tbody tr.even>.sorting_1, 
table.dataTable.order-column.stripe tbody tr.even>.sorting_1 {

    background-color: Cornsilk;
}

#mySeries, #books_table {
    font: 88%/1.45em 'Roboto';
    border-collapse: collapse;
    width: 100%!important;
}

#mySeries td, #mySeries th, 
#books_table td, #books_table th 
{
    border: 1px solid #0c4145;
    border: 1px solid var(--sidebar-color);
}

#mySeries_info, #books_table_info
{
    font-family: 'Berkshire Swash';
    font-family: var(--menu-font);
    color: #FADF63;
    color: var(--menu-font-color);
    padding: 12px;
    width: 100%;
}

#mySeries_paginate, #books_table_paginate {
    padding: 2px;
}

#mySeries_paginate span a.paginate_button,
#mySeries_paginate span span,
#mySeries_paginate .paginate_button,
#books_table_paginate span a.paginate_button,
#books_table_paginate span span,
#books_table_paginate .paginate_button 
{
    color: #E3A241;
    color: var(--menu-font-muted)!important;
}

#mySeries_paginate span .paginate_button.current, 
#books_table_paginate span .paginate_button.current 
{
    color: #0F5257;
    color: var(--bg-color)!important;
    border-radius: 0.25rem;
    background: cornsilk;
    border: none;
}

#mySeries_paginate span a.paginate_button:hover,
#mySeries_paginate .paginate_button:hover,
#books_table_paginate span a.paginate_button:hover,
#books_table_paginate .paginate_button:hover 
{
    color: #0F5257!important;
    color: var(--bg-color)!important;
    background: BlanchedAlmond;
    background: var(--col-color);
    border: none;
    border-radius: 0.25rem;
}

#mySeries_paginate span .paginate_button.current:hover,
#books_table_paginate span .paginate_button.current:hover 
{
    color: #0F5257!important;
    color: var(--bg-color)!important;
    border-radius: 0.25rem;
    background: cornsilk;
    border: none;
}

#mySeries_paginate .paginate_button.disabled,
#mySeries_paginate .paginate_button.disabled:hover,
#mySeries_paginate .paginate_button.disabled:active,
#books_table_paginate .paginate_button.disabled,
#books_table_paginate .paginate_button.disabled:hover,
#books_table_paginate .paginate_button.disabled:active
{
    cursor: default;
    color: #666 !important;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
}

.text-muted{
    color: #E3A241!important;
    color: var(--menu-font-muted)!important;
}

.bg-primary{
    background-color: #0F5257;
    background-color: var(--bg-color)!important;
}

.Logo{
    display:inline-block;
    padding:.3125rem;
    margin-right:1rem;
    font-size:1.25rem;
    line-height:inherit;
    white-space:nowrap;
    height: 90px;
    width: auto;
    position: fixed!important;
    top: 0;
    z-index: 1000;
}

.miniLogo {
    margin:.25rem ;
    position: fixed!important;
    top: 0;
    z-index: 1000;
}

#siteName {
    font-size: 28px;    
    padding-left: 46px;
    padding-right: 2px;
    background-image: url("/images/Background.png");
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: black;
    color: transparent;
}

.navbar{
    position:relative;
    display:-ms-flexbox;
    display:-webkit-box;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    padding:.5rem 1rem;
}

.nav-link{
    text-align: right;
    color: #FADF63!important;
    color: var(--menu-font-color)!important;
}

.nav-link:focus, .nav-link:hover{
    color: #E3A241!important;
    color: var(--menu-font-muted)!important
}

li.nav-item{
    line-height: 1;
}

.col {
    padding-top: 4rem;
    height: 120vh;
    color: #0c4145!important;
    color: var(--sidebar-color)!important;
    background-color: BlanchedAlmond!important;
    background-color: var(--col-color)!important;
    padding-bottom: 1rem;
    /*max-height: 700px;*/
    overflow: auto;
}

.long-text::-webkit-scrollbar {
    background-color: cornsilk;
    border:0.02px solid BlanchedAlmond;
    border:0.02px solid var(--col-color);
}

.long-text::-webkit-scrollbar-thumb {
    background-color: BlanchedAlmond;
    background-color: var(--col-color);
    border: 0.25px solid lightgrey;
}

.col::-webkit-scrollbar {
    background-color: #FFF5E7;
    color: #c5c1b9;
    border: 0.5px solid lightgrey;
}

.col::-webkit-scrollbar-thumb {
    background-color: #FFE1B4;
}

.sidebar-expanded::-webkit-scrollbar {
    background-color: #FFF5E7;
    color: #c5c1b9;
}

.sidebar-expanded::-webkit-scrollbar-thumb {
    background-color: #FFE1B4;
}

.card {
    /*max-width: 760px;*/
    max-width: 1066px;
}

#body-row {
    margin-left:0;
    margin-right:0;
}

#sidebar-container {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow: auto; 
    background-color: #0F5257;
    background-color: var(--bg-color);
    padding-bottom: 30px;
    font-family: 'Berkshire Swash';
    font-family: var(--menu-font);
    width: 30%;
    max-width: max-content;
}

/* Sidebar sizes when expanded and collapsed */
.sidebar-expanded {
    width: 250px;
}

.sidebar-collapsed {
    width: 60px;
}

/* Menu item*/
#sidebar-container .list-group a {
    height: 50px;
    color: #FADF63;
    color: var(--menu-font-color);
    fill: #FADF63;
    fill: var(--menu-font-color);
}

#sidebar-container .list-group a:hover, #sidebar-container .list-group a:focus {
    color: #E3A241;
    color: var(--menu-font-muted);
    fill: #E3A241;
    fill: var(--menu-font-muted);
}

/* Submenu item*/
#sidebar-container .list-group .sidebar-submenu a {
    height: 45px;
    padding-left: 30px;
}

.sidebar-submenu {
    font-size: 0.9rem;
}

/* Separators */
.sidebar-separator-title {
    background-color: #0F5257;
    background-color: var(--bg-color);
    height: 35px;
}

.sidebar-separator {
    background-color: #0F5257;
    background-color: var(--bg-color);
    height: 25px;
}

.logo-separator {
    background-color: #0F5257;
    background-color: var(--bg-color);
    height: 60px;
}

#aboutBoT {
    text-align: justify;
}

.bg-dark{
    background-color: #0F5257!important;
    background-color: var(--bg-color)!important
}

a.bg-dark:focus,a.bg-dark:hover,button.bg-dark:focus,button.bg-dark:hover{
    background-color: #0c4145!important;
    background-color: var(--sidebar-color)!important;
}

.btn, .btn-BoTdark, .btn-link {
    font-family: 'Berkshire Swash';
    font-family: var(--menu-font); /*Roboto;*/
    color: #FADF63!important;
    color:var(--menu-font-color)!important;
    background-color: #0F5257!important;
    background-color: var(--bg-color)!important;
    border-color: #0c4145;
    border-color: var(--sidebar-color);
    border-radius: .25rem;
    font-weight: normal;
    padding: 2px;
    height: 2rem;
}

.btn-primary, .btn-secondary {
    color: #FADF63;
    color:var(--menu-font-color)!important;
    background-color: #0F5257!important;
    background-color: var(--bg-color)!important;
    border-color: #0c4145!important;
    border-color: var(--sidebar-color)!important;
    margin: 2px;
}

.btn:hover, .btn:focus,
.btn-BoTdark:hover, .btn-BoTdark:focus {
    color: #E3A241;
    color: var(--menu-font-muted)!important;
    background-color: #0c4145!important;
    background-color: var(--sidebar-color)!important;
    border-color: #0F5257!important;
    border-color: var(--bg-color)!important;
}

.btn-primary:hover, .btn-secondary:hover 
.btn-primary:focus, .btn-secondary:focus
.btn-link:hover, .btn-link:focus
{
    color: #E3A241;
    color: var(--menu-font-muted);
}

.btn-primary:not([disabled]):not(.disabled):active, .show>.btn-primary.dropdown-toggle 
.btn-secondary:not([disabled]):not(.disabled).active, .btn-secondary:not([disabled]):not(.disabled):active, .show>.btn-secondary.dropdown-toggle {
    color: #E3A241!important;
    color: var(--menu-font-muted)!important;
    background-color: #0F5257!important;
    background-color: var(--bg-color)!important;
    border-color: #0c4145!important;
    border-color: var(--sidebar-color)!important;
}

.btn-followSeries {
    position: absolute;
    right: 45px;
    width: 100px;
    font-size: 15px;
}

.btn-readBook {
    position: absolute;
    right: 55px;
    width: 90px;
}

.btn-bookDropdown {
    position:   absolute;
    right:  25px;
}

.btn-seriesDropdown {
    position:   absolute;
    right:  25px;
}

.btn-seriesPage {
    font-size: 16px;
    margin-top: -50px;
}

.form-control:focus {
    border-color: #0F5257;
    border-color: var(--bg-color);
    outline: 0;
    box-shadow: 0 0 0 0.1rem rgba(0,82,87,.5);
}

.list-group{
    padding-top: 85px;
}

.sidebar-collapsed .list-group{
    padding-top: 40px;
}

.navbar {
    position: fixed!important;
    top: 0;
    width: 100%;
    z-index: 1000;
    font-family: 'Berkshire Swash';
    font-family: var(--menu-font);
}

.card {
    background-color: #FFFAF0;
    background-color: var(--body-color);
    padding-bottom: 1rem;
}

.card-footer {
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}

.navbar-toggler {
    padding: .25rem .45rem;
    border-radius: .65rem;
}

#user-avatar{
    width: 90px;
    height: 90px;
    float: left;
}

.user-info{
    padding: .25rem;
    height: 8rem;
    width: 14rem;
    margin: 0;
    border: 0px;
}

.user-stats{
    float: right;
    font-size: 80%;
    font-weight: 400;
    width: 118px;
    height: 90px;
}

.ml-6{
    margin-left:4rem!important;
}

.user-name{
    color: #E3A241!important;
    color: var(--menu-font-muted)!important;
}

.menu-collapsed .profile-sidebar{
    display: none;
}

[class^="icon-"], [class*=" icon-"] {
    height: 20px;
    width: 20px;
}

span#collapse-icon {
    display: block;
}

svg.menu-icon {
    vertical-align: sub;
}

svg.menu-icon:hover, menu-pair:hover {
    color: #E3A241!important;
    color: var(--menu-font-muted)!important;
    fill: #E3A241!important;
    fill: var(--menu-font-muted)!important;
}

svg.profileIcon {
    padding-top: 2px;
    width: 30px;
    height: 30px;
    vertical-align: sub;
}

.navbar-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    text-align: center;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    white-space: nowrap;
}

.navbar-nav li {
    padding-left: 1rem;
    padding-right: 1rem;
}

button {
    font: 'Berkshire Swash';
    font: var(--menu-font);
    background-color: #0c4145;
    background-color: var(--sidebar-color);
    color: #FADF63;
    color: var(--menu-font-color);
}

a {
    color: DarkCyan;
    color: var(--link-color);
}

a:hover {
    color: #E3A241!important;
    color: var(--menu-font-muted)!important;
    text-decoration: underline;
}

.card-header a {
    color: #E3A241!important;
    color: var(--menu-font-muted)!important;
}

.card-header a:hover {
    color: DarkCyan!important;
    color: var(--link-color)!important;
    text-decoration: underline;
}   

h1.card-header {
    font-size: 28px;
}

.card-header {
    text-align: center;
    text-align: -webkit-center;
    color: #0F5257;
    color: var(--bg-color);
}

.card-body a.btn-link {
    color: #FADF63;
    color:var(--menu-font-color)!important;
    background-color: #0F5257!important;
    background-color: var(--bg-color)!important;
    border-color: #0c4145!important;
    border-color: var(--sidebar-color)!important;
    margin: 2px;
}

a.btn-link:hover {
    color: #E3A241!important;
    color: var(--menu-font-muted)!important;  
    background-color: #0F5257!important;
    background-color: var(--bg-color)!important;
}

a.btn-link:not([disabled]):not(.disabled).active, a.btn-link:not([disabled]):not(.disabled):active, .show>a.btn-link.dropdown-toggle {
    color: #E3A241!important;
    color: var(--menu-font-muted)!important;
    background-color: #0F5257!important;
    background-color: var(--bg-color)!important;
    border-color: #0c4145!important;
    border-color: var(--sidebar-color)!important;
}

#calendar {
    width: 90%;
    margin: 5px;
    margin-left: 15px;
    margin-right: 15px;
    font-family: 'Berkshire Swash';
    font-family: var(--menu-font);
    border: 1px solid #0F5257;
    border: 1px solid var(--bg-color);
}

#calBox {
    display: table;
    width: 100%;
}

.bookDetails, .authorDetails {
    display: table;
    width: 100%;
    margin-top: 10px;
}

.short-cell {
    text-align: right;
    width: 145px;
    padding-right: 1.4rem;
}

.medium-cell {
    text-align: right;
    width: 105px;
    padding-right: 1.4rem;
}

#calHeader {
    display: table-header-group;
}

.Table-row {
    display: table-row;
}

#calBody {
    display: table-row-group;
}

.Table-cell {
    display: table-cell;
    overflow-wrap: anywhere;
}

.editData-grid {
    display: grid;
    grid-template-columns: 25% 35% 35%; /*column widths*/
    margin-left: 1rem;
    margin-right: 1rem;
    border: solid thin black;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.grid-field {
    margin: 0.25rem;
    text-align: center;
    max-width: 100%;
}

.grid-currentData {
    border: solid thin gainsboro;
    margin: 0.25rem;
    margin-right: 1rem;
    text-align: center;

}

.calDays {
    height: 25px;
    background-color: #0F5257;
    background-color: var(--text-font-color);
    color: #E3A241;
    color: var(--menu-font-muted);
    text-align: center;
    font-family: Roboto;
    border: 0.5px solid #0c4145;
    border: 0.5px solid var(--sidebar-color);
}

.calDay {
    height: 50px;
    vertical-align: text-top;
    padding-left: 5px;
    color: #0F5257;
    color: var(--bg-color);
    background-color: LightYellow;
    border: 0.5px solid #0c4145;
    border: 0.5px solid var(--sidebar-color);
}

.month-button-group {
    width: 100%;
    text-align: center;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    border: 0.5px solid #0c4145;
    border: 0.5px solid var(--sidebar-color);
    background-color: #FADF63;
    background-color: var(--menu-font-color);
}

.month-left a, 
.month-center a, 
.month-right a {
    color: #0F5257;
    color: var(--bg-color);
}

.month-left a:hover, 
.month-center a:hover,
.month-right a:hover {
    color: #0F5257!important;
    color: var(--bg-color)!important;
    text-decoration: underline;
}

.month-left {
    float: left;
}

.month-center {
    display: inline-block;
}

.month-right {
    float: right;
}

.month-button {
    font-family: 'Berkshire Swash';
    font-family: var(--menu-font);
    color: #FADF63;
    color: var(--menu-font-color)!important;
    background-color: #0F5257;
    background-color: var(--bg-color);
}

.calRel {
    vertical-align: text-bottom;
    float: right;
    padding-right: 1px;
}

.bookInfo1 {
    float: left;
}

.bookInfo2 {
    padding-top: 10px;
    margin-right: 112px;
}

#bookHeader,
#ch-SeriesPage {
    margin-right: 130px;
}

.series-bookInfo {
    margin-right: 130px;
    height: 120px;
}

#bookRow {
    text-align: center;
    min-height: 146px;
}

.seriesTitle {
    margin-right: 130px;
}

svg.icon-books3,
svg.seriesIcon {
    fill: #0c4145;
    fill: var(--sidebar-color);
}

#authorImage {
    object-fit: cover;
    width: 140px;
    height: 168px;
    float: left;
    margin: 3px;
    margin-right: 20px;
}

#bookCover {
    width: 112px;
    height: 160px;
}

.long-text {
    overflow-y: auto;
    border-bottom: inset;
}

#authorBio, #seriesDescription, #bookDescription {
    max-height: 175px;
    padding-bottom: 15px;
}

#seriesBy,
#bookInfo { 
    font-size: 16px;
    font-weight: normal;
    margin-top: 5px;
}

.seriesCard-header {
    color: #0F5257;
    color: var(--bg-color);
    display: inline-flex;
    width:  100%;
    align-items: center;
    margin-bottom: 2px;
    padding-bottom: 5px;
    border-bottom-style: inset;
}

.card-body {
    overflow: hidden;
    overflow-x: auto;
}

.seriesCard {
    display: inline-block;
}

div.seriesCard-body {
    contain: content;
    padding-right: 1rem;
}

.seriesBooks {
    float: left; 
    margin: 0.25rem;
    text-align: center;
    font-size: 12px;
    width: 100px;
    height: 210px;
    line-height: 115%;
}

.figCaption-overflow {
    height: 42px;
    overflow: hidden;
}

.figCaption-overflow:hover {
    overflow: visible;
}

.BkImageContainer {
    width: 112px;
    height: 160px;
    float: left;
    margin: 3px;
    margin-right: 20px;
}

.BkImageContainer-series {
    float: left;
}

.BkImageContainer-small {
    float: left; 
    margin-right: 0.25rem;
}

#cal-bookCover,
#aS-bookCover 
{
    height: 145px;
    width: 100px;
    border: double;
}

#gItem {
    line-height: 1.5rem;
    float: left;
    display: inline;
    padding: 1rem;
}

#double li {
    width: 50%;
}

#series-bookCover {
    height: 120px;
    width: 78px;
    margin: 2px;
    margin-right: 20px;
}

#nbCover {
    height: 120px;
    width: 85px;
    margin: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.nextBooksList {
    border-bottom: inset;
    display: flex; 
    align-items: center;
    margin-bottom: 10px;
}

#nBookCover {
    margin-bottom: 10px;
}

#nbTitle {
    text-align: center;
    padding-left: 5px;
    padding-right: 25px;
    width: -webkit-fill-available;
    margin-top: 1rem; 
    margin-bottom: 1rem;
}

#nbInfo {
    font-size: 14px;
}

#nbStatus {
    width: 265px;
    padding-bottom: 60px;
}

#series-bookTitle {
    padding-top: 20px;
    padding-right: 95px;
    line-height: 100%;
    margin-bottom: 5px;
}

#defaultCover {
    font-size: 10px;
    text-align: center;
    color: FireBrick;
    position: absolute;
    left: 2.5rem;
    margin-top: 20px;
    width: 82px;
    height: 125px;
    overflow: hidden;
}

#coverTitle {
    text-transform: uppercase;
    margin-bottom: 5px;
    height: 62px;
    overflow: hidden;
    font-weight: bold;
}

#coverAuthor {
    font-size: 9px;
    height: 56px;
    overflow: hidden;
}

a#Donate {
    color: #E3A241!important;
    color: var(--menu-font-muted)!important;
}

#defaultCover-small {
    font-size: 12px;
    text-align: center;
    color: BlanchedAlmond;
    color: var(--col-color); /*remove for white cover*/
    position: absolute;
    /*left: 3.1rem; white blank cover*/
    left: 4.4rem; /*black blank cover*/
    margin-top: 25px;
    width: 30px;
    height: 50px;
    overflow: hidden;
}

#coverTitle-small {
    margin-bottom: 8px;
    height: 32px;
    overflow: hidden;
    font-weight: bold;
}

#coverAuthor-small {
    height: 28px;
    overflow: hidden;
}


dt {
    font-weight: 500;
}

dl {
    display: inline-block;
    max-width: 65%;
}

#srs-Menu {
    margin-top: -20px;
}

#seriesBook-cover {
    height: 80px;
    margin-right: 15px;
    margin-left: -20px;
}

#bookSeries-date {
    margin-left: 2px;
}

.btn-readBook.btn-calBook {
    right: 75px;
    font-size: 1rem;
}

.btn-bookDropdown.btn-calBook {
    right: 50px;
    font-size: 1.5rem;
    width: 1.8rem;
}

.dropdown-toggle {
    font-size: 1rem;
}

.btn-readBook {
    position: absolute;
    right: 45px;
    width: 80px;
    margin-top: 10px;
}

.btn-bookDropdown {
    position:   absolute;
    right:  25px;
    margin-top: 10px;
}

.dropdown {
    position: initial;
}

svg.withStroke {
    stroke: black; 
    stroke-width: 8;
}

svg.bkStatus, 
svg.srsStatus {
    display: none;
    width: 45px;
    position: absolute;
}

.bkStatus.read,
.bkStatus.tbr,
.bkStatus.skipped {
    display: inline-block;
}

svg.bkStatus {
    z-index: 100;
    margin-top: 12px;
}

svg.bkStatus.read {
    fill: #0F5257;
    fill: var(--text-font-color);
}

svg.bkStatus.skipped {
    fill: darkRed;
}

svg.bkStatus.tbr {
    height: 25px;
    fill: #fadf63;
    fill: var(--menu-font-color);
    -webkit-filter: drop-shadow( -2px -2px 1px rgba(0, 0, 0, 1));
    filter: drop-shadow( -2px -2px 1px rgba(0, 0, 0, 1));
}

img.bkStatus {
    opacity: 100%;
}

img.bkStatus.read {
    opacity: 50%;
}

img.bkStatus.skipped {
    opacity: 50%;
}

.series-tick {
    height: 15px;
}

.bookMenu-select {
    width: 100px;
    position: absolute;
    /*right: 30px;*/
    right: 16px;
    font-family: 'Berkshire Swash';
    font-family: var(--menu-font);
    text-align: center;
    margin-left: 5px;
    margin-top: 20px;
    padding: 1px;
    height: calc(1.5rem + 2px);
    line-height: 1.5;
    vertical-align: middle;
    border: none;
    font-size: 1rem;
}

.bookMenu-select select {
    display: none; /*hide original SELECT element:*/
   background: none;
}

.series-menu-select {
    width: 100px;
    position: absolute;
    right: 40px;
    font-family: 'Berkshire Swash';
    font-family: var(--menu-font);
    text-align: center;
    margin-left: 5px;
    margin-top: 10px;
    padding: 1px;
    height: calc(1.5rem + 2px);
    line-height: 1.5;
    vertical-align: middle;
    border: none;
    font-size: 1rem;
}

.series-menu-select select {
    display: none; /*hide original SELECT element:*/
    background: none;
}

.select-selected {
    top: -4px;
    background-color: #0F5257;
    background-color: var(--bg-color);
}

/*style the arrow inside the select element:*/
.select-selected:after {
    position: absolute;
    content: "";
    top: 12px;
    right: 4px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #FADF63 transparent transparent transparent;
    border-color: var(--menu-font-color) transparent transparent transparent;

}

/*point the arrow upwards when the select box is open (active):*/
/*.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}
*/
/*style the items (options), including the selected item:*/
.select-items, div.select-selected {
    color: #FADF63;
    color: var(--menu-font-color);
    padding: 2px 2px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
    user-select: none;
    width: 95px;
    position: absolute;
    border: 1px solid #0c4145;
    border: 1px solid var(--sidebar-color);
    border-radius: .25rem;
    }


/*style items (options):*/
.select-items {
    position: absolute;
    background-color: #0F5257;
    background-color: var(--bg-color);
    top: 100%;
    left: 1px;
    right: 0;
    z-index: 99;
}

/*hide the items when the select box is closed:*/
.select-hide {
    display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: #0c4145;
  background-color: var(--sidebar-color);
  color: #E3A241;
  color: var(--menu-font-muted);
}

.select-items div:hover, .same-as-selected {
  background-color: #0c4145;
  background-color: var(--sidebar-color);
}


.dropdown-divider {
    margin: 0.25rem 0;
    border-top: 1px solid #0c4145;
    border-top: 1px solid var(--sidebar-color);
}

.divider1 {
    margin: 0.25rem 0;
    border-top: 0.5px solid #0c4145;
    border-top: 0.5px solid var(--sidebar-color);
}

button {
    font: 'Berkshire Swash';
    font: var(--menu-font);
}

button:focus {
    /*outline: none!important;*/
    outline: 2px auto DarkCyan;
    outline: 2px auto var(--link-color);
}

#sthMCard {
    background-color: BlanchedAlmond;
    background-color: var(--col-color);
    max-width: 350px;
}

#sthMBtn {
    width: 70px;
    height: 38px;
    line-height: 1rem;
    font-size: smaller;
}

.sthMFCell {
    text-align: right;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100px;
}

.sthMCell {
    max-width: 230px;
    padding-right: 1.4rem;
}

.fCell {
    height: 40px;
    background-color: #FFFAF0;
    background-color: var(--body-color);
}

.sthMTArea {
    max-width: 230px;
    background-color: #FFFAF0;
    background-color: var(--body-color);
}

.logInCell {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
}

#authorsPagination {
    float: right;
}

#authorsPagination nav ul,
#nextBooksPagination nav ul {
  display: flex;
  place-content: center;
  font-family: 'Berkshire Swash';
  font-family: var(--menu-font);
}

#authorsPagination nav ul li.page-item a,
#nextBooksPagination nav ul li.page-item a {
    color: DarkCyan;
    color: var(--link-color);
}

#authorsPagination nav ul li.page-item.active span,
#nextBooksPagination nav ul li.page-item.active span {
    background-color: DarkCyan;
    background-color: var(--link-color);
    border-color: slategrey;
}

.more_info {
    border-bottom: 1px dotted;
    position: relative;
}

.more_info .title {
    position: absolute;
    top: 20px;
    background: silver;
    padding: 4px;
    left: 0;
    white-space: nowrap;
}

#CookieChoice {
    bottom: 0;
    width: 100%;
    border: 1px solid; 
    position: fixed;
    padding: 5px 60px;
    text-align: center;
    z-index: 4000;
    background-color: darkgray;
    color: #0c4145;
    color: var(--sidebar-color);
    font-family: roboto,Arial;
}

@keyframes rotating {
    100% {
        transform: rotate(360deg);
    }
}

.spinner {
    border-radius: 50%;
    width: 26px;
    height: 26px;
    border: 6px solid rgba(0, 0, 0, 0.1);
    border-top: 6px solid #555;
    animation: rotating 1.2s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

#rightSidebar {
    display: none;    
}

.mainCard {
    width: 100%;
}

.widthSpacer { 
    width: 350px;
    margin-bottom: 1rem;
    /*height: 0px; */
}

@media(min-width: 500px) { 
    .widthSpacer { 
        width: 395px; 
    }
}

@media(min-width: 550px) { 
    .widthSpacer { 
        width: 445px; 
    }
}

@media(min-width: 600px) { 
    .widthSpacer { 
        width: 495px; 
    }
}

@media(min-width: 650px) { 
    .widthSpacer { 
        width: 545px; 
    }
}

@media(min-width: 700px) { 
    .widthSpacer { 
        width: 595px; 
    }
}

@media(min-width: 750px) { 
    .widthSpacer { 
        width: 645px; 
    }
}

@media (min-width:768px){
    .col {
        padding-top: 1rem;
    }

    .navbar{
        display: none;
    }

    .btn-followSeries {
        width: 120px;
        font-size: 16px;
    }

    .btn-readBook {
        margin-top: 20px;
    }

    div.seriesCard-body {
        padding-right: 25px;
    }

    .medium-cell {
        width: 164px;
    }

    .logInCell {
        max-width: 350px; 
    }
    
    /*#ch-SeriesPage {*/
    /*    min-width:460px;*/
    /*}*/
    
    #rightSidebar {
        float: right;
        display: block;    
    }
    
    .widthSpacer { 
        width: 412px; 
    }
}

@media(min-width: 800px) { 
    .widthSpacer { 
        width: 445px; 
    }
}

@media(min-width: 850px) { 
    .widthSpacer { 
        width: 495px; 
    }
}

@media(min-width: 900px) { 
    .widthSpacer { 
        width: 545px; 
    }
}

@media (min-width:920px){
    .mainCard {
        width: 596px;
    }
    
    .widthSpacer {
        width: 555px;
    }
}

@media (min-width:1041px){
    #rightSidebar {
        width: 120px;    
    }
}

@media (min-width:1086px) {
    .mainCard {
/*        width: 600px;*/
        width: calc(100% - 160px);
        
    }
    
    #rightSidebar {
        width: 160px;
    }
    
    .widthSpacer {
        width: 558px;
    }
}

@media (min-width:1248px){
    .mainCard {
/*        width: 770px;*/
        width: calc(100% - 160px);
    }
    
    #rightSidebar {
        width: calc(100% - 88%);
    }
    
    .widthSpacer {
        width: 728px; 
    }
}

#rightSidebar {
        width: calc(100% - 88%);
    }

.hub_bg {
  position: relative;
  z-index: 1;
}

.hub_bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-image: url(/images/book-pile.png);
/*  filter: blur(5px);*/
  background-repeat: no-repeat;
  background-position: bottom right;
  opacity: 0.35;
}

.hub_bg > * {
  position: relative;
  z-index: 2;
}

.addField {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    padding: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    background-color: field;    
}

#selectAuthors, #selectGenres {
    max-width: 60%;
    margin-left: 2rem;
    height: 10rem;
    overflow: scroll;
    padding-top: 0.5rem;
}

#selAuthLabel, #selGenreLabel {
    align-items: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

#bookPos {
    display: grid; 
    max-width: 75%; 
    padding-left: 2rem;
}

#toggleOptions {
    max-width: fit-content;
    font-family:none;
}

#bookType {
    display: grid; 
    max-width: 36%; 
    padding-left: 2rem;
}

.star {
    vertical-align: super;

}

.wrap-text {
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word; /* Break long words to wrap */
    overflow: hidden; /* Hides overflow */
    display: block; /* Ensures the element behaves as block */
    
}

.inst_det {
    margin-left: 2rem;
    display: block;
}