body { font-family:sans; background-color:white; margin:0; padding:0 0.5em; font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300))); line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300))); }

footer { display:block; text-align:center; margin-top:2em; padding:0.5em 0; font-size:0.8em; border-top:1px solid #cccccc; }

/* Misc */
.hide { display:none !important; }
.svg_button { position:relative; width:1em; height:1em; top:0.2em; stroke:none; fill:#333333; stroke-width:2px; }
.svg_button_selected { fill:#000000; stroke:none; background-color:#e6e6e6;}
.svg_button:hover { opacity:0.6; cursor:pointer; }
.svg_button:active { cursor:pointer; }
.svg_icon { position:relative; width:24px; height:24px; top:2px; }
.disabled_button { fill:#cfcfcf !important; cursor:auto !important; }
.disabled_button:hover { fill:#cfcfcf !important; cursor:auto !important; }
.disabled_button:active { fill:#cfcfcf !important; cursor:auto !important; }
.text_button { border:none; color:blue; background-color:inherit; cursor:pointer; display:inline-block; }
.text_button:hover { color:black; }
.key { font-family:monospace; padding:1px 6px; background:linear-gradient(to bottom,#f0f0f0,#fcfcfc);; border:1px solid #e0e0e0; white-space:nowrap; color:#303030; border-bottom-width:2px; border-radius:3px; }

/* top toolbar */
#toolbar { display:grid; grid-template-columns:auto 1fr auto; align-self:center; padding:0.4em 0.2em; border-bottom:1px solid #cccccc; margin:0.4em 0 1em 0; }
#toolbar div { }
#toolbar .pname { padding:0; margin-right:1em; }
#toolbar .pagetools {}
#toolbar .pagetools a { margin:0 0.4em; }
#toolbar .pageinfo { text-align:right; margin-right:0.5em; }
#toolbar .pageinfo input[type="text"] { font-family:sans; margin:0 0.4em; border:none; border-bottom:1px solid #cccccc; font-size:1em; }
#toolbar .pageinfo div { display:inline; }
#toolbar a { text-decoration:none; }
#toolbar form { display:inline; }
#toolbar select { max-width:20em; padding:0; margin-left:0.2em; }

/* content panel */
#content { display:block; }
#content .img_with_region { position:relative; display:inline-block; margin:0; padding:0; }
#content .img_with_region img {}
#content .img_with_region svg { position:absolute; top:0; left:0; }
#content .img_with_region div { position:relative; text-align:center; }

/* /{PNAME}/filelist: shows a list of all images contained in a project */
#content .filelist_panel { display:block; }
#content .filelist { display:flex; flex-wrap:wrap; justify-content: space-between; margin:0 1em; }
#content .filelist::after { content:""; flex:auto; }
#content .filelist a { display:inline-block; flex-grow:0; padding:0; margin:0.4em; }
#content .filelist a img { display:inline-block; height:250px; max-width:98%; margin:0; padding:0; object-fit:fill; }
#content .filelist_search_panel { text-align:center; margin-bottom:1em; }
#content .filelist_search_panel form { display:block; }
#content .filelist_search_panel input[type=text] { width:25em; max-width:80%; padding:0.2em; }
#content .filelist_search_panel select { width:9em; padding:0; margin-left:0.2em; }
#content .filelist_search_panel input[type=submit] { margin:0 1em; }
#content .filelist_search_panel #help_link { margin-right: 0.4em; }
#content .filelist_search_panel #clear_link { margin-left: 0.4em; }
#content .filelist_search_panel #help_panel { display:inline-block; max-width:60em; margin:0.5em 0; }
#content .filelist_search_panel #help_panel table { border-collapse:collapse; }
#content .filelist_search_panel #help_panel table tr {}
#content .filelist_search_panel #help_panel table td, th { padding:0.4em 1em; ; border:1px solid #cccccc; }
#content .filelist_search_panel #help_panel table td:nth-child(2) { text-align:left; }

/* /{PNAME}/file: shows a file */
#content .file_panel { display:grid; grid-template-columns:25em 1fr; grid-template-rows:auto auto; }
#content .file_panel .file_metadata { font-size:0.8em; }
#content .file_panel .file_metadata table { border-collapse:collapse; }
#content .file_panel .file_metadata table td { padding:0.4em 0.8em; border:1px solid #cccccc; }
#content .file_panel .file_content { text-align:center; }
#content .file_panel .file_content #img_toolbar { display:block; margin:0 auto;font-size:0.8em;  }
#content .file_panel .file_content #img_toolbar a { margin:0 0.2em; }
#content .file_panel .file_content #query_img_container { height:70vh; display:block; text-align:center; position:relative; border:none; }
#content .file_panel .file_content #search_query_form { display:block; padding:0.4em; }
#content .file_panel .file_content #search_query_form input { font-size:inherit; padding:0.2em 1em; }
#content .file_panel .region_metadata { grid-column-start:1; grid-column-end:3; margin:2em 0; }
#content .file_panel .region_metadata .region_metadata_container { display:grid; grid-template-columns:60vw 1fr; grid-template-rows:auto; font-size:0.8em; background-color: #f2f2f2; border-radius:0.4em; padding:1em 0.4em; margin-bottom:1em; }
#content .file_panel .region_metadata .region_metadata_container table { border-collapse:collapse; }
#content .file_panel .region_metadata .region_metadata_container table td { padding:0.4em 0.8em; border:1px solid #cccccc; }
#content .file_panel .region_metadata .region_metadata_container img { width:100%; }

/* /{PNAME}/search: shows search results */
#content .query_panel { display:block; text-align:center; margin:0; background-color:#f2f2f2; padding:1em; text-align:center; vertical-align:middle; border-radius:0.5em; }
#content .query_panel .query {  }
#content .query_panel .query p { margin:0; padding:0; }
#content .query_panel .query img { height:30vh !important; }

#content .results_panel { display:block; }
#content .resultgrid { display:flex; flex-wrap:wrap; margin-top:1em; }
#content .resultgrid::after { content:""; flex:auto; }
#content .resultgrid a { position:relative; margin:0.1em 0.2em; padding:0; flex-grow:1; cursor:pointer; }
#content .resultgrid a img { height:40vh; }
#content .resultgrid a svg { position:absolute; top:0; left:0; fill:none; stroke:yellow; stroke-width:4; -webkit-user-select:none;-moz-user-select:none;user-select:none; padding:0; margin:0; }
#content .resultgrid a .result_index { position:absolute; left:0; top:0; font-size:0.8em; background-color:black; opacity:0.8; color:white; padding:0.2em 0.4em; margin:0; line-height:1em; }
#content .resultgrid #showmore { display:block; text-align:center; }
#content .resultgrid #nomatches { display:block; text-align:center; color:red; width:100vw; }

#content .resultlist { display:flex; flex-wrap:nowarp; flex-direction:column; }
#content .resultlist::after { content:""; flex:auto; }
#content .resultlist .item { flex-grow:0; border:1px solid #cccccc; margin:2em 1em; padding:0; overflow:hidden; background-color:#f2f2f2; }
#content .resultlist .item a { display:inline-block; position:relative; margin:0; padding:0; }
#content .resultlist .item a img { height:40vh; }
#content .resultlist .item a svg { position:absolute; top:0; left:0; fill:none; stroke:yellow; stroke-width:2; -webkit-user-select:none;-moz-user-select:none;user-select:none; padding:0; margin:0; }
#content .resultlist .item table { display:inline-block; vertical-align:top; margin:0.4em 1em; }
#content .resultlist .item table td { padding:0.2em 0.5em; }
#content .resultlist #showmore { display:block; text-align:center; }
#content .resultlist #nomatches { display:block; text-align:center; color:red; width:100vw; }

/* /{PNAME}/external_search: upload and search (reuses components from /{PNAME}/search */
#content .upload_container { display:block; }
#content .upload_container .upload_panel img { max-width:400px; max-height:400px; }
#content .upload_container .progress_panel progress { width:400px; }

/* /{PNAME}/showmatch: shows details of a match */
#content .querymatch_panel { display:grid; grid-template-columns:1fr 1fr; align-items:start; justify-content:space-evenly; grid-column-gap:1em; font-size:0.8em; background-color:#f2f2f2; padding:1em; text-align:center; vertical-align:middle; border-radius:0.5em; }
#content .querymatch_panel img { max-height:50vh; }
#content .querymatch_panel a { display:block; }
#content .querymatch_panel span { display:block; }

#content .toggle_panel { display:block; border:none; margin:1em 0; padding:0; text-align:center; }
#content .toggle_panel h3 { margin-top:2em; }
#content .toggle_panel div { display:inline-block; text-align:center; padding:0 0.5em; }
#content .toggle_panel div p { font-size:0.8em; display:block; margin:0; padding:0; }
#content .toggle_panel div p input[type="range"] { display:inline-block; text-align:center; width:4em; margin:0; padding:0; height:10px; }
#content .toggle_panel div p label { display:inline; }

#content .match_panel { display:block; border:none; margin:1em 0; padding:0; text-align:center; }
#content .match_panel h3 { margin-top:2em; }
#content .match_panel p {margin:0; padding:0;}
#content .match_panel input[type="text"] { width:2em; margin:0 0.2em; font-size:inherit; }
#content .match_panel input[type="radio"] { margin-left:1em; font-size:inherit; }
#content .match_panel input[type="checkbox"] { margin-left:1em; font-size:inherit; }
#content .match_panel button { margin-left:1em; font-size:inherit; }
#content .match_panel label { display:inline; vertical-align:middle;  }
#content .match_panel span {  }

/* /{PNAME}/configure: project configuration */
#content #settings_container {}
#content #settings_container div { margin:1em; }
#content #settings_container input[type="radio"] { vertical-align:0.2em; margin-right:0.5em; }
#content #settings_container table { margin-left:2em; border:1px solid #808080; border-collapse:collapse; font-size:small; }
#content #settings_container table tr {}
#content #settings_container table td { padding:1em; }
#content #settings_container table td input[type="text"] { font-size:small; width:36em; }
#content #settings_container table td input[type="radio"] { vertical-align:sub; margin-right:0.3em; }
#content #settings_container table td p { display:block; margin:0; }
#content #settings_container #config_save_status { margin-left:1em; }
#content #settings_container .settings_details { font-size:0.8em; }
#content #settings_container .settings_details summary { font-style:italic; }

#content #files_container {}
#content #files_container div { margin:1em; }
#content #files_container input { font-size:1em; width:20em; margin:0 0.5em; }
#content #files_container button { font-size:1em; margin:0 0.5em; }
#content #files_container #file_add_status { display:inline-block; height:6em; width:56vw; border:1px solid #cccccc; overflow:auto; padding:0.6em; font-size:0.7em; }
#content #info_container { text-align:center; margin:3em 0; }
#content #info_container input { font-size:1em; margin:0 0.5em; padding:0.2em; }
#content #info_container form { display:inline; }

/* /{PNAME}/index_status : show indexing process' progress */
#content #progress_container {}
#content #progress_container table {}
#content #progress_container table td { padding:0.25em 1em; }
#content #progress_container table .progress_label { font-size:0.8em; }

/* /{PNAME}/group: shows groups in a project */
#content .group_search_panel { display:block; font-size:small; }
#content .group_search_panel div { display:inline-block; margin:0 1em; }
#content .group_search_panel input { font-size:small; }
#content .group_search_panel select { font-size:small; }
#content .group_panel { display:block; }
#content .group_panel .set_panel { display:block;  background-color:#f2f2f2; border-radius:0.4em; position:relative; margin:1em 0; }
#content .group_panel .set_panel span { position:absolute; top:0em; left:0em; background-color:black; color:white; font-size:small; padding:0em 0.4em; }
#content .group_panel .set_panel a { display:inline-block; padding:0; margin:0.4em; vertical-align:top; }
#content .group_panel .set_panel a figure { display:inline-block; width:min-content; }
#content .group_panel .set_panel a figure img { display:inline-block; height:250px; max-width:98%; margin:0; padding:0; object-fit:fill; }
#content .group_panel .set_panel a figure figcaption { font-size:small; line-height:1.2em; }

/* /{PNAME}/visual_group: shows groups in a project */
#content .visual_group_search_panel { display:block; font-size:small; text-align:center; }
#content .visual_group_search_panel div { display:inline-block; margin:0 1em; }
#content .visual_group_search_panel input { font-size:small; }
#content .visual_group_search_panel select { font-size:small; }
#content .visual_group_panel { display:block; }
#content .visual_group_panel .set_panel { display:inline-block; border:1px solid #cccccc; margin:1em; }
#content .visual_group_panel .set_panel > a { display:inline-block; position:relative; margin:1em; padding:0; cursor:pointer; }
#content .visual_group_panel .set_panel > a img { height:40vh; }
#content .visual_group_panel .set_panel > a svg { position:absolute; top:0; left:0; fill:none; stroke:yellow; stroke-width:4; -webkit-user-select:none;-moz-user-select:none;user-select:none; padding:0; margin:0; }

#content .visual_group_panel .set_panel .set_info { display:block; position:relative; background-color: #cccccc; font-size:small; padding:0em; }
#content .visual_group_panel .set_panel .set_info span:first-child { margin:0; padding:0 1em; }
#content .visual_group_panel .set_panel .set_info span:nth-child(2) { border-left:1px solid #aaaaaa; padding-left:1em; }
#content .visual_group_panel .set_panel .set_info span:nth-child(3) { float:right; padding-right:1em; }