@charset "utf-8";
.button-row {
	display: flex;
	justify-content: space-around; /* Adjust spacing as needed */
}
.button-link {
	color: #2d69b6;
	font-size: large;
	background-color: transparent;
	border: 2px #2d69b6 inset 3px;
	border-radius: 16px;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	-webkit-border-fit: lines;
	-webkit-box-shadow: 0 4px 3px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 0 2px #2d69b6;
	margin: 30px 50px 0px 50px;
	width: 150px;
	height: 150px;
}
.button-link:active {
	background-color: #ffbf00;
}
.button-link:focus {
	outline-color: transparent;
	outline-style: solid;
	box-shadow: 0 0 0 2px #07338b;
	transition: 0.7s;
}
.button-link:hover {
	color: #ffffff;
	background-color: #2d69b6;
}
#myVideo {
	display: none;
}
#myBlist {
	display: block;
}
#closeVideoButton {
	display: none;
	padding-top: 10px;
	text-align:center;
 	
}
#iframeVideo {
    display: none;
}	

.video-aspect {
	position: relative; 
	overflow: hidden; 
	aspect-ratio: 960/540;
}

.video-player {
	position: relative; 
	width: 50%; 
	height: 50%; 
	top: 0; 
	left: 25%; 
	border: 2px solid #CCC;
	padding: 0; 
	margin: 0 auto; 
	overflow:hidden;
}

.button-row {
  margin-bottom: 20px;
}

.button-row button {
  margin: 5px;
  padding: 10px 15px;
  cursor: pointer;
}

#menu {
  border: 1px solid #ccc;
  padding: 10px;
  width: 250px;
}

#menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#menu li {
  padding: 6px;
  border-bottom: 1px solid #eee;
}
:root {
  --primary: #2563eb;
  --bg: #f8fafc;
  --text: #1e293b;
  --white: #ffffff;
}

.video-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 900px;
  margin: 2rem auto;
  font-family: sans-serif;
}

/* Video Player Styling */
#main-video {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Accordion Styling */
.accordion-container {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

details {
  border-bottom: 1px solid #e2e8f0;
}

details:last-child { border-bottom: none; }

summary {
  padding: 1rem;
  background: var(--white);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  list-style: none; /* Hide default arrow */
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s;
}

summary:hover { background: #f1f5f9; }

/* Custom Arrow using ::after */
summary::after {
  content: '▶';
  font-size: 0.8rem;
  transition: transform 0.3s;
}

details[open] summary::after {
  transform: rotate(90deg);
}

/* Playlist Button Styles */
.content {
  padding: 10px;
  background: #f8fafc;
}

.vid-link {
  width: 100%;
  text-align: left;
  padding: 12px 15px;
  margin-bottom: 5px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
}

.vid-link:hover {
  background: #e2e8f0;
}

.vid-link.active {
  background: var(--primary);
  color: white;
  font-weight: bold;
}


 @media only screen and (max-width: 768px) {
.row-relative {
	position: relative;
}
.row-relative > div {
	position: static;
}
.row-relative .btn-bottom {
	position: absolute;
	bottom: 0;
}
.button-row {
	border: 2px #2d69b6 inset 3px;
	border-radius: 16px;
}
.video-aspect {
	aspect-ratio: 1280/720;
}
.video-player {
	border: 2px solid #CCC;
	left: 5px; 	
	width: 75%; 
	height: 75%; 
}

#myVideo {
	width: 560px;
}
#iframeVideo {
	width: 560px;
}			

}
/* CSS Document */