/*html {
    height  : 100%;
    overflow: hidden;
    position: relative;
}*/
/*body {*/
/*    height  : 100%;*/
/*    overflow: auto;*/
/*    overflow: hidden;*/
/*    position: relative;*/
/*}*/

/*html {
  overscroll-behavior-y: contain;
  overscroll-behavior-x: none;
}
*/
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; }

/*label.order-ml-label {
    pointer-events: none;
}*/

.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 {
/*    border-bottom-width: 3px;*/
    --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 {
/*  border: 1px solid;*/
/*  padding: 10px;*/
  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 {
/*    display: block;*/
/*    min-height: 1.5rem;*/
    padding-left: 0.25em;
/*    margin-bottom: .125rem;*/
}

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

.user-buttons {
/*    min-height: 1.5rem;*/
    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;
/*    font-weight: 500 !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 {
/*    margin-top: 1rem;*/
}

.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-padding-x: 0.5em;*/
/*    --bs-badge-padding-y: 0.25em;*/
    --bs-badge-font-size: 0.85em;
/*    --bs-badge-font-weight: 400;*/
}

.btn {
/*    white-space: nowrap;*/
    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;
/*    padding: 0;*/
    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;
/*  height: 400px;*/
}
.wrapper-logout {
  display: flex;
/*  height: 400px;*/
  justify-content: center;
/*    color: black;*/
}
.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-grow: 0;*/
  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;
/*  padding: 30px;*/
  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: 1000px;*/
    --bs-modal-width: 80vw;
/*    --bs-modal-padding: 0;*/
}

.modal.demovideo{
/*    --bs-modal-width: 1000px;*/
    --bs-modal-width: 80vw;
/*    --bs-modal-padding: 0;*/
}

.modal.details{
/*    --bs-modal-width: 1000px;*/
/*    --bs-modal-padding: 0;*/
}

.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% * 0.75);*/
    padding-bottom: calc(56.25%);
    height: 0;
}

.modal-body.trailer 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;
}

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

.modal-content.details {
/*    width: 90%;*/
/*    background-color: transparent;*/
/*    border-radius: 0;*/
/*    border: 0;*/
/*    --bs-modal-border-width: 0;*/
}

.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;
/*  width: 60px;
  height: 90px;*/
  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: contain;*/
  object-fit: cover;
  border-radius: 0.25rem;
}

img.poster-display {
  width: 150px;
  height: 225px;
/*  object-fit: contain;*/
  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;
}

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

.icon-poster-thumb{
    font-size: 3rem;
/*    margin-inline: 1.5rem;*/
    color: lightslategrey;
}

.icon-poster-collection{
    font-size: 3.75rem;
/*    margin-inline: 1.5rem;*/
    color: lightslategrey;
}

.icon-poster-display-sm{
    font-size: 4.75rem;
/*    margin-inline: 1.5rem;*/
    color: lightslategrey;
}

.icon-poster-company{
    font-size: 2rem;
/*    margin-inline: 1.5rem;*/
    color: lightslategrey;
}

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

.icon-poster-select{
    font-size: 7.5rem;
/*    margin-inline: 1.5rem;*/
    color: lightslategrey;
}

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

.icon-poster-med{
    font-size: 9.375rem;
/*  width: 180px;*/
/*  height: 270px;*/
/*    margin-inline: 1.5rem;*/
    color: lightslategrey;
}

.icon-poster-profile{
    font-size: 8rem;
/*    margin-inline: 1.5rem;*/
    color: lightslategrey;
}

div.wsnw {
    white-space: nowrap;
}

.invisible-scrollbar {
/*  display: block;
  width: 10em;
*/  overflow: auto;
/*  height: 2em;
  padding: 1em;
  margin: 1em auto;
  outline: 2px dashed cornflowerblue;
*/}

.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;
/*    color:#337ab7*/
/*    color:#225FA8*/
}

.searchexplore-result-synopsis {
    font-size: .8em;
/*    color:gray*/
/*    color:#2C3E50*/
/*    color:#566573*/
/*    color:#727272*/
}

.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;

}