/*
   Frontend styling for the interruption banner and the shortcode listings.
   Author: Rickard Svenningsson, Borås Elnät AB

   Until 2026-09-30 these rules lived in the natkraft_plugin_css option and were echoed raw into
   a <style> element on every page load. Served as a real stylesheet the browser parses them as
   CSS and never as HTML, so markup pasted in here cannot break out into a script tag.

   One rule from the option was left out: ".interruption-item-description" carried a trailing
   comma in its selector list, which per spec invalidates the whole rule - it has therefore never
   applied on the site. Reinstating it would also revive "white-space: pre-wrap", which no longer
   suits the content: descriptions come from wp_editor() as <p> blocks, and pre-wrap renders the
   newlines between those blocks as visible gaps.
*/

@media ( min-width: 768px ){
   #interruption-banner {
      position: fixed;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-align: center;
      cursor: pointer;
   }
   #interruption-banner p {
      margin: 0;
      writing-mode: vertical-lr;
      transform: rotate(180deg);
      text-decoration: none;
      padding: 10px 10px;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      white-space: nowrap;
      color: white;
   }
   
   #interruption-banner.planned p {
      background-color: #00a29b !important;
   }
   
   #interruption-banner.unplanned p {
      background-color: #ff5e3c !important;
   }
}
@media ( max-width: 767.98px ) {
   #interruption-banner {
      text-align: center;
      margin: 0;
      padding: 0;
      cursor: pointer;
   }

   #interruption-banner.planned {
      background-color: #00a29b !important;
   }
   
   #interruption-banner.unplanned {
      background-color: #ff5e3c !important;
   }

   #interruption-banner p {
      margin: 0;
      padding: 0.5em 0 0.5em 0;
      color: white;
   }   
}

.interruption-items-container .item-outer-container{
   margin: 10px 0 10px 0;
   background-color: #eee;
   padding: 10px;
   border-radius: 5px;
   border: 1px solid #888;
}
.interruption-item {
   position:relative;
   margin-left: 70px;
}

.interruption-item h1, .interruption-item h2, .interruption-item h3, .interruption-item h4,.interruption-item h5 { margin: 0.5em 0 0.5em 0; font-size: 14pt;}

.interruption-item-duration{
font-size:  12pt;
font-weight: bold;
display:block; 
border-bottom: 1px solid #aaa;
margin-bottom: 1em;
}

.icon-servicetype-0 {
   position: relative;
   float:left;
   margin-top: 30px;
   width: 50px;
   content:  url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI4LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxhZ2VyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDAgMTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6bm9uZTtzdHJva2U6IzAxMDIwMjtzdHJva2Utd2lkdGg6MztzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7fQoJLnN0MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8wMDAwMDAxOTY3NTg3NzIzMDQ4ODM1MzIwMDAwMDAxMzE5MzIyMDcxMjcxNTgwODQ0N18pO30KCS5zdDJ7ZmlsbDpub25lO3N0cm9rZTojMDQwNTA1O3N0cm9rZS13aWR0aDozO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDt9Cgkuc3Qze2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MztzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7fQoJLnN0NHtmaWxsOm5vbmU7c3Ryb2tlOiMwMjAyMDM7c3Ryb2tlLXdpZHRoOjM7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO30KCS5zdDV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMDAwMDAxNTAwNTk5NDUwNjAwMzgzODI2MjAwMDAwMDgxMDU4MjM5MDIxNjMxNTg5MTZfKTt9Cjwvc3R5bGU+CjxnIGlkPSJHcm91cF81OTU4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjUwMSAyLjEyMSkiPgoJPGcgaWQ9Ikdyb3VwXzQ2NjkiPgoJCTxwYXRoIGlkPSJQYXRoXzM4OTkiIGNsYXNzPSJzdDAiIGQ9Ik00My44LDMwLjFsMTkuOSwxOS45bC01LjMsNS4zYy01LjQsNS41LTE0LjMsNS42LTE5LjksMC4ycy01LjYtMTQuMy0wLjItMTkuOQoJCQljMC4xLTAuMSwwLjEtMC4xLDAuMi0wLjJMNDMuOCwzMC4xeiIvPgoJCTxsaW5lIGlkPSJMaW5lXzQxNyIgY2xhc3M9InN0MCIgeDE9IjQ4LjQiIHkxPSIzNC42IiB4Mj0iNTYuNSIgeTI9IjI2LjUiLz4KCQk8bGluZSBpZD0iTGluZV80MTgiIGNsYXNzPSJzdDAiIHgxPSI1OS4yIiB5MT0iNDUuNCIgeDI9IjY3LjIiIHkyPSIzNy4zIi8+CgkJPHBhdGggaWQ9IlBhdGhfMzkwMCIgY2xhc3M9InN0MCIgZD0iTTM4LjUsNTUuM2wtNy4zLDcuM2MtMS44LDEuNi0xLjksNC40LTAuMyw2LjFjMCwwLDAsMCwwLDBjMC4yLDAuMiwwLjMsMC4zLDAuNSwwLjUiLz4KCTwvZz4KPC9nPgo8L3N2Zz4K');
}

