:root {
    --bs-link-color: #000000;
    --maincolor: #fd0d60;
    --maincolor-border: #961240;
    --altcolor: #253b5c;
    --altcolor-border: #1a293f;
    --hoverbtn: #222222;
    --hoverbtn-text: #ffffff;
    --hoverbtn-border: #111111;
    --hoverbtn2: #333333;
    --hoverbtn2-text: #888888;
    --hoverbtn2-border: #222222;
    --bgcolor: #ffffff;
    --bgcolor2: #f2f2f2;
    --bs-body-bg: var(--bgcolor);
    --barcolor: var(--gray);
    --border-color: #c0c0c0;
    --bs-border-color: var(--border-color);
    --gray: #ededed;
    --lightgray: #e8e9ea;
    --lightgray2: #989898;
    --bs-nav-tabs-link-active-color: var(--textcolor);
    --text-color: #111111;
    --text-color-alt: #333333;
    --border-radius: 5px;
    --bs-border-radius: var(--border-radius);
    --bs-form-switch-width: 50px;
    --bs-form-switch-height: 28px;
    --skeleton-bg: var(--lightgray2);
    --skeleton-shimmer: var(--gray);
    --skeleton-radius: var(--border-radius);
    --mainfont: "IBM Plex Sans", sans-serif;
    --titlefont: "Space Grotesk", sans-serif;
}
::-webkit-scrollbar {
    width: 10px;
  }
  
::-webkit-scrollbar-track {
    background: var(--lightgray);
    box-sizing: border-box;
    border: 1px solid var(--border-color);
}
  
::-webkit-scrollbar-thumb {
    background: var(--lightgray2);
    cursor: pointer;
    border-radius: 0px;
    border: 3px solid transparent;
    min-height: 15vh;
}
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--maincolor);
  }
a {
    color: var(--bs-link-color);
    text-decoration: none;
}
button, .btn, label, th, .btn-primary, .btn-outline-secondary, .btn-secondary, .day-number, .date-badge, .date-badge * {
    font-family: var(--titlefont);
}
body.modal-open {
    padding-right: 0 !important;
}
.day-number {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 1.2rem;
    font-family: var(--titlefont);
}
.modal {
    --bs-modal-width: 600px;
    z-index: 9999999999999;
    background: #0c0c0ca6;
    backdrop-filter: blur(8px);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--maincolor);
    --bs-btn-border-color: var(--maincolor-border);
    --bs-btn-hover-color: var(--hoverbtn-text);
    --bs-btn-hover-bg: var(--hoverbtn);
    --bs-btn-hover-border-color: var(--hoverbtn-border);
    --bs-btn-focus-shadow-rgb: none;
    --bs-btn-active-color: var(--hoverbtn-text);
    --bs-btn-active-bg: var(--altcolor);
    --bs-btn-active-border-color: var(--altcolor-border);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: var(--hoverbtn2-text);
    --bs-btn-disabled-bg: var(--hoverbtn2);
    --bs-btn-disabled-border-color: var(--hoverbtn2-border);
}

body,
html {
    font-family: "IBM Plex Sans", sans-serif;
    font-style: normal;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
   /* overflow-x: hidden;*/
    height: 100%;
    background-color: #101010 !important;
    /*scrollbar-color: var(--hoverbtn) var(--lightgray2);
    scrollbar-width: thin;*/
}
h1,h2,h3,h4,h5,h6 {
    font-weight: 500;
    color: var(--text-color);
    font-family: var(--titlefont);
}
div#main {
    background-color: var(--bgcolor);
}

.container,
.container-lg,
.container-md,
.container-sm {
    max-width: 100%;
}

.calendar {
    margin-bottom: 50px;
}

.day-cell {
    min-height: 120px;
    border: 1px solid var(--border-color);
    padding: 5px;
    margin-left: -1px;
    margin-bottom: -1px;
    background: var(--bgcolor);
    flex: 1 1;
    min-width: 14.28%;
    cursor: pointer;
}

.day-number {
    font-weight: bold;
    margin-bottom: 5px;
}

.video-title {
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.day-cell .video-title {
    font-size: 11px;

}
.modal .video-thumb {
    border-radius: var(--border-radius);
    max-height: 45px;
    aspect-ratio: 4/3;
    object-fit: cover;
    margin: 0!important;
}
.video-title a:not(.ms-2,.dupe-bin-btn) {
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    -webkit-box-orient: vertical;
    line-height: 1.2em;
    border-left: 2px solid var(--maincolor);
    padding-left: 5px;
    flex-grow: 1;
    word-break: break-all;
}
.dark-mode .video-title a:not(.ms-2,.dupe-bin-btn) {
    color:white;
}

.content-expandable.expanded-overlay .video-title a {
    font-size: 15px;
    color: var(--text-color) !important;
}

.col.day-cell .content-expandable.expanded-overlay {
    background-color: var(--bgcolor) !important;
    border: 1px solid var(--border-color);
    padding-top: 18px !important;
}

.video-time {
    background-color: var(--gray);
    padding: 3px 6px;
    border-radius: calc(var(--border-radius) / 1.5);
    white-space: nowrap;
    font-weight: 700;
    width: 7.5ch;
    text-transform: lowercase;
    word-spacing: -4px;
    letter-spacing: -0.007rem;
    text-align: center;
    color: var(--text-color);
}

.modal .video-time {
    font-size: 14px;
    width: 4rem;
    padding: 3px;
    margin-right: 0;
}

.modal-header {
    background-color: var(--bgcolor2);
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--text-color);
    pointer-events: auto;
    background-color: var(--bgcolor);
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid var(--border-color);
    border-radius: var(--bs-modal-border-radius);
    outline: 0;
    overflow: hidden;
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: var(--bs-modal-padding);
    max-height: 70vh;
    overflow-y: scroll;
    scrollbar-color: var(--hoverbtn2-text) transparent;
}

.modal-body p {
    display: flex;
    /* Use flexbox for alignment */
    list-style-position: inside;
    list-style-type: auto;
    margin-bottom: 0;
    font-size: 14px;
    border-bottom: 1px solid var(--border-color);
    align-items: center;
    /* Vertically align items */
    gap: 8px;
    /* Space between time and title */
}

.modal-body p:last-child {
    border-bottom: none;
}

.modal-body p a {
    font-size: 16px;
    text-decoration: none;
    color: var(--text-color);
    padding: 5px;
    display: inline-block;
}

.bg-gray {
    background-color: var(--lightgray);
}

body .modal .modal-dialog {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    margin: 0;
}

a[data-bs-toggle="modal"] {
    text-decoration: none;
    background: var(--hoverbtn);
    color: white !important;
    padding: 3px 5px;
    font-size: 11px;
    border-radius: var(--border-radius);
}

.fancybox__container {
    z-index: 999999999999!important;
    border-radius: var(--border-radius);
}

.row.row-cols-7.g-0.border.text-start {
    border: none !important;
}

.nav-pills {
    --bs-nav-pills-border-radius: var(--border-radius);
    --bs-nav-pills-link-active-color: white;
    --bs-nav-pills-link-active-bg: var(--maincolor);
    gap: 3px;
    padding: 6px 0;
}

.nav-pills .nav-link {
    padding: 6px 11px;
}

