@keyframes rippleEffect {
        from {
                transform: scale(0.75);
                opacity: 0.8;
        }
        to {
                transform: scale(1);
                opacity: 0;
        }
}
.glossary{
	padding:0;
}
.glossary .search-panel .search-box .search-input {
        width: 100%;
        height: 50px;
        border-radius: 999px;
        border: 1px solid #ccc;
        text-indent: 20px;
}
.glossary .search-panel .search-box .search-icon {
        position: absolute;
        top: 15px;
        right: 10px;
        background-image: url('images/search.png');
        width: 20px;
        height: 20px;
        background-size: cover;
        cursor: pointer;
}
.glossary .search-panel .search-box .search-icon.clear {
        background-image: url('images/close.png');
}
.glossary .search-panel .search-box {
        padding-bottom: 10px;
        width: 100%;
        position: relative;
        display: inline-block;
}
.glossary .search-panel .search-box .search-input:hover {
        background-color: whitesmoke;
}
.glossary .search-panel .search-result {
        list-style: none;
        max-height: 80vw;
        overflow: auto;
}
.glossary .search-panel .search-result .item {
        padding: 5px;
        cursor: pointer;
}
.glossary .search-panel .search-result .item:hover {
        background-color: whitesmoke;
}
.glossary .search-panel .search-result .item.active {
        background-color: thistle;
        animation: rippleEffect 0.25s ease-out;
}
.glossary .search-panel .search-result .item .term {
        font-size: 18px;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}
.glossary .search-panel .search-result .item .vietnamese {
        color: gray;
}
.glossary .content-panel .user-tool {
		display: flex;
		justify-content: end;
}
.glossary .content-panel .user-tool .copy-icon {
        display: block;
        background-image: url(images/copy.png);
        width: 30px;
        height: 30px;
        background-size: contain;
        background-repeat: no-repeat;
        cursor: pointer;
}
.glossary .content-panel .content-detail {
        font-size: 24px;
}
.glossary .content-panel .content-detail .term {
        padding-bottom: 20px;
        font-size: 20px;
}
.glossary .content-panel .content-detail .term .abbreviation {
        color: gray;
}
.glossary .content-panel .content-detail .vietnamese {
        color: #991B1B;
        padding-bottom: 20px;
        border-bottom: solid 1px #991B1B;
        font-size: 18px;
}
.glossary .content-panel .content-detail .explanation {
        color: #444;
        padding-top: 20px;
        font-size: 16px;
        line-height: 1.5;
}
.glossary .dictionary-relation {
        color: rgba(0, 114, 198, 1);
        cursor: pointer;
}
.SearchResults {
        max-width: 100%;
        margin: 20px auto;
        padding: 20px;
        background-color: #f9f9f9;
        border-radius: 8px;
        font-family: Arial, sans-serif;
}
.SearchPane {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-bottom: 20px;
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: 20px;
}
.SearchPane > div:first-child span {
        font-weight: bold;
        color: #333;
}
.TextPanel .TextPanel {
        display: flex;
        align-items: center;
        width:500px
}
.TextPanel  {
        display: flex;
}
.TextPanel input[type="text"] {
        flex-grow: 1;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
}
.mic {
        margin-left: 10px;
        background: url('path-to-mic-icon.png') no-repeat center;
        width: 24px;
        height: 24px;
        cursor: pointer;
}
/* Search button styling */
.TextPanel  .ClearButton {
        display: inline-block;
        padding: 10px 0px;
        background-color: #007bff;
        color: #fff;
        text-decoration: none;
        text-align: center;
        font-weight: bold;
        border-radius: 4px;
        transition: background-color 0.3s;
        width: 110px;
        margin-left: 10px;
        font-size: 16px;
}
.TextPanel  .SearchButton {
        display: inline-block;
        padding: 10px 0px;
        background-color: #cc0212;
        color: #fff;
        text-decoration: none;
        text-align: center;
        font-weight: bold;
        border-radius: 4px;
        transition: background-color 0.3s;
        width: 110px;
        margin-left: 10px;
        font-size: 16px;
}
.SearchButton:hover {
        background-color: #0056b3;
}
/* Spinner styling */
.spinner-border {
        display: inline-block;
        width: 24px;
        height: 24px;
        border: 3px solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: spinner 0.75s linear infinite;
}
@keyframes spinner {
        to {
                transform: rotate(360deg);
        }
}
/* Results container styling */
.ResultsContainer {
        margin-top: 20px;
}
.ResultList {
        list-style: none;
        padding: 0;
}
.Item {
        padding: 15px;
        margin-bottom: 10px;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        transition: transform 0.2s;
}
.Item:hover {
        transform: translateY(-2px);
}
.Title {
        font-size: 18px;
        font-weight: bold;
        color: #007bff;
        text-decoration: none;
}
.Title:hover {
        text-decoration: underline;
}
.Vietnamese, .Explanation {
        color: #555;
        font-size: 14px;
        margin: 8px 0;
}
/* Pager styling */
.ArtPager {
        text-align: center;
        margin-top: 20px;
        font-size: 16px;
}
.CurrentPage {
        font-weight: bold;
        color: #333;
}
.Explanation {
        display: inline-block;
        overflow: hidden;
}
.toggle-btn {
        padding: 10px 20px;
        background-color: #007bff;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s, transform 0.2s;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.toggle-btn:hover {
        background-color: #0056b3;
        transform: translateY(-2px);
}
.toggle-btn:active {
        background-color: #004494;
        transform: translateY(0);
}
/* Active state styling (optional, if toggling state) */
.toggle-btn.active {
        background-color: #28a745;
}
.toggle-btn.active:hover {
        background-color: #218838;
}
.TextPanel .suggestions {
        display: none;
        width: 100%;
        max-height: 200px;
        overflow-y: auto;
        background-color: white;
        border: 1px solid #ccc;
        position: absolute;
        z-index: 100;
        top:123px;
        width:500px
}
.suggestion-item {
        padding: 10px;
        cursor: pointer;
        border-bottom: 1px solid #f0f0f0;
}
.suggestion-item:hover {
        background-color: #f0f0f0;
}
.DictionaryDetail .Term,
.DictionaryDetail .Abbreviation,
.DictionaryDetail .Vietnamese {
        font-weight: bold;
        color: #555;
        margin: 5px 0;
}
.DictionaryDetail .Explanation {
        color: #555;
}
.OtherDictionary {
        background-color: #f9f9f9;
        border-radius: 8px;
        padding: 20px;
}
.OtherDictionary .title {
        font-weight: bold;
        color: #cc0212;
        margin-bottom: 10px;
}
.OtherDictionary .list-item {
        list-style: none;
}