html,
body {
  margin: 0;
  padding: 0;
  font: 400 14px/16px "Open Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  scroll-behavior: smooth;
}

a.accent{
    color: #2d6069;
}

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }

    .toolbar {
        display: none !important;
    }

    .main-box .flex-box {
        display: none !important;
    }
}

.wide-container {
    background-color: #2d6069;
    color: #fff;
    padding: 10px;
    min-height: 290px;
    height: auto;
    /* background-image: url('/budget/assets/Budget_hero.jpg'); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.container {
    max-width: 1230px;margin: 0 auto;
}

.container.flex {
    display: flex;
}

.lead-container {
    width: 60%;
}

.lead-container a:hover {
    color: #fff;
    opacity: 0.7;
}
.lead-container h2 {
    font-size: 15px;
}

.breadcrumbs-container {
    margin: 0;
    display: flex;
    align-items: center;
  }
  
  .breadcrumbs-container a {
    text-transform: uppercase;
    display: inline-block;
    font-weight: 700;
    font-size: 11px;
    line-height: 10px;
    letter-spacing: 1.2px;
    word-wrap: break-word;
    color: #fff;
    margin: 0 3px;
    opacity: 0.95;
  }







.input-container {
    display: flex;
    flex-wrap: no-wrap;
    margin-bottom: 35px;
    position: relative;
}
.auth-help.hide,
.input-container.hide {
    display: none;
}
.auth-help.final,
.input-container.final {
    display: none;
}
.auth-help.final.show,
.input-container.final.show {
    display: flex;
}

.input-container .Input{
    width: 100%;
    position: relative;
    padding-left: 0;
}


.input-container .Button-holder{
    padding: 10px;
    min-width: 150px;
    height: 65px;
}

.input-container .Button-holder > button{
    height: 100%;
    background-color: #006171;
    color: #ffffff;
    width: 100%;
    /* font-weight: 800; */
    padding: 0;
    font-size: 12px;
}

.input-container .validation-error {
    display: none;
    position: absolute;
    top: 65px;
    left: 0;
    right: 0;
    font-size: 12px;
    color: #fff;
}
.input-container .validation-error.show {
    display: block;
}

.signup-errors {
    margin-top: -30px;
    display: none;
    flex-direction: column;
    margin-bottom: 15px;
}
.signup-errors.show {
    display: flex;
}

.signup-errors span{
    color: red;
}

.auth-help {
    display: flex;
    justify-content: space-between;
}

.auth-help > a {
    color: #fff;
}
.auth-help > p {
    margin: 0;
}
.auth-help > p > a{
    color: #fff;
    text-decoration: underline;
}

.topic-image {
    width: 40%;
    padding-left: 60px;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    object-fit: contain;
}
.topic-image img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: contain;
}


.budget-button-add {
    float: right;
    font-size: .875rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    background-color: #03616f;
    color: #fff;
    border-radius: .25rem;
    border-style: none;
    border-width: 0;
    cursor: pointer;
    -webkit-appearance: button;
    text-transform: none;
    overflow: visible;
    line-height: 1.15;
    margin: 0;
    will-change: transform;
    -moz-osx-font-smoothing: grayscale;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition: -webkit-transform .25s ease-out;
    transition: transform .25s ease-out;
    transition: transform .25s ease-out,-webkit-transform .25s ease-out;
}





























.budget-category-wrapper {
    display: flex;
    flex-direction: column;
    padding: 0 0 0 70px;
}

.budget-category-wrapper .item{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.budget-category-wrapper .item:hover{
    background: #eee;
    cursor: pointer;
}
.budget-category-wrapper .item .input-wrapper {
    margin-right: 50px;
    display: flex;
}

.budget-category-wrapper .item .input-wrapper input {
    width: 100px;
    text-align: right;
}

.budget-category-wrapper .item .input-wrapper .Input:first-of-type {
    margin-right: 45px;
}

.budget-category-wrapper .item h3 {
    flex-grow: 1;
    align-items:center; 
    /* font-weight:bold;  */
    position: relative; 
    flex-wrap: wrap; 
    display: flex; 
    cursor: pointer; 
    font-size: 1.1em; 
    overflow: hidden;
    padding: 0px 4em 0 2em;
    height: 4rem; 
    line-height: 1rem;
    margin: 0px;
}

.btnPrint {
    margin-right: 70px;
}

.register-to-save-panel {
    display: none;
    margin-right: auto;
}

.register-to-save-panel.show{
    display: inline;
}

.totals-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 25px;
    padding-left: 25px;
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.totals-header-tipps {
    margin-right: auto;
    text-align: center;
    background-color: #2d6069;
    padding: 10px;
}
.totals-header-tipps.hide {
    display: none;
}

.totals-header-tipps p {
    font-size: 16px;
    margin: 0;
    color: #fff;
    line-height: 24px;
}

.totals-header-tipps p a {
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
}

.totals-header-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 10px;
    width: 180px;
}
.totals-header-container h3{
    font-size: 13px;
    text-align: center;
    margin: 10px 0px;
    text-transform: uppercase;
    color: #585858;
}