.nav-link:focus,
.nav-link:hover {
    color: white;
    background: var(--maincolor);
}

.row.row-cols-7.g-0.border.text-center.fw-semibold.bg-dark.mb-1 {
    margin: 0 !important;
    text-transform: uppercase;
    background: var(--barcolor);
    color: white;
    border: 1px solid var(--barcolor);
    margin-left: -1px !important;
}

a[data-bs-toggle="modal"] {
    text-decoration: none;
    background: black;
    color: white !important;
    padding: 6px 10px 6px 8px;
    font-size: 13px;
    line-height: 15px;
    display: inline-flex;
    border-radius: var(--border-radius);
    margin-top: 3px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05rem;
}

a[data-bs-toggle="modal"]:hover,
html.dark-mode a[data-bs-toggle="modal"]:hover {
    background: var(--maincolor) !important;
}

.day-cell {
    min-height: 120px;
    border: 1px solid var(--border-color);
    padding: 5px;
    margin-left: -1px;
    margin-bottom: -1px;
    background: white;
    flex: 1 1;
    min-width: 14.28%;
}

h3.mt-4 {
    font-size: 1.15rem;
    text-transform: uppercase;
    background: var(--hoverbtn);
    display: inline-flex;
    padding: 6px 13px;
    line-height: 26PX;
    color: white;
    letter-spacing: 1px;
    border-radius: var(--border-radius);
}

.col.day-cell.bg-gray {
    background-color: var(--gray);
}
html.dark-mode .day-cell.bg-gray {
    background-color: var(--bgcolor2);
}
button.form-control.mb-4.button.upload {
    width: 100% !important;
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 0 !important;
}

.file-caption-icon {
    padding: 7px 5px;
    left: 4px;
    top: -1px;
    z-index: 4;
}

.file-caption.icon-visible .file-caption-name {
    padding-left: 25px;
}

.file-caption .input-group {
    gap: 0;
    overflow: hidden;
}

/*.file-caption-name {
    border-radius: var(--border-radius)!important;
}*/

.yss-panel,
#hidePanel_button {
    display: none !important;
}

button {
    white-space: nowrap;
}

button#toolbarToggle {
    background: var(--maincolor);
    width: 40px;
    height: 48px;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    line-height: 25px;
    padding: 5px;
    background: var(--bs-gray-900);
    /* background: transparent; */
    opacity: 0.75;
    transition: background 300ms ease, color 300ms ease, opacity 300ms ease;
    color: rgb(139, 139, 139);
    aspect-ratio: 1;
}

button#toolbarToggle.active,
button#toolbarToggle:hover {
    background: var(--maincolor);
    color: white;
    opacity: 1;
}

button#toolbarToggle i {
    color: inherit;
    transition: color 300ms ease;
}

button#toolbarToggle.active i {
    color: inherit;
}

.btn#studio,
button#syncButton {
    min-height: 48px;
    white-space: nowrap;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.btn {
    --bs-btn-padding-x: 0.88rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-font-size: 1em;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-radius: var(--border-radius);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.navbar .btn{
    max-height: 40px!important;
    min-height: 40px!important;
    font-size: 14px;
}
.btn-default span.hidden-xl,
.btn-primary span.hidden-xl,
button.btn.btn-default.btn-outline-secondary.fileinput-upload.fileinput-upload-button {
    display: none;
}

.row.row-cols-7.g-0.border.text-center.fw-semibold.bg-dark.mb-1,
.month-header {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}



.video-time:empty {
    display: none;
}

.btn-file span.hidden-xs {
    display: none;
}

.btn-default span.hidden-xs,
.file-caption.icon-visible .btn-file span.hidden-xs {
    display: none;
}

.input-group-btn.input-group-append {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    flex: 1;
}



#viewSelector:empty {
    opacity: 0.7;
    background-color: var(--bgcolor2);
    pointer-events: none;
    cursor: not-allowed;
}

/* .form-select, label, .form-label {
    font-size: 13px;
    line-height: normal;
    min-height: 23px;
}*/

.file-caption.icon-visible .btn.btn-secondary.btn-file {
    display: none;
}

input.file-caption-name.form-control.kv-fileinput-caption {
    /* display: none; */
    /*font-size: 13px;*/
    min-height: 48px;
    background-color: var(--bgcolor);
}

input.file-caption-name.form-control.kv-fileinput-caption::placeholder,
input::placeholder {
    color: var(--text-color) !important;
}

.file-caption.icon-visible input.file-caption-name.form-control.kv-fileinput-caption {
    display: inline-flex;
    /*font-size: 13px;*/
    flex: 1;
    width: auto;
}

.btn-file input[type=file]#csvFile,
#file-upload-button {
    cursor: pointer !important;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23888888'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23555555'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

#darkModeToggle,
#timeToggle,
#focusToggle,
#thumbsToggle
 {
    width: var(--bs-form-switch-width);
    height: var(--bs-form-switch-height);
    transition: all 300ms ease;
    margin: 0;
    cursor: pointer;
}

.form-switch {
    /* padding-left: var(--bs-form-switch-width); */
    gap: 5px;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    font-size: 12px;
}

.col.day-cell .content-expandable {
    position: relative;
    background-color: transparent;
    z-index: 999;
    outline: 0px solid var(--border-color) !important;
    padding: 0;
    box-shadow: 4px 4px 10px -1px rgba(0, 0, 0, 0);
    border-radius: var(--border-radius);
    transition: all 300ms;
    pointer-events: all;
    cursor: pointer;
}

/*.col.day-cell:hover .content-expandable {
    position: absolute;
    background-color: var(--bgcolor);
    padding: 10px;
    outline: 1px solid var(--border-color)!important;
    box-shadow: 4px 4px 10px -1px rgba(0,0,0,0.3);
}*/

.col.day-cell:has(.content-expandable:empty) {
    pointer-events: none;
}

#searchbar-row {
    background: var(--bgcolor2);
    border: 1px solid var(--border-color);
}

div#searchbar-row[style*="display:none;"],
#searchbar-row[style*="display: none;"] {
    display: none !important;
}

div#searchbar-row-skeleton {
    border: 1px solid var(--border-color);
    background-image: linear-gradient(to right, var(--lightgray) 8%, var(--lightgray2) 15%, var(--lightgray) 60%);
    border-color: var(--border-color);
    opacity: 0.6;
}

/* =================================== */
/*           DARK MODE STYLES          */
/* =================================== */

html.dark-mode:root {
    --bs-link-color: #ffffff;
    --hoverbtn: #ffffff;
    --hoverbtn-text: #333333;
    --hoverbtn-border: #ffffff;
    --hoverbtn2: #333333;
    --hoverbtn2-text: #888888;
    --hoverbtn2-border: #222222;
    --bgcolor: #171717;
    --bgcolor2: #1e1e1e;
    --border-color: #363636;
    --gray: #303030;
    --lightgray: #2a2a2a;
    --lightgray2: #121212;
    --text-color: #e0e0e0;
    --text-color-alt: #b3b3b3;
    --barcolor: var(--border-color);
  /* Skeleton loader theme variables */
  --skeleton-bg: var(--lightgray2);
  --skeleton-shimmer: var(--gray);
  --skeleton-radius: var(--border-radius);
}

html.dark-mode body,
html.dark-mode .video-title a {
    color: var(--text-color);
}

