/* Responsive styles */

:root {
  --color-black: #1a2d48;
}

.side-by-side-container {
  order: 4;
}




.row_wrapper {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
div#höger {
  width: calc(50% - 1rem);
  margin-top: 0px;
  

}
div#maindiv {
  margin: auto;
  width: calc(50% - 1rem);
  position: relative;
}



div#informationaboutsite {
  display: flex;
  flex-wrap: wrap;
  padding-left: 10%;
  padding-right: 10%;
  position: relative;
  column-gap: 30px;
  row-gap: 50px;
  justify-content: space-between;
  margin-top: 50px;
  margin-bottom: 100px;
  height: auto;
}
div#informationcredit {
  width: 100%;
  height: fit-content;
  margin: 0;
  padding: 3rem 1rem;
  position: relative;
  display: flex;
  flex-direction: column;
}
#informationaboutsite #one {
  height: auto;
  position: relative;
  margin: 0;
}
#informationaboutsite #two {
  height: auto;
  position: relative;
  margin: 0;
}
#informationaboutsite #three {
  height: auto;
  position: relative;
  margin: 0;
}
div #categorytitle {
  padding-top: 0;
  margin-top: 0;
}
img#logobild {
  margin-top: 0;
  margin-left: auto;
  margin-right: 0;
  right: 0;
  width: 300px;
  top: 0;
  transform: translate(57%, -45%);
  
}
div #categorytitle2 {
  margin-top: 0;
}
div#recommended {
  display: flex;
  height: auto;
  flex-wrap: wrap;
  position: relative;
  gap: 5rem;
}
div#recinfo {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  height: auto;
  padding: 20px 1rem;
}
div#recinfo2 {
  height: auto;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
}
div#titlediv {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 1rem;
  top: auto;
  margin-top: 80px;
  z-index: 9;
}
div#rekommenderadekort {
  display: flex;
  flex-wrap: wrap;
  height: auto;
  width: 100%;
  padding-bottom: 80px;
}
div#rekommenderadekort > div {
  margin-bottom: 0;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  height: auto;
}
div #recotitle {
  margin-top: 0;
  margin-bottom: 20px;
}
div #litentextreco {
  margin-top: 0;
}
div#topDiv {
  margin-bottom: 0;
  margin-top: 50px;
}
div#allakort {
  display: flex;
  width: 100%;
  height: auto;
  overflow: unset;
  flex-wrap: wrap;
  padding: 0;
}
div#allakortliten {
  position: relative;
  margin: 0;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 50px 15px;
}
#allakort #Kortkategorier3 {
  width: 100%;
}
div#allakortcaption {
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
div#myBtnContainer {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  width: 100%;
  display: flex;
  padding: 1rem 10%;
  flex-direction: column;
  gap: 20px;
}
button.collapsible3 {
  position: relative;
  margin: 0;
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  height: auto;
  width: fit-content !important;
  gap: 8px;
}
button.collapsible3.active + .content3 {
  display: flex !important;
}
div.content3 {
  position: relative;
  height: auto;
  margin-top: 0;
  margin-left: 0;
  overflow: unset;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
}
div.content3 h1 {
  width: 100%;
}
div.content3 h4 {
  width: 100%;
}
img#filterimg {
  top: auto;
  margin: 0;
}
div #allakortrubrik {
  margin-top: 0;
}
div #smalltextwhite {
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
}

div#scrolla {
  position: relative;
  display:contents;
  flex-wrap:wrap;
  float: none;
}

html body:not(navbar) {
  margin-top: 0;
}

/* Calculator page */
.calculator_page div#informationcredit {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
}
.calculator_page .container {
  width: 1200px;
  max-width: 90%;
}

/* Cardinfo page */
div#informationcredit_cardinfo {
  position: relative;
  height: auto;
  padding: 2rem 1rem;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
}
.cardinfo_page #navbar {
  top: 0;
}
div#review_cardinfo {
  /* visibility: hidden; */
}
div#cardInfo {
  padding: 20px 20px;
}

/* Compare page */
div#informationcredit_compare {
  position: relative;
  margin-top: 80px;
  height: auto;
  padding: 2rem 1rem;
  margin-left: auto;
  margin-right: auto;
}

/* Kortguide page */
.kortguide_page div#informationcredit {
  width: 70%;
  position: relative;
  margin: 80px auto;
  
}
.kortguide_page main {
  padding-top: 0;
  
}
.kortguide_page #navbar {
  top: 10;
  margin-top: 0;
}

.kortguide_page #navbar a {
  font-weight: 200;
}
img#vadarkreditkortbild {
  width: 85px;
  margin-left: -20px;
  margin-top: -61px;
}

