body {
    margin: 0;
}
.row {
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
}
main {
    margin: 0 auto;
    max-width: 1572px;
    width: 100%;
    padding-bottom: 25px;
    padding-right: 2cm;
    padding-left: 2cm;
    padding-top: 5px;
    box-sizing: border-box;
}

@media screen and (max-width: 1200px) {
    main {
        padding-right: 0.2cm;
        padding-left: 0.2cm;
    }

    .checkout-header {
        height: 50px;
    }
    .main-checkout {
        padding-top: 60px; /* Reduced padding on smaller screens */
    }
}

@media screen and (max-width: 768px) {
    main {
        padding-right: 0.1cm;
        padding-left: 0.1cm;
        padding-top: 170px;
    }
}

@media screen and (max-width: 650px) {
    main {
        padding-right: 0px;
        padding-left: 0px;
    }

        
    .checkout-header {
        height: 50px;
    }
    .main-checkout {
        padding-top: 60px; /* Reduced padding on smaller screens */
    }
}


h1, h2, h3, h4, h5, h6 {
    font-family: Poppins, Arial, "Helvetica Neue", Helvetica, sans-serif;
    margin: 0;
}
h1 {
    font-size: 16px;
}
.main-content h1, .main-content h2, .main-content h3, .main-content h5, .main-content h6 {
    margin: 15px 0 5px;
}
p {
    margin: 0 0 5px;
    font-size: 14px;
    font-family: Poppins, Arial, "Helvetica Neue", Helvetica, sans-serif;
}
p b {
    font-size: 14px;
}

a{
    font-family: Poppins, Arial, "Helvetica Neue", Helvetica, sans-serif;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.search_form_title {
    font-family: Poppins, Arial, "Helvetica Neue", Helvetica, sans-serif;
}

/*HEADER*/

ul#menu-main-navigation li a:hover {
}
header {
    background: #003365;
}
.header_box {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}
nav.top_menu ul {
    padding-left: 0;
}
nav ul li {
    list-style: none;
    display: inline-block;
    /*padding-right: 10px;*/
}
nav ul li:last-child {
    padding-right: 0;
}
nav ul li a {
    color: #fff;
    font-family: Poppins, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    border-bottom: 2px solid #FFF;
}
nav ul li a:hover {
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
form.search_header input[placeholder] {
    color: #b8bfca;
    font-size: 16px;
}
form.search_header input:-moz-placeholder {
    color: #b8bfca;
    font-size: 16px;
}
form.search_header input:-ms-input-placeholder {
    color: #b8bfca;
    font-size: 16px;
}
form.search_header input[type="search"] {
    border: none;
    min-height: 42px;
    padding-left: 22px;
    border-radius: 5px !important;
    width: 65%;
}
button.h_s_button {
    background: #8bbde0;
    min-height: 42px;
    min-width: 63px;
    font-family: Poppins, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: #003365;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
    position: relative;
    left: -4px;
    vertical-align: top;
    margin: 0px;
    border-radius: 0 4px 4px 0;
    width: fit-content
}
button.h_s_button:hover {
    background: #003365;
    color: #8bbde0;
    border: 1px solid #fff;
}
.search_wrap {
    padding-top: 10px;
}
.logo {
    padding: 15px 0;
    order: 1;
}
form.search_header {
    text-align: center;
    white-space: nowrap;
    border-radius: 5px 0px 0px 5px;
    justify-content: center;
}
.star_logo_mobile {
    display: none;
}
input, textarea, select {
    -webkit-appearance: none;
}
.search_nav_box {
    order: 2;
}
.star_logo {
    order: 3;
    width: 260px;
}

/*CONTENT*/

.banner-with-image {
  background: linear-gradient(rgba(0, 51, 101, 0.8), rgba(0, 75, 101, 0.8)), url(https://ticket2test.fabianbaehrendtz.se/img/hero-team.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 170px;
  text-align: center;
  line-height: 170px; /* Center vertically */
  font-size: 64px;
  font-weight: 600;
  color: white;
}


.square-box-container {
    display: flex;
    flex-wrap: wrap; /* Allow boxes to wrap to the next row */
    gap: 0px; /* Adjust the gap between boxes */
    padding: 6px; /* Add padding for better spacing */
    align-items: center; /* Center vertically */
}

.square-box {
    flex: 0 0 auto; /* Let boxes grow and shrink */
    width: 200px; /* Adjust the width of each box */
    /*border: 1px solid*/ #ccc; /* Add a border for separation */
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    background-color: #f7f7f7;
    transition: all 0.3s; /* Add smooth transition */
}

.team-button {
    display: block;
    margin-top: 10px;
}

/* Media query to hide boxes below a certain screen width */
@media (max-width: 768px) {
    .square-box {
        display: none;
    }
}

.team-button {
    display: block;
    margin-top: 10px;
}
/* Style for the container */
.square-box-container {
    display: flex;
    justify-content: center; /* Distribute boxes evenly */
    flex-wrap: wrap; /* Allow boxes to wrap to the next line if needed */
}

/* Style for the square boxes */
.square-box {
    /*width: calc(11% - 30px);*/ /* Adjust the width as needed */
    width: 145px;
    min-width: 120px; /* Minimum width for each box */
    height: 120px;
    background: #003365;
    margin: 4px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Style for the team name */
.team-name {
    color: #ffffff; 
    font-size: 18px;
    min-height: 50px;
    font-weight: 500;
}

/* Style for the button */
.team-button {
    /*background-color: #ff6600;*/
    color: #f60;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    margin-top: 10px;
}

.sidebar-right.search-sidebar {
    padding-top: 10px;
}
.sidebar-right a {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
    text-decoration: none;
}
.sidebar-right a:hover {
    opacity: .7;
}
.info_Box {
    background: rgba(0, 51, 101, .5);
    z-index: 1;
    -o-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 100%;
    text-align: center;
}
.info_Box p {
    font-size: 14px;
    color: #fff;
    font-weight: bold;
    margin: 10px 0;
}
.info_Box h2 {
    font-size: 14px;
    color: #fff;
    font-weight: bold;
    margin: 10px 0;
}
.banners_wrap {
    ddisplay: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center;
    margin: 12px 8px 0 8px;
    flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
}
.banner_box {
    position: relative;
    overflow: hidden;
}
.banner_box {
    width: 511px;
    height: 287px;  
    border-radius: 4px;
    background-size: cover;
    text-align: center;
}

.banner_box h2 {
    font-size: 42px;
    font-weight: 800;
    color: #fff;
    padding-top: 93px;
}
.banner_box a {
   font-size: 20px;
    font-weight: 600;
    background: #ff6600;
    border-radius: 4px;
    padding: 14px 74px;
    margin-top: 38px;
    display: inline-block;
    color: white;
}
.banner_box a:hover {
    background: #fc9b6f;
    text-decoration: none;
}
.league_pl {
 background:
    linear-gradient(
      rgba(0, 51, 101, 0.8),
      rgba(0, 51, 101, 0.8)
    ),
    url(https://ticket2test.fabianbaehrendtz.se/img/banner-pl.jpeg);
}

.league_ll {
 background:
    linear-gradient(
      rgba(0, 51, 101, 0.8),
      rgba(0, 51, 101, 0.8)
    ),
    url(https://ticket2test.fabianbaehrendtz.se/img/banner-ll.jpeg);
}

.league_sa {
 background:
    linear-gradient(
      rgba(0, 51, 101, 0.8),
      rgba(0, 51, 101, 0.8)
    ),
    url(https://ticket2test.fabianbaehrendtz.se/img/banner-sa.jpeg);
}
.banner_box:nth-child(2) {
    margin: 0 8px;
}
.content {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    justify-content: flex-start;
}
.sidebar-left {
    flex-basis: 265px;
    padding: 32px 15px 0;
}
.sidebar-right {
    flex-basis: 290px;
    padding: 22px;
    max-width: 320px;
    border-radius: 4px;
}
.main-content {
    padding: 0 10px 0 10px;
    flex-basis: 1030px;
    flex-grow: 1;
}
.tickets_wrap ul li {
    list-style: none;
    background: #deeef6;
    flex-grow: 1;
    margin-bottom: 5px;
    /*padding: 15px;*/
    padding-top: 10px;
    padding-bottom: 10px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    /*margin-right: 8px;*/
}
.tickets_wrap ul li:hover {
    background: #ededed;
}
.tickets_wrap ul li:hover i {
    color: #003365;
}
.tickets_wrap ul {
    list-style: none;
    padding-left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    box-sizing: border-box;
}
.t_date_box h6 {
    margin: 0;
    font-size: 12px;
    color: #003365;
    font-weight: 600;
    text-transform: capitalize;
    min-height: 14px;
}
.t_date_box h4 {
   text-align: center;
}
.t_date_box p {
    margin: 0;
    font-size: 14px;
    color: #003365;
    font-weight: 400;
    min-height: 16px;
}
.t_text_box h4 {
    margin: 0;
    font-size: 10px;
    color: #003365;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.t_content_box {
    display: inline-block;
    vertical-align: top;
}
.i_b {
    display: inline-block;
    vertical-align: middle;
}
.t_text_box h3 {
    margin: 0;
    font-size: 15px;
    color: #003365;
    font-weight: 400;
    min-height: 16px;
}
.t_text_box h5 {
    margin: 0;
    font-size: 12px;
    color: #003365;
    font-weight: 600;
    overflow: hidden;
    min-height: 15px;
}
.t_text_box h6 {
    margin: 0;
    font-size: 12px;
    color: #ff5000;
    font-weight: 600;
    min-height: 15px;
}
.t_link_box a {
    margin: 0;
    font-size: 12px;
    color: #fff;
    font-weight: normal;
    text-decoration: none;
    background: #ff6600;
    padding: 13px 18px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.t_link_box:hover {
    /*background: #fc9b6f;*/
}

.t_link_box_new:hover {
    background: #fc9b6f;
}

.t_text_box {
    overflow: hidden;
    flex-basis: 35%;
    /*flex-basis: 168px;*/
    /*padding-right: 15px;
    padding-left: 15px;*/
    text-align: left;
    min-height: 46px;
    min-width: 150px;
}
.event-template .t_text_box {
    flex-basis: 25%;
}
.t_text_box_search {
    flex-basis: 80%;
    text-align: justify;
    font-size: 12px;
}
.t_image_box {
    padding-right: 10px;
}
.event-template .t_image_box {
    margin-right: auto;
    margin-left: auto;
}

.event-template p {
    margin-bottom: 0px;
}

.event-template h2 {
    font-size: 18px;
    color: #003365;
    font-weight: 600;
}
.event-template-alt h2 {
    font-size: 18px;
    color: #003365;
    font-weight: 600;
}
.category-icon {
    display: inline-block;
    width: 36px;
    height: 36px;
    background-size: 100%;
}
h4.event_group_title {
    margin: 0;
    font-size: 18px;
    color: #003365;
    font-weight: 600;
}
#trustpilot {
    padding-bottom: 20px;
    text-align: center;
}
#trustpilot p {
    color: #878787;
    font-size: 14px;
    text-align: center;
}
.main > #trustpilot {
    padding-top: 30px;
}
.trustpilot-widget iframe {
    display: inline-block !important;
}
.trygg_box {
    text-align: center;
    padding-bottom: 20px;
}
.kontakta_oss_wrap h3 {
    margin: 0;
    font-size: 14px;
    color: #fff;
    font-weight: bold;
    background: #003365;
    padding: 15px 0;
}
.kontakta_oss_wrap h3 > a {
    margin: 0;
    font-size: 14px;
    color: #fff;
    font-weight: bold;
    background: #003365;
    text-align: center;
    padding-left: 0;
}
.kontakta_oss_wrap {
    background: #ededed;
    text-align: center;
}
.kontakta_oss_wrap a {
    display: block;
    text-align: left;
    position: relative;
    margin: 0;
    font-size: 14px;
    color: #003365;
    font-weight: bold;
    text-decoration: none;
    padding-left: 15px;
}
/* IKONERNA AR SVG I EN data:-URI, INTE GLYFER UR FONT AWESOME.

   Fyra glyfer holl kvar hela Font Awesome pa sajten: fem hamtningar mot tva
   tredjepartsvardar, 85 kB varav 72 kB webfont, plus en 404 pa en halv sekund,
   i en seriell kedja sex nivaer djup. Uppmatt 2026-09-05. En inbakad SVG kostar
   ingen hamtning alls, gar inte sonder nar en fjarrtjanst forsvinner, och visar
   ingenting fel medan en font laddar.

   Fargen star inbakad i markupen som %23, alltsa en kodad brakod: en data:-URI
   ar en URL och ett rott brakod hade avslutat den. currentColor fungerar inte i
   background-image, den arver ingenting.

   Storleken ar den gamla teckenstorleken. En glyf ritades fran baslinjen och en
   bakgrundsbild fran overkanten, sa top ar justerad dar den behovdes. */
a.l_contact_phone:before {
    content: '';
    position: absolute;
    top: 22px;
    left: 40px;
    width: 28px;
    height: 28px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23003365' d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.32.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02z'/%3E%3C/svg%3E") no-repeat center / 28px 28px;
}
.kontakta_oss_wrap a span {
    margin: 0;
    font-size: 12px;
    color: #003365;
    font-weight: bold;
}
a.l_contact_phone {
    padding-top: 25px;
    padding-left: 70px;
}
a.l_contact_mail {
    margin: 0;
    font-size: 14px;
    color: #003365;
    text-transform: none;
    font-weight: bold;
    padding-top: 25px;
    padding-left: 70px;
    padding-bottom: 25px;
    position: relative;
}
a.l_contact_mail:before {
    content: '';
    position: absolute;
    top: 22px;
    left: 37px;
    width: 27px;
    height: 27px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003365' stroke-width='1.6'%3E%3Crect x='2.5' y='5.5' width='19' height='13' rx='1.5'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") no-repeat center / 27px 27px;
}
.t_image_box i {
    color: #fff;
    font-size: 35px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    min-width: 35px;
}
.live_chat_wrap {
    padding-top: 65px;
}
.chat_title {
    background: #003365;
    position: relative;
    height: 46px;
}
.chat_title i {
    color: #003365;
    position: absolute;
    top: -57px;
    font-size: 63px;
    right: 35px;
}
.chat_content {
    background: #ededed;
    text-align: center;
    padding: 15px 0;
}
.chat_content a {
    margin: 0;
    font-size: 14px;
    color: #003365;
    font-weight: bold;
    text-decoration: none;
}
.l_social_box {
    border-top: 2px solid #11416f;
    border-bottom: 2px solid #11416f;
    margin-top: 15px;
    padding: 13px 0;
}
.l_soc_title p {
    margin: 0;
    font-size: 14px;
    color: #003365;
    font-weight: bold;
    text-decoration: none;
}
.l_soc_title {
    display: inline-block;
    vertical-align: top;
    width: 60%;
    text-align: right;
    padding-right: 10px;
}
.l_social_irems {
    display: inline-block;
    vertical-align: top;
}
.l_social_irems a {
    margin-right: 6px;
}
.last_link a {
    font-size: 14px;
    color: #003365;
    font-weight: normal;
    text-decoration: none;
}
.last_link {
    padding-top: 40px;
}
.last_link.bottom-padding {
    padding-top: 30px;
    padding-bottom: 30px;
}
.ten_img_box {
    display: inline-block;
}
.ten_cont_box {
    display: inline-block;
    vertical-align: top;
    padding-left: 5px;
    padding-top: 15px;
}
.ten_cont_box p {
    margin: 0;
}
.ten_ar_container {
    padding-top: 20px;
    text-align: center;
}
.t_date_box {
    text-align: center;
}
.search_page_content {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    justify-content: flex-start;
    padding-top: 30px;
}
.category_banner {
    text-align: left;
    margin-bottom: 30px;
}
.event-template img,
.category_banner center img {
    width: 100%;
    /*padding-bottom: 40px;*/
}
/*.event-template p > img,
.event-template table img {
    width: auto;
}*/
.event-template .t_date_box {
    overflow: hidden;
    flex-basis: 30%;
}
.t_date_box {
    flex-basis: 20%;
    min-height: 30px;
    min-width: 90px;
}
.event-template .subcategory .t_date_box {
    flex-basis: 40%;
}
/*
.event-template .t_date_box h6 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}
*/
.event-template .tickets_wrap li.ticket_item {
    justify-content: space-between;
}
.content-from-cms.template-subcategory-with-text .t_date_box {
    flex-basis: 50%;
}
.content-from-cms.template-subcategory-with-text .t_date_box h6 {
    font-size: 12px;
}
.content-from-cms.template-subcategory-with-text .t_image_box {
    flex-basis: 16%;
}
.category_banner img {
    width: 100%;
    padding-bottom: 40px;
}
.event-template {
	padding-top: 15px;    
}
.category_banner {
    font-size: 10px;
    color: #706f6f;
    font-weight: bold;
    padding-bottom: 10px;
    text-align: left;
    background: url('images/event-banner.png') no-repeat;
    background-size: cover;
    position: relative;
    min-height: 130px;
    margin-bottom: 20px;
    margin-right: 7px;
}
.category_banner h1 {
    margin: 0;
    font-size: 14px;
    color: #003365;
    font-weight: bold;
    text-align: left;
}
.category_banner a {
    color: #ff5000;
    text-decoration: none;
}
.main-buy-content {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    padding-top: 11px;
    padding-bottom: 30px;
    border-top: 2px solid #11416f;
}

.main-buy-content .tickets_wrap li.ticket_item, .main-buy-content .tickets_search_wrap li.ticket_item { flex-basis: 100%; }
.ticket_by_select {
    margin: 0;
    font-size: 12px;
    color: #003365;
    text-transform: inherit;
    font-weight: normal;
    flex-basis: 100px;
}
.left-side-content {
    position: relative;
    flex-basis: 455px;
    padding: 0 0px;
}
.right-side-content {
    flex-basis: 100%;
    padding-left: 35px;
}

/*FOOTER*/

.partners {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center;
    padding-bottom: 12px;
    flex-wrap: wrap;
}
.copyright_nav {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center;
    padding: 0 50px/* 50px*/;
    min-height: 40px;
}
.top_nav {
    text-align: right;
}
.top_nav ul {
    margin-top: 0;
    padding-top: 15px;
    padding-left: 0;
    padding-right: 22px;
}
.top_nav ul li {
    display: inline-block;
}
.top_nav ul li a {
    text-decoration: none;
    color: #fff;
    padding: 0 12px;
    font-size: 14px;
    font-weight: normal;
    font-family: Arial, sans-serif;
}
.top_nav ul li a:hover {
    color: #8bbde0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.footer_bottom {
    background: #003365;
}
.copyright p {
    color: #fff;
    font-family: Poppins, Arial, sans-serif;
    font-weight: normal;
    font-size: 14px;
    padding-top: 15px;
}
.top_nav ul li:last-child a {
    border-right: 1px solid transparent;
}
.partners_box {
    padding: 0 5px;
    align-items: baseline;
}
img.grayscale {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
}
.category_nav ul ul {
    position: absolute;
    top: 21px;
    left: -2px;
    text-align: left;
    background: #003365;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    padding: 5px;
    z-index: 1;
}
.category_nav ul li a:hover ul{
    display: block;
}
.category_nav ul ul li a {
    text-decoration: none;
    border-bottom: none;
    font-size: 12px;
}
#primary_nav_wrapper a {
    text-decoration: none;
    color: white;
    border-bottom: none;
    font-size: 16px;
}
#primary_nav_wrapper ul {
    list-style: none;
}
#primary_nav_wrapper .first-level-item {
    margin: 30px 0;
}
#primary_nav_wrapper .first-level-item > a {
    border-bottom: 2px solid white;
}
#primary_nav_wrapper .first-level-item .child {
    margin-bottom: -10px;
    margin-top: 10px;
    display: none;
}
#primary_nav_wrapper .first-level-item .child li {
    display: block;
}
#primary_nav_wrapper .fa {
    margin-left: 20px;
    color: white;
    cursor: pointer;
}
#primary_nav_wrapper .hidden {
    display: none;
}
#primary_nav_wrapper .child li {
    padding: 2px 0;
}
#primary_nav_wrapper .child li a {
    font-size: 14px;
}
ul.parent {
    margin-bottom: 0;
}
#primary_nav_wrap{
    margin-top:15px;
    text-align: center;
}
#primary_nav_wrap ul{
    list-style:none;
    position:relative;
    float:none;
    padding:0;
    display: inline-block;
    margin-bottom: 0;
}
#primary_nav_wrap ul a {
    color: #fff;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    border-bottom: 2px solid #FFF;
}
#primary_nav_wrap ul li {
    position:relative;
    float:left;
    margin:0;
    padding-right: 14px;
}
#primary_nav_wrap ul ul{
    display:none;
    position:absolute;
    top: 20px;
    left:0;
    background: #003365;
    padding:0;
    z-index: 1;
    text-align: left;
    padding: 10px;
    padding-top: 0;
    border-top: 10px solid transparent;
}
#primary_nav_wrap ul ul li{
    float:none;
    width:200px
}
#primary_nav_wrap ul ul a {
    border-bottom: none;
    display: inline-block;
    border-top: 5px solid transparent;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    font-size: 12px;
}
#primary_nav_wrap ul ul a:hover {
    opacity: .7;
}
#primary_nav_wrap ul ul ul{
    top:0;
    left:100%
}
#primary_nav_wrap ul li:hover > ul{
    display:block
}
/* PLUSTECKNET RITAS HAR, INTE AV EN FONT.

   Klassnamnet .fa-plus star kvar med flit. standard.js satter in ikonen i
   undermenyerna, och /ru/service/top_category_links.html har den hardkodad i
   redaktorsinnehallet. Bytte vi namn hade den senare tappat sin ikon, och den
   filen ligger i VFS och inte i git.

   Tva streck ur en gradient och ingen glyf: ett plustecken ar for enkelt for
   att kosta en hamtning.

   BADA STRECKEN LIGGER I :before. Regeln nedanfor ger .fa:after en utokad
   traffyta, och ett element har bara ETT ::after: hade det lodrata strecket
   legat dar hade den ena regeln slagit ut den andra, och plustecknet blivit ett
   minustecken eller traffytan forsvunnit. Vilken av dem berodde pa ordningen i
   filen, eftersom bada vager lika.

   display och matt pa <i>:et sjalvt: utan glyf ar elementet noll brett, och
   raden hade dragit ihop sig. */
