:root {
  --primary-color: #008080; 
  --white: #ffffff;
  --light-grey: #f8f9fa; 
  --button-hover: #5f9ea0; 
  --error: red;
  --text-color: #1f2937;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  background-color: var(--light-grey);
  font-family: 'Segoe UI', sans-serif;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1; /* Allow main content to take up available space */
  padding-bottom: 50px; /* Added space below content to prevent footer overlap */
}

.navbar {
  background-color: var(--primary-color);
  z-index: 1000;
  height: 60px;
}

.navbar-brand, .nav-link {
  color: var(--white) !important;
  font-weight: 500;
}

.nav-link:hover,
.nav-link.active {
  text-decoration: underline;
}

/* Hero */
.hero-section {
  background-color: var(--white);
  color: var(--primary-color);
  text-align: center;
  padding: 80px 20px;
  border-bottom: 4px solid var(--primary-color);
}

.hero-section h1 {
  font-size: 2.5rem;
  font-weight: 700;
}

.hero-section p {
  opacity: 0.8;
}

.hero-section .btn {
  background-color: var(--primary-color);
  color: var(--white);
  border: none;
  font-weight: 600;
  padding: 10px 20px;
}

.hero-section .btn:hover {
  background-color: var(--button-hover);
}

/* Card Headers */
.category-box {
  background-color: var(--primary-color);
  color: var(--white);
}

.card-title a {
  color: var(--white);
  text-decoration: none;
}

.card-title a:hover {
  text-decoration: underline;
}

/* Tool Cards */
.item-box {
  transition: all 0.2s ease;
  border: 1px solid #e5e7eb;
}

.item-box:hover {
  border-color: var(--primary-color);
  box-shadow: 0 0.75rem 1.5rem rgba(30, 58, 138, 0.1);
  transform: translateY(-3px);
}

.avatar {
  width: 40px;
  height: 40px;
}

h3, .fw-medium {
  color: var(--text-color) !important;
}

/* Card Spacing for smaller screens */
@media (max-width: 768px) {
  .card-body {
    padding: 1rem;
  }

  .item-box {
    margin-bottom: 15px;
  }
  .navbar {
      height:auto;
    }
}

textarea {
  width: 100%;
  height: 300px;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: none;
}

pre {
  overflow: hidden;
}

#resultCode {
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: 16px;
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: auto;
  width: 100%;
  font-family: 'Courier New', monospace;
}

#copyBtn {
  position: absolute;
  top: 33px;
  right: 0px;
  background-color: var(--primary-color);
  color: var(--white);
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
  z-index: 10;
}

#outputWrapper {
  position: relative;
  margin-top: 20px;
}

#copyBtn:hover {
  background-color: var(--button-hover);
}

.btn-main {
  display: inline-block;
  background-color: var(--primary-color);
  color: var(--white);
  border: none;
  padding: 12px 20px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-align: center;
}

.btn-main:hover {
  background-color: var(--button-hover);
  color: var(--white);
}

.counter-info {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
}

.counter-info div {
  font-weight: bold;
}

.error {
  color: var(--error);
  font-size: 16px;
  text-align: center;
  margin-top: 20px;
}

.mgtop {
  margin-top: 85px;
}

footer {
  background-color: var(--primary-color);
  color: var(--white);
  padding: 1rem;
  text-align: center;
  margin-top: auto; 
}

footer p {
  margin-bottom: 0;
}

#Tabs a{
    color:var(--text-color) !important;
    text-decoration: none;
}

#Tabs a:hover{
    color:var(--primary-color) !important;
    text-decoration: none;
}

.radio-group {
    padding-left: 25px;
    margin-top: 10px;
}
.radio-group input {
    transform: scale(1.2);
}
.radio-group input[type="radio"] {
    display: none;
}

.radio-group label {
    position: relative;
    padding-left: 20px;
    cursor: pointer;
    margin-left: 15px;
    font-size: 16px;
    color: var(--text-color) !important;
}

.radio-group label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #ccc;
    background: white;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
}

.radio-group input[type="radio"]:checked + label::before {
    border-color: var(--primary-color);;
    background-color: var(--primary-color);
}

.radio-group input[type="radio"]:checked + label {
    color: var(--primary-color);
}

