body {
   font-family: "Lato", sans-serif !important;
   font-size: 16px;
 }

 .content-area {
   background-color: red;
 }

 .container {
   margin-top: 20px;
 }

 .error {
  border: 1px solid red; /* Example: Red border for error */
}

 .header {
   text-align: center;
   margin-bottom: 20px;
   font-size: 16px;
 }

 .header img {
   max-width: 150px;
 }

 .step {
   margin-top: 20px;
 }

 .font16 {
   font-size: 16px;
 }

 .result-box {
   background-color: #f8f9fa;
   /* padding: 20px; */
   padding: 12px 22px 9px 22px;
   border-radius: 5px;
   margin-top: 20px;
 }

 .result-box h5 {
   margin-bottom: 20px;
 }

 .result-box .result {
   display: flex;
   justify-content: space-between;
   margin-bottom: 10px;
 }

 .result-box+.form-control[disabled],
 .form-control[readonly],
 fieldset[disabled] .form-control {
   background-color: #010a8a !important;
   color: #f8f9fa !important;
   font-size: 2rem !important;
   width: 120px !important;
   height: 52px !important;
   font-size: 20px !important;
 }

 .form-control-bg {
   color: #fff !important;
   font-size: 2rem !important;
   width: 100px !important;
 }

 .result-box .result span {
   font-weight: bold !important;
 }

 #causes-solutions {
   margin-top: 40px !important;
   display: none;
   margin-bottom:0;

 }

 .description {
   font-family: "Lato";
   color: rgba(0, 0, 0, 0.5);
   text-align: center;
 }

 /* .chart {
   box-sizing: content-box;
   min-width: 250px !important;
   height: 250px !important;
   margin-top: 8rem !important;
   width: 425px !important;
 } */

 .chart{
    height: 200px !important;
    width: 425px !important;
 }
 .chart1{
    height: 200px !important;
    width: 300px !important;
 }

 /* .chart1 {
  box-sizing: content-box;
  margin-top: 8rem !important;
  height: 200px !important;
} */

.chart-bottom     { display: flex; align-items: end !important; }


audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline;
}

 .sectionheader {
   background-color: #f8f9fa;
   color: #333;
   font-size: 25px;
   padding: 15px;
   margin-bottom: 15px;
   font-weight: 700;
 }

 .select2-container,
 .select2-container--default .select2-selection--single {
   border: 0 !important;
 }

 .select2-container--default .select2-selection--single {
   background: #fcfafb !important;
   padding: 8px !important;
 }

 .select2-container .select2-selection--single {
   height: 45px !important;
 }

 .select2-container--default .select2-selection--single .select2-selection__arrow {
   top: 8px !important;
 }

 .select2-container,
 .select2-container--default .select2-selection--single {
   width: 100% !important;
 }

 .result-box+.form-control[disabled],
 .form-control[readonly],
 fieldset[disabled] .form-control {
   padding: 25px !important;
 }

 .title {
   font-size: 25px;
   margin-top: 25px;
   font-weight: 700;
 }

 .title2 {
   font-size: 20px;
   margin-top: 25px;
   font-weight: 700;
 }

 .rate {
   font-weight: 700;
   font-size: 20px;
   color: #13239d;
 }

 .calculator {
   border-radius: 5px;
   margin-top: 20px;
 }

 .calculator .result {
   margin-bottom: 10px;
   background: #f8f9fa;
   padding: 15px;
   text-align: center;
   min-height: 225px;
 }
 .calculator .result input {
   margin: auto;
   text-align: center;
   margin-top: 10px;
   width: 100% !important;
   height: 36px;
   font-size: 20px !important;
 }

 #footer {
   position: fixed;
   bottom: 0;
   padding-top: 1.2rem;
   padding-bottom: 1.2rem;
   background-color: #f8f9fa;
   width: 100%;
   z-index: 9;
   text-align: center;
   font-size: 1.2em;
   color: rgba(0, 0, 0, 0.8);
 }

 .paralegals {
   /* display: none; */
 }

 .paralegalToggle {
   cursor: pointer;
   -webkit-user-select: none;
   /* Safari */
   -ms-user-select: none;
   /* IE 10 and IE 11 */
   user-select: none;
   /* Standard syntax */
 }

 .custom-range {
   width: 80%;
   /* Set the width of the slider */
   margin: 20px auto;
   /* Center the slider */
 }

 /* Custom styles for the thumb (indicator) of the slider */
 .custom-range::-webkit-slider-thumb {
   width: 20px !important;
   /* Set the width of the thumb */
   height: 20px !important;
   /* Set the height of the thumb */
   background-color: #4387ec !important;
   /* Set the color of the thumb */
   border: 1px solid #ccc;
   /* Add a border to the thumb */
 }

 /* Custom styles for the value displayed in the middle */
 .slider-value {
   position: relative;
   text-align: center;
   color: white;
   margin-top: -25px;
   /* Position the value above the slider */
   font-size: 12px;
 }

 .pb-5 {
   padding-bottom: 5rem !important;
 }

 .select2-results__options {
   font-size: 16px;
 }

 .progress {
   /* background: linear-gradient(to right, #82CFD0 0%, #82CFD0 40%, #fff 40%, #fff 100%); */
   border: solid 2px #fafafa;
   border-radius: 8px;
   height: 10px !important;
   width: 400px;
   outline: none;
   transition: background 450ms ease-in;
   -webkit-appearance: none;
   overflow: visible !important;
   margin: 20px auto !important;
 }

 .progress::-webkit-slider-thumb {
   width: 30px !important;
   height: 30px !important;
   border-radius: 50%;
   -webkit-appearance: none;
   cursor: pointer;
   background: #4387ec;
 }

 /* checkbox checked */
 input[type=checkbox]:checked:before {
   font-weight: bold;
   color: white;
   content: "✓";
   margin-left: 2px;
   font-size: 14px;
 }

 /* disabled input */
 input:disabled {
   background: rgba(0, 0, 0, 0.3);
 }

 input:disabled:checked {
   border: 1px solid rgba(0, 0, 0, 0.3);
 }

 input[type=radio]:disabled:checked:before {
   display: block;
   height: 14px;
   width: 14px;
   position: relative;
   left: 2px;
   top: 2px;
   background: white;
   border-radius: 100%;
   content: "";
 }

 /* SWITCH STYLES */
 /* SOURCE: https://proto.io/freebies/onoff/ */
 .onoffswitch {
   position: relative;
   width: 56px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
 }

 .onoffswitch-checkbox {
   display: none;
 }

 .onoffswitch-label {
   display: block;
   overflow: hidden;
   cursor: pointer;
   border: 2px solid #ffffff;
   border-radius: 20px;
   margin: 0;
 }

 .onoffswitch-inner {
   display: block;
   width: 200%;
   margin-left: -100%;
   transition: margin 0.3s ease-in 0s;
 }

 .onoffswitch-inner:before,
 .onoffswitch-inner:after {
   display: block;
   float: left;
   width: 50%;
   height: 22px;
   padding: 0;
   line-height: 22px;
   font-size: 12px;
   color: black;
   font-family: Trebuchet, Arial, sans-serif;
   font-weight: bold;
   box-sizing: border-box;
 }

 .onoffswitch-inner:before {
   /* content: "ON"; */
   content: "";
   padding-left: 6px;
   background-color: #303fc9;
   color: #ffffff;
 }

 .onoffswitch-inner:after {
   /* content: "OFF"; */
   content: "";
   padding-right: 6px;
   background-color: #e85764;
   color: #ffffff;
   text-align: right;
 }

 .onoffswitch-switch {
   display: block;
   width: 12px;
   height: 15px;
   margin: 5px;
   background: #ffffff;
   position: absolute;
   top: 0;
   bottom: 0;
   right: 30px;
   border: 2px solid #ffffff;
   border-radius: 20px;
   transition: all 0.3s ease-in 0s;
 }

 .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
   margin-left: 0;
 }

 .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
   right: 0px;
 }

 .hidden {
   display: none;
 }

 .highlight {
   display: block;
 }

 .list-style           { padding: 0; margin: 0; }
 .list-style li       {  list-style: none; margin: 8px 0; border-bottom: 1px solid #ccc; padding: 0; padding-bottom: 8px; }


 #causes-list,
 #solutions-list           { padding: 0; margin: 0; }

 #causes-list .cause,
 #solutions-list .solution       {  list-style: disc; margin:8px 0 0 20px; border-bottom: 0; padding: 0; padding-bottom: 8px; }

 .title3        { padding: 10px; border-bottom: 1px solid #cccccc; margin-bottom: 20px; }

   /* Default Slider Style */
input[type=range].custom-range {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background: #ddd;
  border-radius: 5px;
  outline: none;
  opacity: 0.7;
  transition: opacity .2s, background-color .2s;
}

input[type=range].custom-range:hover {
  opacity: 1;
}

input[type=range].custom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #0d6efd;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color .2s;
}

input[type=range].custom-range::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #0d6efd;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color .2s;
}

/* Custom Color on Active */
input[type=range].custom-range.active {
  background: #0d6efd;
}

input[type=range].custom-range.active::-webkit-slider-thumb {
  background: #FF5722;
}

input[type=range].custom-range.active::-moz-range-thumb {
  background: #FF5722;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

.mt-15 {
    margin-top: -15px !important;
}


.mte-5{
    margin-top: 5rem !important;
}

#causes-list, #solutions-list {
    margin-left: 34px;
}