html.dark-mode .day-cell {
    background-color: var(--bgcolor);
}

html.dark-mode a[data-bs-toggle="modal"] {
    background: var(--gray);
    color: white !important;
}

html.dark-mode h3.mt-4 {
    background: var(--maincolor);
    color: white;
}

html.dark-mode .form-select,
html.dark-mode input.file-caption-name.form-control.kv-fileinput-caption {
    background-color: var(--bgcolor);
    color: var(--text-color);
    border-color: var(--border-color);
}

/* Update the select arrow color for dark mode */
html.dark-mode .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e0e0e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked {
    background-color: var(--maincolor);
    border-color: var(--maincolor-border);
}

.form-select {
    font-size: 16px;
    min-height: 48px;
    cursor: pointer;
}

.form-select:focus,
.form-check-input:focus {
    outline: 0;
    box-shadow: none;
}

.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fd0d60'/%3e%3c/svg%3e");
}

html.dark-mode .btn-close {
    --bs-btn-close-color: #ffffff;
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}

header,
nav.navbar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    background-color: var(--bs-dark-rgb) !important;
    border-bottom: 1px solid rgba(54, 54, 54, 0.88);
    backdrop-filter: blur(7px);
    --bs-dark-rgb: rgb(22 22 22 / 88%);
    z-index: 9999999999;
}

html.dark-mode header,
html.dark-mode nav.navbar {
    --bs-dark-rgb: rgb(22 22 22 / 80%);
    border-bottom: 1px solid var(--border-color);
}

header h1,
nav.navbar h1 {
    margin: 0;
    font-size: clamp(1.125rem, 0.7422rem + 1.4583vw, 2rem);
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: var(--text-color);
}

.tooltip {
    --bs-tooltip-bg: var(--maincolor);
}

.tooltip-inner {
    color: white;
    background-color: var(--bs-tooltip-bg);
    border-radius: var(--border-radius);
    padding-top: 5px;
    padding-bottom: 6px;
}

.form-control {
    color: var(--text-color);
}

input::file-selector-button {
    cursor: pointer;
}

button.btn.btn-default.btn-outline-secondary.fileinput-remove.fileinput-remove-button {
    border-color: var(--border-color);
    background-color: var(--bgcolor2);
}

button.btn.btn-default.btn-outline-secondary.fileinput-remove.fileinput-remove-button {
    background-color: var(--bgcolor);
    border-color: var(--bs-form-valid-border-color);
}

button.btn.btn-default.btn-outline-secondary.fileinput-remove.fileinput-remove-button:hover {
    border-color: var(--altcolor-border);
    background-color: var(--altcolor);
}

button#syncButton {
    /* font-size: 13px;*/
    min-height: 48px;
}

.toolbar {
    border-color: var(--border-color);
    background-color: var(--bgcolor2);
    /*padding: 16px 10px;
    margin: 0 0 20px 0;
    border-radius: calc(var(--border-radius) * 1.5);
    border-width: 1px;
    border-style: solid;*/
    z-index: 9999999;
}
.sticky-wrapper:has(.toolbar) {
    z-index: 99999999;
    position: relative;
}
#calendarContainer > .tab-content {
    padding: 0px;
    border: 0px solid var(--border-color);
    border-top: 0;
    margin-top: 20px;
}

h3#video-counter {
    display: inline-flex;
    gap: 6px;
    /*padding: 10px 16px;
    background-color: #141414;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--maincolor);*/
    font-size: 1.4rem;
    font-weight: 400;
}

h3#video-counter:before {
    content: "\F21F";
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
    text-transform: none;
}


.bi::before,
[class*=" bi-"]::before,
[class^=bi-]::before {
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 30px;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.tooltip.show {
    opacity: 1;
}

html.dark-mode .video-title a {
    color: var(--hoverbtn2-text);
}

.navbar-dark .navbar-brand {
    color: #fff;
}

.navbar-dark .form-switch {
    font-size: 14px;
    color: #999;
    padding: 0;
}

.navbar-dark .form-switch #darkModeToggle.form-check-input,
.navbar-dark .form-switch #timeToggle.form-check-input,
.navbar-dark .form-switch #focusToggle.form-check-input{
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.35%29'/%3e%3c/svg%3e")!important;
    transition: background-position .15s ease-in-out;
    background-color: #101010;
    border-color: #4f4f4f;
}
.toolbar .form-switch .form-check-input, .form-switch .form-check-input{
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%2822, 22, 22, 0.35%29'/%3e%3c/svg%3e")!important;
    transition: background-position .15s ease-in-out;
    background-color: var(--gray);
    border-color: var(--border-color);
}
.navbar-dark .form-switch #darkModeToggle.form-check-input:checked,
.navbar-dark .form-switch #timeToggle.form-check-input:checked,
.navbar-dark .form-switch #focusToggle.form-check-input:checked,
.toolbar .form-switch .form-check-input:checked, .form-switch .form-check-input:checked{
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 1%29'/%3e%3c/svg%3e")!important;
    background-color: var(--maincolor);
    border-color: var(--maincolor-border);
}

.btn-file input[type=file] {
    top: 0;
    left: auto;
    min-width: 100%;
    min-height: 100%;
    text-align: right;
    opacity: 0;
    background: none repeat scroll 0 0 transparent;
    cursor: inherit;
    display: block;
    position: absolute;
    right: 0px;
    /* z-index: 2; */
}

.input-group .btn {
    position: static;
    z-index: 2;
    overflow: visible;
    min-height: 48px;
}

.file-caption.icon-visible input#csvFile {
    display: none;
}

#calendarContainer.hoverfocus .month-grid-wrapper:has(.col.day-cell:not(.bg-gray):hover) .col.day-cell:not(:hover) *:not(.day-number,.custom-tooltip),
#calendarContainer.hoverfocus .tab-content:has(.col.day-cell:not(.bg-gray):hover) .col.day-cell:not(:hover) *:not(.day-number,.custom-tooltip) {
    opacity: 0.5;
    filter: blur(0px);
}

#calendarContainer.hoverfocus .month-grid-wrapper:has(.col.day-cell:not(.bg-gray):hover) .col.day-cell:not(:hover),
#calendarContainer.hoverfocus .tab-content:has(.col.day-cell:not(.bg-gray):hover) .col.day-cell:not(:hover) {
    background-color: var(--lightgray2);
}

#calendarContainer.hoverfocus .month-grid-wrapper:has(.col.day-cell:not(.bg-gray):hover) .col.day-cell:not(:hover) .day-number,
#calendarContainer.hoverfocus .tab-content:has(.col.day-cell:not(.bg-gray):hover) .col.day-cell:not(:hover) .day-number {
    opacity: 0.5;
}
body.time-hidden .video-time {
    display: none;
}

body.hideThumbs .list-view-thumbnail-container,
body.hideThumbs .modal .video-thumb {
    display: none;
}

.bg-light {
    background-color: var(--bgcolor) !important;
    color: var(--text-color);
}

.bg-primary {
    background-color: var(--maincolor) !important;
    color: white;
}

.bg-secondary {
    --bs-bg-opacity: 1;
    background-color: var(--gray) !important;
}

.accordion-button:not(.collapsed) {
    color: var(--text-color);
    background-color: var(--bgcolor2);
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--border-color);
}

