body {
  font-family: Arial, sans-serif;
  background: #ffffff;
  padding: 0;
  margin: 0;
}
.main-content {
  background: #f3f7fa;
  padding: 0;
}
p, a{
  color: #292929;
}
.converter {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  text-align: center;
  width: 320px;
}
h1 {
  margin-bottom: 15px;
  color: #666;
  font-size: 32px;
  margin: 10px 0 20px;
}
h1, h2, h3, h4, h5{
  color: #256686;
}
.btn {
    background: #2b7fa8;
    color: #ffffff;
    margin-bottom: 5px;
    margin-right: 5px;
    border: 1px solid transparent;
}
.btn:hover{
  background: #fff;
    border: 1px solid #2b7fa8;
    color: #2b7fa8 !important;
}
.row {
    margin: auto;
}
.inner-main-content .container-xl {
    padding: 0;
}
button, .btn-customprimary {
  background: #5e3b93 ;
  color: white;
  border: none;
  padding: 10px 16px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-customsec {
  background: #666666 ;
  color: white;
  border: none;
  padding: 10px 16px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}


button:hover {
  background: #666666;
  color: #fff !important;
}
.result {
  margin-top: 15px;
  font-size: 18px;
  font-weight: bold;
  color: #444;
}
/* Navbar container */
.navbar {
    background-color: #2b7fa8  !important;
    padding: 0;
    background-image: linear-gradient(#367fa8 , #29789f);
}

/* Navbar links */
.navbar a {
  float: left;
  font-size: 15px;
  color: white;
  text-align: center;
  padding: 6px 23px;
  text-decoration: none;
    color: #fff !important;
}



.logo {
    width: 200px;
    margin: 15px 0;
}
.logo img{
  max-width: 100%;
}

.inner-main-content{
  padding-top: 20px;
}
.content {
    padding-bottom: 50px;
    margin-top: 50px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}
.inner-main-content h2 {
    font-size: 25px;
    margin: 20px 0;
}
input[type="radio"] {
        accent-color: #5e3b93; /* Replace 'blue' with your desired color */
    }
.form-check-inline {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 0;
    margin-right: .75rem;
}
.Calculator-box {
    background-color: #f3f7fa;
    padding: 15px !important;
}
.Calculator-box p {
  margin: 0;
}
input[type=checkbox], input[type=radio] {
    box-sizing: border-box;
    padding: 0;
    width: 20px;
    height: 20px;
}
.form-check-label {
    margin-bottom: 0;
    font-size: 20px;
    font-weight: bold;
    margin-left: 10px;
}
.custom-ads-section {

}
 /* Make MathJax formulas responsive */
    .mjx-container {
      max-width: 100%;
      overflow-x: auto;
    }
    p, ol {
      font-size: 1rem;
    }
    /* Make formulas responsive */
    .math-wrap{max-width:100%; overflow-x:auto}
    .math-wrap > .MJX-TEX{white-space:nowrap}
.breadcrumbs, .breadcrumb {
    padding: 0;
    padding-top: 20px;
    background: transparent;
    padding-left: 20px;
    padding-right: 20px;
}
.breadcrumbs ol {
    margin: 0;
    padding: 0;
}
.breadcrumbs ol a {
    margin: 0;
    padding: 0;
    color: #5e3b93;
}
.breadcrumbs ol a, .breadcrumbs ol li {
    font-size: 14px;
}
 /* ---------- Responsive formulas ---------- */
    .formula{
      padding:12px;border-radius:12px;border:1px dashed #334155;background:#ffffff;
      /* responsive font size & wrapping container */
      font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.25rem);line-height: 42px;
    }
    /* Make MathJax boxes respect container width and reflow */
    mjx-container{
      max-width:100% !important;
      display:block !important;
      overflow-x:auto; /* allow horizontal scroll only if needed */
    }
    mjx-container[display="true"]{ /* display equations */
      margin: .5rem 0 !important;
    }
.btn {
    padding: 4px 10px;
    font-size: 1rem;
}
.results-boxes .results-boxe{
  padding: 10px;
}
.form-text {
    display: block;
    margin-top: .25rem;
    font-size: 14px;
}
.sssss{
font-size: 14px;
}
.results-boxe h2{
  font-size: 21px;
}

.form-input-custom {
  border: 1px solid #2b7fa8;
  padding: 5px 5px;
  border-radius: 3px;
  margin: 5px 0;
  background: #2b7fa80f;
}
.form-input-custom label {
    font-size: 14px;
    color: #1c4559;
    font-weight: bold;
    margin-bottom: 2px;
}

.form-inner-input {
  width: 50%;
}
.form-input-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  margin: 0;
}
.form-input-box .help-note{
    font-size: 12px;
}

