ashishgkwd/ngx-mat-daterange-picker

/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

.demo-main {
    margin: 5% 0 0 10%;
}

.demo-box {
    padding: 2% 0 2% 0;
    color: orangered;
    font-family: sans-serif;
}

.demo-rule {
    margin-right: 10%;
}

.ngx-mat-drp-menu .ngx-mat-drp-presets-list li {
    margin: 5px 0 5px 0;
    padding: 4%;
    cursor: pointer;
    background: #fafafa;
    color: #53b53f;
    user-select: none;
}

@media only screen and (max-width:478px){
    .ngx-mat-drp-calendar-container {
        display: inline!important;
    }
    .ngx-mat-drp-calendar-item{
        float: left!important;
        min-width: 100%!important;
        padding: 0!important;
    }
    ngx-mat-drp-picker-overlay{
        left: 8px!important;
        right: 8px!important;
        overflow: auto!important;
    }
    .cdk-overlay-pane{
      right: 8px!important;
      overflow: auto!important;
      display: block!important;
      top:8px!important;
      padding: 1em!important;
    }
}
  
@media only screen and (max-width: 768px) and (min-width: 479px){
    .ngx-mat-drp-calendar-container{
      display: block!important;
      min-width: 250px!important;
  }
    ngx-mat-drp-picker-overlay{
        right: 8px!important;
        overflow: auto!important;
    }
  
    .ngx-mat-drp-calendar-item{
        float: left!important;
        min-width: 210!important;
        padding: 0!important;
    }
    .cdk-overlay-pane{
      left: 8px!important;
      right: 8px!important;
      overflow: auto!important;
      display: block!important;
      top:8px!important;
      padding: 1em!important;
  }
}

@media only screen and (min-width:689px){
    .cdk-overlay-pane{
    min-height: max-content!important;
  }
}