.yuv-app-bar {
    gap: var(--app-pane-padding);
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr auto auto;
    grid-template-areas: 'logo . icons';
}

.yuv-app-bar .logo {
    grid-area: logo;
    display: flex;
    align-items: center;
    gap: 1em;
    cursor: pointer;
    outline: none;
    font-size: var(--font-subhead);
}

.yuv-app-bar .icons {
    grid-area: icons;
    display: inline-flex;
}

.yuv-app-bar .icons .icon-margin {
    margin-left: var(--app-pane-padding);
}

.yuv-app-bar .pointer {
    cursor: pointer;
}

.yuv-app-content {
    display: grid;
    grid-template-columns: 0.5fr 1fr 0.5fr;
    row-gap: var(--app-pane-padding);
    grid-template-rows: auto;
    grid-template-areas: ". rm-cfg ."
    ". cs-cfg ."
    ". cs-advanced-cfg .";
}

.yuv-app-content .rm-cfg {
    grid-area: rm-cfg;
    padding-top: var(--app-pane-padding);
}

.yuv-app-content .cs-cfg {
    grid-area: cs-cfg;
}

.yuv-app-content .cs-advanced-cfg {
    grid-area: cs-advanced-cfg;
    padding-bottom: var(--app-pane-padding);
}

.yuv-app-content .panel {
    border: 1px solid var(--panel-divider-color);
    box-shadow: 0 0 30px 0 var(--panel-divider-color);
    color: var(--text-color-caption);
}

.yuv-app-content .panel .header {
    padding: var(--app-pane-padding);
    border-bottom: 1px solid var(--panel-divider-color);
    background-color: var(--panel-background-grey);
    font-weight: var(--font-weight-bold);
    display: flex;
    justify-content: space-between;
}

.yuv-app-content .panel .header .pointer {
    cursor: pointer;
}

.yuv-app-content .panel .title {
    margin-top: var(--app-pane-padding);
    margin-left: var(--app-pane-padding);
    font-weight: var(--font-weight-bold);
}

.yuv-app-content .panel .subtitle {
    margin-top: var(--app-pane-padding);
    margin-bottom: var(--app-pane-padding);
    margin-left: var(--app-pane-padding);
}

.yuv-app-content .panel .button {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    margin-left: var(--app-pane-padding);
    margin-bottom: var(--app-pane-padding);
    margin-top: var(--app-pane-padding);
}

.yuv-app-content .panel .body {
    background-color: var(--panel-background);
    display: grid;
}

.yuv-app-content .panel .body .input {
    margin-right: var(--app-pane-padding);
    margin-left: var(--app-pane-padding);
    font-size: var(--font-body);
}

.yuv-app-content .panel .body .input input:disabled {
    background-color: var(--panel-background);
}

.yuv-app-content .panel .body .success input {
    color: var(--color-success);
}

.yuv-app-content .panel .body .error input {
    color: var(--color-error);
}

.yuv-app-content .panel .body .table {
    margin-left: var(--app-pane-padding);
    margin-top: var(--app-pane-padding);
    margin-right: var(--app-pane-padding);
    margin-bottom: var(--app-pane-padding);
}

.yuv-app-content .panel .body .table table {
    border-collapse: collapse;
    width: 100%;
}

.yuv-app-content .panel .body .table td, .yuv-app-content .panel .body .table th {
    border: 1px solid var(--panel-divider-color);
    text-align: center;
    padding: calc(var(--app-pane-padding) / 2);
}

.yuv-app-content .panel .body .table tr:nth-child(even) {
    background-color: var(--main-background);
}

.yuv-app-content .panel .body .table .pointer {
    cursor: pointer;
}

.yuv-app-content .panel .body .divider {
    border-bottom: 1px solid var(--panel-divider-color);
    margin-left: var(--app-pane-padding);
    margin-right: var(--app-pane-padding);
}

.yuv-app-content .panel .body .info {
    align-items: flex-start;
    margin-top: var(--app-pane-padding);
    margin-left: var(--app-pane-padding);
}

.yuv-app-content .popup {
    color: var(--text-color-caption);
    margin: calc(var(--app-pane-padding) * 10) auto;
    width: 40%;
    position: relative;
}

.yuv-app-content .popup .header {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: var(--app-pane-padding);
    border-bottom: 1px solid var(--panel-divider-color);
    background-color: var(--panel-background-grey);
    font-weight: var(--font-weight-bold);
}

.yuv-app-content .popup .body {
    background-color: var(--panel-background);
    display: grid;
}

.yuv-app-content .popup .body .error {
    color: var(--color-error);
}

.yuv-app-content .popup .body .input {
    margin-right: var(--app-pane-padding);
    margin-left: var(--app-pane-padding);
    font-size: var(--font-body);
}

.yuv-app-content .popup .body .info {
    align-items: flex-start;
    margin-top: var(--app-pane-padding);
    margin-left: var(--app-pane-padding);
}

.yuv-app-content .popup .button {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    margin-left: var(--app-pane-padding);
    margin-bottom: var(--app-pane-padding);
    margin-top: var(--app-pane-padding);
}

.yuv-app-content .popup .pointer {
    cursor: pointer;
}

.yuv-app-content .overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 250ms;
    visibility: hidden;
    opacity: 0;
}

.yuv-app-content .overlay:target {
    visibility: visible;
    opacity: 1;
}