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

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

table.pageoutline {position: relative; top: 120px; border:1px dashed #333333; padding:20px;}

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; }

.headbar {
    font-family: RobotoCondensed-BoldItalic, sans-serif;
    background: rgba(0,0,0, 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(99, 99, 99, 1);
	text-decoration: none;
}

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

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

.headbarmiddle{
	width:30%;
	text-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;
	#z-index: 99;
}

.headimage{
	height:45px;
	width: 45px;
	border:1px solid #777777;
}
.headimage:hover{border:1px solid #ffffff;}

.headlogo { height:90px;}

.spacer{
	height:60px;
}



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

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

th {
	background-color: #111111;
	color: #dddddd;
	font-size: 16px;
	text-decoration:none;
}

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

table {border-collapse: separate; border-spacing: 0; }



table.msg0 {
	border: 2px solid #555555;
	background-color: #000000;
	width:100%;
}
th.msg0 {
	background-color: #444444;
	color: #dddddd;
	font-size: 20px;
}
td.msg0 {
	background-color: rgba(11,11,11, 0.8);
	color: #dddddd;
	font-size: 16px;
}

.msg1 {
    font-size:14px;
}

table.msg1 {
	border: 1px solid red;
	width:100%;
}
th.msg1 {
	background-color: red;
	color: yellow;
	font-size: 14px;
	font-weight:700;
}
td.msg1 {
	background-color: yellow;
	color: red;
	font-size: 14px;
}

.ButtonFullWidth { width:100%; height: 30px;  font-weight:500; font-size:20px; background:#999999;}
.ButtonFullWidth:hover { background:#990000;}

.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 {
  cursor: pointer;
  padding: 5px 8px;
  border: 1px solid #666666;
  border-radius: 5px;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.3s ease;
}

.button-link:hover {
  border: 1px solid #ff0000;
}


.submitbutton {font-size:30px; }

td.topborder { border-top: 2px solid #666; padding: 14px 10px; }







/* 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; }

.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;
	#z-index: 99;
}

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

.headlogo { height:130px;}

.spacer{
	height:200px;
}


h2 {
	font-size: 48px !important; /* Double font size for headings */
}

.card {
	max-width: 120% !important; /* Full width of the device */
}

.cardbutton {
	height: 90px !important; /* Increase button height on mobile */
}
	
.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: yellow;
	font-size: 20px;
	font-weight:700;
}
td.msg1 {
	background-color: yellow;
	color: #ff0000;
	font-size: 15px;
}

td {
	font-size: 20px;
}

.fullwidthsubmit { width:100%; height: 60px;  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; }

}