/* FILE:  /styles/dialog_type1.css 

	(Originally taken from AI response as a starting point)
*/
/*<style>*/

dialog {
  padding: 10px;
  /* border: 1px solid #ccc; */
  border: solid 3px #26354A;  /* #26354A is dark color of the navbar and banner */
  border-radius: 8px;
  background-color: #E4EAF0;    /* #E4EAF0 is bkgd color for boxes in resources_student_blm.php */
  width: 80%; /* Adjust width as needed */
  max-width: 900px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Prevents animation issues when opened/closed */
  display: block; 
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

dialog[open] {
  opacity: 1;
  transform: scale(1);
}
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  backdrop-filter: blur(4px); /* Optional: add a blur effect */
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

dialog[open]::backdrop {
  opacity: 1;
}

#close-dialog-x {   /* "X" in the upper right corner */
	font: 20px Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: gray;
	/*background-color: lightblue;*/
	float: right;
	cursor: pointer;
	border: 0px solid green; /* set 1px for debugging */
	width :20px; 
	text-align: center; 
	vertical-align: top; 
	padding: 6px 6px;
	/*margin: -10px -10px 0px 0px;	/* this counters the 10px padding of the main div in the dialog*/
}
#close-dialog-x:hover {
	background-color: lightblue;
}

#close-dialog-button {   /* "Close" button at the bottom */
	background-color: #0060EE;  /* same blue as on my PDF display pages */
	border: none;
	color: white;
	padding: 5px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	margin: 0 auto;
	cursor: pointer;
	border-radius: 8px; /* Rounded corners */
}

/* You can also style hover and active states using the ID selector */
#close-dialog-button:hover {
	/*background-color: #45a049; /* Darker green on hover */
	background-color: lightblue;
	color: blue;
}

#open-dialog-button {
	background-color: #0060EE;  /* same blue as on my PDF display pages */
	border: 2px solid black;
	color: white;
	padding: 5px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	border-radius: 8px; /* Rounded corners */
}
#open-dialog-button:hover {
	background-color: lightblue;
	color: black;
}

#notfound-div {
	display: flex;
	border: 2px solid black; 
	background-color: lightyellow; 
	width:400px; 
	height:100px;
	margin: 10px auto; 
	padding: 0px 0px;
	align-items: center;
	justify-content: center;
}

.yt-dialog-main-div {
	border: 1px solid red;
	padding: 10px 0px 0px 10px;
}
.yt-dialog-close-div {
	text-align: center; 
	border: 1px solid green; 
	width:400px; 
	margin:5px auto 0px auto;
}

.show-code {
	font-size:85%;
	border: 1px solid yellow;
	background-color: lightyellow;  /*  */
	/*padding: 10px 0px 0px 10px;*/
}

.my-test-button {
	background-color: green;  /* same blue as on my PDF display pages */
	border: 2px solid black;
	color: white;
	padding: 5px 20px;
	text-align: center;
	text-decoration: none;
	/*display: inline-block; /*   */
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	border-radius: 8px; /* Rounded corners */
}
.my-test-button:hover {
	background-color: palegreen;
	color: black;
}


/*</style>*/