.first-level-item .fa-plus{
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: middle;
}
.first-level-item .fa-plus:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    background:
        linear-gradient(currentColor, currentColor) no-repeat center / 14px 2px,
        linear-gradient(currentColor, currentColor) no-repeat center / 2px 14px;
}

/* Extending the hit area
*/
.first-level-item .fa{
    position: relative;
}
.first-level-item .fa:after{
    content: '';
    position: absolute;
    top: -10px; right: -10px;
    bottom: -10px; left: -10px;
}
/*mobile MENU*/

.glyphicon-home {
    color: white;
    font-size: 1.5em;
    margin: 5px auto 0;
}
.menu-toggle {
    display: none;
}
ul#menu-main-navigation {
    padding-left: 0;
    text-align: right;
    margin-top: 0;
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 15px;
    margin-bottom: 0;
    font-size: 0;
}
ul#menu-main-navigation li {
    padding: 0 5px 0 4px;
    border-left: 1px solid transparent;
    border-right: 1px solid white;
}
ul#menu-main-navigation li:last-child {
    border-right: 1px solid transparent;
}
ul#menu-main-navigation li a {
    border-bottom: none;
    text-transform: inherit;
    font-weight: normal;
    font-size: 14px;
}
.bread_crumbs li {
    list-style: none;
    display: inline-block;
}
.bread_crumbs li a {
    margin: 0;
    font-size: 14px;
    color: #003365;
    font-weight: 600;
    text-decoration: none;
}
.stadium_wrap {
    /* padding-top: 75px; */
}
.stadium_wrap{
    position: -webkit-sticky;
    position: sticky;
    /* Avståndet till skärmens överkant när arenan klistrar sig fast. Det finns
       ingen fixerad header över 768px, så de 110px som stod här tidigare svarade
       inte mot något och lästes som en tom vit spalt bredvid biljettlistan.
       Mobilvärdet står kvar orört i max-width: 768px, där headern ÄR fixerad. */
    top: 16px;
    text-align: center;
}
.bread_crumbs li:last-child a {
    color: #ff5000;
}
.stadium_info_img {
    display: inline-block;
    vertical-align: top;
}
.stafium_info_content {
    display: inline-block;
    vertical-align: top;
    /* width: 70%; */
    padding-left: 10px;
}
.stadium_info_section {
    text-align: left;
        margin: 2px 0;
        padding: 2px 0;
        border-top: 1px solid #e9eef5;
        border-bottom: 1px solid #e9eef5;
    display: inline-block;
    vertical-align: top;
    padding-left: 10px;
    width: 100%
}
.by_title_box p {
    margin: 0;
    font-size: 14px;
    color: #003365;
    font-weight: bold;
    text-decoration: none;
}
.by_title_box p:not(:first-child) {
    padding-left: 10px;
}
li.ticket_by_item {
    border-left: 11px solid #11ba00;
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    background: #deeef6;
    margin-bottom: 5px;
    padding: 10px 10px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
li.ticket_by_item:hover {
    background: #ededed;
}
li.ticket_by_item select {
    -moz-appearance: menulist;
    -webkit-appearance: menulist;
    width: 60px;
    padding: 10px 0 10px 10px;
    text-align: center;
    background-color: white;
}
.ticket_by_select span {
    padding-left: 5px;
}

.by_title_box {
    border-top: 2px solid #11416f;
    border-bottom: 2px solid #11416f;
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: space-around;
    align-items: center;
}
.by_title_box_search {
    justify-content: flex-start;
}
.ticket_by_info p {
    margin: 0;
    font-size: 12px;
    color: #003365;
    text-transform: inherit;
    font-weight: normal;
}
.ticket_by_sector.t_by p {
    margin: 0;
    font-size: 12px;
    color: #003365;
    text-transform: inherit;
    font-weight: normal;
}
.tickets_by_wrap ul {
    padding-left: 0;
}
.t_by a {
    padding: 7px 15px;
}
.ticket_by_select {
    display: flex;
    margin: 0;
    font-size: 12px;
    color: #003365;
    text-transform: inherit;
    font-weight: normal;
    flex-basis: 90px;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.ticket_by_select span {
    padding-left: 5px;
}
.ticket_by_price h6 {
    margin: 0;
    font-size: 16px;
    color: #003365;
    text-transform: inherit;
    font-weight: bold;
}
.ticket_by_info {
    flex-basis: 123px;
}
.ticket_by_sector {
    flex-basis: 75px;
}
.ticket_by_price {
    min-width: 70px;
    flex-basis: 95px;
}
.t_link_box .t_by {
    flex-basis: 60px;
}
.by_ticket_page_title h2 {
    margin: 0 0 5px;
    font-size: 24px;
    color: #003365;
    font-weight: normal;
    text-decoration: none;
}
.bread_crumbs ul {
    margin: 0;
    padding-left: 0;
}
.stadium_wrap img {
    width: 100%;
    height: auto;
    display: block;
}
.content_four_column {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    justify-content: flex-start;
    padding-top: 30px;
    margin-bottom: -20px;
}

/*EVENT PAGE*/

h6.event_group_subtitle {
    margin: 0;
    font-size: 10px;
    color: #706f6f;
    font-weight: bold;
    padding-bottom: 10px;
}
h6.event_group_subtitle a {
    color: #ff5000;
    text-decoration: none;
}

/*SEARCH PAGE*/

.by_title_box a {
    margin: 0;
    font-size: 14px;
    color: #003365;
    font-weight: bold;
    text-decoration: none;
}
.by_title_box a:hover {
    color: #ff5000;
}
.tickets_search_wrap ul {
    padding-left: 0;
}
.tickets_search_wrap ul li {
    list-style: none;
    background: #c5e5f3;
    flex-grow: 1;
    margin-bottom: 5px;
    padding: 15px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.tickets_search_wrap i {
    font-size: 57px;
}
.tickets_wrap li.ticket_item,
.tickets_search_wrap li.ticket_item {
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    align-items: center;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    flex-flow: row wrap;
    padding: 8px;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 49.5%;
    flex: 0 1 49.5%;
    box-sizing: border-box;
    min-width: 392px;
}
.tickets_search_wrap li.ticket_item {
    justify-content: space-between;
}
.tickets_search_wrap li.ticket_item:hover {
    background: #ededed;
}
.tickets_search_wrap li.ticket_item:hover i {
    color: #003365;
}
.tickets_search_wrap .t_link_box a {
    padding: 13px 18px;
    display: block;
    text-align: center;
    margin-top: 15px;
}
.t_text_box_search h4 {
    text-align: left;
    padding-bottom: 10px;
    font-size: 13px;
}
.search .sidebar-left,
.search .sidebar-right {
    align-self: flex-end;
}
.search .sidebar-left {
    flex-basis: 232px;
    padding-bottom: 50px;
}
.search .sidebar-right {
    flex-basis: 226px;
    padding: 0 30px 105px;
}
.search .left-side-content {
    flex-basis: 393px;
    padding: 0 23px;
}
.search .right-side-content {
    flex-basis: 575px;
    padding: 30px 0 0;
}

/*FLEX for search-filter*/

.search_form_wrap {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-flow: column wrap;
    background: #EDEDED;
    padding: 20px;
    margin: 10px 0 15px;
}
.search_filter {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-flow: row wrap;
}
.search_filter .search_form_title,
.clear_form {
    flex-basis: 50%;
}
.search_keywords input,
.search_city textarea {
    flex-basis: 100%;
    resize: none;
}
.search_filter_inputs {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-flow: row wrap;
    justify-content: space-between;
    flex-basis: 100%;
}
.search_filter_inputs input {
    flex: 0 1 40%;
    margin-bottom: 10px;
    width: 100%;
}
.search_form_wrap .search_filter {
    margin: 20px 0;
}
.search_form_wrap .search_form_title {
    font-size: 14px;
    color: rgb(0, 51, 101);
    font-weight: bold;
    margin-top: 3px;
    margin-bottom: 6px;
}
.search_form_wrap > .search_form_title .fa {
    margin-right: 5px;
}
.search_form_wrap .clear_form {
    font-size: 12px;
    color: #ff5000;
    text-align: right;
    margin-top: 6px;
    margin-bottom: 6px;
}
.search_form_wrap .search_date,
.search_form_wrap .search_price {
    margin: 0;
}
*{
    min-height:0;
    min-width:0;
}
.search_form_wrap .search_category {
    margin-top: 15px;
    margin-bottom: 15px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}
.search_category  .search_form_title{
    flex-basis: 100%;
}
.search_form_wrap .search_city {
    margin-top: -5px;
}
.search_form_wrap input,
.search_form_wrap textarea {
    padding: 10px;

    border: 1px solid #003365;
}
.search_form_wrap .search_category label {
    display: block;
    font-size: 14px;
    color: rgb(0, 51, 101);
    margin-bottom: 7px;
}
.search_form_wrap .search_category .search_category_title {
    margin-bottom: 0px;
}
.search_form_wrap .search_category .checkboxes {
    margin-top: 20px;
}
.search_form_wrap > .clear_form:last-child {
    margin-top: 30px;
}
.search .by_title_box {
    padding: 7px 0;
    margin-bottom: -7px;
}
.search .t_image_box {
    padding-right: 0;
}
.search .t_text_box {
    padding: 0;
}

/*square radio-inputs*/

.search_form_wrap input[type="radio"] {
    display: none;
}
.search_form_wrap input[type="radio"] + label {
    cursor: pointer;
}
.search_form_wrap input[type="radio"] + label > span {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: -3px 18px 0 0;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #003365;
}
.search_form_wrap input[type=radio]:not(old):checked + label > span > span {
    display: block;
    width: 6px;
    height: 6px;
    margin: 2px;
    background: #003365;
}

/*no-angles buttons*/

.t_link_box {
    position: relative;
    display: inherit;
    min-width: 83px;
    min-height: 40px;
    /*margin-right: -10px;*/
    /*padding-right: 4px;*/
    /*flex-basis: 25%*/
}

.t_link_box_new {
    height: 30px;
    background-color: #FF6600;
    text-align: center;
    padding-top: 10px;
    border-radius: 5px;
    margin-top: 10px
}
.t_link_box:before,
.t_link_box:after,
.t_link_box a:before,
.t_link_box a:after {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #c5e5f3;
    border-radius: 50%;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.t_link_box:before {
    left: -5px;
    top: -5px;
}
.t_link_box:after {
    right: -5px;
    bottom: -5px;
}
.t_link_box a:before {
    right: -5px;
    top: -5px;
}
.t_link_box a:after {
    left: -5px;
    bottom: -5px;
}
.tickets_search_wrap .t_link_box:before {
    top: 10px;
}
.tickets_search_wrap .t_link_box a:before {
    top: 10px;
}
li.ticket_by_item:hover .t_link_box:before,
li.ticket_by_item:hover .t_link_box:after,
li.ticket_by_item:hover .t_link_box a:before,
li.ticket_by_item:hover .t_link_box a:after,
li.ticket_item:hover .t_link_box:before,
li.ticket_item:hover .t_link_box:after,
li.ticket_item:hover .t_link_box a:before,
li.ticket_item:hover .t_link_box a:after {
    background: #ededed;
}
.logo.bl img {
    width: 70%;
    max-width: 260px;;
}
.star_logo.bl img {
    width: 100%;
    max-width: 220px;
    /*opacity: 0;*/
    height: 42px;
    width: 42px;
}
.ten_img_box img {
    width: 100%;
}
.slogan_text {
    font-size: 12px;
    color: #ffffff;
    text-align: center;
}

/*Fixes from feedback*/

#form1 input[type="checkbox"] {
    -webkit-appearance: checkbox;
    -moz-appearance:    checkbox;
    appearance:         checkbox;
}
#form1 input[type="radio"] {
    -webkit-appearance: radio;
    -moz-appearance:    radio;
    appearance:         radio;
}
#form1 input[type="text"] {
    -webkit-appearance: textfield;
    -moz-appearance:    textfield;
    appearance:         textfield;
}
#form1 textarea {
    -webkit-appearance: textarea;
    -moz-appearance:    textfield-multiline;
    appearance:         textarea;
}

/* PAYMENT */

