body {
    padding-top: 46px;
    margin-bottom: 60px;
    font-family: 'Hero', Arial, Helvetica, sans-serif;
}

html,
body {
    height: 100%;
}


/* body {
    background-color: #1e1e1e;
}

body,
table,
.table {
    color: #dddddd;
}

.jumbotron,
.card-body {
    background-color: #333333;
} */

.jumbotron {
    padding: 2rem 2rem;
    border-radius: var(--bs-border-radius-lg) !important;
}

[data-theme="dark"],
[data-theme="dark"] .dropdown-menu
{
    background-color: #1e1e1e !important;
}

[data-theme="dark"],
[data-theme="dark"] table,
[data-theme="dark"] .table,
[data-theme="dark"] pre,
[data-theme="dark"] h1,
[data-theme="dark"] p,
[data-theme="dark"] .breadcrumb-item.active,
[data-theme="dark"] .popover-body,
[data-theme="dark"] .close,
[data-theme="dark"] .socialsButton {
    color: #dddddd !important;
}

[data-theme="dark"] .page-link {
    background-color: #222222 !important;
    border-color: #444444 !important;
}

[data-theme="dark"] .sidebar,
[data-theme="dark"] .searchTopper,
[data-theme="dark"] .jumbotron,
[data-theme="dark"] .breadcrumb,
[data-theme="dark"] .wcFooter,
[data-theme="dark"] .card-body,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .bootstrap-table,
[data-theme="dark"] .bootstrap-table .fixed-table-loading {
    background-color: #333333 !important;
}

[data-theme="dark"] .notes {
    background-color: #444444 !important;
}

[data-theme="dark"] .popover-header,
[data-theme="dark"] .card-header {
    background-color: #444444 !important;
    border: none;
}

[data-theme="dark"] .popover-body {
    background-color: #555555 !important;
}

[data-theme="dark"] .bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-dot,
.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-wrap::after,
.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-wrap::before {
    background: #dddddd !important;
}

[data-theme="dark"] ::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #aaaaaa;
    opacity: 1;
    /* Firefox */
}

[data-theme="dark"] :-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #aaaaaa;
}

[data-theme="dark"] ::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #aaaaaa;
}


/* [data-theme="dark"] .popover .arrow::after {
    border-right-color: #555555 !important;
    border-left-color: #555555 !important;
    border-top-color: #555555 !important;
    border-bottom-color: #555555 !important;
} */

[data-theme="dark"] .bs-popover-auto[x-placement^=right]>.arrow::after,
.bs-popover-right>.arrow::after {
    border-right-color: #555555;
}

[data-theme="dark"] .bs-popover-auto[x-placement^=left]>.arrow::after,
.bs-popover-left>.arrow::after {
    border-left-color: #555555;
}

[data-theme="dark"] .bs-popover-auto[x-placement^=top]>.arrow::after,
.bs-popover-top>.arrow::after {
    border-top-color: #555555;
}

[data-theme="dark"] .bs-popover-auto[x-placement^=bottom]>.arrow::after,
.bs-popover-bottom>.arrow::after {
    border-bottom-color: #555555;
}

.bs-popover-auto[x-placement^=top] .popover-header::before,
.bs-popover-top .popover-header::before {
    border-top-color: #555555;
}

.bs-popover-auto[x-placement^=bottom] .popover-header::before,
.bs-popover-bottom .popover-header::before {
    border-bottom-color: #555555;
}

.bs-popover-auto[x-placement^=left] .popover-header::before,
.bs-popover-left .popover-header::before {
    border-left-color: #555555;
}

.bs-popover-auto[x-placement^=right] .popover-header::before,
.bs-popover-right .popover-header::before {
    border-right-color: #555555;
}

[data-theme="dark"] hr {
    border-color: #DDDDDD !important;
}


/* [data-theme="dark"] .form-control {
    background-color: #BBBBBB;
} */

[data-theme="dark"] .text-muted {
    color: #aca9a9 !important;
}

[data-theme="dark"] .table-hover tbody tr:hover,
[data-theme="dark"] .table-hover tbody tr:nth-of-type(odd):hover {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] tbody {
    background-color: #444444 !important;
}

[data-theme="dark"] thead {
    background-color: #444444 !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: #555555 !important;
}

[data-theme="dark"] .table-bordered td,
[data-theme="dark"] .table-bordered th {
    border-color: #333333 !important;
}


/* .wcFooter{
    margin-top: ;
} */

.welcome {
    padding: 3rem 1.5rem;
    text-align: center;
}

.navbar-default {
    margin-bottom: 0px;
}

