.bookmarks-container{width:90%;max-width:1200px;margin:0 auto}
.bookmarks-container-component{width:100%;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:24px}
.bookmarks-container-component.list-view-active{max-width:808px !important;margin:0 !important;gap:0}
.main-title-wrapper{margin-bottom:1.5rem}
.main-title{font-size:2rem;margin:0 0 .5rem 0}
.main-subtitle{margin:0;color:#555;font-size:1.1rem}
#mybookmarks .bookmarks-title{margin:64px 0 32px 0}
.bookmarks-title h1{font-size:40px !important}
.bookmarks-header:not(.hidden){display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:32px}
.header-title{font-size:24px;font-weight:700;margin:0}
.header-sub{font-size:20px;font-weight:400;margin:0}
.icon{width:28px;height:28px}
.toggle-icon{width:44px;height:44px}
.view-toggle{display:flex;width:64px;height:32px;padding:0;border:1.5px solid black;border-radius:6px;background:0;cursor:pointer;overflow:hidden}
.view-toggle__option{display:flex;align-items:center;justify-content:center;width:50%;transition:background-color .2s ease,fill .2s ease;height:100%}
.view-toggle__option--grid{background-color:black}
.view-toggle__option--grid .toggle-icon{fill:white}
.view-toggle__option--list{background-color:white}
.view-toggle__option--list .toggle-icon{fill:black}
.bookmarks-container-component.list-view-active .view-toggle__option--grid{background-color:white}
.bookmarks-container-component.list-view-active .view-toggle__option--grid .toggle-icon{fill:black}
.bookmarks-container-component.list-view-active .view-toggle__option--list{background-color:black}
.bookmarks-container-component.list-view-active .view-toggle__option--list .toggle-icon{fill:white}
#list-view{display:none}
#thumbnail-view{display:flex;flex-direction:row;flex-wrap:wrap;gap:32px}
.bookmarks-container-component.list-view-active #thumbnail-view{display:none}
.bookmarks-container-component.list-view-active #list-view{display:flex;flex-direction:column}
.thumbnail-item{background-color:white;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;height:171px;width:227px;gap:4px}
.thumbnail-image-wrapper{position:relative;width:227px;height:127px;object-fit:cover;min-height:0;flex:9;border:1px solid #aaa8a3;border-radius:16px;overflow:hidden}
.thumbnail-image{width:100%;height:100%;object-fit:cover;display:block}
.video-duration{position:absolute;bottom:.5rem;right:.5rem;background-color:rgba(0,0,0,0.7);color:white;font-size:.8rem;padding:.2rem .5rem;border-radius:4px}
.thumbnail-details{padding:.2rem;display:flex;justify-content:space-between;align-items:flex-start;width:227px;flex:1;height:40px}
.thumbnail-details h3.thumbnail-title{font-weight:400;margin:0;width:191px;font-size:14px !important;line-height:18px}
.list-item{display:flex;align-items:center;padding:1rem 0;border-bottom:1px solid #e0e0e0;width:100%;gap:15px;min-height:112px;height:auto !important}
.list-item-icon{margin-right:9px;width:3%}
.list-item-details{flex-grow:1;text-decoration:none;color:inherit;min-height:3em;height:auto !important}
.list-title{font-size:20px;font-weight:500;margin:0 0 .25rem 0}
.list-subtitle{font-size:16px;color:#6f7171;margin:0}
a.list-item-details:focus,a.list-item-details:hover{color:#000;text-decoration:none}
button.bookmark-toggle-btn:focus{outline-offset:-5px}
.bookmark-toggle-btn{background:0;border:0;padding:0;cursor:pointer;line-height:0;width:10%;height:3em;top:-1px;position:relative}
.bookmark-toggle-btn .icon{margin-right:0;width:24px;height:24px}
.thumbnail-item.is-removing,.list-item.is-removing{transition:opacity .4s ease,transform .4s ease;opacity:0;transform:scale(0.95)}
.back-link{display:inline-block;margin-top:64px;font-weight:700;color:#000;text-decoration:none}
.bookmarks-header.hidden ~ .back-link{margin-top:0 !important}
.hidden{display:none !important}
#no-bookmarks-view h3{margin-top:0 !important;margin-bottom:20px !important;font-size:24px}
#no-bookmarks-view{line-height:.5}
#no-bookmarks-view svg{vertical-align:text-bottom}
.header-wrapper{line-height:1.5}
a.back-link:hover,a.back-link:focus{color:#000 !important}
@media(min-width:768px) and (pointer:coarse){#thumbnail-view{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2rem;align-items:stretch}
.list-item{padding:1.5rem 0}
.list-title{font-size:1.1rem}
.bookmark-toggle-btn{padding-bottom:10px !important}
}
@media(max-width:480px){#mybookmarks .bookmarks-title{margin:32px 0 32px 0}
.bookmarks-title h1{font-size:32px !important}
.header-title{font-size:20px}
#no-bookmarks-view{font-size:20px}
#no-bookmarks-view h3{font-size:20px}
.list-title{font-size:16px}
.list-subtitle{font-size:12px}
.list-item-icon{margin-right:1rem}
.mybookmarks-wrapper{display:flex;flex-direction:column;flex-wrap:wrap}
.bookmarks-container{margin-top:32px !important}
.bookmarks-container-component{width:100%;display:flex;flex-direction:column;gap:12px}
.thumbnail-item{height:100%;width:100%;gap:12px}
.thumbnail-details{height:40px;width:100%;gap:12px}
.thumbnail-image-wrapper{height:188px;width:100%}
.thumbnail-details h3.thumbnail-title{width:260px;line-height:20px;font-size:16px !important}
.bookmark-toggle-btn{padding-bottom:10px !important;top:-5px !important}
.back-link{margin-bottom:48px}
#no-bookmarks-view ~ .back-link{margin-top:48px}
.bookmarks-container-component:has(.no-bookmarks-message:not(.hidden):not([style*="display: none"])){gap:24px}
}
@media(min-width:1024px){.list-item{gap:0 !important}
.list-item-icon{margin-right:24px}
.bookmark-toggle-btn{width:44px !important;height:44px !important;padding-left:20px;margin-top:-8px}
}