/*
    ----------------------------------------
    FONT
    ----------------------------------------
*/
@font-face {
    font-family: "Lato";
    font-weight: 400;
    src: url("3rdparty/lato-regular.woff2") format("woff2");
}

@font-face {
    font-family: "Lato";
    font-weight: bold;
    src: url("3rdparty/lato-bold.woff2") format("woff2");
}

/*
    ----------------------------------------
    GLOBAL
    ----------------------------------------
*/

:root {
    /* Highlight Colors -------- */
    --accent:         #92B9CD;
    --hover-accent:   #CDA692;
    /* Background/Border Colors -------- */
    --bg-body:   #FFFFFF;
    --bg1:       #FDFDFD; /*tr.note*/
    --bg2:       #F9F9F9; /*tr.note even*/
    --bg3:       #EEEEEE; /*note border*/
    --bg4:       #E0E0E0; /*progressbar bg*/
    /* Text Colors -------- */
    --tx-body:   #505050;
    --tx1:       #9F9F9F; /* lighter subtext */
    /* Checkbox/Tooltip -------- */
    --tx0:       #EEEEEE; /*checkbox/tooltip text*/
    --bg-dark1:  #44606E; /*checkbox dark*/
    --bg-dark2:  #AAAAAA; /*checkbox light*/
}

.theme-dark {
    /* Highlight Colors -------- */
    --accent:         #538696;
    --hover-accent:   #91593d;
    /* Background/Border Colors -------- */
    --bg-body:   #131413;
    --bg1:       #151716; /*tr.note*/
    --bg2:       #1B1D1C; /*tr.note even*/
    --bg3:       #282C29; /*note border*/
    --bg4:       #393D39; /*progressbar bg*/
    /* Text Colors -------- */
    --tx-body:   #D4DFD7;
    --tx1:       #7A837C; /* note subtext */
    /* Checkbox/Tooltip -------- */
    --tx0:       #111111; /*checkbox/tooltip text*/
    --bg-dark1:  #a0a0a0; /*checkbox dark*/
    --bg-dark2:  #111111; /*checkbox light*/
}

html {
    overflow-y: visible; /* allow scroll in chromeApp */
}

body {
    margin:0;
    background: var(--bg-body);
    color: var(--tx-body);
    font: 16px "Lato", "Meiryo", "メイリオ", sans-serif; /*FF needs Meiryo explictly */
}

.main {
    max-width: 768px;
    margin: 0 auto;
    position: relative;
}

h1, h2, h3 {
    text-align: center;
    margin: 4px 0 6px 0;
    line-height: 0.7;
    padding-bottom: 14px;
    font-size: 24px;
    border-bottom: 1px solid var(--bg4);
}

/*
    ----------------------------------------
    OVERLAYS: DROPZONE & MODAL
    ----------------------------------------
*/

div#dropzone {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    transition: visibility 175ms, opacity 175ms;
}

div#modal {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    transition: visibility 175ms, opacity 175ms;
}

div.modalContent {
    margin: 6% auto;
    padding: 12px;
    width: 85%;
    max-width: 700px;
    background: var(--bg2);
    border-radius: 4px;
}

input[type=checkbox] {display:none;}

input[type=checkbox]:checked ~  .chkb0x {
    color:var(--tx0);
    background:var(--bg-dark1);
}

input[type=checkbox]:checked +  .chkb0x::after {content: "✔"}
.state {vertical-align: top; display: table-cell; }
.state,.text {padding: 4px 4px;}

.chkb0x {
    vertical-align: middle;
    cursor:pointer;
    display:inline-block;
    height:18px;width:18px;
    background:var(--bg-dark2);
    color:var(--tx1);font-weight:bold;
    text-align:center;font-size:12px;
    border-radius:4px;
} 
.fixed{font-family:monospace;}
.modalBlock {vertical-align: top;display:inline-block;width:50%;}
.text   {vertical-align: middle; display: table-cell; }
.textInfo{line-height:1;font-weight:normal;color:var(--tx1);font-size:13px;}
.textLabel{line-height:1;cursor:pointer;font-weight:bold;}

.label {
    display: inline-block;
    width: 120px;
    margin-right: 15px;
    text-align: right;
    font-weight:bold;
    font-size:16px;
}
.content {
    word-wrap: break-word;
    font-size: 14px;
    color:var(--tx1);
    width:100%;
    padding-top:2px;
}

.modalFlex{display: flex;}

textarea {
    width:100%;
    padding: 4px 8px;
    margin:2px 0;
    height: 51px;
    resize: none;
}
textarea,input {
        outline:none;
        border: 1px solid var(--bg4);
        background-color: var(--bg3);
}


.b0x:nth-child(-n+5) {opacity:0.75;border:1px dotted var(--bg4);}
.pageContainer {text-align:center;margin-top:32px;line-height:0.3;}
.b0x{line-height:1;display:inline-block;border:1px solid var(--bg4);height:8px;width:8px;margin:0.5px;}

/*
    ----------------------------------------
    TOP TOOLBAR
    ----------------------------------------
*/