/* Vadarkreditkort page */
.vadarkreditkort_page #navbar {
  margin-top: 0;
  top: 0;
  left: 0;
  
}
.vadarkreditkort_page div#informationcredit {
  width: 70%;
  margin: 80px auto;
}
.vadarkreditkort_page .container {
  margin-top: 0;
  width: 100%;
}
.vadarkreditkort_page .left-div {
  width: 100%;
  margin: 50px auto;
}
.vadarkreditkort_page #informationcredit2 {
  margin: 50px auto;
  position: relative;
}
img#logobild_vadarkreditkort {
  width: 25%;
  position: absolute;
  margin-top: -25%;
  margin-left: 95%;
}
.white-div.right-div {
  margin: 50px auto;
}
img#logobild_vadarkreditkort {
  width: 120px;
  position: absolute;
  margin-top: auto;
  margin-left: auto;
  top: 0;
  right: 0;
  z-index: 9;
  transform: translate(90%, -45%);
}
div#menu {
  position: relative;
}
input#myInput {
  margin-left: auto;
  right: 2rem;
  position: relative;
}
ul#myUL {
  position: fixed;
  margin-left: auto;
  right: 2rem;
  margin-top: 0px;
  margin-right: unset;
  width: 27vw;
  padding: 10px 10px;
}
div#welcomeDiv {
  width: 90%;
  height: 300px;
  top: auto;
  display: none;
}
.containertext_img {
  position: relative;
  z-index: 9;
  width: auto;
  height: auto;
}
.textunderbild_inner {
  position: relative;
  height: auto !important;
  padding: 10px 20px 20px 20px !important;
}
div#textunderbild {
  padding-top: 30px !important;
}
.textunderbild_list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.textunderbild_list_item img#symboler_small {
  top: auto;
  display: inline-flex;
  min-width: 25px;
}
.textunderbild_list_item {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 15px;
}
.textunderbild_list_item #propertytop {
  top: auto;
  margin: 0;
  min-width: 25px;
}
.textunderbild_list_item #propertybottom_main_n {
  top: auto;
  margin: 0;
  min-width: 25px;
}
.textunderbild_list .textunderbild_list_item img {
  min-width: 25px;
}
#ratingall #symbolerrating_top {
  top: auto;
  left: auto;
  min-width: 30px;
}
.textunderbild_inner #ratingall {
  margin-top: 0;
  margin-bottom: 1rem;
  display: flex;
  width: 100%;
  justify-content: center;
}
.textunderbild_action {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 20px;
}
.textunderbild_action a.button {
  margin: 0 0;
}
.textunderbild_inner #companycard {
  position: relative;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  text-align: center;
}
.textunderbild_list_item > img {
  top: auto !important;
  margin: 0 !important;
}
.traveler--boxes {
  width: calc(90% + 40px);
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.traveler--box-row {
  display: grid;
  gap: 2rem;
}
.traveler--box-row.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.traveler--box-row.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.traveler--box {
  height: 100% !important;
  width: 100% !important;
  margin: auto !important;
  overflow: hidden !important;
}
.traveler--box-row.cols-2 .traveler--box {
  padding: 6rem 2rem;
}
.traveler--box-row.cols-3 .traveler--box {
  padding: 5rem 2rem;
}
.traveler--box #rubrikcategory {
  margin-top: auto;
  margin-bottom: 20px;
  margin-left: auto;
  padding: 0;
}
.traveler--box #Traveller {
  position: relative;
  height: auto;
  max-height: unset;
  padding: 0;
}
.traveler--box #litentext_blue_trav {
  margin: auto;
}
.traveler--box #rubrikcategory2 {
  margin-top: auto;
  margin-left: auto;
  margin-bottom: 20px;
  position: relative;
}
.traveler--box #litentext_blue2 {
  margin-top: auto;
  margin-left: auto;
  margin-bottom: 0;
}
img#symboler_cat_small_trav {
  margin-top: auto;
  margin-left: auto;
  top: 0;
  right: 0;
  transform: translateY(-55px);
}
img#symboler_cat_small {
  margin: auto;
  top: 0;
  right: 0;
}
.traveler--box-row.cols-2 img#symboler_cat_small {
  transform: translateY(-55px);
}
.traveler--box-row.cols-3 img#symboler_cat_small {
  transform: translateY(-50px);
}
#rekommenderadekort #Kortkategorier2 {
  margin-left: auto;
  margin-right: auto;
}
h2#recotitle {
  margin-left: auto;
  margin-right: auto;
}
div #litentextreco {
  margin-top: 0;
  margin-left: auto;
}
div#topDiv {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  position: relative;
  padding: 1rem 1rem;
  display: flex;
  flex-wrap: wrap;
}
img#symbolercategory {
  position: absolute;
  min-width: 45px;
  margin: auto;
  transform: translate(-64%, -69%);
  z-index: 9;
  width: 45px;
}
.topDiv--box-right {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 300px);
  margin-left: auto;
}
.topDiv--rating {
  display: flex;
  justify-content: flex-end;
}
img#symbolerrating {
  min-width: 30px;
}
.topDiv--box #travelcardperks {
  width: fit-content;
  height: auto;
  margin-top: 2rem;
  margin-left: auto;
}
div#perks {
  margin-top: auto;
  width: fit-content;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
  gap: 10px;
}
.perks--inner {
  flex-basis: 40%;
  display: flex;
  flex-grow: 1;
  align-items: center;
  gap: 5px;
}
.perks--inner > img {
  min-width: 35px;
  top: auto !important;
  margin: 0 !important;
}
p#travelperkbottom {
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
#comparisonTable {
  width: 100%;
  margin-top: auto;
  margin-left: 0;
}
.topDiv--box-action {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: 100%;
}
#square-container .square {
	padding: 10px;
}
div.footer-bottom {
	padding-left: 20px;
	padding-right: 20px;
}
div#square-container {
	justify-content: center;
}
.card-info-content p.moveright {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.perks-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.perks-inner > img {
  top: auto !important;
  margin: 0 !important;
}
div.perks-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
div.cons-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.cons-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cons-inner > img {
  top: auto !important;
  margin: 0 !important;
}
div#menu + #titleforinfo {
  margin-top: 50px;
}
div#navbar {
  position: fixed;
  width: 100%;
}
.card-image {
  margin-left: auto;
  margin-right: auto;



}



