/**
 * @file Contains styling overrides for envision.
 */


/* General variable overrides */

html .sv-theme-standardtema {
   --env-form-input-border-radius: 2px;
}

/* Typography */

.env-text {
   line-height: 1.5;
}

div.env-text,
p.env-text {
   max-width: var(--max-big-text-content-width);
}

h2[class*="env-text-"],
h3[class*="env-text-"] {
   font-family: var(--font-family-heading);
   font-weight: 400;
}

/*    Icons    */

.env-icon--small {
   height: 1.5rem;
   width: 1.5rem;
}

.env-icon--medium {
   height: 2rem;
   width: 2rem;
}

/* Buttons */

.env-button {
   border: 1px solid transparent;
   padding: .75rem 1rem;
   box-sizing: border-box;
   transition: var(--bg-and-typocolor-animation);
   cursor: pointer;
   border-radius: .125rem;

   font-size: 1.125rem;
   font-family: var(--font-family-text);
   line-height: 1.33;
   text-decoration: none !important;
   min-height: 0;
}

.env-button:hover {
   transition: var(--bg-and-typocolor-animation);
}

.env-button:focus,
.env-button:focus-visible {
   outline-offset: var(--outline-offset-inside);
   box-shadow: none;
}

.env-button--large {
   padding: 1rem 1.5rem;
}

/* Aurora Primary */
.env-button--primary {
   background-color: var(--color-sky-60);
   border-color: var(--color-sky-60);
   color: var(--color-zenith);
}

.env-button--primary:focus,
.env-button--primary:focus-visible {
   background-color: var(--env-element-primary-background-color);
   outline-color: var(--color-zenith);
   outline-offset: calc(var(--outline-offset-inside) - 2px);
}

.env-button--primary:hover {
   background-color: var(--color-sky-70);
}

.env-button--primary:active {
   background-color: var(--color-sky-80);
}

/* Aurora Secondary */

.env-button--secondary.env-button--ghost,
.env-button--secondary {
   border-color: var(--color-sky-60);
   color: var(--color-sky-60);
}

.env-button--secondary {
   background-color: var(--color-zenith);
}

.sv-cookie-consent-banner .env-button--ghost.env-button--primary:focus-visible,
.sv-cookie-consent-banner .env-button--ghost.env-button--primary:focus,
.env-button--secondary:focus,
.env-button--secondary:focus-visible {
   background-color: var(--color-zenith);
   border-color: var(--color-sky-60);
   color: var(--color-sky-60);
   outline-offset: var(--outline-offset-inside);
   outline-color: var(--color-sky-60);
}

.env-button--ghost.env-button--secondary,
.sv-cookie-consent-banner .env-button--ghost.env-button--primary:focus,
.sv-cookie-consent-banner .env-button--ghost.env-button--primary:focus-visible,
.env-button--ghost.env-button--secondary:focus,
.env-button--ghost.env-button--secondary:focus-visible {
   background-color: transparent;
}

.sv-cookie-consent-banner .env-button--ghost.env-button--primary:hover,
.env-button--secondary:hover {
   background-color: var(--color-sky-10);
   border-color: var(--color-sky-60);
   color: var(--color-sky-60);
}

.sv-cookie-consent-banner .env-button--ghost.env-button--primary:active,
.env-button--secondary:active {
   background-color: var(--color-sky-20);
   border-color: var(--color-sky-60);
   color: var(--color-sky-60);
}

/* Aurora Tertiary */
.env-button--brand {
   background-color: transparent;
   color: var(--color-sky-60);
}

.env-button--brand:hover {
   background-color: var(--color-sky-10);
   color: var(--color-sky-60);
   border-color: transparent;
}

.env-button--brand:focus,
.env-button--brand:focus-visible {
   background-color: transparent;
   color: var(--color-sky-60);
   border-color: transparent;
   outline-offset: var(--outline-offset-inside);
}

.env-button--brand:active:hover .env-button--brand:active {
   background-color: var(--color-sky-20);
   border-color: transparent;
   color: var(--color-sky-60);
}


/* Aurora Quarternary */
.env-button--link {
   color: var(--color-cloud-100);
}

.env-button--link:hover,
.smhi-page-header nav>.env-button--link:hover,
.env-dropdown>.env-button:hover {
   background-color: var(--color-sky-10);
}

.env-button--link:active,
.smhi-page-header nav>.env-button--link:active,
.env-dropdown>.env-button:active {
   background-color: var(--color-sky-20);
}

.env-button--link:focus,
.env-button--link:focus-visible,
.smhi-page-header nav>.env-button--link:focus-visible,
.env-dropdown>.env-button:focus-visible {
   outline-color: var(--color-sky-60);
   outline-offset: var(--outline-offset-inside);
}

.env-button--link:focus {
   background: transparent;
}

.env-dropdown.env-is-open>.env-button {
   background-color: var(--color-sky-10);
}

