/*======================================
Theme Name: CHBMP
Theme URI: https://chbmp.org/
Description: To Serve Mission, To Save The World
Version: 1.1
Author: Chelsea Belle Goodell
Author URI: https://x.com/verycosmic
Template: Divi
======================================*/

/* You can add your own CSS styles here. Use !important to overwrite styles if needed. */
.et-db #et-boc .et-l .et_pb_row {
    width: 80%;
    max-width: 1330px;
    margin: auto;
    position: relative;
}


button.bp-fav {
    font-size: 0;
    padding: 0;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

button.bp-fav:before {
    content: "❤";
    font-size: 16px;
}

.emoji-picker {
    background-color: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    margin: 0 5px 0 0;
}

/* Custom Styles for CHBMP */
.chbmp-case-content {
    padding-bottom: 0;
    position: absolute;
    bottom: 3px !important;
    left: 7px;
    width: 100%;
}
.chbmp-case-content p {
    padding-bottom: 0;
    font-size: small;
    line-height: 1em;
    max-height: 15px;
    overflow: hidden;
    position: relative; /* Positioned absolutely within .chbmp-post-container */
    bottom: 0; /* Align to the bottom */
    width: 100%; /* Span the full width of the parent */
    z-index: 4; /* Above the .chbmp-post-container background but below the stamps */
}
    
/* Ensure full-width for the content area */
#main-content .container {
    width: 100%;
    max-width: none;
    padding: 0;
}

/* Grid container setup */
.et_pb_section {
    padding: 0; /* Remove default padding */
}