.card-image img {
  margin-left: auto;
  margin-right: auto;
  display: block;
  border-radius: 18px;
}
.card-info .card-details {
  margin-top: 1rem;
}
.recommended-card-slider {
  display: flex;
  width: 100%;
  padding: 10px 0px;
}
.card-info #ratingall {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  margin-top: 5px;
}
.card-info #ratingall {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  margin-top: 5px;
  display: flex;
}
.card-info #ratingall > p {
  display: none;
}
.card-info #ratingall img {
  margin: 0 3px !important;
}
div#searchcard {
  display: flex;
  float: none;
  align-items: center;
  margin: 0;
  height: auto;
  flex-wrap: nowrap;
  width: 100%;
  gap: 10px;
}
ul#myUL li a {
  width: auto;
  margin: 0;
  line-height: 1.3;
  font-size: 18px;
}
ul#myUL > li:not(:last-child) {
  margin-bottom: 15px;
}
div#searchcard img {
  width: 50px !important;
  max-width: 100%;
}
button.compare-btn_search {
  position: relative;
  margin-top: 0;
  margin-left: auto;
}
.prev, .next {
  z-index: 10;
}









/* global ends
------------------------------------------------------------------------------------------------------------------ */

@media screen and (min-width: 1025px) {
  .mob-tab {
    display: none !important;
  }
  .tab {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-left: auto;
    margin-right: 0;
    width: max-content;
  }
  div#recommendedcaption_3 {
    display: inline-flex;
    margin-left: 0;
    flex-direction: column;
    width: 255px;
    gap: 10px;
  }
  div#recommendedcaption_3 img.overlay_reco {
    width: 100% !important;
  }
  #recommendedcaption {
    display: inline-flex;
    margin-left: 0;
    flex-direction: column;
    width: 255px;
    gap: 10px;
    position: relative;
}
  #recommendedcaption img.overlay_reco {
    width: 100% !important;
  }
  #recommendedcaption_2 {
    display: inline-flex;
    margin-left: 0;
    flex-direction: column;
    width: 255px;
    gap: 10px;
  }
  #recommendedcaption_2 img.overlay_reco {
    width: 100% !important;
  }
  div#rekommenderadekort > div {
    width: 80%;
}
div#topDiv {
  padding: 30px 30px;
}
#comparisonContainer > .card-info {
  min-width: 500px;
}
div#comparisonContainer {
  gap: 20px;
}


} /* /min-width:1025px 
------------------------------------------------------------------------------------------------------------------ */

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

  * {
    box-sizing: border-box;
  }
  a#mobSearchBtn svg {
    padding: 0;
    color: #f7f7f7;
  }
  html body:not(navbar) {
    margin-top: 0;
  }
  #mobheader {
    background-color: #f7f7f7;

  }
  div#navbar {
    display: none;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  color: #666;
}

a {
  text-decoration: none;
  color: #2c456b;
  font-size: 14px;
  display: inline-flex; /* Use inline-flex to keep text and arrow aligned */
  align-items: center; /* Vertically aligns the text and arrow */
  font-weight: 100; /* Make all items bold */
}

