* {
  box-sizing: border-box;
}
:root {
  --redColor: #BF1E2E; /* This sets things to color red used in FI logo */
  --blackColor: #080808; /* This sets things to color black */
  --entryTextFontColor: #000000;
  --whiteColor: #FFFFFF; /* This sets things to color white */
  --helpColor: #C7D1DA; /* This sets things to color light blue */
  --helpBorder: 1px solid #080808; /* This sets things to color light blue */
  --helpHover: #C7D1DA; /* This sets things to color stainless steel */
  --helpHoverBorder: 0px solid #080808; /* This sets things to color white */
  --helpBackground: #080808; /* This sets things to color XYZ */
  --helpText: #C7D1DA; /* This sets things to color XYZ */
  --helpWidth: 50%; /* Sets the width of the help pop up area */
  --browseColor: var(--redColor); /* This sets things to color light green */
  --browseFontColor: #FFFFFF; /* This sets things to color light green */
  --browseBorder: 1px solid #080808; /* This sets things to color light green */
  --browseHover: #080808; /* This sets things to color darker green */
  --browseHoverFontColor: #C7D1DA; /* This sets things to color light green */
  --browseHoverBorder: 1px solid #C7D1DA; /* This sets things to color darker green */
  --authorizeBackgroundColor: var(--redColor); /* This sets things to color XYZ */
  --authorizeTextColor: #FFFFFF; /* This sets things to color XYZ */
  --authorizeDisabledBackgroundColor: #FFFFFF; /* This sets things to color XYZ */
  --authorizeDisabledTextColor: #FFFFFF; /* This sets things to color XYZ */
  --authorizeHoverBackgroundColor: #080808; /* This sets things to color XYZ */
  --authorizeHoverTextColor: #C7D1DA; /* This sets things to color XYZ */
  --authorizeColor: #87CEFA; /* This sets things to color XYZ */
  --authorizeBorderColor: 1px solid #18ab29; /* This sets things to color XYZ */
  --authorizeDisabled: #FFFFFF; /* This sets things to color grey-ish */
  --authorizeDisabledBorderColor: #FFFFFF; /* This sets things to color grey-ish */
  --authorizeHover: #5CBF2A; /* This sets things to color XYZ */
  --payColor: #C7D1DA; /* This sets things to color XYZ */
  --payBorder: 1px solid #080808; /* This sets things to color XYZ */
  --payHover: #080808; /* This sets things to color XYZ */
  --payHoverFont: #FFFFFF;
  --payHoverBorder: 1px solid #C7D1DA; /* This sets things to color XYZ */
  --payColor1: #000000;
  --payColor2: #B80F0A;
  --tooltipColor: #000000; /* This sets things to color pink-ish */
  --tooltipBackground: #C7D1DA; /* This sets things to color pink-ish */
  --tooltipBorder: 1px solid #080808; /* This sets things to color pink-ish */
  --tooltipHover: #C7D1DA; /* This sets things to color red-ish */
  --tooltipHoverBorder: 2px solid #080808; /* This sets things to color red-ish */
  --deleteColor: #C7D1DA; /* This sets things to color pink-ish */
  --deleteBorder: 1px solid #18AB29; /* This sets things to color pink-ish */
  --deleteHover: #B80F0A; /* This sets things to color red-ish */
  --deleteHoverBorder: 1px solid #FFFFFF; /* This sets things to color red-ish */
  --downloadColor: #C7D1DA; /* This sets things to color XYZ */
  --downloadFontColor: #000000; /* This sets things to color XYZ */
  --downloadBorder: 1px solid #080808; /* This sets things to color XYZ */
  --downloadHover: #080808; /* This sets things to color XYZ */
  --downloadHoverFont: #FFFFFF;
  --downloadHoverBorder: 2px solid #C7D1DA; /* This sets things to color XYZ */
  --tableBorders: 1px solid #DDD; /* This sets things to color grey-ish */
  --tableOpacity: 0.9;
  --videoOpacity: 0.65;
  --displayTableColor: #C7D1DA; /* color is light green-ish */
  --displayTableFontColor: #080808; /* color is vampire black */
  --displayTableHover: #B80F0A; /* color is grey-ish */
  --displayTableHoverHeadFontColor: #080808;
  --displayTableHoverFontColor: #FFFFFF;
  --displayTableHoverFontSize: 14px;
  --displayTableEvenRowColor: #C7D1DA;
  --displayTableOddRowColor: #FFFFFF;
  --tableBorderColor: solid #C7D1DA;
  --fontFamily: Arial; /* Arial, monospace, etc */
  /* fontFamily: "Courier New", monospace; /* Arial, monospace, etc */
  /* font-family: "Times New Roman", Times, serif; */

  /* All text is black or white */
  /* Black: #000000; */
  /* White: #FFFFFF; */
  /* All hyperlinks are white on hover */
  /* White: #FFFFFF; */
}

