p, a, body {
    font-family: 'Times New Roman';
/*    font-size: .8em;
*/    text-decoration-line: none;
}

html, body {
    overscroll-behavior: none;
}

td {
    border-width: 1px;
}

.dropdown-menu {
    min-width: inherit;
}

.form-control::placeholder {
    color: lightgray;
    font-size: .75em;
    opacity: 1;
}

.disabled {
    z-index: -1; /*Make it not clickable*/
    position: relative;
    opacity: .5; /*Lighter*/
}

/* 1. Make the accordion a flex container that fills its parent */
.accordion-viewport {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Or 100% of a height-defined parent */
}

/* 2. Force the active collapse to expand and fill the flex space */
    .accordion-viewport .accordion-item.show,
    .accordion-viewport .accordion-collapse.show {
        flex: 1;
        display: flex !important;
        flex-direction: column;
        min-height: 0; /* Critical for flex scrolling in Chrome/Firefox */
    }

/* 3. Finally, enable the scrollbar on the body */
.accordion-viewport .accordion-collapse.show .accordion-body {
    flex: 1;
    overflow-y: auto;
}

.stickyTop {
    position: sticky;
    top: 0;
    z-index: 2;
}

/*.modal-header .btn-close {
    display: none;
}
*/
/*select {
    appearance: base-select;

    &::picker(select) {
        appearance: base-select;
    }

    flex-shrink: 1;*/ /* Allow to shrink */
    /*min-width: 0;*/ /* Override default auto min-width */
    /*max-width: 100%;*/ /* Stay within parent bounds */
    /*text-overflow: ellipsis
}*/


.dim {
    opacity: .5
}

.sortItem {
    width: 100%;
    color: black;
    display: block;
    padding: .25rem;
    clear: both;
}

.custom-select-container {
    display: flex;
    width: 100%; /* Fills parent container */
    position: relative; /* Base for the absolute dropdown */
    cursor: pointer;
}
.select-trigger {
    border: 1px solid #ccc;
    background: #fff;
    width: 100%; /* Matches container */
    box-sizing: border-box;
}

/*.options-list {
    display: none;*/ /* Toggle to 'flex' via JS to show */
    /*flex-direction: column;
    position: absolute;
    top: 100%;*/ /* Appears right below trigger */
    /*left: 0;
    right: 0;*/ /* Forces list to match container width */
    /*margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #ccc;
    background: white;
    z-index: 10;
}

.option-item {
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}*/