.has-submenu > a {
  font-weight: 100; /* Make items with submenus bold */
}

.has-submenu > a::after {
  content: " ▼"; /* Downward arrow */
  font-size: 14px; /* Increased arrow size */
  color: #2c456b;
  margin-left: 6px; /* Space between text and arrow */
  transition: transform 0.3s ease;
}

.has-submenu.open > a::after {
  transform: rotate(180deg); /* Rotates when submenu is open */
}

/* Submenu items */
.submenu li a {
  font-weight: normal; /* Lighter font for submenu items */
}
  div#navbar .dropdown {
    display: none;
  }
  div#navbar > a {
    display: none;
  }
  div#navbar {
    position: fixed;
    top: -150px;
    left: 0;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    /* transform: scale(0); */
    transition: all 0.3s ease;
    transform-origin: center;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 2rem;
}
  div#navbar.active {
    /* transform: scale(1); */
    top: var(--mobheader-height);
    
  }
  ul#myUL {
    right: 0;
    left: 0;
    width: 100%;
    position: fixed;
    margin: 0;
    top: var(--searchbox-body-offset);
    padding: 1rem  1rem;
}
ul#myUL li {
  display: flex;
  width: 100%;
}
ul#myUL > li:not(:last-child) {
  margin-bottom: 1rem;
}
div#searchcard {
  width: 100%;
  height: auto;
  line-height: normal;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
}
#myUL li a {
  display: inline-flex;
  margin: unset;
  width: fit-content;
}
#myUL li a#söktextkort {
  margin-left: 1rem;
}
button.compare-btn_search {
  position: relative;
  margin-top: unset;
  margin-bottom: unset;
  margin-left: auto;
  margin-right: unset;
  height: auto;
  padding: 10px 20px;
}
#myUL li a img {
  width: 100px !important;
}
  .nav-after {
    display: none;
  }
  div#navbar input#myInput {
    display: flex;
    height: auto;
    width: 500px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    right: auto;
    background-position: 98%;
}
  div#mobheader {
    display: flex;
    flex-wrap: nowrap;
    padding: 5px 1rem;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 99;
    width: 100%;
    gap: 1rem;
    
  }
  div#mobheader svg {
    padding: 0;
    width: 40px;
    height: auto;
    color: #2c456b;
  }
  .mobnav {
    position: fixed;
    top: 0;
    right: -400px;
    width: 350px;
    height: 100%;
    background-color: #f7f7f7;
    z-index: 99;
    overflow-y: auto;
    transition: all 0.3s ease-in-out;

  }
  .mobnav.active {
    right: 0px;
  }
  .mob_logo {
    margin-right: auto;
    color: #f7f7f7;
   
    border-radius: 12px;

    
  }
  div#navbar a.mob_search_close {
    display: flex;
    width: 100%;
    position: absolute;
    top: 0;
    color: var(--color-black) !important;
    background-color: transparent !important;
  }
  a.mob_search_close svg {
    padding: 0;
  }
  div#mobheader a#mobSearchBtn svg {
    width: 30px;
    color: #2c456b;
  }
  .mob_div_close {
    padding: 10px 10px 10px 10px;
    display: flex;
    width: 100%;
    justify-content: flex-end;
    background-color: #f7f7f7;
    height: 50px;
    

  }

  
  a.mob_search_close svg {
    padding: 0;
    color: currentColor;
    width: 40px;
    height: auto;
  }
  a#mobSearchBtn {
    color: var(--color-black);
  }
  .hidden {
    display: none !important;
  }
  a.mob_button_open {
    color: var(--color-black);
  }
  a.mob_button_close {
    color: var(--color-black);
  }
  .mobnav ul {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    margin: 0;
    padding: 0;
    
  }
  .mobnav ul a {
    display: flex;
    width: 100%;
    text-decoration: none;
    padding: 10px 20px;
  }
  div#höger {
    padding-left: 0;
    padding-right: 0;
  }
  div#maindiv {
    padding-left: 0;
    padding-right: 0;
    margin: 0;
  }
  .row_wrapper {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  img#symboler {
    top: 15px;
    margin-right: 5px;
    margin-bottom: 8px;
  }
  div#textunderbild {
    display: flex;
    flex-direction: column;
    padding-left: 20px;
  }
  div#textunderbild > img {
    top: 20px;
    margin-left: -21px;
  }
  img#symbolerrating_top {
    top: auto;
    left: auto;
  }
  div#ratingall {
    display: flex;
    order: -1;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    justify-content: center;
  }
  div#textunderbild a.button {
    margin: 20px 0;
    padding: 25px 20px;
  }
  .arrow.bounce {
    margin-left: unset;
    margin-top: unset;
    z-index: 500;
    bottom: 0;
  }
  div#informationaboutsite {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  img#logobild {
    transform: translate(10%, -45%);
  }
  p#litentextrubrik {
    margin: 0;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 1rem;
  }
  #litentextrubrik a {
    font-size: 1.5rem;
  }
  #informationaboutsite #one {
    padding: 15px 15px;
  }
  p#litentextone {
    margin: 0;
  }
  #informationaboutsite #two {
    padding: 15px 15px;
  }
  p#litentexttwo {
    margin: 0;
  }
  #informationaboutsite #three {
    padding: 15px 15px;
  }
  p#litentextthreee {
    margin: 0;
  }
  div#recommended {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  div#recinfo {
    width: 100%;
  }
  div#recinfo2 {
    width: 96%;
  }
  div#titlediv {
    width: calc(100% - 2rem);
  }
  div#rekommenderadekort > div {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}
  div#scrolla {
    justify-content: center;
  }
  div.footer-section {
    flex-basis: 100%;
    margin: 0;
    width: 100%;
  }
  div.footer-container {
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 20px;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  div.footer-bottom {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Calculator page */
  .calculator_page div#informationcredit {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    margin-top: 50px;
  }
  .calculator_page .container {
    width: 100%;
    max-width: 90%;
  }
  .calculator_page div#informationcredit #vadarkreditkortbild {
    margin-top: -69px;
    margin-left: -5px;
    width: 60px;
    position: absolute;
  }

  /* Compare page */
  div#cardsContainer {
    padding: 0;
  }
  div#informationcredit_compare {
    position: relative;
    margin-top: 80px;
    height: auto;
    padding: 2rem 1rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 80px;
  }
  div#compareNavbar {
    height: auto;
    flex-wrap: wrap;
}
#compareNavbar .compare-content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  align-items: center;
  position: relative;
  padding: 10px 10px;
}
#compareNavbar .compare-content button.close-btn {
  margin-left: 10px;
}
#compareNavbar .compare-content button.compare-now-btn {
  position: relative;
  width: auto;
  display: flex;
  height: auto;
  margin-left: auto;
  margin-right: 0;
  margin-top: unset;
  margin-bottom: unset;
}
img#logobild2 {
  margin-left: auto;
  right: 1rem;
  margin-top: -75px;
  min-width: 70px;
}
#cards-container > .card-item {
	width: auto;
	flex-basis: 30%;
	min-width: unset;
	flex-grow: 1;
	margin: 0;
}
#cards-container {
	gap: 20px;
}
div.recommended-card-slider {
  gap: 20px;
}
div#comparisonContainer {
  gap: 20px;
}





} /* /max-width:1024px 
------------------------------------------------------------------------------------------------------------------ */

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .tab {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-left: auto;
    margin-right: 0;
    width: fit-content;
  }
  div#recommendedcaption_3 {
    display: inline-flex;
    margin-left: 0;
    flex-direction: column;
    width: 240px;
    gap: 5px;
  }
  div#recommendedcaption_3 img.overlay_reco {
    width: 100% !important;
  }
  #recommendedcaption {
    display: inline-flex;
    margin-left: 0;
    flex-direction: column;
    width: 240px;
    gap: 5px;
  }
  #recommendedcaption img.overlay_reco {
    width: 100% !important;
  }
  #recommendedcaption_2 {
    display: inline-flex;
    margin-left: 0;
    flex-direction: column;
    width: 240px;
    gap: 5px;
  }
  #recommendedcaption_2 img.overlay_reco {
    width: 100% !important;
  }
  div#perks {
    display: flex;
    flex-wrap: wrap;
    /* flex-direction: column; */
    padding-left: 0px;
}
div.perks-container {
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
}
.perks-inner {
  /* font-size: 14px; */
  flex-wrap: nowrap;
}
div#perks img {
  top: 22px;
  margin-left: -25px;
}
div.cons-container {
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
}
.cons-inner {
  /* font-size: 14px; */
}
div.card-info {
  width: 100%;
  max-width: 100%;
  margin-left: unset;
  margin-right: unset;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  margin-bottom: 3rem;
  
}
.card-info .card-image {
  order: 1;
}
div.card-info img {
  width: 95%;
  margin: auto;
  display: flex;
}
.card-info div#ratingall {
  order: 2;
  margin-top: 10px;
}
.card-info div#ratingall div#ratingall {
  display: flex;
  max-width: 150px;
  margin-top: 0;
  margin-bottom: 0;
}
div#ratingall img#symbolerrating_info {
  margin-right: auto;
}
.card-info .card-details {
  order: 3;
  margin-top: 1rem;
  padding: 0 0;
}
.card-details table {
  table-layout: fixed;
}
div.card-details h2 {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.card-details table th {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  hyphens: auto;
  word-wrap: break-word;
  width: 48%;
  font-size: 0.9rem;
}
.card-details table td {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  hyphens: auto;
  word-wrap: break-word;
  width: 48%;
  font-size: 0.9rem;
}
.card-info .card-details button.apply-now {
  margin-left: auto;
  margin-right: auto;
  padding: 20px 30px;
  width: 100%;
}
img#symbolercategory {
  min-width: 30px;
  width: 30px;
  transform: translate(-51%, -66%);
}
div#topDiv {
  padding: 20px 20px;
}
div#perksinfo {
  margin-left: auto;
}




} /* /(min-width:768px) and (max-width:1024px)
------------------------------------------------------------------------------------------------------------------ */