.totals-header-container span {
    padding: 15px 25px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #484848;
    width: 100%;
    text-align: right;
    /* border-bottom: 1px solid #E5E5E5; */
    font-family: "Open Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
}

.totals-header-container .Input input {
    font-size: 20px!important;
    font-weight: bold;
    text-align: right;
    margin-bottom: 1px;
}










/* General */
.Input {display: flex; padding: 20px;}
/* Input */
    .Input input{ color: #484848; height: 45px; -webkit-appearance: none; margin: 0; outline: none; resize: vertical;  font-size:0.9em; box-sizing: border-box;  padding:10px 15px; width: 100%; border-radius:0px 5px 5px 0px; border:1px solid #E5E5E5;}
    .Input input:read-only{color: #aaa;}
/* Label */
    .Input input:last-child{ order: 2; border-radius: 8px; }
    .Input label{ white-space: nowrap; order: -1; border: 1px solid #E5E5E5; border-right: none; border-radius: 5px 0px 0px 5px; text-align: right; display: block;  font-size:0.7em; padding: 13px 15px;  padding-right: 1.5em;  background: rgb(247, 247, 247);}
/* Focus */
    .Input input:focus{ border-color: #000;}
    .Input input:focus + label{ border-color: #000;}
/* Read Only */
    .Input input:read-only{color: #888; background-size: 12px auto; background-position:right 20px top 15px; background-image: url(./lock.svg); background-repeat: no-repeat;}
/* Zoom iOS */
    @supports (-webkit-touch-callout: none) { .Input input{ font-size: 16px; } }






/* General */
.Accordion{ }
/* Icon */
    .Accordion > ul > li > label > img{ width: 35px; height: 35px;margin-right: 15px;
        margin-left: 5px;}
    /* Input */
        .Accordion > ul > li > input{ display: none;}
/* List */
    .Accordion > ul{background: #fff; overflow: hidden;margin: 0; padding: 0px;  }
    .Accordion > ul > li { 
        display: block; 
        padding: 15px 0;
        border-bottom: 1px solid #eee;
     }
    .Accordion > ul > li:last-child{border-bottom: none;}
    .Accordion > ul > li > div{ display: none; background: #fff;overflow: hidden; box-sizing: border-box; }
    /* Content */
        .Accordion > ul > li > label{background-color: #fff; align-items:center; font-weight:normal; position: relative; flex-wrap: wrap; display: flex; cursor: pointer; font-size: 1.2em; overflow: hidden; padding: 0px 3em 0 2em;height: 4rem; line-height: 4rem; margin: 0px;}
        .Accordion > ul > li > label > i{ font-style: normal; align-self: initial; font-weight: normal; margin-left: 15px; color: #aaa; font-size: 0.8em; }
        .Accordion > ul > li:last-chil > p{ border-bottom: none;}
        .Accordion > ul > li > label > span{ text-overflow: ellipsis; color: #aaa;  margin-left: 10px; line-height: 30px; font-size: 12px;}
    /* Selection */
        .Accordion > ul > li > label { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none;  -ms-user-select: none; user-select: none;}
    /* Arrow */
        .Accordion > ul > li > label:after{ content: ""; transform: rotate(45deg); height: 10px; width: 2px; background: #666; right: 26px; border-radius:  2px; top: 50%; text-align: center; line-height: 30px; margin-top: -5px; display: block; position: absolute; text-align: center; }
        .Accordion > ul > li > label:before{ content: ""; transform: rotate(-45deg); height: 10px; width: 2px; background: #666; right: 32px; border-radius:  2px; top: 50%; text-align: center; line-height: 30px; margin-top: -5px; display: block; position: absolute; text-align: center;  }
        .Accordion > ul > li > input:checked + label:after{ transform: rotate(-45deg);}
        .Accordion > ul > li > input:checked + label:before{ transform: rotate(45deg);}
        /* Move */
            .Accordion > ul > li > label:after,.Accordion > ul > li > label:before { -webkit-transition: top 200ms ease-in-out; -moz-transition: top 200ms ease-in-out; -o-transition: top 200ms ease-in-out; transition: top 200ms ease-in-out; -ms-transition: top 200ms ease-in-out;}
    /* Link */
        .Accordion > ul > li > label > a{ 
            min-width: 100px;
            text-align: right;
            text-transform: uppercase; 
            line-height: 3em; 
            height: 3em; 
            /* background: rgba(0, 0, 0,0.04);  */
            letter-spacing: 1px; 
            /* color: #000;  */
            padding: 0px 15px;  
            font-size: 14px;  
            /* border-radius: 1000px; */
            text-decoration: none; 
            color: #484848;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: 400;
            font-size: 16px;
        }
        .Accordion > ul > li > label > a:first-of-type{
            margin-left: auto;
            margin-right: 65px;
        }
        .Accordion > ul > li > label > a:hover{
             /* background: #eee; */
            }
        .Accordion > ul > li.active > label > i{ transform: rotate(180deg);}
    /* Hover */
        .Accordion > ul > li > label:hover{ background: rgb(250, 250, 250); }
    /* Active */
        .Accordion > ul > li > input:checked + label + div{ display: block; }
/* Print */
    @media print {
        .Accordion > ul{ border:none;}
        .Accordion > ul > li > p > a{ display: none;}
        .Accordion > ul > li > p:after{ display: none;}
        .Accordion > ul > li > div{ display: block;}
    }



    @media only screen and (max-width: 900px) {
        .wide-container {
            height: auto;
            padding-bottom: 0;
        }
        
    
        .lead-container {
            width: 100%;
        }
        
        .budget-header {
            font-size: 1.3em;
        }
    
        .budget-sub-header {
            font-size: 0.9em;
        }
    
        .topic-image {
            display: none;
        }
    
        .input-container {
            flex-direction: column;
            margin-bottom: 0;
        }
    
    
        .input-container .Input{
            padding-left: 10px;
        }
    
        .input-container .validation-error {
            position: initial;
        }


        .signup-errors {
            margin-top: 0px;
        }
    
        .auth-help > a {
            margin-top: 20px;
        }
    
        .auth-help.final.show {
            flex-direction: column-reverse;
        }

        .totals-header {
            padding: 10px 0;
        }

        .totals-header input {
            margin-right: 5px;
        }

        .Accordion {
            padding: 0;
        }

        .Accordion > ul > li > label {
            padding-left: 0;
            font-size: 1.2em;
        }

        .Accordion > ul > li > label > a {

        }

        .budget-category-wrapper {
            padding: 0 10px 0 10px;
        }



        .budget-category-wrapper .item h3 {
            padding: 0;
            word-break: break-word;
        }
        .budget-category-wrapper .item h3 .item-number{
            display: none;
        }

        .budget-category-wrapper .item .input-wrapper {
            margin-right: 0;
        }





        .btnPrint {
            margin-right: 0px;
        }
        
        .register-to-save-panel {
            text-align: center;
        }

        .totals-header {
            flex-wrap: wrap;
            margin-left: 0;
            margin-right: 0;
            align-items: flex-end;
        }

        .totals-header-tipps {
            /* margin: 10px; */
        }
        
        .totals-header-tipps p {
            font-size: 12px;
        }

        
        .totals-header-container {
            flex-basis: 33.33%;
            width: 33.33%;
            padding: 0;
        }

        .totals-header-container h3{
            font-size: 13px;
        }
        .totals-header-container:first-of-type {
        }
        
        
        .totals-header-container span {
            font-size: 16px;
        }
        
        .totals-header-container .Input input {
        }

        .budget-category-wrapper .item .input-wrapper .Input:first-of-type {
            margin-right: 0px;
        }
        
    }





.pac-container {
    border-radius: 0 0 4px 4px !important;
    background-color: #fff;
    position: absolute!important;
    z-index: 1000;
    border-top: 1px solid #d9d9d9;
    font-family: Arial,sans-serif;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  
  
  .pac-container .pac-item {
    padding-left: 32px !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  
  .pac-item {
    padding: 4px 2px;
    font-family: "Open Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
    font-size: 18px !important;
    cursor: pointer;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: 30px;
    text-align: left;
    border-top: 1px solid #e6e6e6;
    color: #999;
  }
  
  .pac-container .pac-item span.pac-icon {
    display: none;
  }
  
  .pac-container .pac-item span.pac-item-query {
    font-size: 18px !important;
    font-family: "Open Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
  }