.env-dropdown.env-is-open>.env-button:focus-visible {
   outline-color: var(--color-sky-60);
}

.env-dropdown.env-is-open>.env-button:hover {
   background-color: var(--color-sky-20);
}

.env-dropdown.env-is-open>.env-button:active {
   background-color: var(--color-sky-30);
}

/* Aurora Critical */

.env-button--danger {
   background: var(--color-heatwave-60);
   color: var(--color-zenith);
}

.env-button--danger:hover {
   background: var(--color-heatwave-70);
}

.env-button--danger:focus,
.env-button--danger:focus-visible {
   background-color: var(--color-heatwave-60);
   outline-color: var(--color-zenith);
   outline-offset: calc(var(--outline-offset-inside) - 2px);
}

/* Forms */

.sv-searchform-portlet .env-form-element,
.sv-facetedsearch-portlet .env-form-element {
   margin-bottom: 0;
}

.sv-searchform-portlet .env-form-element__label,
.sv-facetedsearch-portlet .env-form-element__label {
   margin-bottom: 0.5rem;
}

.sv-searchform-portlet .env-form-input,
.sv-facetedsearch-portlet .env-form-input {
   padding: 0.75rem 1rem;
}

.sv-searchform-portlet .env-form-input:hover,
.sv-facetedsearch-portlet .env-form-input:hover {
   background-color: var(--color-sky-10);
   border-color: var(--color-sky-60);
}

.sv-searchform-portlet .env-form-input:focus-visible,
.sv-facetedsearch-portlet .env-form-input:focus-visible {
   background-color: var(--color-zenith);
   box-shadow: initial;
   outline: .125rem solid var(--color-sky-60);
   outline-offset: calc(-1 * .125rem);
}

.sv-searchform-portlet .env-form-input--search,
.sv-facetedsearch-portlet .env-form-input--search {
   background-repeat: no-repeat;
   text-indent: 2rem;
   background-image: url('/images/18.1e06e3b418b6c84bee33be/1699429505416/search-outline-24x24.svg');
   background-size: 1.5rem;
   background-position: 1rem 50%;
   transition: var(--bg-and-typocolor-animation);
}

/*    Form -- checkbox    */

.env-checkbox .env-form-element__label {
   padding: 0.75rem 1rem;
   border: 1px solid transparent;
   transition: var(--bg-and-typocolor-animation);
   cursor: pointer;
   display: flex;
   align-items: center;
}

.env-checkbox .env-checkbox__fake {
   width: 1rem;
   height: 1rem;
   margin: 0 1rem 0 0;
   transition: var(--bg-and-typocolor-animation);
   border: .125rem solid var(--color-cloud-60);
}

.env-checkbox .env-form-element__label:hover {
   background-color: var(--color-sky-10);
   border: 1px solid var(--color-sky-60);
   transition: var(--bg-and-typocolor-animation);
}

[type=checkbox]:checked+label .env-checkbox__fake {
   border-color: var(--color-sky-60);
   background-color: var(--color-sky-60);
}

[type=checkbox]:checked+label .env-checkbox__fake:after {
   content: none;
}

[type=checkbox]:focus-visble+label .env-checkbox__fake {
   box-shadow: none;
   outline: none;
}

[type=checkbox]:focus-visble+label {
   box-shadow: none;
   outline: .25rem solid var(--color-sky-60);
}

.env-checkbox__fake svg {
   display: none;
   width: 1rem;
   height: 1rem;
   color: var(--color-zenith);
}

[type=checkbox]:checked+label .env-checkbox__fake svg {
   display: block;
}


/* Card */