.payment-main-content {
    -ms-flex-preferred-size: 900px;
        flex-basis: 900px;
    -ms-flex-positive: 1;
        flex-grow: 1;
    display: block;
    display: -ms-flexbox;
    -ms-flex-align: start;
        align-items: flex-start;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    font-size: 14px;
    -ms-flex-line-pack: start;
        align-content: flex-start;
    padding-top: 11px;
    padding-bottom: 30px;
    border-top: 2px solid #11416f;
    margin-top: 15px;
    padding: 0 20px 0 10px;
    flex-basis: 1030px;
    flex-grow: 1;
}
.final-price{
    margin-top: 10px;
}
p.calculator {
    font-weight: bold;
    font-family: Poppins, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    line-height: 14px;
    text-align: left;
}
p.title{
    font-weight: bold;
    font-family: Poppins, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    line-height: 14px;
    text-align: left;
}
p.total-amount{
    font-weight: bold;
    font-family: Poppins, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    line-height: 14px;
    text-align: left;
}
#total_price {    
    font-weight: bold;
    font-family: Poppins, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    line-height: 14px;
}
.order-information, .order-overview, .customer-details, .general-information{
    justify-content: space-around;
    align-items: center;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    flex-flow: row wrap;
    border: 1px #D1CFD1 solid;
}
.order-information{
    order: 1;
    flex-basis: 53%;
    min-height: 170px;
    padding: 20px 11px;
    min-width: 300px;
}
.order-information table,
.order-information table * {
    font-weight: bold;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
}
.order-information table td {
    padding: 5px 0;
}
tr.first-row p:first-child {
    margin-bottom: 20px;
}
tr.first-row p:last-child {
    margin-bottom: 20px;
}
.first-row td:first-child{
    vertical-align: top;
}
.order-overview{
    order: 2;
    flex-basis: 35%;
    min-height: 170px;
    padding: 20px;
    font-weight: bold;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    min-width: 300px;
}
.order-overview p{
    display: inline;
}
.price-calculator {
    margin-bottom: 70px;
    margin-top: 20px;
}
.order-overview h3, .order-information h3{
    margin-bottom: 10px;
    font-size: 18px;
}
.separator{
    border-color: #263B4E;
}
.punkt {
    border-radius: 50%;
    border-width: 1px;
    border-color: #003365;
    border-style: solid;
    background-color: #003365;
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 20px;
    vertical-align: top;
}
.guarantees-description {
    display: inline-block;
    word-wrap: break-word;
    width: 80%;
    font-size: 11px;
}
.guarantee-link{
    text-decoration: none;
    cursor: pointer;
    color: #000;
    font-weight: 900;
}
.guarantee-description{
    font-style: italic;
}
.customer-details{
    order: 3;
   
}
.customer-details input:active {
    outline: 1px solid #003364;
}
.customer-details input:focus {
    outline: 1px solid #003364;
}
.field-name{
    display: inline-block;
    width: 50%;
}
.first-name{
    width: 40%;
}
.last-name{
    width: 59%;
}
.field-name input{
    margin-top: 20px;
}
.customer-details form{
    font-weight: bold;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.personal-info, .terms-block{
    padding: 10px;
}
.payment-options{
    padding: 0px;
}
.customer-details input.radio{
    -webkit-appearance: radio;
    width: 20px;
    height: 20px;
}
.customer-details input.checkbox{
    -webkit-appearance: none;
    width: 20px;
    height: 25px;
}
.customer-details input{
    line-height: 30px;
    border: 1px solid #DEDCDE;
    margin-top: 10px;
    margin-bottom: 5px;
}
.customer-details select {
    display: block;
    line-height: 30px;
    border: 1px solid #DEDCDE;
    margin-top: 10px;
    margin-bottom: 5px;
    width: 60%;
    padding: 0;
    text-indent: 10px;
    height: auto;
}
.definition {
    display: inline-block;
    width: 25%;
}
.field-input {
    display: inline-block;
    width: 60%;
}
.last-name input{
    width: 100%;
}
.form-title{
    background-color: #0A3663;
    color: #fff;
    font-size: 14px;
    padding: 15px;
}
.general-information{
    order: 4;
    flex-basis: 35%;
    padding: 20px 20px 0px;
    font-weight: bold;
    font-family: Poppins, "Helvetica Neue", Helvetica, sans-serif;
    border: 2px solid #003365;
    border-radius: 4px;
    padding: 20px;
}
.general-information h3 {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #003365;
}
.infobox {
border: 2px solid #003365;
border-radius: 4px;
padding: 20px;
margin-bottom: 10px
}

.infobox h3 {
font-size: 18px;
font-weight: 600;
color: #003365;
}
.infobox h3 a {
font-size: 18px;
font-weight: 600;
color: #003365;
}
.infobox ul {
padding: 0;
}

.infobox ul li {
color: #222222;
font-size: 14px;
font-weight: 500;
list-style: none;
/*background: url(/img/check.png) no-repeat left center;*/
padding: 5px 5px 5px 30px;
margin: 0;
vertical-align: middle;
}
.infobox p a {
color: #222222;
font-size: 14px;
font-weight: 400;
list-style: none;
/*background: url(/img/arrow.png) no-repeat left center;*/
padding: 5px 5px 5px 0px;
margin: 0;
vertical-align: middle;
}
.infobox a {
color: #222222;
font-size: 14px;
font-weight: 500;
list-style: none;
margin: 0;
vertical-align: middle;
padding-top: 4px;
}
.input4 {
    border: 0;
    background-color: #deeef6;
    width: 100%;
    font-size: 14px;
    color: #222222;
    padding: 10px 8px;
    border-radius: 4px;
    font-weight: 500;
    width: -webkit-fill-available;
    margin-top: 20px;
}

.input4::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #749fc4;
  opacity: 1; /* Firefox */
}

.input4::-ms-input-placeholder { /* Microsoft Edge */
  color: #749fc4;
}
       
.input4:focus::placeholder {
  opacity: 0.4;
}
.input4:focus {
  outline: 0;
}

.input4::-webkit-input-placeholder { color: #749fc4; }
.input4:-moz-placeholder { color: #749fc4; }

.input4:focus::-webkit-input-placeholder { opacity: 0.4; }
.input4:focus:-moz-placeholder { opacity: 0.4; }
.sidebar-left .general-information {
    text-align: left;
}
.general-information .separator{
    margin-top: 20px;
}
.guarantees-item {
    margin-bottom: 15px;
}
.guarantees-block h3{
    margin-bottom: 20px;
    font-size: 18px;
}
.about-block h3{
    margin-bottom: 15px;
    margin-top: 15px;
    font-size: 18px;
}
.wrapper-div-first{
    flex-flow: row wrap;
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-basis: 65%;
}
.wrapper-div-second{
    flex-flow: row wrap;
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-basis: 35%;
}
.terms-block .termin-checking-box {
    position: relative;
    cursor: pointer;
}
.terms-block label span{
    margin-left: 25px;
    line-height: 25px;
}
.terms-block label::before {
    position: absolute;
    top: -10px;
    left: -27px;
    z-index: 1;
    width: 16px;
    height: 16px;
    content: '';
    transition: all 0.3s ease-in-out;
}
.terms-block input[type="checkbox"] {
    display: inline-block;
    border: 1px solid #DEDCDE;
}
/* BOCKEN I VILLKORSRUTAN. Kunden maste kryssa den for att kunna kopa, sa den
   ska inte kunna bero pa att en fjarrfont hinner fram. Samma SVG som pa
   betalsidan nedan, och lutningen ar den gamla.

   width och height satts har och inte bara i basregeln: den ger 16 px, och en
   glyf pa 30 px spillde ut over den kanten utan att bry sig. En bakgrundsbild
   klipps i stallet mot rutan, sa ytan maste vara sa stor som bilden. */
.terms-block input[type="checkbox"]:checked ~ label::before {
    transform: rotate(-20deg);
    content: '';
    width: 26px;
    height: 26px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23003364' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center / 26px 26px;
    position: absolute;
    top: -8px;
    left: -35px;
}
a.terms-service {
    color: #43688D;
}
.payment-options .buy_form_fields {
    float: none;
}
.payment-options input[type="radio"] {
    display: none;
}
.payment-options input[type="radio"] + label {
    cursor: pointer;
}
.payment-options input[type="radio"] + label > span {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: -3px 18px 0 0;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #003365;
    border-radius: 50%;
}
.payment-options input[type=radio]:not(old):checked + label > span > span {
    display: block;
    width: 14px;
    height: 14px;
    margin: 2px;
    background: #003365;
    border: 1px solid #003365;
    border-radius: 50%;
}
.options-item{
    margin-bottom: 10px;
    font-size: 14px;
}
.termin-container {
    width: 100%;
    padding:40px 0 15px 30px;
    box-sizing: border-box;
}
.terms-block .ticket_item {
    width: 125px;
    margin: 0px auto 0px;
}
.terms-block .t_link_box {
    position: relative;
    white-space: nowrap;
}
.terms-block .t_link_box:before,
.terms-block .t_link_box:after,
.terms-block .t_link_box a:before,
.terms-block .t_link_box a:after {
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.terms-block .t_link_box:before {
    left: -5px;
    top: -17px;
}
.terms-block .t_link_box:after {
    right: 2px;
    bottom: -17px;
}
.terms-block .t_link_box a:before {
    right: 3px;
    top: -17px;
}
.terms-block .t_link_box a:after {
    left: -5px;
    bottom: -17px;
}
div.ticket_by_item:hover .t_link_box:before,
div.ticket_by_item:hover .t_link_box:after,
div.ticket_by_item:hover .t_link_box a:before,
div.ticket_by_item:hover .t_link_box a:after,
div.ticket_item:hover .t_link_box:before,
div.ticket_item:hover .t_link_box:after,
div.ticket_item:hover .t_link_box a:before,
div.ticket_item:hover .t_link_box a:after {
    background: #fff;
}
.customer-details-for-event{
    justify-content: space-around;
    align-items: center;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    flex-flow: row wrap;
    border: 1px #D1CFD1 solid;
    order: 3;
    min-width: 300px;
}
.customer-details-for-event .form1 input {
    width: 150px;
}
a.guarantee-link:hover {
    text-decoration: none;
}
select#inpCountry {
    display: block;
    max-width: 160px;
    /*height: 30px;*/
    font-size: 12px;
    color: #333333;
    padding: 5px 2px 0 2px;
    margin: 2px 0 2px 0;
    background-color: #fff;
    border-color: #ccc;
}
#form1 .terms-block .send-order-button{
    width: 252px;
    margin: 0px auto 0px;
}
#form1 .terms-block .send-order-button .t_link_box::before,
#form1 .terms-block .send-order-button .t_link_box::after,
#form1 .terms-block .send-order-button .t_link_box a::before,
#form1 .terms-block .send-order-button .t_link_box a::after { display: none; }
.terms-block .approving-block span {
    top: 10px;
    position: relative;
}
#form1 .approving-payment-block input#termin-check{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: none;
    border: 1px solid #DEDCDE;
    width: 22px;
    height: 25px;
}
#form1 .approving-payment-block .termin-checking-box {
    position: relative;
    cursor: pointer;
}
.approving-payment-block label::before {
    position: absolute;
    top: -10px;
    left: -27px;
    z-index: 1;
    width: 16px;
    height: 16px;
    content: '';
    transition: all 0.3s ease-in-out;
}
.approving-payment-block input[type="checkbox"] {
    display: none;
    border: 1px solid #DEDCDE;;
}
/* Betalsidans godkannande. Samma bock, samma skal, se villkorsrutan ovan. */
.approving-payment-block input[type="checkbox"]:checked ~ label::before {
    transform: rotate(-20deg);
    content: '';
    width: 26px;
    height: 26px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23003364' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center / 26px 26px;
    position: absolute;
    top: 0;
    left: -35px;
}
.approving-payment-block .checkbox{
    display: none;
}
.ticket_item.send-order-button{
    padding-left: 0px
}
.approving-payment-block input[type="checkbox"] ~ label::after{
    content: "";
    position: absolute;
    width: 22px;
    height: 25px;
    border: 1px solid #DEDCDE;
    top: -5px;
    left: -30px;
}
#buy_submit{
    font-size: 20px;
    font-weight: 600;
    background: #ff6600;
    border-radius: 4px;
    padding: 14px 74px;
    margin-top: 38px;
    color: white;
}
#form1 .terms-block .send-order-button {
    width: auto;
    margin-bottom: 12px;
}
.terms-block .ticket_item {
    width: auto;

}
.customer-details-for-event .form1 .last-name input {
    width: 160px;
}
.customer-details-for-event .last-name {
    width: 50%;
    margin-left: 20px;
}
@media (max-width: 640px) {
  .desktoplocation {
    display: none;
  }
}
@media (min-width: 641px) {
  .handheldlocation {
    display: none;
  }
}
@media only screen and (max-width: 1500px) {
    .tickets_wrap ul li {
        width: 100%;
        text-align: center;
    }
    .sidebar-right {
        flex-basis: inherit;
        padding-right: 10px;
    }
    .main-content {
        flex-basis: 800px;
    }
    .customer-details {
        flex-basis: 57%;
    }
    .order-overview {
        padding: 20px;
    }
    .guarantees-description {
        width: 80%;
    }
    .sidebar-left .guarantees-description {
        width: 75%;
    }
    .terms-block label::before {
        top: -25px;
    }
    .terms-block input[type="checkbox"]:checked ~ label::before {
        top: -25px;
    }
    .order-information {
        padding: 20px 14px;
    }
    .first-name, .last-name {
        width: 100%;
    }
    .personal-info input {
        width: 100%;
    }
    .customer-details-for-event {
        flex-basis: 57%;
    }
    .customer-details-for-event .form1 .last-name {
        margin-left: 0;
        width: 100%;
    }
    .customer-details-for-event .form1 input.input1ver2 {
        width: 100%;
    }
    select#inpCountry {
        width: 100%;
    }
    .approving-payment-block input[type="checkbox"]:checked ~ label::before {
        top: 0;
    }
    .approving-payment-block{
        padding: 10px;
	padding-top: 0px;
    }
}

@media only screen and (min-width: 641px) and (max-width: 1440px) {
    #primary_nav_wrapper .first-level-item:last-child .child {
        right: 0;
    }
    .main-buy-content {
        display: block;
    }
}

@media only screen and (max-width: 1440px) {
    .order-overview {
        padding-top: 20px;
        padding-bottom: 45px;
    }
    .tickets-info{
        padding-bottom: 20px;
    }
    .order-information {
        padding: 20px 13px;
    }
    .terms-block label span {
        margin-left: 0px;
        font-size: 11px;
    }
}

@media only screen and (max-width: 1300px) {
    .banner_box img {
        width: 100%;
        height: auto;
    }
    .info_Box {
        /*background: rgba(0, 51, 101, 1);
        -o-transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        position: static;
        padding: 10px 0;*/
    }
    .content_four_column {
        display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        flex-flow: row wrap;
        -ms-flex-flow: row nowrap;
        justify-content: space-around;
        padding-top: 30px;
    }
    .content_four_column .sidebar-left {
        order: 1;
        flex-basis: 30%;
    }
    .content_four_column .sidebar-right {
        order: 2;
        flex-basis: 30%;
    }
    .right-side-content {
        flex-basis: 560px;
    }
    .order-information {
        flex-basis: 53%;
    }
    .payment-main-content {
        padding: 0 40px;
    }
    .order-overview p {
        display: block;
        line-height: 25px;
        float: none;
    }
    .final-price {
        margin-top: 16px;
    }
    .guarantees-description {
        width: 80%;
    }
    .sidebar-left .guarantees-description {
        width: 75%;
    }
    .personal-info input {
        width: 100%;
    }
    .first-name, .last-name {
        width: 100%;
    }
    .price-calculator {
        margin-bottom: 38px;
    }
    .order-overview {
        padding-bottom: 20px;
    }
    .tickets-info{
        padding-bottom: 6px;
    }
    .ticket-information{
        padding-bottom: 20px;
        padding-right: 16px;
    }
}

@media only screen and (max-width: 1025px) {
    .search_nav_box {
        width: 100%;
        order: 3;
    }
    .star_logo {
        order: 2;
        display: none;
    }
    .customer-details-for-event {
        flex-basis: 56%;
    }
    .terms-block label span {
        line-height: 20px;
    }
    .ticket-information {
        padding-bottom: 41px;
        padding-right: 14px;
        flex-basis: 51%;
    }
}

@media only screen and (max-width: 1024px) {
    .banners_wrap {
        flex-flow: row wrap;
        -ms-flex-flow: row wrap;
    }
    .banner_box {
        margin-bottom: 15px !important;
    }
    .sidebar-left {
        flex-basis: 100%;
        order: 2;
    }
    .sidebar-right {
        order: 3;
        flex-basis: 100%;
        /*text-align: center;*/
    }
     .logo {
        width: 100%;
        text-align: center;
    }
    .content {
        flex-flow: row wrap;
        -ms-flex-flow: row wrap;
        justify-content: space-between;
    }
    .trygg_box {
        text-align: center;
    }
    .tickets_wrap ul li {
        width: auto;
        display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        justify-content: space-around;
        align-items: center;
        margin-right: 0;
    }
    .banner_box:nth-child(2) {
        margin: 0;
    }
    .search_page_content .left-side-content {
        order: 1;
        flex-basis: 60%;
        padding: 0 15px;
        margin-bottom: 50px;
    }
    .search_page_content .right-side-content {
        order: 2;
        flex-basis: 100%;
        padding: 0 15px;
    }
    .search_page_content .sidebar-left {
        order: 3;
        flex-basis: 100%;
    }
    .search_page_content .sidebar-right {
        order: 4;
        flex-basis: 100%;
    }
    .search_page_content {
        flex-flow: row wrap;
        -ms-flex-flow: row wrap;
        justify-content: center;
    }
    .customer-details {
    }
    .first-name, .last-name {
        width: 100%;
    }
    .personal-info input {
        width: 100%;
    }
    .price-calculator {
        margin-bottom: 13px;
    }
    .customer-details-for-event {
        flex-basis: 54%;
    }
    .ticket-information {
        padding-bottom: 6px;
    }
}

