body{
  font-family: Arial;
}
h1, h2, h3 {
  color: white;
  line-height:1.1;
}
.title1{
  font-weight: bold;
  letter-spacing: 2px;
}

h4{
  color: black;
}
a{
  color: black;
  text-decoration: none;
}
.container-fluid {
  /*position: absolute;*/
  /*bottom: 2px;*/
  /*overflow: hidden;*/
}
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  padding-right: calc(50vw - 365px); 
  padding-left: calc(50vw - 365px);
}

@media screen and (max-width: 730px) {
    .container,
    .container-fluid,
    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm {
      padding-right: 0px; 
      padding-left: 0px;
    }
    
}
.content-inner-wrapper {
  height: 100%;
}
.content-wrapper {
  background-image: url('HG-abstrakt-D.png');
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-height: 100%;
  position: relative;
}
.header{
  flex: 0 0 auto;
  padding: 0px 15px 15px 15px;
  background-image: linear-gradient(#3f5262, #df4732, #ffe27e);
  /*background-image: linear-gradient(#7e7eb9, #24a6de, #db5fa3);*/
  
}
.header-text-logo{
  display: flex;
  justify-content: space-between;
  align-items: end;
}
.header-text {
  padding-top: 10px;
}
.logo{
  margin-left: 15px;
  margin-bottom: 12px;
}
.btn{
  color: black;
}
.btn-secondary, .btn-default:not(.btn-primary):not(.btn-info):not(.btn-success):not(.btn-warning):not(.btn-danger):not(.btn-dark):not(.btn-light):not([class*="btn-outline-"]) {
  --bs-btn-color: #000000;
  --bs-btn-bg: rgba(255,255,255,0.4);
  --bs-btn-border-color: rgba(255,255,255,0.4);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: rgba(255,255,255,0.49);
  --bs-btn-hover-border-color: rgba(255,255,255,0.46);
  --bs-btn-focus-shadow-rgb: 149,149,149;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgba(255,255,255,0.52);
  --bs-btn-active-border-color: rgba(255,255,255,0.46);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: rgba(255,255,255,0.4);
  --bs-btn-disabled-border-color: rgba(255,255,255,0.4)
}
/* tooltip Info-Schaltfläche */
.tooltip{
   --bs-tooltip-max-width: 400px;
}
.tooltip-inner {
  text-align: left;
}
/* Stand der Daten/Spielveröffentlichung*/
.stand {
  justify-content: right;
  display: flex;
}

.content {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1;
  min-height: 0;
  max-height: 100%;
}
.bucket-header{
  color: black;
  background: #ffe27e;
  border-radius: 0px;
  padding: 5px 15px 5px 15px;
  margin: 0px 0px 0px 0px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  font-size: 0.875rem;
}


.default-sortable .rank-list {
  background-color: transparent;
  }
.default-sortable .rank-list-item {
  /*color: black;*/
  color: black;
  border-radius: 12px;
  margin: 5px;
  /*display: -webkit-inline-box; für horizontale ausrichtung*/
  padding: 10px 20px 10px 10px;
  background: white;
  /*width: fit-content;  für vertikale anordnung*/
}
.rank-list-item {
  /*color: white;*/
  color: black;
  position: relative;
}

.rank-list-item::after {
  content: '';
  position: absolute;
  bottom: -3px;
  right: 0px;
  width: 40px;
  height: 28px;
  background-image: url('AdobeStock_64291939.png');
  background-size: 100%;
  background-repeat: no-repeat;
  transform: rotate(-9deg);
}
.default-sortable .rank-list-item:hover:not(.disabled) {
  /*background-color: #ffe27e;*/
  /*background-color: #faf5bb;*/
}

#start_bucket .rank-list-item {
  position: relative;
  text-align: left;
  border-radius: 12px;
  /*margin-left: -10px;*/
}
#start_bucket .rank-list-item:hover:not(.disabled) {
  background-color: #ffe27e;
}

#end_bucket .rank-list-item:hover:not(.disabled) {
  background-color: #faf5bb;
}
#end_bucket .rank-list-item {
  position: relative;
  text-align: left;
  border-radius: 12px;
  border: none;
}
@media screen and (min-width: 350px) and (max-width: 500px) {
  #end_bucket .rank-list-item {
    position: relative;
    text-align: left;
    border-radius: 12px;
    border: none;
    font-size: 14px; 
  }
  h2, .h2{
    font-size: calc(1.325rem + 0.9vw);
    line-height:1.1;
  }
  h5, .h5 {
      font-size: 1rem;
      font-weight: bold;
    }
  .count {
      display: flex;
      height: 42px;
    }
    .order-right {
      margin-top: 5px;
    }
    .default-sortable.bucket-list-container {
      background-color: transparent;
      padding: 10px;
      margin: 5px;
      margin-bottom: 0px;
      padding-bottom: 0px;
    }
}
@media screen and (max-width: 350px) {
  h2, .h2{
    font-size: calc(1.275rem + .3vw);
    line-height:1.1;
  }
  h5, .h5 {
      font-size: 1rem;
      font-weight: bold;
    }
    .count {
      display: flex;
      height: 42px;
    }
    .order-right {
      margin-top: 5px;
    }
    .default-sortable.bucket-list-container {
      background-color: transparent;
      padding: 10px;
      margin: 5px;
      margin-bottom: 0px;
      padding-bottom: 0px;
    }
}
.rank-list-title{
  color: black;
  margin-bottom: 0px;
}
#rank-list-start_bucket{
  border: none;
  margin: 0px;
}
#rank-list-end_bucket{
  border-radius: 12px;
  border: none;
  background-color: #ffe27e;
  margin-left: 20px;
  margin-right: 20px;
}
.sorted_item {
  text-align: center;
  font-size: calc(0.9rem + 0.2vw);
}

