/* -------------------------------------------
   Reset Styles (for consistent cross-browser rendering)
---------------------------------------------- */

html,
body,
div,
span,
applet,
object,
iframe,
h1, h2, h3, h4, h5, h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
ul,
nav ul,
nav li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* Block display for HTML5 elements */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

/* Remove list styles for lists */
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Remove quotes from blockquote and q elements */
blockquote,
q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: '';
  content: none;
}

/* Table styling */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Remove default link styles */
a {
  text-decoration: none;
}

/* Utility classes for text alignment */
.txt-rt { text-align: right; }
.txt-lt { text-align: left; }
.txt-center { text-align: center; }

/* Utility classes for floating elements */
.float-rt { float: right; }
.float-lt { float: left; }
.clear { clear: both; }

/* Positioning helpers */
.pos-relative { position: relative; }
.pos-absolute { position: absolute; }

/* Vertical alignment */
.vertical-base { vertical-align: baseline; }
.vertical-top { vertical-align: top; }

/* Navigation list display styles */
nav.vertical ul li { display: block; }
nav.horizontal ul li { display: inline-block; }

/* Responsive images */
img { max-width: 100%; }

/* -------------------------------------------
   Base Styles
---------------------------------------------- */

html, body {
  padding: 0;
  margin: 0;
  font-family: 'Barlow', sans-serif;
  background-color: #000;   /* Solid black background */
  min-height: 100vh; /* Ensure full viewport height */
}

/* Links inside body with transition effects */
body a {
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -o-transition: 0.5s all;
  -ms-transition: 0.5s all;
  text-decoration: none;
}
body a:hover,
body a:focus {
  text-decoration: none;
}

/* Form elements styling */
select,
input[type="email"],
input[type="text"],
input[type="password"],
input[type="button"],
input[type="submit"],
textarea {
  font-family: 'Barlow', sans-serif;
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -o-transition: 0.5s all;
  -ms-transition: 0.5s all;
}

/* Apply to all <button> elements */
button {
  background: linear-gradient(135deg, #ff7e5f, #feb47b); /* Vibrant gradient */
  color: #fff; /* Text color */
  padding: 15px 30px; /* Larger padding for prominence */
  font-size: 16px; /* Readable font size */
  font-family: 'Arial', sans-serif; /* Font style */
  border: none; /* Remove default border */
  border-radius: 12px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor on hover */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Drop shadow for depth */
  transition: all 0.3s ease; /* Smooth transition */
  letter-spacing: 1px; /* Slight spacing between letters */
  text-transform: uppercase; /* Uppercase text for impact */
}

/* Hover effect for more attractiveness */
button:hover {
  transform: translateY(-3px); /* Slight lift */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); /* Stronger shadow on hover */
  background: linear-gradient(135deg, #feb47b, #ff7e5f); /* Reverse gradient for effect */
}

/* Headings styling */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-family: 'Barlow', sans-serif;
  letter-spacing: 1px;
}

/* Paragraphs styling */
p {
  margin: 0;
  padding: 0;
  letter-spacing: 1px;
  font-family: 'Barlow', sans-serif;
}

/* Additional resets for lists */
ul {
  margin: 0;
  padding: 0;
}

/* -------------------------------------------
   Component-specific Styles
---------------------------------------------- */

/* Header styling */
h1.header-w3ls {
  padding: 31px 0 25px;
  font-size: 53px;
  text-align: center;
  text-transform: capitalize;
  color: #ffffff;
  text-shadow: 2px 3px rgba(0, 0, 0, 0.42);
  letter-spacing: 5px;
}

/* Main titles */
.main-title h2,
.main-title h3 {
  font-size: 30px;
  color: #000; /* Can change based on need */
  text-align: center;
  margin: 9px 0 15px;
  letter-spacing: 2px;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 500;
}

/* Container with shadow and semi-transparent background */
.main-bothside {
  width: 64%;
  padding: 2em;
  margin: 0 auto;
  box-shadow: -2px 7px 37px 8px rgba(0, 0, 0, 0.52);
  background: rgba(255, 255, 255, 0.44);
  /* Optional border can be added here */
}

/* Button block styling */
.btn-block {
  display: block;
  width: 50%;
  margin: 0 auto;
}

/* Button primary styling */
.btn-primary {
  color: #232005;
  background-color: #ffd900;
  margin-top: 30px;
  padding: 15px;
  width: 100%;
  font-size: 18px;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  text-transform: capitalize;
  transition: background-color 0.3s ease;
}
.btn-primary:hover {
  background-color: #eac803;
}

/* Danger button style */
.btn-danger {
  background: #e74c3c;
  color: #fff;
}
.btn-danger:hover {
  background: #c0392b;
}