@media only screen and (max-width: 820px) {
    .star_logo_mobile {
        display: block;
    }
    form.search_header input[type="search"] {
        min-width: 1px;
    }
    .search_wrap {
	padding-top: 0px;
        padding-bottom: 15px;
    }
    .header_box {
        /*padding-top: 15px;*/
    }
    .menu ul li a {
        border-bottom: none;
    }
    nav ul li a:hover {
        border-bottom: none;
    }
    .copyright_nav {
        flex-direction: column-reverse;
    }
    .logo {
        width: 100%;
        text-align: center;
    }
    .by_ticket_page_title h2 {
        font-size: 20px;
    }
    .payment-main-content {
        padding: 20px;
    }
    .order-information, .order-overview, .customer-details, .general-information, .customer-details-for-event {
        flex-basis: 100%;
    }
    .first-name, .last-name, .personal-info input {
        width: 100%;
    }
    .ticket-information {
        padding-bottom: 6px;
    }
}

.logo-checkout {
  margin-bottom: 20px;
}

.logo-checkout img {
  width: 200px;
  height: auto;
}

.logo-mobile {
    margin-left: 30px;
    display: none;
}

.logo-mobile img {
  width: 82px;    /* fixed width for desktop logo */
  height: auto;    /* keeps aspect ratio */
}

@media only screen and (max-width: 768px) {
    .header_box {
        width: 100%;
    }
    header {
        top: 0;
        background: #003365;
        position: fixed;
        height: 160px;
        width: 100%;
        z-index: 99999;
    }
    /* Oförändrat värde, uttryckt här i stället för att ärvas: headern ovan är
       fixerad och 160px hög, så arenans klisteravstånd hör ihop med den och inte
       med desktopvärdet. Att 110 är mindre än 160 betyder att arenan glider in
       under headern, vilket den gjorde redan innan desktopvärdet sänktes. */
    .stadium_wrap {
        top: 110px;
    }
    
    .logo-mobile {
	display: inline-block;
    }

    /* LOGOTYPEN CENTRERAD I HEADERRADEN PÅ MOBIL.

       Absolut och inte med marginaler: då står den mitt i RADEN och inte mitt i
       det som råkar bli över när hamburgaren tagit sin plats till vänster och
       globen sin till höger. Högerhörnet har dessutom ett förstoringsglas på
       ligasidorna och köpsidan men inte på de andra, så en centrering som
       räknar på innehållet hade hamnat på olika ställen på olika sidor.

       Ankaret är #topnav { position: relative } i mediefrågan för 991 px längre
       ner. Den sattes tidigare bara av mobile-search-toggle.jsp, som bara laddas
       där glaset finns, och utan den hade logotypen centrerats mot <header> på
       alla andra sidor, alltså mot en låda som också rymmer informationsbannern.

       Ur flödet betyder också att headerns höjd inte påverkas, och det är värt
       att veta: main:s toppadding följer den höjden, se skriptet efter </header>
       i standard.jsp.

       Bredden 82 px kommer från regeln längre upp i filen. Centrerad på en
       390 px skärm upptar den 154 till 236, medan hamburgaren slutar vid 52 och
       glaset börjar vid 294. På 320 px är marginalen fortfarande 25 px åt varje
       håll. */
    #topnav .logo-mobile {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        margin: 0;
        padding: 0;
        z-index: 1;
    }
    /* Utan display:block bär <img> sitt raddjup, och den lodräta centreringen
       hamnar några pixlar för lågt. */
    #topnav .logo-mobile img { display: block; }
    .logo {
        display: none;
    }
    #primary_nav_wrapper {
        display: none;
    }
    .ticket_by_sector {
        flex-basis: 60px;
    }
    .ticket_by_price {
        flex-basis: 60px;
    }
    #primary_nav_wrapper .first-level-item {
        margin: 30px 10px;
    }
    .top_nav ul li a {
        border-right: none;
        padding: 0 5px;
    }
    .top_nav ul {
        padding-left: 0;
        text-align: center;
        padding-right: 0;
    }
    .copyright p {
        text-align: center;

    }
    .hamburger-header {
        display: block;
    }
    .top_nav ul li {
        text-align: center;
    }
    .search_nav_box.bl {
        margin: 0 auto;
        width: 100%;
        order: 3;
    }
    nav ul li {
        display: block;
        padding-right: 0;
    }
    .star_logo.bl {
        order: 2;
    }
    .category_nav ul {
        text-align: center;
    }
    ul#menu-main-navigation {
        padding-right: 0;
        padding-top: 0;
    }
    .category_nav ul li {
        padding-right: 5px;
        padding-left: 5px;
        padding-bottom: 5px;
    }
    .category_nav ul li a {
        font-size: 12px;
    }
    .info_Box p {
        font-size: 14px;
        color: #fff;
        font-weight: bold;
    }

    /*MAIN MENU*/
    .menu-toggle.toggled-on {
        background: #8bbde0;
    }
    .srt-menu {
        display: none;
        clear: both;
        margin-bottom: 60px;
    }
    .srt-menu.toggled-on {
        display: block;
        position: relative;
        z-index: 10;
        padding-left: 0;
        margin-top: 0;
        margin-bottom: 0;
    }
    .srt-menu li a {
        background: #003365;
        display: block;
        margin: 0;
        padding: 10px;
        text-decoration: none;
        border-bottom: 1px solid #b8bfca;
        text-align: left;
    }
    .srt-menu li a:hover {
        background: #0099ff;
        color: #fff;
        border-bottom: 1px solid #b8bfca;
    }
    .srt-menu li li a {
        background: #e8e8e8;
        padding-left: 40px;
    }
    .srt-menu li li li a {
        background: #efefef;
        padding-left: 80px;
    }
    .menu-toggle {
        display: block;
        text-align: left;
        color: #fff;
        padding-right: 15px;
	padding-left: 15px;
        font-size: 24px;
        padding-top: 5px;
        padding-bottom: 10px;
        cursor: pointer;
	float: left;
    }

    /*SIDEBARS*/
    .ten_ar_container {
        display: none;
    }
    .sidebar-right,
    .sidebar-left {
        flex-basis: 100%;
    }
    .customer-details-for-event {
        flex-basis: 100%;
    }
    .customer-details-for-event .form1 .last-name input {
        width: 100%;
    }
    select#inpCountry {
        width: 100%;
    }
}

@media only screen and (max-width: 640px) {

    .sidebar-left {
        flex-basis: 100%;
        padding: 0 15px;
        text-align: center;
    }
    .sidebar-right {
        flex-basis: 100%;
        padding: 0 15px;
        /*text-align: center;*/
    }
    .main-content {
        padding: 0 4px;
        flex-basis: 100%;
    }
    .left-side-content {
        flex-basis: 100%;
        padding: 0px;
    }
    .search_page_content .left-side-content {
        flex-basis: 100%;
    }
    .content_four_column .sidebar-left {
        flex-basis: 100%;
        padding: 15px;
    }
    .content_four_column .sidebar-right {
        flex-basis: 100%;
        padding: 15px;
    }
    .right-side-content {
        flex-basis: 100%;
        padding: 0px;
    }
    .stadium_info_section {
        margin-bottom: 10px;
        width: 100%;
    }
    .by_title_box {
        margin-right: 0;
    }
    li.ticket_by_item {
        margin-right: 0;
    }
    .category_banner {
        margin-right: 0;
    }
    #primary_nav_wrap ul li {
        float:none !important;
        padding-right: 0;
    }
    nav#primary_nav_wrap ul li {
        padding-bottom: 10px;
    }
    nav#primary_nav_wrap ul ul li {
        padding-bottom: 0;
    }
    #primary_nav_wrap {
        margin-top: 0;
        text-align: left;
        padding-left: 15px;
    }

    #primary_nav_wrap ul ul {
        position: static;
        text-align: center;
    }
    .logo {
        width: 100%;
        text-align: center;
    }
    .star_logo.bl {
        display: none;
    }
    #primary_nav_wrap ul ul li {
        text-align: left;
    }
    .main-buy-content {
        display: block;
        width: 100%;
    }
    .category_listing div {
        width: 100%;
        background-position: center;
        background-size: cover;
    }
}


@media only screen and (max-width: 565px) {
    .hpsbscr__text {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
    }
}

@media only screen and (max-width: 500px) {
    .top_nav ul li {
        display: inline-block;
        width: 49%;
    }
    .tickets_wrap ul li {
        display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        flex-flow: column wrap;
        -ms-flex-flow: column wrap;
    }
    .i_b {
        margin-bottom: 15px;
    }
    .t_image_box {
        padding-right: 0;
        margin-bottom: 25px;
    }
    li.ticket_by_item {
        /*flex-flow: column nowrap;*/
    }
    .ticket_by_price {
        flex-basis: 70px;
	flex-shrink: 0;
    }
    .ticket_by_info {
        flex-basis: 100px; /* Adjust this value as needed */
        flex-shrink: 1;
    }
    .ticket_by_info p {
        /*font-size: 14px;*/
    }
    .ticket_by_sector.t_by p {
        /*font-size: 14px;*/
    }
    .ticket_by_select {
        font-size: 14px;
        flex-basis: 35px;
        position: relative;
    }
    .ticket_by_select > span {
        display: block;
        position: absolute;
        top: 0;
        right: -30px;
        padding-left: 5px;
    }

    .ticket_by_price h6 {
        /*font-size: 16px;*/
        /*font-weight: bold;*/
        padding-left: 12px
    }
    .by_title_box {
        /*display: none;*/
    }

    .by_ticket_page_title h2 {
        font-size: 18px;
        text-align: center;
    }
    .tickets_wrap li.ticket_item,
    .tickets_search_wrap li.ticket_item {
        flex-direction: row;
    }
    .tickets_wrap li.ticket_item div,
    .tickets_search_wrap li.ticket_item div {
        margin-bottom: 15px;
        text-align: center;
	max-width: 100px;
        /*flex-basis: auto;*/
    }
    .tickets_wrap li.ticket_item .t_text_box h4 {
    text-align: center;
    }
    .t_text_box_search {
	width: 100%;
    }
    .t_text_box_search h4 {
	text-align: center;
    }
    .hpsbscr__text {
        display: none;
    }
    .ticket_by_select span {
        display: none;
    }
}

@media only screen and (max-width: 374px) {
    .search .left-side-content {
        padding: 0;
    }
    .search_filter_inputs input {
        flex-grow: 1;
    }
}

@media only screen (min-width: 1248px) and (max-width: 1500px) {
    .i_b {
        margin-bottom: 10px;
    }
    .t_link_box {
        margin-bottom: 0px;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1370px) {
    .search_page_content {
        flex-flow: row wrap;
        -ms-flex-flow: row wrap;
        justify-content: space-around;
    }
    .search_page_content .left-side-content {
        order: 1;
        flex-basis: 35%;
        padding: 0 15px;
    }
    .search_page_content .right-side-content {
        order: 2;
        flex-basis: 59%;
        padding: 0 15px;
    }
    .search_page_content .sidebar-left {
        order: 3;
    }
    .search_page_content .sidebar-right {
        order: 4;
    }
}

/*@media only screen and (min-width: 1024px) and (max-width: 1440px) {
    .star_logo {
        display: none;
    }
    .logo { width: 25%; }
    .search_nav_box { width: 75%; }
}*/

@media only screen and (min-width: 821px) and (max-width: 1000px) {
    .copyright p {
        text-align: center;
    }
    .top_nav ul li a {
        border-right: none;
        padding: 0 5px;
    }
    .top_nav ul {
        padding-left: 0;
        text-align: center;
    }
}

@media only screen and (min-width: 768px) {
    header {
        padding: 0;
    }
    #primary_nav_wrapper .fa {
        display: none;
    }
    #primary_nav_wrapper .child {
        display: none;
    }
    #primary_nav_wrapper .first-level-item {
        margin: 10px 20px 0;
        padding-bottom: 20px;
        position: relative;
    }
    #primary_nav_wrapper .first-level-item .child {
        display: none;
        position: absolute;
        z-index: 100;
        padding: 0 15px;
        width: 180px;
        background: rgba(255, 255, 255, .96);
        border: 1px solid #003365 ;
    }
    #primary_nav_wrapper .first-level-item:hover .child {
        display: block!important;
    }
    #primary_nav_wrapper .first-level-item:focus .child {
        display: block!important;
    }
    #primary_nav_wrapper .first-level-item:hover > a {
        color: #ff5000;
        border-color: transparent;
    }
    #primary_nav_wrapper .first-level-item .child a {
        font-size: 14px;
        color: #003365;
    }
    #primary_nav_wrapper .first-level-item .child a:hover {
        color: #8bbde0;
    }
    #primary_nav_wrapper .parent {
        padding: 0;
        display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        justify-content: center;
    }
}

@media only screen and (min-width: 640px) and (max-width: 1024px) {
    .left-side-content {
        flex-basis: 45%;
        padding: 0px;
    }
    .bread_crumbs ul {
        padding-bottom: 15px;
    }
    .right-side-content {
        flex-basis: 80%;
        padding: 0px;
    }
    .bread_crumbs {
        text-align: center;
    }
    .stadium_info_section {
        width: 100%;
    }
    .by_ticket_page_title h2 {
        text-align: center;
    }
    .trygg_box {
        text-align: center;
    }
    .content_four_column .sidebar-left {
        flex-basis: 45%;
    }
    .content_four_column .sidebar-right {
        flex-basis: 45%;
    }
    .stadium_wrap {
        padding-top: 15px;
    }
    .category_banner {
        margin-right: 0;
    }
}

@media only screen and (min-width: 640px) and (max-width: 1440px) {
    #primary_nav_wrapper .first-level-item {
        margin: 5px 7px 0;
    }
    #primary_nav_wrapper a {
        border-bottom: none;
        font-size: 14px;
    }
}

/*Ticket wrapper layout fixes*/
@media only screen and (max-width: /*768*/875px) {
    .tickets_wrap ul {
        display: block;
    }
}
@media only screen and (min-width: /*769*/876px) and (max-width: 1024px) {
    .tickets_wrap ul {
        display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
    }
}
@media only screen and (min-width: 1025px) and (max-width: /*1320*/1500px) {
    .tickets_wrap ul {
        display: block;
    }
}
@media only screen and (min-width: 1025px) and (max-width: 1300px) {
    .payment-main-content {
        display: block;
    }
}
@media only screen and (min-width: 1025px) {
        form.search_header input[type="search"] {
        width: 85%;
        max-width: 480px;
    }
}
.sidebar-right p {
 font-size: 11px;
 font-weight: bold;
 font-family: Verdana, Helvetica, sans-serif;
}
.infobox p {
color: #222222;
font-size: 14px;
font-weight: 400;
list-style: none;
margin: 0;
vertical-align: middle;
padding-top: 4px;
}
.homepageSubscribe {
 margin: 15px 0 15px;
 height: 46px;
}
.hpsbscr__input, .hpsbscr__text, .hpsbscr__button {
 position: absolute;
 top: 50%;
 transform: translate(0, -50%);
}
.hpsbscr__text {
 font-size: 14px;
 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.t_text_box_search strong {
 font-size: 12px;
}
.t_date_box.i_b.no_logo {
 flex-basis: 15%;
 width: 75px;
 min-width: 75px
}
.t_text_box.i_b.no_logo {
 flex-basis: 50%;
 min-height: 46px;
 min-width: 150px;
}
.t_link_box a {
 color: #fff;
 padding: 13px 18px;
 border-radius: 5px;
 font-weight: 600;
    width: 100%;
    text-align: center;
    max-width: 81px;
}
#price-per-ticket {
 font-size: 14px;
}
#btn_readmore {
   background: none;
   border: none;
   margin-top: 5px;
   margin-bottom: 10px;
   font-size: 12px;
   font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
   display: none;
}
#price_per_ticket {
    font-weight: bold;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
}
#service_fee {
    font-weight: bold;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
}
.order-details {
 width: 100%;
}
.order-details ul {
 list-style: none;
 padding: 0;
}
.checkout-content {
 padding: 0 20px 0 10px;
 flex-basis: 1030px;
 flex-grow: 1;
}
.top-info-banner {
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
}
.top-info-banner p {
    font-size: 12px;
    color: #003365;
    font-family: verdana, helvetica, sans serif;
    margin-bottom: 0;
    padding: .5rem 0;
    text-align: center;
    background-color: #C9E3F0;
    width: 100%
}

.ticket_by_item.hidden {
    display: none;
}

