/* hide vue templates before app is initalized */
[v-cloak] { opacity: 0 }

/* fix horizontal label alignment with buttons/selects/inputs */
.field.is-horizontal .field-label {display: flex;align-items: center;}
.column.is-aligned .field-label label { min-width: 4rem; text-align: left; }
.test-suite .column:not(.is-two-fifths) .field.is-horizontal .field-label { margin-right: 1rem; justify-content: flex-end; }

/* fix bulma button loading colors */
.button.is-light.is-loading::after { border-color: transparent transparent #000 #000 !important; }
.button.is-light[disabled].is-danger:hover { background-color: #feecf0; }
.button.is-light[disabled].is-warning:hover { background-color: #fffbeb; }
.button.is-light[disabled].is-info:hover { background-color: #eef6fc; }

.button.is-icon { vertical-align: middle; }

/* fix label in field with addons */
.field.has-addons.with-label { flex-wrap: wrap; }
.field.has-addons.with-label .label { flex: 0 0 100%; }
/* fix horizontal label wrapping */
.field-label.no-wrap { flex-basis: 25%; white-space: nowrap; }
.is-three-fifths .field-label.no-wrap { flex-basis: 1.9%; }
/* adjust input width if required */
.input.is-narrow { width: 8rem; }
.field.is-narrow { flex-grow: 0; }
/* fix floating field margins */
.field.is-pulled-left + .field { padding-left: .75rem; }
/* fix readonly inputs */
.input[readonly]:focus { border-color: #dbdbdb; }
.control[class*=has-icons] .input[readonly]:focus ~ .icon { color: #dbdbdb; }

/* distinguish empty value in select */
.dropdown .is-empty { opacity: .4; font-size: .9em; }

/* generic table improvements */
.table th.separator,
.table td.separator { border-left: 1px dashed #ccc; }
.table td.is-size-7 { vertical-align: inherit; }

.table.suite { margin-top: 3rem; }
.table.suite thead th[colspan] { border-bottom-width: 1px; text-align: center; }
.table.suite thead th[rowspan] { vertical-align: middle; text-align: center; }
.table.suite thead th.slim { text-align: right; border-bottom: 0; border-top: 0; opacity: .65; }
.table.suite thead tr + tr th { font-size: .9rem; font-weight: 500; text-align: center; white-space: nowrap; }
.table.suite thead tr + tr + tr th { font-size: .75rem; }
.table.suite tbody td { vertical-align: middle; }
.table.suite td.is-info.is-light { background-color: rgba(50,152,220,.05); }

.table.is-layout th,
.table.is-layout td { border: none }
.table.is-layout td.is-narrow { width: 1em; }

/* dashboard values */
.table th.is-num, .table td.is-num, .table .is-num { text-align: right; }
.vehicles .table .is-num { font-size: .85rem; vertical-align: middle; }
.vehicles .table .is-unit { font-size: .9em; color: #888; margin-left: .15rem; }

/* result values and actions */
.table.suite tbody.is-foot tr th,
.table.suite tbody.is-foot tr td { font-size: .9rem; vertical-align: top; }
.table.suite tbody.is-foot tr:first-child th,
.table.suite tbody.is-foot tr:first-child td { border-top-width: 2px; }
.table.suite tbody.is-foot tr.actions th { text-align: right; }
.table.suite tbody.is-foot tr.actions td { font-size: .8rem; }
.table.suite tbody.is-foot tr.actions .button { vertical-align: middle; }

/* upload button wrapper cell */
.table.suite thead th .file { font-weight: normal; }

/* file field with progress file */
.table.suite .field .file, .field .file-cta { transition: .3s all; }
.table.suite .field .file-cta { min-width: 13rem; }
.table.suite .field .file.is-progress .file-icon { width: 100%; }

/* file matrix */
.table.suite tbody:not(.is-foot) td:hover { background: #eee; cursor: pointer; }
.table.suite .fa-spin { animation-duration: 1s; }
.table.suite .modal { font-weight: normal; text-align: left; }
.table.suite tbody .drag-handle { cursor: grab; }
.table.suite tbody .source .meta { font-weight: normal; font-size: .75rem; margin: 0; opacity: .6; }
.table.suite tbody .source .meta .column { padding-top: 0; padding-bottom: 0; white-space: nowrap; }
.table.suite tbody .source .meta .column:first-child { padding-left: 0; }
.table.suite tbody .source .meta .column:last-child { padding-right: 0; }
.table.suite .results .result-list { font-size: .85em; }

/* adjust modal to contain image */
.modal.is-image .modal-content { max-width : 90%; width: auto; overflow: hidden; }
.modal.is-image .modal-content .image { display: flex; height: 100%; width: 100%; }
.modal.is-image .modal-content .image img { height: auto; width: auto; max-height: 100%; object-fit: contain; }
.modal.is-image .modal-content .image.is-loading { position: relative; min-height: 6em; min-width: 6em; }
.modal.is-image .modal-content .image.is-loading::after {
    content: "";
    display: block;
    position: absolute;
    height: 6em;
    width: 6em;
    animation: spinAround 500ms infinite linear;
    border: 2px solid hsl(0, 0%, 86%);
    border-radius: 6em;
    border-right-color: transparent;
    border-top-color: transparent;
}

/* adjust modal to allow overflowing */
.modal.has-box .modal-content { overflow: initial; }

/* breadcrumbs in navbar */
.navbar-separator { opacity: .4; padding: .35rem; }

.navbar-item.has-dropdown .navbar-link.has-small-caret { padding-right: 2em; }
.navbar-item.has-dropdown .navbar-link.has-small-caret::after { height: .425em; width: .425em; top: 53.5%; right: .925em; border-width: 2px; }

.navbar-item.has-dropdown .navbar-item.has-icon { padding-right: 4rem; }
.navbar-item.has-dropdown .navbar-item.has-icon .icon { position: absolute; right: .5rem; }

.navbar-item.has-dropdown .navbar-item.is-highlighted { background-color: rgb(29, 114, 170, .1); }

span.navbar-link { cursor: inherit; }

/* notification size */
.notification.is-size-7 { padding: .5rem 1.5rem .5rem 1rem; }

/* loader component cosmetics */
.loader { margin-bottom: 1rem; }
.loader.is-small { height: .75rem; width: .75rem; }
.loader.is-medium { height: 1.5rem; width: 1.5rem; }
.loader.is-large { height: 2rem; width: 2rem; }

/* link styling */
a.is-danger { color: #f14668; }
a.is-danger:hover { color: inherit; }

.button.is-readonly:hover { background: inherit; color: inherit; cursor: text; user-select: text; }
.button.is-readonly.is-text { text-decoration: none; }

.input,
.button,
a.navbar-item ,
.table.suite td,
[data-tooltip]::before,
[data-tooltip]::after { transition: .35s all ease-in-out; }
.input:hover,
.button:hover,
a.navbar-item:hover,
.table.suite td:hover,
[data-tooltip]:hover::before,
[data-tooltip]:hover::after { transition: .1s all ease-in-out; }

[data-tooltip]:not(:hover):not(.is-loading):not([disabled])::before {transform: translate(-50%, -85%);}
[data-tooltip]:not(:hover):not(.is-loading):not([disabled])::after { transform: translateY(5px); }

[data-tooltip].has-tooltip-left:not(:hover):not(.is-loading):not([disabled])::before { transform: translate(-98%, 50%); }
[data-tooltip].has-tooltip-left:not(:hover):not(.is-loading):not([disabled])::after { transform: translateX(5px); }

[data-tooltip].has-tooltip-right:not(:hover):not(.is-loading):not([disabled])::before { transform: translate(calc(100% + 5px), 50%); }
[data-tooltip].has-tooltip-right:not(:hover):not(.is-loading):not([disabled])::after { transform: translateX(5px); }

[data-tooltip]::before { font-weight: normal; }

/* vue transitions */
.fade-enter-active, .fade-leave-active { transition: opacity .5s; }
.fade-enter, .fade-leave-to { opacity: 0; }

/* output cosmetics */
.export-preview { background: #eee; min-height: 10rem; }

.export-preview .preview-badges .field.is-grouped:first-child .badge { font-size: 1.2rem; }
.export-preview .preview-badges .field.is-grouped.is-grouped-multiline { margin-bottom: 1rem; }

.export-preview .badge { line-height: 1.2; text-align: center; margin: 0 .5rem; transition: .3s transform; width: 8rem; z-index: 5; }
.export-preview .badge .box { padding: .65rem 1rem; margin-bottom: 0; }
.export-preview .badge:not(.has-no-data):hover { transform: scale(1.1); z-index: 10; }
.export-preview .badge .value { font-size: 1.75em; }
.export-preview .badge .value .dec { font-size: .75em; }
.export-preview .badge .unit { font-size: .9em; }
.export-preview .badge .name { font-size: .8em; font-weight: bold; margin-top: .5rem; }
.export-preview .badge.has-no-data { opacity: .3; pointer-events: none; user-select: none; }

.export-preview .preview-charts { margin: 3rem 0; }
.export-preview .chart-preview .title { text-align: center; }
.export-preview .chart { min-height: 350px; }
.export-preview .chart-legend { text-align: center; }
.export-preview .chart-legend .entry { font-size: .85rem; margin-right: 1rem; border-radius: .1rem; padding: .1rem .15rem; }
.export-preview .chart-legend .entry:hover { background: #ddd; }
.export-preview .chart-legend .entry .color { display: inline-block; height: .6rem; width: .6rem; border-radius: .1rem; }

.export-preview .speed-table { border-bottom-left-radius: .8rem; border-bottom-right-radius: .8rem; }
.export-preview .speed-table > caption { background: #fff; padding: .35rem 1rem; border-top-left-radius: .8rem; border-top-right-radius: .8rem; }
.export-preview .speed-table thead th { background: #dadada; }
.export-preview .speed-table > tbody > tr > th { border-right: 1px dashed #dadada; }
.export-preview .speed-table th,
.export-preview .speed-table td { transition: .3s background; }
.export-preview .speed-table > tbody tr:hover > td,
.export-preview .speed-table > tbody tr:hover > th,
.export-preview .speed-table > tbody .is-highlighted { background: rgb(179 194 52 / .1); }
.export-preview .speed-table > thead th.is-highlighted { background: rgb(89 97 15 / .4); }
.export-preview .speed-table > tbody td:hover,
.export-preview .speed-table > tbody .is-highlighted:hover { background: rgb(179 194 52 / .3); }

.export-preview .tooltip { display: none; }
.export-preview .has-tooltip { position: relative; }
.export-preview .has-tooltip .tooltip { display: block; position: absolute; top: 100%; left: 50%; transform: translate(-50%, -10px); opacity: 0; white-space: nowrap; padding-top: 5px; margin-top: -5px; pointer-events: none; user-select: none; transition: .3s all; z-index: 20; }
.export-preview .has-tooltip:hover .tooltip { transform: translate(-50%, 5px); opacity: 1; pointer-events: initial; user-select: initial; }
.export-preview .has-tooltip .tooltip::before { content: " "; display: block; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border: 0px solid transparent; border-width: 0 6px 6px 6px; border-bottom-color: rgb(0 0 0 / .075) }
.export-preview .has-tooltip .tooltip::after { content: " "; display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0; height: 0; border: 0px solid transparent; border-width: 0 5px 5px 5px; border-bottom-color: #fff; }
.export-preview .has-tooltip .tooltip .box { padding: 0; }
.export-preview .has-tooltip .tooltip .table { border-radius: 4px; }
.export-preview .has-tooltip .tooltip .table caption { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.export-preview .has-tooltip .tooltip .table caption { background: #e5e5e5; border-bottom: 2px solid #ccc; padding: .15rem .2rem .1rem; font-weight: bold; }
.export-preview .has-tooltip .tooltip .table tbody th { text-align: left; }
.export-preview .has-tooltip .tooltip .table th,
.export-preview .has-tooltip .tooltip .table td { white-space: nowrap; }
.export-preview .has-tooltip .tooltip .table th:first-child { padding-left: .75rem; }
.export-preview .has-tooltip .tooltip .table td:last-child { padding-right: .75rem; }
.export-preview .has-tooltip .tooltip .table tr.is-highlighted { background-color: rgb(179 194 52 / .3); }

.export-preview .speed-table .tooltip { left: 70%; }

/* chart cosmetics */
.c3 { background: #fafafa; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0, .1); }
.c3-grid line { stroke: #aaa; }
.c3-line { stroke-width: 2.5px; }
.c3-chart-lines .c3-chart-line:not(:first-child) .c3-line { stroke-width: 1.5px; }
.c3-tooltip .name,
.c3-tooltip .value { white-space: nowrap; }
.c3-tooltip th { font-size: .85rem; }
.c3-tooltip td { font-size: .8rem; }

/* comparison components */
.compare-select .control.has-columns { columns: 3; }


/* export cosmetics */
.table.exports tbody th,
.table.exports tbody td { vertical-align: middle; }
.table.exports .message.is-small .message-body { padding: .3em .75em; }
.table.exports .icon[data-tooltip] { border-bottom: none; }
.table.exports .has-checkbox { text-align: center; }
.table.exports .has-checkbox:hover { cursor: pointer; background: #eef6fc; }
.table.exports .has-checkbox .loader { margin: 0; display: inline-block; vertical-align: text-top; }