@charset "UTF-8";
* {
  font-family: "Roboto", sans-serif;
}

.catSelection .btn {
  padding: 4px;
  margin: 2px;
}

a.logo {
  text-decoration: none;
  color: black !important;
}

.numberCircle {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  padding: 8px;
  background: #fff;
  border: 2px solid #666;
  color: #666;
  text-align: center;
  font: 32px Arial, sans-serif;
}

.carousel-indicators .active {
  background-color: #f00;
}

.carousel-control-next-icon:after {
  content: ">";
  font-size: 55px;
  color: red;
}

.carousel-control-prev-icon:after {
  content: "<";
  font-size: 55px;
  color: red;
}

.question-container {
  padding: 160px;
}

.spinner-groupcards {
  display: none;
}

.strong-red {
  color: red;
  font-weight: bold;
}

.list-group-item.active {
  border-color: lightgray !important;
}

input {
  height: 48px !important;
}

.custom-file label {
  height: 40px !important;
}
.custom-file input {
  height: 48px !important;
}

.selectWrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  border: 1px solid #bbb;
  border-radius: 2px;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2211%22%20viewBox%3D%220%200%2011%2011%22%3E%3Cpath%20d%3D%22M4.33%208.5L0%201L8.66%201z%22%20fill%3D%22%2300AEA9%22%2F%3E%3C%2Fsvg%3E") right 13px center no-repeat;
}
.selectWrapper select {
  padding: 12px 40px 12px 20px;
  font-size: 18px;
  line-height: 18px;
  width: 100%;
  border: none;
  box-shadow: none;
  background: transparent;
  background-image: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: ellipsis;
  height: 50px;
}

.list-group-item.active a {
  color: pink;
  border-bottom: 2px dotted white;
}

video {
  background: #222;
  margin: 10px auto;
  width: 320px;
  height: 240px;
}

#controls {
  display: flex;
  margin-top: 2rem;
  max-width: 28em;
}

.gallery-title {
  font-size: 36px;
  color: #42B32F;
  text-align: center;
  font-weight: 500;
  margin-bottom: 70px;
}

.gallery-title:after {
  content: "";
  position: absolute;
  width: 7.5%;
  left: 46.5%;
  height: 45px;
  border-bottom: 1px solid #5e5e5e;
}

.filter-button {
  font-size: 18px;
  border: 1px solid #42B32F;
  border-radius: 5px;
  text-align: center;
  color: #42B32F;
  margin-bottom: 30px;
}

.filter-button:hover {
  font-size: 18px;
  border: 1px solid #42B32F;
  border-radius: 5px;
  text-align: center;
  color: #ffffff;
  background-color: #42B32F;
}

.btn-default:active .filter-button:active {
  background-color: #42B32F;
  color: white;
}

.port-image {
  width: 100%;
}

.gallery_product {
  margin-bottom: 30px;
}

.hidden {
  display: none;
}

.gallery-upload-image {
  position: relative;
  padding-top: 20px;
  display: inline-block;
}
.gallery-upload-image .card-img-top {
  width: 100%;
  height: 200px;
  object-fit: contain;
  background: black;
  text-align: center;
  margin: auto;
  display: block;
}
.gallery-upload-image .image-badge-left {
  position: absolute;
  left: 5px;
  top: 10px;
  text-align: center;
  border-radius: 30px 30px 30px 30px;
  color: #fff;
  background-color: #138496;
  border-color: #117a8b;
  padding: 5px 10px;
  font-size: 20px;
}
.gallery-upload-image .image-badge-right {
  position: absolute;
  right: 5px;
  top: 10px;
  text-align: center;
  padding: 5px 10px;
  font-size: 20px;
}

.carousel-nav-icon {
  height: 48px;
  width: 48px;
}

.carousel-item .col, .carousel-item .col-sm, .carousel-item .col-md {
  margin: 8px;
  height: 300px;
  background-size: cover;
  background-position: center center;
}

.bg-danger ul li, .bg-warning ul li {
  color: black;
}

.bg-danger ul li.active, .bg-warning ul li.active {
  color: white;
}