.text-muted {
    color: #412a6a !important;
    font-size: 11px;
    line-height: 15px;
    display: block;
    margin-top: 8px;
}
label.form-check-label {
    font-size: 12px;
    font-weight: bolder;
}
.results-boxes h3 {
    font-size: 15px;
    font-weight: bold;
}

select {
    word-wrap: normal;
    width: 100%;
}
.results-boxes{
  background: #5e3b931f
}
.results-boxes {
  background: #5e3b930d;
  padding: 20px 0;
}
h3 {
    font-size: 20px;
}
.content h3 {
    font-weight: 600;
}
.Calculator-box .col-6 {
    padding: 0 5px;
}

.form-input-custom div {
    font-size: 13px;
}
mjx-container {
    max-width: 100% !important;
    display: inline-block !important;
    overflow-x: auto;
    top: 12px;
}
.results-boxe mjx-container {
    max-width: 100% !important;
    display: inline-block !important;
    width: 100%;
}
.results-boxe mjx-container[jax="CHTML"] {
    line-height: 2;
}
code {
    font-size: 87.5%;
    word-wrap: break-word;
    font-weight: bold;
}
.form-select {
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


.form-range::-webkit-slider-thumb {
  appearance: none;
  background: #5e3b93; /* Green dot */
  border: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  margin-top: -7px; /* align with track */
  cursor: pointer;
  position: relative;
  z-index: 2;
}
/* Firefox */
.form-range::-moz-range-thumb {
  background: #5e3b93; /* Green dot */
  border: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
/* Firefox */
.form-range::range-thumb {
  background: #5e3b93; /* Green dot */
  border: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
/* Track before/after (using gradient) */
.form-range {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    #5e3b93 var(--value, 40%),
    #5e3b93 var(--value, 40%)
  );
}


/* Remove Bootstrap defaults */
.form-range {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  height: 6px;
  border-radius: 3px;
  background-image: linear-gradient(
    to right,
    #5e3b93 0%,
    #5e3b93 var(--value, 40%),
    #5e3b93 var(--value, 40%),
    #5e3b93 100%
  );
}

/* WebKit (Chrome, Safari, Edge) */
.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: #5e3b93; /* dot color */
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: none;
  margin-top: 0px; /* align with track */
  cursor: pointer;
  position: relative;
  z-index: 2;
}

/* Firefox */
.form-range::-moz-range-thumb {
  background: #5e3b93;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

/* Remove Firefox’s default blue track */
.form-range::-moz-range-track {
  background: transparent;
}
.ap-score-calculator code{
    font-size: 30px;
    color: #5e3b93;
}
.form-select, .form-control {
    font-size: 15px;
    padding: 5px 5px;
}

    /* Nutrition Facts table look */
    .results-box{background:#fff;border:1px solid #e6e6e6;border-radius:.5rem}
    .nfacts{background:#5e3b931f;border:2px solid #5e3b93;padding:12px;}
    .nf-title{font-weight:800;font-size:1.8rem;line-height:1;margin-bottom:6px;color: #5e3b93}
    .nf-thick{border-top:8px solid #5e3b93;margin:8px 0}
    .nf-mid{border-top:3px solid #5e3b93;margin:6px 0}
    .nf-thin{border-top:1px solid #5e3b93;margin:4px 0}
    .nf-row{display:flex;justify-content:space-between;align-items:flex-end}
    .nf-label{font-weight:600}
    .nf-sub{padding-left:14px;font-weight:400}
    .nf-dv{font-weight:700}
    .nf-foot{font-size:.85rem;color:#444}
    .nf-ing{font-size:.95rem}

.form-check-input {
    accent-color: #5e3b93; /* Bootstrap primary */
  }

    code{white-space:break-spaces}
    .layout-svg{width:100%;height:auto;border:1px dashed #ccc;border-radius:.5rem;background:#fafafa}
    .legend .dot{display:inline-block;width:.8rem;height:.8rem;border-radius:50%;margin-right:.4rem;vertical-align:middle}
    .dot-main{background:#0d6efd}.dot-center{background:#fd7e14}
    .coords-wrap{max-height:220px;overflow:auto}
    .svg-label{font-size:3px;fill:#444}
    .svg-guide{stroke:#aaa;stroke-dasharray:2 2;stroke-width:.6;shape-rendering:crispEdges}
    .svg-grid{stroke:#c9d4e5;stroke-width:.6;shape-rendering:crispEdges}
    .svg-room{stroke:#777;stroke-width:.8;fill:#fff;shape-rendering:crispEdges}




.results-box {
    background: #ebe7f2;
    border: 1px solid #5e3b93 !important;
    border-radius: .5rem;
   padding: 5px 10px !important;
   margin-bottom: 5px !important;
}

.results-boxe .card-body{
    background: #ebe7f2;
    border: 1px solid #5e3b93 !important;
    border-radius: .5rem;
   padding: 5px 10px !important;
   margin-bottom: 5px !important;
}


.all-tools h3 {
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 25px;
}
.all-tools {
    padding-bottom: 30px;
}
.all-tools a{
    color: #5e3b93;
    text-decoration: underline;
    font-size: 15px;
}
.all-tools a:hover{
    color: #5e3b93;
    text-decoration: none;
}
#inputsRow .col-2 {
  padding-left: 5px !important;
  padding-right: 5px !important;
}
div#timeRows .col-3{
    padding-left: 2px;
    padding-right: 2px;
}
input {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    width: 100%;
}

.small-muted {
    font-size: 13px;
}

.results-container h2 {
    font-size: 20px;
    margin: 5px 0;
}

.newstyle {
    padding-bottom: 5px;
    border-bottom: 1px solid #5e3b9361;
    margin-bottom: 5px;
}



/* Show dropdown on hover */
.dropdown:hover > .dropdown-menu {
  display: block;
}

/* Submenu positioning */
.dropdown-submenu {
  position: relative;
}
.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Add an arrow indicator for submenu */
.dropdown-submenu > a::after {
  content: "▶";
  float: right;
}
.dropdown-menu {
    background: #583b85;
    margin: 0;
    margin: 0;
    border-radius: 0;
}

ul.dropdown-menu a {
    text-decoration: none;
    padding: 0;
    margin: 0;
    margin-bottom: 7px;
    font-size: 12px;
    text-align: left;
}
.dropdown-menu a:hover{
    text-decoration: underline;
    background-color: transparent;
}
.dropdown-item {
    padding: 0;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.navbar-nav .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    max-width: 95vw;   /* never go wider than viewport */
  overflow-x: auto;  /* horizontal scroll if too wide */
}
button.navbar-toggler.collapsed {
    background: #ffffff;
}
.dropdown-menu .row {
    margin: 0 !important;
}


.cat-box {
    margin: 50px 0;
}

.cat-box .card-header {
    background: #563a80;
        padding: 10px;
        background-color: #5e3b93 !important;
    background-image: linear-gradient(#5e3b93, #553a7e);
    text-align: center;
}
.cat-box h2 {
    color: #fff;
    margin: 0;
    font-size: 20px;
}

.cat-box .card-body{
    background: #ebe7f2;
    border: 1px solid #5e3b93 !important;
}
.cat-box .card-body ul, .all-calculators ul{
    margin: 0;
    padding: 0;
}
.cat-box .card-body ul li, .all-calculators ul li {
    text-decoration: none;
    margin-bottom: 6px;
    list-style-type: none;
    font-size: 15px;
}
.cat-box .card-body ul li a, .all-calculators ul li a{
    color: #563a80;
}.cat-box .card-body ul li a:hover, .all-calculators ul li a:hover{
    text-decoration: underline;
    background: transparent;
}
.view-category{
    font-weight: bold;
}
.all-calculators {
    background: #ebe7f2;
    border: 1px solid #5e3b93 !important;
}
.category-details {
    margin: 50px 0;
}.all-calculators h2 {
    padding: 30px;
    padding-bottom: 0;
    font-size: 25px;
}

.all-tools span {
  font-size: 25px;
  margin: 20px 15px;
  display: block;
  margin-top: 0;
  color: #5e3b93;
}

.result-box span {
  font-size: 20px;
  display: block;
}

.result-box {
  padding-bottom: 10px;
  border-bottom: 2px solid red;
  margin-bottom: 10px;
}
/* Container card + green accent bar */
.results-boxes{
  border:1px solid #e6e6e6;
  border-radius:12px;
  background:#fff;
  padding:16px 18px;
  position:relative;
}
.results-boxes::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:6px; border-radius:12px 0 0 12px;
  background:#2b7fa8; /* accent */
}
.small-head{
    margin: 0 20px;
}
.check-menu {
  display: flex;
  margin-bottom: 15px;
}
.check-menu-inner span {
  color: #4f616f;
  font-size: 15px;
  margin-right: 5px;
}
.check-menu-inner {
  margin-right: 20px;
}
.check-menu-inner a {
  color: #2a789f;
  font-weight: bold;
  text-decoration: underline;
}


/* Each line item */
.results-boxes .result-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid #f0f0f0;
  margin:0; /* keep a continuous card */
  margin-bottom: 0  !important;
}
.results-boxes .result-box:last-child{ border-bottom:0; }

/* Labels + values */
.results-boxes .result-box > span{
  color:#495057;
  font-weight:500;
}
.results-boxes .result-box > div{
  font-weight:600;
}

/* First row = big Net Pay */
.results-boxes .result-box:first-child > span{
  font-weight:600;
  color:#0f172a;
  margin-bottom:4px;
}
.results-boxes .result-box:first-child{
  display:block;           /* stack title and amount */
  border-bottom:0;         /* no divider under headline */
  padding-bottom:6px;
}
.results-boxes .result-box:first-child #rNet{
  font-size:2rem;
  line-height:1.1;
  font-weight:800;
}

table {
  border-collapse: collapse;
  width: 550px;
  border: 1px solid #2e7ba3;
  margin: 0 auto;
}

table thead {
  background: #2e7ba3;
  color: #fff;
}
table tr, table td {
  border: 1px solid #2e7ba3;
}
table tr:nth-child(even) {background-color: #2e7ba31a;}





/* Optional: compact on small screens */
@media (max-width:576px){
  .results-boxes{ padding:14px 16px; }
  .results-boxes .result-box:first-child #rNet{ font-size:1.8rem; }
}
.fieldset-data {
  width: 100%;
}

.fieldset-data .row > .col-12 {
  padding: 0;
}
.fieldset.form-input-custom {
  padding: 0;
}
.legend-head {
  background: #2b7fa83b;
  font-size: 16px;
  color: #1f5b79;
  padding: 5px 10px;
  font-weight: bold;
  margin: 0 !important;
}
.fieldset .form-input-box {
  padding: 10px;
}
.fieldset.form-input-custom .col-12 {
  padding: 0;
}
.choosestate a {
  font-weight: bold;
  text-decoration: underline;
  color: #2b7fa8;
  margin-right: 9px;
}
.choosestate a:hover, .choosestate-calculator ul li a:hover{
    text-decoration: none;
}
.choosestate {
  font-size: 17px !important;
  color: #193847;
}
.choosestate-calculator ul li {
  display: inline-block;
  width: 32.333%;
  text-align: left;
}
.choosestate-calculator ul li a{
  text-decoration: underline;
  color: #2b7fa8;

}
.choosestate-calculator input {
  width: 100% !important;
  background: #fff;
  border: 2px solid #2b7fa8;
}
#select-state-calculator {
  padding-bottom: 20px;
  width: 80%;
  margin: 0 auto;
}
.home-row{
    background: #f3f7fa;padding-top: 30px;
}

/* ====== Custom Styling ====== */
.navbar {
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
  font-weight: 800;
  color: #2c3e50 !important;
  letter-spacing: 0.5px;
}

.nav-link {
  color: #2c3e50 !important;
  font-weight: 600;
  padding: 0.5rem 1rem;
  transition: color 0.3s ease;
}



.dropdown-menu {
  border-radius: 8px;
  border: 1px solid #eee;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Optional: sticky header */
.navbar.sticky-top {
  position: sticky;
  top: 0;
  z-index: 1000;
}
.logo-container {
  width: 180px;
}
.logo-container img{
    max-width: 100%;
}
.logo-container a{
    padding: 10px 0px;
    margin: 0;
}

.navbar a:hover {
  background-color: #2c6d90;
  color: #fff;
}
.nav-link:hover,
.dropdown-item:hover {
  color: #fff !important;
}
ul.dropdown-menu a {
  text-decoration: none;
  padding: 0;
  margin: 0;
    margin-bottom: 0px;
  margin-bottom: 0px;
  margin-bottom: 7px;
  font-size: 15px;
  text-align: left;
  padding: 10px 25px;
}
ul.dropdown-menu a:hover{
    text-decoration: none;
}
.navbar-nav .dropdown-menu {
  position: static;
  float: none;
  width: auto;
  max-width: 95vw;
  overflow-x: auto;
  background: #327da5;
  border-radius: 5px;
  border: none;
}
.dropdown-menu li {
  margin: 0;
}
ul.dropdown-menu{
    margin: 0;
    padding: 0;
}
button.navbar-toggler.collapsed{
    background: transparent;
}
.logo-container a:hover{
    background-color: transparent;
}















/* For screens larger than a specific breakpoint (e.g., 992px for Bootstrap's 'lg') */
@media (min-width: 1200px) {
    .container-xl {
        max-width: 1250px; /* Your desired custom width */
    }
}




/* Styles applied only when the screen width is 600px or narrower */
@media screen and (max-width: 700px) {
  h1{
    font-size: 25px;
    margin: 10px 0;
  }
  h2, h3{
    font-size: 20px;
    margin: 10px 0;
  }

  p{
    font-size: 15px;
  }
.inner-main-content .container-xl {
    padding: 0;
}
.list-group {
    font-size: 14px;
}
.Calculator-box > div {
  padding: 0 !important;
}

.results-container {
  margin-top: 25px;
}
}

@media (max-width: 600px) {
    table {
          width: 100%;
        }
.math-wrap{font-size:0.92em}
  .mjx-container {
    font-size: 0.9em; /* scale formulas slightly on small screens */
  }
  .Calculator-box{
  background-color: #fff;
  font-size: 12px;
  padding: 15px !important;
}
.form-control {
    font-size: 0.7rem;
}
.main-content {
    padding: 0;
}
.Calculator-box p {
    font-size: 12px;
}
.btn {
    padding: 4px 10px;
    font-size: 10px;
}
.results-boxes{
  font-size: 12px;
}
.results-boxes .results-boxe{
  padding: 10px;
}
.form-input-custom label {
    font-size: 12px;
    color: #5e3b93;
    font-weight: bold;
}
.results-container {
    padding-top: 10px;
}
.all-tools a{
    color: #5e3b93;
    text-decoration: underline;
    font-size: 12px;
}
 .all-cal {
    padding-right: 5px !important;
    padding-left: 5px  !important;
  }
.all-tools h3 {
  font-size: 20px;
}
.inner-main-content h2 {
  font-size: 20px;
}
.navbar-collapse {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 20px;
}.navbar-light .navbar-toggler {
    color: rgba(0, 0, 0, .5);
    border-color: rgba(0, 0, 0, .1);
    background: #fff;
}
}