.flipbookContainer {
    color: black !important;
}

.transcript_pdf {
    /* color :#FFF !important; */
    /* padding: 6px 35px; */
    /* background: #000000; */
    /* color: white; */
    font-size: 14px;
    /* border-color: #000000; */
    cursor: pointer;
    /* border-width: 1px; */
    /* border-style: solid; */
    -webkit-border-radius: 3px;
    /* border-radius: 16px; */
    white-space: nowrap;
}

/* Change the background color of the entire control panel */
.df-ui-wrapper.df-ui-controls {
    background-color: #ffffff !important; /* Set background to white */
    border-radius: 5px; /* Optional: Add slight rounding */
    /* padding: 10px; */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* Optional: Add shadow for definition */
}

/* Change the icon colors */
.df-ui-btn {
    color: #2f2d2f !important; /* Set icons to dark color */
}

/* Change the hover effect on buttons */
.df-ui-btn:hover {
    background-color: #f0f0f0 !important; /* Light gray hover background */
}

/* Change the color of the text inside buttons */
.df-ui-btn span {
    color: #2f2d2f !important; /* Ensure text inside buttons is dark */
}

/* Modify specific icons (zoom, thumbnails, fullscreen, share, etc.) */
.df-ui-prev,
.df-ui-next,
.df-ui-thumbnail,
.df-ui-zoomin,
.df-ui-zoomout,
.df-ui-fullscreen,
.df-ui-share,
.df-ui-more .df-ui-btn {
    color: #2f2d2f !important; /* Set all control icons to dark color */
}

/* Change the input page number color */
#df_book_page_number {
    color: #2f2d2f !important; /* Set input text color to dark */
    background-color: #ffffff; /* Keep input background white */
    border: 1px solid #2f2d2f; /* Add a border to the input */
    border-radius: 3px;
    padding: 3px;
}

/* Style the "more" dropdown buttons */
.more-container .df-ui-btn {
    color: #2f2d2f !important; /* Set dropdown buttons color */
}

/* Optional: Style the hover effect inside the "more" dropdown */
.more-container .df-ui-btn:hover {
    background-color: #f0f0f0 !important; /* Light gray background on hover */
}

/* Ensure the label (e.g., page number display) is styled properly */
.df-ui-page label {
    color: #2f2d2f !important; /* Dark text for page number display */
}

/* Adjust the appearance of the disabled buttons */
.df-ui-btn.disabled {
    color: #b0b0b0 !important; /* Gray out disabled buttons */
}

.df-lightbox-wrapper {
    height: calc(100% - 100px) !important;
    top: 50%;
    transform: translateY(-50%);
    width: 100% !important;
    max-width: 1199px !important;
    margin: 0 auto !important;
    border-radius: 8px;
    box-shadow:
        rgba(0, 0, 0, 0.25) 0px 54px 55px,
        rgba(0, 0, 0, 0.12) 0px -12px 30px,
        rgba(0, 0, 0, 0.12) 0px 4px 6px,
        rgba(0, 0, 0, 0.17) 0px 12px 13px,
        rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
.df-lightbox-wrapper .df-container {
    background-color: rgb(52 58 64 / 9%) !important;
}
.df-lightbox-open {
    position: relative;
}
.df-lightbox-open::before {
    position: absolute;
    content: "";
    background-color: #00000042;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    z-index: 99999;
}
.df-lightbox-wrapper .df-ui-wrapper .df-ui-btn.df-ui-prev,
.df-lightbox-wrapper .df-ui-wrapper .df-ui-btn.df-ui-next {
    background-color: transparent !important;
    width: 35px;
    height: auto;
    color: unset !important;
}
.df-lightbox-wrapper .df-ui-btn.df-ui-prev,
.df-lightbox-wrapper .df-ui-btn.df-ui-next,
.df-lightbox-wrapper .df-lightbox-close.df-ui-btn.ti-close {
    padding: 0px;
    font-size: 18px;
    font-weight: bold;
    background-color: #343a40 !important;
    width: 30px !important;
    height: 30px;
    opacity: 1;
    color: #fff !important;
}
.df-lightbox-wrapper .df-ui-btn.df-ui-prev::before,
.df-lightbox-wrapper .df-ui-btn.df-ui-next::before,
.df-lightbox-wrapper .df-lightbox-close.df-ui-btn.ti-close:before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    font-size: 14px;
    font-weight: bold;
}
.df-container.df-floating > .df-ui-prev {
    left: 6px;
}