.epatternwiki_page {
    /*	background-color: rgba(255,255,255,1); */
  width: 100%;
  height: auto;
  margin: 0 auto;
  white-space:nowrap;
	--web-view-name: Ribblr - ePattern manual;
	--web-view-id: Ribblr - ePattern manual;
	--web-scale-on-resize: true;
	--web-enable-deep-linking: true;
  /* font-family: 'Raleway', sans-serif;
font-size: 0.75em;
font-feature-settings: "lnum"; */
  overflow: visible;
  display:block;
  padding-bottom:2%;

}

.epatternwiki_page a {
  text-decoration:none;
  color:inherit;
  fill:inherit;
}

.manual {
    display: flex;
    /* width:50%; */
    /* margin:auto; */
    /* white-space: pre-line; */
    /* line-height: 1.2em; */
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.toc {
    box-sizing: border-box;
    background: var(--White);
    color: var(--textMain);
    border-radius: 24px;
    display: table;
    padding: 24px 16px;
    font-size: var(--font_large);
    white-space: normal;
    width: 100%;
}

#terms-section {
    margin-bottom: 16px;
    display: block;
    font-size: var(--font_main);
    line-height: 20px;
    border-bottom: 1px solid var(--menu);
    padding-bottom: 16px;
}

.toc li, #toc ul, #toc ul li{
    list-style: outside none none !important;
}

.toc ul {
    padding-left: 0;
    margin: 0;
}

.toc sl-details::part(base) {
    border: none;
    background: transparent;
}

.toc sl-details::part(header),
.toc sl-details::part(summary),
.toc sl-details::part(content) {
    padding: 0;
}

.toc sl-details::part(summary-icon) {
    display: none;
}

.toc li:hover, .toc li:active {
    color:var(--color2);
}

.toc-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.nav-section {
    font-weight:var(--fontweight_heavy);
    line-height: 20px;
    font-size: var(--font_title);
    width:100%;
}

.nav-sub-section {
    font-size: var(--font_main);
    line-height: 2em;
    margin-left:10px;
}

.manual-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.manual-info > .please_note:first-of-type,
.manual-info > .please_note:nth-of-type(2),
.manual section,
.title_header {
    background: var(--White);
    border-radius: 24px;
    padding: 16px 24px;
}

.title_header h1 {
    border-bottom: 1px solid var(--menu);
    padding-bottom: 12px;
    font-weight: var(--fontweight_heavy);
}

.othermanual,
.please_note {
    white-space: normal;
}

.othermanual {
    margin-top:16px;
    font-family: var(--fontInter);
    font-size: var(--font_large);
}

.othermanual span {
    margin-top:16px;
    color:var(--textSecondary);
    font-size: var(--font_main);
}

.manual section {
    white-space: pre-line;
}


.tutorial_video .please_note {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 16px;
}

.epattern_image {
    width: 100%;
    height:auto;
    display:block;
    margin:16px 0;
    border-radius: 16px;
}

.arcade_embed {
    position: relative;
    width: calc(100% - 32px);
    aspect-ratio: 10 / 12.5;
    margin: 16px 0;
    border-radius: 12px;
    background: var(--background);
    max-width: 500px;
    border: 0;
    color-scheme: light;
    padding: 16px;
    display:block;
}

.arcade_embed.arcade_embed_wide {
    aspect-ratio: 16 / 9;
    max-width:700px;
}

summary {
    list-style: none;
}

.nav-section {
    position:relative;
}

.nav-section::after {
    content: "›";
    display: inline-block;
    margin-left: 8px; /* Adjust spacing as needed */
    transition: transform 0.1s ease;
    float:right;
    margin-left:20px;
}

/* When details is open, rotate the arrow to point down */
sl-details[open] .nav-section::after {
    transform: rotate(90deg);
    position:relative;
    top:1px;
}

#epattern-note {
    padding: 0 2px 0 2px;
    background: var(--background);
    width:max-content;
    max-width:100%;
    max-width: calc(100% - 23px);
    border-radius: 16px;
    padding: 12px;
    font-size:var(--font_main);
}

.manual h2 {
    font-size: var(--font_header);
    color: var(--textMain);
    font-weight: var(--fontweight_heavy);
    line-height: 20px;
    display: flex
;
    align-items: end;
    gap: 10px;
}

.manual h3 {
    font-size: var(--font_title);
    line-height: 20px;
}

/* because of sticky menu */
h2, h3 { 
    scroll-margin-top: 130px;
    scroll-snap-margin-top: 130px; /* for safari */
}

.index-guidelines span {
    display: flex
;
    flex-direction: row;
    align-items: center;
    line-height: 0;
    gap: 6px;
}

.manual p {
    line-height: 24px;
    font-size: var(--font_large);
    font-family: var(--fontInter);
    white-space:pre-line;
    border-bottom: 1px solid var(--menu);
    padding-bottom: 16px;
}

.youtube {
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden;
    margin-top:1%;
}

.youtube iframe {
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%;
border-radius:12px;
}

.tool_img {
    height:18px;
    /*filter:drop-shadow(0.1px 0.1px 0.01px var(--color2));*/
    vertical-align: top;
    margin-right:5px;
}

.tool_img_user {
    height:18px;
}

.menu-nested {
    margin: 6px 0 12px 22px;
    padding-left: 12px;
    border-left: 2px solid var(--color2);
}

.menu-nested-list {
    margin: 6px 0 12px 16px;
}

@media only screen and (max-width:1024px) and (min-aspect-ratio: 119/90) /* portrait */  {
    .manual {
        width:95%;
        margin:auto;
    }

    .toc {
    position:relative;
    margin:auto;
    left: auto;
    top:auto;
    max-width:100%;
    }
}

.tool_img_invert {
filter: var(--invertfilter);
/* for filter help in safari */
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
/* for filter help end*/
}

.tool_img_ivert:hover, .tool_img_ivert:active {
   filter: var(--invertfilter); 
   /* for filter help in safari */
   transform: translate3d(0, 0, 0);
   backface-visibility: hidden;
   /* for filter help end*/
}

@media only screen and (max-width:1024px) {

    .Menucraft_Class {
        display:none; /*hide this just in case people pull to refresh */
    }
}

@media screen and (min-width: 1280px) {
    .manual {
        display: grid;
        grid-template-columns: 30% 66%;
        gap: 24px;
        grid-template-areas:
            "toc manual-info";
        height: auto;
    }

    .toc {
        height: fit-content;
        position: sticky;
        grid-area: toc;
        top: 88px;
    }

    .manual-info {
        /* width: 75%; */
        grid-area: manual-info;
        position: relative;
    }

    .epattern_image {
        width: 75%;
    }
}