/* dojo select */
.claro .dijitSelect{
  background-color: #222;
}
.claro .dijitSelectHover,
.claro .dijitSelectFocused{
  border: 1px solid #999;
}
.claro .dijitSelect .dijitArrowButton {
  background-color: #222;
}
.claro .dijitMenu{
  border:1px solid #999;
}
.claro .dijitMenu .dijitMenuItem{
  color: white;
}
.claro .dijitMenu .dijitMenuItem,
.claro .dijitMenu .dijitMenuItem td{
  background-color: #333;
  border: 1px solid #333;
}
.claro .dijitMenu .dijitMenuItem:hover,
.claro .dijitMenu .dijitMenuItem:hover td
 {
  background: #666;
  background: -ms-linear-gradient(#666, #666);
  background: linear-gradient(#666, #666);
}
.claro .dijitMenu .dijitMenuItemSelected,
.claro .dijitMenu .dijitMenuItemSelected td{
  background-color: #666;
}
.claro .dijitMenu .dijitMenuItemSelected td{
  color: white;
}
.claro .dijitMenuItem .esriTravelModesTypeName{
  color: #fff;
}
.claro .dijitMenuItem .dijitMenuItemSelected td:hover .esriTravelModesTypeName{
  color: #666;
}

/*dojo dialog box*/
.claro .dijitDialog {
  background-color: #222;
}
.claro .dijitDialogTitle {
    color: #fff;
}
.claro .dijitDialogTitleBar {
    border: 0px solid #222;
    border-bottom: 1px solid #000;
    background-color: #222;
    background-image: none;
}
.claro .dijitTooltipContainer,
.claro .dijitDialogPaneContent {
    background-color: #222;
    border: 0px solid #222;
    color: #fff;
}
.claro .dijitDialogPaneContent  {
  float: right;
}

/*dojo text box*/
.claro .dijitTextBox {
  border-color: #999;
  background-color: #222;
}
.claro .dijitTextBox, .claro .dijitInputInner {
  color: #fff;
}
.claro .dijitTextBoxFocused {
  background-color: #222;
  border: 1px solid #fff;
}
.claro .dijitTextBoxHover {
  background-color: #666;
}
.claro .dijitTextBoxFocused .dijitInputContainer {
  background: #222;
}

/*filter-dynamic-search*/
.claro .jimu-list-multiple-select .searchKeyInput .dijitTextBox{
  border: none!important;
  background: none!important;
  border-bottom: 1px solid #bab3b3!important;
}
.claro .jimu-list-multiple-select .searchKeyInput .dijitTextBoxHover{
  border-bottom: 1px solid #24B5CC !important;
}
.claro .jimu-list-multiple-select .searchKeyInput .dijitTextBoxFocused{
  border-bottom: 1px solid #24B5CC !important;
  box-shadow: none;
  /* background-image: none; */
}

.claro .jimu-list-multiple-select .searchKeyInput .dijitTextBoxFocused .dijitInputContainer {
  background: none!important;
}
/*tab*/
.claro .dijitTab{
  background: #222;
  color: white;
}
.claro .dijitTabContainerTop-tabs .dijitTabChecked{
  background: #333;
}
.claro .dijitTabContainerTop-dijitContentPane{
  background: #222;
  color: white;
}

/*Tooltip Container*/
.claro .dijitTooltipContainer {
  background: #222;
  color: white;
  border-color: #999;
}

.claro .dijitColorPalette{
  background: #222;
}

/*ComboBox*/
.claro .dijitComboBox .dijitButtonNode,
.claro .dijitSelect .dijitArrowButton {
  background-image: none;
  background-color: transparent;
}

.claro .dijitComboBox .dijitArrowButtonContainer,
.claro .dijitSelect .dijitArrowButtonContainer {
  border-width: 0 !important;
}

.claro .dijitSelect .dijitButtonContents {
  border-style: none;
}

/*Button*/

.claro .dijitButton .dijitButtonNode {
    border: 0px solid #000000;
    background-image: none;
    background-color: #666;
    padding: 5px 18px 8px 18px;
    font-size: 14px;
}

.claro .dijitButtonHover  .dijitButtonNode {
  background-color: #333;
}

/*tree*/
.claro .dijitTreeRow{
  background-color: #333;
  color: white;
}

.claro .dijitTabPaneWrapper, .claro .dijitToolbar{
  background-color: #222;
}

.claro .dijitToolbar .dijitToggleButtonChecked .dijitButtonNode{
  background-color: #666;
}
.claro .dijitDropDownButton .dijitButtonNode,
.claro .dijitButton .dijitButtonNode,
.claro .dijitToggleButton .dijitButtonNode{
  color: white;
}
.claro .dijitButtonDisabled .dijitButtonNode{
  color: #bbb;
}

.claro .dgrid-header, .dgrid-header-row, .dgrid-footer {
  background-color: #222;
}

.claro .dijitTooltipConnector{
  background-image: url(images/tooltip_dark.png);
}

.claro .dojoxCheckedMultiSelectFocused .dojoxCheckedMultiSelectWrapper {
  border: 1px solid #b5bcc7;
}

.claro .dojoxCheckedMultiSelect .dojoxCheckedMultiSelectWrapper {
  background-color: #222;
}

.claro .dojoxCheckedMultiSelectHover .dojoxCheckedMultiSelectWrapper {
  background-color: #666;
}

.claro .dijitDialogPaneActionBar {
  background-color: #222;
}