h1{
      color: red;
}

/* For psot view */
.css_Div_my_post_view_test {
      display: inline;
      color:  rgb(7, 130, 253);
}

.css_Div_my_post_view_test .post-views {
      display: inline;
      font-size: 18px;
}


/* .div-esl-gallery-flashcards */
.link-div {
    position: relative; /* Make the parent relative for absolute positioning */
    overflow: hidden; /* Hide overflow content */

}

.bg-hover {
    position: relative; /* Make the parent relative for absolute positioning */
    overflow: hidden; /* Hide overflow content */

}

.rotate-label {
    position: absolute; /* Position it relative to the parent */
    top: 5px; /* Align it to the top */
    right: -25px; /* Align it to the right */
    transform: rotate(45deg); /* Rotate the element */
    background-color: red; /* Background color for visibility */
    color: white; /* Text color */
    font-size: 12px;
    font-weight: bold;
    z-index: 1; /* Ensure it appears on top */
    
    /* Flexbox for centering */
    display: flex; /* Make it a flex container */
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */
    
    /* Optional: Set a width for better control */
    width: 80px; /* Adjust as needed */
    height: 20px; /* Adjust as needed */
}

.days-10{
    background-color: rgb(249, 251, 147); /* Background color for visibility */
    color: red;
}

.days-10 span{
    font-size: 12px;
}

.days-15{
    background-color: rgb(200, 154, 240); /* Background color for visibility */
    color: red;
}

.days-15 span{
    font-size: 12px;
}

.div-esl-gallery-flashcards .link-div .bg-hover {
    display: block; /* Make the link take the full width */
    color: inherit; /* Inherit text color from parent */
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(235,246,250,1) 97%);
    
}

.div-esl-gallery-flashcards .link-div .bg-hover:hover {
    cursor: pointer; /* Change cursor to pointer */
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(210,242,249,1) 100%);
}

.col.link-div {
    display: flex; /* Make each column a flex container */
    flex-direction: column; /* Stack items vertically */
    justify-content: stretch; /* Ensure children stretch to fill column height */
}

.col.link-div .description {
    display: block;
    max-height: 6em; /* Adjust this based on line height and font size */
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5; /* Example line height */
    white-space: normal; /* Allow text to wrap */
}
.p-2 {
    flex: 1; /* Allow the inner div to grow and fill the available space */
}

.link-div .title{
    font-weight: bold;
    color: rgb(1, 69, 170);
} 
.link-div .created-date{
    font-weight: bold;
}

#div-priority-flashcards .link-div .bg-hover{
    display: block; /* Make the link take the full width */
    color: inherit; /* Inherit text color from parent */
    background: radial-gradient(circle, rgb(242, 235, 235) 0%, rgb(245, 213, 205) 97%);    
}

#div-priority-flashcards .link-div .bg-hover:hover{
    cursor: pointer; /* Change cursor to pointer */
    background: radial-gradient(circle, rgb(244, 206, 206) 0%, rgb(245, 213, 205) 97%);    
}

/* --------------------------------- */