.logged-in {
  width: 100px;
  height: 100px;
  background: green;
  border-radius: 50%;
}

.logged-out {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50%;
}

.top-card {
  position: absolute;
  left: 40%;
  top: -30px;
  border-radius: 50%;
}

.task-note {
  color: yellow !important;
  text-decoration: none;
  border-bottom: 0;
}
.task-note i {
  border-bottom: 0;
  color: orange;
}

.task-file {
  color: lightgreen !important;
  text-decoration: none;
  border-bottom: 0;
}
.task-file i {
  border-bottom: 0;
  color: lightgreen;
}

.tasks-actions {
  white-space: nowrap;
  width: 100px;
}
.tasks-actions a {
  margin: 0 5px;
}

tr.bg-primary a {
  color: red;
  border-bottom: 1px dotted #ff00ff;
}
tr.bg-primary a:hover {
  text-decoration: none;
}

td.badge {
  padding: 15px;
}

.blockquote-partnercomment {
  border-top: 1px dotted red;
  border-bottom: 1px dotted red;
  font-style: italic;
  color: red;
  padding: 20px;
}

.card-text {
  word-break: break-word;
}

td {
  word-break: break-word;
}

.penalty {
  color: #ff9d45;
  font-style: italic;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ CSS */
  .ekko-lightbox .modal-dialog {
    flex: 100% !important;
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
    -ms-overflow-style: none;
  }
}
#formContent {
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  background: #fff;
  padding: 30px;
  width: 90%;
  max-width: 450px;
  position: relative;
  padding: 0px;
  -webkit-box-shadow: 0 30px 60px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 30px 60px 0 rgba(0, 0, 0, 0.3);
  text-align: center;
}

#formFooter {
  background-color: #f6f6f6;
  border-top: 1px solid #dce8f1;
  padding: 25px;
  text-align: center;
  -webkit-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
/* Simple CSS3 Fade-in Animation */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  opacity: 0;
  -webkit-animation: fadeIn ease-in 1;
  -moz-animation: fadeIn ease-in 1;
  animation: fadeIn ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
}

