body {
    font-family: 'Roboto', sans-serif;
    padding: 1vmin;
    text-align: center;
    margin: 0;
    padding: 0;
}
* {
  -ms-box-sizing:content-box;
  -moz-box-sizing:content-box;
  -webkit-box-sizing:content-box; 
  box-sizing:content-box;
}
body, button, input, textarea, select {
    font-size: 1.5vmin;
}
input, select, .form-element-width {
    width: 15vmin;
    display: inline-block;
    height: 1.5vmin;
    margin-bottom: 1vmin;
}
input[type=button], input[type=submit], button, select {
    min-height: 3vmin;
    font-size: 1vmin;
    margin: 0;
}
input[type=radio], input[type=checkbox] {
    width: auto;
}
textarea {
    vertical-align: top;
}
h1 {
    margin-top: 0;
}
a {
  text-decoration: none;
  color: #71cb71;
}
a:hover {
  color: black;
}
a.button-link {
    background: #eee;
    padding: 1vmin;
    border-radius: 0.5vmin;
    width: 1.7vmin;
    display: inline-block;
}
a.button-link.disabled {
    pointer-events: none;
    filter: blur(0.2vmin);
}


.corner-button {
    text-align: center;
    padding: 0.8vmin 0;
    width: 3vmin;
    4: 1.7vmin;
    text-decoration: none;
    color: white;
    float: right;
    background: rgba(0,0,0,0.5);
}
/* Reversed due to float right */
.corner-button:first-of-type { border-top-right-radius: 0.7vmin; }
.corner-button:last-of-type { border-bottom-left-radius: 0.7vmin; }

.delete-button { background: rgba(255,0,0,0.7); }



.main-container {
    margin-top: 10vmin;
}




#upload-form {
    width: 56vmin;
    margin: 8vmin auto 0 auto;
}
label {
    width: 10vmin;
    display: inline-block;
    text-align: left;
    font-size: 1.6vmin;
}
input, select, select {
    width: 42vmin;
    height: 3vmin;
    border: 1px solid gray;
    border-radius: 1vmin;
    padding: 1vmin;
    font-size: 1.6vmin;
    display: inline-block;
}
label[for="fileElem"] {
    width: 16vmin;
}

#drop-area {
    border: 2px dashed #ccc;
    border-radius: 20px;
    padding: 20px;
}
#drop-area.highlight {
    border-color: purple;
}
#upload-form p.info {
    /*margin-top: -1vmin;*/
}
#error {
    margin: 1vmin 0;
    /*color: #c64218;*/
    color: white;
    background-color: #c64218;
    visibility: hidden;
}
#gallery {
    margin-top: 10px;
}
#gallery img {
    width: 150px;
    margin-bottom: 10px;
    margin-right: 10px;
    vertical-align: middle;
}
.button {
    display: inline-block;
    padding: 10px;
    background: #ccc;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 2vmin;
}
.button:hover {
    background: #ddd;
}
#fileElem {
    display: none;
}

#loading {
    display: none;
}
#loading p.info {
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    opacity: 50%;
    margin: 0;
}

#analysis-tabs {
    display: none;
    width: 84vmin;
    margin: auto;
    text-align: justify;
}
#analysis-tabs ul {
    margin: 0;
    padding-left: 2vmin;
}
.analysis-tab {
    overflow: auto;
    max-height: 47vh;
    padding: 1vmin !important;
}
#transcription-tab {
    text-align: justify;
}
#transcription-tab a {
    border: 0.2vmin solid #e8e8e8;
}

.relatable[data-relatedness="1"] {background: rgb(39 205 4 / 17%); }
.relatable[data-relatedness="2"] {background: rgb(39 205 0 / 35%); }
.relatable[data-relatedness="3"] {background: rgb(39 205 4 / 50%); }
.relatable[data-relatedness="4"] {background: rgb(39 205 0); }

#transcription-tab a:hover, #qa-tab a:hover, #notes-tab .note:hover {
    background: #ffc8b6;
}

.controls {
    background: rgba(255,255,255,0.8);
    margin: -1vmin;
    position: sticky;
    top: -1vmin;
    margin-bottom: 1vmin;
    padding: 1vmin;
    border-bottom: 1px solid #e9e9e9;
}
.controls .button-link {
    margin-right: 1vmin;
}
.content[contentEditable=true] {
    background: #f1f1f1;
    border-radius: 1vmin;
}



#features-tab th, #features-tab td {
    vertical-align: top;
}
#features-tab .answer {
    font-weight: bold;
    bdorder:1px solid black;
    background: #e9e9e9;
    padding: 0.5em;
    margin: 0;
    font-family: monospace;
    text-align: left;
}
#features-tab .reasoning {
    font-style: italic;
    color: #71cb71;
    margin: 0.5em 0 0 0;
    padding: 0;
}
#features-tab .label {
    text-align: left;
}
#features-tab .key {
    font-weight: normal;
    color: #ccc;
    text-align: left;
}