How to show md-toast with background color

Question

I am trying to create md-toast with having some background color to toast using angular-material. I using answers from this SO question, I created this codepen, but it is showing some unwanted background to toast as well.

HTML:

<div ng-controller="AppCtrl" layout-fill="" layout="column" class="inset toastdemoBasicUsage" ng-cloak="" ng-app="MyApp">
  <p>
    Toast is not properly working with theme defined in CSS.
    <br>
  </p>

  <div layout="row" layout-sm="column" layout-align="space-around">
    <md-button ng-click="showSimpleToast()">
      Toast
    </md-button>
  </div>    
</div>

CSS:

md-toast.md-success-toast-theme {
    background-color: green;
}

md-toast.md-error-toast-theme {
    background-color: maroon;
    position: 'top right'
}

md-toast {
    height: 40px;
    width: 50px;
    margin-left: auto;
    margin-right: auto;
    left: 0; right: 0;
    top:10px;
}

JS:

angular.module('MyApp',['ngMaterial', 'ngMessages'])
.controller('AppCtrl', function($scope, $mdToast, $document) {
  $scope.showSimpleToast = function() {
    $mdToast.show(
      $mdToast.simple()
        .textContent('Simple lala Toast!')
      .theme('success-toast')
        .hideDelay(3000)
    );
  };
})

Answer 1

.toastClass(string) Sets a class on the toast element

Define css:

.md-toast-done .md-toast-content{
    background: #004f75 !important;
}

.md-toast-error .md-toast-content{
    background: rgb(193, 30, 23) !important;
}

And define toast:

    $mdToast.show(
        $mdToast.simple()
            .toastClass('md-toast-error')
            .textContent(stringValue)
            .position('bottom right')
            .hideDelay(3000)
    );