@media screen and (min-width: 768px) {
  .mob {
    display: none !important;
  }
} /* /min-width:768px 
  ------------------------------------------------------------------------------------------------------------------ */

@media screen and (max-width: 767px) {
  * {
    box-sizing: border-box;
    max-width: 100%;
  }
  table {
    table-layout: fixed;
    width: 100%;
  }
  img {
    max-width: 100%;
    height: auto;
    image-rendering: -webkit-optimize-contrast;
  }
  body {
    margin: 0px;
    padding: 0px;
  }
  iframe {
    max-width: 100% !important;
  }
  object {
    max-width: 100% !important;
  }
  .pc {
    display: none !important;
  }

  div.footer-container {
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-gap: 20px;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  a#logo-link {
    margin: 0;
  }
  div#navbar input#myInput {
    display: flex;
    height: auto;
    width: 85%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: fixed;
  }
  div#höger {
    width: 100%;
  }
  div#litenhöger {
    margin: 0;
    left: 0;               /* Avoid 'auto' to stabilize layout */
    min-height: 400px;     /* Good – reserve vertical space */
    width: 100%;           /* Ensure it spans full width if intended */
    position: relative;    /* Keep if needed, but static is better if possible */
    box-sizing: border-box;/* Avoid layout shifts caused by padding/borders */
    top:-115px;
  }
  
  div#litentext_home {
    width: 100%;
    margin: 0;
    left: auto;
    height: auto;
  }
  div#höger {
    padding-left: 0;
    padding-right: 0;
    height: auto;
    padding-bottom: 10px;
  }
  div#maindiv {
    width: 100%;
    padding-top: 0;
  }
  div#topdiv {
    width: 100%;
  }
  div#textunderbild a.button {
    margin-left: 0;
    padding: 15px 30px;
    min-width: 180px;
}
  div#informationaboutsite > div {
    width: 100%;
  }
  div#recinfo2 ul {
    padding: 0;
  }
  div#rekommenderadekort {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  div#rekommenderadekort > div {
    padding-left: 0;
    padding-right: 0;
  }
  div #recotitle {
    margin-left: 0;
  }
  div #litentextreco {
    margin-top: 0;
    margin-left: 0;
  }
  div#topDiv {
    margin-top: 0;
    margin-left: 0;
    width: 100%;
    position: relative;
    padding: 20px 20px;
  }
  div#recommendedcaption {
    position: relative;
    margin-top: 30px;
    margin-left: auto;
    width: 100%;
  }
  div#travelcardperks {
    height: auto;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 2rem;
  }
  div#perks {
    height: auto;
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    padding-left: 25px;
  }
  div#perks img {
    width: 20px;
    top: 20px;
    margin-left: -23px;
  }
  div.tab {
    margin-left: 0;
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
  }
  img#symbolerrating {
    width: 15px;
    float: none;
    margin-top: 10px;
  }
  div#topDiv > div#recommendedcaption + img#symbolerrating {
    margin-left: 35%;
  }
  img#symbolercategory {
    width: 35px;
    position: absolute;
    min-width: 35px;
    transform: translate(-51%, -52%);
  }
  div#recommendedcaption_2 {
    position: relative;
    margin-left: 0;
    margin-top: 2rem;
  }
  div#recommendedcaption_2  img.overlay_reco {
    width: 80% !important;
}
  div#recommendedcaption_2 + img#symbolerrating {
    margin-left: 35%;
  }
  div#recommendedcaption_3 {
    position: relative;
    margin-left: 0;
    margin-top: 2rem;
  }
  div#recommendedcaption_3 img.overlay_reco {
    width: 80% !important;
}
  div#recommendedcaption_3 + img#symbolerrating {
    margin-left: 35%;
  }
  img#symbolercategorytitle {
    width: 25px;
    margin-left: 10px;
  }
  div#scrolla {
    padding-left: 1rem;
    padding-right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    align-items: center;
  }
  .filterDiv {
    margin: 0;
    height: auto;
  }
  div#myBtnContainer {
    padding: 1rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  div#allakortcaption {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  img#symboler_cat {
    width: 30px;
    top: 7px;
    display: inline-flex;
    margin-right: 5px;
  }
  img#site_symbol {
    width: 65px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
  }
  img#logobild {
    width: 70px;
  }

