/* Variables *********************************************************************************************************/

:root{
    --header-height: 80px;
    --headertext-font-size: calc(var(--header-height) / 2);
    --searchbox-height: 40px;
    --searchresult-padding: 20px;
    --eventlist-height: 200px;
    --queue-right-space: 50px;
    --queue-width: calc(var(--moduleblock-width) + var(--line-width) + var(--list-padding) * 2 + var(--queue-right-space));
    --moduleblock-width: 350px;
    --moduleblock-height: 80px;
    --moduleblock-blur-radius: 10px;
    --moduleblock-spread-radius: 2px;
    --list-padding: 5px;
    --line-width: 2px;
    --title-padding: 2px;
    --eventblock-blur-radius: 5px;
    --eventblock-spread-radius: 1px;
    --eventblock-header-vertical-padding: 5px;
    --treeview-arrow-width: 5px;
    --popup-content-margin: 40px;
    --popup-content-padding: 40px;
    --popup-title-margin: 10px;
    --normal-font-size: 20px;
    --list-item-vertical-margin: 2px;
    --color-gs1blue: #002c6c;
    --color-gs1lightgray: #f4f4f4;
    --color-gs1darkmediumgray: #888b8d;
    --color-gs1darkgray: #454545;
    --color-gs1orange: #f26334;
    --color-gs1tangerine: #ff8200;
    --color-gs1raspberry: #f05587;
    --color-gs1forest: #00b74f;
    --color-gs1peach: #fbb034;
    --color-gs1link: #008dbd;
    --color-gs1slate: #89aadb;
    --color-gs1purple: #bf83b9;
    --color-popupbackground: rgba(69,69,69,0.8);
    --text-unread: "未習";
    --text-queued: "キューに追加済";
    --text-read: "既習";
    --text-material-markdown: "（ウェブ教材）";
    --text-material-filedownload: "（ファイルダウンロード）";
    --text-material-external: "（外部リンク）";
    --text-empty-list: "該当なし";
    --text-search-processing: "（検索中...）";
    --text-dt-separator: "：";
    --text-dd-separator: "、";
}

/* Common appearance *************************************************************************************************/

body{
    font-family: 'Kosugi Maru';
    font-size: var(--normal-font-size);
}

input[type="button"]{
    display: inline-block;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background-color: var(--color-gs1orange);
    color: var(--color-gs1lightgray);
    font-family: 'Kosugi Maru';
}

input[type="button"]:hover{
    background-color: var(--color-gs1tangerine);
}

input[type="button"]:active{
    background-color: var(--color-gs1orange);
}

input[type="button"]:disabled{
    background-color: var(--color-gs1darkgray);
}

input[type="button"].largebutton{
    height: calc(var(--normal-font-size) * 2);
    font-size: var(--normal-font-size);
}

input[type="button"].inlinebutton{
    height: var(--normal-font-size);
    font-size: calc(var(--normal-font-size) / 4 * 3);
}

a{
    color: var(--color-gs1link);
}

a:hover{
    color: var(--color-gs1link);
}

a:active{
    color: var(--color-gs1link);
}

a:visited{
    color: var(--color-gs1link);
}

/* Page structure ****************************************************************************************************/

header{
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: var(--header-height);
    margin: 0px;
    padding: 0px;
    background-color: var(--color-gs1blue);
}

header h1{
    margin: calc(var(--header-height) / 4);
    font-size: var(--headertext-font-size);
    color: var(--color-gs1lightgray);
}

#searchbox{
    display: block;
    position: absolute;
    left: 0px;
    top: 80px;
    width: calc(100% - var(--queue-width));
    height: var(--searchbox-height);
    margin: 0px;
    padding: 0px;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: solid var(--line-width) var(--color-gs1blue);
    font-size: calc(var(--searchbox-height) - 20px);
}

#searchresultarea{
    display: block;
    position: absolute;
    left: 0px;
    top: calc(var(--header-height) + var(--searchbox-height));
    width: calc(100% - var(--queue-width));
    margin: 0px;
    padding: 0px;
    z-index: 2;
    border-bottom: solid var(--line-width) var(--color-gs1blue);
    background-color: var(--color-gs1lightgray);
    visibility: hidden;
}

