body {
    max-width: 1600px;
    margin: 0 auto;
    padding: 3px;
    /*min-width: 920px;*/
}

p {
    margin-bottom: 0.3rem;
}

.p-list {
    margin-bottom: 0rem;
}

.fs-4-list {
    font-size: 1.25rem !important;
}

.fs-5-list {
    font-size: 1.125rem !important;
}

.fs-6-list {
    font-size: 0.875em !important;
}

#spinner { display:none; } 
body.busy .spinner { display:block !important; }

#spinner2 { display:none; } 
body.busy .spinner { display:block !important; }

.row {
    --bs-gutter-x: 0;
}

.p-biography {
    white-space: pre-wrap;
}

.scaled {
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
}

.item-number {
    font-size: .75rem;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    color: grey;
}
.item-number-hi {
    font-size: .85rem;
    font-weight: 600;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    color: grey;
}
.item-number-med {
    font-size: .65rem;
    font-weight: 400;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    color: grey;
}
.item-number-low {
    font-size: .5rem;
    font-style: italic;
    font-weight: 300;
    padding-right: 0.5rem;
    color: grey;
}

.border-bottom.border-5 {
    --bs-border-color: #adb5bd;
}

.item-index {
    margin-left: 1rem;
    margin-right: 1rem;
    text-align: center; 
}

.search-input::placeholder {
    font-size: 50%;
}

.job-title, .role-title {
    margin-bottom: 0.1rem;
    font-size: .75rem;
}

.shadow {
    box-shadow: var(--bs-box-shadow) !important;
    --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);

}

.list-shadow {
  box-shadow: 5px 10px 18px #888888;
}

.list-group .list-group-item {
    font-size: .85rem;
    padding: .25rem .5rem;
    --bs-border-color: #dee2e6;
    --bs-border-radius: 0.375rem;

}

.input-group .input-group-text {
    font-size: .85rem;
    padding: .25rem .75rem;
}