.accordion-button:focus {
    z-index: 3;
    border-color: var(--border-color);
    outline: 0;
}

.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    font-size: 1.5rem;
    color: var(--text-color);
    text-align: left;
    background-color: var(--bs-accordion-btn-bg);
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
    box-shadow: none;
}

.list-group-numbered > .list-group-item::before {
    content: counters(section, "") "";
    counter-increment: section;
    vertical-align: middle;
    font-size: 16px;
    margin-right: 8px;
    font-weight: bold;
    margin-top: 3px;
    width: 36px;
    color: var(--hoverbtn2-text);
    padding-right: 15px;
    border-right: 1px solid var(--border-color);
    text-align: center;
}

.date-badge {
    text-align: center;
    padding: 10px;
    background-color: var(--bgcolor2);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-right: 10px;
    color: var(--text-color);
    aspect-ratio: 1;
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: center;
    align-items: center;
    width: -webkit-fill-available;
}

.date-badge .small.text-muted {
    color: var(--maincolor) !important;
}

.list-group .video-time {
    font-size: 14px;
    padding: 2px 6px;
    border: 1px solid var(--border-color);
    width: 7.5ch !important;
    max-width: unset;
    display: inline-flex;
    text-align: center;
    margin-top: 1px;
}
.time-hidden .video-title a {
    border: none;
}
.input-group-lg > .btn,
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text {
    padding: .5rem 1rem;
    font-size: 1rem;
    border-radius: var(--bs-border-radius);
    min-height: 48px;
    /*color: var(--text-color);*/
}

.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
    color: white;
    background-color: var(--maincolor);
    border-color: var(--maincolor);
}

.nav-tabs > .nav-item button.nav-link {
    font-size: 1.4rem;
    min-width: 100px;
    background: var(--bgcolor);
    position: relative;
}
.nav-tabs > .nav-item button.nav-link:hover {
    background: var(--bgcolor);
    color: var(--text-color);
}
.nav-pills {
    --bs-nav-pills-border-radius: var(--border-radius);
    --bs-nav-pills-link-active-color: white;
    --bs-nav-pills-link-active-bg: var(--maincolor);
    gap: 3px;
    padding: 6px 0;
}

.nav-tabs > .nav-item button.nav-link.active {
    font-weight: bold;
    z-index: 2;
}

ul#yearTabNav,
ul#yearTabNavList {
    position: relative;
}

ul#yearTabNav:before,
ul#yearTabNavList:before {
    content: "";
    position: absolute;
    display: block;
    width: 100vw;
    height: 1px;
    bottom: -1px;
    right: 0;
    background: var(--border-color);
    z-index: 0;
}

ul#yearTabNav:after,
ul#yearTabNavList:after {
    content: "";
    position: absolute;
    display: block;
    width: calc(100% + 3rem);
    height: 1px;
    bottom: -1px;
    left: 0;
    background: var(--border-color);
    z-index: 0;
}

/* =================================== */
/*         SKELETON LOADER STYLES      */
/* =================================== */
.skeleton-animated {
    position: relative;
    overflow: hidden;
}

.skeleton-animated::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(240,240,240,0) 0%, var(--skeleton-shimmer) 50%, rgba(240,240,240,0) 100%);
    animation: skeleton-shimmer 1.2s infinite;
    z-index: 2;
    pointer-events: none;
}

@keyframes skeleton-shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.skeleton-wrapper {
    opacity: 0.7;
    /* Make it slightly transparent */
}

.skeleton {
    animation: skeleton-loading 2.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
    background-color: var(--skeleton-bg);
    background-image: linear-gradient(to right, var(--bgcolor2) 8%, var(--lightgray) 18%, var(--bgcolor2) 33%);
    background-size: 1200px 100%;
    /* border-radius: var(--skeleton-radius); */
    border-color: color-mix(in srgb, var(--border-color) 0%, var(--border-color) 40%)!important;
}

/* Specific skeleton element sizes */
.skeleton-header {
    width: 300px;
    height: 38px;
    margin-bottom: 20px;
    border-radius: var(--skeleton-radius);
}

.skeleton-title {
    width: 180px;
    height: 22px;
    margin-bottom: 12px;
    border-radius: var(--skeleton-radius);
}

.skeleton-line {
    width: 100%;
    height: 14px;
    margin-bottom: 8px;
    border-radius: var(--skeleton-radius);
}

.skeleton-block {
    width: 100%;
    height: 48px;
    margin-bottom: 16px;
    border-radius: var(--skeleton-radius);
}

.skeleton-day-header {
    height: 40px;
    margin-left: 0px;
    padding-top: 10px!important;
    border-radius: var(--skeleton-radius);
}

.skeleton-day-cell {
    min-height: 120px;
    border: 1px solid color-mix(in srgb, var(--border-color) 0%, var(--border-color) 40%);
    padding: 5px;
    margin-left: -1px;
    margin-top: -1px;
    flex: 1 1;
    min-width: 14.28%;
    border-radius: 0;
    animation: skeleton-loading 2.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
    /* background-color: var(--skeleton-bg); */
    background-image: linear-gradient(to left , var(--bgcolor) 0%, color-mix(in srgb, var(--gray) 0%, var(--gray) 50%) 50%, var(--bgcolor) 100%);
    background-size: 1200px 100%;
    /* border-radius: var(--skeleton-radius); */
    background-attachment: fixed;
}

.skeleton-day-number {
    width: 25px;
    height: 25px;
    border-radius: 50%;
}

/* The animation that moves the gradient */
@keyframes skeleton-loading {
    0% {
        background-position: -600px 0;
    }
    100% {
        background-position: 600px 0;
    }
}

/* Choices.js custom icons for language */
.choices__item--choice[data-value="en"]::before,
.choices__list .choices__item.choices__item--selectable[data-value="en"]::before {
    content: url('https://flagicons.lipis.dev/flags/4x3/gb.svg');
    width: 19px;
    object-fit: contain;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    margin-top: 1px;
}

.choices__item--choice[data-value="es"]::before,
.choices__list .choices__item.choices__item--selectable[data-value="es"]::before {
    content: url('https://flagicons.lipis.dev/flags/4x3/es.svg');
    width: 19px;
    object-fit: contain;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    margin-top: 1px;
}

/* Choices.js custom icons for view modes using data-value */
.choices__list .choices__item--choice[data-value="tabs"]::before,
.choices__list .choices__item.choices__item--selectable[data-value="tabs"]::before {
    content: "\F1E2";
    font-family: 'bootstrap-icons';
    font-size: 1em;
    margin-right: 0.5em;
    vertical-align: middle;
}

.choices__list .choices__item--choice[data-value="full"]::before,
.choices__list .choices__item.choices__item--selectable[data-value="full"]::before {
    content: "\F3FB";
    font-family: 'bootstrap-icons';
    font-size: 1em;
    margin-right: 0.5em;
    vertical-align: middle;
}

.choices__list .choices__item--choice[data-value="list"]::before,
.choices__list .choices__item.choices__item--selectable[data-value="list"]::before {
    content: "\F605";
    font-family: 'bootstrap-icons';
    font-size: 1em;
    margin-right: 0.5em;
    vertical-align: middle;
}
.choices__list .choices__item--choice[data-value="plain"]::before,
.choices__list .choices__item.choices__item--selectable[data-value="plain"]::before {
    content: "\F478";
    font-family: 'bootstrap-icons';
    font-size: 1em;
    margin-right: 0.5em;
    vertical-align: middle;
}

