/**
 * @provides phui-action-panel-css
 */

.phui-action-panel {
  position: relative;
  background-color: #fff;
  border: 1px solid #BFCFDA;
  border-radius: 3px;
  margin: 0 8px;
  min-height: 108px;
  overflow: hidden;
}

.device .phui-action-panel {
  margin: 0;
}

.phui-action-panel-hitarea {
  display: block;
}

.device-desktop .phui-action-panel-hitarea:hover {
  text-decoration: none;
  background-color: rgba(255,255,255,.25);
}

.device-desktop .phui-action-panel-hitarea:hover .phui-icon-view {
  margin-top: -4px;
  transition-duration: .2s;
}

.phui-action-panel-table {
  display: table;
  height: 80px;
  width: 100%;
}

.phui-action-panel-row {
  display: table-row;
}

.phui-action-panel-icon {
  width: 64px;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}

.phui-action-panel-image {
  width: 48px;
  height: 48px;
  margin: 0 auto;
}

.phui-action-panel-icon a {
  display: block;
}

.phui-action-panel-icon a:hover .phui-icon-view,
.phui-action-panel-icon a:hover .phui-action-panel-bigtext {
  color: #2980b9;
}

.phui-action-panel-icon a:hover {
  text-decoration: none;
}

.phui-action-panel-icon .phui-icon-view {
  font-size: 36px;
  color: #8C98B8;
}

.phui-action-panel-header {
  padding: 8px;
  border-bottom: 1px solid #DDE8EF;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  color: #464C5C;
  display: block;
}

.phui-action-panel-bigtext .phui-action-panel-subheader {
  font-size: 28px;
  color: #464C5C;
  text-align: center;
  padding: 0 8px;
}

.phui-action-panel-subheader {
  display: table-cell;
  vertical-align: middle;
  color: #464C5C;
  padding: 8px 8px 8px 0;
}

.phui-action-panel-subheader a {
  text-decoraction: none;
}

.phui-action-panel-status {
  padding: 8px 12px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.phui-action-panel-status:hover {
  text-decoration: none;
}

/* - Red -------------------------------------------------------------------- */

.phui-action-panel-red {
  background-color: #f7e6e6;
  border-color: #d1abab;
}

.phui-action-panel-red .phui-action-panel-icon .phui-icon-view {
  color: #c85a5a;
}

.phui-action-panel-red .phui-action-panel-header {
  border-color: #efcfcf;
}

/* - Orange ----------------------------------------------------------------- */

.phui-action-panel-orange {
  background-color: #fbede1;
  border-color: #dbb99e;
}

.phui-action-panel-orange .phui-action-panel-icon .phui-icon-view {
  color: #e78331;
}

.phui-action-panel-orange .phui-action-panel-header {
  border-color: #f8dcc3;
}

/* - Yellow ----------------------------------------------------------------- */

.phui-action-panel-yellow {
  background-color: #fdf3da;
  border-color: #c9b8a8;
}

.phui-action-panel-yellow .phui-action-panel-icon .phui-icon-view {
  color: #9b946e;
}

.phui-action-panel-yellow .phui-action-panel-header {
  border-color: #e9dbcd;
}

/* - Green ------------------------------------------------------------------ */

.phui-action-panel-green {
  background-color: #ddefdd;
  border-color: #a0c4a1;
}

.phui-action-panel-green .phui-action-panel-icon .phui-icon-view {
  color: #4ca74e;
}

.phui-action-panel-green .phui-action-panel-header {
  border-color: #c6e6c7;
}

/* - Blue ------------------------------------------------------------------- */

.phui-action-panel-blue {
  background-color: #dee7f8;
  border-color: #a7b5bf;
}

.phui-action-panel-blue .phui-action-panel-icon .phui-icon-view {
  color: #6b748c;
}

.phui-action-panel-blue .phui-action-panel-header {
  border-color: #cfdbe3;
}

/* - Indigo ----------------------------------------------------------------- */

.phui-action-panel-indigo {
  background-color: #eae6f7;
  border-color: #bcb4da;
}

.phui-action-panel-indigo .phui-action-panel-icon .phui-icon-view {
  color: #8672d4;
}

.phui-action-panel-indigo .phui-action-panel-header {
  border-color: #d1c9ee;
}

/* - Violet ----------------------------------------------------------------- */

.phui-action-panel-violet {
  background-color: #efe8f3;
  border-color: #bcabc5;
}

.phui-action-panel-violet .phui-action-panel-icon .phui-icon-view {
  color: #9260ad;
}

.phui-action-panel-violet .phui-action-panel-header {
  border-color: #e0d1e7;
}

/* - Pink ------------------------------------------------------------------- */

.phui-action-panel-pink {
  background-color: #fbeaf8;
  border-color: #bcabc5;
}

.phui-action-panel-pink .phui-action-panel-icon .phui-icon-view {
  color: #e26fcb;
}

.phui-action-panel-pink .phui-action-panel-header {
  border-color: #f6d5ef;
}