/*1 blue margin on side of paragraph*/
/*2 title2() css for popup itself*/
/*3 hover*/
/*4 author and date box*/
/*5 Table footnote*/
/*6 Penn blue box and rainbow*/
/*7 Click to hide */
/*8 Table who / what on edit project*/
/*9 Study otions Popup
/*11 Flashing arrow*/		
/*12 Button Alert2*/
/*13 Questions What*/
/*14 Make public*/
/*15 save or cancel button		
/*17 DESCRIPTION OF WHO_TABLE HEADERS
/*18 SUP format by hand for table 1 so that 2<sup>p</sub> shows correctly
/*20 Table Headers */
/*21 Author numbers WHAT table*/
/*22 Invalid date*/			
/*23 Butttons for snapshot*/
/*24 Note to tables */	
/*25 Table Header*/	
/*26 jusitifed */	
/*27 ol_authors*/	
/*29  clear border if answer is provided*/	
/*30 Editable datasource */	
/*31 Black button*/
/*32 Type of study laberls in edit_sourse
/*33  Button
/*34 Hidden study and data ids in render_project 
/*35 span_aside : in gray next to text
*/
 
/******************************************/

html {font-size:14px!important}


	/*1 blue margin on side of paragraph*/

			.paragraph-box {
			  border-left: 4px solid #007BFF; /* Blue margin line */
			  background-color: #f9f9f9;      /* Subtle off-white background */
			  padding: 1em;
			  margin: 1em 0;
			}

		.paragraph-box:hover {  
		box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.1);
		}

	/*2 title2() css for popup itself*/

		.div_title2_popup {
		  position: absolute;
		  background: #333;
		  color: #fff;
		  padding: 3px 6px;
		  border-radius: 5px;
		  font-size: .8rem;
		  z-index: 9999;
		  white-space: normal;
		  max-width: 300px;
		  word-wrap: break-word;
		  pointer-events: none;
		  opacity: 0;
		  transition: opacity 0.15s ease;
		}
		
		



	

	/*4author and date box*/


		.author_box {
			font-size:1.2rem

		}

		.dates_box {
			font-size:1.2rem
		}
		
		
	/*5 Table footnote*/

		.table_note{
			font-size:.75rem;
			border-radius:10px;
			margin-top:0;
			margin-left:0px;
			padding-left:20px;
			color:#0011F5B;
			background:#eeedea;
		}


	/*5 Table links*/

		.table_link {
			color:black!important;
			text-decoration:none!important;

		}
		.table_link:hover {
			color:#026cb5!important;
			cursor:pointer;
			text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

		}

	/*6 Penn blue  and red box*/
	
		
		.penn_blue_box {
			background: #011F5B;
			background: linear-gradient(90deg,rgba(1, 31, 91, 1) 0%, rgba(40, 47, 133, 1) 54%, rgba(1, 31, 91, 1) 100%);
			color: #f9f9f9;
			font-weight: bold;
			padding-top:5px;
			padding-bottom:5px;
			padding-left:10px;
			color:white!important;
			margin-bottom:10px;
			text-shadow: 1px 1px 2px rgba(0,0,0,0.4); 
			
		}
		
		
		.penn_red_box {
			background: #990000;
			background: linear-gradient(90deg, rgba(153, 0, 0, 1) 0%, rgba(204, 0, 0, 1) 54%, rgba(153, 0, 0, 1) 100%);
			color: #f9f9f9;
			font-weight: bold;
			padding-top: 5px;
			padding-bottom: 5px;
			padding-left: 10px;
			color: white !important;
			margin-bottom: 10px;
			text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
		}
		
	
	
.box_index_page {
    color: white !important;
    background-clip: padding-box;
    background: linear-gradient(90deg, rgba(1, 31, 91, 1) 0%, rgba(40, 47, 133, 1) 54%, rgba(1, 31, 91, 1) 100%);
    border: 10px solid transparent;
    text-align: justify;
    background-color: #011F5B !important;
    border-radius: 15px;
    font-size: medium;
    height: 100%;                /* 🔑 ensures full height within stretched column */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-right: 12px;  
    padding-left:12px;	/* Optional: for breathing room */
}
	
	
		
	/*Lins inside blue box*/	
	.blue_box_link {
		  font-family: 'Inter', sans-serif;
		  font-size: 14px;
		  color: #00cc00;
		  text-decoration: none;
		  word-break: break-all;
		}

	.blue_box_link:hover {
		  color: #80ff80;
		  text-decoration: none;
		}

			

