body{
    height: 100vh;
}

main{
  position: absolute;
  right: 0;
}

.image{
    min-height: 20vh;
}

.thumbnail img{
    transition: all ease 0.2s;
    height: 200px;
    width: auto;
    object-fit: contain;
}

.custom-thumbnail {
    overflow: hidden; /* Überlauf verstecken, um das Bild innerhalb des Rahmens zu begrenzen */
    padding: 0;
    transition: all ease 0.2s;
  }
  .custom-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    object-position: center;
    transition: all ease 0.2s;
  }


  .custom-thumbnail .dropdown{
    opacity: 0;
    transition: all ease 0.2s;
  }
  .custom-thumbnail:hover .dropdown,
  .custom-thumbnail.activeThumb .dropdown{
    opacity: 1;
  }


.nav_top_icon{
    height: 2rem;
}
.custom-dropdown-hover-dark li a{
    color: white;
}
.custom-dropdown-hover-dark li a:hover{
    background-color: white;
    color: #343a40;
}

.custom-text-gray{
 color: #888888;
}

.custom-text-gray:hover{
    color: #888888;
}


.custom_tag_label{
  transition: all ease 0.2s;
}
.custom_tag_label:hover{
  color: rgb(255, 201, 201) !important;
  cursor: pointer;
}

.customModal{
  height: 85vh;
}

.customModalHeight-10{
  height: 10%;
}
.customModalHeight-80{
  height: 10%;
}

.custom-backend-checkbox{
  z-index: 10;
  opacity: 0;
  transform: scale(1.7);
  left: 3%;
  top: 3%;
  transition: opacity 0.2s ease;
}

.custom-thumbnail:hover .custom-backend-checkbox,
.custom-thumbnail.activeThumb .custom-backend-checkbox{
  opacity: 1;
}

.custom-backend-layer{
  height: 100%;
  width: 100%;
  background-color: #000000;
  opacity: 0;
  position: absolute;
  transition: opacity 0.2s ease;
}

.custom-thumbnail:hover .custom-backend-layer, 
.custom-thumbnail.activeThumb .custom-backend-layer {
  opacity: 0.5;
}

.custom-backend-toolbar-btn{
  transition: all ease 0.2s;

}
.custom-backend-toolbar-btn:hover{
  background-color: #0d6efd;
  color: white;
}