/*
# Alerts and Notifications
##Information
```
  <div class="info-note alert alert-info row margin-bottom-sm">
    <span class="info-notification-icon fa fa-exclamation-circle fa-2x multi-msg-icon-attrs"></span>
    <div class="col-xs-11 no-padding-left padding-top-vsm">
      <ul>
        <li>Lorem Ipsum is simply dummy text</li>
        <li class="clearfix"><span class="similar-products-icon pull-left margin-right-sm"></span>
          <span class="pull-left margin-top-vsm">Similar products are available. Line(s) 8,9</span>
        </li>
        <li>Lorem Ipsum is simply dummy text</li>
      </ul>
    </div>
  </div>
```

##Error
```
  <div class="error-note row alert alert-danger margin-bottom-sm">
    <span class="error-notification-icon fa fa-exclamation-circle fa-2x multi-msg-icon-attrs"></span>
    <div class="col-xs-11 no-padding">
      <ul>
        <li>Quantity is required for : <a href="#basketItem1" class="goto-link alert-link">line 1</a></li>
        <li>End User is required for : <a href="#basketItem2" class="goto-link alert-link">line 2</a>,
             <a href="#basketItem3" class="alert-link goto-link">line 3</a></li>
        <li>Contract No. is required for : <a href="#basketItem1" class="goto-link alert-link">line 1</a></li>
        <li>GSA is required for : <a href="#basketItem1" class="alert-link goto-link">line 1</a></li>
        <li>Please remove these items from your cart before you can proceed to Step 2: Billing & Shipping.</li>
      </ul>
    </div>
  </div>
```

##Warning
```
  <div class="warning-note alert alert-warning row margin-bottom-sm">
    <span class="fa fa-warning fa-2x multi-msg-icon-attrs"></span>
    <div class="col-xs-11 no-padding">
      <ul>
        <li>The System is temporarily offline</li>
        <li>Warehouse selection is not available at this time</li>
      </ul>
    </div>
  </div>

```

##Sucess
```
  <div class="success-note alert alert-success row margin-bottom-sm">
    <span class="fa fa-check-circle small-text multi-msg-icon-attrs"></span>
    <div class="col-xs-11 no-padding-left padding-top-vsm">
      <ul>
        <li>1 product(s) have been added to the cart in :
          <a href="#basketItem3" class="alert-link goto-link">line 3</a></li>
        <li>The selected products have been added to your Favorites</li>
      </ul>
    </div>
  </div>
```

##Notifications with Links
```
  <div class="info-note alert alert-info row margin-bottom-sm">
    <span class="info-notification-icon fa fa-exclamation-circle fa-2x multi-msg-icon-attrs"></span>
    <div class="col-xs-11 no-padding-left padding-top-vsm">
      <div class="header">Order ABCD123456</div>
      <ul>
        <li>You are modifying an order on hold. You will need to proceed to Step 3 to submit this
        order or to place it on hold again.</li>
      </ul>
    </div>
  </div>
  
  <div class="info-note alert alert-info row margin-bottom-sm">
    <span class="info-notification-icon fa fa-exclamation-circle fa-2x multi-msg-icon-attrs"></span>
    <div class="col-xs-11 no-padding-left padding-top-vsm">
      <div class="header">Order ABCD123456</div>
      <ul>
        <li>You are modifying an order on hold.
          You can <a class="alert-link">submit this order</a>
          or <a class="alert-link">to save and place it on hold</a> again.
        </li>
      </ul>
    </div>
  </div>
  
  <div class="warning-note alert alert-warning row margin-bottom-sm">
    <span class="fa fa-warning fa-2x multi-msg-icon-attrs"></span>
    <div class="col-xs-11 no-padding-left padding-top-vsm">
      <div class="header">Order ABCD123456-01</div>
      <ul>
        <li>You are modifying a part of a split order. 
          Changes to billing & shipping will also be applied to orders
          <a class="alert-link"><strong>ABC123456-02</strong></a>,
          <a class="alert-link"><strong>ABC123456-03</strong></a>.
          You can submit this order or to save and place it on hold
          again by proceeding to Step 3: Review & Submit.
        </li>
      </ul>
    </div>
  </div>
```
##Dismissable Notifications
```
  <div id="dismissibleMsg1" data-toggle="dismissible-message"
       class="info-note alert alert-info row margin-bottom-sm">
    <span class="info-notification-icon fa fa-exclamation-circle fa-2x multi-msg-icon-attrs"></span>
    <div class="col-xs-11 no-padding-left padding-top-vsm">
      You can qualify for FREE SHIPPING if you add $20.95+ to your order
    </div>
    <div class="pull-right no-padding">
      <a href="javascript:;" class="alert-link dismissible-btn-link">
        <span class="glyphicon glyphicon-remove"></span>
      </a>
    </div>
  </div>
  
  <div id="dismissibleMsg2" data-toggle="dismissible-message"
       class="success-note alert alert-success row margin-bottom-sm">
    <span class="fa fa-check-circle fa-2x small-text multi-msg-icon-attrs"></span>
    <div class="col-xs-11 no-padding-left padding-top-vsm">
      Congratulations! You qualified for FREE SHIPPING!
    </div>
    <div class="pull-right no-padding">
      <a href="javascript:;" class="alert-link dismissible-btn-link">
        <span class="glyphicon glyphicon-remove"></span>
      </a>
    </div>
  </div>
```
*/
.info-note,
.error-note,
.warning-note,
.success-note {
  padding: 10px;
  font-size: 11px;
  border-radius: 0;
}
.info-note ul,
.error-note ul,
.warning-note ul,
.success-note ul {
  list-style: none;
  margin: 0;
  -webkit-padding-start: 0;
  padding-left: 0;
}
.info-note ul li:not(:last-child),
.error-note ul li:not(:last-child),
.warning-note ul li:not(:last-child),
.success-note ul li:not(:last-child) {
  margin-bottom: 3px;
}
.warning-note .fa-warning {
  color: #C79420;
  font-size: 18px;
}
.multi-msg-icon-attrs {
  float: left;
  margin-right: 10px;
}
.info-note .header,
.error-note .header,
.warning-note .header,
.success-note .header {
  font-weight: bold;
}
.info-note .header {
  color: #3399CC;
}
.error-note .header {
  color: #A94442;
}
.warning-note .header {
  color: #C79420;
}
.success-note .header {
  color: #009900;
}
.success-note .fa-check-circle {
  font-size: 21px;
  color: #009900;
}