/*7 Click to hide */

	.click_to_hide {
		  cursor: pointer;
		  padding: 8px;
		  position: relative;

		  margin: 5px 0;
		  border-left: 4px solid #007BFF; /* Blue border on the left */
		  padding-left: 12px; /* Add space between border and text */
		  transition: box-shadow 0.3s ease;
		  display:none;
		}

		.link_to_hide {
		  position: absolute;
		  top: 0px;
		  right: 10px;
		  cursor: pointer;
		  font-weight: bold;
		  color: #a00;
		  font-size:.85rem;
		}


		.click_to_hide:hover {
		  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
		}

		.click_to_show {
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  min-height: 0px; /* optional: ensures a visible area even if empty */
			  padding: 10px 0;
			  width:100%;
			    text-align: center;

			}
			
			.click_to_show button {
				  margin:0px;
				}


			
			.click_to_hide:hover {
			  animation: shake 0.4s ease;
			}




/*7 Comment font (small blue text) */
	.font_comment {
		font-size:.8rem;
		color:#026cb5;
		margin-left:5px;
		font-weight:400!important;
		}
		


/*8 Table who / what on edit project*/

	/*Table borders*/

		.table_who_what {
			border: 0; /* Remove default border */
			  border-collapse: separate;
			  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
			}
				
		.table_who_what td, .table_who_what th {
			 border: 1px solid #ddd; /* Light cell borders */
			}

		.table_who_what th {
		  background-color: #f9f9f9;
		  font-weight: bold;
		}


     /*Table what and who */
		.span_editable_datasource
			{
				margin-left:12px;
				margin-top:1px;
			}
			
		.span_noneditable_datasource
			{
				margin-left:12px;
				margin-top:1px;
			}

		.who_cell{
			vertical-align:middle;
		}
			
			


/*9 Study otions Popup */
		.study-options-popup {
			background-color: #d3ecff; 
			border: 1px solid #06aafc; /* matching border */
			padding: 5px;
			box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
			font-size: 0.85rem;
			position: absolute;
			z-index: 1000;
			display: flex;
			flex-direction: column; /* Add this line */
			gap: 6px;
			gap: 6px;
			width: auto; /* let it grow based on content */
			white-space: nowrap;
			}

		.study-options-popup div {
			padding: 6px 8px;
			background: #d3ecff;
			cursor: pointer;
			border: 1px solid transparent;
			border-radius: 4px;
			}

		.study-options-popup div:hover {
			background-color: #bde2ff;
			border-color: #ddd;
			}




		.btn_edit_project{
			width:100px;
			text-align: center;
			display: inline-block;
			}
		
		button.btn_edit_project{
			text-align: center;
			padding-left: 0;
			padding-right: 0;
			}
						
		
		
/*11 Flashing arrow   */		
	@keyframes flashArrow {
		  50%, 100% { opacity: 1; transform: translateX(0); }
		  50% { opacity: .8; transform: translateX(+35px); }
		}
	.flash_arrow {
		  animation: flashArrow 1.5s infinite;
		}
		
		
/*12 Alert2*/		
.alert2_overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	display: none;
}

.alert2_popup {
	position: fixed;
	top: 33%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: white;
	color: #333;
	padding: 20px 24px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.3);
	font-size: 14px;
	z-index: 10000;
	max-width: 420px;
	text-align: center;
	line-height: 1.4;
	display: none;
	opacity: 0;
	animation: alert2DropIn 0.3s ease-out forwards;
}

@keyframes alert2DropIn {
	0% {
		opacity: 0;
		transform: translate(-50%, -100%);
	}
	100% {
		opacity: 1;
		transform: translate(-50%, -50%);
	}
}