body {
  background: #AAB3BB;
}

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  opacity: var(--videoOpacity);
}

/* Add some content at the bottom of the video/page */
.content {
  position: relative;
  top: 0;
  width: 100%;
  height: 100%;
}

.toolarge:link, #toolarge:visited {
  color: #FFFFFF;
  background: var(--redColor);
  border-radius:14px;
  padding: 4px 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
.toolarge:hover, #toolarge:active {
  background: var(--whiteColor);
  /* background-image: linear-gradient(to right, var(--payColor1), var(--payColor2)); */
  color: #000000;
}

a:link, a:visited {
  color: #000000;
  border-radius:14px;
  padding: 4px 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: #FFFFFF;
  color: #000000;
}

table {
  border-collapse: separate;
  border: solid #C7D1DA;
  border-radius: 15px;
  -mox-border-radius: 15px;
  border-spacing: 2px;
  padding: 4px;
  font-family: var(--fontFamily);
  font-size:14px;
  opacity: 0.9;
}

#buttonstable td {
  border-collapse: collapse;
  border: none;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

#displaytable {
  border-collapse: separate;;
  border: solid #C7D1DA;
  border-radius: 15px;
  -mox-border-radius: 15px;
  border-spacing: 2px;
  padding: 4px;
  font-family: var(--fontFamily);
  font-size:14px;
  opacity: 0.9;
}

#displaytable td {
  word-wrap: break-all;
  padding: 4px 4px;
}

#displaytable th {
  font-size: 18px;
}
#displaytable tr, th, td {
  border-top: 1px solid var(--displayTableBorderColor);
  border-left: 1px solid var(--displayTableBorderColor);
  border-right: 1px solid var(--displayTableBorderColor);
  border-bottom: 1px solid var(--displayTableBorderColor);
}
#displaytable tr {
  color: var(--displayTableFontColor);
}
#displaytable td {
  color: var(--displayTableFontColor);
}
#displaytable tr:nth-child(even) {
  background-color: var(--displayTableEvenRowColor);
  color: var(--displayTableFontColor);
}
#displaytable tr:nth-child(odd) {
  background-color: var(--displayTableOddRowColor);
}
#displaytable th {
  background-color: var(--displayTableEvenRowColor);
}
#displaytable th:hover {
  color: var(--displayTableHoverHeadFontColor)
}
#displaytable tr:hover td {
  background-color: var(--displayTableHover);
  color: var(--displayTableHoverFontColor);
  font-size: var(--displayTableHoverFontSize);
}
#filogo {
  text-align: center;
  width: 250px;
  margin-left:auto;
  margin-right:auto;
 }
#filehasher {
  font-family: var(--fontFamily);
  color: #FFFFFF;
  text-align: center;
}

#downloaddisplay {
  color: #FFFFFF;
  text-align: center;
  font-weight: bold;
}

.cookieNotice {
  color: #FFFFFF;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
}

#buddylink {
  color: #FFFFFF;
  text-align: center;
}
#buddylink a:link, a:visited {
  color: #FFFFFF;
  font-weight: bold;
}
#buddylink a:hover, a:active {
  background-color: #FFFFFF;
  color: #000000;
}

#copyright {
  color: #FFFFFF;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
}
#copyright a:link, a:visited {
  color: #FFFFFF;
  text-align: center;
  font-weight: bold;
}
#copyright a:hover, a:active {
  background-color: #FFFFFF;
  color: #000000;
}

#contactus {
  color: #FFFFFF;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
}

#contactus a:link, a:visited {
  color: #FFFFFF;
  text-align: center;
  font-weight: bold;
}

#contactus a:hover, a:active {
  background-color: #FFFFFF;
  color: #000000;
}

#infotable th, td {
  color: #FFFFFF;
  border: 1px solid #ddd;
  border-top: 0px;
  border-bottom: 0px;
  padding: 8px 8px;
  font-weight: bold;
  text-align: center;
}

#infotable tr td:first-child {
  border-left: 0;
}

#infotable tr td:last-child {
  border-right: 0;
}

#infotable tr {
  width: 95%;
  overflow:auto;
  margin-left:auto;
  margin-right:auto;
  vertical-align:top;
  color: #FFFFFF;
  background-color: #000000;
  opacity: 0.85;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 0px;
  padding: 8px 8px;
  font-size: 14px;
  text-align:left;
  font-weight: bold;
}
  
