:root {
    --text-color: aliceblue;
}

body {
    background: linear-gradient(45deg, #49a09d, #5f2c82) no-repeat;
    background-attachment: fixed;
    /** prevents white gap at bottom of page on scroll */
    /**font-family: 'georgia'; */
    font-size: 20px;
    height: 100%;
    /** needed for linear gradient bg to cover - adding to HTML screw it */
    color: var(--text-color);
}

a:link,
a:visited {
    color: lightsteelblue;
    /**#221a57;*/
    text-decoration: none;
}

a:hover,
a:active {
    color: snow;
}

/**
.nav {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  background: gray;
  padding: 10px;
}
.inner-drop {
  display: flex;
  justify-content: center;
}
*/

/** header for page */
.header {
    text-align: center;
    /**margin-top: 80px; */
}

/** main content for all the pages */
.content {
    margin-top: 80px;
    padding-left: 30px;
    padding-right: 30px;
}

/** table wrapper */
.vocabtable {
    margin: 40px 0px 40px 0px;
}

/** wrap around checkboxes and table */
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/** ru table cells */
.ru {
    /**font-weight: bold; */
}

/** info rows */
.info-row {
    font-style: italic;
    text-align: center;
    background-color: inherit;
}

.info-row td {
    padding: 9px;
    background: inherit;
    border-left: solid;
    background-color: rgba(0, 0, 0, 0.05);
}

.info-row.depth-2 td {
    background-color: rgba(0.5, 0.5, 0.5, 0.3);
}

.info-row.depth-3 td {
    background-color: rgba(1, 1, 1, 0.7);
}

.data-row td {
    max-width: 300px;
}

.data-row td.black {
    background-color: gray;
    color: gray;
}

.data-row td.black a {
    color: gray;
}

th,
td {
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.2);
    /**color: #fff;*/
}

.table-header {
    background-color: navy;
}

.table-header th {
    text-align: left;
}

.pronounce {
    display: none;
}

/** note: .hasblackcell set dynamically in js */
tr:hover:not(.info-row, .hasblackcell, .table-header) {
    background-color: rgba(255, 255, 255, 0.3);
}

.mytooltip svg {
    height: 18px;
    width: 18px;
}