@keyframes vibrate {
	0%   { transform: translate(-50%, -50%); }
	25%  { transform: translate(calc(-50% - 4px), calc(-50% - 4px)); }
	50%  { transform: translate(calc(-50% + 4px), calc(-50% + 4px)); }
	75%  { transform: translate(calc(-50% - 4px), calc(-50% + 4px)); }
	100% { transform: translate(-50%, -50%); }
}

.alert2_popup.shake {
	animation: shake 0.5s ease-in-out;
}

.alert2_popup.vibrate {
	animation: vibrate 0.3s ease-in-out;
}

	
	.btn_alert2	{
		width:80px;
		}
	

	
	
	
/*13 Questions What*/

		.div_question {
			margin: 20px 0;
			padding: 15px;
			border: 1px solid #ddd;
			border-radius: 8px;
			background-color: #f0f0f0;
			position: relative;
		}

		.question_text {
			/*font-weight: bold;*/
			font-size: 1.1rem;
			margin-bottom:0px!important;
		}

		.question_comment {
			font-style: italic;
			color: #686b8b;
			font-size: 0.9rem;
			margin-left: 5px;
			margin-bottom:2px!important;
			margin-top:0px!important;

			width:90%;
		}

		textarea.answer_type_textarea {
			width: 100%;
			min-height: 80px;
			padding: 8px;
			font-size: .9rem;
			border-radius: 5px;
			border: 1px solid #ccc;
			resize: vertical;
			margin-top: 8px;
		}

		input[type="radio"],
		input[type="checkbox"] {
			margin-right: 6px;
		}

		label {
			display: inline-block;
			margin-right: 15px;
			cursor: pointer;
		}
			
			
			
/*14 Make public*/
	.make_public_description
	{
		font-size:.95rem;
		width:800px;
		padding-left:20px;
		text-align:justify;
	
	}
			
			
/*15 save or cancel button*/
	.btn_save_cancel
	{
	 width:100px;
		
	}
	
/*16 Pending Class*/
	.pending_row {
		  border-top: 2px solid #ff5555 !important;
		  border-bottom: 2px solid #ff5555 !important;
		  border-left: 2px solid #ff5555 !important;
		  border-right: 2px solid #ff5555 !important;
		  background-color: #fff5f5 !important;
		  position: relative;
		  animation: borderPulse 1.5s ease-in-out infinite;
		}
		
		/* Override the green borders for pending rows */
		.pending_row td {
		  border-top: 2px solid #ff5555 !important;
		  border-bottom: 2px solid #ff5555 !important;
		  background-color: #fff5f5 !important;
		}
		
		.pending_row td:first-child {
		  border-left: 2px solid #ff5555 !important;
		}
		
		.pending_row td:last-child {
		  border-right: 2px solid #ff5555 !important;
		  position: relative;
		}
		
		.pending_row .missing-answer-icon {
		  position: absolute;
		  right: -35px;
		  top: 50%;
		  color: #ff5555;
		  font-size: 1.3em;
		  animation: iconPulse 1.5s ease-in-out infinite;
		  z-index: 10;
		}
	
/*17 DESCRIPTION OF WHO_TABLE HEADERS
 /*Flash Border for emphasi*/
	.flash-border {
		border: 5px solid #990000 !important;
		transition: border-color 0.3s ease;
		}
			
	.pop_click {
	  display: inline-block;              /* Required for transform */
	  transform: scale(1);                /* Baseline */
	  transition: transform 0.5s ease;
	}

	.pop_click_active {
	  transform: scale(1.2);              /* Pop effect */
	}
	
	
	.clickable-term
	{
		color:#232675!important;
		
		
	}
	
	.clickable-term:hover {
		cursor: pointer!important;
	}	
	
	
	
/*18 SUP format by hand for table 1 so that 2<sup>p</sub> shows correctly*/
	.table_1_author_number sup {
		vertical-align: super;
		font-size: smaller;
	}
	
	

	
	
/* 19. Dashboard */
		.edit_project_dashboard_box {
			width:550px;
			padding-left:10px;
			padding-bottom:0px;
			margin:0 auto;
			margin-top:10px;
			margin-bottom:0px;
			border: 10px solid transparent;
			/*background-color: #b2b6a7;*/
			background-color: #ffffff;
			color:black;
			border-radius: 8px;
			text-shadow:none!important;
			font-weight:400!important;
			}
			



