.column {
    padding-left: 0;
    padding-right: 0;
}

.gird-no-padding {
    --ion-grid-padding:  0px;    
}

/*
if you want to add it outside the ion-content to allow 
ion-refresher to working perfectly inside ion-content
*/
.floating {
    position: fixed;
    top: 1.2cm;
    left: 0;
    right: 0;
    z-index: 10;
    background: white;
}

.no-padding-top{
    --padding-top: 0 !important;
}
.button {
    padding: 0;
    margin: 0;
    height: 1.1cm;
    background-color: rgba(255, 255, 255, 0);
    border-bottom-width: 0.02cm;
    border-bottom-style: solid;
    color: var(--ion-color-primary);
    text-align: center;
    padding-top: .35cm;
    font-size: 0.37cm;
}


.normal {
    color:var(--ion-color-primary);
    background-color: rgba(255, 255, 255, 0);
    border-bottom-color: var(--ion-color-medium);
}

.pressed {
    color:var(--ion-color-secondary);
    background-color: rgba(255, 255, 255, 0);
    border-bottom-color: var(--ion-color-secondary);
    font-weight: bold;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    -webkit-animation-name: ripple;
    animation-name: ripple;
    -webkit-animation-duration: 07s;
    animation-duration: 0.7s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-iteration-count: 1;

    /*
    
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    */
}



.ripple-effect {
    -webkit-animation-name: ripple;
    animation-name: ripple;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

@-webkit-keyframes ripple {
    0% {
        background-color: rgba(209,32,38,0.5);
        color: white;
    }

    100% {
        background-color: rgba(255, 255, 255, 0);
        color: var(--ion-color-secondary);
    }
}

@keyframes ripple {
    0% {
        background-color: rgba(209,32,38,0.5);
        color: white;
    }
    
    100% {
        background-color: rgba(255, 255, 255, 0);
        color:var(--ion-color-secondary);
    }
}
