.icon {
  width: 1em;
  height: 1.125em;
  /*vertical-align: -0.125em;*/
    vertical-align: text-bottom;
}

.meeteval-viz {
    margin: auto;
    /* Prevents scroll + zoom on touch devices. We handle scrolling + zooming
    manually and weird things happen when browser and manual zoom happen at
    the same time */
    touch-action: none;
}

.meeteval-viz table {
    color: black;
}

code {
    font-family: "Courier New", Courier, monospace; /* Monospace font */
    white-space: pre-wrap; /* Preserve white spaces and wrap lines */
}

.plot-area {
    margin-top: 5px;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-grow: 1;
}

/* Styles for menu bar pills*/
.top-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.pill {
    display: flex;
    margin: 2px 3px 0 3px;
    background-color: #fff;
    border-radius: 7px;
    border: 1px solid #000;
    padding: 0 5px 0 5px;
    white-space: nowrap;
    align-items: center;
}

.pill.no-border {
    border: none;
}

.pill.warn {
    background-color: #ffff00;
    border: 1px solid #eed202;
}

.pill.warn:hover:not(.no-border) {
    background-color: #ffff00;
    border: 1px solid #eed202;
}

.pill:hover:not(.no-border) {
    background-color: #eeeeee;
    border: 1px solid #4f9fee;
}

.pill.selection-details {
    display: flex;
    margin: 2px 3px 0 3px;
    background-color: #fff;
    border-radius: 7px;
    border: 1px solid #000;
    /*flex-wrap: wrap;*/
    box-sizing: border-box;
    align-items: center;
    width: calc(100% - 5px);
    padding: 0;
    /*overflow: hidden;*/
}

.selection-details-container {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    min-height: 2.5ex;
}

.selected-utterance-expand {
    position: absolute;
    right:0;
    top: 0;
    background: #fff;
    border-radius: 5px;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    cursor: pointer;
    margin: 0;
    padding: 0 5px;
}

.expanded {
    flex-wrap: wrap;
    overflow: visible;
}

.info-label {
    display: inline-block;
    font-weight: bold;
    margin-right: 5px;
}

.info-value {
    display: inline-block;
    font-weight: normal;
    vertical-align: middle;
    flex-wrap: wrap;
}

audio.info-value {
    height: 2.2ex;
}

.legend-element {
    margin: 0 3px 0 3px;
    padding: 0 0px 0 0;
    white-space: nowrap;
}

.legend-color {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #aaa;
}

.legend-label {
    display: inline-block;
    padding-left: 5px;
}

/* Icons */
i, .icon {
    display: inline-block;
    /* font-size: 1.2em; */
    margin-right: 5px;
}

.copybutton {
    display: inline-block;
    font-weight: normal;
    vertical-align: middle;
    flex-wrap: wrap;
    padding: 0.3em;
    /*background: #5784f5;*/
    /*color: #fff;*/
    font-size: 1em;
    margin: 0;
    margin-right: 0px;
    /*border:none;*/
    outline: none;
    border-radius: 0.6em;
    cursor: pointer;
}

.copybutton i {
    margin-right: 0px;
}

/* Make copy button same height as text in the details preview and hide any fancy formatting.
This prevents the view from jumping when a segment is selected*/
.info-value .copybutton {
    height: 1em;
    padding: 0 5px;
    margin: 0;
    border: none;
}

.info-value .copybutton i {
    margin-right: 0px;
    height: 1em;
    font-size: .75em;
}

/* Plot elements */
.plot {
    position: relative;
    background-color: white;
    margin-bottom: 1px;
    padding: 2px;
    border: 1px solid black;
    border-radius: 5px;
    box-sizing: border-box;
}

/* Minimaps */
.minimap-resize-handle {
    width: 100%;
    position: absolute;
    bottom: 0;
    left:0;
    height: 5px;
    cursor: row-resize;
    opacity: 70%;
    background-color: transparent;
    transition: background-color 0.3s;
}

.minimap-resize-handle.active {
    background-color: #4f9fee;
}

/* Tooltips */
.tooltip {
    position: relative;
}

/* Wraps text at about 40 characters. Used in text-only tooltips */
.wrap-40 {
    inline-size: max-content;
    max-inline-size: 40ch;
}

/* Wraps text at about 60 characters. Used in selected segment details
tooltip */
.wrap-60 {
    inline-size: max-content;
    max-inline-size: 60ch;
}

