@import "./scss/base";

@import "../assets/fonts/STCForward/style-sheet.scss";

// @import "./fonts/STCForward/style-sheet.scss";

body {
  font-family: "STCForward-Regular" !important;
  background-color: #ffff;
  margin: 0;
}
// Define variables for grid columns and gutter widths
$grid-columns: 12;
$grid-gutter-width: 10px;


input {
  border: none;
  outline: none;
}
.justify-content-end {
  justify-content: flex-end;
}
.justify-content-center {
  justify-content: center;
}
.justify-content-start {
  justify-content: start;
}

.m-5 {
  margin: 1.25rem;
}

.d-flex {
  display: flex;
}

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

.mt-1 {
  margin-top: 1rem;
}

.mt-2 {
  margin-top: 2rem;
}

.mt-3 {
  margin-top: 3rem;
}

.mt-4 {
  margin-top: 4rem;
}

.mt-5 {
  margin-top: 5rem;
}

.mb-1 {
  margin-bottom: 1rem;
}

.mb-2 {
  margin-bottom: 1rem;
}

.mb-3 {
  margin-bottom: 3rem;
}

.mb-4 {
  margin-bottom: 4rem;
}

.mb-5 {
  margin-bottom: 5rem;
}

.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.my-5 {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

.mx-1 {
  margin-left: 0.25rem !important;
  margin-right: 0.25rem !important;
}

.mx-2 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}

.mx-3 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

.mx-4 {
  margin-left: 1.5rem !important;
  margin-right: 1.5rem !important;
}

.mx-5 {
  margin-left: 2rem !important;
  margin-right: 2rem !important;
}

.py-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.py-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.py-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.py-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.py-5 {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}


.w-100 {
  width: 100% !important;
}

.h-100 {
  height: 100% !important;
}

// Define variables for grid breakpoints
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
);

// Define variables for grid columns and gutter widths
$grid-columns: 12;
$grid-gutter-width: 10px;

// Define mixin for generating grid columns
@mixin make-col($size) {
  flex: 0 0 percentage($size / $grid-columns) !important;
  max-width: percentage($size / $grid-columns) !important;
}

// Define mixin for generating grid gutters
@mixin make-gutter() {
  // margin-left: $grid-gutter-width / 2;
  // margin-right: $grid-gutter-width / 2;
}

// Define mixin for generating grid containers
@mixin make-container() {
  width: 100%;
  padding-right: $grid-gutter-width / 2;
  padding-left: $grid-gutter-width / 2;
  margin-right: auto;
  margin-left: auto;

  // Generate media queries for grid breakpoints
  @each $breakpoint, $value in $grid-breakpoints {
    @if $value != 0 {
      @media (min-width: $value) {
        max-width: $value;
      }
    }
  }
}

// Define mixin for generating grid rows
@mixin make-row() {
  display: flex;
  flex-wrap: wrap;
  margin-top: -($grid-gutter-width / 2);
  margin-bottom: -($grid-gutter-width / 2);
}

// Define class for generating grid columns

// Define class for generating grid gutters
.row {
  @include make-row();
  > * {
    @include make-gutter();
  }
}

// Define class for generating grid containers
.container {
  @include make-container();
}

// Define class for generating grid containers with fluid width
.container-fluid {
  width: 100%;
  padding-right: $grid-gutter-width / 2;
  padding-left: $grid-gutter-width / 2;
  margin-right: auto;
  margin-left: auto;
}

::ng-deep .mat-elevation-z8 {
  box-shadow: none !important;
}

// Styles Inputs
::ng-deep {
  .stc-label {
    color: #000000;
    font-weight: 400;
    font-size: 16px;
  }
  .stc-input {
    margin-top: 3px !important;
    .mdc-text-field--filled {
      border-radius: 0px;
    }
    .mat-mdc-form-field-subscript-wrapper {
      display: none;
    }
    .mdc-line-ripple {
      display: none;
    }
    .mdc-text-field--filled {
      border-radius: 0px;
    }

    // .mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-text-field__input{
    //     opacity: 0.0 !important;
    // }
    .mat-mdc-form-field:hover .mat-mdc-form-field-focus-overlay {
      opacity: 0 !important;
    }
    .mat-mdc-form-field.mat-focused .mat-mdc-form-field-focus-overlay {
      opacity: 0 !important;
    }
    .mat-mdc-form-field-focus-overlay {
      background-color: #ffff !important;
    }
    .mat-mdc-form-field-infix {
      min-height: 14px !important;
      padding-top: 8px !important;
      padding-bottom: 8px !important;
    }
  }
  .stc-textarea {
    @extend .stc-input;
    .mat-mdc-form-field-infix {
      padding-bottom: 7px !important;
    }
  }
  .stc-dropdown {
    @extend .stc-input;
    .mat-mdc-select-value {
      width: 98% !important;
    }
    .mat-mdc-select-arrow {
      width: 10px;
      height: 10px;
      border: 3px solid #4f008c;
      transform: rotate(45deg);
      border-radius: 3px;
      border-top: 0;
      border-left: 0;
      margin: 0 8px 4px 0;
      svg {
        display: none;
      }
    }
  }
  mat-label {
    font-size: 15px;
    color: #1d252d;
    opacity: 1;
  }
}

$smBreakpoint: 576px;
$mdBreakpoint: 768px;
$lgBreakpoint: 1024px;
@mixin sm-breakpoint {
  @media only screen and (max-width: $smBreakpoint) {
    @content;
  }
}
@mixin md-breakpoint {
  @media only screen and (min-width: $mdBreakpoint) {
    @content;
  }
}

@mixin lg-breakpoint {
  @media only screen and (min-width: $lgBreakpoint) {
    @content;
  }
}

@for $i from 1 through $grid-columns {
  .col-#{$i} {
    @include make-col($i);
  }
  @include sm-breakpoint {
    .col-sm-#{$i} {
      @include make-col($i);
    }

  }
  @include md-breakpoint {
    .col-md-#{$i} {
      @include make-col($i);
    }
    
  }
  @include lg-breakpoint {
    .col-lg-#{$i} {
      @include make-col($i);
    }
  }


}