.filterSelect {
    -webkit-appearance: menulist;
    height: 32px;
    width: 200px;
    color: #003365;
    background-color: white;
}
.ticketCountSelect {
    -webkit-appearance: menulist;
    height: 32px;
    width: 200px;
    color: #003365;
    background-color: white;
}
/* EXPLICIT RADHOJD, OCH DET AR EN BUGGFIX OCH INTE EN SMAKSAK.

   Sloganen ligger inuti header.js-fluid-header, som pa mobil ar hojddriven av
   sitt innehall, och headerns uppmatta hojd blir main:s padding-top genom
   --header-offset. Utan line-height galler normal, som ar ~1.15 i Arial och
   ~1.5 i Poppins. Poppins laddas fran Google Fonts med display=swap, sa raden
   vaxer ungefar 6 px nar fonten byts in, headern blir hogre, och skriptet i
   standard.jsp mater om vid window.load och skjuter hela sidan nedat. Det ar
   det hoppet man ser ett par sekunder efter varje laddning.

   1.2 ger 21.6 px oavsett vilket typsnitt som ar inne. */
.h1_main h1 {
 font-size: 18px;
 line-height: 1.2;
 margin-bottom: 10px;
 color: white;
 text-align: center;
}
.info-container {
 display: flex;
 flex-wrap: wrap;
 flex-direction: row-reverse;

}
.info-container h3 {
 font-size: 18px;
 margin: 6px;
}
.info-container p {
 padding-left: 6px;
}
.info-item {
 min-width: 300px;
 flex: 1;
}
.newform {
	display: flex;
	overflow: hidden;
	margin-top: 20px;
}

.formleft {
	display: flex;
	align-content: space-between;
	flex-direction: column;
	margin-right: 10px;
	flex: 1;
}

.formright {
	flex: 2;
	border-radius: 4px;
	margin: 10px 10px 10px 0px;
}

.formrightbox {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	border-radius: 4px;
	background: #deeef6;
	height: 100%;
        margin: 10px;
}

.question {
	margin-right: 10px;
	width: 100%;
	resize: none;
	font-family: Poppins;
  
}

textarea.input4 { padding: 0px; }

button {
	width: 74px;
	height: 40px;
	align-self: self-end;
	margin: 12px;
	background: #ff6600;
	border-radius: 4px 4px 4px 4px;
	color: white;
	border: 0;
	font-size: 12px;
	font-weight: 500;
  font-family: Poppins;
  cursor: pointer;
}
button:hover {
	background: #e44f00;
}

.infobox {
	border: 2px solid #003365;
	border-radius: 4px;
	padding: 20px;
	font-family: Poppins;
}

.infobox h3 {
	font-size: 18px;
	font-weight: 600;
	color: #003365;
	margin: 0 0 0 0px;
}

#feedbackForm .input4 { margin:10px;}

.input4 {
	border: 0;
	background-color: #deeef6;
	font-size: 14px;
	color: #222222;
	padding: 10px 8px;
	border-radius: 4px;
	font-weight: 500;
  font-family: Poppins;
}

.input4::placeholder {
	/* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #749fc4;
	opacity: 1; /* Firefox */
}

.input4::-ms-input-placeholder {
	/* Microsoft Edge */
	color: #749fc4;
}

.input4:focus::placeholder {
	opacity: 0.4;
}
.input4:focus {
	outline: 0;
}

.input4::-webkit-input-placeholder {
	color: #749fc4;
}
.input4:-moz-placeholder {
	color: #749fc4;
}

.input4:focus::-webkit-input-placeholder {
	opacity: 0.4;
}
.input4:focus:-moz-placeholder {
	opacity: 0.4;
}

@media only screen and (max-width: 600px) {
	form {
		/*flex-direction: column;*/
        justify-content: center;
	}

	.formrightbox {
		margin: 0px 0px 10px 10px;
	}

	.formleft {
		margin-right: 0px;
	}
}

li.ticket_by_item p, li.ticket_by_item span {
    white-space: nowrap;
    /* overflow: hidden; */
    text-overflow: ellipsis;
}

    .faq-container {
        border: 2px solid #003365;
        border-radius: 4px;
        padding: 20px;
        font-family: 'Poppins', sans-serif;
    }

    .faq-container details {
        border-bottom: 1px solid #ccc;
        padding: 10px 0;
        margin: 10px 0;
    }

    .faq-container summary {
        color: #222222;
        font-size: 16px;
        font-weight: 500;
        list-style: none;
        padding: 5px 5px 5px 30px;
        margin: 0;
        vertical-align: middle;
        cursor: pointer;
display: flex;
    align-items: center;
    justify-content: space-between;
    }

    .faq-container summary::-webkit-details-marker {
        display: none;
    }

    .faq-container .answer {
        /* Maintain the original text styling for the answer */
        padding: 5px 25px 5px 55px;
    }



    .faq-container h2 {
        font-size: 18px;
        font-weight: 600;
        color: #003365;
        margin: 0 0 10px 0;
    }
/* Style for the arrow */
.question-answer summary::after {
    background: url('https://ticket2test.fabianbaehrendtz.se/img/arrow-down.png') no-repeat right center; 
    float: right;
    width: 20px; /* Adjust as necessary */
    height: 20px; /* Adjust as necessary */
    content: ""; /* Required for the pseudo-element to work */
    display: block; /* Changed from inline-block to block */
    margin-left: auto; /* Pushes the icon to the right */
}

/* Style to change the arrow when the details are open */
.question-answer[open] summary::after {
    background-image: url('https://ticket2test.fabianbaehrendtz.se/img/arrow-up.png');
}
@media screen and (max-width: 450px) {
    .ticket_by_sector {
        display: none;
    }
}

@media (max-width: 800px) {
    .banner-with-image {
        font-size: 32px;
    }
}

@media (max-width: 500px) {
    .banner-with-image {
        font-size: 24px;
    }
}
@media (max-width: 768px) {
    .partners_box img {
        width: 500px; /* Example size for smaller screens */
    }
}

@media (max-width: 600px) {
    .partners_box img {
        width: 400px; /* Example size for very small screens */
    }
}
@media (max-width: 500px) {
    .partners_box img {
        width: 320px; /* Example size for very small screens */
    }
}
@media (max-width: 440px) {
    .partners_box img {
        width: 280px; /* Example size for very small screens */
    }
}
@media (max-width: 360px) {
    .partners_box img {
        width: 200px; /* Example size for very small screens */
    }
}
@media (max-width: 472px) {
#buy_submit{
    font-size: 12px;
    font-weight: 600;
    background: #ff6600;
    border-radius: 4px;
    margin-top: 38px;
    color: white;
    padding: 14px 44px;
}
}
.partners_box img {
    max-width: 500px;
}
.newsletter-container {
    width: 100%;
    padding: 20px 0 20px 30px;
    box-sizing: border-box;
}

.bread_crumbs {
    padding-top: 10px;
    padding-bottom: 2px;
}
.full-bleed {
  /* Remove the effect of the parent's left and right padding */
  margin-left: -0.2cm;
  margin-right: -0.2cm;
  /* Adjust width if needed */
  width: calc(100% + 0.4cm);
}
/* Samma radhojd som .h1_main h1 ovan, och av samma skal: pa forstasidan ar
   sloganen ett h1, pa ovriga sidor ett p, och bada matas som en del av headern.
   Fetstilen gor den har varianten bredare, alltsa mer benagen att brytas om, sa
   den behover laset minst lika mycket. */
.h1_main p {
    font-size: 18px;
    line-height: 1.2;
    margin-bottom: 10px;
    color: white;
    text-align: center;
    font-weight: bold;
}
.event-template h1,
.event-template h2,
.event-template h3 {
  /* Samma grundläggande layout */
  color: #003365;
  font-weight: 600;
  margin: 15px 0 5px;
  font-family: Poppins, Arial, "Helvetica Neue", Helvetica, sans-serif;
}

/* Specifika storlekar */
.event-template h1 {
  font-size: 20px;   /* Något större än h2 */
}

.event-template h2 {
  font-size: 18px;   /* Som du redan har */
}

.event-template h3 {
  font-size: 16px;   /* Något mindre än h2 */
}
.text-image {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0;
}

.text-image .img {
  flex: 0 0 50%; 
  max-width: 50%;
}

.text-image .img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.text-image .text {
  flex: 1;
}

.text-image.image-left {
  flex-direction: row;
}

.text-image.image-right {
  flex-direction: row-reverse;
}

@media (max-width: 767px) {
  .text-image {
    flex-direction: column !important;
  }
  .text-image .img {
    flex: none;
    width: 100%;
    margin-bottom: 1rem;
  }
  .text-image .text {
    width: 100%;
  }
}
.related-teams {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}
.related-team {
  text-align: center;
}
.related-team img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  max-height: 371px;
}
.related-team p {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}
@media (max-width: 767px) {
  .related-teams {
    grid-template-columns: 1fr;
  }
}
.related-team h2 a {
  display: block !important;
  width: 100% !important;
  padding: 0.5rem 0 !important;
  text-decoration: none;
  color: inherit;
  font-size: 18px !important;
}
.related-team img {
  width: 100%;
  height: 150px;          /* pick a uniform height (e.g. 150px) */
  object-fit: cover;      /* scale crop so they all end up the same size */
  display: block;
  border-radius: 4px;
}
.ticket_by_info p.section {
  font-size: 1.4rem;
  font-weight: bold;
}
.ticket_by_info p.block {
  font-size; 1.1rem;
}
.ticket_by_info p.grouping-rule,
.ticket_by_info p.sector,
.ticket_by_info p.info-line {
  font-size: 11px;
  color: #666;
  margin-top: 4px;
}

@media (max-width: 768px) {
  li.ticket_by_item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  /* left column: info group */
  .ticket_by_info {
    flex: 0 0 60%;
    margin-bottom: 8px; /* give breathing room */
  }
  /* right column: price, tickets and buy stacked */
  .ticket_by_price,
  .ticket_by_select,
  .t_link_box {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-left: 10px;
  }
  .ticket_by_price {
    order: 1;
    margin-bottom: 8px; /* gap to tickets */
  }
  .ticket_by_select {
    order: 2;
    margin-bottom: 8px; /* gap to buy button */
  }
  .t_link_box {
    order: 3;
    margin-top: auto;    /* push it down if taller */
  }
}
@media (max-width: 768px) {
  /* make each ticket row a wrapping flex container */
  li.ticket_by_item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  /* Left column: all the info lines */
  .ticket_by_info {
    flex: 0 0 60%;       /* take ~60% of width */
    margin-bottom: 8px;  /* gap underneath on small screens */
  }

  /* Right column: price, ticket-count dropdown, buy button */
  .ticket_by_price,
  .ticket_by_select,
  .t_link_box {
    flex: 0 0 40%;        /* take ~40% of width */
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    padding-left: 10px;   /* small gutter */
  }

  /* ordering and spacing of the three right-side blocks */
  .ticket_by_price {
    order: 1;
    margin-bottom: 6px;   /* gap down to #tickets */
  }
  .ticket_by_select {
    order: 2;
    margin-bottom: 6px;   /* gap down to buy button */
  }
  .t_link_box {
    order: 3;
    /* It will naturally sit at the bottom of the right column */
  }
}
@media (max-width: 768px) {
  /* 1) Switch the <li> to a 2-column grid on mobile */
  li.ticket_by_item {
    display: grid;
    grid-template-columns: 1fr auto;        /* info | actions */
    gap: 10px  /* gutter between columns */;
    align-items: start;
  }

  /* 2) Stack the 3 action blocks vertically in their wrapper */
  .ticket_by_actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;  /* right-align price, dropdown, button */
    gap: 6px;               /* space between buy */
  }

  /* 3) Give the info column some breathing room underneath */
  .ticket_by_info {
    margin-bottom: 8px;
  }
}
.ticket_by_info p.block {
  font-weight: normal;
  font-size: 11px;   /* or use a relative size, e.g. 0.875em */
}
@media (max-width: 768px) {
  /* turn each ticket into a 2-col grid */
  .ticket_by_item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-auto-rows: auto;
    grid-gap: 8px 16px;
    align-items: center;
  }

  /* info always lives in col 1 */
  .ticket_by_info {
    grid-column: 1;
  }

  /* select, price and button all live in col 2 */
  .ticket_by_select,
  .ticket_by_price,
  .t_link_box {
    grid-column: 2;
    justify-self: end;    /* push them to the right edge */
  }
}

.tickets_wrap {
    margin-top: 6px;
    margin-bottom: 32px;
}

/* Cookiebot: geometri för samtyckesbannerns knappar.
   Innehållet, alltså text och vilka kategorier som visas i första lagret, sätts i
   Cookiebot Manager. Här ligger bara det dashboarden inte kan uttrycka.

   Ersätter en tidigare regel som låg på rad 3588 utan kommentar:
       #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton
           { padding: 0px !important; }
   Den kom in med en prod-hämtning (commit 2157000) utan nedtecknad motivering,
   och byggde på att knapparna ligger inuti footern. Det antagandet håller inte
   när Cookiebot ändrar sin DOM, och då blir en knapp en annan låda än de andra.

   Symptomet den rättar: knapparna var nästan exakt lika breda men förskjutna cirka
   12px i sidled från varandra på desktop.

   !important behövs eftersom Cookiebot injicerar sitt stilark i runtime, alltså
   efter sajtens. Samma mönster som Trustpilot-regeln högre upp i filen. */
#CybotCookiebotDialogBodyButtonsWrapper > * {
    box-sizing: border-box !important;
    align-self: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    /* Centrera knapptexten i höjdled. Utan detta la den sig cirka 12px för lågt i
       båda knapparna. Att göra knappen till en flexbox centrerar innehållet i
       förhållande till knappens egen höjd, oavsett om orsaken är att knappen
       blivit högre än sitt naturliga mått eller att Cookiebots vertikala padding
       är osymmetrisk. Vertikal padding lämnas orörd, så knappens höjd är
       oförändrad. */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Breadcrumben på en rad i mobil, mitten kollapsad bakom en ellips.

   Varje steg skrivs ut i sin helhet av mallen. Mellanstegen döljs bara med
   CSS, aldrig ur HTML:en, så både läsaren som fäller ut ellipsen och
   sökmotorn ser hela stigen och alla dess länkar. Desktop är oförändrad:
   ellipsen finns inte där, och stegen ligger kvar som förut.

   Separatorn ligger inuti sitt eget li, så ett dolt steg tar med sig sin egen
   slash. Sista steget saknar separator helt, vilket är det som gör att raden
   inte längre bryts av ett ensamt snedstreck. */
.bread_crumbs li.bc-ellipsis {
    display: none;
}
/* Separatorn låg förut mellan li-elementen och bar ett mellanslag på varje
   sida. Nu ligger den inuti sitt steg, och då trimmas det avslutande
   mellanslaget bort vid stegets slut. Marginalen ger tillbaka det, så
   avståndet ser ut precis som förut. */
