/*mark { background-color: #eff57f; border-radius: 5px; }
#mag-global-search { font-size: 1.2rem; padding: 1.5rem; }
#mag-search-button { font-size: 1.2rem; }
.mag-search-icon { cursor: pointer; font-size: 1.3rem; margin-left: 1rem; }
.modal-body > .dropdown-menu { margin-left: 2rem; margin-top: -0.9rem; }*/

.mag-search-container { position: relative; transition: width 1s, cursor 1s; width: 50px; height: 30px; }
.mag-global-search { position: absolute; top: 0; right: 0; width: 0; /* Change width to 0 */ opacity: 0; /* Add opacity to hide initially */ overflow: hidden; /* Hide overflow content */ transition: width 1s, opacity 1s, right 1s; /* Transition width and opacity */ }
.mag-search-container .glyphicon-search { padding: 6px 0; position: absolute; top: 0; right: 0;
                                          border-radius:50%;transition: all 1s;color:var(--mag-header-text-color);}

.mag-search-container:hover,
.mag-search-container.active,
.mag-search-container:focus-within { width: 300px; cursor: pointer; }

.mag-search-container:hover input,
.mag-search-container.active input,
.mag-search-container:focus-within input{ width: 100%; /* Expand width to 100% */ opacity: 1; /* Show input */ padding-right: 40px; }

.mag-search-container:hover .glyphicon-search,
.mag-search-container.active .glyphicon-search,
.mag-search-container:focus-within .glyphicon-search { padding: 6px 10px; }

.mag-search-container:focus-within .mag-global-search { width: 300px; /* Adjust as needed */ opacity: 1; }

.mag-search-container .dropdown-menu { width:300px;}
.mag-search-container .dropdown-menu .lookup-menu-item .global-search-suggestion-title,
.mag-search-container .dropdown-menu .lookup-menu-item .global-search-suggestion-category { overflow: hidden; text-overflow: ellipsis; }

.mag-search-container .mag-global-search.form-control { background-color: var(--mag-header-bg-200); 
                                                        border-color: var(--mag-header-bg-100); 
                                                        color: var(--mag-header-text-color);}
.mag-search-container .mag-global-search.form-control:focus { box-shadow: 0 0 0 0.1rem var(--mag-header-bg-100); }
.mag-search-container .dropdown-menu { background-color: var(--mag-header-bg-200); border-color: var(--mag-header-bg-100);
                                       color: var(--mag-header-text-color); }
.mag-search-container .dropdown-menu > li > a { color: var(--mag-header-text-color); }
.mag-search-container .dropdown-menu > li > a:hover,
.mag-search-container .dropdown-menu > li > a:focus { background-color: var(--mag-header-bg-color); }

.mag-search-icon { opacity: 0.8; color: var(--mag-header-text-color); display:flex; align-items:center; height:30px; }
.mag-search-icon:hover, .mag-search-icon:focus { opacity: 1; color: var(--mag-header-text-color);text-decoration:none; }

.mag-search-container .mag-global-search::placeholder { color: var(--mag-header-text-color);opacity:0.7; }

/*Modal on small screens*/
#mag-search-container .global-search-modal-content .close-search-box-btn { padding: 10px 0; }
#mag-search-container .global-search-modal-content { padding:0 25px 40px 25px;}

#mag-search-container .global-search-modal-content .dropdown-menu,
.mag-search-container .dropdown-menu { max-height: 250px; overflow-y: auto; width: 100%; }