.unselectable {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

// Display

.hidden {
  display: none;
  overflow: hidden;
}

.hidden-xs-down {
  @include media-breakpoint-down(xs) {
    display: none !important;
  }
}

.hidden-xs-up {
  @include media-breakpoint-up(sm) {
    display: none !important;
  }
}

.hidden-sm-down {
  @include media-breakpoint-down(sm) {
    display: none !important;
  }
}

.hidden-md-down {
  @include media-breakpoint-down(md) {
    display: none !important;
  }
}

.hidden-lg-down {
  @include media-breakpoint-down(lg) {
    display: none !important;
  }
}

.hidden-sm-up {
  @include media-breakpoint-up(sm) {
    display: none !important;
  }
}

.hidden-md-up {
  @include media-breakpoint-up(md) {
    display: none !important;
  }
}

.hidden-lg-up {
  @include media-breakpoint-up(lg) {
    display: none !important;
  }
}

.show-it-after-page-loads {
  display: none;
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.inline, .inline-block, .d-inline-block {
  display: inline-block;
}

.d-block {
  display: block;
}

// With bootstrap 4.3, this is .d-none
.displayNone {
  display: none !important;
}

// With bootstrap 4.3, this is .d-block
.display {
  display: block !important;
}

// Position

.relative {
  position: relative;
}

.absolute {
  position: absolute !important;
}

.top-0 {
  top: 0 !important;
}

.right-0 {
  right: 0 !important;
}

.z-0 {
  z-index: 0 !important;
}

// Grid

.grid {
  display: grid;
}

.grid-cols-2 {
  grid-template-columns: 1fr 1fr;
}

.grid-cols-2-auto {
  grid-template-columns: auto auto;
}

.grid-cols-3-auto {
  grid-template-columns: auto auto auto;
}

.grid-cols-2-auto-fr {
  grid-template-columns: auto 1fr;
}

.grid-cols-2-fr-auto {
  grid-template-columns: 1fr auto;
}

// Grid helpers
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: $grid-gutter-width; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: $grid-gutter-width; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: $grid-gutter-width; }

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .grid-4 { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
}


// Colors

@include bg-variant('.bg-black', $black);

.inactive {
  color: #2B6893 !important;
}

.white {
  color: $white;
}

.teal {
  color: $teal;
}

.purple {
  color: $purple;
}

.border-color-blue-dark {
  border-color: $blue-dark;
}

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

.white {
  color: $white;
}

.blue {
  color: $blue;
}

.red {
  color: $red;
}

.petrol {
  color: $petrol;
}

.black {
  color: $black;
}

.green {
  color: $green;
}

.gray {
  color: $gray;
}

.gray-light {
  color: $gray-light;
}

.gray-lightest {
  color: $gray-lightest;
}

.gray-darker {
  color: $gray-darker;
}



.rounded-br {
  border-bottom-right-radius: $border-radius;
}

.rounded-bl {
  border-bottom-left-radius: $border-radius;
}




.wrap {
  @include ellipsis;
}

.break-spaces {
  white-space: break-spaces;
  word-break: break-word;
}

.nowrap {
  white-space: nowrap;
}

.pre-wrap {
  white-space: pre-wrap;
}

.centered {
  text-align: center;
}

.clear {
  clear: both;
  display: block;
}


// color variables

.color-blue-dark {
  color: $blue-dark;
}

.color-orange {
  color: $orange;
}

.color-blue {
  color: $blue;
}

.color-gray-dark {
  color: $gray-dark;
}

.color-gray-darker {
  color: $gray-darker;
}

.color-gray-light {
  color: $gray-light;
}

.color-gray-lighter {
  color: $gray-lighter;
}

.color-green {
  color: $green;
}

.color-red {
  color: $red;
}

.color-yellow {
  color: $yellow;
}

.color-black {
  color: $black;
}

.text-blue {
  color: $blue;
}

.text-petrol {
  color: $petrol;
}

.text-red {
  color: $red !important;
}

.text-white {
  color: $white;
}

.text-gray {
  color: $gray;
}

// Background color variables

.bg-card-gray {
  background-color: $card-bg-gray;
}


.nobg {
  background: none !important;
}

.bg-petrol {
  background-color: $petrol;
}

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

.bg-actionbar {
  background-color: $actionbar;
}

.bg-petrol-dark {
  background-color: $petrol-dark;
}

.bg-translucent {
  background-color: $translucent;
}

.bg-gray-darkest {
  background-color: $gray-darkest;
}

.bg-gray-darker {
  background-color: $gray-darker;
}

.bg-gray-dark {
  background-color: $gray-dark;
}

.bg-gray {
  background-color: $gray;
}

.bg-gray-light {
  background-color: $gray-light;
}

.bg-gray-lighter {
  background-color: $gray-lighter;
}

.bg-gray-lightest {
  background-color: $gray-lightest;
}

.bg-blue {
  background-color: $blue;
}

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

.bg-blue-dark {
  background-color: $blue-dark;
}

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

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

.bg-teal {
  background-color: $teal;
}

.bg-teal-darker {
  background-color: $teal-darker;
}

.bg-teal-darkest {
  background-color: $teal-darkest;
}

.bg-gray-900 {
  background-color: $gray-900;
}

.bg-gray-800 {
  background-color: $gray-800;
}

.bg-gray-700 {
  background-color: $gray-700;
}

.bg-gray-600 {
  background-color: $gray-600;
}

.bg-gray-500 {
  background-color: $gray-500;
}

.bg-gray-400 {
  background-color: $gray-400;
}

.bg-gray-300 {
  background-color: $gray-300;
}

.bg-gray-200 {
  background-color: $gray-200;
}

.bg-gray-100 {
  background-color: $gray-100;
}

// Fonts and Typography

.text-overflow-ellipsis {
  text-overflow: ellipsis;
}

.text-nonbreak {
  word-break: normal !important;
}

.text-break {
  word-break: break-all !important;
}

.break-word {
  word-break: break-word !important;
}

// Flex box helper classes

.display-flex,
.flex {
  display: flex;
}

.inline-flex,
.display-inlineflex {
  display: inline-flex;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.items-start {
  align-items: flex-start;
}

.items-center,
.align-items-center {
  align-items: center;
}

.items-end,
.align-items-flex-end {
  align-items: end;
}

.items-baseline,
.align-items-baseline {
  align-items: baseline;
}

.justify-between, 
.justify-content {
  justify-content: space-between;
}

.justify-center,
.justify-content-center {
  justify-content: center;
}

.justify-end,
.flex-justify-content-end {
  justify-content: end;
}

.flex-center {
  display: flex;
  justify-content: center;
}

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.flex-grow-last-child-1 {
  &:last-child {
    flex-grow: 1;
  }
}

.self-start {
  align-self: start;
}

.self-end {
  align-self: end;
}

.self-center {
  align-self: center;
}

// Borders

.border-white {
  border: $border-width solid $white;
}

.border-blue {
  border: $border-width solid $blue;
}

.border-green {
  border: $border-width solid $green;
}

.border-red {
  border: $border-width solid $red;
}

.border-top {
  border-top: $border-width solid $border-color;
}

.border-right {
  border-right: $border-width solid $border-color;
}

.border-bottom {
  border-bottom: $border-width solid $border-color;
}

.border-left {
  border-left: $border-width solid $border-color;
}

.rounded-l-4 {
  border-top-left-radius:4px;
  border-bottom-left-radius:4px;
}

.rounded {
  @include border-radius($border-radius);
}

.non-clickable {
  pointer-events: none;
}

.half-width {
  width: 50%;
}

.margin-auto {
  margin: auto;
}

.vertical-align-middle {
  vertical-align: middle;
}

.vertical-align-top {
  vertical-align: top;
}

// Links
.white-link {
  color: $white;

  @include hover-focus {
    color: $blue;
  }
}

.c-pointer {
  cursor: pointer;
}

.flex-1 {
  flex: 1 !important;
}

.rounded-circle {
  width: $spacer;
  height: $spacer;
  border-radius: 50%;
  text-align: center;
}

// This class have been removed in favor of collapse.show
// Still some javascript lib rely on the old class name
//  Mainly React-Boostrap
.collapse.in {
  display: block;
}

.overflow-y-scroll {
  overflow-y: scroll !important;
  max-height: 100%;
}
/* IE10+ CSS styles */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .overflow-y-scroll {
    overflow-y: auto !important;
    padding-right: 18px;
  }
}