.list-title {
    margin-top: 0;
    margin-bottom: 0;
}
.form-select .form-select-sm {
    font-size: .85rem;
    padding: .25rem .75rem;
    width: 20%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.form-select-label {
    font-size: .85rem;
    padding: .25rem .25rem;
    font-weight: 600;
}

.order-ml-sel {
    font-size: .85rem;
    padding: .25rem .75rem;
}

.order-ml-label, .genres-label, .years-label {
    font-size: .85rem;
    padding: .25rem .5rem;
    font-weight: 600;
}

.form-check {
    padding-left: 0.25em;
}

.form-check-inline {
    margin-right: 0.25rem;
}

.user-buttons {
    margin-bottom: .1rem;
    padding-left: 0.25em;
}

.user-buttons .list-btns {
    font-size: .60rem;
}
.movie-list {
    font-size: .85rem;
    box-sizing: border-box;
}

.decade-btn {

}

.genre-btn {

}

.decade-btn-outline {

}

.decade-list, .genre-list, .country-list {
    font-size: .80rem !important;
    font-weight: 400 !important;
    padding: .15rem .3rem !important;
}

.year-list {
    font-size: .80rem !important;
    padding: .15rem .5rem !important;
    text-align: right !important;
}

.year-label {
    margin-bottom: 0;
}

.year-dislabel {
    margin-bottom: 0;
    padding-top: .25rem;
    padding-bottom: .25rem;
    padding-left: 1rem;
    padding-right: 1rem;
    color: light-dark(#212529, #6c757d);
}

.year-button {
    padding-top: .2rem;
    padding-bottom: .2rem;
}

.year-div {
}

.year-div .btn-outline-secondary {
    --bs-btn-border-color: none;
    --bs-btn-color: light-dark(#212529, #6c757d);
}

.dropdown-menu {
    --bs-dropdown-min-width: 0;
    --bs-dropdown-padding-x: 0;
    --bs-dropdown-padding-y: 0.1rem;
    --bs-dropdown-font-size: .9rem;
    --bs-dropdown-item-padding-x: .5rem;
    --bs-dropdown-item-padding-y: 0.25rem;
    text-align: center;
}

.offcanvas-control {
    --bs-offcanvas-width: 155px; 
}

.offcanvas-year {
    --bs-offcanvas-width: 225px; 
}

.accordian-button-small {
    font-size: .85rem;
    --bs-accordion-btn-padding-y: .25rem;
    --bs-accordion-btn-padding-x: .75rem;
}

.accordian-body-small {
    font-size: .85rem;
    --bs-accordion-body-padding-y: .25rem;
    --bs-accordion-body-padding-x: .75rem;
}

.badge-totals {
    --bs-badge-padding-x: 0.5em;
    --bs-badge-padding-y: 0.25em;
    --bs-badge-font-size: 0.55em;
    --bs-badge-font-weight: 400;
}

.badge-tags {
    --bs-badge-font-size: 0.85em;
}

.btn {
    text-align: left;
}

.btn-sm {
    --bs-btn-padding-y: 0;
    --bs-btn-padding-x: 0.3rem;
    --bs-btn-font-size: 0.85rem;
    --bs-btn-border-radius: 0.25rem;
}

.btn-poster-med {
    --bs-btn-padding-y: 0;
    --bs-btn-padding-x: 0.2rem;
    --bs-btn-font-size: 0.85rem;
    --bs-btn-border-radius: 0.25rem;
}

.btn-w {
    white-space: wrap;
}

.btn-outline-primary {
    --bs-btn-hover-color: #0d6efd;
    --bs-btn-hover-bg: #fff;
}

.btn-credits {
    font-size: .75rem;
    --bs-btn-padding-x: 0.3rem;
}

.list-group .search-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list-group .explore-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-btn-label.list-group-item {
    font-size:  .85rem;
    font-weight: 500;
}

.main-header {
    --bs-navbar-padding-y: 0.25rem;
}

.main-header .nav-drop-top {
    position:relative;
    z-index:12;
}

.movie-list .list-header {
    --bs-navbar-padding-y: 0.1rem;
    z-index:10;
}

.edit-list {
    --bs-navbar-padding-y: 0.1rem;
}

.nav-link {
    --bs-nav-link-padding-x: 0.5rem;
    --bs-nav-link-padding-y: 0.1rem;
    font-size: .85rem;
}

.accordion {
    --bs-accordion-btn-icon-width: 0.75rem;
    --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0rem;
}

.wrapper {
  display: flex;
}
.wrapper-logout {
  display: flex;
  justify-content: center;
}
.col-left {
  flex-basis: 45%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px;
}
.col-left-logout {
  flex-basis: 45%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px;
  text-align: center;
}

.col-poster {
  padding: .75rem;
  flex-shrink: 0;
}

.col-poster-med {
  padding: .25rem;
  flex-grow: 0;
  flex-shrink: 0;
}

.col-poster-sm {
  padding: 0;
  flex-grow: 0;
  flex-shrink: 0;
}

.large {
  font-size: 65px; 
  font-weight: bold;
}
.medium {
  font-size: 45px; 
  font-weight: bold;
}
.small {
  font-size: 20px; 
}
.color {
  padding: 20px;
  margin: 2px;
}
.col-center {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.button {
  background-color: dodgerblue;
  color: white;
  border: none;
  outline: none;
  padding: 22px 16px;
  text-align: center;
  transition: 0.3s;
  font-size: 17px;
  cursor: pointer;
  border-radius: 5px;
}

.modal.trailer{
    --bs-modal-width: 80vw;
}

.modal.demovideo{
    --bs-modal-width: 80vw;
}

.modal.details{
}

.modal-body{
    padding: 0.5rem;
}

/*The edit list modal uses the padding here, but not the trailer modal*/
.modal-body.trailer{
    position: relative;
    padding-bottom: calc(56.25%);
    height: 0;
}

.modal-body.demovideo{
    position: relative;
    padding-bottom: calc(56.25%);
    height: 0;
}

.modal-body.trailer iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.modal-body.demovideo iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.modal-body.editlist {
    position: relative;
    padding:15px;
}

.modal-body.details{
    position: relative;
    padding:15px;
}

/* Explore Credits modal: modal-content is bounded to the viewport (via
   modal-dialog-scrollable) so modalHeader/modalFooter never scroll out of
   view. modalBody and exploreCreditsDiv fill the remaining space without
   scrolling themselves - only exploreCreditsTabsContent (crew/cast) and the
   .overflow-y-scroll film list (inside exploreCreditsList) scroll internally.
   #modalHeader/#modalBody/#modalFooter ids are reused by other modals
   (editlist, editnotes), so these rules are scoped under #explorecreditsModal. */
#exploreCreditsForm {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

#explorecreditsModal #modalBody {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

#exploreCreditsDiv {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

#exploreCreditsCon {
    flex: 0 0 auto;
    min-height: 0;
    overflow: hidden;
}

#exploreCreditsBtnsDiv {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

#exploreCreditsTabsContent {
    flex: 1 1 auto;
    min-height: 0;
}

#exploreCreditsList {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

#exploreCreditsList > .overflow-y-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.modal-content {
    max-width: 1600px;
    margin: 0 auto;
}

.modal-content.trailer {
    background-color: transparent;
    border-radius: 0;
    border: 0;
    --bs-modal-border-width: 0;
}

.modal-content.demovideo {
    background-color: transparent;
    border-radius: 0;
    border: 0;
    --bs-modal-border-width: 0;
}

.modal-content.details {
}

.modal.fade .modal-dialog {
  -webkit-transition: -webkit-transform 0.3s ease-out;
     -moz-transition: -moz-transform 0.3s ease-out;
       -o-transition: -o-transform 0.3s ease-out;
          transition: transform 0.3s ease-out;
}

.modal.in .modal-dialog {

}

.poster-layout {
  width: 100%;

  display: flex;
  gap: 16px;
}

.details-grow1 { flex-grow: 0; }

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2;
   -webkit-box-orient: vertical;
}