.optionTruncate {
    appearance: base-select;
    color: #71717a;
    flex: 1 1 100%; /* Shorthand for flex-grow, flex-shrink, flex-basis: 0 */
    /*    flex-shrink: 1;
    min-width: 0; /* Override default auto min-width */
    max-width: 100%; /*Stay within parent bounds*/
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: white;
    /*    width: 180px;
*/ box-sizing: border-box;
    /*    padding: 0.5rem 0.75rem;
*/ border: 1px solid #e4e4e7;
    border-radius: calc(0.5rem - 2px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;

    & > button {
        display: flex;
        width: 100%;
        font-family: inherit;
        color: currentColor;

        & > svg {
            margin: 0 0 0 auto;
            width: 1.2rem;
            height: 1.2rem;
        }
    }

    &:has(option:not([hidden]):checked) {
        color: #18181b;
    }

    &:focus-visible {
        outline: 2px solid #a1a1aa;
        outline-offset: -1px;
    }

    &::picker-icon {
        display: none;
    }

    &::picker(select) {
        appearance: base-select;
        border: 1px solid #e4e4e7;
        padding: 0.25rem;
        margin-top: 0.25rem;
        border-radius: calc(0.5rem - 2px);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
        cursor: default;
        transition: opacity 225ms ease-in-out, transform 225ms ease-in-out;
        transform-origin: top;
        transform: translateY(0);
        opacity: 1;

        @starting-style {
            transform: translateY(-0.25rem) scale(0.95);
            opacity: 0;
        }
    }

    & optgroup label {
        display: block;
        padding: 0.375rem 0.5rem;
    }

    & option {
        padding: 0.375rem 0.5rem;
        border-radius: calc(0.5rem - 4px);
        outline: none;

        &::after {
            content: "";
            width: 1rem;
            height: 1.5rem;
            margin-left: auto;
            opacity: 0;
            background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2318181b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'%3E%3C/path%3E%3C/svg%3E");
        }

        &::checkmark {
            display: none;
        }

        &:checked {
            background-color: transparent;

            &::after {
                opacity: 1;
            }
        }

        &:hover,
        &:focus-visible {
            background-color: #f4f4f5;
            color: #18181b;
        }
    }
}


.ipc-chip__text {
    color: black;
    background: none;
/*    padding: .25rem 0;
*/
}
.ipc-chip__title {
    color: black;
}

.ipc-chip {
    font-size: .8rem;
    font-weight: 400;
    line-height: 1.25rem;
    text-transform: none;
    -webkit-font-smoothing: auto;
    align-items: center;
    border: 1px solid;
    border-radius: 1rem;
    box-sizing: border-box;
    cursor: pointer;
/*    display: flex;
*/    margin: 0.2rem;
    padding: 0 .75rem;
    position: relative;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    background: none;
/*    justify-content: center;*/
}


.BTNmin {
    min-height: 30px;
    max-height: 30px;
}

.fit-width{
    width:fit-content;
}

.listBadge {
    position: absolute;
    top: 4%;
    left: 4%;
    width: fit-content;
    color: white;
    background-color: slategray;
}


.IMDBrankBadge {
    position: absolute;
    top: 0;
    left: 0;
    width: fit-content;
    font-size: 0.7em;
    background-color: red;
}

.countBadge {
    position: absolute;
    top: 2px;
    left: 0;
    width:fit-content;
    font-size: 0.7em;
    background-color:#888888
}
.setBadge {
    position: absolute;
    top: 0;
    left: 0;
/*    width: fit-content;
    font-size: 0.em;
*/    background-color: #888888
}

.seasonBadge {
    position: absolute;
    top: 0;
    left: 20%;
    width: 32px;
    height: 32px;
    font-size: 2em;
    font-weight: 900;
    color: yellow;
    /*background-color: #888888*/
}

.insideBorder {
    border-style: solid;
    margin-top: 4px;
/*    box-shadow: 0px 0px 0px 3px black;
*/}
.collapse {
    display: block;
    visibility: visible;
    /*overflow: hidden;*/
    min-height: 100px; /* whatever you want here */
    /*height: 0; /* if you want it to start collapsed, you need this, else remove this */
}

    .collapse.in {
        height: auto;
    }


.bw {
    filter: grayscale(100%);
}

@media all {
    .fonCMDB {
        font-size: 3em;
        color: black;
        text-decoration: none;
        font-family: 'Times New Roman'
    }

    .fonResultsTitle {
        font-size: 1.5em;
        font-weight: bold;
    }

    .fonResultsTitleSmall {
        font-size: .75em;
        font-weight: normal;
        color: red;
    }
}

@media all and (max-width: 1000px) { /* screen size until 1000px */
    .fonCMDB {
        font-size: 2.0em; /* 1.2x default size */
        color: black;
        text-decoration: none;
        font-family: 'Times New Roman'
    }

    .fonResultsTitle {
        font-size: 1.25em;
        font-weight: bold;
    }

    .fonResultsTitleSmall {
        font-size: .6em;
        font-weight: normal;
        color: red;
    }
}

@media all and (max-width: 480px) { /* screen size until 500px, testing 480 */
    .fonCMDB {
        font-size: 1.5em; /* 0.8x default size, was 1.5 */
        color: black;
        text-decoration: none;
        font-family: 'Times New Roman'
    }

    .fonResultsTitle {
        font-size: 1em;
        font-weight: bold;
    }

    .fonResultsTitleSmall {
        font-size: .5em;
        font-weight: normal;
        color: red;
    }
}

.fine {
    font-style: italic
}

.character {
    font-weight: bold
}

.ResultsSrchOptions {
    color: red;
    text-decoration: none;
    font-weight: bold;
}

.fonNoBold {
    font-weight: lighter
}

.rating {
    z-index: 999;
    width: 130px
}

/*
.watermark {
    background-color: #bbbbff;
    font-style: italic;
}}*/

.fonMed {
    font-size: medium
}

.fonSearchText {
    color: blue;
    padding:0 3px;
}

.fonSmaller {
    font-size: smaller
}

.jstLeft {
    text-align: left
}


.fonBold {
    font-weight: bold
}

.fonLarger {
    font-size: 120%
}

.fonMedSet {
    font-size: 100%;
    color: black
}

.fonMedRSVP {
    font-size: 90%;
    color: gray
}

.fonMedGenres {
    font-size: small;
    color: black
}

.fonTitleName {
    font-size: 120%;
    text-decoration: none;
    color: blue
}
.fonBallot {
    font-size: 110%;
    color: mediumblue;
    font-weight: bold
}
.fonTitleYear {
    font-size: 100%;
}

.fonTagline {
    font-size: small;
    font-style: italic;
    color: #e42e03;
}

.directors {
    width: 100px;
    text-decoration: none;
    text-align: center
}
.director {
    color: black;
    font-weight: bold;
    font-size: 75%;
    text-decoration: none;
}
.directorInfo {
    color: black;
    font-size: 70%;
    text-decoration: none;
    text-align: center
}

.fonListName {
    color: blue;
    font-size: 120%;
    text-decoration: none
}

.clrRed {
    background-color: #ff5050;
}

.clrYlw {
    background-color: #ffff50;
}

.clrStat {
    background-color: #d0d0ff;
}*/

/*.expandY {
    overflow: auto;
}*/


.clearleft {
    clear: left
}

/*.fonEpisodeNameTXT {
    font-size: 16px;
    font-weight: bold
}*/

.menu td {
    white-space: nowrap
}

.menu a {
    color: black;
    text-decoration: none
}

    .menu a:hover {
        background-color: Silver;
    }

.menu hr {
    margin: -2px 0px;
    border: none;
    height: 2px
}

.label {
    text-align: right;
    width: 65px
}

.fonTitleRankTXT {
    font-size: x-large;
    font-weight: bold;
    color: red;
}

.fonIMDBRating {
    font-size: large;
    font-weight: bold;
    color:darkblue;
}

.fonVotesTXT {
    color: blue;
    font-size: 10px;
    text-decoration: none
}

/*.fonHighlight {
    color: red
}

.fonEpisode {
    font-size: small;
    color: black
}

.fonIMDBRank {
    color: Red;
    font-size:larger;
    align-self: center;
/*    margin-right: 4px
*/}