.hostsTable>tbody>tr.detail-view {
    background-color: #0097CD;
}

.clientsTable>tbody>tr.detail-view {
    background-color: #32BCAD;
}

.bootstrap-table {
    background-color: #fff;
}

.container,
.container-fluid {
    padding-top: 2rem;
}

.nav-color {
    background-color: #0e0e0e !important;
}

.me-50p,
.me-50p {
    margin-right: 50% !important;
}

.textShaddow {
    text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
}

@font-face {
    font-family: 'Tornado';
    src: url('/static/tornado.otf') format('opentype');
    font-display: auto;
}

@font-face {
    font-family: 'Hero';
    src: url('static/fonts/Hero-Regular.otf') format('opentype');
    font-display: auto;
}

.font.font-hero {
    font-family: 'Hero';
}

.tornado {
    color: black;
    font-family: 'Tornado';
}

.bebas-neue {
    font-family: 'Bebas Neue';
}

.nav-item {
    font-size: 1.5rem;
    line-height: 1rem;
    /* text-align: center; */
    white-space: nowrap;
}

.navbar-brand-text {
    font-size: 2rem;
    line-height: 1rem;
    text-align: center;
}

.nav-logo {
    height: 2rem;
}

.bookTitle {
    /* padding-top: 2rem; */
    font-weight: bold;
}

.bookAuthor {
    /* font-weight: bold; */
}

.bookType {
    padding-left: 1rem;
    padding-right: 1rem;
    /* display: none; */
}

.bookType.active {
    font-weight: bold;
    /* display: inherit; */
}

.promo {
    display: none;
    /* -webkit-animation: fadein 1s;
    -moz-animation: fadein 1s;
    animation: fadein 1s linear forwards;
    opacity: 0; */
}

.promo.active {
    display: flex;
    /* opacity: 1; */
}


/* .elementToFadeInAndOut {
    width: 200px;
    height: 200px;
    background: red;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-moz-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
} */

.bannerVideo {
    width: 100%;
}

.carouselContainer {
    width: 100%;
    height: 20vw;
}

.broadcast {
    text-align: center;
    padding: 0.1rem;
    font-weight: bold;
}

.broadcast a {
    color: #222222;
    font-weight: bolder;
    text-decoration: underline;
}

.broadcast a:hover {
    color: #000000;
    font-weight: bolder;
    text-decoration: underline;
}

.broadcast.broadcast-info {
    color: #002f41;
    background-color: #58aeff;
}

.broadcast.broadcast-warning {
    color: #523800;
    background-color: #ff9b58;
}

.broadcast.broadcast-danger {
    color: #520000;
    background-color: #ff5858;
}

.wcFooter {
    background-color: #e9ecef;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    line-height: 60px;
    /* Vertically center the text there */
    background-color: #f5f5f5;
}

.bookCover {
    width: 100%;
    object-fit: contain;
}

.authorCover {
    width: 100%;
    object-fit: contain;
}

[data-theme="dark"] .amazonButton {
    border-color: #DDDDDD !important;
}

.amazonButton {
    width: 8rem;
    border: 1px solid #333333;
    border-radius: 8px;
    padding: 0.5rem;
}

.bookBlurb {
    white-space: pre-line;
}