.icon-servicetype-1{
   position: relative;
   float:left;
   margin-top: 30px;
   width: 50px;
   content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI4LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxhZ2VyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDAgMTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6bm9uZTtzdHJva2U6IzAxMDIwMjtzdHJva2Utd2lkdGg6MztzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7fQoJLnN0MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8wMDAwMDEzODU1MDExNDUzNDQwMTE0MTU5MDAwMDAwNTU4OTcyNDQ3MzUxMTIwNTU0OF8pO30KCS5zdDJ7ZmlsbDpub25lO3N0cm9rZTojMDQwNTA1O3N0cm9rZS13aWR0aDozO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDt9Cgkuc3Qze2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MztzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7fQoJLnN0NHtmaWxsOm5vbmU7c3Ryb2tlOiMwMjAyMDM7c3Ryb2tlLXdpZHRoOjM7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO30KCS5zdDV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMDAwMDAxMjQ4NDE4NTQwNjI1OTYyMDczMjAwMDAwMDMwNzYyOTgxMDA3ODQyMzI2MzVfKTt9Cjwvc3R5bGU+CjxnIGlkPSJHcm91cF81OTEwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNS44MDEgLTkuNTAzKSByb3RhdGUoNDUpIj4KCTxsaW5lIGlkPSJMaW5lXzQyMiIgY2xhc3M9InN0MCIgeDE9IjQyLjgiIHkxPSIxMS43IiB4Mj0iNDIuOCIgeTI9IjI2LjYiLz4KCTxsaW5lIGlkPSJMaW5lXzQyMyIgY2xhc3M9InN0MCIgeDE9IjQ4LjMiIHkxPSI2LjciIHgyPSI0OC4zIiB5Mj0iMjYuNiIvPgoJPGxpbmUgaWQ9IkxpbmVfNDI0IiBjbGFzcz0ic3QwIiB4MT0iNTkuMiIgeTE9IjExLjciIHgyPSI1OS4yIiB5Mj0iMjYuNiIvPgoJPGcgaWQ9Ikdyb3VwXzQ2NzEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMCkiPgoJCTxnIGlkPSJHcm91cF80NjcyIj4KCQkJPGxpbmUgaWQ9IkxpbmVfNDI1IiBjbGFzcz0ic3QwIiB4MT0iNTMuNyIgeTE9IjIuMSIgeDI9IjUzLjciIHkyPSIyNi42Ii8+CgkJCTxwYXRoIGlkPSJQYXRoXzM5MDUiIGNsYXNzPSJzdDAiIGQ9Ik02NCw0OS44VjI5LjRjMC0xLjUtMS4yLTIuOC0yLjgtMi44SDQxLjFjLTEuNSwwLTIuOCwxLjItMi44LDIuOHYyMC40Ii8+CgkJPC9nPgoJPC9nPgo8L2c+Cjwvc3ZnPgo=');
}