.choices__list .choices__item--choice.is-highlighted {
    background-color: var(--maincolor) !important;
    color: white !important;
}

.is-focused .choices__inner,
.is-open .choices__inner,
.is-open .choices__list--dropdown,
.is-open .choices__list[aria-expanded] {
    border-color: var(--border-color) !important;
}

.choices__list--dropdown .choices__item,
.choices__list .choices__item,
.choices__list--single .choices__item {
    font-size: 16px;
    white-space: nowrap;
}

.toolbar .choices__inner, .sorting .choices__inner,  .choices__inner{
    display: inline-block;
    vertical-align: top;
    background-color: var(--bgcolor)!important;
    padding: .5rem .75rem .5rem .75rem;
    border: 1px solid var(--border-color)!important;
    border-radius: var(--border-radius)!important;
    font-size: initial;
    min-height: 48px;
}
.choices {
   margin-bottom: 0!important;
}
.toolbar .choices__list--dropdown,
.toolbar .choices__list[aria-expanded], 
.sorting .choices__list--dropdown,
.sorting .choices__list[aria-expanded],
.choices__list--dropdown,
.choices__list[aria-expanded] {
    background-color: var(--bgcolor2)!important;
    border: 1px solid var(--border-color)!important;
    border-bottom-left-radius: var(--border-radius)!important;
    border-bottom-right-radius: var(--border-radius)!important;
}
/*.toolbar .choices__list--dropdown .choices__list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: stretch;
    align-items: stretch;
    justify-content: center;
}
.toolbar .choices__list .choices__item--choice[aria-selected="true"]{
    order: -1;
    cursor: not-allowed;
}*/

footer.bg-dark {
    background-color: #101010 !important;
    font-size: 13px;
}

/*.day-cell:has(.expand-placeholder) .content-expandable {
    display: none;
}*/

.toolbar:has(#searchbar-row) {
    padding: 15px 0 7px 0;
}

.toolbar:has(#searchbar-row) > .col-sm-12 {
    padding: 0 18px;
}

.toolbar #searchbar-row {
    margin: 0 !important;
    background-color: transparent !important;
    border: none;
    padding: 15px 20px 10px 20px !important;
    border-top: 1px solid var(--border-color);
    margin-top: 14px !important;
    border-radius: 0;
}

.toolbar div#searchbar-row[style*="display:none;"],
.toolbar #searchbar-row[style*="display: none;"] {
    display: flex !important;
    filter: grayscale(1);
    pointer-events: none;
}

.toolbar div#searchbar-row[style*="display:none;"] *,
.toolbar #searchbar-row[style*="display: none;"] *:not(label) {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.5;
}



.toolbar:has(#syncButton.btn-danger) .mb-1 > *:not(#syncButton),
toolbar:has(#syncButton.btn-danger) .mb-1 input.file {
    filter: grayscale(1);
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

.lang-icon {
    width: 15px;
    vertical-align: middle;
    margin: 0;
}

button#syncButton.btn-danger {
    background-color: var(--hoverbtn2) !important;
    border-color: var(--hoverbtn2-border);
}

button#toolbarToggle:has(span) {
    width: auto;
    padding-left: 0.7rem;
    padding-right: 0.7rem;
    gap: 5px;
    margin-left: 0px !important;
}

.form-switch:has(#darkModeToggle) .bi-moon {
    display: none !important;
}

html.dark-mode .form-switch:has(#darkModeToggle) .bi-moon {
    display: inline-block !important;
}

html.dark-mode .form-switch:has(#darkModeToggle) .bi-brightness-high {
    display: none !important;
}
#searchbar-row-skeleton{
   margin-top: 0;
   display: none!important;
}
.row.aligh-items-end{
    align-items: baseline;
}
.fancybox__thumbs .fancybox__thumb {
    aspect-ratio: 16/9;
    width: 80px;
    height: auto;
    overflow: hidden;
    border-radius: 6px;
    background: #222;
    margin: 0 2px;
    filter: grayscale(100%);
    opacity: 0.5;
    transition: filter 0.2s, opacity 0.2s, box-shadow 0.2s;
  }
  .fancybox__thumbs .fancybox__thumb.is-selected {
    filter: none;
    opacity: 1;
    box-shadow: 0 0 0 2px #ff0050;
  }
  .fancybox__content iframe {
    border-radius: calc(var(--border-radius)*2)!important;
    border: 1px solid #ffffff3d;
}
li.list-group-item:has(a[data-fancybox="videos"]) {
    cursor: pointer;
}

@media only screen and (max-width: 580px){
    .sticky-date-placeholder, .fixed-date .hideMobile {
display: none;
}
.fixed-date .showMobile {
    display: flex!important;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.date-badge{
    aspect-ratio: unset;
}

li.list-group-item > div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}
}

.navbar-brand img.logo {
    display: inline-flex;
    width: 35px;
    vertical-align: middle;
    fill: white;
    filter: invert(1);
}
li.list-group-item:has(a[data-fancybox="videos"]) {
    cursor: pointer;
}
.navbar-brand {
    display: flex;
    gap: 10px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.navbar-brand img.logo {
    display: inline-flex;
    width: 35px;
    vertical-align: middle;
    fill: white;
    filter: invert(1);
}
@media only screen and (max-width: 580px){
    .sticky-date-placeholder, .fixed-date .hideMobile, .navbar-brand .title{
display: none;
}
.fixed-date .showMobile {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.date-badge{
    aspect-ratio: unset;
}

.date-badge {
    aspect-ratio: unset;
    width: auto!important;
    top: 92px;
    z-index: 999999!important;
    left: auto;
}
li.list-group-item > div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}
}



.modal-body .video-title{
   padding: 0;
}
.modal-body .video-title:hover {
    background: var(--gray);
}
.modal-body .video-title:hover .video-time{
    background-color: var(--maincolor);
    color: white;
}
.list-view-thumbnail-container{
    border-radius: var(--border-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 1px solid var(--gray);
}

li.list-group-item:has(.list-view-thumbnail-container) {
    padding-top: 5px;
    padding-bottom: 5px;
}
.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: var(--bs-modal-padding);
    max-height: 70vh;
    overflow-y: scroll;
    scrollbar-color: var(--hoverbtn2-text) transparent;
}
.modal-body {
    padding: 0;
}
.modal-body p {
    display: flex;
    /* Use flexbox for alignment */
    list-style-position: inside;
    list-style-type: auto;
    margin-bottom: 0;
    font-size: 14px;
    border-bottom: 1px solid var(--border-color);
    align-items: center;
    /* Vertically align items */
    gap: 8px;
    /* Space between time and title */
}
li.list-group-item > div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

#youtube-thumbnail-tooltip {
    position: absolute; /* Crucial for floating */
    padding: 0px;
    z-index: 999999999999999999999999;
    background-color: transparent;
    border: none;
    box-shadow: none;
    transition: opacity 0.1s; /* Optional: adds a fade effect */
}

#youtube-thumbnail-tooltip img {
    display: block;
    width: 240px; /* Medium Quality thumbnail width */
    height: auto;
    background-color: var(--bgcolor);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}
