/* 
 * Alerts
 */
p[class*="-alert"] {
  font-size: 20px;
  padding: 25px 25px 15px 25px;
  margin-bottom: 15px;
  border-radius: 5px;
}
.info-alert {
  background-color: #e8f6f7;
  color: #034083;
  border-top: 1px solid #8bb2dd;
  border-right: 1px solid #8bb2dd;
  border-left: 1px solid #8bb2dd;
  border-bottom: 10px solid #8bb2dd;
}
.warning-alert {
  background-color: #fbf1d4;
  color: #5a4305;
  border-top: 1px solid #efdca2;
  border-right: 1px solid #efdca2;
  border-left: 1px solid #efdca2;
  border-bottom: 10px solid #efdca2;
}
.danger-alert {
  background-color: #fceeef;
  color: #721c25;
  border-top: 1px solid #d68089;
  border-right: 1px solid #d68089;
  border-left: 1px solid #d68089;
  border-bottom: 10px solid #d68089;
}

/* 
 * Cards
 */
/* 
 * TODO: 
 * Because this is a plugin...
 * Theme style.css overrides the block patterns style. 
 * How do we avoid this? (!important)
 ***  #main_content h3 
 ***  #interior_wrapper p
 * - each theme may differ...
 * - Gov doesn't have #interior_wrapper p but Human Relations does.
 * - Icon overlaps content above it. Ex. place Information Box above it.
 */
.card-img-with-link-headline {
  font-size: 24px;
}
.card-img-half-size img {
  max-width: 50%;
  height: auto;
}

/* 
 * Text Information Box
 */
.information-box {
  background: hsl(0deg 0% 100%);
  padding: 24px;
  border: 5px solid hsl(0deg 0% 93%);
}

/* 
 * TODO: DISCUSS WITH TEAM
 * Demo this test: Evaluate the next three style in Dev Tools.
 * Which one will get rendered given we have style, clf4 and bootstrap to compete with.
*/
#interior_wrapper .information-box h4,
#main_content h4 {
  color: #333;
  margin-top: 15px;
  font-size: 22px;
  font-weight: 700;
}

.information-box h4 {
  color: #333 !important;
  margin-top: 15px !important;
  font-size: 22px !important;
  font-weight: 700 !important;
}

.information-box h4 {
  color: #333;
  margin-top: 15px;
  font-size: 22px;
  font-weight: 700;
}

.information-box p {
  color: hsl(0deg 0% 33%);
  font-weight: 700;
  margin: 20px 0;
}

/*
 * Panels
 *
 */
.panel-block {
  border: 1px solid;
  border-radius: 3px;
  margin: 30px 0px;
}

.panel-block .panel-block-title {
  border-bottom: 1px solid;
}

#interior_wrapper .panel-block p {
  margin-bottom: 10px;
  margin-top: 0;
}

.panel-block.panel-block-default,
.panel-block.panel-block-default .panel-block-title {
  border-color: #e6e6e6;
}

.panel-block.panel-block-info,
.panel-block.panel-block-info .panel-block-title {
  border-color: #8bb2dd;
}

.panel-block.panel-block-warning,
.panel-block.panel-block-warning .panel-block-title {
  border-color: #efdca2;
}

.panel-block.panel-block-danger,
.panel-block.panel-block-danger .panel-block-title {
  border-color: #d68089;
}