.bread_crumbs .bc-sep {
    margin-right: 4px;
}
.bread_crumbs .bc-more {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    /* Sajtens button-regel högre upp i filen sätter 74x40px på varje knapp, mätt
       för köpknapparna. Ellipsen är text i en rad och ska vara precis så bred
       som sitt eget tecken. */
    width: auto;
    height: auto;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: inherit;
    color: #003365;
    cursor: pointer;
}
@media only screen and (max-width: 768px) {
    .bread_crumbs {
        overflow: hidden;
    }
    /* Flexraden håller stegen på samma baslinje. Som inline-block flyttar
       overflow:hidden det klippta stegets baslinje till dess underkant, och
       ellipsknappen hamnade då synligt lägre än texten omkring sig. */
    .bread_crumbs ul {
        display: flex;
        align-items: baseline;
        flex-wrap: nowrap;
        white-space: nowrap;
        min-width: 0;
    }
    .bread_crumbs li {
        flex: 0 0 auto;
    }
    /* Sista steget bär sidans namn och kan vara långt. Det är det enda steg som
       får krympa, och det klipps med punkter i högerkanten hellre än att skjuta
       ut raden i sidled. */
    .bread_crumbs li.bc-last {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .bread_crumbs li.bc-mid {
        display: none;
    }
    .bread_crumbs li.bc-ellipsis {
        display: inline-block;
    }
    /* Utfälld faller raden tillbaka till vanligt flöde och får radbryta. */
    .bread_crumbs.is-expanded {
        overflow: visible;
    }
    .bread_crumbs.is-expanded ul {
        display: block;
        white-space: normal;
    }
    .bread_crumbs.is-expanded li.bc-mid {
        display: inline-block;
    }
    /* Utfälld ska sista steget inte längre klippas. overflow:hidden flyttar ett
       inline-blocks baslinje till dess underkant, och steget hamnade då högre
       än de andra på samma rad. */
    .bread_crumbs.is-expanded li.bc-last {
        overflow: visible;
        text-overflow: clip;
    }
    .bread_crumbs.is-expanded li.bc-ellipsis {
        display: none;
    }
}

/* ── Kortet: li.t2-card ──────────────────────────────────────────────────
   Sajtens enda kort. Matchkorten på förstasidan, lagsidorna, kategorisidorna
   och söksidan, lagkorten på ligasidorna, och köpsidans biljettrad är samma
   markup med olika zoner ifyllda. Markupen skrivs av
   elements/common/event-card.jsp, badgarna av elements/common/event-card-fomo.jsp.

   Reglerna bodde tidigare i sex inline-kopior som glidit isär: 2026-08-27
   skilde de sig på kant- och avdelarfärg, radie, titelstorlek, knappstorlek,
   padding och brytpunkt, utan att en enda skillnad var avsiktlig. Lagsidans
   kopia hade 68 !important varav två gjorde något, och ligasidans 684 rader
   vars hela uppgift var att få den gamla markupen att likna den här.

   VÄRDENA KOMMER FRÅN KÖPSIDAN, som är den yta kunden fattar sitt beslut på
   och därför den som fått mest arbete. Radie 11, skugga 0 6px 14px, hover mot
   accentfärgen. Där köpsidan inte hade något att säga, som datumrutan, kommer
   värdet från söksidans kopia, som var den nyaste och enda som skrivits i ett
   svep i stället för i lager.

   TVÅ LAYOUTER:
     li.t2-card            datumruta till vänster, kropp med två kolumner
     li.t2-card--row       en rad, färgremsa till vänster, fyra kolumner
   Köpsidans biljettrad är den andra. Vilken som gäller styrs av en klass och
   inte av vilka zoner som råkar vara ifyllda, så en match utan tid inte tyst
   byter layout.

   SCOPET ÄR ul.t2-list, och blocket ligger sist i filen. Båda behövs.
   standard.css har egna regler för .tickets_wrap ul (rad 457) och
   .tickets_wrap ul li (rad 436) som sätter flex, bakgrund och padding på varje
   li, och .event-template h3 (rad 3606) som sätter färg, vikt och storlek på
   kortets titel. ul.t2-list > li.t2-card (0,2,2) slår den första på
   specificitet, ul.t2-list .t2-title (0,2,1) slår den andra. ul.t2-list (0,1,1)
   har däremot SAMMA specificitet som .tickets_wrap ul, så där avgör
   källordningen: flyttas blocket uppåt i filen slutar listan vara ett rutnät.

   Biljettradens regler är dessutom prefixade med .tickets_by_wrap. Det är
   avsiktligt och inte slarv: standard.css har arvegods för samma klasser på
   rad 1210-1310, skrivet när raden var en flexbox, och flera av dem vinner på
   specificitet oavsett ordning:

     .ticket_by_info p.section {font-size:1.4rem}   (0,2,1)
     .ticket_by_select {display:flex; height:100%}  (0,1,0)
     li.ticket_by_item p, li.ticket_by_item span {white-space:nowrap}

   Den första gjorde sektionstiteln 15.4px i stället för 17, eftersom rotens
   font-size är 11px och 1.4rem därför inte är 22px utan 15.4. Den andra
   sträckte antalsväljaren till hela radhöjden, 99px, vilket sköt priset och
   knappen ur linje. Utan prefixet vinner arvegodset, och man kan ändra ett
   värde här hur många gånger som helst utan att något händer på skärmen.

   .t2-cta är MED FLIT oscopad. Arenaträffarnas "Läs mer" på söksidan använder
   klassen utanför li.t2-card, och en scopad regel hade tagit all styling från
   den knappen.

   Variablerna heter --t2-card-* och inte --t2-*. buy_shipping_single_page.jsp
   deklarerar egna --t2-* på :root, och dess inline-style i body kommer efter
   den här filens link i head. Med de korta namnen hade fraktsidan skrivit över
   kortets färger. */

:root {
    --t2-card-bg: #ffffff;
    --t2-card-accent: #eaf4fb;
    --t2-card-text: #0b3767;
    --t2-card-sub: #2d507a;
    --t2-card-border: #dce7f2;
    --t2-card-divider: #4473a6;
    --t2-card-cta: #ff6a00;
    --t2-card-cta-hover: #e35d00;
    --t2-card-radius: 11px;
    --t2-card-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
    --t2-card-shadow-hover: 0 8px 18px rgba(0, 0, 0, 0.08);
    --t2-card-stripe: #003365;
}

/* ---------- Listan ---------- */

ul.t2-list {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Två kolumner först när sidan är bred nog. Lagsidan låg tidigare på 1267 px,
   genom en 960-regel som en senare max-width 1266 tog tillbaka.

   grid-auto-rows jämnar ut raderna mot varandra. Korten i SAMMA rad har alltid
   varit lika höga, grid sträcker dem, men en rad blir 82 px när båda titlarna
   ryms på en rad och 101 px när en av dem bryter. På förstasidan bryter 6 av 20:
   "Newcastle United - Manchester United" behöver 316 px och titeln har 241.

   Regeln står bara här, inne i tvåkolumnsläget, och det är avsikten. Ojämnheten
   syns bara när korten står bredvid varandra. I mobilens enda kolumn ser man ett
   kort i taget och skillnaden är osynlig, medan samma regel där kostar 327 px
   extra scroll på tjugo kort, alltså 13 procent. Här kostar den 57 px.

   grid-auto-rows och inte min-height på titeln: den här är orsaksoberoende. Blir
   ett kort högt av en tredje badge eller en rad vi lägger till senare blir raden
   ändå jämn, utan att någon behöver hålla en em-siffra i takt med antalet
   titelrader. */
@media (min-width: 1280px) {
    ul.t2-list {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 1fr;
    }
}

/* Biljettlistan är alltid en kolumn: raderna står bredvid arenakartan och
   läses uppifrån och ner, i prisordning. */
.tickets_by_wrap > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ---------- Skalet ---------- */

ul.t2-list > li.t2-card,
.tickets_by_wrap > ul > li.t2-card {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--t2-card-border);
    border-radius: var(--t2-card-radius);
    background: var(--t2-card-bg);
    box-shadow: var(--t2-card-shadow);
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

ul.t2-list > li.t2-card:hover,
.tickets_by_wrap > ul > li.t2-card:hover {
    background: var(--t2-card-accent);
    box-shadow: var(--t2-card-shadow-hover);
}

ul.t2-list > li.t2-card:hover {
    transform: translateY(-1px);
}

/* ---------- Datumkolumnen ---------- */

ul.t2-list .t2-date {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 96px;
    min-width: 96px;
    max-width: 96px;
    padding: 8px 12px;
    background: var(--t2-card-accent);
    text-align: center;
}

ul.t2-list .t2-date::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 0;
    bottom: 8px;
    width: 2px;
    border-radius: 1px;
    background: var(--t2-card-divider);
}

/* Ordningen i markupen är dag/månad, år/veckodag, tid. Lagsidans regler var
   skrivna för en äldre ordning och la fyra pixlar död luft i botten. */
ul.t2-list .t2-dm {
    margin: 0 0 4px;
    color: var(--t2-card-text);
    font-size: 18px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: 0.03em;
}

ul.t2-list .t2-yd,
ul.t2-list .t2-time {
    margin: 0;
    color: var(--t2-card-sub);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
}

ul.t2-list .t2-time {
    margin-top: 6px;
}

/* ---------- Kroppen ---------- */

/* Titel och arena till vänster, knappen uppe till höger, priset nere till
   höger. minmax och min-width hindrar ett långt lagnamn från att spränga
   rutnätscellen. */
ul.t2-list .t2-body {
    display: grid;
    flex: 1;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr auto;
    column-gap: 14px;
    min-width: 0;
    padding: 10px 12px;
    align-items: start;
}

/* max-width behövs vid sidan av min-width: justify-self:start ger itemet dess
   max-content-bredd, och en badgerad som inte får brytas räknas in i den. Utan
   max-width blev .t2-main 223 px i en 212 px-cell på en 320 px-skärm, och sista
   badgen stack ut 10 px och kapades av kortets overflow. */
ul.t2-list .t2-main {
    grid-column: 1;
    grid-row: 1 / span 3;
    min-width: 0;
    max-width: 100%;
    justify-self: start;
    text-align: left;
}

ul.t2-list .t2-side {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: flex-start;
}

ul.t2-list .t2-price,
ul.t2-list .t2-priceBox {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    justify-self: end;
}

/* ---------- Textzonerna, gemensamma för båda layouterna ---------- */

ul.t2-list .t2-title,
.tickets_by_wrap .t2-title {
    margin: 0;
    color: var(--t2-card-text);
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
    text-align: left;
}

ul.t2-list .t2-venue,
.tickets_by_wrap .t2-venue {
    margin: 0;
    color: var(--t2-card-sub);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
    text-align: left;
}

/* Metaraden. Delarna står som spans och avdelaren ritas här, inte i markupen.
   Poängen är att den då aldrig kan hamna först eller sist: blocktexten och
   sektionsuppgifterna renderas bara när de har innehåll, så antalet delar
   varierar per kort.

   nowrap och inte wrap: raden ska aldrig bli två, för då blir kortet högre än
   sina grannar, och en lista där korten hoppar i höjd är svårare att skanna än
   en där de inte gör det. Innehållet är kort nog att rymmas, och overflow
   klipper hellre än att bryta höjden. */
ul.t2-list .t2-meta,
.tickets_by_wrap .t2-meta {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0 10px;
    margin: 0;
    min-height: 18px;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--t2-card-sub);
}

ul.t2-list .t2-meta > span,
.tickets_by_wrap .t2-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

ul.t2-list .t2-meta > span + span::before,
.tickets_by_wrap .t2-meta > span + span::before {
    content: "\00b7";
    opacity: 0.55;
}

/* Raden är nowrap med overflow:hidden, så en längre översättning kapades mitt
   i ordet utan att något visade att text saknades. Ellips i stället, och hela
   texten i title-attributet. */
ul.t2-list .t2-meta .txt,
.tickets_by_wrap .t2-meta .txt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Metaradens ikoner. Storleken sätts här och inte med width- och
   height-attribut i markupen: en inline-stil hade inte gått att överskriva
   härifrån utan !important. */