/* Cardinfo page */


  /* Cardinfo page */
div#informationcredit_cardinfo {
  position: relative;
  height: auto;
  padding: 2rem 1rem;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 2rem);
}

div#cardInfo {
  padding: 20px 20px;
}

img#colorcard {
  width: 45px;
  margin-top: -45px;
}

div#cardInfo img#quote_top,
div#cardInfo img#quote_bottom {
  display: none;
}

div.card-info {
  width: 100%;
  max-width: 100%;
  margin-left: unset;
  margin-right: unset;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  margin-bottom: 3rem;
}

/* Card image and title at the top */
.card-info .card-image {
  order: 1; /* Ensures the image appears first */
}

/* Rating container styles */
/* Rating container styles */
.card-info div#ratingall {
  order: 2; /* Ensures rating appears second */
  margin-top: 10px; /* Space above the rating */
  margin-bottom: 5px; /* Space below the rating */
  display: flex; /* Aligns items in a row */
  align-items: center; /* Centers the rating vertically */
}

/* Inner div for stars */
.card-info div#ratingall div#ratingall {
  display: flex; /* Ensure stars are in a row */
  margin-top: 0;
  margin-bottom: 0;
}

/* Star images spacing - Ensure these are targeting the correct star elements */
div#ratingall img#symbolerrating_info {
  margin: 0; /* Remove any margin */
  padding: 0; /* Remove any padding */
  width: 20px; /* Adjust width as necessary for visual spacing */
  height: auto; /* Maintain aspect ratio */
}