.env-card {
   --env-card-header-background: var(--color-cloud-10);
   --env-card-spacing: var(--env-spacing-medium);
   --env-ui-text-caption-font-color: var(--color-cloud-100);

   /* --env-ui-text-subheading-font-size: 1em;
    --env-ui-text-caption-font-size: 1em; */

   border: var(--border-width) solid var(--colorCloud30, #D0D6DB);
   border-radius: var(--border-radius);
}

.env-card.env-block-primary {
   --env-card-header-background: transparent;
}

.env-card.env-block-secondary {
   --env-card-header-background: transparent;
}

.env-card__header,
.env-card__body,
.env-card__footer {
   padding: var(--env-card-spacing);
}

.env-card__header {
   background-color: var(--env-card-header-background);
}

.env-card__image {
   width: calc(7.5rem - 2rem);
   height: 7rem;
   overflow: hidden;
   padding: 0;
   display: block;
   border-radius: 62.5rem;
}

.env-card__image:first-child:last-child {
   margin-bottom: 0;
}

.env-card__header~.env-card__body {
   padding-top: var(--env-card-spacing);
}

.env-card__body .env-ui-text-caption .env-link {
   font-size: var(--env-font-size-medium);
}

/*    Card but specific for contact card     */

.smhi-contact-card .env-card__image img {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
   margin: 0;

}

.smhi-page-content .sv-row:has(.smhi-contact-card) {
   max-width: var(--max-text-content-width);
   margin-left: inherit;
   margin-right: inherit;
 }


/*		Collapse		*/

.sv-collapsible-content .env-button.env-button--link,
.env-collapse-header {
   padding: .75rem 1rem;
   border-radius: var(--env-border-radius);
   border: 1px solid var(--color-nadir);
   background-color: var(--color-zenith);

   font-family: var(--font-family-text);
   font-size: 1.125rem;
   font-style: normal;
   font-weight: 400;
   line-height: 1.3;
   color: var(--color-cloud-100) !important;
   text-decoration: none !important;

   transition: var(--bg-and-typocolor-animation);
}

.sv-collapsible-content .env-button.env-button--link:after,
.env-collapse-header:after {
   content: '';
   display: inline-block;
   background: url('/images/18.1e06e3b418b6c84bee331e/1699429498101/chevron-down-outline-24x24.svg');
   height: 1.5rem;
   width: 1.5rem;
   margin-left: 0.5rem;
}

.sv-collapsible-content .env-button.env-button--link.env-collapse--expanded:after,
.env-collapse-header.env-collapse--expanded:after {
   transform: rotate(180deg);
}

.sv-collapsible-content .env-button.env-button--link:hover,
.sv-collapsible-content .env-button.env-button--link.env-collapse--expanded,
.env-collapse-header.env-collapse--expanded,
.env-collapse-header:hover {
   border: 1px solid var(--color-sky-60);
   background: var(--color-sky-10);
   transition: var(--bg-and-typocolor-animation);
}

.sv-collapsible-content .env-button.env-button--link:focus-visible,
.env-collapse-header:focus-visible {
   outline: .25rem solid var(--color-sky-60) !important;
   outline-offset: var(--outline-offset-inside) !important;
   border-radius: 0;
}

.sv-collapsible-content .env-button.env-button--link.env-collapse--expanded:hover,
.env-collapse-header.env-collapse--expanded:hover {
   background: var(--color-sky-20);
   transition: var(--bg-and-typocolor-animation);
}

.env-collapse--show:not(.smhi-header-search__field) {
   border: 1px solid var(--color-cloud-30);
   width: 100% !important;
   background: var(--color-zenith);
}

/*    Collapse for accordion     */



.sv-collapsible-content {
   max-width: var(--max-text-content-width);
}

.sv-collapsible-content .env-button.env-button--link {
   width: 100%;
   text-align: left;
   display: flex;
   justify-content: space-between;
}

.sv-collapsible-content .env-button.env-button--link:not(.env-collapse--expanded, :hover),
.sv-collapsible-content .env-collapse-header:not(.env-collapse--expanded, :hover) {
   border-color: var(--color-cloud-30);
}

.sv-collapsible-content .env-collapse-header--icons {
   display: none;
}

.sv-editing-mode .sv-collapsible-content>div:last-child,
.sv-collapsible-content .env-collapse {
   margin: 0;
   padding: .75rem 1rem 1rem;
   border: 1px solid var(--color-cloud-30);
   border-top: 0;
}

.sv-editing-mode .sv-collapsible-content>div:last-child>div:not(:last-child),
.sv-collapsible-content .env-collapse:not(.sv-text-portlet)>div:not(:last-child) {
   margin-bottom: 1rem;
}

.sv-collapsible-content+.sv-collapsible-content {
   margin-top: .5rem;
}

/*      Dropdown      */
.env-dropdown .env-dropdown__menu {
   top: calc(100% + 0.5rem) !important;
}

/*		SWITCH		*/

.env-switch__slider {
   width: 3rem;
   height: 1.5rem;
   border: 0;
   filter: none;
   background-color: var(--color-cloud-60);
   position: relative;
   transition: var(--standard-animation);
   flex: none;
}

.env-switch__slider:before {
   width: 1rem;
   height: 1rem;
   top: .25rem;
   left: .25rem;
   transition: var(--standard-animation);
}

.env-switch__slider:after,
input:checked~.env-switch__slider:after {
   content: none;
}

input:checked~.env-switch__slider {
   background-color: var(--color-sky-60);
   filter: none;
}

input:checked~.env-switch__slider:before {
   transform: translateX(1.5rem);
}

input:disabled~.env-switch__slider {
   filter: none;
   background-color: var(--color-cloud-40);
}

input:checked~.env-switch__slider:before {
   opacity: 1;
}

/*		Modal		*/

.env-modal-dialog__dialog {
   box-shadow: 0px 36px 48px 0px rgba(13, 25, 33, 0.10), 0px 8px 16px 0px rgba(13, 25, 33, 0.08);
}

.env-modal-dialog__header,
.env-modal-dialog__footer {
   border-color: var(--color-cloud-30);
}

.env-modal-dialog__header,
.env-modal-dialog__body,
.env-modal-dialog__footer {
   padding: 1rem !important;
}