.modal-body .video-title {
    padding: 8px 0;
}
.modal-body .video-title:hover {
    background: var(--gray);
}
.modal-body .video-title:hover .video-time{
    background-color: var(--maincolor);
}
.list-view-thumbnail-container{
    border-radius: var(--border-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 1px solid var(--gray);
}
.list-view-thumbnail-container img {
    aspect-ratio: 4/3;
    max-width: 60px;
    object-fit: cover;
    scale: 1.4;
}

.hideThumbs .modal-body .video-title {
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 5px;
}
.modal-body {
    padding: 0!important;
    margin: 0!important;
    scrollbar-width: thin;
}
.hideThumbs .modal-body .video-title {
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 5px;
}
.modal-body {
    padding: 0;
    list-style-type: none;
    counter-reset: section;
    scrollbar-width: none;
    min-height: 50vh;
}
.modal-body p.video-title:before {
    content: counters(section, "") "";
    counter-increment: section;
    vertical-align: middle;
    font-size: 14px;
    margin-right: 0;
    font-weight: bold;
    margin-top: 3px;
    width: 26px;
    color: var(--hoverbtn2-text);
    padding-right: 0px;
    border-right: 1px solid var(--border-color);
    text-align: center;
}
.form-check.form-switch:has(.bi) label {
    padding: 5px 50px 5px 10px;
    font-size: 12px;
    position: absolute;
    top: 3px;
    left: auto;
    right: calc(100% - 45px);
    background: var(--hoverbtn);
    color: var(--hoverbtn-text);
    pointer-events: none;
    opacity: 0;
    border-radius: var(--border-radius);
    white-space: nowrap;
    z-index: 0;
    transition: opacity 300ms ease;
}
.form-check.form-switch:has(.bi){
    position: relative;
}
.form-check.form-switch .bi{
    cursor: pointer;
    font-size: 16px;
    opacity: 0.8;
}
.form-check.form-switch .bi:hover{
    opacity: 1;
}
.form-check.form-switch:has(.bi) input{
    position: relative;
    z-index: 1;
}

.form-check.form-switch:has(.bi):hover {
    z-index: 2;
}
.form-check.form-switch:has(.bi:hover) label {
    opacity: 1;
}
.toolbar .col-sm-12:has(select) {
    z-index: 55;
}
.form-switch i.bi {
    font-size: 16px;
}
.switches {
    display: flex;
    gap: 8px;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-end;
    align-items: center;
}
input#listViewSearchBar {
    color: var(--text-color);
}
span.mini-date.badge {
    font-size: 1rem;
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    isolation: isolate;
    border-color: var(--border-color);
    background: var(--bgcolor2)!important;
}
div#stickyToolbar label#view_label {
    display: none;
}
div#stickyToolbar .mb-1 {
    flex: 0 1 170px;
    margin-bottom: 0!important;
}
.form-control:focus {
    box-shadow: none;
    border-color: var(--border-color);
}
.expanded-overlay {
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    border-radius: 8px;
    background: #fff;
    color: #222;
    pointer-events: auto;
    max-width: 90vw;
    max-height: 60vh;
    overflow: auto;
    cursor: pointer;
    transition: none;
  }
  .expanded-overlay:hover {
    box-shadow: 0 6px 32px rgba(0,0,0,0.2);
  }
  .expand-placeholder {
    display: block;
    width: 100%;
  }
  .day-cell { position: relative; }
  .flag-icon {
.expanded-overlay .expanded-day-number {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--maincolor);
    opacity: 0.2;
  }
    display: inline-block;
    width: 20px;
    height: 15px;
    margin-right: 8px;
    border-radius: 2px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .flag-es {
    background-image: url('https://flagicons.lipis.dev/flags/4x3/es.svg');
  }
  .flag-gb {
    background-image: url('https://flagicons.lipis.dev/flags/4x3/gb.svg');
  }
/* For the main accordion header (e.g., "August") */
.fixed-header {
  position: fixed;
  top: 81px!important; 
 /* This will be overridden by JS, but good as a default */
  z-index: 1000; /* Must be higher than the date badge */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.toolsVisible .fixed-header {
    top: 156px!important; 
 
}
/* For the square date badge (e.g., "31") */
.fixed-date {
  position: fixed;
  top: 150px;
  z-index: 999;
  box-sizing: border-box; /* Add this line */
}
.toolsVisible .fixed-date {
    top: 235px!important;
 
}
.sticky-header-placeholder, .sticky-date-placeholder {
    display: block;
    min-width: 110px;
}
.sticky-month-header {
    position: sticky;
    top: 81px;

    z-index: 99999;
    background: var(--bgcolor);
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 0.5rem;
    box-shadow: 0 1px 0px 0px var(--border-color);
    transition: background 0.2s;
    margin-left: -1px;
}
.toolsVisible .sticky-month-header {
    top: 158px;

}
.active-sticky {
    background: var(--bgcolor);
    /* box-shadow: 0 4px 16px rgba(0,0,0,0.08); */
}
.sorting {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}
.sorting select {
  min-width: 120px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
  .sticky-toolbar {
    position: fixed;
    top: 77px;
    left: 0;
    width: 100%;
    background: var(--bgcolor);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s, box-shadow 0.2s;
    padding: 0;
    z-index: 999999999;
  }
  .sticky-toolbar .sticky-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-right: 1rem;
  }
  .sticky-toolbar .sticky-counter {
    font-size: 1rem;
    margin-left: 0.5rem;
  }
  .sticky-toolbar .sticky-switches {
    display: flex;
    gap: 1rem;
  }
  .sticky-toolbar .sticky-view-selector {
    min-width: 180px;
  }
  .sticky-toolbar .sticky-view-selector label#view_label {
    display: none;
}
html.with-fancybox body.hide-scrollbar {
    margin-right: 0!important;
}
.expanded-overlay {
    pointer-events: none !important;
  }
  .day-cell { position: relative; }


