/* ####### panel ####### */

#stories_misc_media_panel {
    display: none;
    overflow-y: scroll;
}

#stories_menu_panel {
    display: none;
    overflow-y: scroll;
}

#stories_panel {
    display: none;

    border-left-style: solid;
    border-left-width: 2px;
    border-left-color: #000000;

    height: 100%;
    width: 100%;
    /* color:#0c1044; */
}

#story_grid_container {
    height: 100%;
    width: 100%;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 46px 1fr 38px;
    gap: 0px;
    /* overflow: hidden; */

}


#story_selector_block{
    font-size: 12px;
    width: fit-content;
    margin:auto;
    margin-top:12px;
}

#story_selector_label{
    display: inline-block;
    font-weight: bold;
    margin-left:8px;
    font-size: 14px;
}

#story_selector{
    display: inline-block;
    width: 450px;
    margin-left:8px;
}

#story_contents {
    display: block;
    width:100%;


    text-align: justify;
}

#story_contents_overflow{
    display: block;
    position:absolute;
    top:0;
    height: 100%;
    overflow-y: scroll;
    padding-left: 24px;
    padding-right: 24px;
}

scroll-scene{
    display: none;
    height: 100%;
}

.scroll_scene_active {
    display: block;
}

.scroll_scene_title {
    /* color:#0c1044; */
    width: 100%;
    background-color: #ffffff;
    font-weight: bold;
    font-size: 18px;
    height:30px;
    padding-top: 6px;
    z-index: 99;
}

.scroll_scene_active > .scroll_scene_title {
    position:sticky;
    top:0px;
}
.scroll_scene_content {
    padding: 12px;
}


.misc_media {
    width:80%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#menu_media {
    display: block;
    width:600px;
    max-width: 80%;
    margin:auto;
    margin-top:60px;
    margin-bottom: 60px;    
}


#story_header{
    display:block;
    width: 100%;

    background-color: #d8d8d8;
    padding-top: 4px;
}

#story_title {
    display: inline-block;
    /* color:#0c1044; */
    font-weight: bold;
    font-size: 24px;
    padding-left: 6px;
}

#story_home_button{
    float:right;
    margin-right:16px;
    width:36px;
    height: 36px;
    cursor: pointer;
}

#story_navigation {
    display:block;
    width:100%;
    background-color: #d8d8d8;
}

.story_panel_grid_child {
    position:relative;
}

#story_navigation_grid{
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    grid-template-rows: 1fr;
}

.story_navigation_grid_child {
    position:relative;
}

#sparagraph_selector_block{
    display:block;
}

#story_nav_left{
    width: 24px;
    margin-top:8px;
    cursor: pointer;
    position:absolute;
    right:0px;
}

#story_nav_right{
    width: 24px;
    margin-top:8px;
    cursor: pointer;
    position:absolute;
    left:0px;
}

#story_nav_left_block{
    display:block;
}

#story_nav_right_block{
    display:block;
}

#sparagraph_selector_align {
    margin:auto;
    margin-top:9px;
    width:90%;
}

.story_img{
    width:80%;
    margin:auto;
    margin-top:6px;
}