:root {
  --mzc-yellow: #EDB601;
  --mzc-highlight: #fcf1cc;
  --mzc-light-gray: #f6f6f6;
  --mzc-black: #222222;
}


/*******************************************************/

/********************************************************
  ZAKAT CALCULATOR
********************************************************/

.zakat-calculator-holder {
  max-width: 800px;
  margin: 0 auto;
  background-color: var(--mzc-light-gray);
}
.zakat-calculator {
  padding: 40px;
}
.zakat-calculator__heading {
  margin-bottom: 20px;
}
.zakat-calculator__heading h3 {
  color: var(--mzc-yellow);
  font-weight: 400;
}
.zakat-calculator__brief {
  font-size: 0.8em;
  font-style: italic;
}
.zakat-calculator .form-text {
  font-size: 0.8em;
  color: var(--mzc-black);
  font-style: italic;
}
.zakat-calculator h2 {
  margin: 20px 0;
}
.zakat-calculator .row {
  border-bottom: 1px solid var(--mzc-yellow);
  padding-bottom: 10px;
}
.zakat-sub-totals h4 {
  font-size: 1.2em;  
}
.zakat-calculator__total {

}
.zakat-calculator__total-amount {
  padding: 10px;
  background-color: var(--ehsaas-highlight);
  text-align: center;
}

#nisab-value-check {
  margin: 0;
  padding: 0;
}
span.nisab-value-check-inner {
  color: #057705;
}

/*******************************************************/

/********************************************************
  BUTTONS
********************************************************/

input.mzc-btn { 
  display: inline-block;
  position: relative;
  line-height: 100%;
  padding: 10px 15px;
  margin: 15px 0;
  background-color: var(--mzc-yellow);
  border: 1px solid var(--mzc-yellow);
  color: var(--mzc-black);
  font-size: 1.5em;
  text-align: left;
  transition: all 0.4s ease 0s;
  text-decoration: none;
}

input.mzc-btn:hover,
input.mzc-btn:focus  { 
  background-color: var(--mzc-black);
  border: 1px solid var(--mzc-black);
  color: #ffffff;
}