* General css for main Layout
 * --------------------------------------------------
 */
 input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

	.download-dropdown:hover .download-dropdown-menu {
	  display: block;
	}

 html
 {
 	height:100%;
 	overflow:hidden;
 }
 body
 {
 	/*background-color:#eee;*/
 	height:100%;
 	width:100%;
 	min-height:400px;
 	min-width:400px;
 	/* Fixed full-viewport SPA: the document itself must never scroll — only the
 	   inner panes (.tab-area, .search_data, etc.) do. Without this, a few px of
 	   inner overflow leaks out as a whole-page scrollbar on the right edge. */
 	overflow:hidden;
 }
 .drop-down-area
 {
 	max-height:245px;
 	overflow:auto;
 	/*background-color:#eee;*/
 }
 .main_heading
 {
 	height:77px;
 }
 .main_content
 {
 	/* Header (.main_heading) is 77px + 1px bottom border = 78px. Content must fill the
 	   rest exactly; the old 50px left content ~28px too tall, which used to leak out as a
 	   whole-page scrollbar and now (with root overflow locked) clipped the pane bottom. */
 	height:calc(100% - 78px);
 }
 .error_box
 {
 	background-color:rgb(242,222,222);
    position: relative;
    right: 20px;
    height: auto;
    min-height: 70px;
    min-width: 500px;
    border-radius: 5px;
    color: black;
    z-index: 1000;
   /* display: -webkit-box; display: -ms-flexbox;display: -webkit-flex; display: flex;*/
   display:grid;
    padding: 5%;
    margin-top: 5px;
    max-width:350px;
   /* text-align:justify;*/
 }
 .tab_area
 {
 	position:initial;
 }
 .search_forms_area
 {
 	position:relative;
 }
 .deleteButton
 {
 	right:10px;
 }
 .deleteButton:hover
 {
 	color:red;
 	cursor:pointer;
 }
 .deleteButton:active
 {
 	transform: translateY(2px);
 }
 .formdeleteButton
 {
 	position:absolute;
 	right:50px;
 }
 .formdeleteButton:hover
 {
 	color:red;
 	cursor:pointer;
 }
 .refreshButton
 {
 	position:absolute;
 	left:1%;
 }
 @-moz-document url-prefix() {
 	 .refreshButton
		 {
		 	position:absolute;
		 	left:1%;
		 	top:10px;
		 }
 	}
 	
 .refreshButton:hover
 {
 	color:#c0c0c0;
 	cursor:pointer;
 }
 .alert_box_list
 {
 	border:1 px solid black;
 	position:absolute;
 	top:30px;
 	right:10px;
	min-width:300px;
	
 }
.alert_box {
	margin-right: 0px;
    margin-left: auto;
	width: fit-content;
        position: relative;
    /* top: 60px; */
    right: 20px;
    height: auto;
    min-height: 70px;
    min-width: 250px;
    border-radius: 5px;
    background-color: #D3EFFF;
    color: black;
    z-index: 1000;
    display: -webkit-box; display: -ms-flexbox;display: -webkit-flex; display: flex;
    padding: 5%;
    margin-top: 5px;
}

.slider
{
	width:4px;
	overflow-x:visible;
	background-color:#15a999;
	z-index:1;
}
.slidebar
{
	height:calc(50% - 15px);
	width:4px;
	background-color:#15a999;
	margin:0px;
	padding:0px;
	z-index:2;
}


.slideButton
{
	height:30px;
	width:30px;
	border-radius:30px;
	background-color:#15a999;
	transition:0.5s;
	margin-left:-13px;
	color:#fff;
	align-items: center;
	display: -webkit-box; display: -ms-flexbox;display: -webkit-flex; display: flex;
	justify-content: center;
	opacity:1;
}
.rotateButton
{
	tansform:rotate(180deg);
	-webkit-transform: rotate(180deg);
}
.full-height {
	height: 100%;
} 
.formsection
{
	z-index:0;
	 transition: 0.5s;
	 overflow-x:hidden;
}


/* scroll bar styling */
.formsection::-webkit-scrollbar {
    width: 5px;
}
 
.formsection::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
.formsection::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}
.tab-area-selected {
	display: block;
	
}
.tab-window{
	height: 100%;
}