/*
Class for the tooltip content. This is the element that is shown when you hover
over the tooltip container. It is hidden by default.

The JS code may apply an additional translate style to move the tooltip into the
visible area.
*/
.tooltip .tooltipcontent {
    visibility: hidden;

    white-space: pre-wrap;
    background-color: #555;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 0%;
    opacity: 0;
    transition: opacity 0.3s;
    transition-delay: 2s;
    max-width: 50vw;    /* Limit width to 50% of the viewport so that the tooltip can never cover the full screen area*/
    overflow: auto;
    box-sizing: border-box;

    /* Width: fit content size. Size is limited by children */
    inline-size: fit-content;

    /* Center the tooltip below the element */
    inset-inline-start: 50%;
    /* Don't move this to the translate property. The translate property is
       used by the JS code and stacks with transform: translate. */
    transform: translateX(-50%);
}

/* Tooltip that is aligned left of its parent (e.g., selected segment) */
.tooltipcontent.alignleft {
    inset-inline-start: 0;
    transform: none;
}

/* Show the tooltip text when you hover over the tooltip container */
.tooltipcontent.visible {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.1s;
    transition-delay: 0.2s;
}

/* Menu Elements */
.menu-container {
    position: relative;
}

.menu {
    visibility: hidden;
    white-space: pre-wrap;
    background-color: #fff;
    text-align: center;
    border-radius: 6px;
    border: 1px solid black;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 0%;
    /*opacity: 0;*/
    transition: opacity 0.3s;
    transition-delay: 2s;
    inline-size: max-content;

    /* Center the tooltip below the element */
    inset-inline-start: -4em;
}

.divider {
    border-top: 1px solid #ddd;
    margin: 5px 0 5px 0;
    font-weight: bold;
    padding: 0;
}

.menu-header {
    border-bottom: 1px solid black;
    margin-bottom: 5px;
    padding: 5px;
    font-weight: bolder;
}

.menu select {
    border-radius: 5px;
    background: #fff;
    padding: 3px;
}

.menu-element {
    margin: 0 5px;
    display: flex;
    align-items: center;
}

.menu-element .menu-control {
    margin-left: auto;
}

.menu-element .menu-label {
    margin-right: 20px;
}

.menu .menu-section-label {
    font-weight: bold;
    margin: 5px 0 10px 0;
}

/* Style for the help text displayed when no utterance is selected */
.utterance-details-help {
    color: gray;
    font-size: 0.8em;
    margin-left: 5px;
    font-style: italic;
}

/* Style for the small hint plot label */
.plot-label {
    top: 0px;
    left: 0px;
    position: absolute;
    padding: 0 3px 0 3px;
    font-style: italic;
    user-select: none;
    border-radius: 0 5px 5px 0;
    font-size: 10px;
    background-color: #fff;
    opacity: 0.5;
}

/* Style for the tables */

/* Table header */
.meeteval-viz thead {
    color: #ffffff;
}

/* Duplicate .meeteval-viz so that we are more specific than the Jupyter
Notebook CSS */
.meeteval-viz.meeteval-viz table thead th {
    font-weight: bold;
    text-align: center;
}

.meeteval-viz.meeteval-viz table th,
.meeteval-viz.meeteval-viz table td,
.meeteval-viz.meeteval-viz table tr {
    padding: 12px 15px;
    text-align: left;
}

.meeteval-viz tbody tr:nth-child(odd) {
    background: #fff;
}

.meeteval-viz tbody tr:nth-child(even) {
    background: #eee;
}

table.wer-table {
    border-collapse: collapse;
    margin: auto;
    width: 100%;
    table-layout: auto;
}

/* Use a monospaced font for number columns (starting from column 3) in the
wer table */
.wer-table tbody tr td:nth-child(n+3) {
    font-family: monospace;
}

/* Menu Elements */

.range-selector input {
    /* background: red; */
    border-radius: 3px;
    border: 1px solid gray;
    width: 9em;
    text-align: center;
}

.input-error {
    border: 1px solid red !important;
    background: #ffcccc;
}

/* Chrome, Safari, Edge, Opera */
.range-selector input::-webkit-outer-spin-button,
.range-selector input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.range-selector input[type=number] {
    -moz-appearance: textfield;
}

/* Hint shown below tables in tooltips */
.tooltip-info {
    font-style: italic;
}

.search-bar input {
    border-color: transparent;
}

.search-bar button {
    background-color: #eee;
    color: #333333;
    cursor: pointer;
    display: inline-block;
    border: none;
    margin: 0;
    /* padding: 10px 12px; */
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.search-bar button:disabled {
    background-color: #ccc;
    color: #666;
    cursor: default;
}

/* Make italic and gray*/
.search-bar .match-number {
    /* font-style: italic; */
    color: gray;
}

.clickable {
    cursor: pointer;
    text-decoration: underline;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}