/*.custom-tooltip {
    display: block;
    position: absolute;
    left: 0%;
    bottom: 106%;
    transform: unset;
    background: var(--maincolor);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 16px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 9999999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.custom-tooltip:after {
    content: "";
    width: 0;
    height: 0;
    border-width: 10.4px 6px 0 6px;
    border-color: var(--maincolor) transparent transparent transparent;
    border-style: solid;
    display: inline-block;
    position: absolute;
    bottom: -10px;
    left: 20px;
}

.custom-tooltip {
    display: block;
    position: absolute;
    left: auto;
    bottom: 78%;
    transform: unset;
    background: var(--maincolor);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 16px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 9999999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    right: 0;
}
.custom-tooltip:after {
    content: "";
    width: 0;
    height: 0;
    border-width: 11.4px 8px 0 8px;
    border-color: var(--maincolor) transparent transparent transparent;
    border-style: solid;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: -10px;
    transform: translateY(-50%) rotate(90deg);
}*/
.custom-tooltip {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 115%;
    transform: translateX(-50%);
    background: var(--maincolor);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.custom-tooltip:after {
    content: "";
    width: 0;
    height: 0;
    border-width: 10.4px 6px 0 6px;
    border-color: var(--maincolor) transparent transparent transparent;
    border-style: solid;
    display: inline-block;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}
  .day-cell:hover .custom-tooltip {
    opacity: 1;
    pointer-events: auto;
  }

.switches .form-switch:not(:last-child) {
   
    border-right: 1px solid var(--border-color);
    padding-right: 10px;
}
.bg-dark {
    --bs-bg-opacity: 1;
    background-color: #313131 !important;
}
@media only screen and (max-width: 480px){
    div#stickyToolbar .switches {
        flex-direction: row;
        flex-wrap: nowrap;
        flex: 1 1 100%;
        width: 100%;
    }
    button#toolbarToggle span {
    display: none;
}
    div#stickyToolbar h3#video-counter{
   display: none!important;
    }
    .switches .title-container{
        flex: 1 1 100%;
        width: 100%;
        border-right: none;
    }
    .switches .form-switch:not(:last-child){
        border-right: none;
    }
    #stickyToolbar .d-flex {
        display: flex!important;
        flex-wrap: wrap;
    }
    .sticky-toolbar .mb-0:has(.choices) {
        /* flex: 0 1 175px; */
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 0;
        flex: 1 1 100%;
        width: 100%;
    }
    div#stickyToolbar label#view_label{
        display: none!important;
    }
    .sticky-toolbar .mb-0 .choices {
        min-width: 150px;
        flex: 1;
    }
    .sticky-toolbar .switches .title-container {
        display: none;
    }
    .switches .title-container {
        flex: 1 1 100%;
        width: 100%;
        border-right: none!important;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 7px;
    }
    .toolsVisible .fixed-header {
        top: 209px!important;
      
    }
    .fixed-header button.accordion-button {
        padding-top: 9px;
        padding-bottom: 10px;
        font-size: 18px;
    }
    .toolsVisible .fixed-date {
        top: 217px!important;

    }
    .hideMobile {
        display: none;
    }
    .showMobile {
        display: block;
    }
    .date-badge {
        aspect-ratio: unset;
        padding: 0;
        border: none;
    }
    div#main {
        background-color: var(--bgcolor);
        padding-right: 1.3rem!important;
        padding-left: 1.3rem!important;
        overflow: hidden;
    }
    /*ul#yearTabNav:after, ul#yearTabNavList:after{

    }*/
    .fixed-header {
        position: fixed;
        top: 78px!important;
        width: 100vw!important;
        left: 0!important;
    }
    .fixed-date {
        position: fixed;
        z-index: 999;
        box-sizing: border-box;
        top: 83px!important;
        font-size: 13px;
        right: 0;
        left: auto!important;
        padding: 5px 10px;
        
    }
    ol.list-group.list-group-numbered li.list-group-item a.ms-2 {
        display: none;
    }
    ol.list-group.list-group-numbered li.list-group-item span.mini-date.badge {
        position: absolute;
        left: calc(0px - 2rem);
        opacity: 0;
        pointer-events: none;
        font-size: 18px;
        padding: 8px;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        transition: opacity 300ms ease;
    }
    ol.list-group.list-group-numbered li.list-group-item:hover span.mini-date.badge {
        opacity: 1;
    }
    li.list-group-item a[data-fancybox="videos"] {
        pointer-events: none;
    }
    .toolbar .col-md-6.col-sm-6.col-xs-12:has(>.mb-0 > button#syncButton) {
        display: none;
    }
    .list-group-numbered > .list-group-item::before {
        display: none;
    }
    .toolsVisible:has(.sticky-toolbar.d-none) .fixed-header {
        display: none;
    }
    .toolsVisible:has(.sticky-toolbar.d-none) .fixed-date .mini-date.showMobile, .toolsVisible:has(.sticky-toolbar.d-none) .sticky-header-placeholder {
        display: none!important;
    }
}
div#stickyToolbar  h3 {
    flex: 1 1 100%;
}
.switches {
    display: flex;
    gap: 8px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-end;
    align-items: center;
    flex: 1 1 280px;
}
.btn#studio {
    flex: 1;
}
.modal-backdrop {
    --bs-backdrop-zindex: 999999999;
    z-index: var(--bs-backdrop-zindex);
}


  .dupe-keep-video .badge.bg-success {
    position: absolute;
    top: 10px;
    right: -16px;
    font-size: 0.85em;
    z-index: 2;
    font-weight: 400;
    padding: 7px 10px;
}
  .dupe-delete-video .dupe-bin-btn {
    margin-left: 12px;
    position: relative;
    z-index: 2;
    opacity: 0.85;
    transition: opacity 0.2s;
  }
  .dupe-delete-video .dupe-bin-btn:hover {
    opacity: 1;
    filter: drop-shadow(0 2px 6px #dc3545aa);
  }
  span.mini-date.badge {
    font-size: 0.8rem;
    padding: 8px 9px;
}
.dupe-keep-video {
    border: 1px solid #28a746a1 !important;
    position: relative;
}
.video-title.dupe-delete-video {
    background-color: var(--maincolor);
}
.dupe-keep-video {
    border: 1px solid var(--border-color);
    background: var(--bgcolor2)!important;
    position: relative;
    margin: 0;
}
.video-title.dupe-delete-video {
    background-color: var(--maincolor);
    border: 1px solid var(--maincolor);
    color: white;
}
.list-group .dupe-delete-video .video-time {
    background-color: #0000003d;
    border: 1px solid #0000003d;
    color: white;
}
.list-group-numbered > .list-group-item.dupe-delete-video::before{
    color: white;
}
.dupe-delete-video a{
    color: white;
    border-left-color: white;
}
.dupe-delete-video .dupe-bin-btn * {
    color: white!important;
    font-size: 1.5rem;
    line-height: 1rem;
}
.video-title.dupe-delete-video span.mini-date.badge {
    background: #0000003d!important;
    color: white!important;

}

.dupe-keep-video span.mini-date.badge.bg-primary.ms-2 {
    background: var(--bs-green)!important;
}
.dupe-keep-video .badge.bg-success {
    position: absolute;
    top: 10px;
    right: -16px;
    font-size: 0.85em;
    z-index: 2;
    font-weight: 400;
    padding: 7px 10px;
    display: none;
}
.video-title.dupe-keep-video a[data-fancybox="videos"] {
    border-left: 2px solid var(--bs-green);
}
.video-title.dupe-delete-video  a.ms-2 {
    display: none;
}
.switches {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    flex: 1 1;
    justify-content: flex-start;
}
.sticky-toolbar .switches {
    order: -1;
}
div#stickyToolbar label#view_label {
    display: inline-flex;
    margin: 0;
    font-size: 1.12rem;
    flex: 1;
    white-space: nowrap;
}
.sticky-toolbar .mb-0:has(.choices) {
    /* flex: 0 1 175px; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.sticky-toolbar .mb-0 .choices {
    min-width: 150px;
}
.form-check.form-switch .bi {
    cursor: pointer;
    font-size: 21px;
    opacity: 0.8;
    margin-left: 1px;
}
@media (max-width: 640px) {
  /* Hide Full and Tabbed options in the view selector dropdown visually (Choices.js uses .option-view-full and .option-view-tabs if set) */
  #viewSelector option[value="full"],
  #viewSelector option[value="tabs"] {
    display: none !important;
  }
  /* If Choices.js renders custom dropdown, hide by label text as fallback */
  .choices__item[data-value="full"],
  .choices__item[data-value="tabs"] {
    display: none !important;
  }
}
/* Smooth transitions for sticky/fixed elements */
.fixed-header,
.fixed-date,
.sticky-month-header.active-sticky,
.sticky-toolbar {
  transition: top 0.22s cubic-bezier(0.4,0,0.2,1),
              left 0.22s cubic-bezier(0.4,0,0.2,1),
              width 0.22s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.22s cubic-bezier(0.4,0,0.2,1),
              background 0.22s cubic-bezier(0.4,0,0.2,1),
              transform 0.22s cubic-bezier(0.4,0,0.2,1);
  will-change: top, left, width, box-shadow, background, transform;
}

