body, #Wrapper{
  background-color: #f6f5f6 !important;
  }
  
  .accordion h3{
      padding:11px !important;
      color:#ffffff;
      text-align:center;
      font-size:15px
   }
   
   .newcat{
       width: calc(100% - 35px);
       border: none;
       background: transparent;
       color: #4C1158;
       height:30px;
       padding-left: 10px;
   }
   .newcat::placeholder {
        color: #4C1158;
        font-size:15px
   }
  
  .newcat:focus {
   outline-width: 0;
  }
  
  .accDiv {
      background-color: #ffffff !important;
  }
   .accordion h3.ui-accordion-header-active{
       margin-bottom:0px;
   }
   .ui-accordion .ui-accordion-content {
       padding:10px;
       padding-top:20px !important
   }
  
   .surplus, .shortage{
     display:none;
     margin-bottom:40px
   }
  
   .bad span{
     color:rgba(206, 55, 53, 1) !important;
   }
  
   .good span{
      color:rgba(166, 206, 57, 1) !important;
    }
  
   .accordion h3 i{
       display:block;
       position:absolute;
       right:20px;
       top:20px
   }
  
   .period, .selections{
       display:block;
       margin:0 auto;
       width:130px;
       background:transparent
   }
  
   .acc1{
       background: #89A53F;
  background: -moz-linear-gradient(0deg, #89A53F 0%,  #A6CE39 100%);
  background: -webkit-linear-gradient(0deg, #89A53F 0%,  #A6CE39 100%);
  background: linear-gradient(0deg, #89A53F 0%,  #A6CE39 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#89A53F",endColorstr="#A6CE39",GradientType=1);
   }
  
   .acc2{
       background: rgba(166,34,32,1);
  background: -moz-linear-gradient(0deg, rgba(166,34,32,1) 0%, rgba(206,55,53,1) 100%);
  background: -webkit-linear-gradient(0deg, rgba(166,34,32,1) 0%, rgba(206,55,53,1) 100%);
  background: linear-gradient(0deg, rgba(166,34,32,1) 0%, rgba(206,55,53,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#A62220",endColorstr="#CE3735",GradientType=1);
  margin-top:20px !important
   }
  
   .acc2:before{
     content:" ";
     background-image:url(/wp-content/plugins/digitalmavens.v1.1.3/images/icon-expense-w.png?ver=1.1.3);
     position:absolute;
     left: 20px;
   top: 12px;
   width: 42px;
   height: 42px;
   background-size: contain;
   background-repeat: no-repeat;
   }
  
   .acc3{
      background: rgb(63,12,74);
      background: -moz-linear-gradient(0deg, rgba(63,12,74,1) 0%, rgba(132,72,141,1) 100%);
      background: -webkit-linear-gradient(0deg, rgba(63,12,74,1) 0%, rgba(132,72,141,1) 100%);
      background: linear-gradient(0deg, rgba(63,12,74,1) 0%, rgba(132,72,141,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3f0c4a",endColorstr="#84488d",GradientType=1);
   }
  
  
   .tagSection{
       margin-top:0px
   }
   .tags{
      padding:6px;
      display:inline-block;
      background-color:#4A4A4A;
      color:#ffffff;
      cursor:pointer;
      margin-bottom:5px;
      margin-right:5px;
      transition: all 0.3s ease;
      font-size:15px
   }
  
   .income .tags:hover{
       background-color:#4C1158;
   }
  
   .expense .tags:hover{
       background-color:#4C1158;
   }
  
   .addTag{
       display:inline-block;
       background-color:#f4f2f4;
       color:#4c1158;
       border:1px solid #898989;
       padding:3px;
       padding-top:1px;
       cursor:pointer;
       width:100%;
   }
   .addTag .fa{
   vertical-align: middle;
   margin-left:5px
   }
   hr{
       margin-top:25px
   }
  
   .tagItem{
       width:100%;
       clear:both;
       overflow:hidden;
       border-bottom: 1px solid #D8D8D8;
       padding-bottom:30px;
       margin-top:30px
   }
  
  
   .itemInfo{
       display:inline-block;
       width:calc(100% - 25px);
       padding-left:10px;
       color:#4c1158;
       font-size:15px;
       font-weight: 900;
   }
  
   .itemgroup{
       margin-bottom:15px;
       margin-bottom:15px
   }
  
   .itemgroup input,  .itemgroup .itemspan{
       margin-top:5px
   }
  
  
   .activeItem{
       display:block !important;
   }
  
  
   .fa-times{
      color:#4c1158;
      font-weight:100;
      cursor:pointer;
      vertical-align: top;
      padding-top:3px
   }
  
   .selectorSec{
       width:240px;
       overflow:hidden;
       margin-top:10px;
       font-size:15px;
       position: relative;
   }
  
   
   .selectorSec input.amount{
      width:100px;
      display:inline
   }
  
   .selectorSec input,
   .selectorSec select {
       margin-bottom:10px
   }
  
   .selectorSec::after{
      content: " ";
      position: absolute;
      width: 28px;
      height: 100%;
      background-color: #D8D8D8;
      right: 0px;
      top: 0px;
      height: 35px;
      border: 1px solid #979797;
      box-sizing: border-box;
      pointer-events: none;
      background-image: url(/wp-content/plugins/digitalmavens.v1.1.3/images/icon-arrowdown.png?ver=1.1.3);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 10px auto;
   }
   .amount, .itemperiod{
       width:100px;
       height:35px;
       background-color:#F6F5F6;
       border:1px solid #9B9B9B;
       overflow:hidden;
       padding:10px;
       color:#4c1158;
       font-size:15px
   }
  
   .itemperiod{
      padding: 0px;
      width: 130px;
      padding-left: 5px;
      display: inline-block;
      margin-left: 10px;
   }
  
   .currentCal{
       margin-top:15px;
       color:#4c1158;
       font-size:15px
   }
  
   .sectionTotal{
       width:100%;
       background-color:#4A4A4A;
      position: absolute;
      left:0px;
      bottom:0px;
      padding-top:20px;
      padding-bottom:20px;
      text-align:center;
      font-weight:700;
      color:#ffffff
   }
  
   .accDiv{
       padding-bottom:100px !important;
       position: relative;
   }
  
   .resultacc{
      padding-bottom:50px !important;
   }
  
   .totalIncome, .operator, .totalExpense, .totalResult{
       display:inline-block;
       width:40%;
       text-align:center;
       color:#4c1158;
       font-size:15px;
       font-weight:500
   }
  
   .totalIncome span, .totalExpense span{
       font-size:20px !important
   }
  
   .operator{
       vertical-align: top;
       padding-top:10px;
       font-weight: 900;
       width:16%;
   }
  
   .totalResult{
       width:100%;
       margin-top:20px
   }
  
   .calSection{
      text-align:center
   }
  
   .periodoverlay{
       display:inline-block;
       position: relative;
       margin:0 auto;
       position: relative;
   }
  
   input, select, option{
      background-color:#f6f5f6 !important;
      color:#6b6b6b !important;
      border-radius: 0px !important;
   }
   
  select:focus {
      background-color: #f6f5f6!important;
   }
   
  
   .periodoverlay::after{
      content:" ";
      position: absolute;
      width:28px;
      height:100%;
      background-color:#D8D8D8;
      right:0px;
      top:0px;
      border: 1px solid #979797;
      box-sizing: border-box;
      pointer-events: none;
      background-image:url(/wp-content/plugins/digitalmavens.v1.1.3/images/icon-arrowdown.png?ver=1.1.3);
      background-repeat:no-repeat;
      background-position: center center;
      background-size:10px auto;
   }
  
   .accordion h3 .fa-angle-down::before{
      content:" ";
      position: absolute;
      width:100%;
      height:100%;
      background-image:url(/wp-content/plugins/digitalmavens.v1.1.3/images/icon-arrowdown.png?ver=1.1.3);
      background-repeat:no-repeat;
      background-position: center center;
      background-size:15px auto;
      width: 15px;
      height: 15px;
      right: 0px;
      transition: all 0.3s ease;
   }
  
   .accordion h3.ui-accordion-header-active .fa-angle-down::before{
      transform-origin: center center;
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: rotate(180deg);
   }
  
   .totalsecondLine{
       font-size:20px;
       margin-top:10px
   }
  
   .totalsecondLine span{
       color:#E07227;
   }
  
   .errormsg{
       font-size:12px;
       padding:0px;
       margin:0px;
       padding-top:5px;
       color:rgba(206,55,53,1);
   }
  
   .chartWapper{
       width:100%;
       max-width:400px;
       margin:0 auto;
       display:none;
       margin-bottom:30px;
   }
  
   #chartCanvas{
       width:300px;
       height:300px;
       margin:0 auto;
       position: relative;
       clear:both;
       display:block
   }
  
   .chartlegend{
       width:120px;
       margin:0 auto;
       margin: 0 auto;
       overflow: visible;
       font-weight:600;
       margin-top:10px;
       font-size:15px
   }
  
   .chartlegend div{
       background-color:rgba(166, 206, 57, 1);
       width:35px;
       height:12px;
       display:inline-block;
       margin-right:10px
   }
  
   .chartlegend.exp div{
      background-color:rgba(206, 55, 53, 1);
   }
  
   #useremail::-webkit-input-placeholder { /* Edge */
      color: #ffffff;
    }
    
    #useremail:-ms-input-placeholder { /* Internet Explorer 10-11 */
      color: #ffffff;
    }
    
    #useremail::placeholder {
      color: #ffffff;
    }
  
    .itemName{
        display:inline-block;
        width:calc(100% - 320px);
       
    }
  
    .itemDescInfo{
      width:calc(100% - 400px);
      float:left;
      padding-left:10px;
      color:#4c1158;
      font-size:14px
    }
  
    .itemspan{
      margin-right:5px
    }
  
    .inputgroup{
      display:inline-block;
      width: 300px;
    }
  
  
    #pdfForm{
      text-align:left; 
      display:block; 
   
      margin:0 auto; 
      position:relative
    }
  
    .emailinput{
      width:40%; 
      position:relative;
      display:inline-block
    }
  
    .genResult{
        margin-left:20px !important
    }
  
    @media only screen and (max-width: 810px) {
      #pdfForm{
          text-align:center; 
        }
  
        .emailinput{
          width:100%; 
        }
        .genResult{
          margin-left:auto !important;
          display:inline-block;
      }
    }
  
  
    @media only screen and (max-width: 600px) {
      .itemName{
          display:inline-block;
          width:90%;
      }
  
      .itemDescInfo{
          width:90%;
      }
      .inputgroup{
          display:inline-block;
          width: 100%;
        }
    }
  
    div, input, select, h3{
        border-radius: 0px !important;
        -webkit-appearance: none !important;
    }
  
  /* ---- PennySaver Calculator ---- */
  .pennysaver {
    max-width: 820px;
    margin: 0 auto;
    padding: 10px 20px 30px;
  }
  
  .pennysaver-intro {
    color: #4c1158;
    font-weight: 500;
    font-size: 15px;
    margin: 0 0 25px;
    padding: 0 10px;
  }
  
  .pennysaver-accordion h3.pennysaver-goal-header {
    position: relative;
    margin-top: 20px !important;
    border: 0;
    background: #A6CE39;
    background: -moz-linear-gradient(0deg, #A6CE39 0%, #89A53F 100%);
    background: -webkit-linear-gradient(0deg, #A6CE39 0%, #89A53F 100%);
    background: linear-gradient(0deg, #A6CE39 0%, #89A53F 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#A6CE39",endColorstr="#89A53F",GradientType=1);
  }
  
  .pennysaver-accordion h3.pennysaver-goal-header:first-child {
    margin-top: 0 !important;
  }

  .pennysaver-accordion h3.pennysaver-goal-header .pennysaver-delete-btn {
    position: absolute;
    right: 48px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: #ce3735;
    cursor: pointer;
    z-index: 2;
    line-height: 1;
    padding-bottom: 10px;
  }

  .pennysaver-accordion h3.pennysaver-goal-header .pennysaver-delete-btn i {
    position: static;
    display: inline-block;
    right: auto;
    top: auto;
    font-size: 16px;
    color: #ce3735;
    pointer-events: none;
  }

  .pennysaver-accordion h3.pennysaver-goal-header .pennysaver-delete-btn:hover,
  .pennysaver-accordion h3.pennysaver-goal-header .pennysaver-delete-btn:hover i {
    color: #a62220;
  }

  .pennysaver-accordion h3.pennysaver-goal-header .pennysaver-delete-btn:disabled,
  .pennysaver-accordion h3.pennysaver-goal-header .pennysaver-delete-btn:disabled i {
    opacity: 0.35;
    cursor: not-allowed;
    color: #ce3735;
  }

  .pennysaver-fields {
    display: block;
  }
  
  .pennysaver-field {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 18px;
  }

  .pennysaver-field:not(:last-child) {
    border-bottom: #979797 solid 1px;
    padding-bottom: 18px;
  }
  
  .pennysaver-field-meta {
    flex: 1 1 50%;
    min-width: 0;
    max-width: 50%;
  }
  
  .pennysaver-field-control {
    flex: 0 1 50%;
    min-width: 180px;
    max-width: 320px;
  }
  
  .pennysaver-field-control input::placeholder {
      color: #00000044;
  }
  
  .pennysaver-field-meta label {
    display: block;
    color: #4c1158;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 4px;
    font-family: 'Montserrat', sans-serif;
  }
  
  .pennysaver-hint {
    color: #666;
    font-size: 13px;
    font-weight: 400;
    margin: 0;
    padding: 0;
    line-height: 1.4;
  }
  
  .pennysaver-field-control input[type="text"],
  .pennysaver-field-control input[type="number"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #9b9b9b;
    background: #fff;
    color: #000000;
    font-size: 14px;
    box-sizing: border-box;
  }
  
  .pennysaver-field-control input:focus {
    outline: 1px solid #4c1158;
  }
  
  .pennysaver-cycle-tabs {
    display: inline-flex;
    width: 100%;
    max-width: 360px;
    overflow: hidden;
    border: 1px solid #4D1E58;
    border-radius: 10px !important;
    background: #ffffff;
  }

  .pennysaver-cycle-tabs .ps-cycle-tab {
    flex: 1 1 0;
    margin: 0;
    padding: 10px 8px;
    border: none;
    border-right: 1px solid #4D1E58;
    background: #ffffff;
    color: #4D1E58;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    -webkit-appearance: none !important;
    border-radius: 0 !important;
  }

  .pennysaver-field-cycle {
    align-items: center;
  }

  .pennysaver-cycle-tabs .ps-cycle-tab:last-child {
    border-right: none;
  }

  .pennysaver-cycle-tabs .ps-cycle-tab.is-active {
    background: #4D1E58;
    color: #ffffff;
  }

  .pennysaver-cycle-tabs .ps-cycle-tab:hover:not(.is-active) {
    background: #4D1E5877;
    color: #ffffff;
  }

  .pennysaver-field-cycle .pennysaver-field-control {
    max-width: 360px;
    flex: 1 1 45%;
  }
  
  .pennysaver-output {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e5e5e5;
  }

  .pennysaver-output-main {
    flex: 1 1 50%;
    min-width: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
  }
  
  .pennysaver-output .ps-need {
    color: #4c1158;
    font-size: 16px;
    font-weight: 400;
    margin: 0 0 14px;
    line-height: 1.5;
  }

  .pennysaver-output .ps-need-lead {
    display: block;
  }

  .pennysaver-output .ps-need-amount {
    display: block;
    margin-top: 6px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
  }
  
  .pennysaver-output .ps-error {
    color: #ce3735;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 14px;
  }
  
  .ps-progress-wrap {
    flex: 1 1 50%;
    min-width: 0;
    margin-bottom: 10px;
    text-align: center;
  }
  
  .ps-progress-label {
    color: #4c1158;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 8px;
  }
  
  .ps-progress-bar {
    width: 100%;
    min-width: 100%;
    max-width: 320px;
    height: 18px;
    margin: 0;
    border: 1px solid #A6CE39;
    background: #ffffff;
    overflow: hidden;
    box-sizing: border-box;
  }
  
  .ps-progress-fill {
    height: 100%;
    width: 0;
    background: #A6CE39;
    transition: width 0.25s ease;
  }

  .pennysaver-summary {
    margin-top: 36px;
    padding: 0 10px;
  }

  .pennysaver-summary-title {
    color: #4c1158;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 14px;
  }

  .pennysaver-summary-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .pennysaver-summary-table th,
  .pennysaver-summary-table td {
    border: 1px solid #9b9b9b;
    padding: 10px 12px;
    text-align: left;
    color: #4c1158;
    font-size: 14px;
    word-wrap: break-word;
  }

  .pennysaver-summary-table th {
    background: #4c1158;    
    font-weight: 700;
  }

  .pennysaver-summary-table .ps-summary-total td {
    background: #A6CE39;
    font-weight: 700;
  }
  
  .pennysaver-actions {
    margin-top: 24px;
    text-align: center;
  }
  
  .pennysaver-add-btn {
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
    text-transform: uppercase;
    padding: 12px 32px;
    border: none;
    color: #fff;
    background: #4c1158;
    border: 2px solid #ffffffff;
  }
  
  .pennysaver-add-btn:hover {
    background:#fff;
    color:#4c1158;
    border: 2px solid #4c1158;
  }

  .pennysaver-add-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
  
  .pennysaver-limit-msg {
    color: #4c1158;
    font-size: 13px;
    margin-top: 10px;
  }
  
  .ui-datepicker {
    z-index: 100 !important;
  }
  
@media only screen and (max-width: 600px) {
  .pennysaver-field {
    flex-direction: column;
    gap: 8px;
  }

  .pennysaver-field-control {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }

  .pennysaver-output {
    flex-direction: column;
    gap: 16px;
  }

  .pennysaver-output-main,
  .ps-progress-wrap {
    flex: 1 1 auto;
    width: 100%;
  }

  .pennysaver-summary-table th,
  .pennysaver-summary-table td {
    font-size: 12px;
    padding: 8px;
  }
}