.myTabs-container {
	border-bottom:3px solid #eee;
	min-height:40px;
	height:40px;
}

.trans-filter-container {
    border-bottom: 3px solid #eee;
    min-height: 40px;
    height: 150px;
}
 
.myTab {
	min-height: 100%;
	max-height: 100%; 
	height:100%; 
	border-top-left-radius:5px; 
	border-top-right-radius:5px;
	
}
.myTab>h5
{
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    height:16px;
    font-weight:bold;
}

.myTab:hover {
	    background-color: #eee;
} 

.myTab-selected {
	border-bottom:0px;
	background-color:#eee;
}

.myTabArea-container {
	height:calc(100% - 80px);
}

.tab-area {
	border-top:0px;
	max-height:100%;
	min-height:70%;
	height: 100%;
	/*padding-right:0px;*/
	display:none;
	overflow: auto;
}
/* scroll bar styling */
.tab-area::-webkit-scrollbar {
    width: 5px;
}
 
.tab-area::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
.tab-area::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}
/* scrollbar styling */
.tab-area-selected {
	display: block;
	
}

.email-glyphicon {
	background:url("/images/email-placeholder.png") no-repeat scroll left 12px top 7px #ffffff;
	padding: 0 50px;
	 
}

.user-glyphicon {
	background:url("/images/user-placeholder.png") no-repeat scroll left 13px top 5px #ffffff;
	background-size:20px 20px;
	padding: 0 50px;
}
#dataArea {
	padding: 0px;
}

[class*="col-"] {
	/*border: 0px;*/
}
.drop-down-option
{
	text-overflow: ellipsis;
	  white-space: nowrap;
	  overflow: hidden;
	  padding:3px;
}
.drop-down-option:hover
{
	background-color:#d7d9e0;
}
.dropdownbutton:hover
{
	background-color:#eee;
}
.dropdownbutton
{
	border-width:0px;
	width:100%;
	height:100%;
	background-color:#eee;
}
.dropdowndiv
{
	border-width:0px;
	width:100%;
	font-weight:700;
}
.dropdown
{
	border:0px;
}
.author-dropdown.select2-dropdown {
	width: fit-content !important;
}
.author-dropdown .select2-results {
	width: fit-content;
	text-wrap-mode: nowrap;
}
#tabs{
	/*border:1px solid green;*/
}
.menubutton
{
	width:50px;
	heigth:inherit;
	border:1px solid black;
	/*display:inline;*/
}
.formsection
{
	border-right:0px;
	position:relative;
}
.data-tab-window
{
	border-left:0px;
}
.dropdown_li_text
{
	max-width:200px;
	display:inline-block;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow:hidden;
	position:relative;
	top:4px;
	left:4px;
}
/* agreement.cfm - footer */
.agreement_footer
{
	position:absolute;
	bottom:5px;
	width:100%;
	height:70px;
}
.submit_agreement
{
	width:100%;
	display:-webkit-box; display: -ms-flexbox;display: -webkit-flex; display: flex;
	align-items:center;
	justify-content:center;
}
.agreement_form
{
	font-size: large;
    font-weight: 600;
	padding-left:0px;
}
.agreement_form input[type='checkbox']
{
	transform: scale(1.2);
	margin-right:5px;
}
.thornbills_header
{
	background-color:#eee;
	width:100%;
	border-bottom:1px solid #c1c3c6;
}
.warning_content
{
	align-items:center;
	display:-webkit-box; display: -ms-flexbox;display: -webkit-flex; display: flex;;
	height:calc(100% - 40px);
}
/* scroll bar styling for data list */
.search_data::-webkit-scrollbar {
    width: 5px;
}
 
.search_data::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
.search_data::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}



/* list color-coding */
.odd_row_color
{
	background-color:#eee;
}
.even_row_color
{
	background-color:white;
}
.sort_symbol
{
	color: #696d6d;
    padding-bottom: 2px;
    padding-left: 5px;
}
.disabled_prac
{
	background-color:rgb(242,222,222);
}
/* button in row of access form */
.submit_row
{
	margin-left:-40px;
}
.warning_mark
{
	padding-right:10px;
}
.warning_message
{
	max-width:280px;
	text-align:center;
}
input[type=checkbox]
{
	margin-left:10px;
}
.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4,end) 900ms infinite;      
  animation: ellipsis steps(4,end) 900ms infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 20px;    
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 20px;    
  }
}
.down_count
{
	min-width:20px;
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; 
	
}

