@external gwt-Label, gwt-TextBox, gwt-RadioButton, suggestPopupMiddleCenter, rstudio-themes-dark, rstudio-theme-aware-dialog, rstudio-ImageButton;

@eval THEME_DARKGREY_MENU_BORDER org.rstudio.core.client.theme.ThemeColors.darkGreyMenuBorder;

.dialog {
   width: 380px;
   margin-bottom: 10px;
   position: relative;
}

.dialogWide {
   width: 425px !important;
}


.dialog label,
.dialog .gwt-Label {
   display: inline-block;
   padding-bottom: 4px;
}

.dialog .horizontalLabel {
   margin-bottom: 0;
   margin-right: 4px;
}

.dialog .horizontalInput {
   margin-right: 7px;
}

.dialog .infoLabel {
   color: #606060;
   font-size: 0.7rem;
   margin-top: 5px;
}

.dialog .inlineInfoLabel {
   margin-left: 6px;
   color: rgb(96,96,96);
}

.dialog .heightAuto {
   color: #606060;
   margin-right: 7px;
}

.lockRatioCheckbox {
	margin-left: 3px;
}

.numericSizeInput {
  width: 55px;
}

.unitsSelectInput {
   width: 43px;
}

.dialog .fullWidth {
   width: 98%;
}

.dialog .fullWidth select {
   width: 100%;
}

.dialog .fullWidthSelect {
   width: 100%;
}

.dialog .fullWidthTable {
   width: 100%;
}

.spaced {
   margin-bottom: 10px;
}

.listBox {
   border: solid 1px #a3a8b2;
   border-radius: 2px;
   height: 22px;
}

.dialog .checkBox  input[type="checkbox"] {
   margin-right: 5px;
}

.dialog .textArea {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   border: 1px solid #c3c5c7;
   border-radius: 4px;
   resize: none;
   width: 100%;
}

.langSuggestionDisplay .suggestPopupMiddleCenter td {
   width: 350px;
}

.linkDialogTabs {
   width: 380px;
   height: 280px;
}

.codeBlockDialogTabs {
   width: 380px;
   height: 320px;
}

.imageDialogTab {
  width: 400px;
}

.imageDialogTabs {
   width: 400px;
   height: 350px;
}

.insertTabsetDialogTabs {
   width: 380px;
   height: 335px;
}

.divDialogTabs {
   width: 380px;
   height: 320px;
}


.alignmentPanel {
  border-style: solid;
  border-width: 1px;
  margin-left: 0;
  margin-top: 4px;
  margin-bottom: 10px;
}

.alignmentPanel .gwt-RadioButton {
  margin-right: 12px;
}

.hrefSelect {
   width: 98%;
}

.popup {
   box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
   border-radius: 4px;
   border: solid 1px #a3a8b2;
   padding: 10px;
   padding-bottom: 4px;
}

.rstudio-themes-dark .popup {
   border: solid 1px THEME_DARKGREY_MENU_BORDER;
}

.popup .rstudio-ImageButton img {
   width: 20px;
   height: 20px;
   padding: 0 5px;
}

.linkLabel {
   margin-right: 12px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.flexTablePreview {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   border: 1px solid #c3c5c7;
   border-radius: 4px;
   resize: none;
   width: 100%;
   padding: 2px;
}

.flexTablePreviewName {
   vertical-align: top;
   font-weight: 600;
   padding-right: 8px;
   padding-bottom: 4px;
}

.flexTablePreviewValue {
   font-weight: 500;
   padding-bottom: 4px;
   max-width: 500px;
}

.disabled label {
   color: rgba(0, 0, 0, 0.6);
}

.rstudio-themes-dark.rstudio-theme-aware-dialog .dialog .infoLabel,
.rstudio-themes-dark.rstudio-theme-aware-dialog .dialog .inlineInfoLabel,
.rstudio-themes-dark.rstudio-theme-aware-dialog .dialog .heightAuto {
   color: #aaa;
}



