@import "./Common/Constants";

html {
  font-family: @FabricFont;
}

body {
  font-family: @FabricFont;
  background-color: #f5f5f5;
}

a {
  color: @FabricAccentMedium;
  text-decoration: none;
}

a:hover,
a:focus {
  color: @FabricAccentMediumHigh;
  text-decoration: underline;
}

.splashLoaderContainer {
  background-color: #f5f5f5;
}

#divExplorer {
  background-color: #f5f5f5;
  padding: @FabricBoxMargin;
}

.resourceTreeAndTabs {
  border-radius: 0px;
  box-shadow: @FabricBoxBorderShadow;
  margin-top: 0px;
  margin-bottom: 0px;
  background-color: #ffffff;
}

.tabsManagerContainer {
  background-color: #ffffff
}

.nav-tabs-margin {
  padding-top: 5px;
  background-color: #ffffff
}

.commandBarContainer {
  background-color: #ffffff;
  border-radius: @FabricBoxBorderRadius @FabricBoxBorderRadius 0px 0px;
  box-shadow: @FabricBoxBorderShadow;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 2px;
  padding: 0px;
  height: 40px;
}

.dividerContainer {
  padding: @SmallSpace 0px @SmallSpace 0px;
  height: @FabricCommandBarButtonHeight;
  .flex-display();

  span {
    border-left: @ButtonBorderWidth solid @BaseMedium;
    margin: 0 10px 0 10px;
  }
}


.nav-tabs>li>.tabNavContentContainer>.tab_Content:hover {
  border-bottom: 2px solid #e0e0e0;
}

.nav-tabs>li.active>.tabNavContentContainer>.tab_Content,
.nav-tabs>li.active>.tabNavContentContainer>.tab_Content:hover {
  border-bottom: 2px solid @FabricAccentMedium;
}

.nav-tabs>li.active>.tabNavContentContainer>.tab_Content>.contentWrapper>.tabNavText {
  border-bottom: 0px none transparent;
}

.tabNavContentContainer {
  padding: @SmallSpace 0px @SmallSpace 0px;

  &:hover {
    background-color: transparent;
    border-color: transparent;
  }

  .tab_Content {
    border-right: 0px none transparent;
    margin: 0px @SmallSpace 0px @SmallSpace;
    width: calc(@TabsWidth - (@SmallSpace * 2));
    padding-bottom: @SmallSpace;

    .contentWrapper {
        .statusIconContainer {
          margin-left: 0px;
        }
      }

    .tabIconSection {
      .cancelButton {
        padding: 0px 0px 0px @SmallSpace;

        &:hover {
          background-color: transparent;
        }

        &:focus {
          background-color: transparent;
        }

        &:active {
          background-color: transparent;
        }
      }
    }
  }
}


.resourceTree {
  padding: 12px;
}

.accordion {
  .accordionItemContainer {
    .accordionItemHeader {
      border-radius: 4px;
    }
  }
}

.treeComponent {
  .nodeItem {
    &:focus {
      outline: 2px @FabricAccentMedium;
    }

    .treeNodeHeader {
      padding: 5px 5px;
      border-radius: 4px;

      &:hover {
        background-color: @FabricAccentLight;

        .treeMenuEllipsis {
          opacity: 1;
        }
      }

      &.showingMenu {
        background-color: #eee;
      }
    }

    .selected {
      &>.treeNodeHeader {
        background-color: @FabricAccentExtra;
      }
    }
  }
}


.dataExplorerErrorConsoleContainer {
  border-radius:  0px 0px @FabricBoxBorderRadius @FabricBoxBorderRadius;
  box-shadow: @FabricBoxBorderShadow;
  margin-top: 0px;
  width: auto;
  align-self: auto;
}



.filterbtnstyle {
  background: #fff;
  color: #000;
  border: solid 1px #d1d1d1;
  border-radius: 4px;
}

.filterbtnstyle:hover {
  background: @FabricAccentLight;
  color: #000;
  border: solid 1px #d1d1d1;
}

.filterbtnstyle:active {
  background: @FabricAccentLight;
  color: #000;
  border: solid 1px #d1d1d1;
}

.filterbtnstyle:focus {
  background: #fff;
  color: #000;
  border: solid 1px #d1d1d1;
}


.gridRowSelected .tabdocumentsGridElement:hover {
  background-color: @FabricAccentLight !important;
}


.refreshcol {
  filter: brightness(0) saturate(100%);
}

.refreshcol1 {
  filter: brightness(0) saturate(100%);
}

.fileImportImg img {
  filter: brightness(0) saturate(100%);
}