html, body {
   overflow-x: hidden;
   scroll-behavior: smooth;
}
body.fixed {
   overflow-y: hidden;
   height: 100vh;
}
.modal-open {
  overflow: hidden;
}
.modal {
 display: none;
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background-color: var(--base-01);
 width: 40rem;
 height: fit-content;
 overflow: scroll;
 border-radius: .25rem;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 z-index: 10000;
 font-family: var(--body-font);
 color: var(--base-emphasis);
 max-width: calc(100% - 4rem);
 max-height: calc(100% - 4rem);
 overflow-x: hidden;
}
.modal-header {
 padding: .5rem 1.5rem;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.modal-header h2 {
 font-weight: 500;
}
.modal button {
 transition: all 0.3s ease-in-out
}
.modal button:hover {
 transition: all 0.3s ease-in-out
}
.modal-header #closeModalBtn {
   font-size: var(--text-xl);
   height: 2.5rem;
   width: 2.5rem;
   flex: 0 0 auto;
   display: flex;
   justify-content: center;
   align-items: center;
   background: var(--base-03);
   color: var(--base-emphasis);
   border-radius: 100%;
   text-shadow: none;
   cursor: pointer;
   transition: all 0.3s ease-in-out;
}
.modal-header #closeModalBtn:hover {
 background: var(--base-02);
 text-shadow: 0 0 1px var(--base-emphasis);
 transition: all 0.3s ease-in-out
}
.modal-body {
 padding: .75rem 1.5rem;
}
.modal-footer {
 text-align: right;
 padding: .75rem 1.5rem 1.5rem 1.5rem;
}
#modalOverlay {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(255, 255, 255, 0.2);
 z-index: 999;
}
.add-to-list-modal-overlay .modal label {
  width: 100% !important;
}
.modal label {
 display:flex;
 gap: 1rem;
 border:solid 1px var(--border-color);
 width: 100%;
 border-radius: .125rem;
 -webkit-font-smoothing: antialiased; 
 margin-bottom: .5rem;
 color:var(--base-emphasis);
 cursor: pointer;
 padding-top: 1.25rem !important;
 padding: 1rem;
 align-items: center;
 cursor: pointer;
 background-color: transparent;
 transition: all 0.3s ease-in-out;
}
.modal input[type=checkbox] {
 display: none;
}
.modal input:checked + label {
 border: solid 1px var(--base-emphasis);
 transition: all 0.3s ease-in-out;
 background-color: var(--base-02);
}
.modal label:hover {
 background-color: var(--base-02);
}
.modal .check {
 visibility: hidden;
 opacity: 0;
 transition: all 0.3s ease-in-out;
}
.modal input:checked + label .check {
 visibility: visible;
 opacity: 100%;
 transition: all 0.3s ease-in-out;
}
.modal .list-container .image-container {
 width: 6rem;
 margin-bottom: 0;
 flex: 0 0 auto;
}
.modal .list-details-container {
 display: flex;
 flex-direction: column;
 flex-grow: 1;
}
.modal .list-details-container h3 {
 font-size: var(--text-lg);
}
.modal .list-details-container p {
 font-size: var(--text-sm);
 color: var(--base-content);
}
.modal .list-container .check {
 font-size: var(--text-xl);
 height: 2rem;
 width: 2rem;
 flex: 0 0 auto;
 display: flex;
 justify-content: center;
 align-items: center;
 background: transparent;
 color: var(--base-content);
 border-radius: .125rem;
 text-shadow: none;
 cursor: pointer;
 transition: all 0.3s ease-in-out;
}
.modal .list-container .check:hover {
 background: var(--base-02);
 text-shadow: 0 0 1px var(--base-content);
 transition: all 0.3s ease-in-out;
}
.modal label i::before {
 content: "\f0c8";
 font-weight: 400;
}
.modal input:checked + label i::before {
 content: "\f14a";
 font-weight: 900;
}
.modal input:checked + label:hover i::before {
 content: "\f146";
}
.modal .new-list-button {
 font-size: var(--text-xl);
 flex: 1 0 auto;
 width: 100%;
 display: flex;
 align-items: center;
 background: transparent;
 color: var(--base-content);
 border-radius: .25rem;
 text-shadow: none;
 cursor: pointer;
 border: none;
 padding: .75rem 1rem;
 font-size: var(--text-lg);
 font-weight: 500;
 transition: all 0.3s ease-in-out;
}
.modal .new-list-button i {
 color: var(--base-mute);
 padding-right: 1rem;
 transition: all 0.3s ease-in-out;
}
.modal .new-list-button:hover i {
 color: var(--base-emphasis);
 transition: all 0.3s ease-in-out;
}
.modal .new-list-button:hover {
 background: var(--base-02);
 text-shadow: 0 0 1px var(--base-content);
 transition: all 0.3s ease-in-out;
}
.modal .new-list-name-container label {
 padding-top: 0 !important;
 padding: 0;
 border: none;
}
.modal .new-list-name-container label:hover {
 background-color: unset;
}
.modal .new-list-name-container input {
 height: 3.5rem;
 padding: 0 1.5rem;
 color: var(--base-emphasis);
 font-size: var(--text-sm);
 background-color: var(--base-02);
 width: 100%;
 border: 1px solid var(--border-color);
 border-radius: .5rem;
}
.modal .new-list-name-container input::-webkit-input-placeholder {
 color: var(--base-emphasis);
}
.modal .cancel-button {
   font-size: var(--text-lg);
   height: 2.75rem;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: .5rem;
   padding: 0 1.5rem;
   text-decoration: none;
   color: var(--primary);
   background-color: transparent;
   gap: .75rem;
   text-transform: none;
   letter-spacing: normal;
   font-weight: 600;
   border: none;
}
.modal .cancel-button:hover {
   background-color: var(--base-03);
}
.modal .done-button, .modal .modal-delete-list-button {
 font-size: var(--text-base);
 border: 2px solid var(--base-mute);
 background-color: transparent;
 color: var(--base-emphasis);
 text-shadow: none;
 text-transform: uppercase;
 letter-spacing: 1px;
 padding: .5rem .75rem;
 margin: 0 1rem;
}
.modal .done-button:hover {
 background: var(--base-02);
 text-shadow: 0 0 1px var(--base-emphasis);
}
#addToListModal.modal,
#createClipModal.modal {
   display: flex;
   flex-direction: column;
   bottom: 0;
   left: 0;
   right: 0;
   transform: none;
   top: unset;
   max-width: unset;
   max-height: calc(100vh - 8rem);
   width: 100%;
   border-top-left-radius: 1rem;
   border-top-right-radius: 1rem;
   overflow-x:hidden
}
#addToListModal .modal-header,
#createClipModal .modal-header {
   position: relative;
}
#addToListModal .modal-header h2,
#createClipModal .modal-header h2 {
   font-weight: 700;
   text-wrap: auto;
   font-size: var(--text-xl);
   line-height: 1.3;
}
#addToListModal .modal-header::after,
#createClipModal .modal-header::after {
   content: "";
   width: 100%;
   display: block;
   height: 1px;
   background-color: var(--border-color);
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
}
#addToListModal .modal-body,
#createClipModal .modal-body {
   flex-grow: 1;
}
#addToListModal .modal-body .lists-container {
   max-height: calc(100vh - 24rem);
   overflow: auto;
}
#addToListModal .modal-body label {
   border-radius: .5rem;
   padding: 1rem 1rem .5rem 1rem !important;
}
#addToListModal .modal-body .modedeletelist label {
   padding: 0px !important;
}
#addToListModal .new-list-button {
   position: relative;
   padding: 1.5rem 1.5rem;
   margin: 0 -1.5rem;
   width: calc(100% + 3rem);
}
#addToListModal .new-list-button::before {
   content: "";
   width: 100%;
   display: block;
   height: 1px;
   background-color: var(--border-color);
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
}
#addToListModal .new-list-button::after {
   content: "";
   width: 100%;
   display: block;
   height: 1px;
   background-color: var(--border-color);
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
}
#addToListModal .done-button,
#createClipModal .done-button {
   font-size: var(--text-lg);
   border: 1px solid var(--primary);
   height: 2.75rem;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: .5rem;
   padding: 0 1.5rem;
   text-decoration: none;
   color: var(--dark-content);
   background-color: var(--primary);
   gap: .75rem;
   text-transform: none;
   letter-spacing: normal;
   font-weight: 700;
   margin: 0;
}
#addToListModal .done-button:hover,
#createClipModal .done-button:hover {
   background-color: var(--primary-focus);
}
#buttonsAddToList,
#buttonsRenameList,
#buttonsDeleteList,
#buttonsAddNewList,
#buttonsCreateList {
   display: flex;
   gap: .5rem;
   justify-content: end;
}
/* START OF CLIPPING MODE */
.header-media-container.active {
  z-index: 100;
}



/* END OF CLIPPING MODE */
@media only screen and (min-width: 360px) {
  /* START OF CLIPPING MODE */
  /* END OF CLIPPING MODE */
}

@media only screen and (min-width: 500px) {
  /* START OF CLIPPING MODE */
  /* END OF CLIPPING MODE */
}

@media only screen and (min-width: 640px) {
   #addToListModal.modal {
       max-width: 40rem;
       border-radius: 1rem;
       top: 50%;
       transform: translate(-50%, -50%);
       margin: 0;
       left: 50%;
   }
   #addToListModal .modal-body .lists-container {
       height: unset;
   }
  /* START OF CLIPPING MODE */
  /* END OF CLIPPING MODE */
}

@media only screen and (min-width: 768px) {
  /* START OF CLIPPING MODE */
  /* END OF CLIPPING MODE */
}

@media only screen and (min-width: 1024px) {
  /* START OF CLIPPING MODE */
  /* END OF CLIPPING MODE */
}

@media only screen and (min-width: 1280px) {
  /* START OF CLIPPING MODE */
  /* END OF CLIPPING MODE */
}

@media only screen and (min-width: 1536px) {
  /* START OF CLIPPING MODE */
  /* END OF CLIPPING MODE */
}