@font-face {
    font-family: 'Font Awesome Free';
    font-style: normal;
    font-weight: 900;
    src: url('https://use.fontawesome.com/releases/v5.3.1/webfonts/fa-solid-900.woff2') format("woff2");
}

.qto-btn {
    font-family: 'Font Awesome Free';
}

.qto-btn:before {
    content: '\f0ce';
}

.qto-panel-container {
    margin: 10px;
}

.qto-input-row > select {
    border-radius: 3px;
    font-family: ArtifaktElement, "Helvetica Neue Light","Segoe UI Semilight",sans-serif;
    font-size: 14px;
    height: 22px;
}

.qto-input-row > select > option {
    font-family: ArtifaktElement, "Helvetica Neue Light","Segoe UI Semilight",sans-serif;
    font-size: 14px;
}

.qto-input-row span:nth-child(1) {
    margin: 0 4px 0 4px;
}

.qto-input-row span:nth-child(3) {
    margin: 0 4px 0 14px;
}

.qto-input-row button {
    background-color: #f2f2f2;
    border: 1px solid #a9a9a9;
    border-radius: 4px;
    color: #404040;
    cursor: pointer;
    width: 60px;
    text-align: center;
    margin: 4px 4px 4px 4px;
    padding: 4px;
}

.qto-data-header {
    display: flex;
    flex-direction: row;
    font-weight: bold;
    margin: 10px 0 4px 0;
}

.qto-data-header span {
    margin: 0 4px 0 4px;
    width: 80px;
}

.qto-data-header span:first-child {
    width: 50px;
}

.qto-data-header span:nth-child(2) {
    width: 140px;
}

.qto-data-row {
    display: flex;
    flex-direction: row;
    font-size: 12px;
    margin: 4px 0 4px 0;
    padding: 2px;
}

.qto-data-row:hover {
    background-color: rgba(155, 155, 155, 0.8);
    border-radius: 2px;
}

.qto-data-row.selected {
    background-color: rgba(165, 195, 225, 0.8);
    border-radius: 2px;
}

.qto-data-row span {
    cursor: pointer;
    margin: 0 4px 0 4px;
    width: 80px;
}

.qto-data-row span:first-child {
    width: 50px;
}

.qto-data-row span:nth-child(2) {
    width: 140px;
}

.qto-data-row span:last-child {
    border-radius: 4px;
}

.hidden {
    visibility: hidden;
}