.flip-card {
    background-color: transparent;      
    /* width: 300px;
    height: 300px; */
    width: 100%; /* Full-width on all screen sizes */
    /* max-width: 560px; Maximum width for larger screens */
    height: 240px;
    /* height: auto; */

    transition: transform 0.5s;    
    perspective: 1000px;
}
  
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transform-style: preserve-3d;
}

.flip-card .flipped {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;              
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow-y: auto; /* Add a vertical scrollbar when content overflows */

}

/* Front Card */
.flip-card-front {
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(188,233,249,1) 99%);
  
}

.flip-card-back {
    background: rgb(255,254,240);
    background: radial-gradient(circle, rgba(255,254,240,1) 0%, rgba(255,253,218,1) 100%);
}

.bg-image {
    content: url("https://lh3.googleusercontent.com/pw/ADCreHeVhzSEJcaoGb19MGuZ-mgB9Kf6QXfFBDrRjPUF7tl-yCR0GyTZ5m6sqp9sx9AJz4OixZU3uAMGJi7HfI1ZgozMNTBSUIN-bg3zkWx8--OE4oLtlxI=w964-h630");
    position: absolute; /* Allow it to position within the parent */
    top: 50%;
    left: 15%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 70%;
    opacity: 0.05;    
    right: 0;
    bottom: 0;
    /* z-index: 1; */
     /* Make sure the image is below other content */
    object-fit: cover; /* Ensures the image covers the entire area */
}

.q-N400 {
    position: absolute; /* Position it absolutely */
    top: 3px; /* Adjust for padding from top */
    right: 10px; /* Adjust for padding from right */
    /* z-index: 2;  */
    /* Bring it above the background image */
    color: rgb(145, 0, 0); /* Change text color for visibility */
    padding: 5px; /* Optional padding */
}

#div-en-word,
#div-pronunciation,
#div-extra-infor {
    position: relative; /* Keep them in flow of parent */
    /* z-index: 2;  */
    /* Ensure they sit above the bg-image */
    margin: 3px 0; /* Margin for spacing */
    color: black; /* Text color */
    font-size: 22px;
}

#div-en-word .en-word{
    font-size: 24px;
    color: rgb(0, 71, 193);
    font-weight: bold;
}

#div-en-word .en-part-of-speech{
    color: rgb(0, 124, 2);
}

#div-en-word .formatted-round-brackets::before {
    content: "(";
    color: rgb(0, 0, 0); /* Change color if needed */
}

#div-en-word .formatted-round-brackets::after {
    content: ")";
    color: rgb(0, 0, 0); /* Change color if needed */
}

#div-pronunciation .en-pro{
    color: rgb(184, 55, 0);
    font-size: 24px;
}

#div-pronunciation .en-pro:hover{
    cursor: pointer;
}

#div-pronunciation #bEn_W_mp3:hover{
    cursor: pointer;
}

#div-extra-infor .en-sentence{
    color: rgb(0, 95, 184);
}

#div-extra-infor .en-define{
    color: rgb(0, 69, 133);
}

/* Back Card */

.flip-card-back {
    background-color: #2980b9;
    color: white;
    transform: rotateY(180deg);
}

#div_BackContent .q-N400 {
    position: absolute;
    top: 0;
    right: 20px;
    font-size: 16px;
    color: rgba(235, 7, 7, 0.645);

}

#div_BackContent .vn-word{
    font-size: 24px;
    color: rgb(253, 65, 2);
    display: block;
}

#div_BackContent .vn-sentence{
    /* padding-top: 7px; */
    font-size: 24px;
    color: rgb(0, 102, 218);
    /* display: block; */
}

#div_BackContent .vn-define{
    /* padding-top: 7px; */
    font-size: 24px;
    color: #545455;
    /* display: block; */
}

#div_my_flashcard .icon-button-missed,
#div_my_flashcard .icon-button-defination,
#div_my_flashcard .icon-button-no-missed {
    padding: 10px 20px; /* Adjust the padding to make the button bigger */
    width: 100%; /* Make the buttons take up the full width on smaller screens */
    margin: 5px 0; /* Add vertical margin for spacing */
    font-size: 14px; /* Adjust the font size if needed */
    font-weight: bold;
    color: white;
}

#div_my_flashcard .my_br{
    display: none; /* Hide the <br> element by default */
}

/* For Paragraph */
#collapsParagraph .en-paragraph{
    background-color: #eeeeee;
    font-size: 20px;
}
#collapsParagraph .en-paragraph p{
    text-align: justify; /* Justifies text */
    text-indent: 25px; 
    margin-top: 0px;    /* Space above each paragraph */
    margin-bottom: 0px; /* Space below each paragraph */
}