#searchresultarea h2{
    position: relative;
    width: calc(100% - var(--title-padding) * 2);
    margin: 0;
    padding: var(--title-padding);
    background-color: var(--color-gs1darkgray);
    font-size: calc(var(--header-height) / 4);
    color: var(--color-gs1lightgray);
    z-index: 3;
}

#treeviewarea{
    display: block;
    position: absolute;
    left: 0px;
    top: calc(var(--header-height) + var(--searchbox-height));
    width: calc(100% - var(--queue-width));
    height : calc(100% - var(--header-height) - var(--searchbox-height) - var(--eventlist-height));
    margin: 0px;
    padding: 0px;
}

#eventlistarea{
    display: block;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: calc(100% - var(--queue-width));
    height: var(--eventlist-height);
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    border-top: solid var(--line-width) var(--color-gs1blue);
    overflow-x: hidden;
    overflow-y: scroll;
}

#eventlistarea h2{
    position: fixed;
    width: calc(100% - var(--queue-width) - var(--title-padding) * 2);
    margin: 0;
    padding: var(--title-padding);
    background-color: var(--color-gs1darkgray);
    font-size: calc(var(--header-height) / 4);
    color: var(--color-gs1lightgray);
    z-index: 1;
}

#queuearea{
    display: block;
    position: absolute;
    right: 0px;
    top: var(--header-height);
    width: calc(var(--queue-width));
    height: calc(100% - var(--header-height));
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    border-left: solid var(--line-width) var(--color-gs1blue);
    overflow-x: hidden;
    overflow-y: scroll;
}

#queuearea h2{
    position: fixed;
    width: calc(var(--queue-width) - var(--title-padding) * 2 - var(--line-width));
    margin: 0;
    padding: var(--title-padding);
    background-color: var(--color-gs1darkgray);
    font-size: calc(var(--header-height) / 4);
    color: var(--color-gs1lightgray);
    z-index: 1;
}

.popupbackground{
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--color-popupbackground);
    z-index: 2;
    visibility: hidden;
}

.popupcontentpane{
    display: block;
    position: relative;
    width: calc(100% - var(--popup-content-margin) * 2 - var(--popup-content-padding) * 2);
    margin: var(--popup-content-margin);
    padding: var(--popup-content-padding);
    border: solid 1px var(--color-gs1darkgray);
    background-color: var(--color-gs1lightgray);
    box-shadow: 0px 0px 10px 2px var(--color-gs1darkgray);
    visibility: inherit;
}

/* Search ************************************************************************************************************/

#searchresult_header.processing::after{
    content: var(--text-search-processing);
}

#searchresult_list{
    margin: var(--searchresult-padding) 0px;
    padding: 0px var(--searchresult-padding);
    width: calc(100% - var(--searchresult-padding) * 2);
    border-spacing: var(--moduleblock-blur-radius);
    overflow-x: scroll;
}

#searchresult_list:empty::before{
    content: var(--text-empty-list);
}

#searchresult_list li{
    list-style-type: none;
    display: table-cell;
}

#searchresult_list li:hover{
    box-shadow: 0px 0px var(--moduleblock-blur-radius) var(--moduleblock-spread-radius) var(--color-gs1link);
}

#searchresultarea p{
    margin: var(--searchresult-padding);
}

/* Treeview **********************************************************************************************************/

#treeview{
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: scroll;
    scroll-behavior: smooth;
}

#treeview .treeview_module_container{
    display: block;
    position: absolute;
    box-sizing: content-box;
    width: var(--moduleblock-width);
    height: var(--moduleblock-height);
}

#treeview .treeview_module_container:hover{
    box-shadow: 0px 0px var(--moduleblock-blur-radius) var(--moduleblock-spread-radius) var(--color-gs1link);
}

#treeview .treeview_module_container.selected{
    box-shadow: 0px 0px var(--moduleblock-blur-radius) var(--moduleblock-spread-radius) var(--color-gs1tangerine);
}

#treeview .treeview_module_container.required{
    box-shadow: 0px 0px var(--moduleblock-blur-radius) var(--moduleblock-spread-radius) var(--color-gs1peach);
}

