:root {
    --primary-color: #2196F3;
    --background-color: #ffffff;
    --text-color: #333333;
    --border-color: #e0e0e0;
    --aspect-ratio: 1/1;
    --portrait-video-max-width: 600px;        /* .(41218.01.1) */
    --portrait-video-left-margin: 87px;       /* .(41218.01.2) */
    }

html {
    background-color: var(--background-color);
    min-height: 100%;
}
/*
@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #90CAF9;
        --background-color: #1a1a1a;
        --text-color: #ffffff;
        --border-color: #404040;
    }
}
*/
body {
    font-family: system-ui, -apple-system, sans-serif;
    max-width: 1080px;  /* was 1200px */
    margin: 0 auto;
    padding: 20px;
    background-color: var(--background-color);
    color: var(--text-color);
}

H2 {
    margin: 0px;
}

.link {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    margin-top: -20px;
    margin-bottom: 15px;
}

.chapter {
    margin-bottom: 2px;  /* was 15px; */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.chapter-header {
    display: flex;
    align-items: flex-start;    /* was center; */
    padding: 2px;               /* was 15px; */
    background-color: rgba(128, 128, 128, 0.1);
    cursor: pointer;
}

.chapter-content {
    display: none;
    padding: 5px 0 20px 95px;
}

.chapter-content .summary {
    font-size: 20px;
    margin: 0px 0px 5px 10px;  /* top right bottom left */
    line-height: 1.5;
    font-weight: bold;
}

.chapter-content .summary2 {
    font-size: 20px;
    color: purple;
    margin: -15px 0px 18px 0px;  /* top right bottom left */
    line-height: 1.5;
    font-weight: bold;
}
.chapter-content .summary3 {
    font-size: 20px;
    color: green;
    margin: -15px 0px 18px 0px;  /* top right bottom left */
    line-height: 1.5;
    font-weight: bold;
}
.chapter-flex-container {
    display: flex;
    gap: 5px;  /* top margin above summary text. was: 20px */
}

li.subchapter {
    list-style: none !important;
    margin-left: 12px;
}

li.subchapter::before {
    display: inline-block;
    position: relative;
    content: "\2022";
/*  top: -2px;
    margin-right: 8px;    *//* Controls space between bullet and text */
/*  font-size: 24px; */
}

li.topic {
    list-style: none !important;
    margin-left: 45px;
    font-size: 16px;
}

li.topic::before {
    display: inline-block;
    position: relative;
    top: -2px;
    content: "\2022";
    margin-right: 8px;     /* Controls space between bullet and text */
    font-size: 24px;
}

@media (orientation: landscape) {
    .chapter-flex-container {
        flex-direction: row;
    }
    .summary-container {
        flex: 4;
        order: 1;
    }
    .video-container {
        flex: 6;
        order: 2;
        width: 60% !important;
    }
    .timestamp {
        min-width: 45px;
        font-size: 16px;
        margin-right: 15px;
        margin-left: 5px;
        margin-top: 5px;
    }

    li.subchapter::before {
        top: -2px;
        margin-right: 8px;     /* Controls space between bullet and text */
        font-size: 24px;
    }
}

@media (orientation: portrait) {
    .chapter-flex-container {
        flex-direction: column;
    }
    .summary-container {
        order: 2;
        width: 100%;  /* was max-width: 650px or 100% */
/*      padding-left: 20px;  *//* .(41212.06.1 CAI: Add some left padding instead of large margin) *//*#.(41218.01.4) */
        padding-left: var(--portrait-video-left-margin);  /* .(41218.01.5) */
    }
    .video-container {
        order: 1;
        width: 100%;       /* was max-width: 100% or 650px; */
        max-width: var(--portrait-video-max-width);       /* .(41218.01.3) */
        padding-left: var(--portrait-video-left-margin);  /* .(41218.01.4) */
    }
    li.topic {
        font-size: 1rem;
        margin-left: 0;      /* .(41212.06.2 CAI: Remove any left margin on list items) */
    }

    .chapter-content {
        padding-left: 0;     /* (41212.06.3 CAI: Remove the large left padding if it exists) */
    }

    .summary {
        margin-left: 0;      /* (41212.06.4 CAI: Remove any left margin on summary container) */
    }

    .timestamp {
        min-width:   30px;
        font-size:   12px;
        margin-right: 9px;
        margin-left: 5px;
        margin-top: 9px;       /* not so nice on a phone */
    }
    li.subchapter::before {
        top: 0px;              /* not so nice on a phone */
        margin-right: 8px;     /* Controls space between bullet and text */
        font-size: 24px;
    }
}

.video-container  iframe,
.video-container  div[id^="player"],         /* Targets all IDs starting with "player" */
.video-container .html5-video-container,
.video-container .html5-video-player,
.video-container .html5-main-video {
    width: 100%  !important;
    height: auto !important;
    aspect-ratio: var(--aspect-ratio) !important;    /* .(41218.01.5). Maintain video aspect ratio */
}

video {
    width: 60%;   /* was 100% */
/*  width: 100%;  *//* was 100% */
/*  max-width: 650px;  *//* added */
    border-radius: 4px;
    max-height: 70vh;
    object-fit: contain;
}

.timestamp {
/*  min-width: 75px;
    font-size: 20px;
    margin-right: 15px;
    margin-left: 5px;
    margin-top: 3px; */
    text-align: right;
    vertical-align: top;
    color: var(--primary-color);
    font-weight: bold;
    flex-shrink: 0;
}

.duration {
    color: black;
    font-size: 14px;
    }

.toggle-icon {
    margin-left: auto;
    transition: transform 0.3s;
}

h2 {
    margin: 0;
    flex: 1;
}

.red {
    color: red;
}

.chapter-content .summary {
    font-size: 20px;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

@media (max-width: 600px) {
    body {
        padding: 10px;
    }

    .chapter-header h2 {
        font-size: 1rem;
    }
}



.ytp-chrome-top {  /* Hide YouTube player top chrome */
    display: none !important;
}

.ytp-show-cards-title {
    display: none !important;
}

.ytp-title-channel {
    display: none !important;
}

.ytp-title {
    display: none !important;   /* Hide video title */
}

.ytp-shorts-title-channel {
    display: none !important;
}

.ytp-youtube-button {   /* Hide YouTube logo */
    display: none !important;
}

.ytp-chrome-top-buttons {   /* Hide watch later and share buttons */
    display: none !important;
}

.video-container {    /* Optional: adjust padding to compensate for hidden elements */
    padding-top: 0 !important;
}


.home-link {                       /* .(41218.03.2 Beg) */
    display: flex;
    margin-bottom: -3px;
    width: 100%;
/*  border: 1px solid black; */
}

.home-icon {
    font-family: 'Material Icons';
    font-size: 20px;
    margin-right: 10px;
    margin-top: -23px;
/*  border: 1px solid green; */
}

.home-icon a {
    color: inherit;
    text-decoration: none;
}

.home-icon a::before {
    content: "home";
    color: var(--primary-color) !important;
    padding-left: 18px;
/*  border: 1px solid blue; */
}

.link {
    flex-grow: 1;
    text-align: center;
    margin-top: -23px;
/*  border: 1px solid red; */
}
                                   /* .(41218.03.2 End) */