$variable-prefix: bs-;

$white: #ffffff;

$theme-colors: (
        "light": #d7e1dc,
        "dark": #1f2327,
        "primary": #3a7ddd,
        "secondary": #45393a,
        "info": #027980,
        "success": #019a56,
        "warning": #ffc107,
        "danger": #ee1200,
        "background-1": $white,
        "background-2": #e9ecef,
        "text-1": #000,
        "text-3": #495057,
        "shadow": #2125291a,
);

$font-size-base: 0.875rem;

$h1-font-size: $font-size-base * 2;
$h2-font-size: $font-size-base * 1.75;
$h3-font-size: $font-size-base * 1.5;
$h4-font-size: $font-size-base * 1.25;
$h5-font-size: $font-size-base;
$h6-font-size: $font-size-base;

@import "breakpoints";

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";

$body-color: $gray-700;

@import "bootstrap/scss/mixins";
:root {
  @each $color, $value in $colors {
    --#{$variable-prefix}#{$color}: #{$value};
  }

  @each $color, $value in $theme-colors {
    --#{$variable-prefix}#{$color}: #{$value};
  }

  @each $color, $value in $grays {
    --#{$variable-prefix}gray-#{$color}: #{$value};
  }

  @each $bp, $value in $grid-breakpoints {
    --#{$variable-prefix}breakpoint-#{$bp}: #{$value};
  }

  --#{$variable-prefix}font-family-sans-serif: #{inspect($font-family-sans-serif)};
  --#{$variable-prefix}font-family-monospace: #{inspect($font-family-monospace)};
}

@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/code";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/button-group";
@import "bootstrap/scss/input-group";
@import "bootstrap/scss/custom-forms";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/card";
@import "bootstrap/scss/breadcrumb";
@import "bootstrap/scss/pagination";
@import "bootstrap/scss/badge";
@import "bootstrap/scss/jumbotron";
@import "bootstrap/scss/alert";
@import "bootstrap/scss/progress";
@import "bootstrap/scss/media";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/close";
@import "bootstrap/scss/toasts";
@import "bootstrap/scss/modal";
@import "bootstrap/scss/tooltip";
@import "bootstrap/scss/popover";
@import "bootstrap/scss/carousel";
@import "bootstrap/scss/spinners";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/print";

@import "card";
@import "forms";
@import "tags";
@import "dropdown";
@import "label-fonts";
@import "masonry";

#root, body, html {
  height: 100%;
}

body {
  overflow-y: scroll;
  opacity: 1 !important;
}

.main {
  background-color: var(--bs-gray-300);
}

.content {
  padding: 1.5rem 1.5rem .75rem;
  flex: 1;
  width: 100vw;
  max-width: 100vw;
  direction: ltr
}

@media (min-width: map-get($grid-breakpoints, md)) {
  .content {
    width: auto;
    max-width: auto
  }
}

@media (min-width: map-get($grid-breakpoints, lg)) {
  .content {
    padding: 2.5rem 2.5rem 1rem
  }
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  color: map-get($theme-colors, text-1);
}

.table > :not(caption) > * > * {
  padding: .75rem;
  background-color: var(--bs-table-bg);
  background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg));
  border-bottom-width: 1px !important;
}


@media (min-width: map-get($grid-breakpoints, xl)) {
  .main.expanded {
    .col-xl-12-ex {
      flex: 0 0 100% !important;
      max-width: 100% !important;
    }

    .col-xl-9-ex {
      flex: 0 0 75% !important;
      max-width: 75% !important;
    }

    .d-xl-block-ex {
      display: block !important;
    }
  }
}

@media (min-width: map-get($grid-breakpoints, lg)) {
  .main.expanded {
    .col-lg-12-ex {
      flex: 0 0 100% !important;
      max-width: 100% !important;
    }

    .col-lg-9-ex {
      flex: 0 0 75% !important;
      max-width: 75% !important;
    }

    .d-lg-block-ex {
      display: block !important;
    }
  }
}