/* Form group layout */
.form-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.form-grid-w3ls {
  flex-basis: 48%;
  box-sizing: border-box;
}
.form-mid-w3ls {
  flex-basis: 31.4%;
  box-sizing: border-box;
}

/* Form controls */
select.form-control,
.form-grid-w3ls input[type="text"],
.form-grid-w3ls input[type="email"],
.form-mid-w3ls input[type="text"],
.form-control-w3l textarea {
  outline: none;
  width: 100%;
  padding: 0.8em 1em;
  border: none;
  margin-bottom: 16px;
  background: #fff;
  letter-spacing: 2px;
  font-size: 15px;
  transition: all 0.5s ease-in-out;
  box-sizing: border-box;
  color: #000;
}
select.form-control {
  height: 43px;
}
.form-control-w3l textarea {
  height: 7em;
  resize: none;
  overflow: hidden;
}

/* Placeholder styling for input fields */
::-webkit-input-placeholder { color: #000; }
::-moz-placeholder { color: #000; }
:-ms-input-placeholder { color: #000; }
:-moz-placeholder { color: #000; }

/* Submit button styling */
input[type="submit"] {
  text-transform: uppercase;
  background: #000;
  color: #fff;
  padding: 0.9em 0;
  border: none;
  font-size: 1em;
  outline: none;
  width: 23%;
  letter-spacing: 1px;
  font-weight: 600;
  margin-top: 1em;
  cursor: pointer;
  transition: all 0.5s;
}
input[type="submit"]:hover {
  color: #000;
  background: #fff;
}

/* Stylish readonly or disabled inputs and textareas with gray appearance */
input[readonly], textarea[readonly],
input:disabled, textarea:disabled {
  background-color: #d3d3d3 !important; /* Light gray background */
  color: #555555 !important; /* Darker gray text for contrast */
  cursor: not-allowed !important; /* Stylish indicator of non-editability */
  border: 2px solid #999999 !important; /* Gray border */
  border-radius: 8px !important; /* Rounded corners */
  padding: 10px !important;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.1) !important; /* Inner subtle shadow */
  transition: all 0.2s ease !important;
}

/* Optional hover effect to emphasize readonly state */
input[readonly]:hover, textarea[readonly],
input:disabled, textarea:disabled {
  border-color: #777777 !important;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.15) !important;
}

/* Enhanced footer styles */
.copy {
  padding: 39px 20px;
  background-color: #222; /* Dark background for contrast */
  border: 4px solid #B8860B; /* Thick outer outline in golden tone */
  position: relative;
  box-sizing: border-box;
}

/* Inner border of 2px in golden color inside the footer */
.copy::before {
  content: "";
  position: absolute;
  top: 4px; /* Offset by outer border width */
  left: 4px;
  right: 4px;
  bottom: 4px;
  border: 2px solid #FFD700; /* Golden inner line */
  border-radius: 8px; /* Optional: rounded corners for attractiveness */
  box-sizing: border-box;
  pointer-events: none; /* So it doesn't interfere with content */
  background-color: transparent;
}

/* Style for paragraph inside footer */
.copy p {
  margin: 0;
  text-align: center;
  font-size: 17px;
  color: #fff;
  letter-spacing: 2px;
  position: relative;
  z-index: 1; /* Ensure text stays above pseudo-element borders if needed */
}

/* Style for links inside paragraph */
.copy p a {
  color: #fff;
  text-decoration: none;
  transition: 0.5s all;
  font-weight: bold;
}
.copy p a:hover {
  text-decoration: underline;
  color: #FFD700; /* Change color on hover for effect */
}


/* Style for the link */
a.change-sender {
  display: inline-block;
  padding: 8px 16px;
  border: 2px solid #4CAF50; /* Green border, change color as needed */
  background-color: #f0f4f8; /* Light background color */
  border-radius: 8px; /* Rounded corners */
  text-decoration: none; /* Remove underline */
  transition: all 0.3s ease; /* Smooth transition for hover effects */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Subtle shadow */
  font-family: Arial, sans-serif; /* Font style */
}

/* Style for the text inside the link */
a.change-sender small {
  font-weight: bold;
  font-style: italic;
  color: red; /* Text color */
}

/* Hover effect */
a.change-sender:hover {
  background-color: #e0e7ec; /* Slightly darker background on hover */
  border-color: #3e8e41; /* Darker border on hover */
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
  cursor: pointer;
}

/* Container for the project title */
.heading-title {
  font-size: 48px; /* Large font size */
  font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', sans-serif; /* Stylish font */
  position: relative;
  display: inline-block;
  padding: 20px 40px;
  background-color: #1a1a1a; /* Inner background color */
  color: #fff; /* Text color */
  text-align: center;
  font-weight: bold;
  letter-spacing: 2px;
  /* Outer border for background lines */
  border: 4px solid #B8860B; /* Outer golden border */
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* Subtle shadow for depth */
  background-clip: padding-box; /* Ensures background doesn't spill over border radius */
}

/* Inner background for the text */
.heading-title span {
  display: inline-block;
  padding: 10px 20px;
  background-color: #FFD700; /* Golden inner background */
  border-radius: 8px;
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.1); /* Inner shadow for depth */
}






  

/* Container styling */
.result-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #222; /* Dark background for contrast */
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  font-family: 'Arial', sans-serif;
}

/* Title styling */
.result-title {
  text-align: center;
  font-family: 'Arial Black', sans-serif;
  font-size: 24px;
  color: #fff;
  margin-bottom: 20px;
}

/* Wrapper for the table for additional styling */
.styled-table-wrapper {
  overflow-x: auto; /* For responsiveness if needed */
}

/* Custom table styles */
.custom-result-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #1a1a1a; /* Dark table background */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Table cells styling */
.custom-result-table td {
  padding: 15px 20px;
  border-bottom: 1px solid #333;
  color: #fff;
}

/* Labels styling */
.custom-result-table .label {
  font-weight: bold;
  background-color: #333;
  width: 35%;
}

/* Values styling */
.custom-result-table .value {
  background-color: #222;
}

/* Status cell styling */
.status-cell {
  text-align: center;
}

/* Status styles */
.status {
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 14px;
  display: inline-block;
}

/* Success result style */
.status.success {
  background-color: #28a745; /* Green for success */
  color: #fff;
  box-shadow: 0 0 10px rgba(40, 167, 69, 0.7);
}

/* Pending or failure style */
.status.pending {
  background-color: #ffc107; /* Amber for pending */
  color: #212529;
  box-shadow: 0 0 10px rgba(255, 193, 7, 0.7);
}







/* Style the table with rounded corners and shadow */
.trx-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

/* Align header text to the left */
.trx-table thead th {
  text-align: left;
}

/* Align table cell text to the left */
.trx-table tbody td {
  text-align: left;
}

/* Row hover effect with subtle lift and background change */
.trx-table tbody tr:hover {
  background-color: #f8f9fa; /* Light gray background on hover */
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Add a thick horizontal line after each row */
.trx-table tbody tr {
  border-bottom: 3px solid #dee2e6; /* Light gray line with thickness 3px */
}

/* Remove border from last row to avoid double border at table bottom */
.trx-table tbody tr:last-child {
  border-bottom: none;
}

/* Style table headers with gradient background */
.trx-table thead {
  background: linear-gradient(45deg, #6a11cb, #2575fc);
  color: #fff;
  font-weight: bold;
}

/* Cell padding and alignment */
.trx-table th, .trx-table td {
  padding: 15px;
  vertical-align: middle;
}

/* Style for the status box - successful */
.status-success {
  background-color: #d4edda; /* Light green background */
  border: 1px solid #c3e6cb; /* Green border */
  color: #155724; /* Dark green text */
  padding: 8px 12px;
  border-radius: 8px;
  display: inline-block;
  font-weight: bold;
}

/* Style for the status box - not successful (warning) */
.status-warning {
  background-color: #fff3cd; /* Light yellow background */
  border: 1px solid #ffeeba; /* Yellow border */
  color: #856404; /* Dark yellow/brown text */
  padding: 8px 12px;
  border-radius: 8px;
  display: inline-block;
  font-weight: bold;
}

/* Style for small buttons with different colors for VIEW and EXPORT */
.view-btn {
  background-color: #007bff; /* Bootstrap primary blue */
  color: #fff;
  padding: 4px 8px;
  font-size: 0.8em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 60px;
  text-align: center;
}

.view-btn:hover {
  background-color: #0069d9;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.export-btn {
  background-color: #28a745; /* Bootstrap success green */
  color: #fff;
  padding: 4px 8px;
  font-size: 0.8em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 60px;
  text-align: center;
}

.export-btn:hover {
  background-color: #218838;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Style for server report box */
.server-report {
  font-family: Arial, sans-serif; /* Good, clean font */
  font-size: 0.7em; /* Very small font size */
  background-color: #ffffff; /* White background */
  color: #000000; /* Black text */
  border: 1px solid red; /* Red outline */
  padding: 4px 8px; /* Small padding for readability */
  display: inline-block; /* Keep it inline with other content */
  border-radius: 4px; /* Slightly rounded corners (optional) */
  max-width: 100%; /* Prevent overflow if content is long */
  word-wrap: break-word; /* Wrap long text */
}
/* Optional: Make the buttons look like small pills or badges if needed */
/* -------------------------------------------
   Responsive Styles
---------------------------------------------- */

@media(max-width: 1920px) {
  h1.header-w3ls { font-size: 60px; }
  .main-title h2,
  .main-title h3 { font-size: 35px; }
}
@media(max-width: 1680px) {
  h1.header-w3ls { font-size: 57px; }
  .main-title h2,
  .main-title h3 { font-size: 33px; }
}
@media(max-width: 1600px) {
  h1.header-w3ls { font-size: 53px; }
  .main-title h2,
  .main-title h3 { font-size: 30px; }
}
@media(max-width: 1440px) {
  .main-bothside { width: 68%; }
  h1.header-w3ls { padding: 26px 0 23px; }
}
@media(max-width: 1366px) {
  .main-title h2,
  .main-title h3 { font-size: 28px; }
}
@media(max-width: 1280px) {
  h1.header-w3ls { font-size: 51px; }
  .main-bothside { width: 71%; }
}
@media(max-width: 1080px) {
  .main-bothside { width: 75%; }
  select.form-control,
  .form-grid-w3ls input[type="text"],
  .form-grid-w3ls input[type="email"],
  .form-mid-w3ls input[type="text"],
  .form-control-w3l textarea { padding: 0.7em 0.8em; }
  select.form-control { height: 39px; }
  input[type="submit"] { padding: 0.9em 0; margin-top: 0.8em; }
}
@media(max-width: 1050px) {
  .main-title h2,
  .main-title h3 { font-size: 26px; }
  input[type="submit"] { font-size: 0.9em; }
}
@media(max-width: 1024px) {
  h1.header-w3ls { letter-spacing: 4px; }
  .main-bothside { width: 78%; }
  .copy { padding: 35px 0; }
  .copy p { font-size: 16px; }
}
@media(max-width: 991px) {
  h1.header-w3ls { font-size: 48px; }
  .main-bothside { padding: 1.7em; }
  .main-title h2,
  .main-title h3 { margin: 9px 0 13px; }
}
@media(max-width: 900px) {
  .copy { padding: 31px 0; }
  /* Adjust other elements as needed */
}
@media(max-width: 800px) {
  .main-bothside { width: 81%; }
  h1.header-w3ls { font-size: 46px; letter-spacing: 3px; padding: 20px 0 21px; }
  input[type="submit"] { width: 26%; }
}
@media(max-width: 768px) {
  .copy p { font-size: 15px; }
  .form-control-w3l textarea { height: 6em; }
}
@media(max-width: 736px) {
  .main-bothside { width: 84%; }
  h1.header-w3ls { font-size: 43px; }
  .main-title h2,
  .main-title h3 { letter-spacing: 1px; }
  input[type="submit"] { width: 33%; }
}
@media(max-width: 667px) {
  input[type="submit"] { width: 30%; }
  .copy { padding: 27px 0; }
  .copy p { font-size: 14px; }
}
@media(max-width: 640px) {
  .main-title h2,
  .main-title h3 { font-size: 24px; margin: 7px 0 12px; }
  select.form-control,
  .form-grid-w3ls input[type="text"],
  .form-grid-w3ls input[type="email"],
  .form-mid-w3ls input[type="text"],
  .form-control-w3l textarea { font-size: 14px; }
}
@media(max-width: 600px) {
  .main-bothside { padding: 1.4em; }
  h1.header-w3ls { font-size: 40px; letter-spacing: 2px; }
  input[type="submit"] { width: 36%; }
}
@media(max-width: 568px) {
  .copy p { letter-spacing: 1px; }
  select.form-control,
  .form-grid-w3ls input[type="text"],
  .form-grid-w3ls input[type="email"],
  .form-mid-w3ls input[type="text"],
  .form-control-w3l textarea { padding: 0.6em 0.7em; }
  select.form-control { height: 33px; }
}
@media(max-width: 480px) {
  .copy { padding: 24px 0; }
  .copy p { line-height: 27px; }
  input[type="submit"] { padding: 0.8em 0; margin-top: 0.7em; }
}
@media(max-width: 440px) {
  h1.header-w3ls { font-size: 37px; letter-spacing: 1px; }
  .main-bothside { padding: 1.2em; }
  .form-group { flex-direction: column; }
}
@media(max-width: 414px) {
  input[type="submit"] { width: 40%; font-size: 0.8em; }
  .main-title h2,
  .main-title h3 { font-size: 22px; }
}
@media(max-width: 384px) {
  .copy { padding: 20px 0; }
}
@media(max-width: 375px) {
  h1.header-w3ls { font-size: 34px; }
}
@media(max-width: 320px) {
  .main-title h2,
  .main-title h3 { font-size: 20px; }
}