@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

*, *:before, *:after {
box-sizing: border-box;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;  /* Ensure padding and borders do not increase element sizes */
}

/* Styles for portrait orientation */
@media (orientation: portrait) {
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: white;
font-family: Arial, sans-serif;
text-align: left;
}
}

/* Styles for landscape orientation */
@media (orientation: landscape) {
body {
width: 100%;
height: 100%;
overflow-y: auto;
background-color: white;
margin: 0;
font-family: Arial, sans-serif;
text-align: center;

}
}



ol p {
margin: 0;       /* Removes vertical margins */
padding: 0;      /* Removes padding */
text-align: left;
border: 0px solid #4CAF50;
padding: 2.5px;
}

.banner {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #36454F;
color: white;
padding: 15px;
font-size: 9px;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
} 

h2 {
position: absolute;
top: 0;
right: 42px;
font-size: 6px;
color: white;
}

/* Base style for #streamVideo */
#streamVideo {
display: none;
width: fit-content;
max-width: 100%;   /* Allows it to scale up to the container's width */
height: fit-content;      /* Auto ensures it maintains its aspect ratio */
margin: 10px auto 0 auto; /* Top margin 10px and bottom margin 0 */
object-fit: contain; /* Ensures that the video maintains its aspect ratio */
}

/* Styles for portrait orientation */
@media (orientation: portrait) {
#streamVideo {
max-width: 100%;   /* Adjusts the width for portrait mode */
width: 100%;
height: auto;
object-fit: contain;
margin: 10px auto 0 auto; /* Top margin 10px and bottom margin 0 */

}
}

/* Styles for landscape orientation */
@media (orientation: landscape) {
#streamVideo {
max-width: 100%;  /* Adjusts the width for landscape mode */
width: 100%;
height: auto;
object-fit: contain;
margin: 10px auto 0 auto; /* Top margin 10px and bottom margin 0 */

}
}

/* Added styles for radio buttons */
.radio-buttons {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 10px;
}
.radio-button {
margin-right: 6px;
margin-bottom: 1px;
}
.radio-button input[type="radio"] {
display: none;
}
.radio-button label {
background-color: #008CBA;
color: white;
padding: 4px 8px;
border-radius: 4px;
cursor: pointer;
font-size: 0.7em; /* decreased font size */
}
.radio-button input[type="radio"]:checked + label {
background-color: lightgray;
}
.button.disabled {
background-color: lightgray;
cursor: not-allowed;
}
/* New styles for placing footer at the bottom */

.container {
min-height: 100%;
display: flex;
flex-direction: column;
}

.grayed-out {
opacity: 0.5;
pointer-events: none;
}
.small-font {
font-size: 12px;
}

.centered {
text-align: center;
margin-top: 12px; /* Adjust the margin-top value as needed */
}

.yellow-background {
background-color: yellow;
}

/* Added styles for the new banner */
.redish-pink-banner {
background-color: #f44336;
color: #ffffff;
padding: 10px;
text-align: center;
font-size: 16px;
}

/* Style the dropdown container */
.dropdown {
display: block;  /* makes the span a block-level element */
top: 50%;
left: 48%;
transform: translateY(-50%, -50%);
margin-top: -10px;
}

/* Style the dropdown button */
.dropbtn {
background-color: #36454F;
color: white;
padding: 4px;
font-size: 12px;
border: none;
cursor: pointer;
border-radius: 5px;
}

/* Style the dropdown content */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 5px;
/* Adjust the left property to open the menu on the left side */
left: 50%;
transform: translateX(-50%); /* Center it with respect to the main button */
top: 100%; /* Align it right below the main button */
}

/* Style the dropdown links */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 12px; /* Here's the updated font size */
font-weight: bold;  /* Add this line */
}

/* Style the dropdown links on hover */
.dropdown-content a:hover {
background-color: #f1f1f1;
}

.save-changes-container {
border-bottom: 2px solid #ccc; /* This creates the dividing line */
padding-bottom: 1rem; /* This adds some space between the button and the dividing line */
margin-bottom: 1rem; /* This adds some space between the dividing line and the next section */
}

footer {
width: 100%;
text-align: center;
font-size: small;
padding: 1rem 0;
background-color: #36454F;
color: #fbffa1;
position: fixed;
bottom: 0;
padding: 0.5ch;
z-index: 2; /* Ensure the footer stays on top */
}

footer a {
color: #fbffa1;
text-decoration: none; /* Optional: to remove the underline */
}

footer a:hover {
color: #fbffa1; /* Optional: different color for hover effect, you can choose your own color */
}

.number-badge {
background-color: yellow; /* Yellow background */
border-radius: 50%;      /* Makes it circular */
display: inline-block;   /* Allows you to add padding */
width: 30px;             /* Set width for the circle */
height: 30px;            /* Set height for the circle */
text-align: center;      /* Center the number horizontally */
line-height: 30px;       /* Center the number vertically */
font-weight: bold;       /* Makes the number bold */
font-size: 20px;         /* Adjust as per your preference */
}