#treeview .treeview_module_container.related{
    box-shadow: 0px 0px var(--moduleblock-blur-radius) var(--moduleblock-spread-radius) var(--color-gs1purple);
}

#treeview svg{
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
}

#treeview svg{
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
}

#treeview svg .treeview_arrow{
    stroke: var(--color-gs1darkgray);
    stroke-width: var(--treeview-arrow-width);
    marker-end: url(#treeview_arrow_head);
}

#treeview svg .treeview_arrow.highlighted{
    stroke: var(--color-gs1peach);
    marker-end: url(#treeview_arrow_head_highlighted);
}

#treeview_arrow_head{
    stroke: none;
    fill: var(--color-gs1darkgray);
}

#treeview_arrow_head_highlighted{
    stroke: none;
    fill: var(--color-gs1peach);
}

/* Event list ********************************************************************************************************/

#eventlist:empty::before{
    content: var(--text-empty-list);
}

#eventlist{
    margin: calc(var(--list-padding) + var(--header-height) / 4 + var(--title-padding) * 2) 0 0;
    padding: var(--list-padding);
    list-style: none;
    z-index: 0;
}

#eventlist li{
    width: 100%;
    margin-bottom: var(--list-padding);
}

#eventlist li:hover{
    box-shadow: 0px 0px var(--eventblock-blur-radius) var(--eventblock-spread-radius) var(--color-gs1link);
}

#eventlist li.selected{
    box-shadow: 0px 0px var(--eventblock-blur-radius) var(--eventblock-spread-radius) var(--color-gs1purple);
}

#eventlist .eventblock{
    display: block;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;   
    border: solid var(--line-width) var(--color-gs1darkgray);
    background-color: var(--color-gs1lightgray);
}

#eventlist .eventblock .eventblock_date{
    display: block;
    position: relative;
    width: calc(var(--normal-font-size) * 5 + var(--line-width));
    height: calc(var(--normal-font-size) + var(--eventblock-header-vertical-padding) * 2);
    left: 0px;
    top: 0px;
    margin: 0;
    padding: var(--eventblock-header-vertical-padding) 0;
    box-sizing: border-box;
    border-right: solid var(--line-width) var(--color-gs1darkgray);
    background-color: var(--color-gs1darkgray);
    color: var(--color-gs1lightgray);
}

#eventlist .eventblock .eventblock_title{
    display: block;
    position: absolute;
    width: calc(100% - (var(--normal-font-size) * 5 + var(--line-width)));
    height: calc(var(--normal-font-size) + var(--eventblock-header-vertical-padding) * 2);
    right: 0px;
    top: 0px;
    margin: 0;
    padding: var(--eventblock-header-vertical-padding) 0;
    box-sizing: border-box;
}

#eventlist .eventblock .eventblock_detail{
    display: none;
    position: relative;
    width: 100%;
    left: 0px;
    top: 0px;
    margin: 0;
    padding: var(--line-width);
    box-sizing: border-box;
    border-top: solid var(--line-width) var(--color-gs1darkgray);
    word-break: break-all;
}

#eventlist .eventblock .eventblock_detail dt{
    float: left;
}

#eventlist .eventblock .eventblock_detail dt::after{
    content: var(--text-dt-separator);
}

#eventlist .eventblock .eventblock_detail dd{
    margin: 0;
}

/* Queue *************************************************************************************************************/

#queuecontrols{
    margin: calc(var(--list-padding) + var(--header-height) / 4 + var(--title-padding) * 2) 0 0;
    padding: var(--list-padding);
}

#queue{
    margin: var(--list-padding) 0;
    padding: var(--list-padding);
    list-style: none;
    z-index: 0;
    counter-reset: queuecount;
}

#queue li{
    width: 100%;
    margin-bottom: var(--list-padding);
}

#queue li::before{
    display: block;
    float: right;
    padding-top: calc(var(--moduleblock-height) / 3);
    font-size: calc(var(--moduleblock-height) / 3 * 2);
    font-weight: bolder;
    color: var(--color-gs1darkmediumgray);
    counter-increment: queuecount;
    content: counter(queuecount);
}