/* Individual post container */
.chbmp-post-container {
    background: url(https://chbmp.org/wp-content/uploads/sites/33/2022/07/cases-folder-bg.png) no-repeat;
    background-size: cover !important;
    font-family: 'Cutive Mono',monospace !important;
    border: none !important;
    padding: 11px;
    box-sizing: border-box !important;
    margin-bottom: 11px !important;
    height: 218px;
    width: 270px;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: 100%;
    -moz-osx-font-smoothing: 100%;
    vertical-align: baseline;
    position: relative; /* This makes it the stacking context for positioned children */
    z-index: 1; /* Base level for stacking */
        display: flex; /* Use flex layout within each container */
        flex-direction: column; /* Stack items vertically */
        justify-content: space-between; /* Distribute space between items */
    }
    
.case-label {
font-family: 'Cutive Mono',monospace!important;
    font-weight: 700!important;
    font-size: 11px!important;
    color: #232690!important;
    padding: 0;
    margin: 0;
    line-height: .8em;
    display: inline-block;
}
.case-value {
    font-family: 'Cutive Mono',monospace!important;
    font-size: 11px!important;
    color: #232690!important;
    padding: 0;
    margin: 0;
    line-height: .8em;
    }

.chbmp-main.shrink-folders {
    display: flex; /* Use flexbox for the layout */
    flex-wrap: wrap; /* Allow items to wrap to the next line as needed */
    gap: 20px; /* Adjust the gap between the items */
    justify-content: center; /* Center items horizontally */
    transform: scale(0.5) !important; /* Scale down the size */
    transform-origin: top center !important; /* Set the origin of the scale transformation */
    padding: 10px 0; /* Add padding on top and bottom only */
    margin: auto; /* Center the entire container */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.chbmp-search-results::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge, and Firefox */
.chbmp-search-results {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Ensure the content is still scrollable */
.chbmp-search-results {
    overflow-y: scroll;
}


/* Title and metadata styling */
.chbmp-post-container h2,
.chbmp-post-container .post-meta {
    margin-left: 108px; /* Adjust so that text does not overlap the thumbnail */
}

/* Responsive adjustments */
@media (min-width: 981px) {
    .et_pb_column_1_4 {
        width: 18% !important; /* Set width for desktop to 25% */
    }
}

@media (max-width: 980px) {
    .et_pb_column_1_4 {
        width: 48%; /* Adjust for tablet - 2 columns */
        margin: 1%; /* Small margin for spacing */
    }
}

@media (max-width: 767px) {
    .et_pb_column_1_4 {
        width: 98%; /* Adjust for mobile - single column layout */
        margin: 1%; /* Small margin for spacing */
    }
}



/* Show the tooltip text when hovering over the tooltip container */
.chbmp-post-container .tooltip-container:hover .tooltip-text {
    display: block;
}

.victim-pictures-slideshow, .victim-pictures-slideshow-search, .chbmp-thumbnail {

    box-shadow: 19px 18px 13px -18px rgb(0 0 0 / 53%); /* Match the thumbnail's box shadow */
    -webkit-box-shadow: 19px 18px 13px -18px rgb(0 0 0 / 53%);
}
.victim-pictures-slideshow, .victim-pictures-slideshow-search {
    display: none; /* Ensure it's hidden by default */
    z-index: 11;
  }
  
.slideshow-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: none; /* Initially hidden */
    object-fit: cover; /* Cover the area without stretching the image */
}
/* Thumbnail styling */
.chbmp-thumbnail-container {
    display: block;
    max-width: 91px; /* Maximum width */
    max-height: 91px; /* Maximum height */
    top: 29px; 
    left: 10px; 
    object-fit: contain; /* Ensures that the entire image is visible */
    object-position: center; /* Center the image within the element */
    transform: rotateZ(357deg); /* Adjust if needed */
    transform-origin: top left; /* Change to control rotation point */
    position: absolute;
     z-index: 10; /* Ensure it's above the thumbnail */
    box-shadow: 19px 18px 13px -18px rgb(0 0 0 / 53%); /* Match the thumbnail's box shadow */
    -webkit-box-shadow: 19px 18px 13px -18px rgb(0 0 0 / 53%);
    object-fit: contain; /* Ensures that the entire image is visible */
    object-position: center; /* Center the image within the element */
    transform: rotateX(0deg) rotateY(0deg) rotateZ(357deg); /* Match the thumbnail's rotation */
}



.chbmp-post-title-container {
    text-align: center;
    margin-bottom: 0px;
    width: 146px;
    left: 106px;
    top: 44px;
    position: absolute;
}
.chbmp-victim-name-container {
    left: 9px;
    text-align: left;
    position: absolute;
    top: -7px;
    max-width: 85px;
    overflow: hidden;
    /* font-size: xx-small; */
}
/* Apply consistent font styling to all labels and values in case content */
.chbmp-case-content p,
.chbmp-case-content .case-label, 
.chbmp-case-content .chbmp-victim-name,
.chbmp-case-content .chbmp-post-title {
    font-family: 'Cutive Mono', monospace !important;
    font-size: 11px !important; /* Adjust if necessary */
    color: #232690 !important; /* This sets the text color */
    font-weight: 700 !important; /* This makes the font bold */
    line-height: .8em;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.chbmp-case-content .case-value,
.chbmp-case-content .chbmp-victim-name {
    font-family: 'Cutive Mono', monospace !important;
    font-size: 11px !important; /* Adjust if necessary */
    color: #232690 !important; /* This sets the text color */
    font-weight: 500 !important; /* This makes the font bold */
    line-height: .8em;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
/* Style for the case-item class to control vertical spacing */
.chbmp-case-content .case-item {
    margin-bottom: 1px;
    line-height: .9em;
}
.case-item-hospital {
    margin-bottom: 1px;
    line-height: .9em;
    position: relative;
}

.chbmp-victim-name {
    font-size: xx-small !important;
    color: #232690;
    font-weight: 400 !important;
    margin-bottom: 0;
    line-height: 1em;
    max-height: 10px !important;
    overflow: hidden;
    display: block;
    /* top: 151px; */
    margin-top: 9px;
}

/* Specific styles for the post title to ensure it matches the rest but can be overridden if needed */
.chbmp-post-title {
    font-family: 'Cutive Mono', monospace !important;
    font-size: 11px !important; /* Adjust if necessary */
    color: #19497F !important; /* Adjust the color if needed to match */
    font-weight: 700 !important; /* Make it bold */
    text-align: center !important;
}


/* Base styles for the chbmp-post-container */
.chbmp-post-container {
    position: relative; /* Ensure the positioning context is set for the pseudo-element */
   
}

/* Common styles for all ::after pseudo-elements */
.chbmp-post-container::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 270px; /* Adjust as necessary */
    height: 218px;
    background-size: cover;
    z-index: 15;
    pointer-events: none; /* This allows the mouse to interact with elements underneath the pseudo-element */
}

/* Dynamic styles for different cases using ::after pseudo-element */
.chbmp-post-container.murdered::after {
    background-image: url('https://chbmp.org/wp-content/uploads/sites/33/2022/05/murdered-by-fda-death-protocol-overlay-red.png');
}

.chbmp-post-container.death::after {
    background-image: url('https://chbmp.org/wp-content/uploads/sites/33/2022/05/murdered-by-vax-overlay-red.png');
}

.chbmp-post-container.murdered-by-mandates::after {
    background-image: url('https://chbmp.org/wp-content/uploads/sites/33/2022/05/harmed-by-mandates-overlay-red.png');
}

.chbmp-post-container.bastards::after {
    background-image: url('https://chbmp.org/wp-content/uploads/sites/33/2022/05/harmed-and-murdered-by-bad-covid-policy.png');
}

.chbmp-post-container.mandated::after {
    background-image: url('https://chbmp.org/wp-content/uploads/sites/33/2022/05/harmed-by-mandates-overlay-yellow.png');
}

.chbmp-post-container.harmed::after {
    background-image: url('https://chbmp.org/wp-content/uploads/sites/33/2022/08/survived-death-protocol.png');
}

.chbmp-post-container.injured::after {
    background-image: url('https://chbmp.org/wp-content/uploads/sites/33/2022/05/injured-by-vax-overlay-orange.png');
}

.chbmp-post-container.hospital-mistreatment::after {
    background-image: url('https://chbmp.org/wp-content/uploads/sites/33/2024/01/harmed-by-hospital-mistreatment-overlay.png');
}

.chbmp-post-container.killed-hospital-mistreatment::after {
    background-image: url('https://chbmp.org/wp-content/uploads/sites/33/2023/12/killed-by-hospital-mistreatment-overlay.png');
}
.chbmp-post-container.submitted::after {
    background-image: url('https://chbmp.org/wp-content/uploads/sites/33/2024/01/chbmp-submitted-overlay.png');
}

.chbmp-post-container.interview-pending::after {
    background-image: url('https://chbmp.org/wp-content/uploads/sites/33/2024/01/chbmp-interview-pending-overlay.png');
}

.chbmp-post-container.pending::after {
    background-image: url('https://chbmp.org/wp-content/uploads/sites/33/2024/01/chbmp-pending-overlay.png');
}
.chbmp-post-container.processing::after {
    background-image: url('https://chbmp.org/wp-content/uploads/sites/33/2024/01/chbmp-processing-overlay.png');
}

.case-item-hospital {
    display: flex;
    align-items: center;
    line-height: 1.2em;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}
.case-item {
    display: flex;
    align-items: center;
    margin-bottom: 1px;
    line-height: 1.2em;
}
.hospital {
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Adjust padding and margins as needed */
}
/* Ensure the hospital name has a specific class for targeting */
.hospital-name {
    display: inline-block; /* Or block, depending on your layout */
    cursor: pointer;
    position: relative;
    z-index: 10; /* Adjust as necessary, but lower than the tooltip's z-index */
}
.case-item-age .case-label, .case-item-age .case-value {
    font-size: 7px !important;
}
.case-item-age {
    position: absolute;
    bottom: 191px;
    left: 3px;
}
/* Show tooltip on hover over the hospital name */
.hospital-name:hover + .tooltip-container .tooltip-text {
    display: block; /* Show the tooltip */
    /* ...other styles... */
}


.tooltip-container {
    position: absolute; /* Positioning relative to the hospital name */
    z-index: 9999; /* Ensures it's on top */
    display: block;
    width: 100%;
}

/* Show tooltip on hover */
.case-item-hospital:hover .tooltip-text {
    display: block;
    background-color: #181818;
    color: #fff;
    padding: 5px;
    border: 1px solid #2a2929;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    white-space: nowrap;
    text-align: left;
    font-size: small;
}

/* Ensure consistent line-height and vertical alignment for labels and values */
.chbmp-case-content .case-label,
.chbmp-case-content .case-value {
    display: inline-block;
    vertical-align: top; /* Aligns items to the top of the tallest item in the line */
    line-height: 1.2em; /* Adjust line-height for better control */
    margin-right: 4px; /* Add some space between label and value */
}

/* Adjust line-height for the hospital class */
.chbmp-case-content .hospital {
    line-height: 1.2em; /* Same as .case-label and .case-value for alignment */
    display: inline-block;
    max-width: calc(100% - 4px); /* Adjust width to prevent overflow */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top; /* Align with the label if needed */
}

/* Adjust styles for the tooltip container */
.chbmp-post-container .tooltip-container {
    position: relative;
    display: block;
    /* Remove any margin or padding that might affect alignment */
    margin: 0;
    padding: 0;
}
.tooltip-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Styles for verified posts */
.chbmp-post-container.verified::before {
    content: '';
    background-image: url('https://chbmp.org/wp-content/uploads/sites/33/2022/05/verified.png');
    background-size: 46px;
    width: 46px;
    height: 46px;
    position: absolute;
    right: 7px;
    bottom: 13px;
    background-repeat: no-repeat;
    z-index: 5;
}
.honors-flag-container {
    position: absolute;
    z-index: 100;
    right: 17px;
    bottom: 60px;
}

/* Flag styles based on military_or_police ACF field values */
.honors-flag-container.honors-retired-police::after,
.honors-flag-container.honors-active-duty-police::after {
    content: url("https://chbmp.org/wp-content/uploads/sites/33/2023/04/us_thin_blue_line_flag.jpg");
}

.honors-flag-container.honors-other-active-government-agent::after,
.honors-flag-container.honors-other-retired-government-agent::after {
    content: url("https://chbmp.org/wp-content/uploads/sites/33/2022/11/usa-vet-honors.png");
}

.honors-flag-container.honors-active-duty-military::after {
    content: url("https://chbmp.org/wp-content/uploads/sites/33/2023/05/thin-green-line-flag.png");
}
.honors-flag-container.honors-retried-from-military::after {
    content: url("https://chbmp.org/wp-content/uploads/sites/33/2023/05/thin-green-line-flag.png");
}

.honors-flag-container.honors-veteran-and-law-enforcement::after {
    content: url("https://chbmp.org/wp-content/uploads/sites/33/2023/04/us_thin_redandblue_line_flag.jpg");
}

/* Ensure the ::after element is properly displayed */
.honors-flag-container::after {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;

}

/* Tooltip styling for both hospital and flag tooltips */
.tooltip-text, .flag-tooltip {
    background-color: rgba(24, 24, 24, 0.97); /* Almost opaque dark background */
    color: #FFFFFF; /* White text */
    font-family: 'Cutive Mono', monospace; /* Cutive Mono font */
    font-size: small; /* Smaller font size */
    padding: 5px; /* Padding around the text */
    border: 1px solid #2a2929; /* Subtle border */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Slight shadow for depth */
    white-space: nowrap; /* Keep the tooltip on a single line */
    text-align: left; /* Align text to the left */
    display: none; /* Hidden by default */
    position: absolute; /* Positioned absolutely */
    z-index: 10000; /* High z-index to ensure visibility */
    transform: translateX(-50%); /* Center the tooltip */
    bottom: 110%; /* Position above the parent container */
}

/* Show the tooltip text when hovering over the container */
.chbmp-post-container .tooltip-container:hover .tooltip-text,
.honors-flag-container:hover .flag-tooltip {
    display: block; /* Show the tooltip */
}

/* Ensure the honors-flag-container has a relative position to position the tooltip correctly */
.honors-flag-container {
    display: inline-block; /* Ensures the container can size according to its contents */
}


/* The hover state that reveals the tooltip */
.honors-flag-container:hover .flag-tooltip {
    display: block; /* Shows the tooltip */
}
.et-db #page-container #et-boc .et_pb_text_3 h3 {
    color: #fff!important;
}
.et_pb_gutters3.et-db #et-boc .et-l .et_pb_column {
    margin-right: 1.1em;
    margin-bottom: 0.7em;
}

.chbmp-main {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: 10px;
    transform: scale(var(--zoom-level));
    transform-origin: top left;
}

.chbmp-post-title-container {
    position: relative; /* Ensures the pseudo-element positions relative to the title */
}

.chbmp-post-title:hover::before {
    content: '▶';
    position: absolute; /* Positions the triangle absolutely within the title container *//* Positions it right after the title */
    margin-left: -15px;
    margin-bottom: 2px; /* Adds some space between the title and the triangle */
    /* Additional styles for color, size, etc., as needed */
}


.chbmp-ajax-search-box {
    width: 80%;
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.chbmp-search-results {
    display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: flex-start; /* Align items to the start of the container */
    gap: 10px; /* Space between items */
    padding: 10px; /* Padding inside the container */
    position: absolute;
    z-index: 1000;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Offset by half its width to center */
    width: auto; /* Auto width to contain items */
    max-width: 80%; /* Max width */
    box-sizing: border-box; /* Include padding in width calculation */
    
}
#folder.case-search-result {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    height: 223px;
    box-sizing: border-box;
    margin-right: 1em;
    margin-bottom: 1em;
    padding-bottom: 0;
    position: relative;
}
.search-cases {
    display: inline-block;
}
.drawer {
    perspective: 1000px;

    /* Other styling */
  }
  
  .folder {
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
    margin-top: -1em; /* Pull each folder up to cover the one below */
    padding: 1em; /* Padding inside the folder */
    position: relative; /* Needed to apply the negative margin */
    z-index: 1; /* Stack folders on top of each other */
    filter: drop-shadow(0px -2px 3px rgba(0, 0, 0, 0.2));
  }
.folder + .folder {
    z-index: 2; /* Each folder has a higher index than the one before */
  }

  /* Prevent scrolling on the main content when search is active */
.no-scroll {
    overflow: hidden !important;
    height: 100%; /* Prevent vertical scrolling */
}

/* Assuming 270px is the minimum width of a column, plus 10px gap */
@media screen and (min-width: 560px) { /* 270px * 2 + 10px */
    .chbmp-main {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 840px) { /* 270px * 3 + 20px */
    .chbmp-main {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 1120px) { /* 270px * 4 + 30px */
    .chbmp-main {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media screen and (min-width: 1400px) {
    .chbmp-main {
        grid-template-columns: repeat(7, 1fr);
    }
}

@media screen and (min-width: 1680px) {
    .chbmp-main {
        grid-template-columns: repeat(8, 1fr);
    }
}


.shrink-folders .chbmp-main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); /* Adjust min and max values as needed */
    transform: scale(0.5); /* Scale down */
    transform-origin: top center;
    gap: 10px;
    margin: auto;
    padding: 10px;
    overflow: hidden;
  }
  
/* When search mode is active, hide the elements */
body.search-mode-active .header-element-class,
body.search-mode-active .another-element-class {
    display: none;
}

/* Additional styles to ensure the search results take the full page */
body.search-mode-active #chbmp-search-results {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999; /* Ensure it's above everything else */
}

/* Prevent scrolling on the body when search is active */
body.no-scroll {
    overflow: hidden;
}


/* Styles specific to the .et-l when search is active */
.et-l.search-active {
    /* If you need to add or override styles for .et-l when the search is active */
    /* For example, you might want to ensure it takes full width */
    width: 100%;
}

.et-l.et-l--header.search-active {
    /* Reduce the z-index so it's below the search results and overlay */
    z-index: 1;
    max-height: 157px; /* Set the max height for the header */
    overflow: hidden; /* Hide the overflow content */
/*    opacity: 0.5;  Make header semi-transparent */
}


/* Apply no-scroll class to the body when search is active to prevent background scrolling */
body.no-scroll {
    overflow: hidden;
    height: 100%; /* Prevent vertical scrolling */
}


/* You may also want to add additional rules for when the header is not in search-active state, for a smooth transition */
.et-l.et-l--header {
    transition: all 0.3s; /* Smooth transition for any changes */
}
/* Full-Screen Search Results */
#chbmp-search-results {
    position: fixed; /* Positioning */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 9999; /* Ensures it's above other content */
    overflow-y: auto; /* Allows scrolling within the search results */
   /*  background-color: rgba(255, 255, 255, 0.9); Change as needed */
}

.chbmp-search-results-wrapper.search-active {
    padding-top: 200px; /* Replace [HeaderHeight] with the actual height of your header */
    position: relative; /* or 'absolute' if you want it to be positioned based on its nearest positioned ancestor */
}

/* Overlay */
#search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998; /* Below search results but above other content */
    display: none; /* Hidden by default */
}