.removedtable td {
  vertical-align:middle;
  text-align:center;
  font-size: 16px;
  font-weight: bold;
}
.removedtable tr td:first-child {
  border-left: 0;
}
.removedtable tr td:last-child {
  border-right: 0;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  /* width: 150px; */
  background-color: var(--tooltipBackground);
  color: var(--tooltipColor);
  text-align: left;
  border-radius: 16px;
  border: 1px solid #000000;
  padding: 10px 10px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  /* top: -5px; */
  /* right: 105%; */
  bottom: 110%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.serviceButtons {
        /* background: none; */
        background-color: var(--blackColor);
        border-radius:38px;
        border: none;
        /* border:0px solid #18ab29; */
        /* opacity: 0.65; */
        display:inline-block;
        cursor:pointer;
        color:var(--whiteColor);
        /* font-family: var(--fontFamily); */
        font-family: "Times New Roman";
        font-size:24px;
        font-weight: bold;
        padding:7px 8px;
        text-decoration:none;
        outline: none;
}
.serviceButtons:hover {
        background-color: var(--whiteColor);
        /* background-image: linear-gradient(to right, var(--payColor1), var(--payColor2)); */
        border: none;
        /* border: var(--deleteHoverBorder) */
        font-weight: bold;
        color:var(--blackColor);
}
.serviceButtons:active {
        position:relative;
        /* top:1px; */
}

.serviceButtonsH {
        /* background: none; */
        background-color: var(--whiteColor);
        border-radius:38px;
        border: none;
        /* border:0px solid #18ab29; */
        /* opacity: 0.65; */
        display:inline-block;
        cursor:pointer;
        color:var(--blackColor);
        /* font-family: var(--fontFamily); */
        font-family: "Times New Roman";
        font-size:18px;
        font-weight: bold;
        padding:4px 6px;
        text-decoration:none;
        outline: none;
}
.serviceButtonsH:hover {
        background-color: var(--redColor);
        /* background-image: linear-gradient(to right, var(--payColor1), var(--payColor2)); */
        border: none;
        /* border: var(--deleteHoverBorder) */
        font-weight: bold;
        color:var(--whiteColor);
}
.serviceButtonsH:active {
        position:relative;
        /* top:1px; */
}

.authorizeButton {
	background: var(--authorizeBackgroundColor);
	border-radius:14px;
	border: var(--authorizeBorderColor);
	display:inline-block;
	cursor:pointer;
	color: var(--authorizeTextColor);
	font-family: var(--fontFamily);
	font-size:16px;
	font-weight: bold;
	padding:8px 8px;
	text-decoration:none;
	outline: none;
}
.authorizeButton:hover {
	background-color: var(--payHover);
	background-image: linear-gradient(to right, var(--payColor1), var(--payColor2));
	color: var(--authorizeHoverTextColor);
}
.authorizeButton:disabled {
	background-color: var(--authorizeDisabledBackgroundColor);
	border: var(--authorizeDisabledBorderColor);
	color: var(--authorizeDisabledTextColor);
}
.authorizeButton:active {
	position:relative;
	top:1px;
}

.entryText {
	color: var(--entryTextFontColor);
	font-weight: bold;
	font-size: 16px;
}

.downloadButton {
	background-color: var(--blackColor);
	border: 1px solid var(--downloadHoverBorder);
	color: #FFFFFF;
	border-radius:28px;
	display:inline-block;
	cursor:pointer;
	font-family: var(--fontFamily);
	font-size:16px;
	padding:12px 24px;
	text-decoration:none;
	font-weight: bold;
	outline: none;
}
.downloadButton:hover {
	background-color: var(--blackColor);
	border: 1px solid var(--downloadHoverBorder);
	color: #FFFFFF;
}
.downloadButton:active {
	position:relative;
	top:1px;
}

#helpDiv {
  width: 90%;
  padding: 5px 0;
  color: #FFFFFF;
  margin-top: 2px;
  display: none;
  margin-left:auto;
  margin-right:auto;
}

.helpButton {
	/* background-image: url('/images/help_question.png'); */
	background-image: url('/images/help_hand.png');
	border: 0px;
	border-radius:60px;
	display:inline-block;
	cursor:pointer;
	object-fit: cover;
	height: 100px;
	width: 100px;
	outline: none;
	scale: 50%;
}
.helpButton:hover {
	background-color: var(--helpHover);
	border: var(--helpHoverBorder);
        color:#FFFFFF;
}
.helpButton:active {
	position:relative;
	top:1px;
}