.letterSelector>a,
.letterSelectorLetter {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

.letterSelectorLetter{
    text-decoration: underline;
}
.letterSelector>a{
    color: #dddddd;
    text-decoration: none;

}



.lighterGrey {
    background-color: #333333;
}

.lighterGreySave {
    background-color: #252525;
}

.lighterGrey2 {
    color: #dddddd;
}

.customLook {
    --tag-bg: #0052BF;
    --tag-hover: #CE0078;
    --tag-text-color: #FFF;
    --tags-border-color: silver;
    --tag-text-color--edit: #111;
    --tag-remove-bg: var(--tag-hover);
    /* --tag-pad: .6em 1em; */
    --tag-inset-shadow-size: 1.3em;
    --tag-remove-btn-bg--hover: black;
    display: inline-block;
    min-width: 0;
    border: none;
}

.customLook .tagify__tag {
    margin-top: 0;
}

.customLook .tagify__tag>div {
    border-radius: 25px;
}


/* Do not show the "remove tag" (x) button when only a single tag remains */

.customLook .tagify__tag:only-of-type .tagify__tag__removeBtn {
    display: none;
}

.customLook .tagify__tag__removeBtn {
    opacity: 0;
    transform: translateX(-6px) scale(.5);
    margin-left: -3ch;
    transition: .12s;
}

.customLook .tagify__tag:hover .tagify__tag__removeBtn {
    transform: none;
    opacity: 1;
    margin-left: -1ch;
}

.customLook+button {
    color: #0052BF;
    font: bold 1.4em/1.65 Arial;
    border: 0;
    background: none;
    box-shadow: 0 0 0 2px inset currentColor;
    border-radius: 50%;
    width: 1.65em;
    height: 1.65em;
    cursor: pointer;
    outline: none;
    transition: .1s ease-out;
    margin: 0 0 0 5px;
    vertical-align: top;
}

.customLook+button:hover {
    box-shadow: 0 0 0 5px inset currentColor;
}

.customLook .tagify__input {
    display: none;
}

.tagify__tag-text {
    white-space: nowrap !important;
}

.invalid {
    border: 1px solid #dc3545;
}

.btn-border {
    border: 1px solid #ced4da;
}


/* .tagify[readonly]:not(.tagify--mix) .tagify__tag>div::before {
    background: none;
} */

.bookImage {
    width: 100%;
}

.sidebar {
    /* height: 100%; */
}

.sidebarTitle {
    font-weight: bold;
    text-align: center;
}

div.custom-control-right {
    padding-right: 24px;
    padding-left: 0;
    margin-left: 16px;
    margin-right: 0;
}

div.custom-control-right .custom-control-label::before,
div.custom-control-right .custom-control-label::after {
    right: -1.5rem;
    left: initial;
}

.btn-circle.btn-sm {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    font-size: 8px;
    text-align: center;
}

.btn-circle.btn-md {
    width: 50px;
    height: 50px;
    padding: 7px 10px;
    border-radius: 25px;
    font-size: 10px;
    text-align: center;
}

.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px;
    font-size: 12px;
    text-align: center;
}

.btn-stat {
    width: 10rem;
    height: 10rem;
    padding: 10px 16px;
    border-radius: 5rem;
    font-size: 1.5rem;
    text-align: center;
    background-color: #1694da;
    color: white;
}

.bookmark {
    position: absolute;
    width: 20%;
    right: 20px;
    color: #b50e3b;
    opacity: 0.7;
}

.bookmark:hover {
    opacity: 1;
    cursor: pointer;
}

@media (min-width: 768px) {
    .border-md {
        border-right: 1px solid #212529;
    }
}

@media (max-width: 768px) {
    .border-md {
        border-bottom: 1px solid #212529;
        padding-bottom: 1rem;
    }
    .bootstrap-select .dropdown-menu {
        max-width: 95vw; /* Adjust as needed */

    
    }
    
}

@media (min-width: 992px) {
    .border-lg {
        border-right: 1px solid #212529;
    }
}

@media (max-width: 992px) {
    .border-lg {
        border-bottom: 1px solid #212529;
        padding-bottom: 1rem;
    }
}

[data-toggle="tooltip"] {
    text-decoration: underline dotted;
}

.notes {
    background-color: #bbbbbb;
    padding: 1rem;
    margin-bottom: 1rem;
    /* background-color: #e9ecef; */
    border-radius: .3rem;
}

.tag-clickable {
    cursor: pointer;
}

.notification-count {
    text-align: center;
    vertical-align: middle;
    position: relative;
}

.notification-count:after {
    content: attr(data-count);
    position: absolute;
    background: red;
    height: 1rem;
    top: 1rem;
    right: -1rem;
    width: 1rem;
    text-align: center;
    line-height: 1rem;
    font-size: 0.75rem;
    border-radius: 40%;
    color: white;
    border: 1px solid red;
}


/* background-color: #333333 !important;
}

[data-theme="dark"] .popover-header {
    background-color: #444444 !important;
    border: none;
}

[data-theme="dark"] .popover-body {
    background-color: #555555 !important;
} */

.notification-item {
    color: #DDDDDD;
    background-color: #333333;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    cursor: pointer;
}

.notification-item-unread {
    color: #ffffff !important;
    font-weight: bolder !important;
}


/* .notification-item-all {} */

.notification-item:nth-child(even) {
    color: #DDDDDD;
    background-color: #444444;
}

.notification-item:hover {
    background-color: #555555;
}

.notification-popover .popover-body {
    padding: 0;
}

.notification-placeholder {
    width: 250px;
}

.popover {
    max-width: 30em !important;
}

