* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
	/* font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; */
	font-size: 16px;
	line-height: 1.5;
    color: #333;
    min-height: 100vh;
}

:root {
    --main-bg-color: #f5f5f5;
    --dark-bg-color: #444;
    --error-color: #9f3a38;
    --main-purple-color: rgb(134,18,114);
    --color-red   : #db2828;
    --color-orange: #f2711c;
    --color-yellow: #fbbd08;
    --color-olive : #b5cc18;
    --color-green : #21ba45;
    --color-teal  : #00b5ad;
    --color-blue  : #2185d0;
    --color-violet: #6435c9;
    --color-purple: #a333c8;
    --color-pink  : #e03997;
    --color-brown : #a5673f;
    --color-grey  : #767676;
    --color-black : #1b1c1d;
}

::selection {
    background-color: #6435c9;
    color: white;
}

input::selection {
    background-color: #6435c9;
    color: white;
}

.input.label.error {
    color: var(--error-color);
}

i.link {
    cursor: pointer;
    font-style: normal;
}

.truncate {
    _white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}

span.header {
    font-size: 16pt;
}

span[slot='header'] {
    flex: 1;
    align-self: flex-end;
}

span.header .name,
span[slot='header'] .name {
    display   : block;
    margin    : 0;
    font-size : 1em;
    align-self: flex-end;
}

span.header .description,
span[slot='header'] .description {
    display    : block;
    margin-top : .5em;
    color      : #ccc; 
    font-size  : .8em;
    align-self: flex-end;
}

.center-it {
    display : flex; 
    height  : 100%;
    flex-direction  : column;
    justify-content : center; 
    align-items     : center; 
    align-content   : center; 
}

.annotation-source {
    cursor: zoom-in;
}