.fadeIn.first {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.fadeIn.second {
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.fadeIn.third {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.fadeIn.fourth {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}

/* Simple CSS3 Fade-in Animation */
.underlineHover:after {
  display: block;
  left: 0;
  bottom: -10px;
  width: 0;
  height: 2px;
  background-color: #56baed;
  content: "";
  transition: width 0.2s;
}

.underlineHover:hover {
  color: #0d0d0d;
}

.underlineHover:hover:after {
  width: 100%;
}

.wrap {
  width: 90px;
  height: 90px;
  margin: 120px auto 30px auto;
  position: relative;
}

.dice {
  width: 90px;
  height: 90px;
  background: url(/assets/media/js/dice.png) no-repeat;
}

.dice_1 {
  background-position: -5px -4px;
}

.dice_2 {
  background-position: -5px -107px;
}

.dice_3 {
  background-position: -5px -212px;
}

.dice_4 {
  background-position: -5px -317px;
}

.dice_5 {
  background-position: -5px -427px;
}

.dice_6 {
  background-position: -5px -535px;
}

.dice_t {
  background-position: -5px -651px;
}

.dice_s {
  background-position: -5px -763px;
}

.dice_e {
  background-position: -5px -876px;
}

p#result {
  text-align: center;
  font-size: 16px;
}

p#result span {
  font-weight: bold;
  color: #f30;
  margin: 6px;
}

#dice_mask {
  width: 90px;
  height: 90px;
  background: #fff;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}

.ring-container {
  position: relative;
}

.circle {
  width: 20px;
  height: 20px;
  background-color: #62bd19;
  border-radius: 50%;
  position: absolute;
  left: 2px;
  top: 2px;
}

.circle-red {
  background-color: red;
}

.ringring {
  border: 3px solid #62bd19;
  -webkit-border-radius: 30px;
  height: 25px;
  width: 25px;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: pulsate 1s ease-out;
  -webkit-animation-iteration-count: infinite;
  opacity: 0;
}

@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.1, 0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
.img-gekauft-thumbnail {
  max-width: 300px;
  height: auto;
  margin: 0 auto;
}

.url-gekauft-thumbnail {
  margin: 0 auto;
}

.custom-file-input ~ .custom-file-label::after {
  content: "Datei Wählen";
  background-color: #ff0f49;
  color: white !important;
}

select {
  font-family: "FontAwesome", "Roboto", serif;
}

.deleteMediaButton {
  fill: white;
}

.note-checkbox {
  padding-top: 5px;
}
.note-checkbox input, .note-checkbox label {
  height: 32px !important;
}
.note-checkbox label {
  position: relative;
  width: 100px !important;
  top: 0;
  left: 0;
}
.note-checkbox .note-checkbox-input {
  height: 40px;
  width: 40px;
}

.note-control-label {
  background: red;
}
.note-control-label:before {
  top: 0.8rem;
  width: 1.25rem;
  height: 1.25rem;
}
.note-control-label:after {
  top: 0.8rem;
  width: 1.25rem;
  height: 1.25rem;
}

.accordion .btn-primary:active:focus:not(:disabled):not(.disabled), .accordion .btn:focus, .accordion .btn:active, .accordion .btn-cat-active {
  background-color: yellow !important;
}

.navbar-nav {
  float: left !important;
  display: inline-block !important;
}
.navbar-nav li {
  float: left !important;
}

.do-clipboard {
  cursor: pointer;
}

.tdTaskDescription {
  width: 100%;
  word-break: break-word;
}

th {
  font-weight: normal !important;
}

.tasks-actions a {
  color: white;
}

.btn-danger:not(:disabled):not(.disabled).active {
  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}

.btn-primary:not(:disabled):not(.disabled).active {
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.btn-info {
  color: white;
}
.btn-info span {
  color: white;
}

.btn-info:not(:disabled):not(.disabled) {
  color: white;
}
.btn-info:not(:disabled):not(.disabled).active {
  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.9);
}

input[type=number] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.number-input {
  padding-bottom: 1px;
}

.number-input button {
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0;
  position: relative;
}

.number-input button:before,
.number-input button:after {
  display: inline-block;
  position: absolute;
  content: "";
  height: 2px;
  transform: translate(-50%, -50%);
}

.number-input button.plus:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.number-input input[type=number] {
  text-align: center;
}

.md-number-input.number-input {
  border: 2px solid #ddd;
  width: 11.8rem;
}

.md-number-input.number-input button {
  outline: none;
  width: 3rem;
  height: 2rem;
  padding-top: 0.8rem;
}

.md-number-input.number-input button.minus {
  padding-left: 8px;
}

.md-number-input.number-input button.plus {
  padding-left: 2px;
}

.md-number-input.number-input button:before,
.md-number-input.number-input button:after {
  width: 1rem;
  background-color: #212121;
}

.md-number-input.number-input input[type=number] {
  max-width: 5rem;
  padding: 0.5rem;
  border: solid #ddd;
  border-width: 0 2px;
  font-size: 2rem;
  height: 3rem;
  font-weight: bold;
  outline: none;
}

@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
    .number-input.md-number-input.safari_only button:before,
.number-input.md-number-input.safari_only button:after {
      margin-top: -0.6rem;
    }
  }
}
@media (max-width: 575.98px) {
  .btn-group-toggle {
    margin: 8px 0;
  }

  .form-check-inline {
    margin: 8px 0;
  }
}
.icon-delete {
  fill: #f00;
}

.icon-small {
  width: 24px;
  height: 24px;
  background-size: contain;
  background-position: center;
}

.icon-tiny {
  width: 16px;
  height: 16px;
  background-size: contain;
  background-position: center;
}

.icon-medium {
  width: 32px;
  height: 32px;
  background-size: contain;
  background-position: center;
}

.icon-anal {
  display: inline-block;
  background-image: url("/assets/media/icons/anal.png");
  background-position: center;
}

.icon-anus {
  display: inline-block;
  background-image: url("/assets/media/icons/anus.png");
}

.icon-fetish {
  display: inline-block;
  background-image: url("/assets/media/icons/fetish.png");
}

.icon-sissy {
  display: inline-block;
  background-image: url("/assets/media/icons/sissy.png");
}

