/*
=========================================================
ALERT CSS
=========================================================
 * Innehåller styling för viktigt meddelande
 * 
 * Copyright (C) Limepark AB.
 * https://limepark.se/licensvillkor
=========================================================*/


/*
---------------------------------------------------------
VIKTIGT MEDDELANDE OCH KRISMEDDELANDE
---------------------------------------------------------*/
.lp-alert .lp-main-grid, 
.lp-crisis .lp-main-grid {
  padding-top: 0;
  padding-bottom: 0;
}

.lp-alert div[class*='sv-column-'],
.lp-crisis div[class*='sv-column-'] {
  min-height: 0;
}

.lp-alert .sv-archive-portlet li,
.lp-crisis .sv-archive-portlet li {
  align-items: center;
  display: flex;
  margin: 0;
  padding: 1.2rem 0;
  position: relative;
}

.lp-alert .sv-archive-portlet li + li,
.lp-crisis .sv-archive-portlet li + li {
  border-top: 1px solid rgba(0,0,0,0.3);
}

.lp-alert .sv-channel-item h1,
.lp-crisis .sv-channel-item h1 {
  margin: 0 !important;
}

.lp-alert-wrapper {
  margin-bottom: 1.3rem;
}

.lp-alert-wrapper time {
  color: #fff;
  font-size: 1.5rem;
}

.lp-alert .sv-channel-item h1 a,
.lp-crisis .sv-channel-item h1 a {
  color: var(--lp-color-danger-contrast);
  display: block;
  font-size: var(--lp-font-size-3);
  line-height: 1;
  margin: 0;
  text-decoration: none;
}

.lp-alert .sv-channel-item h1 a:hover,
.lp-crisis .sv-channel-item h1 a:hover {
  text-decoration: underline;
}

.lp-alert .lp-icon-wrapper,
.lp-crisis .lp-icon-wrapper {
  align-items: center;
  bottom: 0;
  display: flex;
  margin-right: 2rem;

  justify-content: center;
}

.lp-alert .lp-icon,
.lp-crisis .lp-icon {
  color: var(--lp-color-danger-contrast);
  font-size: 1.8em;
  width: 35px;
  height: 35px;
}

/*
---------------------------------------------------------
VIKTIGT MEDDELANDE
---------------------------------------------------------*/
.lp-alert {
  background-color: var(--lp-color-info);
}

/*
---------------------------------------------------------
KRISMEDDELANDE
---------------------------------------------------------*/

.lp-crisis {
  background-color: var(--lp-color-danger);
}