/* You can add global styles to this file, and also import other style files */
@import "assets/scss/variable";
@import "assets/scss/mixin.scss";

@import "assets/scss/custom-theme.scss";

html,
body {
  height: 100%;
}

a {
  color: mat-color($dashboard-accent, 900);
  text-decoration: none;
  cursor: pointer;

  &:hover,
  &:active,
  &:focus {
    color: mat-color($dashboard-accent, 700);
  }
}

code {
  width: 100%;
  padding: 0.2em 0.5em;
  background-color: $grey-color;
}

.text-primary {
  color: mat-color($dashboard-primary, 900);
}

.text-accent {
  color: mat-color($dashboard-accent, 700);
}

.text-warn {
  color: mat-color($dashboard-warn, 700);
}

.mat-icon {
  &.mat-icon-2x {
    font-size: 48px;
    width: 48px;
    height: 48px;
  }
}

mat-progress-bar {
  background: #fff;
}

.bread-crumb {
  margin-bottom: 10px;
}

.text-right {
  text-align: right;
  width: 100%;
}

.alert {
  margin-bottom: 10px;
  border: red 1px solid;
}

.mat-tooltip {
  font-size: 0.75rem;
}

.mat-content {
  width: 100%;
}

.repository-tooltip {
  white-space: pre-line;
}

@media (max-width: $breakpoint-md) {
  .mat-tab-labels {
    justify-content: center;
  }
}

.mat-toolbar {
  background: none;

  @media (max-width: $breakpoint-xs) {
    background: $background-black-color;
  }
}

.footer {
  background: none;
  font-size: 14px;

  &__button {
    font-weight: lighter;
    display: flex;
    align-items: center;
    padding: 4px 16px;
    cursor: pointer;

    @media (max-width: $breakpoint-xs) {
      font-size: 12px;
      padding: 4px 6px;
    }
  }

  @media (max-width: $breakpoint-xs) {
    font-size: 12px;
  }
}

.cdk-overlay-pane .header-menu {
  min-width: 100vw;
  border-radius: 0px;
}

.mat-drawer-inner-container {
  overflow: hidden;
}

.mat-card-header {
  .mat-card-header-text {
    margin-top: -9px;
    margin-left: 16px;
    margin-right: 16px;
  }
}

@media (max-width: $breakpoint-lg) {
  .mat-toolbar-row {
    margin-top: -12px;
    height: auto !important;
  }
}

/* fallback */
@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2)
    format("woff2");
}
/* Angular Material Icon CSS. */
@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2)
    format("woff2");
}

@font-face {
  font-family: "Material Icons Outlined";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2)
    format("woff2");
}

.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.material-icons-outlined {
  font-family: "Material Icons Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.blue-color {
  color: $blue-color !important;
}

.green-color {
  color: $green-color;
}

.white-color {
  color: white;
}

.orange-color {
  color: $orange-color;
}

.red-color {
  color: $red-color;
}

.purple-color {
  color: $purple-color;
}

.dark-orange-color {
  color: $orange-3-color !important;
}

.light-green-color {
  color: $green-2-color;
}

.grey-color {
  color: darkgrey;
}