/* 20 Table Headers */

	/*Table What = align checkboxes*/

		#table_what td {
		  vertical-align: middle;
		  padding-top: 15px; /* Add space for author numbers */
		}

	/*Table Who = Verified black, unverified red*/

		.author_verified_0 {
			color:red;
			}



		.author_verified_1 {
			color:black;
		}
			

		
	.span_study {
		font-size:1.1rem;
		display:inline-block;
		padding-top:11px;
		padding-bottom:0px!important;

		}



		
	

	.th_green_1 {
		text-align:center;
		  font-weight: bold;

		background-color:#d0e9c6!important;
		}
		
	.th_green_2 {
		text-align:center;
		  font-weight: bold;
		  vertical-align: middle;
		background-color:#e6f3dc!important;
		}

	.th_green_3 {
		text-align:center;
		font-weight: 450; /* Slightly bolder than normal */
		background-color:#f9fdf7  !important;
		width:90px;

		}
		
	.th_green_v{
		text-align:center;
		font-weight: 450; /* Slightly bolder than normal */
		background-color:#f7fbfd  !important;
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		white-space: nowrap;
		text-align: left;
		padding: 0ppx;
		width:20px;
		vertical-align: bottom;
		

		}
				
		

		.lm { 
			border-left: 2px solid #d0e9c6;
		}
		.rm { 
		border-right: 2px solid #d0e9c6;
		}
		.rm2 { border-right: 3px solid #d0e9c6;}
			
		
		
		tr.tr_info td:first-child {
			 border: 1px solid #d0e9c6;
			  font-size:90%;
			  text-align:left!important;
		}
			  
			tr.tr_info td {
			  border: 1px solid #d0e9c6;
			  font-size:90%;
			  text-align:center!important;
			}
			
			
	

	.th_green_1, .th_green_2, .th_green_3, .th_green_v {
		height: 30px; /* Reduce the height of the cells */
		padding: 5px; /* Minimize padding */
		line-height: 1; /* Adjust line spacing */
		vertical-align: middle; /* Maintain vertical alignment */
	}



	.skipped_column {
		border: none; 
		background: white!important;
	}



/*-----*/

	
			
/*21 Author numbers WHAT table*/			
	.what_author_number {
			position: absolute; top: 0px; right: 4px; font-size: 0.7rem; color: #262460; margin-left: 3px; margin-bottom: 3px; z-index: 10; background-color: rgba(255, 255, 255, 0.9); border-radius: 2px; padding: 1px 3px;
		}

/*22 Invalid date*/			
	.invalid_date {
			border: 2px solid red;
			background-color: #ffe6e6;
		}
		
	.date_error_msg {
		  color: 990000;
		  font-size: 0.9em;
		  margin-top: 4px;
		}
				
				
	.date_blocker_msg {
		  color: 990000;
		  font-size: 0.9em;
		  margin-top: 6px;
		  display: none;
		}


/*23 Butttons for snapshot*/
	.btn_snapshot {
		width:80px;
	}
	
/*24 Note to tables */	
	.table_note {
		width:100%;
		margin-top:5px;
		padding:5px;
		}



/*25 Table Header*/	
	.table_header th {
	background-color:#d0e9c6!important;
	}
	
/*26 jusitifed */	
	.justify {
	text-align:justify!important;
	}


/*27 ol_authors*/	
	.ol_authors {
		margin-bottom:0px!important;
	}

/*28 Reminder thave changes have not been saved */	


#unsavedWarning {
    position: fixed;
    bottom: 10%;
    left: 50%;
	font-weight:600;
    transform: translate(-50%, 0);
    background: #959a9e;         /* Dark gray background */
    color: #f1f1f1;              /* Light gray-white text */
    border: 1px solid black;   /* Soft red border */
    padding: 20px;
    box-shadow: 0 0 8px #1a1a1a;
    z-index: 9999;
    text-align: center;
    cursor: grab;
    border-radius: 6px;
}




	
/*29  clear border if answer is provided*/	
	
	@keyframes borderPulse {
	  0% {
		border-width: 2px;
		box-shadow: 0 0 0 0 rgba(255, 85, 85, 0.8);
	  }
	  50% {
		border-width: 7px;
		box-shadow: 0 0 0 5px rgba(255, 85, 85, 0.3);
	  }
	  100% {
		border-width: 2px;
		box-shadow: 0 0 0 0 rgba(255, 85, 85, 0.8);
	  }
	}
	
	.border_red_pending {
	  border-style: solid !important;
	  border-color: #ff5555 !important;
	  border-width: 2px !important;
	  animation: borderPulse 1.5s ease-in-out infinite;
	  box-sizing: border-box;
	}
	
	@keyframes iconPulse {
	  0%, 100% {
		transform: translateY(-50%) scale(1);
		opacity: 1;
	  }
	  50% {
		transform: translateY(-50%) scale(1.2);
		opacity: 0.8;
	  }
	}
	
	.missing-answer-icon {
	  position: absolute;
	  right: -35px;
	  top: 50%;
	  color: #ff5555;
	  font-size: 1.3em;
	  animation: iconPulse 1.5s ease-in-out infinite;
	  z-index: 10;
	}
	
	
