/*
	Bootstrap Panel with Icon

	- Modifies the existing Bootstrap styles if the ".panel"
	  also includes the ".-with-icon" class.
	- You can use either a <div> or a <a> parent element.
	- You can use a regular <img> for an icon.
	- You can use a Font Awesome <i> for an icon.
	- Optionally leave the icon out and keep the appearance.
*/
.panel.-with-icon {
  display: flex;
  padding: 1rem;
  border-color: #AED2EB; }
  .panel.-with-icon > .panel-icon {
    width: 2rem;
    align-self: center;
    margin-right: 1rem; }
    .panel.-with-icon > .panel-icon img {
      display: block;
      height: 28px;
      width: auto; }
    .panel.-with-icon > .panel-icon i {
      display: block;
      text-align: center;
      font-size: 2rem;
      color: #0067ae; }
  .panel.-with-icon > .panel-body {
    flex-grow: 1;
    align-self: center;
    padding: 0; }
    .panel.-with-icon > .panel-body p {
      margin: 0; }
      .panel.-with-icon > .panel-body p:first-child {
        font-size: 0.875rem;
        font-weight: bold;
        color: #0067ae; }
      .panel.-with-icon > .panel-body p:last-child {
        font-size: 0.75rem;
        font-weight: normal;
        color: #737474; }

/*
	We can swap out the parent <div> tag for an <a> link.
*/
a.panel.-with-icon {
  transition: all 0.2s ease-in-out; text-decoration:none; min-height:95px;}
  a.panel.-with-icon:hover {
    border-color: #0067AE;
    text-decoration: none;
    background: #F7FCFF;
    transform: translate(0.3rem, 0.3rem); }