.bs-bg-success {
  background-color: green !important;
}

.bs-bg-warning {
  background-color: yellow !important;
}

.bs-bg-danger {
  background-color: red !important;
}

.bs-bg-light {
  background-color: lightgray !important;
}

.bs-bg-jm {
  background-color: #52c9ba !important;
}

.bs-bg-jmj {
  background-color: #f7c179 !important;
}


.ui-dialog-off-canvas .bs-bg-sm-success {
  background-color: green !important;
}

@media screen and (max-width: 576px) {
  .bs-bg-sm-success {
    background-color: green !important;
  }
}

.ui-dialog-off-canvas .bs-bg-sm-warning {
  background-color: yellow !important;
}

@media screen and (max-width: 576px) {
  .bs-bg-sm-warning {
    background-color: yellow !important;
  }
}

.ui-dialog-off-canvas .bs-bg-sm-danger {
  background-color: red !important;
}

@media screen and (max-width: 576px) {
  .bs-bg-sm-danger {
    background-color: red !important;
  }
}

.ui-dialog-off-canvas .bs-bg-sm-light {
  background-color: lightgray !important;
}

@media screen and (max-width: 576px) {
  .bs-bg-sm-light {
    background-color: lightgray !important;
  }
}

.ui-dialog-off-canvas .bs-bg-md-success {
  background-color: green !important;
}

@media (min-width: 576px) and (max-width: 992px) {
  .bs-bg-md-success {
    background-color: green !important;
  }
}

.ui-dialog-off-canvas .bs-bg-md-warning {
  background-color: yellow !important;
}

@media (min-width: 576px) and (max-width: 992px) {
  .bs-bg-md-warning {
    background-color: yellow !important;
  }
}

.ui-dialog-off-canvas .bs-bg-md-danger {
  background-color: red !important;
}

@media (min-width: 576px) and (max-width: 992px) {
  .bs-bg-md-danger {
    background-color: red !important;
  }
}

.ui-dialog-off-canvas .bs-bg-md-light {
  background-color: lightgray !important;
}

@media (min-width: 576px) and (max-width: 992px) {
  .bs-bg-md-light {
    background-color: lightgray !important;
  }
}

.ui-dialog-off-canvas .bs-bg-lg-success {
  background-color: green !important;
}

@media (min-width: 992px) and (max-width: 1200px) {
  .bs-bg-lg-success {
    background-color: green !important;
  }
}

.ui-dialog-off-canvas .bs-bg-lg-warning {
  background-color: yellow !important;
}

@media (min-width: 992px) and (max-width: 1200px) {
  .bs-bg-lg-warning {
    background-color: yellow !important;
  }
}

.ui-dialog-off-canvas .bs-bg-lg-danger {
  background-color: red !important;
}

@media (min-width: 992px) and (max-width: 1200px) {
  .bs-bg-lg-danger {
    background-color: red !important;
  }
}

.ui-dialog-off-canvas .bs-bg-lg-light {
  background-color: lightgray !important;
}

@media (min-width: 992px) and (max-width: 1200px) {
  .bs-bg-lg-light {
    background-color: lightgray !important;
  }
}

.ui-dialog-off-canvas .bs-bg-xl-success {
  background-color: green !important;
}

@media (min-width: 1200px) {
  .bs-bg-xl-success {
    background-color: green !important;
  }
}

.ui-dialog-off-canvas .bs-bg-xl-warning {
  background-color: yellow !important;
}

@media (min-width: 1200px) {
  .bs-bg-xl-warning {
    background-color: yellow !important;
  }
}

.ui-dialog-off-canvas .bs-bg-xl-danger {
  background-color: red !important;
}

@media (min-width: 1200px) {
  .bs-bg-xl-danger {
    background-color: red !important;
  }
}

.ui-dialog-off-canvas .bs-bg-xl-light {
  background-color: lightgray !important;
}

@media (min-width: 1200px) {
  .bs-bg-xl-light {
    background-color: lightgray !important;
  }
  
  .ui-dialog-off-canvas .bs-bg-xl-jmj {
  background-color: f7c179 !important;
}

@media (min-width: 1200px) {
  .bs-bg-xl-jmj {
    background-color: f7c179 !important;
  }
}