/* If there's any other element in the ratingall section that needs spacing adjusted */
.card-info div#ratingall > * {
  margin: 0; /* Ensure all direct children have no margin */
  padding: 0; /* Ensure all direct children have no padding */
}


/* Star images in the rating section */
.card-info div#ratingall div#ratingall {
  display: flex; /* Ensure stars are in a row */
  margin-top: 0;
  margin-bottom: 0;
}

/* Review section styles */
.card-info div#review_cardinfo {
  order: 3; /* Ensures the review appears third */
  margin-top: 10px;
}




.side-by-side-container {
  order: 4;
}


/* Card details section */
.card-info .card-details {
  order: 5; /* Ensures card details appear last */
  margin-top: 1rem;
  padding: 0 0;
}

/* Button styles */
.card-info .card-details button.apply-now {
  margin-left: auto;
  margin-right: auto;
  padding: 20px 30px;
  width: 100%;
}

/* Table styles */
.card-details table th,
.card-details table td {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  word-wrap: break-word;
  width: 45%;
  font-size: 0.9rem;
}

/* Image styles */
div.card-info img {
  width: 80%;
  margin: auto;
  display: flex;
}

/* Star images spacing */
div#ratingall img#symbolerrating_info {
  margin-right: 5px; /* Adjust this value for desired spacing between stars */
}

