/* GLOBAL STYLES */
:root{
    --element-bottom-spacing: 1.15rem;     
    --ui-color-dark: #374857;
    --ui-color-faded: #aab0b5;
    --ui-color-light: #dfe3e6;
}
body {
    background: #dce0e0;
    color: var(--ui-color-dark);
    font-family: 'Open Sans', 'Raleway', sans-serif;
}
.content-container {
    margin: 0 auto;
    width: 80vw;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Raleway', 'Open Sans', sans-serif;
}
html {
    font-size: 22px;
    overflow-x: hidden;
}

/* HEADER */
.header-container {    
    background-color: var(--ui-color-dark);
    box-sizing: border-box;
    height: 6rem;
    margin-bottom: 3.75rem;
    padding: 1.5rem 2.25rem;
}
.header-title {
    width: 80vw;
    margin: 0 auto;
}
.header-title h1 {
    color: var(--ui-color-light);
    font-weight: 100;
    font-size: 3rem;
}

/* OLIGO INPUT */
.oligo-input-container {
    margin: 0 auto var(--element-bottom-spacing);
}
.inputbox-oligo {
    background-color: var(--ui-color-light);
    border: 4px solid var(--ui-color-dark);
    /* border-radius: 15px; */
    box-sizing: border-box;
    display: block;
    height: 2.5rem;
    padding: 0.15rem 0.75rem;    
    transition: 0.25s ease-in-out all;
    width: 100%;
}
.inputbox-oligo:hover {
    background-color: var(--ui-color-dark);
}
.faded {
    color: var(--ui-color-faded);
}

/* OLIGO OUTPUT */
.oligo-output-container {
    background-color: var(--ui-color-light);
    border: 4px solid var(--ui-color-dark);
    /* border-radius: 15px; */
    margin: 0 auto var(--element-bottom-spacing);
    min-height: 8rem;
    padding: 0.5rem 0.75rem;
    transition: 0.25s ease-in-out all;
    word-wrap: break-word;
}
.oligo-output-container:hover {
    background-color: var(--ui-color-dark);
}
.oligo-output-title {
    color: var(--ui-color-faded);
    font-size: 0.9rem;
    height: 1.5rem;
}

/* OLIGO TABLE */
.oligo-table-container {
    margin: 0 auto var(--element-bottom-spacing);
}
table {
    background-color: var(--ui-color-light);
    border: 4px solid var(--ui-color-dark);
    /* border-collapse: separate; */
    /* border-radius: 15px;   */
    color: var(--ui-color-dark);  
    width: 100%;
}
th {
    border: 2px solid var(--ui-color-dark);
    font-size: 1.1rem;
    font-weight: bold;
    padding: 0.5rem 0.75rem;
    transition: 0.25s ease-in-out all;
}
td {
    border: 2px solid var(--ui-color-dark);
    padding: 0.5rem 0.75rem;
    text-align: right;
    transition: 0.25s ease-in-out all;
}
.table-cell-FILLER {
    border-bottom: 0;
    border-top: 0;
}
td:hover, th:hover {
    background-color: var(--ui-color-dark);
    transform: scale(1.05);
}
.table-base-headings > th:hover, #row-Total > th:hover, #row-Total > td:hover {
    color: var(--ui-color-faded);
}
.table-cell-A, .table-cell-G, .table-cell-U {
    background-color: 0;
}
.table-cell-type, .table-cell-T, .table-cell-C, .table-cell-Total {
    background-color: rgba(0,0,0,0.1);
}
.NT-cell:active {
    background-color: var(--ui-color-faded);
    color: var(--ui-color-light);
    transform: scale(1.15);
}

/* BASE COLOURS */
.base-type-DNA {
    color: black;
}
.base-type-RNA {
    color: red;
}
.base-type-Fluoro {
    color: green;
}
.base-type-LNA {
    color: #c78100;
}
.base-type-OMe {
    color: blue;
}
.base-type-FANA {
    color: #b5a907;
}
.base-type-ANA {
    color: purple;
}
#row-Total {
    color: var(--ui-color-dark);
}