/* CSS for the catalog tiles that allows them to have an overlay at the bottom */
  .catalog-tile-container {
            position: relative;
display:inline-block;
float:left;
            width: 200px;
            height: 200px;
            overflow: visible;
            background-size:cover;
            margin-right:35px;
            margin-top:35px;
        }

        .catalog-tile-overlay {
            position: absolute;
            display:none;
            width: 100%;
            height: 100%; 
             background-color: rgba(0, 0, 0, 0.75); /* Transparent gray */
            
        }

        .catalog-tile-container:hover .catalog-tile-overlay {
            bottom: 0;
            display:block;
        }
        
/*adjusting the flag link to make it bigger and white */
 .catalog-tile-overlay .flag-add-to-my-collection {
     
 }
 
 .catalog-tile-overlay .flag-add-to-my-collection a {
     
     width:100%;
     height:100%;
 }
 
/*centering the flag image in the catalog tile */
 .catalog-tile-flag-image {
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
 
 
 
 
 
 
 

 
 
 /* Make the flag link float to the right and look pretty */
 .catalog-tile-overlay .flag-add-to-my-collection {
     
     
     
     width:75%;
     
     
 }
 
 
 .catalog-tile-overlay .more-information {
     
     float:left;
     
     
 }
 
 
 /*getting rid of the border when you click on the flag link */
.flag a:focus,
.flag a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}


/*lets move the share and more information icons for the catalog view */
.flag-additional-items {
position: absolute;
color:red;
  top: 0px; /* Move it outside the .container */
  right: -40px; /* Move it outside the .container */
  width:40px;
  
}

.flag-additional-items img {
    width:25px;
    height:auto;
    padding-left:5px;
}

.tile-label {
    width:200px;
    text-align:center;
    font-weight:700;
    position:absolute;
    bottom:-30px;
    height:15px;
}
 
 
 /*moving on to the actual dashboard stuff */
.dashboard-search-tile {
    background-size:cover;
    width:100px;
    height:100px;
    border-radius:5px;
    cursor-style:pointer;
}

.dashboard-search-tile {
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Add transition for scaling */
    box-shadow: 0 0 0 rgba(0, 0, 0, 0); /* Initial shadow (none) */
    cursor:pointer;
}

.dashboard-tile-toggle + label .dashboard-search-tile {
    transform: scale(1); /* Slightly enlarges the selected tile */
}

.dashboard-tile-toggle:checked + label .dashboard-search-tile {
    transform: scale(1.1); /* Slightly enlarges the selected tile */
    box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.5); /* Shadow on bottom-left */
}




.dashboard-link-tile {
        background-size:cover;
    width:100px;
    height:100px;
    border-radius:5px;
    cursor-style:pointer;
    cursor:pointer;
}

/*hiding the URLs in the link tiles dashboard-view */
.hidden-links {
    display:none;
}


/* Okay I guess we'll start styling the multisearch form thing */
#multisearchtextinput {
     border: none;
    border-bottom: 5px solid darkgray;
    border-radius: 4px;
    padding: 8px 12px;
    outline: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width:100%;
    font-size:24pt;
}

/*getting rid of the checkboxes for tiles */
.dashboard-tile-toggle {
    display:none;
    
}
/*make tiles line up nicely */
.dashboard-search-tile {
    display:inline-block;
    margin:10px;
    float:left;
}

/*make tiles line up nicely */
.dashboard-link-tile {
    display:inline-block;
    margin:10px;
    float:left;
}
/*make tiles line up nicely */
.dashboard-quickref-tile {
    display:inline-block;
    margin:10px;
    float:left;
}