.fonIMDBRate {
    color: Black
}

.relative {
    position: relative
}

.topLeft {
    position: absolute;
    top: 0;
    left: 3px;
    pointer-events: none;
}

.topRight {
    position: absolute;
    top: 0;
    left: 25px;
    pointer-events: none;
}

.topLeft0 {
    position: absolute;
    top: 0;
    left: 0px;
    pointer-events: none;
}

.topLeft1 {
    position: absolute;
    top: 0;
    left: 0px;
    pointer-events: none;
}

.clickThru {
    pointer-events: none;
}

.full-width {
    flex: 1 1 100%;
}

.fullwidth {
    width: -webkit-fill-available;
}

.jstTop {
    vertical-align: top
}

td {
    border-width: 2px;
}*/

/*.HelpTitle {
    text-align: center;
    font-weight: bold;
    font-size: 24pt;
    text-align: center
}

.HelpMajor {
    text-align: left;
    font-weight: bold;
    font-size: 18pt
}*/

.center {
    text-align: center
}

.clrBeige {
    background: beige
}
*/
.fonSmall {
    font-size: small;
    font-weight: bold
}


.TabMenuStyle {
    left: 4px;
    top: 23px;
    position: absolute;
}

.TabMenuItemStyle {
    margin-left: 0;
    margin-bottom: 0;
    border: 1px solid #000;
    padding: 2px 2px 2px;
    color: black;
    text-decoration: none
}