/*#end_bucket{        für horizontale ausrichtung
  display: flex;
  flex-wrap: wrap;
}*/
#shiny-notification-panel {
  position: fixed;
  top: 400px;
  left: calc(50vw - 365px);
  width: fit-content;
  height: fit-content;
  max-width: 100%;
  z-index: 99999;
}
@media screen and (max-width: 730px) {
    #shiny-notification-panel {
    left: 0px;
  }
}
.count{
  display: flex;
  height: 60px;
}
.fa-check:before {
  color: green;
}
.fa-close:before,
.fa-multiply:before,
.fa-remove:before,
.fa-times:before,
.fa-xmark:before {
  color: #e30613;
}

.alert{
  margin:5px;
  color: black;
  background-size: 35%;
  background-repeat: no-repeat;
  background-position: 10px center;
  padding-left: 10px;
  padding-right: 20px;
  align-items: center;
  display: flex;
  column-gap: 10px;
  font-weight: bold;
  border-radius: 15px;
  background: white;
}
.wrong{
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: 10px center;
  padding-left: 10px;
  padding-right: 20px;
  font-weight: bold;
}
.result-content {
  background: #ffffffe8;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  padding: 0px 15px 15px 15px;
}
.order-right {
  margin-top: 15px;
}

ol{
  margin-left: 0.7rem;
}
.result-item{
  text-indent: -2.7rem;
  color: black;
}
.result-item_last_sorted {
  text-indent: -2.7rem;
  font-weight: bold;
}

.shiny-notification {
opacity: 0.95;
}
.modal-body{
  color: black;
}

.modal-content::after {
  content: '';
  position: absolute;
  bottom: -3px;
  right: 0px;
  width: 40px;
  height: 28px;
  background-image: url('AdobeStock_64291939.png');
  background-size: 100%;
  background-repeat: no-repeat;
  transform: rotate(-9deg);
}
.modal-content {
  background-image: linear-gradient(125deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.46) 70%);
}
.result_flag {
  justify-content: center;
  display: flex;
  padding-top: 10px;
  flex-wrap: wrap;
}
.trophy {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}

.footer {
  background: #ffffffc7;
  display: flex;
  justify-content: space-between;
  padding: 2px 12px 2px 12px;
  font-size: 0.75rem;
  flex-wrap: wrap;
}
.further-links{
  background: #ffffffc7;
  display: flex;
  justify-content: space-between;
  padding: 2px 10px 2px 10px;
  font-size: 0.8rem;
}
.stock, .copyright {
  font-size: 0.7rem;
}
  
.footer .icon {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home").
Show the link that contains should open and close the navbar (.icon) */
@media screen and (max-width: 730px) {
  .footer a {display: none;}
  .footer a.icon {
    float: left;
    display: block;
    /*padding-left: 15px;*/
    padding-right: 15px;
  }
}

/* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon.
This class makes the navbar look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 730px) {
  .footer.responsive  span.copyright{
    position: absolute;
    right: 0;
    bottom: 0;
    padding-left: 5px;
    padding-right: 10px;
    padding-bottom: 2px;
  }
  .footer.responsive a.icon {
    float: left;
    position: absolute;
    left: 0;
    bottom: 0;
    padding-left: 10px;
    padding-right: 5px;
    padding-bottom: 2px;
  }
  .footer.responsive a{
    float: none;
    display: block;
    text-align: left;
  }
  .footer.responsive span.stock{
    float: none;
    display: block;
    text-align: left;;
  }
  .footer.responsive {
  background: #ffffffc7;
  display: block;
  justify-content: space-between;
  padding: 2px 12px 22px 12px;
  font-size: 0.75rem;
  flex-wrap: wrap;
}
  .footer {
  background: #ffffffc7;
  display: flex;
  justify-content: space-between;
  padding: 2px 12px 2px 12px;
  font-size: 0.75rem;
  flex-wrap: wrap;
}
} 

@media screen and (max-width: 430px) {
  .footer.responsive  span.copyright{
    position: absolute;
    right: 0;
    bottom: 0;
    padding-left: 5px;
    padding-right: 10px;
    padding-bottom: 2px;
  }
  .footer.responsive a.icon {
    float: left;
    position: absolute;
    left: 0;
    bottom: 0;
    padding-left: 10px;
    padding-right: 5px;
    padding-bottom: 17px;
  }
  .footer.responsive a{
    float: none;
    display: block;
    text-align: left;
  }
  .footer.responsive span.stock{
    float: none;
    display: block;
    text-align: left;;
  }
  .footer.responsive {
  background: #ffffffc7;
  display: block;
  justify-content: space-between;
  padding: 2px 12px 35px 12px;
  font-size: 0.75rem;
  flex-wrap: wrap;
}
  .footer {
  background: #ffffffc7;
  display: flex;
  justify-content: space-between;
  padding: 2px 12px 2px 12px;
  font-size: 0.75rem;
  flex-wrap: wrap;
}
}
@media screen and (max-width: 318px){
    .footer.responsive {
      background: #ffffffc7;
      display: block;
      justify-content: space-between;
      padding: 2px 12px 53px 12px;
      font-size: 0.75rem;
      flex-wrap: wrap;
    }
  .footer.responsive  span.copyright {
      position: absolute;
      right: 0;
      bottom: 0;
      padding-left: 10px;
      padding-right: 10px;
      padding-bottom: 2px;
    }
    .footer.responsive a.icon {
    float: left;
    position: absolute;
    left: 0;
    bottom: 0;
    padding-left: 10px;
    padding-right: 5px;
    padding-bottom: 34px;
  }
}