/* Remove any global transition/animation disabling (if present) */
html:not(.no-transitions) *,
html:not(.no-transitions) *:before,
html:not(.no-transitions) *:after {
  transition-property: initial;
}
a:-webkit-any-link:focus-visible {
    outline: none;
}
li.list-group-item a[data-fancybox="videos"]:before, .video-title a[data-fancybox="videos"]:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
p.video-title, li.list-group-item{
    position: relative;
}
#syncButton.disabled,
#syncButton[disabled] {
  opacity: 0.6;
  cursor: not-allowed !important;
  pointer-events: none;
  filter: grayscale(1);
}
.skeleton-table-header {
  background: var(--barcolor, var(--gray));
  border-radius: var(--skeleton-radius) var(--skeleton-radius) 0 0;
  border-bottom: 2px solid var(--border-color);
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
  opacity: 1;
}
html.dark-mode .skeleton-table-header {
  background: var(--barcolor, var(--gray));
  border-bottom: 2px solid var(--border-color);
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.12);
}
.skeleton-table-header .skeleton-day-header {
  background: var(--lightgray, #e9ecef);
  border-radius: var(--skeleton-radius);
  opacity: 0.95;
}
html.dark-mode .skeleton-table-header .skeleton-day-header {
  background: var(--gray, var(--lightgray));
  color: var(--text-color);
}
/*
.day-number.expanded-day-number {
    font-weight: bold;
    margin-bottom: 9px;
    font-size: 1.36rem;
    font-family: var(--titlefont);
    line-height: 0.48rem;
    padding: 4px;
    display: inline-flex;
    aspect-ratio: 1;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    background: var(--maincolor);
    color: white;
    width: 45px;
    height: 45px;
    text-align: center;
    border-radius: var(--border-radius);
    position: relative;
    margin-top: -7px;
}*/
.day-number.expanded-day-number {
    font-weight: bold;
    margin-bottom: 9px;
    font-size: 1.6rem;
    font-family: var(--titlefont);
    line-height: 1rem;
    padding: 4px 7px 8px 4px;
    display: flex;
    /* aspect-ratio: 1; */
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    text-align: left;
    position: relative;
    margin-top: -5px;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
}
.video-time {
    background-color: var(--gray);
    padding: 1px 5px;
    border-radius: calc(var(--border-radius) / 1.5);
    white-space: nowrap;
    font-weight: 400;
    min-width: 3.25rem;
    text-transform: lowercase;
    word-spacing: 0;
    letter-spacing: -0.005rem;
    text-align: center;
    color: var(--text-color);
    font-family: var(--titlefont);
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    border-radius: calc(var(--border-radius)/1.8);
}
.col.day-cell .content-expandable.expanded-overlay {
    background-color: var(--bgcolor) !important;
    border: 0px solid var(--border-color);
    padding: 10px 3px 3px 3px!important;
    outline: 12px solid var(--bgcolor)!important;
    overflow: visible!important;
    border-radius: calc(var(--border-radius)*1.5)!important;
    box-shadow: 0 0 0 13px var(--border-color)!important;
}
.content-expandable.expanded-overlay .video-title a {
    font-size: 12px;
    color: var(--text-color) !important;
    font-family: var(--mainfont)!important;
    letter-spacing: 0.005rem;
}
html.dark-mode a[data-bs-toggle="modal"] {
    background: var(--maincolor);
    color: white !important;
    font-family: var(--mainfont)!important;
        border-radius: calc(var(--border-radius)/2)!important;

}
a[data-bs-toggle="modal"] {
    font-family: var(--mainfont)!important;
        border-radius: calc(var(--border-radius)/2)!important;

}
.dark-mode #calendarContainer.hoverfocus .month-grid-wrapper:has(.col.day-cell:not(.bg-gray):hover) .col.day-cell:not(:hover), .dark-mode #calendarContainer.hoverfocus .tab-content:has(.col.day-cell:not(.bg-gray):hover) .col.day-cell:not(:hover) {
    background-color: var(--lightgray2);
    opacity: 0.2;
    filter: grayscale(1);
}
#calendarContainer.hoverfocus .month-grid-wrapper:has(.col.day-cell:not(.bg-gray):hover) .col.day-cell:not(:hover), #calendarContainer.hoverfocus .tab-content:has(.col.day-cell:not(.bg-gray):hover) .col.day-cell:not(:hover) {
    background-color: var(--lightgray);
}
a[data-bs-toggle="modal"] {
    font-family: var(--titlefont)!important;
    border-radius: calc(var(--border-radius)/1.2)!important;
    font-size: 12px;
    padding: 5px 6px;
    font-weight: 400;
}
.hoverfocus .col.day-cell .content-expandable .video-title a {
    pointer-events: none;
}
 .col.day-cell .content-expandable .video-title a {

 }
 .day-cell .video-title {
    font-size: 12px;
    gap: 0;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}
.row.vdivide [class*='col-']:not(:last-child):after {
      background: #e0e0e0;
      width: 1px;
      content: "";
      display:block;
      position: absolute;
      top:0;
      bottom: 0;
      right: 0;
      min-height: 70px;
    }


.video-time {
    background-color: var(--gray);
    padding: 1px 9px 1px 10px;
    border-radius: calc(var(--border-radius) / 1.5);
    white-space: nowrap;
    font-weight: 400;
    width: 3.25rem;
    text-transform: lowercase;
    word-spacing: -4px;
    letter-spacing: -0.008rem;
    text-align: center;
    color: var(--text-color);
    font-family: var(--titlefont);
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    border-radius: calc(var(--border-radius));
    border: 1px solid var(--border-color);
    margin-right: 5px;
}
li.list-group-item:not(.dupe-delete-video):has(a[data-fancybox="videos"]:hover) {
    background-color: var(--lightgray);
}

.list-group-item a[title="Open in new tab"] {
    position: relative;
    z-index: 99;
    aspect-ratio: 1;
    width: 30px;
    height: 30px;
    display: inline-flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius);
    font-weight: 900;

}
.list-group-item a[title="Open in new tab"]:hover {
    background-color: var(--maincolor);
    color: white;
}
.list-group-item a[title="Open in new tab"]:hover > i.bi {
    color: inherit;
}
.modal-body p.video-title:before {
    content: counters(section, "") "";
    counter-increment: section;
    vertical-align: middle;
    font-size: 16px;
    margin-right: 0;
    font-weight: 500;
    margin-top: 0;
    width: 40px;
    color: var(--hoverbtn2-text);
    padding-right: 0px;
    border-right: 1px solid var(--border-color);
    text-align: center;
    font-family: var(--titlefont);
    text-align: center;
}