#viewer {
    display:none;
    background: #272822;
    color: #f8f8f2;
    padding: 15px;
    border-radius: 5px;
    margin-top: 20px;
    white-space: pre;
    overflow-x: auto;
    font-family: monospace;
}
.string  { color: #a6e22e; }
.number  { color: #ae81ff; }
.boolean { color: #f92672; }
.null    { color: #f44747; }
.key     { color: #66d9ef; }

.panel {margin: 50px auto 40px; max-width: 500px; text-align: center;}
.button_outer {background:var(--primary-color); border-radius:30px; text-align: center; height: 50px; width: 200px; display: inline-block; transition: .2s; position: relative; overflow: hidden;}
.btn_upload {padding: 12px 30px 12px; color: #fff; text-align: center; position: relative; display: inline-block; overflow: hidden; z-index: 3; white-space: nowrap;}
.btn_upload input {position: absolute; width: 100%; left: 0; top: 0; width: 100%; height: 105%; cursor: pointer; opacity: 0;}
.file_uploading {width: 100%; height: 10px; margin-top: 20px; background: #ccc;}
.file_uploading .btn_upload {display: none;}
.processing_bar {position: absolute; left: 0; top: 0; width: 0; height: 100%; border-radius: 30px; background:var(--primary-color); transition: 3s;}
.file_uploading .processing_bar {width: 100%;}
.success_box {display: none; width: 50px; height: 50px; position: relative;}
.success_box:before {content: ''; display: block; width: 9px; height: 18px; border-bottom: 6px solid #fff; border-right: 6px solid #fff; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); position: absolute; left: 17px; top: 10px;}
.file_uploaded .success_box {display: inline-block;}
.file_uploaded {margin-top: 0; width: 50px; background:var(--primary-color); height: 50px;}
.uploaded_file_view {max-width: 300px; margin: 40px auto; text-align: center; position: relative; transition: .2s; opacity: 0; border: 2px solid #ddd; padding: 15px;}
.file_remove{width: 30px; height: 30px; border-radius: 50%; display: block; position: absolute; background: #aaa; line-height: 30px; color: #fff; font-size: 12px; cursor: pointer; right: -15px; top: -15px;}
.file_remove:hover {background: #222; transition: .2s;}
.uploaded_file_view img {max-width: 100%;}
.uploaded_file_view.show {opacity: 1;}
.error_msg {text-align: center; color: #f00}

.file-box {
    margin-top: 10px;
    padding: 10px;
    border-radius: 5px;
    position: relative;
  }
  .file-remove {
    position: absolute;
    top: 10px;
    right: 15px;
    color: var(--primary-color);
    font-weight: bold;
    cursor: pointer;
  }
  .progress {
    height: 6px;
    background: var(--button-hover);
    margin-top: 5px;
    border-radius: 5px;
  }
  .progress-bar {
    height: 6px;
    background: var(--primary-color);
    width: 0%;
    border-radius: 5px;
    transition: width 0.3s ease;
  }

  input[type="date"] {
  display:block;
  position:relative;
  padding:1rem 3.5rem 1rem 0.75rem;
  
  font-size:1rem;
  font-family:monospace;
  
  border:1px solid #8292a2;
  border-radius:0.25rem;
  background:
    white
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='22' viewBox='0 0 20 22'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%23688EBB' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' transform='translate(1 1)'%3E%3Crect width='18' height='18' y='2' rx='2'/%3E%3Cpath d='M13 0L13 4M5 0L5 4M0 8L18 8'/%3E%3C/g%3E%3C/svg%3E")
    right 1rem
    center
    no-repeat;
  
  cursor:pointer;
}
input[type="date"]:focus {
  outline:none;
  border-color:var(--primary-color);
  box-shadow:0 0 0 0.25rem var(--primary-color);
}

::-webkit-datetime-edit {}
::-webkit-datetime-edit-fields-wrapper {}
::-webkit-datetime-edit-month-field:hover,
::-webkit-datetime-edit-day-field:hover,
::-webkit-datetime-edit-year-field:hover {
  background:var(--primary-color);
}
::-webkit-datetime-edit-text {
  opacity:0;
}
::-webkit-clear-button,
::-webkit-inner-spin-button {
  display:none;
}
::-webkit-calendar-picker-indicator {
  position:absolute;
  width:2.5rem;
  height:100%;
  top:0;
  right:0;
  bottom:0;
  
  opacity:0;
  cursor:pointer;
  
  color:var(--primary-color);
  background:var(--primary-color);
 
}

input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity:0.05; }
input[type="date"]:hover::-webkit-calendar-picker-indicator:hover { opacity:0.15; }

.calC{
    display: inline-flex;
    gap: 20px;
}
.lblCalC{
    padding-top: 16px;
}

.footer-links a {
  margin: 0 8px;
  position: relative;
}

.footer-links a:not(:last-child)::after {
  content: "|";
  color: white;
  margin-left: 8px;
  position: absolute;
  right: -12px;
}