body {
    font-family: RobotoCondensed-Regular, sans-serif;
    font-size: 12px;
    line-height: 1.6;
    color: #333;
    background-color: #f8f8f8;
    padding: 40;
    background-image: url('/pics/bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

table.pageoutline {position: relative; top: 120px;}

h2 {
    font-family: RobotoCondensed-BoldItalic, sans-serif; /* Make sure this font is available to Imagick */
    font-size: 24px;
    margin-bottom: 10px;
    color: #007bff; /* Blue color for title */
}

p { margin-bottom: 15px; }

a { color:#ffffff; }

.footbar {
  font-family: 'RobotoCondensed-BoldItalic', sans-serif;
  background: #347deb;
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0px -5px 15px 2px rgba(0, 0, 0, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  font-size: 15px;
  position: fixed; /* Make it stick to the viewport */
  bottom: -15px;
  left: 0;
  z-index: 1500;
}

.headbar {
    font-family: RobotoCondensed-BoldItalic, sans-serif;
    background: rgba(52, 125, 235, 1); 
    color: #ffffff;
    align-items: center;
    justify-content: center;
    position: fixed; 
    width: 100%;
	height:100px;
    top: 0;
    left: 0; 
    box-shadow: 0px 10px 30px 5px rgba(0, 0, 0, 1);
	text-decoration: none;
}

.headbarleft{
	width:25%;
	text-align:left;
}

.headbarright{
	width:25%;
	text-align:right;
}

.headbarmiddle{
	width:50%;
	text-align:center;
	vertical-align:center;
}

.headbartitle {
    border:0;
}

.headbarbuttons {
    font-family: RobotoCondensed-BoldItalic, sans-serif;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
	text-decoration: none;
}

.headimageright{
	height:50px;
	width: auto;
}


.headimageleft{
	height:50px;
	width: auto;
}

.headlogo { height:90px;}

.spacer{
	height:60px;
}



ximg {
    max-width: 100%;
    height: auto;
    display: block; /* Ensures images take full width */
    margin-bottom: 10px;
}

.card {
    max-width: 500px;
    height: auto;
    display: block; /* Ensures images take full width */
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
    border-radius: 15px;
    background-color: rgba(55,55,99, 0.8);
}

.cardbutton {
    height: 50px;
    width: auto;
}

.cardbutton-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 5px 0; /* Optional: for some spacing around the buttons */
}

.cardbottombar {
	border:1px solid #dddddd;background:#aa0000;text-align:center; font-weight:700;font-style: italic;font-size:12px;color:#dddd00;
}

input[type="checkbox"] {
  width: 20px; 
  height: 20px; 
}

.log {
	background-color: rgba(55,55,55, 0.8);
	border:1px solid black;
}

th {
	background-color: #000000;
	color: #dddddd;
	font-size: 16px;
}
td {
	color: #dddddd;
	font-size: 16px;
}


table.msg0 {
	border: 1px solid black;
}
th.msg0 {
	background-color: #000000;
	color: #dddddd;
	font-size: 20px;
}
td.msg0 {
	background-color: rgba(99, 99, 255, 0.8);
	color: #000000;
	font-size: 16px;
}

.msg1 {
    font-size:14px;
}

table.msg1 {
	border: 1px solid red;
}
th.msg1 {
	background-color: red;
	color: #ffff00;
	font-size: 14px;
	font-weight:700;
}
td.msg1 {
	background-color: rgba(255, 255, 0, 0.8);
	color: red;
	font-size: 14px;
}

.fullwidthsubmit { width:100%; height: 30px;  font-weight:700; font-size:12px;}

.loading { background: rgba(52, 125, 235, 0.9); font-size: 36px; color: #000000; border:1px solid black; padding:30px;}

.LoadingGIF {width:150px; border:0px;}

.ShowStat {transition: opacity 0.5s ease-in-out; z-index: 999; width:100% !important; background: rgba(25, 66, 140, 0.9); border-radius: 15px; border:1px solid black; margin-bottom: 10px; }

.LoadlingFrom {font-family:courier; font-size:20px; }

.button-link {
    background-color: #222299; 
    color: white;
    padding: 10px 20px; 
    border: none;
    border-radius: 5px;
    cursor: pointer; 
  }


.submitbutton {font-size:30px; }
.submitbuttonsmaller {font-size:16px; }

.ednotes {ch: 5; font-size:8px; font-family:courier; background-color:rgba(102, 175, 255, 1);}
.ednotesbigger {width: 50ch; font-size:16px; font-family:courier; background-color:rgba(102, 175, 255, 1);}
.ednotesbiggertxt {font-size:18px; font-family:courier; background-color:rgba(102, 175, 255, 1);}

.publiclog {border: 1px dashed white; padding: 2px 8px;}

.cardsleftshowing {font-size: 33px; font-family:courier; color:#ffff88;}
.cardsleftshowingborder {font-size: 33px; font-family:courier; color:#ffff88; border:1px solid #ffff88; padding: 5px; border-radius: 10px;}


.cardurl {font-size:12px; font-family:courier; color:#ffff00; padding:5px 25px;}












/* Media query for mobile devices */
@media only screen and (max-width: 1024px), 
       (max-device-width: 1024px) and (orientation: portrait), 
       (hover: none) {
body { 
font-size: 36px !important; 
}

table.pageoutline {position: relative; top: 170px;}
	
a { color:#ffffff; }

.footbar {
  min-height: 40px;
  font-size: 20px;
  position: fixed; /* Make it stick to the viewport */
  bottom: -20px;
  left: 0;
  z-index: 1500;
}

	
.a-footer{
	text-decoration: none;
}

.headbar {
    font-family: RobotoCondensed-BoldItalic, sans-serif;
    background: rgba(52, 125, 235, 0.9); 
    color: #ffffff;
    align-items: center;
    justify-content: center;
    position: fixed; 
    height:150px;
    width: 100%;
    top: 0;
    left: 0; 
    box-shadow: 0px 10px 30px 5px rgba(0, 0, 0, 1);
	text-decoration: none;

}

.headbarleft{
	width:2%;
	text-align:left;
}

.headbarright{
	width:48%;
	text-align:right;
}

.headbarmiddle{
	width:50%;
	text-align:left;
}

.headbartitle {
    font-family: RobotoCondensed-BoldItalic, sans-serif;
    color: #ffffff;
    font-size: 60px;
    font-weight: 900;
	text-decoration: none;
}

.headbarbuttons {
    font-family: RobotoCondensed-BoldItalic, sans-serif;
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
}

.headimageright{
	height:80px;
	width: auto;
}

.headimageleft{
	height:80px;
	width: auto;
}

.headlogo { height:130px;}

.spacer{
	height:200px;
}


h2 {
	font-size: 48px !important;
}

.card {
	max-width: 120% !important;
}

.cardbutton {
	height: 90px !important; 
}
	
.cardbottombar {
	border:1px solid #dddddd;background:#aa0000;text-align:center; font-weight:700; font-style: italic;font-size:33px;color:#dddd00;
}

input[type="checkbox"] {
  width: 60px; 
  height: 60px; 
}

th {
	background-color: #000000;
	color: #dddddd;
	font-size: 33px;
}
td {
	color: #dddddd;
	font-size: 33px;
}
	


table.msg0 {
	border: 3px solid black;
}
th.msg0 {
	background-color: #000000;
	color: #dddddd;
	font-size: 50px;
}
td.msg0 {
	background-color: rgba(99, 99, 255, 0.9);
	color: #000000;
	font-size: 40px;
}


table.msg1 {
	border: 3px solid red;
}
th.msg1 {
	background-color: red;
	color: #ffff00;
	font-size: 20px;
	font-weight:700;
}
td.msg1 {
	background-color: rgba(255, 255, 0, 0.9);
	color: #ff0000;
	font-size: 15px;
}

td {
	font-size: 20px;
}

.fullwidthsubmit { width:100%; height: 140px;  font-weight:700; font-size:33px;}

.loading { background: rgba(52, 125, 235, 0.9); font-size: 36px; color: #000000; border:3px solid black;}

.LoadingGIF {width:300px; border:0px;}

.ShowStat {width:80vw !important; }

.LoadlingFrom {font-family: monospace; font-size:30px; color:#bbbbbb;}

.submitbutton {font-size:50px;}
.submitbuttonsmaller {font-size:28px; }

.ednotes {font-size:8px; font-family:courier; background-color:rgba(102, 175, 255, 1);}
.ednotesbigger {width: 38ch; font-size:44px; font-family:courier; background-color:rgba(102, 175, 255, 1);}
.ednotesbiggertxt {font-size:12px; font-family:courier; background-color:rgba(102, 175, 255, 1);}

.cardsleftshowing {font-size: 70px; font-family:courier; color:#ffff88; }
.cardsleftshowingborder {font-size: 70px;  border:3px solid #ffff88;padding: 5px; border-radius: 15px;}

.cardurl {font-size:12px; font-family:courier; color:#ffff00; padding:5px 25px;}

}