ul.t2-list .t2-meta .icon,
.tickets_by_wrap .t2-meta .icon {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* ---------- Priset ----------

   .t2-priceBox står kvar som alias bredvid .t2-price. Det är den ENDA klass som
   bytte namn när kortet flyttade in i event-card.jsp, och utan aliaset blir CSS
   och markup ömsesidigt beroende: publiceras de inte i samma ögonblick tappar
   prisrutan all sin styling, i BÅDA riktningarna. Det hände i produktion
   2026-09-01, när standard.css låg uppe men event-card.jsp inte, och priset
   visades i brödtext på varje matchkort på sajten.

   Med aliaset kan filerna publiceras i vilken ordning som helst, och de fyra
   ytor som inkluderar event-card.jsp statiskt får rätt utseende både före och
   efter att de kompilerats om. Ta bort aliaset först när ingen sida längre
   skriver t2-priceBox. */

/* "fr." och "kr" är hjälpord, inte data, och står i --t2-card-sub så att talet
   bär raden ensamt. I samma färg och vikt som beloppet flöt de ihop med det. */
ul.t2-list .t2-price,
ul.t2-list .t2-priceBox,
.tickets_by_wrap .t2-price {
    color: var(--t2-card-sub);
    font-size: 12px;
    line-height: 1.15;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

/* Beloppet låg på 22px/800 mot titelns 16px/700, i samma färg. Priset var alltså
   37 % större och tyngre än matchnamnet, och kortet hade tre element i vikt 800
   eller 700 i samma mörkblå: datum, titel, pris. Kunden letar efter matchen och
   använder priset som filter, inte tvärtom. 18px/700 håller beloppet störst i
   kroppen utan att ta över. */
ul.t2-list .t2-price span,
ul.t2-list .t2-priceBox span,
.tickets_by_wrap .t2-price span {
    display: inline-block;
    margin: 0 4px;
    color: var(--t2-card-text);
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* "På förfrågan" är inte ett belopp och ska inte se ut som ett. */
ul.t2-list .t2-price--text {
    font-size: 13px;
    font-weight: 600;
}

/* ---------- Knappen ---------- */

/* Oscopad, se huvudkommentaren. Måtten är köpsidans: den knappen sitter i
   beslutsögonblicket och är den enda av de två som mätts mot en fingertopp. */
.t2-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* border-box, annars lägger paddingen sig UTANPÅ width:100% i mobilens
       92px-kolumn: 92 + 14 + 14 = 120, och knappen sköt 28px förbi kolumnen och
       klipptes av kortets overflow:hidden. Uppmätt på test2 2026-09-01. Sajten
       har ingen global border-box-regel, så den måste stå här. */
    box-sizing: border-box;
    padding: 7px 14px;
    min-width: 96px;
    border: 0;
    border-radius: 6px;
    background: var(--t2-card-cta);
    color: #ffffff;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.t2-cta:hover,
.t2-cta:focus {
    background: var(--t2-card-cta-hover);
    color: #ffffff;
    text-decoration: none;
}

/* Arvegodset .t_link_box a på rad 527 sätter färg, bakgrund och padding och
   vinner inte på specificitet, men biljettradens knapp låg tidigare inuti en
   .t_link_box och ärvde dess !important-vita färg. Den klassen är borta ur
   markupen nu, och regeln står kvar bara för sell-sidorna. */

/* ---------- Badgarna ---------- */

/* Fylls av event-card-fomo.jsp efter render.

   De två layouterna gör olika och båda är avsiktliga. Biljettraden reserverar
   höjden alltid: göms den tomma behållaren blir raden lägre än de rader som
   har en badge, och listan hoppar när man skrollar. Matchkortet döljer den i
   stället, för ett kort utan biljetter får aldrig någon badge alls, och utan
   :empty blev det en rad död luft i varje sådant kort. */
ul.t2-list .t2-badges,
.tickets_by_wrap .t2-badges {
    display: flex;
    gap: 6px;
    margin: 0;
}

/* nowrap av samma skäl som .t2-meta ovan: med wrap bröt raden till två så fort
   badgarna inte fick plats, och kortet blev 19 px högre än sina grannar.
   Biljettraden har haft skyddet hela tiden, matchkortet ärvde wrap utan att
   någon valt det.

   overflow slår inte in på någon bredd vi mätt, eftersom mobilregeln längre ned
   ser till att badgarna får plats. Den står som skyddsnät mot en badgetext vi
   inte känner: en längre översättning klipps hellre än gör kortet högre. */
ul.t2-list .t2-badges {
    flex-wrap: nowrap;
    overflow: hidden;
    margin-top: 4px;
}

ul.t2-list .t2-badges:empty {
    display: none;
    margin-top: 0;
}

.tickets_by_wrap .t2-badges {
    flex-wrap: nowrap;
    align-items: center;
    min-height: 19px;
    overflow: hidden;
}

ul.t2-list .badge,
.tickets_by_wrap .badge {
    display: inline-block;
    border-radius: 999px;
    padding: 3px 8px;
    font-weight: 700;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
}

ul.t2-list .badge--green,
.tickets_by_wrap .badge--green   { background: #e6f7ec; color: #1a7f37; }
ul.t2-list .badge--orange,
.tickets_by_wrap .badge--orange  { background: #fff2e6; color: #7a3d00; }
ul.t2-list .badge--red,
.tickets_by_wrap .badge--red     { background: #ffe9e9; color: #b42318; }
ul.t2-list .badge--blue,
.tickets_by_wrap .badge--blue    { background: #eaf3ff; color: #0b4aa2; }
ul.t2-list .badge--purple,
.tickets_by_wrap .badge--purple  { background: #f1eaff; color: #5d3fd3; }

/* ═══════════ Radlayouten: köpsidans biljettrad ═══════════

   Fyra kolumner på en enda rad: information, pris, tillägg, knapp. Tidigare låg
   pris, antal, knapp och Klarna staplade i samma kolumn, och då var de två
   kolumnerna ungefär lika höga, 170 mot 180px. Det är värt att veta innan man
   tajtar något här: sänker man bara den ena sätter den andra golvet, och
   radhöjden står stilla. */

.tickets_by_wrap > ul > li.t2-card--row {
    display: block;
    padding: 10px 14px;
    padding-left: 24px;              /* plats för den 11px breda remsan */

    /* Alla rader exakt lika höga oavsett innehåll. En rad utan badge, med kort
       sektionsnamn eller utan blocktext ska inte bli lägre än sina grannar:
       skillnaden bar ingen information. */
    min-height: 104px;
}

/* Färgremsan till vänster: sektionens färg ur arenakartan.

   Den kopplar ihop raden med ritningen ovanför och är hela poängen med att
   kartan och listan står bredvid varandra. Färgen sätts per rad av
   t2SattSektionsfarger i buy_event.jsp.

   Fallbacket är inte bara en försiktighetsåtgärd: det gäller varje arena utan
   ritning, och varje sektion som inte är ritad. */
.tickets_by_wrap > ul > li.t2-card--row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 11px;
    background: var(--t2-sektionsfarg, var(--t2-card-stripe));
    border-radius: 8px 0 0 8px;
}

.tickets_by_wrap > ul > li.t2-card--row > .t2-body {
    display: grid;
    /* info | pris | tillägg | knapp */
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    grid-auto-rows: auto;
    column-gap: 12px;
    align-items: center;
    padding: 0;
    min-height: 0;
}

.tickets_by_wrap .t2-card--row .t2-main {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    margin-bottom: 0;
}

.tickets_by_wrap .t2-card--row .t2-price  { grid-column: 2; grid-row: 1; }
.tickets_by_wrap .t2-card--row .t2-extra  { grid-column: 3; grid-row: 1; }
.tickets_by_wrap .t2-card--row .t2-side   { grid-column: 4; grid-row: 1; }

/* Sektionstiteln är större än matchkortets: den är radens enda rubrik och det
   kunden filtrerar på. */
.tickets_by_wrap .t2-card--row .t2-title {
    font-size: 18px;
    line-height: 1.25;
}

.tickets_by_wrap .t2-card--row .t2-venue {
    font-size: 12.5px;
}

/* Priset står vågrätt bredvid tillägget, inte i en egen kolumn under. */
.tickets_by_wrap .t2-card--row .t2-price {
    font-size: 16px;
    font-weight: 800;
    text-align: left;
    white-space: nowrap;
}

.tickets_by_wrap .t2-card--row .t2-price span {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
}

/* Tillägget: Klarna-badgen och antalsväljaren vågrätt.

   Klarna ligger bredvid priset och inte under knappen. Placeringen är hela
   skillnaden mot tidigare: då låg badgen i egen rad under knappen och var 48px
   hög, alltså det högsta elementet i kortet. Här är den lägre än knappen
   bredvid sig och kostar därför noll radhöjd.

   Bildens synliga badge upptar bara ca 54 % av PNG:ens höjd, resten är vit
   marginal. Därför är höjden 30px och inte 18: annars blir den rosa ytan 10px
   och ser urvattnad ut bredvid 12px text. */
.tickets_by_wrap .t2-card--row .t2-extra {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tickets_by_wrap .t2-card--row .klarna-ticket-badge {
    height: 30px;
    width: auto;
    align-self: center;
}

/* height:auto slår arvegodsets height:100%, som annars sträcker väljaren över
   hela radhöjden och skjuter priset ur linje med knappen. */
.tickets_by_wrap .t2-card--row .ticket_by_select {
    display: block;
    height: auto;
    flex-basis: auto;
    margin: 0;
    padding: 0;
}

.tickets_by_wrap .t2-card--row select.number_of_tickets {
    min-width: 64px;
    width: auto;
    height: 32px;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid #ccd6e3;
    font-size: 13px;
    text-align: center;
    background-color: #ffffff;
}

/* Dolda av sektionsfiltret. !important för att slå den display:block som sätts
   ovan, som annars vinner på specificitet. */
.ticket_by_item.hidden {
    display: none !important;
}

/* Pekar man på en sektion i arenakartan dämpas de rader som hör till någon
   annan. Dämpning, inte framhävning: en rad som växer skulle flytta de andra
   medan markören rör sig över kartan, och listan hoppa under handen. */
.tickets_by_wrap .ticket_by_item.t2-sektion-dampad {
    opacity: 0.35;
    transition: opacity 150ms;
}

/* ═══════════ Länkkortet: lag utan datum och pris ═══════════

   Ligasidorna och undersidorna listar lag, inte matcher, och ett lag har
   varken datum eller pris. Kortet blir därmed lägre av sig själv, eftersom
   tomma zoner inte renderas. Det enda som behövs här är att kroppen inte
   reserverar tre rader för en prisruta som aldrig kommer. */
ul.t2-list > li.t2-card--link .t2-body {
    grid-template-rows: auto;
    align-items: center;
}

ul.t2-list > li.t2-card--link .t2-main {
    grid-row: 1;
}

ul.t2-list > li.t2-card--link .t2-side {
    align-items: center;
}

/* Sorteringsraden ovanför en kortlista. Ersätter de klickbara
   kolumnrubrikerna i tabellen på köpsidans datumlista: ett kort har inga
   kolumner, men sorteringen är en funktion användaren styr och skulle annars
   ha försvunnit. */
.t2-sort {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
}

.t2-sort a {
    color: var(--t2-card-sub);
    text-decoration: none;
}

.t2-sort a:hover {
    color: var(--t2-card-text);
    text-decoration: underline;
}

/* ═══════════ Mobil ═══════════ */

/* Under 700 px döljs knappen på matchkortet och hela kortet blir klickbart i
   stället. Varje kort bär data-href, med eller utan biljetter. */
@media (max-width: 700px) {
    ul.t2-list > li.t2-card {
        transform: none;
    }

    ul.t2-list > li.t2-card[data-href] {
        cursor: pointer;
    }

    ul.t2-list .t2-date {
        width: 88px;
        min-width: 88px;
        max-width: 88px;
        padding: 8px 10px;
    }

    ul.t2-list .t2-dm {
        font-size: 16px;
    }

    ul.t2-list .t2-yd,
    ul.t2-list .t2-time {
        font-size: 11px;
    }

    ul.t2-list .t2-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        row-gap: 8px;
        padding: 8px 10px;
    }

    ul.t2-list .t2-main {
        grid-row: 1;
    }

    ul.t2-list .t2-venue {
        font-size: 12px;
    }

    /* Två badgar behöver 207 px på en 320 px-skärm och kortet har 202. Utan de
       här två reglerna klipps den sista badgen, eller bryter till en andra rad
       och gör kortet 19 px högre än sina grannar. Bredden tas ur padding och
       gap, inte ur teckenstorleken: 11 px är redan minimum för en badge. */
    ul.t2-list .t2-badges {
        gap: 4px;
    }

    ul.t2-list .badge {
        padding: 3px 6px;
    }

    ul.t2-list .t2-side {
        display: none;
    }

    ul.t2-list .t2-price,
    ul.t2-list .t2-priceBox {
        grid-column: 1;
        grid-row: 2;
        justify-self: end;
        font-size: 12px;
    }

    ul.t2-list .t2-price span,
    ul.t2-list .t2-priceBox span {
        font-size: 17px;
    }

    /* Länkkortet har varken datum eller pris, så knappen får plats bredvid
       titeln. Matchkortet ovan behåller sin dolda knapp. Hela kortet är
       klickbart ändå, se event-card-fomo.jsp. */
    ul.t2-list > li.t2-card--link .t2-body {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto;
        column-gap: 8px;
    }

    ul.t2-list > li.t2-card--link .t2-side {
        display: flex;
        grid-column: 2;
        grid-row: 1;
    }

    ul.t2-list > li.t2-card--link .t2-cta {
        min-width: 84px;
        padding: 7px 10px;
    }
}

/* Mellanbredd. Måste stå FÖRE 768-blocket: båda matchar vid 768px, och
   där avgör källordningen. Står den efter tar dess padding över den
   smalare skärmens, som är den som mätts. */
@media (max-width: 1024px) {
    .tickets_by_wrap > ul > li.t2-card--row {
        padding: 9px 12px;
        padding-left: 22px;
    }

    .tickets_by_wrap > ul > li.t2-card--row > .t2-body {
        column-gap: 8px;
    }

    .tickets_by_wrap .t2-card--row .t2-cta {
        min-width: 84px;
        padding: 7px 10px;
    }
}

/* Biljettraden på mobil: två kolumner. Informationen till vänster, och till
   höger priset överst, antalsväljaren under och köpknappen underst. De tre står
   i en kolumn för att det är den ordning man går igenom dem i: vad kostar den,
   hur många vill jag ha, köp.

   Dessförinnan låg de vågrätt i en åtgärdsrad under informationen, och ännu
   tidigare i en högerkolumn som gjorde kortet tre gånger så högt. Det var inte
   kolumnen som kostade höjden utan Klarna-badgen, som då låg i egen rad och var
   48px hög.

   Klarna göms här. Bredden räcker inte till både badgen och en högerkolumn som
   håller ihop, och badgen står kvar i hero-bannern högst upp, alltså en gång per
   sida i stället för en gång per rad.

   Enda mobilregeln för raden. Tidigare fanns tre, i olika delar av filen, och de
   satte samma egenskaper till olika värden. Lägg inte till en fjärde. */
@media (max-width: 768px) {
    .tickets_by_wrap > ul {
        gap: 6px;
    }

    .tickets_by_wrap > ul > li.t2-card--row {
        padding: 9px 10px;
        padding-left: 20px;

        /* 133px = informationskolumnens värsta fall 113 + 18 padding + 2 ram.

           Varför informationen och inte högerkolumnen: högerkolumnen är pris 24
           + väljare 34 + knapp 40 + 12 radgap = 110, alltså lägre. Informationen
           är titel 41 i två rader + fans 17 + metarad 30 i två rader + badgar 19
           + 6 gap = 113.

           Utan min-height blir kort med kort titel 130 och kort med lång titel
           133. Tre pixlars skillnad räcker för att listan ska hoppa när man
           skrollar, och det är hela skälet till att raden har en min-height alls.

           Sänk den inte utan att först korta informationen, och räkna om den om
           någon av de fyra delarna byter storlek. */
        min-height: 133px;
    }

    .tickets_by_wrap > ul > li.t2-card--row > .t2-body {
        /* Fast bredd på högerkolumnen och inte auto: väljaren och knappen ska
           bli exakt lika breda, och kolumnen ska stå still mellan rader oavsett
           hur långt priset är.

           92px och inte mer: allt som läggs här tas från informationen till
           vänster, och där är varje pixel text. Väljaren rymmer en tvåsiffrig
           siffra med pil, knappen rymmer "Köp nu!". Mätt vid 328px viewport ger
           det informationskolumnen 186px i stället för 170. */
        grid-template-columns: minmax(0, 1fr) 92px;
        column-gap: 10px;
        row-gap: 6px;
        align-items: center;
    }

    /* gap 2px och inte 3, samt line-height 1.2 på titeln nedan: tillsammans tar
       de informationskolumnens värsta fall från 117px till 113, alltså nära
       högerkolumnens 110. Utan dem blir kort med både tvåradig titel och
       tvåradig metarad högre än sina grannar. */
    .tickets_by_wrap .t2-card--row .t2-main {
        grid-column: 1;
        grid-row: 1 / span 3;
        gap: 2px;
    }

    .tickets_by_wrap .t2-card--row .t2-price { grid-column: 2; grid-row: 1; justify-self: end; }
    .tickets_by_wrap .t2-card--row .t2-extra { grid-column: 2; grid-row: 2; justify-self: stretch; }
    .tickets_by_wrap .t2-card--row .t2-side  { grid-column: 2; grid-row: 3; justify-self: stretch; }

    .tickets_by_wrap .t2-card--row .klarna-ticket-badge {
        display: none;
    }

    .tickets_by_wrap .t2-card--row .t2-extra {
        gap: 0;
    }

    /* Högst två rader, sedan ellips. Informationskolumnen är smalare nu när
       högerkolumnen tar 92px, men den är också tre rader hög, så en tvåradig
       titel ryms utan att kortet växer. Fler än två rader gör den däremot det,
       och då hoppar listan.

       white-space:normal behövs uttryckligen: arvegodset sätter nowrap på varje
       p och span i raden. Prefixet är det som vinner den striden. */
    .tickets_by_wrap .t2-card--row .t2-title {
        font-size: 17px;
        line-height: 1.2;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Metaraden bryts till två rader här, till skillnad från desktop.

       Informationskolumnen är 186px bred mot desktops fulla kortbredd, och
       "Platser tillsammans · Mobilbiljett" ryms inte på en rad i den. Höjden
       finns däremot över: högerkolumnen är 112px och informationen bara 83, så
       en andra metarad kostar noll kortHÖJD.

       max-height är taket. Två rader, aldrig tre, av samma skäl som resten av
       blocket: ett kort som växer förbi sina grannar får listan att hoppa. */
    .tickets_by_wrap .t2-card--row .t2-meta {
        flex-wrap: wrap;
        gap: 1px 8px;
        max-height: 36px;
        font-size: 12px;
    }

    /* Badgeraden behövde 187px och fick 170 innan kolumnen drogs in, och
       klipptes därför mitt i ett ord. Med 186px och den här storleken ryms två
       badgar. Fler än två får fortfarande klippas, hellre det än att raden bryts
       och kortet växer. */
    .tickets_by_wrap .t2-card--row .t2-badges {
        gap: 5px;
    }

    .tickets_by_wrap .t2-card--row .badge {
        font-size: 10px;
        padding: 3px 5px;
    }

    .tickets_by_wrap .t2-card--row .t2-price {
        font-size: 16px;
    }

    /* width:100% på båda, annars håller deras egna min-width kvar var sin bredd
       och paret ser ojämnt ut i en kolumn där de står på varandra. */
    /* Omslaget måste sträckas först. Det är en div inuti .t2-extra, som är en
       flexbox, så utan flex:1 är den innehållsbred och select blev 43px av
       kolumnens 92. Uppmätt på test2 2026-09-01. */
    .tickets_by_wrap .t2-card--row .ticket_by_select {
        flex: 1 1 auto;
        width: 100%;
    }

    .tickets_by_wrap .t2-card--row select.number_of_tickets {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        height: 34px;
    }

    .tickets_by_wrap .t2-card--row .t2-cta {
        width: 100%;
        min-width: 0;
        padding: 8px 14px;
        font-size: 14px;
    }
}

/* ============================================================================
   HEADERNS MOBILMENY
   ----------------------------------------------------------------------------
   Markupen och beteendet star i elements/common/main-nav.jsp, som alla fyra
   ramfilerna inkluderar. Bara utseendet bor har, sa att det cachas i stallet
   for att skickas med varje sidvisning.

   ALLT LIGGER I MEDIAFRAGAN utom raden som doljer lados delar pa desktop.
   Over 768px ar menyn samma vagratta rad som forut, och den ritas av
   ul#menu-main-navigation-reglerna hogre upp i filen, ororda.

   SPECIFICITETEN AR MATT, INTE GISSAD. Listan ar samma element som forut och
   bar kvar id:t menu-main-navigation, sa arvegodset traffar den:

     ul#menu-main-navigation      (1,0,1)  font-size: 0, text-align: right
     ul#menu-main-navigation li   (1,0,2)  border-right: 1px solid white
     ul#menu-main-navigation li a (1,0,2)  font-size: 14px
     .srt-menu                    (0,1,0)  display: none
     .srt-menu li a               (0,1,2)  bla bakgrund, vit underkant
     nav ul li a                  (0,0,3)  border-bottom: 2px solid #FFF

   Darfor ar reglerna nedan prefixade med #t2m-lada, alltsa minst (1,1,x). En
   klassbaserad selektor hade forlorat mot id-selektorerna och listan hade
   renderats med font-size: 0, alltsa osynlig text.

   Z-INDEX JAMFORS INUTI <header>, som under 768px ar position: fixed med
   z-index 99999 och darmed en egen stacking context. Sokrutans .search_nav_box
   ligger pa 99990 dar, sa skuggan tar 100000 och ladan 100001.
   ========================================================================== */

.t2m-burgare,
.t2m-stang,
.t2m-lada-huvud,
.t2m-skugga { display: none; }

/* SPRAKVALJAREN BEHOVER EN POSITIONERAD FORFADER, PA ALLA SIDOR.

   language-selector.jsp hanger globen i radens hogerhorn med position: absolute
   och right: 8px, upp till 991 px. Ankaret, position: relative pa #topnav,
   sattes hittills BARA av mobile-search-toggle.jsp, och den filen laddas bara
   dar forstoringsglaset ska finnas: ligasidorna genom league-page.jsp och
   text_with_dynamic_events.jsp, plus kopsidan.

   Pa alla andra sidor, alltsa startsidan, hjalpsidorna och magasinet, ar
   narmaste positionerade forfader i stallet <header>, som ar position: fixed
   under 768 px. Da raknas top: 2px fran headerns overkant och inte fran
   navigationsraden, och globen hamnar uppe i .top-info-banner. Kontrollerat:
   varken .row eller #topnav bar nagon position i ovrigt.

   Samma brytpunkt som regeln den ankrar, 991 och inte 768: mellan dem star
   globen absolut men ladan har inte tagit over raden.

   Glaset och globen krockar daremot inte med varandra. Globen ligger 8 px fran
   kanten och glaset 52, bada 44 px breda, alltsa kant i kant utan overlapp. */
@media (max-width: 991px) {
    #topnav { position: relative; }
}

@media only screen and (max-width: 768px) {

    /* NOLLSTALL DEN NAKNA BUTTON-REGELN FORST.
       standard.css rad 3366 ger VARJE button 74x40 px, 12 px marginal och
       orange bakgrund. Den ar skriven for formularknappar och traffar allt, sa
       utan de har raderna blir hamburgaren en orange ruta som skjuter headern
       ur led. */
    .t2m-burgare,
    .t2m-stang {
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 8px;
        align-self: center;
        color: #ffffff;
        cursor: pointer;
    }

    /* float: left aterger .menu-toggle:s plats i raden pa pixeln, sa headern
       inte flyttar sig av bytet. 44 px ar minsta traffyta pa telefon. */
    .t2m-burgare {
        display: flex;
        align-items: center;
        justify-content: center;
        float: left;
        width: 44px;
        height: 44px;
        margin-left: 8px;
    }
    .t2m-burgare svg { display: block; width: 24px; height: 24px; }

    .t2m-stang {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
    }
    .t2m-stang svg { display: block; width: 22px; height: 22px; }

    /* LADAN AR position: fixed, OCH DET AR FIXEN.
       Listan lag forut i flodet inuti header { height: 160px }, som varken
       scrollar eller klipper. Tretton poster a ~40 px blev 520 px, sa de
       nedersta gick inte att na pa en kort telefon. En fixerad panel med egen
       scroll har inte det problemet, och headerns hojd andras inte langre av
       att menyn oppnas, vilket ocksa gor --header-offset-matningen korrekt. */
    #t2m-lada {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 320px;
        max-width: 86vw;
        margin: 0;
        /* Hemindikatorn ligger over de nedersta pixlarna. */
        padding: 0 0 calc(24px + env(safe-area-inset-bottom));
        padding-left: env(safe-area-inset-left);
        box-sizing: border-box;
        background: #003365;
        box-shadow: 2px 0 24px rgba(0, 20, 45, 0.22);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Scrollen ska inte laka till sidan bakom nar listan tar slut. */
        overscroll-behavior: contain;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        -webkit-transition: -webkit-transform .22s ease;
        transition: transform .22s ease;
        z-index: 100001;
    }
    #t2m-lada.ar-oppen {
        -webkit-transform: none;
        transform: none;
    }

    .t2m-skugga {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(3, 20, 40, 0.55);
        z-index: 100000;
    }
    /* [hidden] ger display: none ur webblasarens egen stilmall, och regeln ovan
       satter display, sa den maste sagas om. */
    .t2m-skugga[hidden] { display: none; }

    .t2m-lada-huvud {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 8px 8px 18px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    }
    .t2m-lada-logo { display: block; line-height: 0; }
    .t2m-lada-logo img { display: block; height: 26px; width: auto; }

    /* Listan. Se specificitetsnoten hogst upp i blocket for varfor varje
       selektor bar #t2m-lada. */
    #t2m-lada .t2m-lista {
        display: block;
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: left;
        font-size: 15px;
    }
    #t2m-lada .t2m-lista > li {
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
    }
    #t2m-lada .t2m-lista > li > a {
        display: block;
        min-height: 46px;
        padding: 13px 18px;
        box-sizing: border-box;
        background: none;
        border: 0;
        color: #ffffff;
        font-size: 15px;
        font-weight: normal;
        line-height: 1.3;
        text-align: left;
        text-decoration: none;
        /* Sajten har trettiosju sprak. Ett sammansatt ord i tyska eller finska
           kan vara bredare an ladans 320 px, och utan den har raden skjuter det
           ut over kanten i stallet for att brytas. */
        overflow-wrap: break-word;
    }
    #t2m-lada .t2m-lista > li + li > a {
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }
    #t2m-lada .t2m-lista > li > a:hover {
        background: #0099ff;
        color: #ffffff;
    }

    /* DEN SIDA MAN STAR PA. Klassen satts av main-nav.jsp tillsammans med
       aria-current, sa markeringen syns och lases upp av samma orsak.

       En list forkant och inte en fylld rad: fyllningen ar hover-farg, och tva
       rader i samma farg hade sagt att man hovrar dar man star. Kanten ritas
       med box-shadow inuti och inte med border-left, for en border hade flyttat
       texten 3 px och gjort listan ojamn. */
    #t2m-lada .t2m-lista > li > a.ar-aktuell {
        box-shadow: inset 3px 0 0 #ff5000;
        font-weight: bold;
    }

    .t2m-burgare:focus-visible,
    .t2m-stang:focus-visible,
    #t2m-lada .t2m-lista > li > a:focus-visible {
        outline: 2px solid #ff5000;
        outline-offset: -2px;
    }

    /* LADAN SJALV FAR INGEN RING. Den tar emot fokus vid oppning, se oppna() i
       main-nav.jsp, och en ring runt hela panelen sager ingenting: den ar inte
       en kontroll och gar inte att tabba till. Ringen pa krysset ovan star
       kvar, den syns nar nagon faktiskt tabbar dit. */
    #t2m-lada:focus,
    #t2m-lada:focus-visible { outline: none; }

    /* Scroll-last pa bade html och body: iOS Safari rullar annars body vidare
       bakom en fixerad panel. Regeln star inuti mediafragan sa att ett last
       lage sjalvlaker om fonstret vaxer forbi brytpunkten, aven utan JS. */
    html.t2m-meny-oppen,
    html.t2m-meny-oppen body { overflow: hidden; }
}