/* Freeze Background Content */
body.search-active {
    overflow: hidden; /* Prevent scrolling */
}


/* Additional styles to handle the search box and results */
.chbmp-search-box-container {
    width: 80%;
    z-index: 10001; /* Even higher to be on top of the results */
        text-align: center;
        margin-bottom: 20px;
    }

    .chbmp-ajax-search-box {
        font: 1em sans-serif;
    }

/* If you want to adjust the grid when search is active */
.chbmp-main.search-active {
    /* Adjust the template columns to how you want the grid to behave when search is active */
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
/* Search Results Container */
#chbmp-search-results {
    transition: padding-top 0.3s; /* Smooth transition for padding adjustments */
}

/* This handles the transition when user starts scrolling */
#chbmp-search-results.scrolled {
    padding-top: 0px !important; /* When scrolled, remove the padding */
}
/* This handles the transition when user starts scrolling */
.chbmp-search-box-container.search-active {
    display: none; /* When scrolled, remove the padding */
}
.clear-search, .close-overlay {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 24px; /* Adjust size as needed */
    position: relative;
    right: 10px;
    top: 10px;
    z-index: 1001; /* Above the search bar and overlay */
}

/* Style for the search box container */
.chbmp-search-box-container {
    position: relative; /* Needed for absolute positioning of the close button */
}

/* Adjustments for the close button on the overlay */
#search-overlay .close-overlay {
    position: fixed; /* Fixed to stay in the same place on the overlay */
    right: 20px; /* Distance from right */
    top: 20px; /* Distance from top */
}