.graphArea
{
	position:relative;
	
}
/* scroll bar styling */
.personalSetting-tab-content::-webkit-scrollbar {
    width: 5px;
    height:5px;
}
 
.personalSetting-tab-content::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
.personalSetting-tab-content::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}
/*  */
/* scroll bar styling */
.personalSetting-tab-menu::-webkit-scrollbar {
    width: 5px;
}
 
.personalSetting-tab-menut::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
.personalSetting-tab-menu::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}
/* css for option btn: adduser,clear-form */
.sub_btn
{
	position:relative;
	color:#49939a;
}
.sub_btn:hover 
{
	cursor:pointer;
}
.sub_btn:active {
  transform: translateY(2px);
}

/* notification window stylesheet */
.n_window/* div in which all the notification to be shown */
{
	position:absolute;
	bottom:0;
	right:0;
	overflow:auto;
	width:auto;
	max-height:500px;
	z-index:7;
	border:2px solid #48939b;
	border-radius:3px;
	transition:0.5s;
	
}
.n_window::-webkit-scrollbar {
    width: 5px;
}
 
.n_window::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
.n_window::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}
.n_heading/* button on the main_design and heading of the notification_window */
{
	position:relative;
	height:30px;
	width:100%;
	overflow:auto;
	overflow:auto;
	margin:0px;
	padding:2px;
	background-color:#48939b;
	color:#fff;
	text-align:center;
	align-items:center;
	transition:0.5s;
	cursor:pointer;
}
.n_heading_text
{
	display:inline-block;
	font-weight:bold;
	font-size:16px;
}
.n_area
{
	background-color:#fff;
	transition:0.5s;
	height:0px;
	width:0px;
	overflow:auto;
}
.tab_type
{
	color:black;
	display:contents;
}
.tab_type:hover
{
	font-weight:bolder;
	cursor:pointer;
}
.form-control:focus
{
	box-shadow:none;
}
.all_read
{
	position: absolute;
    top: 8px;
    right: 7px;
}
.all_read:hover
{
	color:aliceblue;
	cursor:pointer;
}
.n_footer
{
	position: absolute;
    background-color: #48939b;
    width: 100%;
    height: 30px;
    text-align: center;
    color: white;
    font-weight: bold;
    padding-top: 5px;
    bottom: 0;
}
.n_footer:hover
{
	color:aliceblue;
	cursor:pointer;
}
/* upload file button css */
.add_file_button
{
	height: 26px;
    width: 115px;
    border: 2px solid #48939b;
    border-radius: 8px;
    text-align: center;
    background-color: #48939b;
    color: #ffffff;
    margin:auto;
}
 .file_drag_area  
{  
    width:98%;  
    height:100px;  
    border:2px dashed #ccc;  
    line-height:100px;  
    text-align:center;  
    font-size:24px; 
    margin:auto; 
}  
.file_drag_over
{  
	color:#000;  
	border-color:#000;  
}  
.hipaa_patient_button
{
	color: #46929b;
	font-weight: bolder;
	font-size: 15px;
}
.hide_row
{
	display:none;
}
.show_row
{
 	display:block;
}
.doc_list
{
 	height: calc(100% - 39px);
}
.practice_name
{
    position: absolute;
    left: 3px;
    font-size: 19px;
    font-weight: bold;
    top: 14px;
    /* text-align: center; */
    height: auto;
    width: 25%;
    display: flex;
    color: #6d7781;
    /* text-overflow: ellipsis; */
    /* white-space: nowrap; */
    overflow: auto;
    align-items: center;
}

/* Admin Practice Dropdown Styling */
.practice_dropdown_admin
{
    background-color: #48939b;
    border: 2px solid #48939b;
    border-radius: 5px;
    padding: 8px 35px 8px 12px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(72, 147, 155, 0.2);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    height: auto;
	width: 100%;
    
}



.practice_dropdown_admin option
{
    background-color: #ffffff;
    color: #333333;
    padding: 10px;
    font-weight: 500;
}

