/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */

/* Core CSS required for Ionic components to work properly */
@import "~@ionic/angular/css/core.css";

/* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import '~@ionic/angular/css/display.css';

/* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";

ion-modal.information-modal-css,
ion-modal.info-custom-dialog {
  --height: 340px;
  --border-radius: 8px;
  --width:40%;
}

ion-modal.info-custom-dialog-2 {
  padding: 8%;
  --height: auto;
  --border-radius: 10px;

  &.bottom {
    align-items: flex-end;
  }

  .ion-page {
    position: relative;
    display: block;
    contain: content;

    .inner-content {
      max-height: 80vh;
      overflow: auto;
      padding: 10px;
    }
  }
}

@media screen and (max-width: 576px) {
  .custom-dialog {
    --width: 95%;
  }
}

@media only screen and (max-width: 767px) {
  ion-modal.information-modal-css,
  ion-modal.info-custom-dialog,
  ion-modal.custom-dialog {
    --width: 90%;

    .img-info{
      width: 110px;
    }
    .m-img {
      padding: 0px 17px 19px 18px;
      height: 88%;
    }
    .btn.btn-cancel, .btn.btn-confirm{
      width: 100px;
    }
  }
}

.my-custom-class-loading {
  --background: transparent;
  --backdrop-opacity: 0.8;
  --ion-backdrop-color: white;

  .loading-wrapper {
    box-shadow: none !important;
  }
}

ion-modal {
  --border-radius: 10px;

  ionic-selectable-modal {
    ion-item{
      ion-label{
        white-space: normal!important;
      }
    }
    ion-toolbar {
      border-bottom: 1px solid lightgray;
      ion-buttons {
        width: 99%;
        justify-content: right;

        ion-button {
          margin-right: 3px;
          width: 40px;
          -webkit-border-radius: 3px;
          -moz-border-radius: 3px;
          border-radius: 3px;
          cursor: pointer;

          &:active{
            cursor:progress;
          }

          span {
            display: none;
          }

          &:after {
            font-family: "Material Icons";
            content: "\e5cd";
            font-size: 25px !important;
            position: absolute;
            top: 3px;
            right: 8px;
          }
        }
      }
    }

    .searchbar-input-container {
      --box-shadow: none;
    }
  }

  &#dd-tooltip-modal{
    &::part(handle) {
      top: 30px;
      height: 3px;
    }
  }
}