@eval proportionalFont org.rstudio.core.client.theme.ThemeFonts.getProportionalFont();
@eval fixedWidthFont org.rstudio.core.client.theme.ThemeFonts.getFixedWidthFont();

.input, .output {
   resize: none;
   font-family: fixedWidthFont;
   font-size: 11px;
   white-space: pre;
   width: 400px;
   height: 200px;
   overflow: auto;
   background-color: white;
   border: 1px solid #888;
   padding: 4px;
}
.output td {
   padding-right: 16px;
}
.inputLabel, .outputLabel {
   margin-bottom: 3px;
}
.outputLabel {
   margin-top: 12px;
}
.header {
   font-weight: bold;
}
.leftPanel {
   position: relative;
   top: -5px;
   margin-right: 10px;
}
.list {
   width: 150px;
}
.nastrings {
   width: 75px;
}
.varname {
   width: 100%;
   margin-bottom: 1.5em;
   border: #cfd2d4 solid 1px;
   font-size: 12px;
   font-family: proportionalFont;
   outline: none;
}
.leftPanel fieldset {
   border: none;
   padding: 0;
   padding-block-end: 0;
   padding-inline-end: 0;
   margin: 0;
}

@external rstudio-themes-dark;
@external rstudio-theme-aware-dialog;
@eval THEME_DARKGREY_INACTIVE org.rstudio.core.client.theme.ThemeColors.darkGreyInactiveBackground;
@eval THEME_DARKGREY_BORDER org.rstudio.core.client.theme.ThemeColors.darkGreyBorder;

.rstudio-themes-dark.rstudio-theme-aware-dialog .input,
.rstudio-themes-dark.rstudio-theme-aware-dialog .output {
   background-color: THEME_DARKGREY_INACTIVE;
   border-color: THEME_DARKGREY_BORDER;
   color: #eee;
}

.rstudio-themes-dark.rstudio-theme-aware-dialog .varname {
   border-color: THEME_DARKGREY_BORDER;
}