/* REDUCERAD RORELSE. Ladan glider in med en transition pa transform, och for
   den som bett systemet om mindre rorelse ska den i stallet bara vara dar.

   Bara ladan. Skuggan har ingen overgang alls, den togglas med hidden-attributet
   och far sitt display ur regeln ovan, sa en rad for den hade sett omtanksam ut
   och inte gjort nagonting.

   Egen mediafraga pa toppnivan och inte nastlad inuti den ovan: nastlade
   mediafragor kraver CSS Nesting, som resten av filen inte anvander. Samma
   specificitet, men senare i filen, sa den vinner. */
@media (prefers-reduced-motion: reduce) {
    #t2m-lada {
        -webkit-transition: none;
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #t2m-lada { -webkit-transition: none; transition: none; }
}

/* ---------------------------------------------------------------------------
   TRYGGHETSBANDET pa startsidan: fyra pastaenden pa EN rad direkt under
   headern, var och ett med rubrik och en forklarande rad under.

   Markupen byggs i frametemplates/standard.jsp (trustBand) och texterna star
   i resources/xml/sidebar-right.xml. Bandet ligger mellan </header> och
   <main>, alltsa utanfor sidans max-width, och gar darfor kant till kant som
   headern ovanfor. Luften in till texten sitter har i stallet, i en padding
   som foljer fonstret.

   BARA DESKTOP. Fyra tvaradiga rutor kraver bredd; under 1200 px far varje
   ruta under 300 px och rubrikerna bryts. En telefon moter i stallet samma
   pastaenden i hogerkolumnens trustpanel, som visas pa alla sidtyper, sa
   ingenting gar forlorat av att bandet utgar.

   RAMLOST, som den panelen. En ruta med 2 px ram pa den plats som historiskt
   ar annonsplatsen ar det mest annonslika som finns, och det var skalet till
   att panelen gjordes om. En harfin linje i matchkortens ton (#e9eef5) skiljer
   rutorna at, och en likadan avslutar remsan nedat.
   ------------------------------------------------------------------------- */
.t2-trust { display: none; }

@media only screen and (min-width: 1200px) {
    .t2-trust {
        display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        /* ALDRIG tva rader RUTOR. Utan nowrap bryter en ruta ner sig sa fort
           innehallet inte far plats, och remsan blir dubbelt sa hog utan att
           nagot sagt ifran. Ryms det inte krymper texten i stallet, se
           font-size nedan. */
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        list-style: none;
        margin: 0;
        padding: 0 clamp(16px, 3.4vw, 64px);
        border-bottom: 1px solid #e9eef5;
        background: #ffffff;
        box-sizing: border-box;
    }

    /* TAJT I HOJDLED. Remsan ar en bekraftelse och inte innehall: den ska
       markas i forbifarten, inte ata av det forsta skarmfonstret. 8 px
       pafyllning kring tva textrader ger drygt 50 px total hojd. */
    .t2-trust li {
        display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        /* Gruppen mitt i sin fjardedel. Texten inuti ar fortfarande
           vansterstalld: rubrik och underrad ska sta i lodratt linje med
           varandra, det ar centrering av gruppen som avses, inte av raderna. */
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        gap: 11px;
        min-width: 0;
        padding: 8px clamp(10px, 1.6vw, 26px);
        box-sizing: border-box;
    }

    /* LIKA BREDA SPALTER, INNEHALLET CENTRERAT I VAR OCH EN.

       Spalterna var forst proportionella mot textlangden, sa varje ruta blev
       precis sa bred som den behovde. Det gav en jamn hoger kant men ojamna
       avstand: avdelarna hamnade pa fyra godtyckliga positioner, och eftersom
       innehallet lag vansterstallt i sin ruta borjade den breda rutans ikon
       langt fran den smala rutans text. "Full aterbetalning" satt darfor
       tydligt for langt at vanster.

       LOSNINGEN AR flex: 1 1 auto, INTE 1 1 0. Basis auto betyder att varje
       ruta borjar pa sin egen innehallsbredd, och grow 1 att overskottet
       sedan delas LIKA. Da far varje ruta lika mycket luft, och med
       centrerat innehall hamnar halva luften pa var sida: avstandet fran en
       ruta text till nasta ruta ikon blir detsamma hela vagen, oavsett hur
       olika langa pastaendena ar.

       Fyra LIKA BREDA spalter (1 1 0) provades forst och ar fel har, uppmatt
       2026-09-07: en fjardedel av bandet ar 206 px vid 1200 px, medan
       rubriken "Over 120 000 nojda kunder" behover 221 till 283 px pa
       fjorton av spraken. Georgiskan klipptes aven vid 1633 px. Att krympa
       texten raddar det inte, 11 px lamnade nio sprak klippta. Innehallet
       maste fa satta bredden; det ar bara luften som ska fordelas jamnt. */

    .t2-trust li + li { border-left: 1px solid #e9eef5; }

    .t2-trust__ikon {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        color: #2d507a;
    }
    /* Rutan ar 24 px och glyfen 18, ungefar samma forhallande som
       hogerkolumnens trustpanel har mellan sitt chip och sin ikon. Fyllda
       glyfer i full rutstorlek vager optiskt tyngre an konturikoner och hade
       dragit blicken fran texten de star bredvid. */
    .t2-trust__ikon svg { width: 18px; height: 18px; display: block; }

    /* Tva rader staplade. Kolumn och inte tva syskon i rad: rubriken och
       underraden hor ihop och ska brytas ut ur ikonens flode tillsammans. */
    /* Krymper med innehallet i stallet for att fylla rutan. Med flex-grow
       hade textblocket tagit hela fjardedelen och centreringen av gruppen
       inte synts alls. */
    .t2-trust__text {
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        min-width: 0;
        display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 1px;
    }

    /* Ingen av raderna far bryta: en bruten rad gor remsan hogre, och det ar
       hojden hela blocket handlar om. Rader som anda inte ryms kortas med
       ellips i stallet for att spranga hojden. */
    .t2-trust__rubrik,
    .t2-trust__under {
        display: block;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 600 och inte 700. Fyra feta rubriker i 700 laser som en annonsrad. */
    .t2-trust__rubrik {
        color: #003365;
        font: 600 clamp(12.5px, 0.92vw, 14px)/1.3 Poppins, Arial, "Helvetica Neue", Helvetica, sans-serif;
    }
    /* Underraden ar forklaringen och ska vara tydligt sekundar: ett steg
       mindre och en ljusare ton, sa ogat laser rubrikerna forst och bara
       stannar vid den rad det undrar over. */
    .t2-trust__under {
        color: #6b7f96;
        font: 400 clamp(11px, 0.76vw, 12px)/1.35 Poppins, Arial, "Helvetica Neue", Helvetica, sans-serif;
    }
}


/* ═══════════ Kontaktformuläret i kortens formspråk ═══════════

   Formuläret bar sajtens äldre stil: 2px #003365 runt rutan, radius 4 och
   fyllda #deeef6-fält utan ram. Korten, sidopanelen och köpsidan använder
   --t2-*: 1px #dce7f2, radius 11, vitt och en mjuk skugga.

   SCOPAT TILL #feedbackForm OCH .infobox, aldrig till .input4 eller .form1.
   Båda delas med kassan och säljflödet: buy_shipping_single_page.jsp har sina
   fält och sin landväljare i en .form1 med .input4. Formuläret finns i
   buy_event.jsp och i tre frametemplates, och alla fyra får den nya stilen. */

.infobox {
    border: 1px solid var(--t2-card-border);
    border-radius: var(--t2-card-radius);
    background: var(--t2-card-bg);
    box-shadow: var(--t2-card-shadow);
    padding: 24px;
}

.infobox h3 {
    margin: 0 0 6px;
    color: var(--t2-card-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.infobox p {
    margin: 0 0 14px;
    color: var(--t2-card-sub);
    font-size: 14px;
    line-height: 1.5;
}

/* Kolumnerna satt sida vid sida med marginaler på fyra ställen. En kolumn med
   en gap är samma layout med ett värde i stället för sex. */
#feedbackForm {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#feedbackForm .formleft,
#feedbackForm .formright,
#feedbackForm .formrightbox {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: none;
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    height: auto;
}

/* Fälten: vita med ram, som kortens ytor. Ersätter den fyllda #deeef6-rutan. */
#feedbackForm .input4 {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--t2-card-border);
    border-radius: 6px;
    background: var(--t2-card-bg);
    color: var(--t2-card-text);
    font: 400 14px/1.4 Poppins, Arial, "Helvetica Neue", Helvetica, sans-serif;
}

#feedbackForm .input4::placeholder {
    color: var(--t2-card-sub);
    opacity: 0.6;
}

#feedbackForm .input4:focus {
    outline: none;
    border-color: var(--t2-card-cta);
}

#feedbackForm textarea.input4 {
    min-height: 96px;
    resize: vertical;
}

/* Knappen saknar klass i markupen, så den får kortens CTA här i stället.
   Samma mått som .t2-cta, och högerställd så raden slutar där fälten slutar.

   Bredden måste stå här. Sajtens nakna button-regel sätter width: 74px och
   height: 40px, och en min-width lyfter bara golvet: texten "Skicka förfrågan"
   bröt på två rader inuti en knapp som inte kunde växa. auto plus nowrap låter
   den följa sin text på varje språk, från "Send request" till "Aanvraag
   versturen". */
#feedbackForm button:not(.request-count__pill) {
    align-self: flex-end;
    box-sizing: border-box;
    width: auto;
    height: auto;
    padding: 9px 18px;
    min-width: 96px;
    white-space: nowrap;
    border: 0;
    border-radius: 6px;
    background: var(--t2-card-cta);
    color: #ffffff;
    font: 600 14px/1 Poppins, Arial, "Helvetica Neue", Helvetica, sans-serif;
    cursor: pointer;
    transition: background 0.18s ease;
}

#feedbackForm button:not(.request-count__pill):hover,
#feedbackForm button:not(.request-count__pill):focus {
    background: var(--t2-card-cta-hover);
}

/* ═══════════ Kvittensen och felet ═══════════

   [hidden] först, och med !important. Attributet ger display:none ur
   webbläsarens egen stilmall, och den förlorar mot varje regel i den här
   filen: #feedbackForm har display:flex, så ett dolt formulär hade fortsatt
   synas under kvittensen. */
.infobox [hidden] {
    display: none !important;
}

.form-sent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid #b7dfc4;
    border-radius: 8px;
    background: #eef8f1;
    color: #14663a;
}

/* Fokusringen syns inte: rutan får fokus av skriptet, inte av tangentbordet,
   och en ring runt hela panelen läser som ett fel. Skärmläsaren når den ändå,
   det är därför fokus flyttas dit. */
.form-sent:focus {
    outline: none;
}

.form-sent__ikon {
    flex: 0 0 auto;
    margin-top: 1px;
    color: #1a7f45;
}

.form-sent__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.form-sent__titel {
    font: 700 15px/1.35 Poppins, Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.form-sent__rad {
    font: 400 14px/1.45 Poppins, Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #1d5c3a;
    overflow-wrap: anywhere;
}

/* Servern kunde inte ta emot. Samma form som kvittensen, andra färger, så de
   två läser som samma sorts besked. */
.form-error {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #f0c2be;
    border-radius: 8px;
    background: #fdeeed;
    color: #8c1d18;
    font: 400 14px/1.45 Poppins, Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.form-error:focus {
    outline: none;
}

.form-error__ikon {
    flex: 0 0 auto;
    margin-top: 1px;
    color: #b3261e;
}

/* Knappen under sändningen: dämpad och utan hover, så den läser som låst. */
#feedbackForm button:not(.request-count__pill)[disabled] {
    opacity: 0.6;
    cursor: default;
}

#feedbackForm button:not(.request-count__pill)[disabled]:hover {
    background: var(--t2-card-cta);
}

/* Felet under e-postfältet. Färgen bär inte informationen ensam: texten säger
   vad som är fel, och fältet får en ram i samma färg. */
.form-fel {
    margin: 0;
    color: #b3261e;
    font: 400 13px/1.4 Poppins, Arial, "Helvetica Neue", Helvetica, sans-serif;
}

#feedbackForm .input4--fel,
#feedbackForm .input4--fel:focus {
    border-color: #b3261e;
}

/* ═══════════ Antalet, som knappar i stället för en meny ═══════════

   Samma idé som köpsidans pillrar ovanför biljettlistan, men egna klasser och
   egna regler. Köpsidans är scopade till .tickets_by_wrap, och formuläret
   ligger där bara efter att JS flyttat det: med den scopingen hade knapparna
   stått ostylade tills skriptet kört, eller för alltid om det inte kör.

   Måtten är köpsidans, färgerna är kortens. */
.request-count {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.request-count__label {
    flex: 0 0 auto;
    margin-right: 5px;
    color: var(--t2-card-text);
    font: 700 14px/34px Poppins, Arial, "Helvetica Neue", Helvetica, sans-serif;
}

#feedbackForm .request-count__pill {
    box-sizing: border-box;
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--t2-card-border);
    border-radius: 8px;
    background: var(--t2-card-bg);
    color: var(--t2-card-text);
    font: 700 13px/1 Poppins, Arial, "Helvetica Neue", Helvetica, sans-serif;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease;
}

/* "10+" är tre tecken i en knapp gjord för ett eller två. Köpsidan löser samma
   sak för sin "Alla"-pill med en bredare first-of-type. */
#feedbackForm .request-count__pill:last-of-type {
    flex-basis: 48px;
    width: 48px;
    min-width: 48px;
}

#feedbackForm .request-count__pill:hover {
    background: #fff3ea;
    border-color: var(--t2-card-cta);
}

#feedbackForm .request-count__pill.is-active {
    border-color: var(--t2-card-cta);
    background: var(--t2-card-cta);
    color: #ffffff;
}

@media (max-width: 700px) {
    .infobox { padding: 18px; }
    #feedbackForm button:not(.request-count__pill) { align-self: stretch; }

    /* Etiketten på egen rad: elva element på en 390-telefon hade annars
       antingen krympt knapparna eller skjutit ut dem ur rutan. */
    .request-count__label {
        flex: 1 0 100%;
        margin: 0;
        line-height: 1.4;
    }
}