div.topToolbar {
    display: flex;
    font-size: 28px;
    padding: 2px 4px; 
    background: var(--bg1);
    border-bottom: 4px solid var(--accent);
}

div.grow {
    flex: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    /*border-radius: 5px;*/
}

span#loadButton {
    font-weight: bold;
    padding:0 6px 3px 0;
    border-radius: 5px;
}

span#loadButton:hover {
    background: var(--bg3);
    color: var(--tx1);
    cursor: pointer;
}

#fileOpen {display: none;}

/*
    ----------------------------------------
    TOP TOOLBAR (STATUS)
    ----------------------------------------
*/

div#stats {
    background: var(--bg2);
    text-align:center;
    font-weight:400;
    font-size:14px;
    border-bottom: 1px solid var(--bg3);
}

div#stats .statBox {
    font-size:12px;
    width:150px;
    text-align:center;
    display:inline-block;
}

div#stats .outerBar {
    margin:1px 3px 6px 2px;
    box-shadow: 1px 1px 1px rgba(128, 128, 128, 0.6);
    text-align:left;
    background:var(--bg4);
}

div#stats .innerBar {height: 6px; background: var(--accent);}

/*
    ----------------------------------------
    MAIN TABLE
    ----------------------------------------
*/

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg1);
    border-bottom: 2px solid var(--bg4);
    border-left: 1px solid var(--bg1);
    border-right: 1px solid var(--bg1);
    font-size: 14px;
}

tr.empty {
    text-align:center;
    font-size:10px;
    color:var(--tx1);
    opacity:0.8;
}

tr.empty:nth-child(even) {background: var(--bg2);}
tr.empty td::before {content: "· •"; margin-right: 8px;}
tr.empty td::after  {content: "• ·"; margin-left:  8px;}

tr.note {
    background: var(--bg1);
    border: 1px solid var(--bg3);
    height:45px;
}

tr.note:nth-child(even) {background: var(--bg2);}
tr.note td:last-child {border-right: 1px solid var(--bg3);}
tr:nth-child(1) {border-top: none;}

td {
    padding: 4px 6px;
}

td.divider {padding: 0; width: 1px;}
td.divider div {
    height: 28px;
    background: linear-gradient(to bottom,
        rgba(128,128,128,0) 0%, rgba(128,128,128,0.5) 50%, rgba(128,128,128,0) 100%);
}

td.name {
    font-weight: bold;
    font-size: 14px;
}

td.name div {
    font-weight: normal;
    font-size: 12px;
    color: var(--tx1);
}

td.hash {
    width: 5px;
    padding:4px 2px;
    text-align: center;
}

canvas#hash {
    margin:0 4px;
}

td.region {
    width: 32px;
    text-align: center;
    font-size: 12px;
}

td.pgs {
    width: 5px;
    text-align: center;
    font-weight: bold;
}

td.tool {
    width: 32px;
    padding:4px 3px;
    text-align: center;
    white-space:nowrap;
}

td.empty {
    padding: 16px;
    text-align: center;
    font-size: 16px;
    font-style: italic;
}

/*
    ----------------------------------------
    ICON STUFF
    ----------------------------------------
*/

.fa {color: var(--accent); margin:1px 0;padding:2px 4px;border-bottom:2px solid transparent;}

span#loadButton:hover .fa-folder-open {
    color: var(--hover-accent);
}

.fa-trash:hover, .fa-cog:hover, .fa-download:hover,
.fa-floppy-o:hover, .fa-info-circle:hover {
    cursor: pointer;
    color: var(--hover-accent);
    border-bottom: 2px solid;
}

/*
    ----------------------------------------
    TOOLTIP STUFF
    ----------------------------------------
*/

[aria-label]{margin:2px 5px;float:right;position:relative;cursor:help}
[aria-label]:hover .fa-comment {color: var(--hover-accent)}
[aria-label]:hover:after,[aria-label]:hover:before{opacity:1}
[aria-label]:after,[aria-label]:before {
    pointer-events: none;
    z-index: 99;
    opacity: 0;
    position: absolute;
    top: 100%;
    transition: all .1s ease .1s;
}
[aria-label]:after {
    content: attr(aria-label);
    margin-top: 5px;
    right: 0;
    border-radius: 3px;
    background: var(--bg-dark1);
    color: var(--tx0);
    padding: 8px;
    white-space: pre-wrap;
    width: 320px;
}
[aria-label]:before {
    content: "";
    margin-top: -5px;
    right: 7px;
    border: 5px solid transparent;
    border-bottom-color: var(--bg-dark1);
}

/* GitHub ribbon */
svg{fill:var(--accent);position:fixed;top:0;border:0;right:0}svg:hover{fill:var(--hover-accent)}
svg path:nth-child(2),svg path:nth-child(3){fill:var(--bg-body);}
.gc:hover .oa{animation:qw 560ms ease-in-out;transform-origin:142px}
@keyframes qw{20%,60%{transform:rotate(-9deg)}40%,80%{transform:rotate(9deg)}}