@import "light-theme";
@import "dark-theme";
@import "flex";
@import "~@ng-select/ng-select/themes/default.theme.css";

body, html {
  font-family: 'Roboto', 'Source Sans Pro', 'Poppins', serif;
}

.page-container {
  margin-top: 64px;
  height: 100%;
  overflow: auto;
}

// TOOLBAR
.sub-toolbar {
  height: 48px;

  .title {
    height: 52px;
    font-weight: 900;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0.25px;
    display: flex;
    align-items: center;
  }
}



// END TOOLBAR

// TEXT
.label-consult label {
  height: 8px;
  font-weight: 600;
  font-size: 9px;
  line-height: 8px;
  letter-spacing: 0.25px;
  text-transform: uppercase;
}

.span-consult span {
  height: 18px;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.25px;
}

.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden
}

// END TEXT

// TITLE
.block-title {
  margin-bottom: 10px;

  .title {
    margin: 0;
    height: 24px;
    font-weight: bold;
    font-size: 20px;
    line-height: 25px;
    letter-spacing: 0.25px;
  }

  .icon {
    margin-right: 5px;
  }
}

// END TITLE

// CUSTOM SIZE ICON BOTTOM
.small-icon-button, .medium-icon-button {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  .mat-mdc-button-touch-target {
    width: 24px;
    height: 24px;
  }
}

.small-icon-button > span {
  font-size: 16px;
}
.medium-icon-button > span {
  font-size: 24px;
}

// END CUSTOM SIZE ICON BOTTOM




// BUTTON

.app-container .mat-mdc-button.mat-mdc-button-base,
.app-container .mat-mdc-raised-button.mat-mdc-button-base,
.app-container .mat-mdc-unelevated-button.mat-mdc-button-base,
.app-container .mat-mdc-outlined-button.mat-mdc-button-base {
  height: 32px;
}

.action-button {
  font-size: 14px;
  line-height: 32px;
  width: auto;
  padding: 0 8px 0 8px;
  background-color: $blue-primary !important;
  border-color: $blue-primary !important;
  color: white !important;
}

.action-button, .save-button, .cancel-button, .btn {
  font-weight: 500 !important;
  box-shadow: 0 2px 2px rgba(68, 93, 123, 0.16), inset 0 3px 6px rgba(255, 255, 255, 0.08), inset 0px -3px 6px rgba(68, 93, 123, 0.08);
  border-radius: 6px;
}

.cancel-button {
  background-color: $red-primary !important;
  color: white !important;
  border-color: $red-primary !important;
}

.save-button {
  background-color: $green-primary !important;
  border-color: $green-primary !important;
  color: white !important;
}

.btn-delete {
  color: $red-primary;
}

.btn {
  height: 24px !important;
}

// END BUTTON

// SCROLL BAR
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.light-theme {
  ::-webkit-scrollbar-track {
    background: whitesmoke;
  }
}

.dark-theme {
  ::-webkit-scrollbar-track {
    background: adjust-color($background-lvl2, $lightness: 10%);
  }
}

::-webkit-scrollbar-thumb {
  background: $gray-blue-primary;

  &:hover {
    background: $blue-primary;
  }
}

// END SCROLL BAR

// FORM GROUP
.form-group > mat-label {
  text-transform: uppercase;
  font-size: 9px;
}
.form-group {
  display: flex;
  flex-direction: column;
}

.mat-mdc-header-cell mat-label {
  font-weight: 700;
  letter-spacing: 0.375px;
}
// END FORM GROUP

// NG-SELECT
.ng-select.ng-select-single .ng-select-container {
  height: 25px;
}

.ng-select {
  margin-bottom: 0.9em;
}

.mat-mdc-cell .ng-select {
  padding-bottom: 2px;
  padding-top: 2px;
  margin-bottom: 0;
}

.ng-select .ng-select-container {
  min-height: 25px;
}

.ng-select, .ng-select input {
  font-size: 12px;
}

.ng-select.ng-select-opened > .ng-select-container .ng-arrow {
  border-color: $blue-primary transparent;
}

.ng-select .ng-arrow-wrapper .ng-arrow {
  border-color: $blue-primary transparent transparent;
}

.ng-select .ng-clear-wrapper {
  color: $blue-primary;
}

.ng-dropdown-panel .ng-option {
  font-size: 12px;
  padding: 4px 10px !important;
}

.ng-select:not(.ng-select-focused) .ng-select-container:hover {
  border-color: $blue-primary !important;
}

.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input {
  top: unset;
}

.ng-select:not(.ng-select-focused) .ng-select-container:hover {
  border-color: $blue-primary;
  box-shadow: inset 0 0 0 rgb(0, 0, 0, 0.2), 0 0 0 1px $blue-primary;
}

.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
  display: flex;
  align-items: center;
}

// END NG-SELECT

.clickable {
  cursor: pointer;
}

// THIRD PARTY AUTOCOMPLETE
.thirdParty-name {
  font-weight: 600;
  text-transform: uppercase;
  padding-top: 3px;
  white-space: normal;
  line-height: normal;
}

.thirdParty-address {
  margin: 0;
  font-size: 9px;
  padding-bottom: 3px;
  text-transform: capitalize;
  white-space: normal;
  line-height: normal;
}

// END THIRD PARTY AUTOCOMPLETE

// BUTTON
.primary {
  background: $blue-primary !important;
  color: #FFFFFF !important;
}

.secondary {
  background: $gray-blue-primary !important;
  color: #FFFFFF !important;
}

.accent {
  background: $purple-primary !important;
  color: #FFFFFF !important;
}

.positive {
  background: $green-primary !important;
  color: #FFFFFF !important;
}

.negative {
  background: $red-primary !important;
  color: #FFFFFF !important;
}

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

// END BUTTON

//TABLE
.no-results {
  background: $gray-primary;
  color: white;
}
// END TABLE

// TOOLTIP

.mdc-tooltip__surface {
  max-width: 250px;
  max-height: 100%;
}

.notification-classification-INFO {
  background-color: $notification-color-info;
}
.notification-classification-FEAT {
  background-color: $notification-color-feat;
}

.notification-classification-MAINT {
  background-color: $notification-color-maint;
}

// END TOOLTIP


//.spacer {
//  flex: 1 1 auto;
//}

//.toolbar-spacer {
//  flex: 1 1 auto;
//}
//


//// Striped alt colors for rows in mat-table
//.highlight {
//  background: #f4f4f6 !important;
//}


////Text next to icons
//.icon-text {
//  display: flex !important;
//  align-items: center !important;
//  font-size: 20px !important;
//  margin-bottom: 5px;
//  line-height: 25px;
//  font-style: normal;
//  font-weight: 900;
//}

//.custom-switch {
//  .switch-small:focus {
//    outline: none;
//  }
//}

//.card-header-title-icon {
//  margin-right: 7px;
//}


//textarea {
//  font-size: 12px !important;
//}



//.consult-info-label {
//  height: 8px;
//
//  font-style: normal;
//  font-weight: 600;
//  font-size: 8px;
//  line-height: 8px;
//
//
//  align-items: center;
//  letter-spacing: 0.25px;
//  text-transform: uppercase;
//}

//.consult-info-data {
//  height: 18px;
//
//  font-style: normal;
//  font-weight: normal;
//  font-size: 14px;
//  line-height: 18px;
//
//  align-items: center;
//  letter-spacing: 0.25px;
//}
//


//.home-button button {
//  height: 32px;
//}



//.transparent {
//  color: transparent !important;
//}


//.table-icon {
//  font-size: 16px !important;
//}