.practice_dropdown_admin option:hover
{
    background-color: #e8f4f5;
}

.practice_dropdown_admin option:checked
{
    background-color: #48939b;
    color: #ffffff;
}
.sync_button
{
	position: absolute;
	cursor:pointer;
    right: 8px;
    top: 8px;
    font-size: 19px;
    right: 15px;
    color: #48939b;
	
}
.doc_count
{
	font-size: 17px;
    text-align: center;
    position: absolute;
    background-color: #f19c1d;
    top: -8px;
    right: -4px;
    border-radius: 20px;
    height: 17px;
    width: 17px;
    font-size:13px;
    color:white;
    padding-top:1px;
}

.bell{
  margin-right:5px;
  font-size:20px;
  -webkit-animation: ring 4s .7s ease-in-out infinite;
  -webkit-transform-origin: 50% 4px;
  -moz-animation: ring 4s .7s ease-in-out infinite;
  -moz-transform-origin: 50% 4px;
  animation: ring 4s .7s ease-in-out infinite;
  transform-origin: 50% 4px;
}

@-webkit-keyframes ring {
  0% { -webkit-transform: rotateZ(0); }
  1% { -webkit-transform: rotateZ(30deg); }
  3% { -webkit-transform: rotateZ(-28deg); }
  5% { -webkit-transform: rotateZ(34deg); }
  7% { -webkit-transform: rotateZ(-32deg); }
  9% { -webkit-transform: rotateZ(30deg); }
  11% { -webkit-transform: rotateZ(-28deg); }
  13% { -webkit-transform: rotateZ(26deg); }
  15% { -webkit-transform: rotateZ(-24deg); }
  17% { -webkit-transform: rotateZ(22deg); }
  19% { -webkit-transform: rotateZ(-20deg); }
  21% { -webkit-transform: rotateZ(18deg); }
  23% { -webkit-transform: rotateZ(-16deg); }
  25% { -webkit-transform: rotateZ(14deg); }
  27% { -webkit-transform: rotateZ(-12deg); }
  29% { -webkit-transform: rotateZ(10deg); }
  31% { -webkit-transform: rotateZ(-8deg); }
  33% { -webkit-transform: rotateZ(6deg); }
  35% { -webkit-transform: rotateZ(-4deg); }
  37% { -webkit-transform: rotateZ(2deg); }
  39% { -webkit-transform: rotateZ(-1deg); }
  41% { -webkit-transform: rotateZ(1deg); }

  43% { -webkit-transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(0); }
}

@-moz-keyframes ring {
  0% { -moz-transform: rotate(0); }
  1% { -moz-transform: rotate(30deg); }
  3% { -moz-transform: rotate(-28deg); }
  5% { -moz-transform: rotate(34deg); }
  7% { -moz-transform: rotate(-32deg); }
  9% { -moz-transform: rotate(30deg); }
  11% { -moz-transform: rotate(-28deg); }
  13% { -moz-transform: rotate(26deg); }
  15% { -moz-transform: rotate(-24deg); }
  17% { -moz-transform: rotate(22deg); }
  19% { -moz-transform: rotate(-20deg); }
  21% { -moz-transform: rotate(18deg); }
  23% { -moz-transform: rotate(-16deg); }
  25% { -moz-transform: rotate(14deg); }
  27% { -moz-transform: rotate(-12deg); }
  29% { -moz-transform: rotate(10deg); }
  31% { -moz-transform: rotate(-8deg); }
  33% { -moz-transform: rotate(6deg); }
  35% { -moz-transform: rotate(-4deg); }
  37% { -moz-transform: rotate(2deg); }
  39% { -moz-transform: rotate(-1deg); }
  41% { -moz-transform: rotate(1deg); }

  43% { -moz-transform: rotate(0); }
  100% { -moz-transform: rotate(0); }
}