.icon-gay {
  display: inline-block;
  background-image: url("/assets/media/icons/gay.png");
}

.icon-risk {
  display: inline-block;
  background-image: url("/assets/media/icons/risk.png");
}

.icon-heels {
  display: inline-block;
  background-image: url("/assets/media/icons/heels.png");
}

.icon-partner {
  display: inline-block;
  background-image: url("/assets/media/icons/partner.png");
}

.icon-flag-de {
  display: inline-block;
  background-image: url("/assets/media/icons/de.png");
}

.icon-flag-us {
  display: inline-block;
  background-image: url("/assets/media/icons/us.png");
}

/*# sourceMappingURL=fap.css.map */



.gender-card {
  background: #f8f9fa;
  border: 2px solid #dee2e6;
  border-radius: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 160px;
  position: relative;
}
.gender-card.active {
  border-color: var(--bs-primary);
  background: rgba(13, 110, 253, 0.05);
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.gender-card .selection-indicator {
  width: 20px;
  height: 20px;
  border: 2px solid #dee2e6;
  border-radius: 50%;
  margin-top: 10px;
  transition: all 0.3s ease;
}
.gender-card.active .selection-indicator {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
}

.activity-btn {
  position: relative;
  opacity: 0.8;
  transition: all 0.3s ease !important;
}
.activity-btn .check-icon {
  opacity: 0;
  color: white;
}
.activity-btn:hover {
  opacity: 1;
  transform: translateY(-2px);
}
input:checked + .activity-btn {
  opacity: 1 !important;
  background: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}
input:checked + .activity-btn .check-icon {
  opacity: 1;
}

.btn-difficulty {
  border: 2px solid #dee2e6 !important;
  background: white !important;
  color: #6c757d !important;
  display: flex !important;
  align-items: center;
  position: relative;
}
.btn-difficulty .fa-check-circle {
  opacity: 0;
  color: var(--bs-success);
}
input:checked + .btn-difficulty {
  border-color: var(--bs-primary) !important;
  background: rgba(13, 110, 253, 0.05) !important;
  color: var(--bs-primary) !important;
}
input:checked + .btn-difficulty .fa-check-circle {
  opacity: 1;
}

.risk-toggle-label {
  display: flex;
  align-items: center;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.risk-toggle-label:hover {
  background: #e9ecef;
}
.toggle-slider {
  width: 40px;
  height: 24px;
  background: #dee2e6;
  border-radius: 12px;
  position: relative;
  transition: all 0.3s ease;
}
.toggle-slider:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  left: 2px;
  top: 2px;
  transition: all 0.3s ease;
}
input:checked + .risk-toggle-label .toggle-slider {
  background: var(--bs-danger);
}
input:checked + .risk-toggle-label .toggle-slider:before {
  transform: translateX(16px);
}

.start-button {
  transition: all 0.3s ease;
  padding: 1rem 2.5rem;
  font-size: 1.25rem;
}
.start-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.options-group {
  display: none;
  animation: fadeIn 0.3s ease;
}

.options-group.active {
  display: block;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.option-item {
  padding:0 3px;
}
 

/* Standard-Button-Styling */
.option-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border: 2px solid #6c757d; /* Dunklere Umrandung */
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  background: #ffffff; /* Weißer Hintergrund */
  color: #333; /* Dunklere Schriftfarbe */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Leichter Schatten für mehr Sichtbarkeit */
}

/* Hover-Effekt */
.option-btn:hover {
  background: #f8f9fa; /* Leichtes Grau */
}

/* Häkchen-Icon (unsichtbar im Standardzustand) */
.option-btn .check-icon {
  opacity: 0;
  margin-left: 8px;
  transition: opacity 0.3s ease;
}

/* Wenn Checkbox aktiv ist */
input:checked + .option-btn {
  background: var(--bs-primary) !important;
  color: black !important;
  border-color: var(--bs-primary) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Stärkerer Schatten für bessere Sichtbarkeit */
}

/* Häkchen-Icon sichtbar machen */
input:checked + .option-btn .check-icon {
  opacity: 1;
}