/*30 Editable datasource */	
	
	.span_editable_datasource
	{
		margin-left:20px
	}
	
/*31 Black button*/
	.btn_black {
    color: white;
    background-color: black;
    border-color: #130269;
}

.btn_black:hover, .btn-black:focus, .btn-black:active, .btn-black.active, .open .dropdown-toggle.btn-black {
    color: white;
    background-color: #2F3E6B;
    border-color: #130269;
}



/*32 Visual feedback when dissapearing description of who table/*/
	.return-highlight {
		background-color: #ffffcc; /* Light yellow */
		transition: background-color 0.5s ease;
	}

	.return-highlight.flash {
		background-color: #ffeb3b; /* Brighter yellow flash */
	}


	.data_type_label{
		display: block;
		margin-bottom: 0rem;
		cursor: pointer;
		font-size: 1.1rem !important;
		padding: 0.6rem;
		border-radius: 5px;
		transition: background-color 0.2s ease;
	}
	.data_type_label:hover {
		background-color: #e0f0ff; /* Light blue */
	}
	
	
	
	
/*33  Button */
a > button {
    text-decoration: none!important;
}


/*34 Hidden study and data ids in render_project */
 .span_hidden_id {
	display:none;
	margin-left:5px;
	font-size:70%;
	color:gray;
	background:#eaf0ce;
 }

/*35 aside in text*/
	.span_aside {
		color:gray;
	}


/*36 Action row  in headbar */
.wcl-action-row {
  display: flex;
  margin: 0 auto;
  max-width:1600px;
  display:flex; 
  align-items:center;
  justify-content:space-between; 
  gap:12px; 
  padding-top:7px;
  padding-bottom:7px;
  padding-left:7px;
  margin:0px auto 16px auto; 
}
.parent-element {
  text-align: center;
}

 .btn_headerbar {
	 width:120px!important;
 }

/*-------------------------OTHERS---------------------------------*/













.disabled::hover{
	cursor:not-allowed!important;
	}


.max_spread {
	display: flex; 
	justify-content: space-between; 
	align-items: center; 
	width: 100%;
}

.center_spread {
  display: flex;
  justify-content: center;
  gap: 30px; /* controls space between items */
  flex-wrap: wrap; /* optional, allows wrapping on small screens */
  text-align: center; /* optional, centers text inside items */
}

input[readonly] {
    background-color: #e9ecef;  
    color: #6c757d;             
    cursor: not-allowed;        
}

.center {
	text-align:center;
	}

 .subtle_link {
  color: #5a7ca7;         /* a desaturated blue-gray */
  text-decoration: none;
  cursor: pointer;
}

a.subtle_link {
  color: #5a7ca7;         /* a desaturated blue-gray */
  text-decoration: none;
  cursor: pointer;
}

a.subtle_link_red {
  color: #990000;         /* a desaturated blue-gray */
  text-decoration: none;
  cursor: pointer;
}


a.subtle_link:hover {
  color: #c5093b;         /* slightly darker on hover */
  decoration:Underline!importrant;
}