@keyframes ring {
  0% { transform: rotate(0); }
  1% { transform: rotate(30deg); }
  3% { transform: rotate(-28deg); }
  5% { transform: rotate(34deg); }
  7% { transform: rotate(-32deg); }
  9% { transform: rotate(30deg); }
  11% { transform: rotate(-28deg); }
  13% { transform: rotate(26deg); }
  15% { transform: rotate(-24deg); }
  17% { transform: rotate(22deg); }
  19% { transform: rotate(-20deg); }
  21% { transform: rotate(18deg); }
  23% { transform: rotate(-16deg); }
  25% { transform: rotate(14deg); }
  27% { transform: rotate(-12deg); }
  29% { transform: rotate(10deg); }
  31% { transform: rotate(-8deg); }
  33% { transform: rotate(6deg); }
  35% { transform: rotate(-4deg); }
  37% { transform: rotate(2deg); }
  39% { transform: rotate(-1deg); }
  41% { transform: rotate(1deg); }

  43% { transform: rotate(0); }
  100% { transform: rotate(0); }
}
.tbl {background-color:#000;}
.tbl td,th,caption{background-color:#fff}

.download-zip-icon
				{
					font-size:30px;
					top:50%;
					left:50%;
					position:absolute;
					-ms-transform: translate(-50%, -50%);
					transform: translate(-50%, -50%);
				}
				.zip-image
				{
					width:10%;
					display:inline-block;
					color:#277be9;
					position:relative
				}
				.zip-details
				{
					width:70%;
					display:inline-block;
					border-left:2px solid #00800047;
					
				}
				.zip-name
				{
					font-weight: 600;
					color: #277be9;
					margin-left: 10px;
					font-size: 15px;
					margin-bottom: 5px;
					cursor: pointer;
				}
				.zip-date
				{
					margin-left: 10px;
					color: #606469d9;
				}
				.download-row
				{
					display:flex;
					background:#a8e6b847;
					margin-top:10px;
					margin-left:10px;
					margin-right:10px;
					border: 1px solid #48939b38;
					border-radius:3px;
					box-shadow: 0 4px 8px 0 #0000005c, 0 6px 10px 0 #59615b5c;
				}
				.chart_download_button
				{
					background: #ffffff8c;
					border: 2px solid #48939b;
					border-radius: 8px;
					color: #48939b;
					font-weight: 600;
					height: 35px;
					padding-top: 3px;
					text-align: center;
					font-size: 16px;
					margin:10px 0px;
				}
				.download_progress
				{
					border-left: 2px solid #00800047;
					text-align: center;
					padding: 5px;
					color: green;
					width:10%;
				}
				.download_button
				{
					font-size:26px;
					padding:8px;
					cursor:pointer;
				}
				/* Failed chart rows carry a labelled Retry control, not a bare glyph.
				   .download_button is 26px because it normally holds only an icon, which
				   made the icon AND the word "Retry" render oversized. Opt out here. */
				.chart-failed-row .download_button
				{
					font-size:13px;
					padding:6px 4px;
					display:flex;
					align-items:center;
					justify-content:center;
				}
				.chart-failed-text
				{
					color:#c0392b;
				}
				.chart-retry-btn
				{
					display:inline-flex;
					align-items:center;
					gap:5px;
					border:1px solid #c0392b;
					border-radius:4px;
					background:#fff;
					color:#c0392b;
					font-size:13px;
					font-weight:600;
					line-height:1.2;
					padding:4px 10px;
					white-space:nowrap;
					cursor:pointer;
				}
				.chart-retry-btn:hover
				{
					background:#c0392b;
					color:#fff;
				}
				.chart-retry-btn .glyphicon
				{
					font-size:12px;
					top:1px;
				}
				.overlay_div
				{
					position:absolute;
					width:100%;
					height:100%;
					
					top:0px;
					left:0px;
				}
				.overlay_message_section
				{
					display:none;
				}
				.patient_download_chart_button
				{
					color: #48939b;
				    font-size: 17px;
				    cursor: pointer;
				}
				.report_button
				{
				height: 21px;
					margin-bottom: 10px;
					position: absolute;
					cursor: pointer;
					right: 8px;
					top: 8px;
					font-size: 19px;
					right: 70px;
					color: #48939b;
				}
				.searchbar
				{
					margin-top: 4px;
					border: 1px solid #48939b;
					font-size: 12pt;
					margin-left: 25px;
					font-weight: 100;
					border-radius: 25px;
					height: 30px;
					width: 70%;
					outline: 1px solid #48939b;
					padding-left: 16px;
				}
				.trans-searchbar
				{
					border-radius: 15px;
					color: black;
					border: 1px solid #48939b;
					font-size: 12pt;
					font-weight: 100;
					height: 30px;
					width: 175px;
					outline: 1px solid #48939b;
					padding-left: 16px;
				}
				datalist {
					max-height: 500px;
					overflow-y: auto;
				}

				/* Left column - Full width initially */
				.left-col {
					width: 100%;
					transition: width 0.5s ease-in-out;
				}
		
				/* Right column - Initially hidden */
				.right-col {
					width: 0;
					opacity: 0;
					overflow: auto;
					transition: all 0.5s ease-in-out;
				}
		
				/* Show right column */
				.right-col.show {
					width: 50%;
					opacity: 1;
				}
		
				/* Reduce left column when right column is shown */
				.left-col.shrink {
					width: 50%;
				}
		
				.custom-dropdown {
			  position: relative;
			  display: inline-block;
		  }
		  .dropdown-btn {
			border-radius: 15px;
			color: black;
			  width: 135px;
			  height: 30px;
			  background: white;
			  border: 1px solid #ccc;
			  padding: 10px;
			  cursor: pointer;
			  text-align: left;
			  display: flex;
			  align-items: center;
		  }
		  .dropdown-btn img {
			  width: 16px;
			  height: 16px;
			  margin-right: 8px;
		  }
		  .dropdown-list {
			color: black;
			  display: none;
			  position: absolute;
			  width: 100%;
			  background: white;
			  border: 1px solid #ccc;
			  list-style: none;
			  padding: 0;
			  margin: 0;
			  z-index: 10;
		  }
		  .dropdown-list li {
			  padding: 10px;
			  cursor: pointer;
			  display: flex;
			  align-items: center;
		  }
		  .dropdown-list li img {
			  width: 16px;
			  height: 16px;
			  margin-right: 8px;
		  }
		  .dropdown-list li:hover {
			  background: #f0f0f0;
		  }
		
		  .tooltip-box {
			display: none;
			position: absolute;
			background: rgba(0, 0, 0, 0.8);
			color: #fff;
			padding: 8px 12px;
			border-radius: 5px;
			font-size: 12px;
			white-space: nowrap;
			z-index: 9999;
			box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
		  }
		
		  /* Status color box */
		  .color-box {
			width: 15px;
			height: 15px;
			display: inline-block;
			border-radius: 3px;
		  }
		
		  #audioPlayerContainer {
					position: fixed;
					bottom: 20px;
					right: 20px;
					background: #fff;
					padding: 10px;
					border-radius: 8px;
					box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
					display: none;
					align-items: center;
					gap: 10px;
					z-index: 1000;
				}
		
				#audioPlayerContainer button {
					border: none;
					background: none;
					font-size: 18px;
					cursor: pointer;
				}
		
				#audioSeek {
					width: 100px;
				}

				.dropdown-menu {
					color: #000;
					position: absolute;
					top: 100%;
					left: 0;
					width: 100%;
					background: white;
					border-radius: 12px;
					box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
					overflow: hidden;
					display: none;
					opacity: 0;
					transform: translateY(10px);
					transition: opacity 0.3s ease, transform 0.3s ease;
					z-index: 10;
				}
				.dropdown-item {
					cursor: pointer;
				}
				
				.dropdown-menu.show  {
					display: block;
					opacity: 1;
					transform: translateY(0);
				}
		
				/* Dropdown Items */
				.dropdown-item {
					padding: 10px 15px;
					cursor: pointer;
					transition: background 0.2s ease-in-out;
				}
		
				.dropdown-item:hover {
					background: #f1f1f1;
				}

				.audio_actions
				{
					font-size: 20px;
					color: #48939b
				}
				.author_filter
				{
					font-weight: 600;
				}
				#audioPopupOverlay {
					position: fixed;
					top: 0; left: 0;
					width: 100%; height: 100%;
					background: rgba(0, 0, 0, 0.85);
					z-index: 9999;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
				  }
				  
				  #customAudioPlayer {
					width: 80%;
					max-width: 800px;
				  }
				  
				  #closeAudioBtn {
					position: absolute;
					top: 20px;
					right: 30px;
					font-size: 24px;
					color: #fff;
					cursor: pointer;
				  }