.socialsButton {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

[data-theme="dark"] .fc-theme-standard .fc-list-day-cushion {
    background-color: #222222;
}

[data-theme="dark"] .fc-theme-standard .fc-list-day-cushion:hover,
[data-theme="dark"] .fc-list-event:hover {
    background-color: #555555 !important;
    --fc-list-event-hover-bg-color: #555555 !important;
}

.sharelink {
    cursor: pointer;
    text-decoration: none !important;
}

.ntd {
    text-decoration: none !important;
}

.btn-bookreads {
    color: #ffffff;
    background-color: #f02a8b;
    border-color: #f02a8b;
}

.btn-bookreads:focus {
    color: #ffffff;
    background-color: #f02a8b;
    border-color: #f02a8b;
}

.btn-bookreads:hover {
    color: #ffffff;
    background-color: #c92164;
    border-color: #c92164;
}

.btn-bookreads:active {
    color: #ffffff;
    background-color: #b51f5b;
    border-color: #b51f5b;
}

/* .remove {
    color: rgb(179, 0, 164);
    text-decoration: none;
}

.remove:hover {
    color: rgb(83, 0, 90);
    text-decoration: none;
} */

.stop {
    color: red;
    text-decoration: none;
}

.stop:hover {
    color: darkred;
    text-decoration: none;
}

.start {
    color: green;
    text-decoration: none;
}

.start:hover {
    color: darkgreen;
    text-decoration: none;
}

.pause {
    color: orange;
    text-decoration: none;
}

.pause:hover {
    color: orangered;
    text-decoration: none;
}

.acknowledge {
    color: orange;
    text-decoration: none;
}

.acknowledge:hover {
    color: orangered;
    text-decoration: none;
}

.archive {
    color: green;
    text-decoration: none;
}

.archive:hover {
    color: darkgreen;
    text-decoration: none;
}

.bug {
    color: gray;
    text-decoration: none;
}

.bug:hover {
    color: dimgray;
    text-decoration: none;
}

.merge {
    color: #b03060;
    text-decoration: none;
}

.merge:hover {
    color: #8b1c62;
    text-decoration: none;
}

.caseView {
    text-decoration: none;
}

.caseView:hover {
    text-decoration: none;
}

.caseCreate {
    color: #2fc9c9;
    text-decoration: none;
}

.caseCreate:hover {
    color: #29acac;
    text-decoration: none;
}

.blank {
    color: rgba(0, 0, 0, 0);
    text-decoration: none;
}

.blank:hover {
    color: rgba(0, 0, 0, 0);
    text-decoration: none;
}

.btn-light {}

.textShaddow {
    text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
}

.red {
    color: #d60000;
}

.red:hover {
    color: #960101;
}

.yellow {
    color: #c5ae2a;
}

.yellow:hover {
    color: #998723;
}

.orange {
    color: #b17f22;
}

.orange:hover {
    color: #7a5818;
}

.green {
    color: #00c900;
}

.green:hover {
    color: #008500;
}

.sessionSuccess {
    color: #00c900;
    text-decoration: none;
}

.sessionSuccess:hover {
    color: #008500;
    text-decoration: none;
}

.sessionWarning {
    color: #c5ae2a;
    text-decoration: none;
}

.sessionWarning:hover {
    color: #998723;
    text-decoration: none;
}

.sessionFailed {
    color: #d60000;
    text-decoration: none;
}

.sessionFailed:hover {
    color: #960101;
    text-decoration: none;
}

.cursorPointer {
    cursor: pointer;
}

.bootstrap-table .fixed-table-container .table tbody tr .card-view .card-view-value {
    overflow-wrap: anywhere;
}

.changeGreen {
    color: #026100 !important;
    background-color: #B2FFAD !important;
}

.changeRed {
    color: #a30000 s !important;
    background-color: #e6a8a8 !important;
}

[data-theme="dark"] .changeGreen {
    color: #B2FFAD !important;
    background-color: #026100 !important;
}

[data-theme="dark"] .changeRed {
    color: #e6a8a8 s !important;
    background-color: #a30000 !important;
}

.filter-box {
    border-top: 1px solid #DDDDDD;
}

.filter-box:hover {
    background-color: #222222;
}

@media (min-width:719px) {
     ::-webkit-scrollbar {
        max-width: 8px;
        max-height: 12px
    }
     ::-webkit-scrollbar-thumb {
        background-color: #888888;
        border-radius: 6px
    }
}

.hoverBorder {
    border-style: solid;
    border-color: rgba(255, 255, 255, 0);
    border-radius: 0.3rem;
}

.hoverBorder:hover {
    border-style: solid;
    border-color: rgb(150, 150, 150);
    border-radius: 0.3rem;
}

.activeBorder {
    border-style: solid;
    border-color: white !important;
    border-radius: 0.3rem;
}

a:hover {
    text-decoration-skip-ink: none;
}

.accordion-tags>a>span
{
    margin: 2px 0;
}