.btn_gray {
	background-color:#f9f9f9;
	border-radius:13px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#666666;
	font-family:Arial;
	font-size:12px;
	padding:3px 13px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
.btn_gray:hover {
	background-color:#98a0a6 ;
	 border: 1px solid #f9f9f9;
	 color:white;

}
.btn_gray:active {
	position:relative;
	top:1px;
}     


::placeholder {
  color: #A9A9AC!important; /* lighter gray */
  opacity: 1!important;  /* ensures full visibility */
}


.head1, .head2 {
  display: block;
  text-align: center;
 
}

.head1 {
  font-size:1.8rem;
   font-weight: bold;
}

.head2 {
  font-size:1.3rem;
}


.light_blue_comment {
  font-size: 0.7rem;
  color: #7ab0c0;
}

.btn-xs {
  padding: 0.2rem 0.1rem!important;
  font-size: 0.75rem!important;
  line-height: 1!important;
  vertical-align:middle!important;
  border-radius: 0.2rem!important;
}


.w900 {
  width: 900px !important;
  margin: 0 auto;
  text-align: left;

}

.w1200 {
  width: 1200px !important;
  margin: 0 auto;
  text-align: left;

}

.w1400 {
  width: 1400px !important;
  margin: 0 auto;
  text-align: left;

}

.btn_speed_dial {
	background-color:#026cb5!important;
	border-color:#004785!important;
	border-radius:17px;
	color:white!important;
	margin-top:5px!important;
	margin-right:5px;
	width:200px!important;
	}
	
.btn_speed_dial:hover {
	background-color:#06aafc!important;
	}




/* ----- */




input[type="text"] {
  autocomplete: off;
}



.btn_two_lines {
	line-height: 1.05!important;
	font-size:13px!important;
}



.btn_blue {
	background-color:#004785!important;
	border-color:#004785!important;
	color:white!important;
	font-size: 14px !important;
	}
	
.btn_blue_selected {
	background-color:#004785!important;
	border-color:#004785!important;
	color:white!important;
	pointer-events: none;

	}
	
	

	
.btn_blue:hover {
	background-color:#06aafc!important;
	}

.btn_red {
	background-color:#a90533!important;
	border-color:#a90533!important;
	color:white!important;
	}

.btn_red:hover {
	background-color: #ff6666!important;
	}




.btn_red:hover {
	background-color: #ff6666!important;
	}



.pointer:hover {cursor:pointer}

.hover:hover {cursor:pointer}

.pencil:hover {cursor:pointer}
.name_folder:hover {cursor:pointer}




.btn_speed_dial {
	background-color:#026cb5!important;
	border-color:#004785!important;
	border-radius:17px;
	color:white!important;
	margin-top:5px;
	min-width:150px;
	}
	
.btn_speed_dial:hover {
	background-color:#06aafc!important;
	}

          
		  

.link {
	color:#3f59c5
	}
	
.link:hover{
	cursor:pointer;
	text-decoration: underline; /* Underline text on hover */
	}

	
	
.btn_topbar {
	width:100px;
	text-align:center!important;
	margin-right:5px;
	margin-top:5px;
	padding-left:2px!important;
	padding-right:2px!important;
	font-size: 14px !important;
	
	
}


.alert_light_yellow {
  background-color: #fffbe6; /* very light yellow */
  border: 1px solid #ffe58f;
  color: #664d03;
  padding: 10px 15px;
  border-radius: 4px;
  font-size: 14px;
  margin: 10px 0;
}

.page_header {
	background-color: #bed5fa;
	font-size: 1.4rem;
	font-weight: bold;
	width: 100%;
	display: block;            /* ensures it takes full width */
	text-align: center;        /* centers the text */
	padding: 10px;
	box-sizing: border-box;
}

* {
    font-family: 'Inter', sans-serif;
}


.btn_yellow{
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 4px;
  font-weight: 500;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

/* Hover */
.btn_yellow:hover {
  background-color: #ffe8a1;
  color: #7a5302;
  box-shadow: 0 0 0 2px rgba(255, 227, 150, 0.5);
}

/* Active or Selected */
.btn_yellow:active,
.btn_yellow.selected {
  background-color: #ffe8a1;
  color: #5c4001;
  border-color: #ffd57a;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}