/* Light mode */
@media (prefers-color-scheme: light) {
  body {
    background-color: #eeedee;
  }
  #appContainer {
    background: #fff;
    border: 1px solid #ddd;
  }
  #appContainer .entry .appInfo .filename {
    color: #252525;
  }
  #appContainer .entry .appInfo .version-number {
    color: #666;
  }
  #appContainer .fileSize {
    color: #666;
  }
  #appContainer .downloadButton a {
    color: #3478f6;
    background: #eeedee;
  }
  .appInfo {
    position: relative; /* Ensure position relative for badge positioning */
  }
  
  .badge {
    position: absolute;
    top: 15%; /* Adjust vertically to align with the baseline */
    left: 90px; /* Adjust the distance from the title */
    transform: translateY(-15%); /* Center vertically */
    background-color: #606060;
    color: #ffffff;
    padding: 0.2em 0.5em;
    border-radius: 0.3em;
    font-size: 80%;
    line-height: 1; /* Ensure the badge text aligns with the baseline */
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1d1d1f;
  }
  #appContainer {
    background: #323232;
    border: 1px solid #424545;
  }
  #appContainer .entry .appInfo .filename {
    color: #f5f5f7;
  }
  #appContainer .entry .appInfo .version-number {
    color: #86868b;
  }
  #appContainer .fileSize {
    color: #86868b;
  }
  #appContainer .downloadButton a {
    color: #14bcff;
    background: #424245;
  }
  .badge {
    position: absolute;
    top: 15%; /* Adjust vertically to align with the baseline */
    left: 90px; /* Adjust the distance from the title */
    transform: translateY(-15%); /* Center vertically */
    background-color: #424245;
    color: #ffffff;
    padding: 0.2em 0.5em;
    border-radius: 0.3em;
    font-size: 80%;
    line-height: 1; /* Ensure the badge text aligns with the baseline */
  }
}

#outer-wrapper {
  margin-left: auto;
  margin-right: auto;
}

#appContainer,
#appContainer .entry,
#appContainer .entry .appInfo {
  position: relative;
}

#appContainer .entry .appIcon,
#appContainer .downloadButton {
  position: absolute;
}

#appContainer,
#appContainer .entry,
#appContainer .entry .appIcon span,
#appContainer .entry .appInfo,
#appContainer .fileSize,
#appContainer .downloadButton a {
  display: block;
}

#appContainer,
#appContainer .entry .appIcon span,
#appContainer .downloadButton a {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

#appContainer,
#appContainer {
  border-radius: 1em;
}
.downloadButton a {
  border-radius: 20px;
}

#appContainer {
  padding: 1.15384615384615em;
  box-sizing: border-box;
  overflow: hidden;
  min-height: 116px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 13px !important;
  margin-bottom: 10px;
}

#appContainer a {
  text-decoration: none;
}

#appContainer .entry {
  min-height: 6.61538461538462em;
  margin-right: 10.0769230769231em;
}

#appContainer .entry .appIcon {
  width: 75px;
  height: 75px;
  top: 0;
  left: 0;
}

#appContainer .entry .appIcon span {
  background-size: 100%;
  background-repeat: no-repeat;
  height: 100%;
}

#appContainer .entry .appInfo {
  margin-left: 6.15384615384615em;
}

#appContainer .entry .appInfo .filename {
  font-weight: bold;
  font-size: 150%;
}

#appContainer .entry .appInfo .version-number {
  font-size: 90%;
  display: block;
}

#appContainer .fileSize {
  font-size: 90%;
}

#appContainer .entry .appInfo .tag-os {
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background-image: url(https://rawgit.com/mastamvan/image/master/device.png);
  background-repeat: no-repeat;
  background-size: 100%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

#appContainer .entry .appInfo .tag-os.android {
  background-color: #6ab344;
}

#appContainer .entry .appInfo .tag-os.windows {
  background-position: 0 33.33%;
  background-color: #1f9cf4;
}

#appContainer .entry .appInfo .tag-os.mac {
  background-color: #606060;
  background-position: 0 66.67%;
}

#appContainer .entry .appInfo .tag-os.blackberry {
  background-color: #000000;
  background-position: 0 99.99%;
}

#appContainer .downloadButton {
  max-width: 9.61538461538462em;
  text-align: center;
  top: 1.15384615384615em;
  right: 1.15384615384615em;
  width: 15%;
}

#appContainer .downloadButton a {
  padding: 0.769230769230769em 0;
  margin-bottom: 0.769230769230769em;
  font-weight: bold;
  font-size: 100%;
}
.link-alt {
  position: relative;
  display: block;
  font-size: 11px;
  padding: 0.909090909090909em 0 0;
}

.link-alt:before {
  content: "Alternative:";
}

.link-alt a {
  padding: 0 0.384615384615385em 0;
  border-right: 1px solid #bbb;
  color: #008efa;
}

.link-alt a:last-child {
  border: none;
}

.appInfo {
  position: relative; /* Ensure position relative for badge positioning */
}

@media screen and (max-width: 400px) {
  #appContainer .entry,
  #appContainer .entry .appInfo,
  #appContainer .downloadButton {
    margin: 0 auto;
    width: 85%;
    text-align: center;
  }

  #appContainer .entry .appIcon {
    margin: 0 auto;
    position: relative;
  }

  #appContainer .downloadButton {
    position: relative;
    width: 100%;
    right: auto;
    margin-bottom: 0.769230769230769em;
  }
  #appContainer .filename {
    display: block;
  }
}

/*ICON APP*/
.appIcon span.coc {
  background-image: url("https://apps.krailinger.com/rezepte/assets/512x512.png");
}

.appIcon span.ccvault {
  background-image: url("https://apps.krailinger.com/ccvault/assets/512x512.png");
}
.appIcon span.x-hm-writer {
  background-image: url("https://apps.krailinger.com/x-hm-writer/assets/512x512.png");
}
.appIcon span.guestpass {
  background-image: url("https://apps.krailinger.com/guestpass/assets/512x512.png");
}
/* Desktops and Tablets */
@media (min-width: 1000px) {
  .row {
    max-width: 30%;
    margin: auto;
  }
}

/* Phones */
@media (max-width: 1000px) {
  .row {
    margin: auto;
  }
  .badge {
    position: relative; /* Change badge position to relative */
    top: auto; /* Reset top position */
    left: auto; /* Reset left position */
    transform: none; /* Reset transform */
    display: inline-block; /* Ensure badge appears inline with the text */
    margin-top: 5px; /* Adjust vertical spacing between title and badge */
  }
}