$breakpoint-col-xs: 520.98px;

$breakpoint-col-sm-min: 521px;
$breakpoint-col-sm-max: 767.98px;

$breakpoint-col-md-min: 768px;
$breakpoint-col-md-max: 991.98px;

$breakpoint-col-lg-min: 992px;
$breakpoint-col-lg-max: 1199.98px;

$breakpoint-col-xl: 1200px;




@mixin col-xs{
  @media screen and (max-width: $breakpoint-col-xs){ @content; }
}

@mixin col-sm{
  @media screen and (min-width: $breakpoint-col-sm-min) and (max-width: $breakpoint-col-sm-max){ @content; }
}

@mixin col-md{
  @media screen and (min-width: $breakpoint-col-md-min) and (max-width: $breakpoint-col-md-max){ @content; }
}

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

@mixin col-xl{
  @media screen and (min-width: $breakpoint-col-xl){ @content; }
}










//col-xs
@include col-xs {


//reduce vertical spacing
.ft-component-wrap{
  .mat-form-field {
    margin-bottom: 0;
    .mat-form-field-wrapper {
      padding-bottom: 1.25em;
    }
    .mat-form-field-underline {
      bottom: 1.25em;
    }
  }
  
  .mat-form-field-subscript-wrapper {
    display: block;
  }

}

  

}// end col-xs



// remove large white space on lower viewports
@media screen and (max-width: 600.98px){


  #ft-wrapper{
    margin: 0!important;
  }

}