.TabMenuItemSelected {
    margin-left: 0;
    margin-bottom: 0;
    border: 1px solid;
    border-bottom: 1px solid #C0C0FF;
    padding: 2px 2px 2px;
    color: black;
    text-decoration: none;
    font-weight: bold;
}

.inline {
    display: inline
}

.block {
    display: block;
    text-align: center;
}

/*.displayField {
    background: transparent;
    font-weight: bold;
    border-style: none
}

.scroll {
    overflow: scroll
}


.background {
    background-color: Gray
}

.popupControl {
    z-index: 210;
    visibility: hidden
}

/*.unhide {
    display: inline-block
}*/

/*.invisible {
    display: none
}*/


.hidden {
    display: none
}

.clrBase {
    background: #C0C0FF
}

.clrBaseDk {
    background: #A0A0FF
}

.clrNone {
    background: transparent
}


.panel {
    background: #FAFAFA;
    color: black;
    font-size: small;
    border-style: solid;
    border-width: 1px;
}

.rowEven {
    background-color: #DEDFDE;
    color: black;
    font-size: small;
    border-style: solid;
    border-width: 1px;
}

.rowOdd {
    background-color: #CCCCCC;
    color: black;
    font-size: small;
    border-style: solid;
    border-width: 1px;
}
.PanelTitlename {
    color: blue
}
.PanelSetname {
    color:  darkblue
}
.PanelSeriesname {
    color: blue;
    //font-style: italic
}
.PanelSeasonNum {
    color: yellow
}
.PanelActorName {
    color: red
}
.PanelDirectorName {
    color: red
}


.PanelListname {
    color: #aa5500;
    font-style: italic
}
.PanelEventname {
    color: #ff6385;
    font-style: italic
}

.clrTitle {
    background: #E0E0E0
}

.clrTitleLT {
    background: #F0F0F0
}

.clrMenuTitle {
    background: #CCCCCC
}

.clrMenuTitleMod {
    background: #BBBBBB
}
.fonSmall {
    font-size: small;
    font-weight: bold
}

.fonSeries {
    font-size: small;
    font-style: italic;
    color: blue
}

.menuDrop {
    border: 1px solid black;
    visibility: hidden;
    z-index: 999
}


.menuItem {
    color: black;
    text-decoration: none
}

    .menuItem:hover {
        color: black;
        background-color: Silver;
        text-decoration: none
    }

.jstLeft {
    text-align: left
}
.fonMed {
    font-size: medium
}

.fonYearTXT {
    color: blue;
    font-size: 15px
}


/*.clrTitleSelected {
    background: #AAAAAA
}

.clrViewing {
    background: #8A7CCC
}

.clrViewingLT {
    background: #CABCFF
}

.clrMenuViewing {
    background: #8A7CCC
}

.clrMenuViewingMod {
    background: #4A3C8C
}*/
/*.clrViewSelected {background:#7A6CBC}*/
/*.clrViewFooter {
    background: #C6C3C6
}

.clrMedia {
    background: #FFC080
}

.clrMediaLT {
    background: #FFE0A0
}

.clrMenuMedia {
    background: #FFC080
}

.clrMenuMediaMod {
    background: #FFA060
}*/

/*.clrCollection {
    background:
}*/

/*.clrCollectionLT {
    background: #E2D4BF
}*/

/*.clrMenuCollection {
    background:
}*/

/*.clrMenuCollectionMod {
    background: #B38E57
}

.clrList {
    background: #FAFAD2
}

.clrListMod {
    background: #DADAB2
}

.clrMenuList {
    background: #DADAB2
}

.clrMenuListMod {
    background: #CDCD97
}

.clrEvent {
    background: #FFCCFF
}

.clrMenuEvent {
    background: #FFAAFF
}

.clrMenuEventMod {
    background: #FF66FF
}

.clrWHTonBLK {
    color: White;
    background: Black
}

.clrIMDB {
    color: Black;
    background: #F7C31F
}

.clrSearch {
    background: lavenderblush
}

.clrUtil {
    background: #E0E0E0
}

/*.fonPageTitle {
    font-size: bolder x-large;
    text-decoration: none
}*/