src/global.scss
/*
 * 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";

@import "~leaflet/dist/leaflet.css";
@import "~leaflet.markercluster/dist/MarkerCluster.css";
@import "~leaflet.markercluster/dist/MarkerCluster.Default.css";

ion-content {
    --ion-padding: 0px;
}

ion-tab-button {
    --color-focused: var(--ion-color-secondary);
    --color-selected: var(--ion-color-secondary);
}

ion-segment-button {
    --indicator-color: rgb(61, 194, 255, 0.5);
}

ion-item-divider {
    --padding-top: 5px;
    --padding-bottom: 5px;
    font-variant: small-caps;
}

.toastClass {
    text-align: center;
}

.alertClass {
    text-align: center;
}

.alertFirstTime {
    --max-height: calc(100%);
    text-align: justify;

    .alert-message {
        max-height: calc(100%);
    }
}


.alertLong {
    .alert-radio-label.sc-ion-alert-md {
        font-size: small;
    }
}

.measuresTitle {
    background-color: var(--custom-background);
    border-radius: 4px;
    padding: 10px 10px 0px 10px;
}

.leafletButtonCustom {
    background-color: #fff;
    border-radius: 4px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    display: block;
    text-align: center;
    text-decoration: none;
    color: black;
    background-size: 26px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
  }
