*, *::after, *::before{
    box-sizing: border-box;
    margin:0;
}

:root{
    --bgcolor: #eee;
    --panel: #fff;
    --label: #666;
    --bt_gap: 5px;
}

html {
    background: var(--bgcolor);
    color: #222;
    font-family: sans-serif;
    line-height: 1.4;
}

body {
    width: 100vw;
    height: 100vh;
    display:grid;
    place-items: center;
    overflow-x:hidden;
}

canvas{
    image-rendering: pixelated;
}

#app{
    border: 10px solid var(--bgcolor);
    display: grid;
    grid-template-columns: 480px auto 128px;
    grid-template-rows: 30px 56px auto 128px;
    gap: 4px 4px;
    grid-template-areas:
        "app_header   app_header  app_header"
        "file_actions img_actions img_info"
        "file_hdr     img_zone    img_col"
        "img_hist     img_row     img_zoom";
}

#app > div{
    border: 1px solid black;
    background-color: var(--panel);
}

#footer{
    font-family: monospace;
    font-size: 10pt;
}

a:link, a:visited, a:active{
    color : #000088;
    text-decoration: none;
}
a:hover{
    text-shadow: 0px 0px 10px gray;
}


/* -------------------------------------------------------------------------- */
/* Grid cells */
/* -------------------------------------------------------------------------- */
#app_header{
    grid-area: app_header;
    text-align: center;
    font-size: 10pt;
}

#file_actions{
    background-color: var(--panel);
    display:grid;
    grid-template-columns: auto 5% 10% 5% var(--bt_gap);
    align-content: space-around;
}

#img_actions{
    display:grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 24px 24px;
    padding: var(--bt_gap);
    column-gap: var(--bt_gap);
}

#img_info{
    font-family: monospace;
    font-size: 10pt;
    display:grid;
    place-content:center;
}

#file_hdr{
    overflow-y:auto;
    font-family: monospace;
    font-size: 8pt;
    white-space: pre-wrap;
}

#img_zone{
    aspect-ratio:1;
    position:relative;
    display:grid;
    place-content:center;
    overflow:hidden;
}

#img_col{
    background-color: var(--panel);
    position:relative;
    display:grid;
    place-content:center;
    overflow:hidden;
}

#img_hist{
}

#img_row{
    position: relative;
    display:grid;
    place-content:center;
    overflow:hidden;
}

#img_zoom{
}


/* -------------------------------------------------------------------------- */
/* Canvases */
/* -------------------------------------------------------------------------- */
#img_canvas{
    cursor: crosshair;
}

#img_zoom_canvas{
    height:128px;
    width:128px;
}


/* -------------------------------------------------------------------------- */
/* Labels and selection */
/* -------------------------------------------------------------------------- */
#img_name{
    align-self: center;
    justify-self: center;
    font-family: monospace;
    font-size: 10pt;
}

#layer_id{
    width:100%;
    text-align:center;
    font-family: monospace;
    font-size: 8pt;
}

#selection{
    position:absolute;
    display:none;
    top:0px;
    left:0px;
    z-index: 10;
    pointer-events: none;
}

#welcome{
    position:absolute;
    top:0px;
    left:0px;
    z-index: 2;
    padding: 10px;
    pointer-events: none;
    font-family: sans-serif;
    font-size: 10pt;
    color: #00ffff;
}

#welcome > ul{
    padding-left: 0px;
    margin-left: 20px;
}


/* -------------------------------------------------------------------------- */
/* Controls */
/* -------------------------------------------------------------------------- */
#img_actions > button{
    display:grid;
    place-content:center;
}

#img_actions > button > svg{
    width: 20px;
    height:20px;
}

.button_title{
    position: relative;
}

#img_actions > button:hover .button_title::after{
    content: attr(data-title);
    padding: 5px;
    position: absolute;
    top: 5px;
    left: 5px;
    white-space: nowrap;
    border: 1px solid black;
    border-radius: 5px;
    background-color: #f9f9f9;
}

#contrast_min, #contrast_max{
    font-family: monospace;
    font-size: 10pt;
    display:grid;
    place-content: center;
}

#contrast_slider{
    grid-column: 2 / 7;
}

#dualSlider{
    height:100%;
    width:100%
}

.draggable{
    cursor: move;
}

/* -------------------------------------------------------------------------- */
/* Dropdown menu */
/* -------------------------------------------------------------------------- */
.dropbtn {
  background-color: #E9E9ED;
  border: none;
  cursor: pointer;
  width: 100%;
  height: 100%;
  border: 1px solid #8f8f8d;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 140px;
  height: 168px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 20;
}

.dropdown-content-row{
    position:relative;
    padding-top:4px;
    padding-left:4px;
    width:140px;
    height:28px;
    font-size:12px;
}

.dropdown-content-row a {
  color: black;
  text-decoration: none;
}

.dropdown-content-row a:hover {
    background-color: #f1f1f1;
}

.dropdown-content-row img {
    border: 1px solid black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.cmap_name {
    position:absolute;
    top:6px;
    padding-left:4px;
}

.dropdown:hover .dropbtn{
    background-color: #d0d0d7;
}

.dropdown-content-row:hover{
    background-color: #d0d0d7;
}

.dropdown-content-row:hover a{
    background-color: #d0d0d7;
}