/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./sfra-webpack-builder/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./sfra-webpack-builder/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./sfra-webpack-builder/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./lululemon/cartridges/app_lululemon_base/cartridge/client/default/scss/notificationComponent.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Bootstrap is overriding breakpoint lg to 1409px,
    which is causing no-margin issue in tablet landspace mode.
    Hence the custom logic. */
.lazyload {
  visibility: hidden;
}

.lazyloaded {
  visibility: visible;
}

.underline-class {
  display: inline;
  text-decoration: none;
  background-position: 0% 100%;
  background-repeat: no-repeat;
}

.notificationComponent {
  margin-top: 30px;
  width: 100%;
}
@media (max-width: 1023.98px) {
  .notificationComponent {
    width: 100%;
  }
}
.notificationComponent .notification-error {
  background-color: #fae8ea;
  border: 0.0625rem solid #d22030;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  line-height: 1.26316;
  display: flex;
  padding: 0.75rem;
  font-size: 19px;
  font-size: 1.1875rem;
}
.notificationComponent .notification-error:lang(ko), .notificationComponent .notification-error:lang(ja), .notificationComponent .notification-error:lang(zh) {
  font-size: 16px;
  font-size: 1rem;
  line-height: 24px;
}
.notificationComponent .notification-error:lang(zh) {
  line-height: 23px;
}
.notificationComponent .notification-info {
  background-color: #dbe9f9;
  border: 0.0625rem solid #4a90e2;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  line-height: 1.26316;
  display: flex;
  padding: 0.75rem;
  font-size: 19px;
  font-size: 1.1875rem;
}
.notificationComponent .notification-info:lang(ko), .notificationComponent .notification-info:lang(ja), .notificationComponent .notification-info:lang(zh) {
  font-size: 16px;
  font-size: 1rem;
  line-height: 24px;
}
.notificationComponent .notification-info:lang(zh) {
  line-height: 23px;
}
.notificationComponent .notification-success {
  background-color: #cdecd6;
  border: 0.0625rem solid #039e33;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  line-height: 1.26316;
  display: flex;
  padding: 0.75rem;
  font-size: 19px;
  font-size: 1.1875rem;
}
.notificationComponent .notification-success:lang(ko), .notificationComponent .notification-success:lang(ja), .notificationComponent .notification-success:lang(zh) {
  font-size: 16px;
  font-size: 1rem;
  line-height: 24px;
}
.notificationComponent .notification-success:lang(zh) {
  line-height: 23px;
}
.notificationComponent .notification-warning {
  background-color: #fcf3cc;
  border: 0.0625rem solid #efc100;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  line-height: 1.26316;
  display: flex;
  padding: 0.75rem;
  font-size: 19px;
  font-size: 1.1875rem;
}
.notificationComponent .notification-warning:lang(ko), .notificationComponent .notification-warning:lang(ja), .notificationComponent .notification-warning:lang(zh) {
  font-size: 16px;
  font-size: 1rem;
  line-height: 24px;
}
.notificationComponent .notification-warning:lang(zh) {
  line-height: 23px;
}
.notificationComponent .notification-message-alert {
  background-color: #e8e7e4;
  border: 0.0625rem solid #57585b;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  line-height: 1.26316;
  display: flex;
  padding: 0.75rem;
  font-size: 19px;
  font-size: 1.1875rem;
}
.notificationComponent .notification-message-alert:lang(ko), .notificationComponent .notification-message-alert:lang(ja), .notificationComponent .notification-message-alert:lang(zh) {
  font-size: 16px;
  font-size: 1rem;
  line-height: 24px;
}
.notificationComponent .notification-message-alert:lang(zh) {
  line-height: 23px;
}
.notificationComponent .svgIcon {
  float: left;
}
@media (max-width: 1023.98px) {
  .notificationComponent .svgIcon {
    float: left;
  }
}
.notificationComponent .notifContent {
  float: left;
}
@media (max-width: 1023.98px) {
  .notificationComponent .notifContent {
    float: none;
    word-break: break-word;
  }
}
.notificationComponent .alert-icon-error {
  color: #d22030;
  margin-right: 8px;
  width: 24px;
  height: 24px;
}
.notificationComponent .alert-icon-info {
  color: #4a90e2;
  margin-right: 8px;
  width: 24px;
  height: 24px;
}
.notificationComponent .alert-icon-success {
  color: #039e33;
  margin-right: 8px;
  width: 24px;
  height: 24px;
}
.notificationComponent .alert-icon-warning {
  color: #efc100;
  margin-right: 8px;
  width: 24px;
  height: 24px;
}
.notificationComponent .alert-icon-message-alert {
  color: #57585b;
  margin-right: 8px;
  width: 24px;
  height: 24px;
}
.notificationComponent .notifContent p {
  margin: 0 !important;
}
.notificationComponent .align-left {
  float: left;
  width: 60%;
}
@media (max-width: 1023.98px) {
  .notificationComponent .align-left {
    width: 100%;
    float: none;
  }
}
.notificationComponent .align-right {
  float: right;
  width: 60%;
}
@media (max-width: 1023.98px) {
  .notificationComponent .align-right {
    width: 100%;
    float: none;
  }
}
.notificationComponent .align-center {
  margin: 0 auto;
  width: 60%;
}
@media (max-width: 1023.98px) {
  .notificationComponent .align-center {
    width: 100%;
  }
}
.notificationComponent .width-type-full {
  width: 100%;
}
.notificationComponent .width-type-partial {
  width: 66.7%;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1023.98px) {
  .notificationComponent .width-type-partial {
    width: 100%;
  }
}
.notificationComponent .svgIcon {
  margin-top: auto;
  margin-bottom: auto;
}
.notificationComponent .clear {
  clear: both;
}

/*# sourceMappingURL=notificationComponent.css.map*/