/* Module block ******************************************************************************************************/

div .moduleblock{
    display: block;
    position: relative;
    width: var(--moduleblock-width);
    height: var(--moduleblock-height);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: solid var(--line-width) var(--color-gs1darkgray);
    background-color: var(--color-gs1lightgray);
}

div .moduleblock img{
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: calc((var(--moduleblock-height) - var(--line-width) * 2) / 5 * 3);
    height: calc((var(--moduleblock-height) - var(--line-width) * 2) / 5 * 3);
    object-fit: contain;
}


div .moduleblock .moduleblock_title{
    display: block;
    position: absolute;
    right: 0px;
    top: 0px;
    width: calc(100% - (var(--moduleblock-height) - var(--line-width) * 2) / 5 * 3);
    height: calc((var(--moduleblock-height) - var(--line-width) * 2) / 5 * 3);
    box-sizing: border-box;
    border-left: solid var(--line-width) var(--color-gs1darkgray);
    padding: var(--line-width);
    font-size: calc(((var(--moduleblock-height) - var(--line-width) * 2) / 5 * 3 - var(--line-width) * 2) / 2);
}

div .moduleblock .moduleblock_control{
    display: block;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: calc((var(--moduleblock-height) - var(--line-width) * 2) / 5 * 2);
    box-sizing: border-box;
    padding: var(--line-width) 0 0 0;
    background-color: var(--color-gs1darkgray);
    text-align: right;
    font-size: calc((var(--moduleblock-height) - var(--line-width) * 2) / 5);
}

div .moduleblock .moduleblock_control input[type="button"]{
    height: 100%;
    margin-left: calc(var(--line-width) * 2);
}

div .moduleblock .moduleblock_control span{
    vertical-align: middle;
    font-weight: bolder;
}

div .moduleblock .moduleblock_control .unread::before{
    color: var(--color-gs1lightgray);
    content: var(--text-unread);
}

div .moduleblock .moduleblock_control .queued::before{
    color: var(--color-gs1raspberry);
    content: var(--text-queued);
}

div .moduleblock .moduleblock_control .read::before{
    color: var(--color-gs1forest);
    content: var(--text-read);
}

/* Module detail *****************************************************************************************************/

#moduledetail_icon{
    float: left;
    width: calc(var(--headertext-font-size) * 2 + var(--popup-title-margin) * 2);
    height: calc(var(--headertext-font-size) * 2 + var(--popup-title-margin) * 2);
    margin-right: var(--popup-title-margin);
    object-fit: contain;
}

#moduledetail_title{
    margin: var(--popup-title-margin) 0px;
    font-size: var(--headertext-font-size);
}

#moduledetail hr{
    clear: both;
}

#moduledetail table{
    width: 100%;
}

#moduledetail table th{
    width: 50%;
    text-align: left;
    font-weight: bolder;
}

#moduledetail table td{
    width: 50%;
    text-align: left;
    vertical-align: top;
}

#moduledetail table td ul:empty::before{
    content: var(--text-empty-list);
}

#moduledetail table td ul li{
    margin: var(--list-item-vertical-margin) 0px;
    clear: both;
}

#moduledetail table td ul li input[type="button"]{
    display: block;
    float: right;
}

#moduledetail_keywords dt{
    display: inline;
    font-weight: bolder;
}

#moduledetail_keywords dt::after{
    content: var(--text-dt-separator);
}

#moduledetail_keywords dd{
    display: inline;
    margin: 0px;
}

#moduledetail_keywords dd::before{
    content: var(--text-dd-separator);
}

#moduledetail_keywords dd:first-of-type:before{
    content: "";
}

/* Module reader *****************************************************************************************************/

#modulereader_title{
    margin: var(--popup-title-margin) 0px;
    font-size: var(--headertext-font-size);
}

#modulereader_list li.markdown::after{
    content: var(--text-material-markdown);
}

#modulereader_list li.filedownload::after{
    content: var(--text-material-filedownload);
}

#modulereader_list li.external::after{
    content: var(--text-material-external);
}

/*********************************************************************************************************************/