/* #collapsParagraph .en-paragraph br{
    display: block;
    text-indent: 15px; 
    margin-left: 15px;
} */

#collapsParagraph .en-paragraph p .highlight {
    background-color: rgb(247, 247, 200); /* Highlight color */
    font-weight: bold; /* Optional: make the text bold */
    color: red; /* Optional: change the text color */
    /* padding: 2px;  */
    /* Optional: add some padding around the word */
}

/* #collapsParagraph .en-paragraph p{
    white-space: nowrap;
} */

/* Hover effect for .sentence-translate */
#collapsParagraph .sentence-translate:hover {
    background-color: #fbf5c5; /* Change background color to light yellow on hover */
    color: rgb(0, 89, 255);
    transform: translateX(10px); /* Move the text 10px to the right */
    /* margin-left: -10px; */
  }

#collapsParagraph .p-translate{
    background-color: rgb(212, 247, 253); /* Highlight color */
    color: rgba(135, 52, 0, 0.937); /* Optional: change the text color */
    /* padding: 2px;  */
    /* Optional: add some padding around the word */
}

#div-word-playing{
    background-color: #deeeff;
    font-size: 18px;
}

#div-word-playing .en-word-playing-text{
    color: blue;
    font-size: 18px;
}

#div-word-playing .en-pro-playing-text{
    color: rgb(203, 51, 0);
    font-size: 18px;
}


/* ---------------------------------------------  */
/* Reset default list styles */
.list-box {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#div-esl-flashcard #bEn_W_mp3{
    color: rgb(172, 19, 2);
    font-size: 28px;
    padding-left: 5px;

}

#div-esl-flashcard #bEn_De_mp3{
    color: rgb(172, 19, 2);
    font-size: 28px;
    padding-left: 12px;
}

/* Style the list items */
#div-learning-result .list-box li {
    padding: 5px;
    border-bottom: 1px solid #ddd;
}

/* Add alternating colors for odd and even items */
#div-learning-result .list-box li:nth-child(odd) {
    background-color: #f0f0f0; /* Odd item color */
}

#div-learning-result .list-box li:nth-child(even) {
    background-color: #e0e0e0; /* Even item color */
}

/* Add hover effect */
#div-learning-result .list-box li:hover {
    background-color: #92c5fb;
}

/* For tooltip */

.esl-fc-tooltip {
    position: absolute;
    background-color: #2e2e2e;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    z-index: 1000;
    white-space: nowrap;
}

/* For  #colorPicker */
/* Set the same height and ensure all elements align to the top */
.col-md-12 .btn,
#colorPicker {
    height: 30px; /* Match the height */
    line-height: 5px;
    display: inline-block; /* Align elements horizontally in a row */
    vertical-align: top; /* Align the top of all elements */
    margin-top: 5px;
}

/* Optional: Adjust button spacing if needed */
.col-md-12 .btn {
    margin-right: 2px; /* Space between buttons */
}

.table.tblFlashCard .bi-eye {
    color: green;
}

.table.tblFlashCard .bi-eye-slash {
    color: red;
}


/* Styles for mobile screens */
@media (max-width: 768px) {
    .flip-card {
          height: 380px;
    }
    
    .bg-image {
        top: 50%;
        left: 50%;
    }

    #div-en-word,
    #div-pronunciation,
    #div-extra-infor {
        font-size: 18px;
    }
    
    #div-en-word .en-word{
        font-size: 20px;
    }

    #div-pronunciation .en-pro{
        font-size: 20px;
    }
    
    #div_BackContent .vn-word,
    #div_BackContent .vn-sentence,
    #div_BackContent .vn-define{
          font-size: 20px; /* Adjust the font size if needed */
    }      

    #div_my_flashcard .icon-button-missed,
    #div_my_flashcard .icon-button-defination,
    #div_my_flashcard .icon-button-no-missed {
          padding: 5px 10px; /* Adjust the padding to make the button bigger */
          width: 100%; /* Make the buttons take up the full width on smaller screens */
          margin: 2px 0; /* Add vertical margin for spacing */
          font-size: 12px; /* Adjust the font size if needed */
          font-weight: bold;
    }

    #div_my_flashcard .icon-button-defination
    {
          width: 140px; /* Make the buttons take up the full width on smaller screens */
    }
  

}

  /* Style for the disabled ul */
  .disabled-ul {
    pointer-events: none;
  }

  /* Style for the disabled li */
  .disabled-ul li {
    pointer-events: none;
  }