/* Additional styling for rating section */
#cardInfo div#ratingall {
  margin-top: 10px; /* Space above the rating */
  margin-bottom: 10px; /* Space below the rating */
}



  /* Compare page */
  div#cardsContainer {
    padding: 0;
  }
  div#informationcredit_compare {
    position: relative;
    margin-top: 50px;
    height: auto;
    padding: 2rem 1rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    width: calc(100% - 2rem);
  }

  /* Kortguide page */
  .kortguide_page div#informationcredit {
    width: calc(100% - 2rem);
    position: relative;
    margin: 50px auto;
  }
  .kortguide_page main {
    padding-top: 0;
    max-width: 100%;
    height: auto;
  }
  div#questions-container {
    padding: 20px 1rem;
  }
  div.question {
    height: auto;
    margin: 0;
  }
  div#progress-container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    width: 100%;
  }

  /* Vadarkreditkort page */
  .vadarkreditkort_page div#informationcredit {
    width: calc(100% - 2rem);
    position: relative;
    margin: 50px auto;
  }
  img#vadarkreditkortbild {
    width: 55px;
    margin-left: -20px;
    margin-top: -61px;
  }
  .vadarkreditkort_page #informationcredit2 {
    width: calc(100% - 2rem);
  }
  img#logobild_vadarkreditkort {
    width: 50px;
    transform: translate(-10%, -90%);
  }
  .vadarkreditkort_page .left-div {
    height: auto;
    min-height: 500px;
    padding: 2rem 1rem;
  }
  h2#creditname {
    position: relative;
    margin-left: auto;
    margin-top: auto;
    margin-bottom: 1rem;
  }
  .white-div.right-div {
    width: calc(100% - 2rem);
    height: auto;
    min-height: 300px;
  }
  div#selectedCards {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 1rem;
    width: 100%;
}
div#selectedCards img {
  margin: unset;
}
div.card-details h2 {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
#myUL li a img {
  width: 60px !important;
}
#myUL li a#söktextkort {
  margin-left: 1rem;
  font-size: 1rem;
}
button.compare-btn_search {
  padding: 7px 15px;
}
.mobnav {
  position: fixed;
  top: 0;
  right: -400px;
  width: fit-content;
  height: 100%;
  background-color: #f7f7f7;
  z-index: 99;
  overflow-y: auto;
  transition: all 0.6s ease-in-out;
  
}
.textunderbild_list {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}
.traveler--box-row.cols-2 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.traveler--box-row.cols-3 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.traveler--box-row.cols-2 .traveler--box {
  padding: 2rem 1rem;
  display: block !important;
}
.topDiv--box-right {
  width: 100%;
}
.topDiv--box-right-top {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 15px;
}
.topDiv--box #travelcardperks {
  width: 100%;
}
#cards-container > .card-item {
	width: auto;
	flex-basis: 300px;
	min-width: unset;
	flex-grow: 0;
	margin: 0;
	max-width: 100%;
}
#cards-container {
  gap: 20px;
  padding-left: 0;
  padding-right: 0;
}
#square-container .square {
	width: 100%;
	height: auto;
}
div#square-container {
	flex-wrap: wrap;
	gap: 1rem;
}
table#comparisonTable thead {
  display: none;
}
table#comparisonTable tbody tr {
  display: flex;
  flex-direction: column;
}
table#comparisonTable tbody tr td {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 14px;
}
[data-label]::before {
  content: attr(data-label);
  display: inline-block;
  color: #2c456b;
  font-weight: bold;
}
.main-wrapper {
  flex-wrap: wrap;
  gap: 30px;
}
.left-column {
  flex-basis: 100%;
}
.right-column {
  flex-basis: 100%;
}
div#perksinfo {
  margin-left: auto;
}
div.perks-container {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 8px;
}
div.cons-container {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 8px;
}
div.recommended-card-slider {
  justify-content: center;
  padding-top: 30px;
  padding-bottom: 30px;
}
#recommended-title-id {
  text-align: center;
}
div#comparisonContainer {
  overflow-x: auto;
}
body #rubrik {
  font-size: 45px;
}
div#pointcollector {
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  height: auto;
  width: 100%;
  display: none;
}
#traveller img {
  width: 30px;
  height: 30px;
  position: absolute;
  transform: translate(10px, -30px);
}
.traveler--box-row.cols-2 div#pointcollector_fullscreen img {
  width: 30px;
  height: 30px;
  position: absolute;
  transform: translate(10px, -30px);
}
.traveler--box-row.cols-3 img#symboler_cat_small {
  width: 30px;
  height: 30px;
  position: absolute;
  transform: translate(10px, -30px);
}
div#recommended {
  margin-top: auto;
}
.traveler--boxes div#recocont_trav {
  margin-left: auto;
  padding: 0;
  margin-top: auto;
}
div#informationaboutsite {
  margin-bottom: 30px;
}
div#recinfo2 {
  width: 100%;
}
.traveler--box #litentext_blue_trav {
  font-size: 18px;
  line-height: 1.5;
}
.traveler--box #rubrikcategory {
  font-size: 26px !important;
}
.traveler--box #rubrikcategory2 {
  font-size: 26px !important;
  font-weight: 200;
}
.traveler--box.active #rubrikcategory2 {
  color: rgb(70, 69, 69);
}
.traveler--box #litentext_blue2 {
  font-size: 18px;
  line-height: 1.5;
}
.traveler--box-row.cols-3 .traveler--box {
  padding: 2rem 1rem;
  display: block !important;
}
div #Kortkategorier {
  font-size: 30px;
}
#rekommenderadekort #Kortkategorier2 {
  font-size: 36px;
}
#allakort #Kortkategorier3 {
  font-size: 36px;
}
div#höger h3 {
  font-size: 25px;
}
div#textunderrubrik {
  font-size: 22px;
  line-height: 1.5;
}
.arrow.bounce {
  position: absolute;
  bottom: auto;
  left: auto;
  right: auto;
  top: -60px;
  width: 100%;
  height: 40px;
  z-index: 99;
  display: flex !important;
  justify-content: center;
}
.traveler--box-txt {
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.active .traveler--box-txt {
  max-height: 600px;
}





} /* /max-width:767px 
------------------------------------------------------------------------------------------------------------------ */