img.poster-tiny {
  width: 28px;
  height: 42px;
  object-fit: cover;
  border-radius: 0.2rem;
  margin-right: 5px;
}

img.poster-thumb {
  width: 48px;
  height: 72px;
  object-fit: cover;
  border-radius: 0.2rem;
}

img.poster-collection {
  width: 60px;
  height: 90px;
  object-fit: cover;
  border-radius: 0.2rem;
}

img.poster-display-sm {
  width: 76px;
  height: 114px;
  object-fit: cover;
  border-radius: 0.2rem;
}

img.poster-company {
  width: 120px;
  height: 45px;
  object-fit: cover;
  border-radius: 0.2rem;
}

img.poster-select {
  width: 120px;
  height: 180px;
  object-fit: cover;
  border-radius: 0.25rem;
}

img.poster-display {
  width: 150px;
  height: 225px;
  object-fit: cover;
  border-radius: 0.25rem;
}

img.poster-med {
  width: 180px;
  height: 270px;
  object-fit: cover;
  border-radius: 0.25rem;
}

img.poster-profile {
  width: 180px;
  height: 270px;
  object-fit: cover;
  border-radius: 0.25rem;
}

img.poster-backdrop {
  width: 1280px;
  height: 500px;
  object-fit: contain;
  border-radius: 0.25rem;
}

img.logo-tiny {
  width: 31px;
  height: 31px;
  object-fit: cover;
  border-radius: 0.2rem;
  margin-right: 6px;
}

img.logo-wide {
  width: 60px;
  height: 8px;
  /*object-fit: fit;*/
  /*border-radius: 0.2rem;*/
  margin-left: 12px;
}

.icon-poster-tiny{
    font-size: 1.75rem;
    margin-right: 5px;
    color: lightslategrey;
}

.icon-poster-thumb{
    font-size: 3rem;
    color: lightslategrey;
}

.icon-poster-collection{
    font-size: 3.75rem;
    color: lightslategrey;
}

.icon-poster-display-sm{
    font-size: 4.75rem;
    color: lightslategrey;
}

.icon-poster-company{
    font-size: 2rem;
    color: lightslategrey;
}

.icon-poster-details{
    font-size: 6rem;
    margin-inline: .5rem;
    color: lightslategrey;
}

.icon-poster-select{
    font-size: 7.5rem;
    color: lightslategrey;
}

.icon-poster-display{
    font-size: 9rem;
    margin-inline: .2rem;
    color: lightslategrey;
}

.icon-poster-med{
    font-size: 9.375rem;
    color: lightslategrey;
}

.icon-poster-profile{
    font-size: 8rem;
    color: lightslategrey;
}

div.wsnw {
    white-space: nowrap;
}

.invisible-scrollbar {
  overflow: auto;
}

.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

#searchexplore-results {
    width: 499px;
    margin-top: 32px;
    margin-left: 15px;
    position: absolute;
    z-index: 1000;
}

.searchexplore-result-title {
    vertical-align: top;
}

.searchexplore-result-synopsis {
    font-size: .8em;
}

.searchexplore-result-image {
    margin-right: 10px;
    float:left
}

.searchexplore-result {
    padding-top: 4px;
    padding-bottom: 22px;
    padding-left:4px
}

#searchexplore-see-more {
    color: #337ab7;
    height:auto !important
}

.btn-lightdark {
    --bs-btn-bg: light-dark(#f8f9fa, #2d3339);
    --bs-btn-hover-bg: light-dark(#d3d4d5, #424649);
    --bs-btn-border-color: light-dark(#e2e6e9, #374049);
    --bs-btn-border-width: 1px;

}
.sticky{
    position: sticky;
    top: 0;
}