body{font-size:24pt;
font-family: "Trebuchet MS", "Times New Roman", Times, serif;
}
h2{font-size:1.3em;font-weight:bold;}

/* 768px  */
@media only screen and (max-width: 768px) {
  body {
    -webkit-text-size-adjust: none;
    font-size: 32pt;
  }
}

/* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: #393939;
  position: relative;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 1.5em;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: #393939;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: white;
  color: #393939;
}

/* Style the active link (or home/logo) */
.active {
  background-color: white;
  color: white;
}

.navhr{
  position:relative;
                width: 100%;
                background-color: #393939;
                -webkit-box-shadow:0 0 20px #403B4A;
                -moz-box-shadow: 0 0 20px #403B4A;
                box-shadow:0 0 20px #403B4A;
                border-radius: 2px;
}

/* GENERAL STYLE */


.span{font-size:18pt;}

input[type="text"] {
  width:100%;
  margin-bottom:5px;
  font-size: 24pt; /* Adjust the font size to your preference */
}
.searchbox{
  border: 2px solid #ccc;        /* Border color and width */
  border-radius: 50px;           /* Rounded corners */
  padding: 10px;                /* Padding inside the textbox */
  font-size: 16px;              /* Font size */
  width: 80%;                 /* Width of the textbox */
  height: 5%;                 /* Width of the textbox */
  outline: none;                /* Remove the default focus outline */
  margin: 10px;
}

.logininput{
  width:100%;
}

.lrb{
 margin-left:5px;
 margin-right:5px;
}

.img-head{
  max-width:60%;
  position: relative;
}
.img-scale{
  max-width:80%;
  position: relative;
  top:50%;
  transform: translateY(-30%);
  height:auto;
  margin:auto;
  cursor:pointer;
}
.fstreems{
  display: block;
 text-align:center;
  align-items: top; /* Vertically centers the content */
  justify-content: center; /* Horizontally centers the content (optional) */
  vertical-align:top;

}
.fstreems2{
  display: block;
  align-items: top; /* Vertically centers the content */
  justify-content: left; /* Horizontally centers the content (optional) */
	text-align:left;
  }
.qssub{
 text-align:center;
  display: flex;
  align-items: center; /* Vertically centers the content */
  justify-content: center; /* Horizontally centers the content (optional) */
  vertical-align:middle;

}
.spacer{
 height:100px;
 width:100%;
}
.hr1{
 height:7%;
  border: none; /* Remove the default border */
  border-top: 4px solid #000; /* Set the thickness and color of the horizontal rule */
  width:85%;
  transform: translateY(-5%);
}
.hr2{
 height:5%;
  font-size:1.3em;
  font-weight:bold;
  border: none; /* Remove the default border */
  border-top: 1px solid #D3D3D3; /* Set the thickness and color of the horizontal rule */
  width:70%;
  transform: translateY(-5%);
}
.iTitle{
 position: relative;
 font-family: "Trebuchet MS", "Times New Roman", Times, serif;
 top:-40px;
 margin-top:20px;
 margin-left:5%;
 padding-left:25px;
 color:white;
 font-size:1.3em;;
 font-weight:bold;
 background: #393939;
 border-radius:10px;
}

.featurebox{
 border:solid;
 border-radius:5px;
 width: 200px; /* Set the width of the div */
  height: 100px; /* Set the height of the div */
  background-color: #f0f0f0; /* Set the background color of the div */
  box-shadow: 5px 5px 10px #888888; /* Set the shadow properties */

} 
.button{
  background-color:#407333;
  width:100%;
 padding:5px 15px;
 font-family: "Trebuchet MS", "Times New Roman", Times, serif;
  color:white;
  font-size:1.3em;
  border:solid;
  border-color:white;
  border-radius:10px;
  cursor:pointer;
}
.error{
   color:red;
   font-weight:bold;
}
 
.box-border{
  border-style:solid;
  border-width:2px;
  border-color:#d3d3d3;
}
.ddbox{
  width:100%;
  height:100px;
  font-size:1.3em;
   font-family: "Trebuchet MS", "Times New Roman", Times, serif;
  color:white;
  font-weight:bold;
  border-style:solid;
  background-color:#407333;
}
.ddbox2{
  width:100%;
  height:80px;
  font-size:1.1em;
   font-family: "Trebuchet MS", "Times New Roman", Times, serif;
  color:black;
  font-weight:bold;
  border-style:solid;
  background-color:white;
}
.ddbox3{
  width:100%;
  height:70px;
  font-size:1.0em;
   font-family: "Trebuchet MS", "Times New Roman", Times, serif;
  color:black;
  font-weight:bold;
  border-style:solid;
  background-color:white;
}

input[type="checkbox"]{
  width:25px;
  height:25px;
}
input[type="radio"]{
  width:40px;
  height:40px;
}
.radio{
  display:inline-block;
  align-items:center;
  font-size:1.1em;
  font-family: "Trebuchet MS", "Times New Roman", Times, serif;
  gap:5px;
  
}

.footer{
  background-color:#393939;
  color:white;
  min-height: 20px;
  font-weight:bold;
  text-align:center;
  padding:30px 10px 100px 10px;
  margin:300px 10px 0px 10px;
}
.adminnav{
	color:#166d79;
	cursor:pointer;
}
.kpibox{
	margin:0px 30px;
	border-style:solid;
	border-size:3px;
	border-color:charcoal;
	text-align:center;
	border-radius:10px;
	 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	  text-align: center;
}
.repval{
	color:#407333;
	text-align:center;
}

.video-frame {
    background-color: white;
    border: 4px solid #ddd;
               /* Frame border */
    border-radius: 16px;
                  /* Rounded corners */
    padding: 16px;
                        /* Space inside frame */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
 /* Soft shadow */
    max-width: 850px;
    width: 90%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-frame:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.video-frame video {
    width: 100%;
    border-radius: 12px;
 /* Optional: softens video edges inside the frame */
    display: block;
}

.curved-shadow {
    background-color: lightyellow;
    border-radius: 20px;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
    padding: 30px;
    width: 350px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.2em;
}
.scrollmenu{
	height:500px;
	overflow-y:auto;
}
.qsvbtn {
    background-color: orange;
    margin-top: 10px;
    padding:5px 15px;
    display:inline-block;
    font-size:16pt;
    font-weight:bold;
    cursor:pointer;
}
.qsvidmgr{
	text-align:center;
	max-width:80%;
}

.fbtn {
    margin-right: 20px;
    font-size: 1.3em;
    background-color: black;
    color: white;
    text-align: center;
    padding: 5px 10px;
}
.liclick{cursor:pointer}

.btnformat{background-color:grey;padding:5px 10px;display:inline-block; margin-left:10px;text-align:center;cursor:pointer;color:white;width:150px;border-radius:5px;}

.gofsbtn{background-color:grey;padding:5px 10px;display:inline-block; margin-left:10px;font-size:14px;text-align:center;cursor:pointer;color:white;width:150px;border-radius:5px;}