@charset "utf-8";
/* CSS Document */
* {box-sizing: border-box;}

body {
	margin:25px;
	font-family: 'Roboto', sans-serif;
	font-size: 12pt;
	color: #dddddd;
	background-color: #0062B8;
}

* {
  box-sizing: border-box;
}

.left {
  width: 820px;
  float: left;
  padding: 10px;
}

.right {
  width: 800px;
  float: left;
  padding: 10px;
}

table {
  font-family: 'Roboto', sans-serif;
  border-collapse: collapse;
  width: 800px;
}

td, th {
  border: 1px solid #ddd;
  padding: 8px;
  color: #191919;
  text-align: center;
}

tr {background-color: #f2f2f2;}

tr:hover {background-color: #ddd;}

th {
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: #272727;
  color: white;
}

.header {
  overflow: hidden;
  background-color: #002E5D;
  color: #eee;
  max-width: 830px;
  padding: 8px 14px;font-family: 'Roboto', sans-serif;
  font-size: 28pt;
}

.grad1 {
    background: #002E5D;
}

.defimg {
	max-width: 800px;
	height: auto;
}
div.polaroid {
  max-width: 800px;
  color: #333333;
  background-color: white;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

div.container {
  text-align: left;
  padding: 8px 8px 8px 8px;
	max-width: 800px;
}

#paceVideo {
  width: 720px;
  max-width: 100%;
  height: auto;
}

.video-controls {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 5px;
}

video::-webkit-media-controls {
  display: none !important;
}

#paceDropdown {
  background-color: #444444;
  color: white;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #272727;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  margin: 10px 0;
}

#paceDropdown:hover {
  background-color: #333333;
}

#paceDropdown:focus {
  border-color: #0062B8;
  box-shadow: 0 0 5px rgba(0, 98, 184, 0.5);
}

#paceDropdown option {
  background-color: #444444;
  color: white;
}

video::-webkit-media-controls-panel {
  background-color: rgba(0, 0, 0, 0.0); /* Adjusts the shading */
}

video::-webkit-media-controls {
  background-color: transparent; /* Makes the controls transparent */
}

video::-webkit-media-controls-enclosure {
  background-color: transparent; /* Removes any enclosure background */
}

/* General styling for the video controls */
.frame-controls {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  justify-content: center; /* Centers the buttons */
}

/* Styling for the control buttons */
.frame-controls button {
  background-color: #004080; /* Primary color for buttons */
  color: #ffffff; /* White text for contrast */
  border: none; /* Remove default border */
  padding: 12px 18px; /* Add padding for a better button feel */
  border-radius: 6px; /* Slightly rounded corners for a modern look */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transition effects */
  font-size: 16px; /* Slightly larger font size for readability */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
}

/* Hover effect for buttons */
.frame-controls button:hover {
  background-color: #0059b3; /* Brighter blue on hover */
  transform: translateY(-3px); /* Lift effect on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
}

/* Active button effect */
.frame-controls button:active {
  transform: translateY(1px); /* Slightly depress the button on click */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow on click */
}

/* Additional styling for icons (if used) */
.frame-controls button i {
  margin-right: 6px; /* Adds spacing if using icons inside buttons */
}

canvas {
	width: 100%;
	height: auto;
	max-width: 800px;
	margin: 15px;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

/* Style The Dropdown Button */
.dropbtn {
    background-color: #444444;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f2f2f2;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 8px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f2f2f2}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #333333;
}

/* Make main content area responsive and clean */
.main-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  gap: 20px; /* adds space between left and right */
  margin: 0;
  max-width: 1700px; /* wide enough for both sections */
}

.left-section, .right-section {
  flex: 0 1 800px;
  max-width: 800px;
  padding: 10px;
}


#txtExplanation {
  max-width: 800px;
  width: 800px;
  margin: 0 auto;
}

#userDropdown {
    background-color: #444444;
    color: white;
    padding: 12px 16px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    appearance: none; /* Removes native styling on most browsers */
    -webkit-appearance: none;
    -moz-appearance: none;
    max-width: 400px;
}

#userDropdown:hover {
    background-color: #333333;
}

#userDropdown:focus {
    outline: none;
    border: 1px solid #0062B8;
    box-shadow: 0 0 5px rgba(0, 98, 184, 0.5);
}

#userDropdown option {
    background-color: #444444;
    color: white;
}


/* Stack explanation below graph on small screens */
@media (max-width: 1000px) {
  .main-section {
    flex-direction: column;
  }
}