.elementor-5934 .elementor-element.elementor-element-aaa5d60{--display:flex;}.elementor-5934 .elementor-element.elementor-element-6ea89b5{width:100%;max-width:100%;}.elementor-5934 .elementor-element.elementor-element-6ea89b5 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-5934 .elementor-element.elementor-element-6ea89b5.xpro-widget-bg-overlay:before{transition:background 0.3s;}/* Start custom CSS for html, class: .elementor-element-6ea89b5 */.cal-main {
          margin: 0 auto;
          font-family: "Nunito", Sans-serif;
      }

      .cal-main h3,
      .cal-main h2 {
          color: #246fc8;
          margin: 0px 0px 20px 0px;
      }

      .cal-main label {
          color: #333 !important;
          font-weight: 500;
          font-size: 16px !important;
          margin-top: 5px;

      }

      .cal-main .element:not(.cal-btn) {
          padding: 10px;
          margin-bottom: 0px;

      }

      .cal-btn {
          padding: 15px;
      }

      .cal-main .element label {
          display: inline-block;
          margin-bottom: 5px;
          width: 100%;
          vertical-align: top;
          font-size: 18px;

      }

      .cal-main .element label sup {
          padding-left: 3px;
      }

      .cal-main .element label p {
          margin: 0px;
          font-size: 11px;
          background-color: #246fc8;
          padding: 2px 10px;
          display: inline-block;
          color: #fff;
          float: left;
          border-radius: 3px;
          margin-top: 5px;


      }

      .cal-main .element label span {
          display: inline-block;
          margin-left: 5px;
          background: #333;
          color: #fff;
          width: 18px;
          text-align: center;
          border-radius: 50px;
          height: 18px;
          box-sizing: border-box;
          font-size: 11px;
          cursor: pointer;



      }

      .cal-main .element input[type=number] {
          padding: 10px;
          border-radius: 3px;
          min-height: 20px;
          font-weight: 600;
          font-size: 16px;
          outline: 0;
          text-align: center;
          width: 98%;
          box-sizing: border-box;
          margin-bottom: 10px;

      }


      .cal-inner {
          padding: 10px;
          font-weight: 400;
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
          line-height: 1.5;
          color: #8c8f94;
          background: #fff;
          box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
          overflow: auto;
          zoom: 1;
      }

      button.cal {
          background-color: #246fc8;
          padding: 10px 20px;
          font-family: museo-slab;
          font-size: 20px;
          font-weight: 500;
          font-style: normal;
          font-stretch: normal;
          line-height: normal;
          letter-spacing: .67px;
          color: #fff;
          width: -webkit-fit-content;
          width: fit-content;
          cursor: pointer;
          border: none;
          border-radius: 0;
          box-shadow: none;
          transition: background-color .15s linear;
      }

      button.cal:hover {
          background-color: #04A4CC;
      }

      #result_data {
          display: block;
          font-size: 28px;
          color: #fff;
          margin: 10px;
      }

      .result {
          text-align: center;
          background: #fbfbfb !important;
          color: #fff !important;
      }

      .result h1 {
          color: #246fc8 !important;
      }

      .expense_options {
          display: inline-block;
          text-align: center;
          border: 1px solid #ddd;
          box-sizing: border-box;
      }

      .expense_options input {
          display: block;
      }

      .tabs {
          overflow: hidden;
          border-bottom: 1px solid #ccc;
          margin-bottom: 10px;
          background-color: #04A4CC;

      }

      .tabs button {
          background-color: inherit;
          float: left;
          border: none;
          outline: none;
          cursor: pointer;
          padding: 14px 16px;
          transition: 0.3s;
          font-size: 17px;
          color: #fff;
          font-weight: bold;
      }

      .tabs button:hover {
          background-color: #ddd;
      }

      .tabs .tablinks.active {
          background-color: #000;
          color: #fff;
      }

      .tabcontent {
          display: none;
          width: 100%;
      }

      .expense_options {
          display: none;
          margin-bottom: 10px;
      }

      .tabcontent {
          margin-bottom: 20px;
      }

      .inline {
          display: inline-block !important;
      }

      .block {
          display: block !important;
      }

      .tabcontent .element {
          display: inline-block;
          width: 32%;
          box-sizing: border-box;
          margin: 5px;
      }

      .input-slider {
          position: relative;
      }

      .input-slider .prefix {
          position: absolute;
          left: 16px;
          top: 34%;
          transform: translateY(-50%);
      }

      .input-slider input[type="number"] {
          padding-left: 25px;

      }


      .side_menu {
          width: 35%;
          float: left;

      }

      .result_section {
          width: 65%;
          float: left;
      }

      .clearfix::after {
          content: "";
          clear: both;
          display: table;
      }




      .panel {
          display: none;
          padding: 10px;
          background-color: #f4f4f4;
          border: 1px solid #ddd;
          border-top: none;
      }

      .tab.expanded {
          color: black;
          font-weight: 600;
          border-bottom: 3px solid #ccc;

      }

      .tab {
          cursor: pointer;
          padding: 8px 16px;
      }

      .tab:hover {
          opacity: 0.9;
      }

      .tab::after {
          content: '+';
          float: right;
          margin-left: 5px;
          font-size: 18px;
          font-weight: 600;
          background: #ffffff80;
          width: 25px;
          text-align: center;
          color: #000;
          border-radius: 13%;
      }

      .tab.expanded::after {
          content: '-';
          font-size: 18px;
          font-weight: 600;
      }

      :root {
          --housing-color: #1cd5bd;
          --food-color: #d187e0;
          --transportation-color: #00bde7;
          --education-color: #246fc8;
          --personal-color: #ffa846;
          --healthcare-color: #ff5c3c;
          --savings-color: #3c4b5a;
      }

      .expense_list {
          margin: 0px;
          padding: 0 15px 15px 15px;
      }

      .expense_list li {
          text-align: left;
          position: relative;
          color: #000;
      }

      .expense_list li span {
          float: right;
          font-weight: 600;
      }

      .expense_list li {
          text-align: left;
          list-style-type: none;
          padding-left: 20px;
          position: relative;
      }

      .expense_list li::before {
          content: '';
          width: 10px;
          height: 10px;
          background-color: black;
          border-radius: 50%;
          display: inline-block;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
      }

      .expense_list li:nth-child(1)::before {
          background-color: var(--housing-color);
      }

      .expense_list li:nth-child(2)::before {
          background-color: var(--food-color);
      }

      .expense_list li:nth-child(3)::before {
          background-color: var(--transportation-color);
      }

      .expense_list li:nth-child(4)::before {
          background-color: var(--education-color);
      }

      .expense_list li:nth-child(5)::before {
          background-color: var(--personal-color);
      }

      .expense_list li:nth-child(6)::before {
          background-color: var(--healthcare-color);
      }

      .expense_list li:nth-child(7)::before {
          background-color: var(--savings-color);
      }


      .housing_tab {
          background-color: var(--housing-color);
          color: white;
      }

      .food_tab {
          background-color: var(--food-color);
          color: white;
      }

      .transportation_tab {
          background-color: var(--transportation-color);
          color: white;
      }

      .education_tab {
          background-color: var(--education-color);
          color: white;
      }

      .personal_tab {
          background-color: var(--personal-color);
          color: white;
      }

      .healthcare_tab {
          background-color: var(--healthcare-color);
          color: white;
      }

      .savings_tab {
          background-color: var(--savings-color);
          color: white;
      }


      .slider {
          -webkit-appearance: none;
          width: 100%;
          height: 10px;
          border-radius: 5px;
          background: #d3d3d3;
          outline: none;
          opacity: 0.7;
          -webkit-transition: .2s;
          transition: opacity .2s;
          z-index: 0;
      }

      .slider:hover {
          opacity: 1;
      }

      .slider::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 13px;
          height: 13px;
          border-radius: 50%;
          background: #04AA6D;
          cursor: pointer;
          z-index: 1;
      }

      .slider::-moz-range-thumb {
          width: 13px;
          height: 13px;
          border-radius: 50%;
          background: #04AA6D;
          cursor: pointer;
          z-index: 1;
      }

      .final_note {
          border: solid .0625rem #a6a6a6;
          border-radius: 7px;
          padding: 15px;
          margin: 15px;

      }

      .final_note div {
          color: #000;
          font-size: 20px;
          font-weight: 500;
          padding: 15px;
          text-align: left;

      }

      .final_note div span {
          float: right;
      }

      .final_note div:nth-child(2) {
          color: #000;
          border-bottom: 2px dashed #ddd;

      }

      #final_note {
          color: #000;
      }


      @media only screen and (min-width: 769px) {

          .input-box {
              align-items: center;
              max-width: 300px;
              border: 0px;
              border-radius: 4px;
              padding-left: 0.5rem;
              overflow: hidden;
              font-family: sans-serif;

          }

          .input-box .prefix {
              font-weight: 100 !important;
              font-size: 16px;
              color: #000;
          }

          .input-box input[type="number"] {
              font-size: 14px;
              outline: none;
              padding: 0.5rem;
              background: #fff;
              border: 1px solid #333 !important;
          }

          .input-box input[type="range"] {
              display: block;
              width: 98%;
          }

          .input-box:focus-within {
              border-color: #777;
          }


      }


      @media only screen and (max-width: 768px) {

          .cal-main .element label {
              display: block;
              min-width: 100%;
              font-size: 16px;
              margin-bottom: 5px;
          }

          .input-box {
              display: block;
              width: 100%;
          }

          .cal-main .element input[type=number] {
              float: none;
          }

          .result h1 {
              color: #71afcb !important;
              font-size: 16px;
          }

          .side_menu,
          .result_section {
              width: 100% !important;

          }

          .cal-inner {
              padding: 0px;
          }

          .result {
              padding: 0px !important;
          }

          .result h3 {
              font-size: 20px;
              margin-top: 10px;
          }

          .final_note {
              padding: 5px;
              margin: 0px;
          }

          .final_note div {
              font-size: 16px;
              padding: 10px 5px;
          }

          #final_note {
              margin-top: 10px;
          }

          .final_note div span 
          {
            display: block;
            float: none;
            font-weight: 700;
          }

          .expense_list {
            margin: 0px !important;
            padding: 0 0px 15px 0px !important;
        }

      }/* End custom CSS */