@media screen and (max-width: 480px) {
    .tr--visible {
        display:block;
    }


    .lo-b-cont a {
        width: 50px;
        height: 50px;
        margin: 0 auto;
    }

    .lo-b-cont img {
        visibility: hidden;
        width: 0px;
        height: 0px;
    }
}




.di-a svg {
    stroke: #091f2f;
    fill: #091f2f;
}

.b--b .di-a svg {
    stroke: white;
    fill: white;
}

.node-emergency-alert .b--dark-blue {
    color: #ffffff;
}

.node-emergency-alert .b--dark-blue .lh--000 {
    line-height: 1.5;
    font-family: Lora,serif;
}

.node-emergency-alert .b--dark-blue .t--sans a:link,.node-emergency-alert .b--dark-blue .t--sans a:visited {
    color: #94C5F0;
}

.node-emergency-alert .b--dark-blue .t--sans a:hover {
    color: #d22d23;
}

.contextual {
    z-index: -1;
}

.component-section .contextual {
    z-index: 50;
}

.hero-image,.node-type-topic-page .page--wa .hero-image {
    background-position: 50%;
}

.node-type-topic-page .page--wa .hero-image-wrapper:after {
    top: 0;
}

.b--fw-480 {
    max-height: 480px;
    overflow: hidden;
}

.vid {
    max-height: 800px;
}

.paragraphs-items-field-components>.paragraphs-item-hero-image {
    padding: 0;
}

.paragraphs-item-transaction-grid .lwi-ic img,.paragraphs-item-transaction-grid .lwi-ic svg {
    margin: 0 auto;
    max-height: 100px;
    display: block;
    max-width: 85%;
    width: 100px;
}

@media screen and (max-width: 767px) {
    .paragraphs-item-transaction-grid img.svg-icon {
        max-height:55px;
        display: block;
        max-width: 85%;
        width: 75px;
    }
}

@media screen and (max-width: 480px) {
    .paragraphs-item-transaction-grid img.svg-icon {
        width:55px;
    }
}

@media screen and (max-width: 767px) {
    .news-item-short-listing .cd-ic {
        height:230px;
        width: 100%;
    }
}

@media screen and (min-width: 768px) {
    .news-item-short-listing .cd-ic {
        height:190px;
        width: 190px;
    }
}

.paragraphs-item-text-two-column.col_half img {
    height: auto;
    width: 100%;
}

.contextual.parent-node {
    top: 68px;
    right: 0px;
}

.contextual .trigger.large {
    height: 43px !important;
    width: 43px !important;
    background-size: 40px 40px;
}

.topic-header .intro-text-top #breadcrumb {
    padding: 10px;
    position: absolute;
    text-align: left;
    width: 100%;
    display: none;
}

.bos-messages-wrapper {
    position: absolute;
    width: 100%;
    margin-top: 3rem;
    padding-right: 16.6667%;
    background-color: rgba(255,255,255,.7);
}

.messages,.messages--error,.messages--status,.messages--warning {
    margin: 0;
    padding: 10px 10px 10px 10px;
    border: 2px solid #0075d1;
    z-index: 502;
    background-color: rgba(255,255,255,.7);
}

.message--button {
    border: 2px solid;
    padding: 0px 4px;
    line-height: 16px;
    font-family: monospace;
    font-weight: bold;
    opacity: 0.7;
    font-size: 14px;
    cursor: pointer;
    float: right;
}

.messages__icon {
    margin: 0 auto;
    text-align: center;
    padding-top: 12px;
}

.bc-y {
    border-color: #fcb61a;
}

.fc-y {
    color: #fcb61a;
}

.bc-w {
    border-color: #fff;
}

.fc-w {
    color: #fff;
}

.bc-r {
    border-color: #fb4d42;
}

.fc-r {
    color: #fb4d42;
}

.bc-dr {
    border-color: #8b0000;
}

.fc-dr {
    color: #8b0000;
}

.bc-ob {
    border-color: #1871bd;
}

.fc-ob {
    color: #1871bd;
}

a .cdd-ic {
    min-width: 95px;
    max-width: 95px;
}

a .cdd-c svg,a .cdd-c img.svg-icon {
    height: 56px;
    width: 56px;
}

.department-icon img.svg-icon {
    height: 76px;
    width: 76px;
}

.department-title .di-ic {
    width: 60px;
}

.txt-f::placeholder {
    line-height: 52px;
}

.txt-f::-moz-placeholder {
    line-height: 52px;
}

.txt-f::-webkit-input-placeholder {
    line-height: 52px;
}

.txt-f::-ms-input-placeholder {
    line-height: 52px;
}

.paragraphs-item-fyi {
    padding: 0 !important;
}

.cds-ic svg {
    width: 65px;
    height: 65px;
}

.paragraphs-item-list.component-section,.paragraphs-item-city-score-dashboard.component-section {
    padding: 0;
}

.node-department-profile .department-icon svg {
    height: 76px;
    width: 76px;
}

@media screen and (min-width: 980px) and (max-width:1300px) {
    .node-type-department-profile .department-icon {
        margin-left:auto;
    }
}

.di-tt svg {
    pointer-events: none;
    height: 70px;
}

.news-item-listing .di-tt:before {
    content: attr(cob-title);
}

.page-user .main {
    padding: 2em 0;
}

@media screen and (min-width: 1054px) and (max-width:1110px) {
    .lo-t {
        display:none;
    }
}

@media screen and (min-width: 768px) and (max-width:1239px) {
    .ft-ll {
        display:block;
        flex-flow: column;
    }

    .ft .ft-ll:not(.ft-ite-311) {
        margin-top: -30px;
        line-height: 1.5em;
    }

    .ft-ite-311 .ft-ll-i {
        text-align: right;
    }

    .ft-ite-311 .ft-ll-311 {
        text-align: left;
    }
}

.ft-ll-a {
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    color: #288be4;
}

.ft-ite-311 .ft-ll-i {
    padding-right: 0;
}

@media screen and (max-width: 767px) {
    .ft-c {
        position:relative;
    }

    #block-footermenu {
        order: 2;
        margin-top: 26px;
        padding-bottom: 15px;
    }

    .ft-ll.ft-ite-311 {
        order: 1;
        display: block;
        position: absolute;
    }
}

@media screen and (min-width: 980px) and (max-width:1280px) {
    .lwi-t {
        font-size:1.2rem;
    }
}

@media screen and (max-width: 767px) {
    .lwi-i {
        float:left;
        margin: 0;
    }

    .lwi-t {
        float: left;
    }
}

@media screen and (max-width: 480px) {
    .paragraphs-item-transaction-grid .lwi-ic svg {
        width:55px;
    }
}

.event-featured-item-wrapper .featured-thumb-wrapper img,.post-featured-item-wrapper .featured-thumb-wrapper img {
    -webkit-transform: none;
    transform: none;
    top: initial;
    left: initial;
}

.paragraphs-item-3-column-w-image .column-wrapper img {
    width: 200px;
    height: 200px;
}

.paragraphs-item-3-column-w-image div.column-wrapper {
    text-align: left;
}

.node-person-profile .cdp-i img {
    border-radius: 100%;
}

.main-content .hero-image .hro {
    min-height: 100%;
}

.page-404-error .error-text h1 {
    margin-top: 0;
    padding-top: 38px;
}

body.logged-in.toolbar-fixed.toolbar-tray-open .nv-m {
    top: 8.8em;
}

body.logged-in.page-error .toolbar-fixed.toolbar-tray-open .nv-m {
    top: 4.4em;
}

.logged-in #page {
    padding-top: 0;
    top: 0;
}

.logged-in #page .hro {
    margin-top: -15px;
}

.logged-in #page .ph,.logged-in.node-type-post #page .hro,.logged-in #page .hero-image {
    padding-top: 0;
    top: 20px;
}

.watermark-wrapper,body.toolbar-vertical.toolbar-tray-open .watermark-wrapper {
    top: 2.1em;
    height: 4.4em;
}

body.toolbar-horizontal.toolbar-tray-open .watermark-wrapper {
    top: 4.4em;
    height: 4.4em;
}

.watermark-wrapper {
    width: 100%;
    position: absolute;
    z-index: 51;
    margin: 0 auto 0 auto;
}

.watermark {
    font-family: Arial,sans-serif;
    height: 100%;
    text-align: left;
    font-weight: normal;
    margin: auto 0;
    overflow: hidden;
    display: block;
    text-transform: none;
}

.watermark--needs_review {
    color: #fff;
    background: #0075d1;
}

.watermark--unpublished,.watermark--draft {
    color: #fff;
    background: #d14700;
}

.watermark--published {
    background: #1b8000;
    color: #fff;
}

.watermark--revision,.watermark--archive {
    color: #642b2b;
    background: #c8c0c0;
}

.watermark .wm-text {
    margin: auto 0;
    font-size: 44px;
    text-transform: uppercase;
}

.watermark .wm-type {
    font-style: italic;
    font-weight: normal;
}

.watermark .wm-title {
    position: relative;
    font-weight: normal;
}

.watermark .wm-language {
    font-style: italic;
    font-weight: normal;
    float: right;
    font-size: 150%;
}

.watermark .wm-forward a,.watermark .wm-ops a {
    line-height: 1.1em;
    margin: auto 10px;
    font-size: 30px;
    padding: 10px 15px;
    display: block;
    background: #fff;
    opacity: 0.90;
}

.watermark .wm-forward .translation-link a {
    color: #fff;
    background-color: transparent;
}

.watermark .wm-forward .status-draft-available a {
    background: #d14700;
    color: #fff;
}

.watermark .wm-forward .status-draft-available a.disabled {
    background: #d14700;
    color: #fff;
    opacity: 0.3;
}

.watermark.watermark--unpublished .wm-ops a,.watermark.watermark--draft .wm-ops a {
    color: #d14700;
}

.watermark.watermark--published .wm-ops a {
    color: #1b8000;
}

.watermark.watermark--needs_review .wm-ops a {
    color: #0075d1;
}

.moderation-sidebar-toolbar-tab .toolbar-item:after {
    display: none;
}

.watermark .wm-col1,.watermark .wm-col2,.watermark .wm-col3 {
    position: relative;
    display: flex;
    flex-flow: column;
    margin: auto 15px;
}

.watermark .wm-col2 .wm-row1 {
    font-size: 32px;
    margin-bottom: 1px;
    max-height: 1.2em;
    overflow: hidden;
}

.watermark .wm-col2 .wm-row2 {
    font-size: 16px;
}

.watermark .wm-col2 .wm-dot {
    margin: auto 2px;
    vertical-align: text-top;
}

.watermark .wm-col2 .wm-row2 .wm-dot {
    font-size: 19px;
    font-weight: bold;
    vertical-align: middle;
}

.watermark .wm-col2 {
    flex-grow: 5;
}

.watermark .wm-col3 {
    flex-flow: row;
}

nav.nv-h {
    z-index: 57;
}

div[class*=embedded-ckeditor].align-right {
    margin: 10px 0 10px 20px;
}

div[class*=embedded-ckeditor].align-center {
}

div[class*=embedded-ckeditor].align-left {
    margin: 10px 20px 10px 0;
}

div[class*=embedded-ckeditor].g--6:nth-child(2n) {
    margin-left: unset;
}

.cob-150-embedded-ckeditor {
    width: 150px;
    height: 150px;
}

.cob-300-embedded-ckeditor {
    width: 33%;
}

.cob-400-embedded-ckeditor-default {
    width: 50%;
}

.cob-800-embedded-ckeditor {
    width: 100%;
}

.cob-icon-embedded-ck-editor,.cob-icon-embedded-ck-editor svg {
    width: auto;
    height: 100px;
}

.cob-ckeditor-bg {
    width: 100%;
    height: auto !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

@media screen and (min-width: 1280px) {
    .node-type-tabbed-content .tab,.node-type-how-to .tab {
        display:block;
    }

    .node-type-tabbed-content .tab-li-a {
        overflow: hidden;
    }
}

.thumb-wrapper .date-flag,.featured-item-details .thumb-wrapper .date-flag,.post-featured-item-wrapper .thumb-wrapper .date-flag,.news-item .thumb-wrapper .date-flag {
    top: 0px;
    width: 70px;
}

.field-type-text-long img,.field-name-body img {
    max-width: 100%;
    height: 100%;
}

.link-wrapper.download-link a {
    background-size: 13px;
}

.node-program-initiative-profile .field-name-field-sidebar-text .align-center.embedded-entity {
    max-width: 70%;
    max-height: 70%;
}

.views-row:not(:last-child) {
    margin-bottom: 16px;
    margin-bottom: 1rem;
}

.dl-d {
    overflow-wrap: break-word;
    min-width: 200px;
}

.translate-dropdown-menu {
    display: block;
}

.tr--visible.translate-dropdown-menu {
    display: block !important;
}

.brg-tr,.h {
    position: relative;
}

.mn {
    padding: 0;
}

.adminimal-admin-toolbar .brg-tr:checked~.mn .h,.brg-tr:checked~.mn .h,.nv-s {
    left: 0;
}

@media (min-width: 1280px) {
    .adminimal-admin-toolbar .node-emergency-alert .b-c--nbp {
        padding-top:2rem;
    }

    .adminimal-admin-toolbar .node-site-alert .b-c--xsmv {
        min-height: 3.4rem;
    }
}

ul.toolbar-menu li {
    margin: 0;
}

ul.toolbar-menu li ul li {
    padding: 0;
}

div.sw-skipnav-outerbar {
    display: block;
    height: 40px;
    width: 100%;
    background-color: #091f2f;
    text-align: left;
    margin-top: -40px;
    padding-left: 15px;
}

a.sw-skipnav {
    display: inline-block;
    margin: 0 auto;
    color: #fff;
    text-decoration: none;
}

#page #main-menu.sticky {
    position: fixed;
}

.brg-tr:checked ~ .mn #main-menu.sticky.h {
    left: 300px;
}

body.logged-in.toolbar-fixed.toolbar-tray-open #page #main-menu.sticky {
    top: 4.4em;
}

body.toolbar-fixed.toolbar-horizontal #page #main-menu.sticky {
    top: 2.15em;
}

.paragraphs-item-bos311 a.g--4:focus .lwa--w {
    color: #fcb61a;
}

#statusHeader.emergency-override-processed h2 {
    margin: 0;
    line-height: 1;
    font-size: 28px;
    letter-spacing: 0;
}

@media screen and (max-width: 480px) {
    .page--fp #statusHeader h2,#statusHeader.emergency-override-processed h2 {
        font-size:5.5vw;
    }
}

a[href^="mailto:"] {
    white-space: nowrap;
}

body.no-s .md-c:focus-within {
    transition: background-color 0.01s;
}

.node-type-how-to .component-section.paragraphs-item-internal-link {
    padding: 0;
}

.scrollToTopBtn {
    width: 48px;
    position: fixed;
    bottom: 160px;
    right: 30px;
    z-index: 100;
    opacity: 0;
    transform: translateY(100px);
    transition: all .5s ease
}

.showBtn {
    opacity: 1;
    transform: translateY(0)
}

.views-exposed-form .sf-i .form-item,.views-exposed-form .sf-i .form-submit {
    display: inline-block;
    vertical-align: bottom;
}

.sr-only {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (min-width: 980px) {
    .node-type-how-to .component-section.paragraphs-item-internal-linkn {
        padding:0 0 0 0;
    }

    .oh-display-label {
        min-width: 6.6em;
    }
}

@media screen and (max-width: 480px) {
    .brg-tr:checked ~ .mn #main-menu.sticky.h {
        left:256px;
        outline: none;
    }

    .oh-display-label {
        min-width: 4em;
    }
}

.bos_theme .sf-i-b:not(div.sf-i-b) {
    margin-top: -20px;
}

.paragraphs-item-commission-search .sf-i-b {
    margin-top: -3px !important;
}

@media (min-width: 980px) {
    .view-metrolist-affordable-housing-page .view-filters .drawer-wrapper {
        width:calc(33.3% - 76px);
    }
}

.dr-ql-str-t h2 {
    color: #fff;
    padding-right: 0;
}

.addtocal {
    position: relative;
    color: transparent;
    margin-top: 5px;
}

.addtocal-container {
    float: none;
    top: 0;
    position: absolute;
    color: #000000;
}

.addtocal-container button.addtocal {
    display: inline-block;
    color: #000000;
    z-index: 20;
    font-family: "Open Sans",Roboto,sans-serif;
    font-weight: 600;
    line-height: 100%;
    background: #fafafa;
    font-size: 15px;
    text-decoration: none;
    border: 1px solid transparent;
    padding: 13px 12px 12px 43px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
    -webkit-font-smoothing: antialiased!important;
    outline-color: rgba(0,78,255,0.5);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    box-shadow: 0 0 0 0.5px rgba(50,50,93,.17),0 2px 5px 0 rgba(50,50,93,.1),0 1px 1.5px 0 rgba(0,0,0,.07),0 1px 2px 0 rgba(0,0,0,.08),0 0 0 0 transparent!important;
    background-image: url(https://assets.boston.gov/icons/experiential_icons/calendar.svg);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    text-transform: uppercase;
}

.addtocal-container button.addtocal:hover,.addtocal-container button.addtocal:focus,.addtocal-container button.addtocal:active {
    text-decoration: none;
    background: #ffffff url(https://assets.boston.gov/icons/experiential_icons/calendar.svg) no-repeat left center;
    background-size: contain;
}

.addtocal-container .addtocal-menu {
    min-width: 188px;
}

.addtocal-container .addtocal-menu ul,.addtocal-container .addtocal-menu ul li {
    background: none;
}

.addtocal-container .addtocal-link a:hover,.addtocal-container .addtocal-link a:focus {
    border-radius: 0;
}

html {
    scroll-padding-top: 90px;
}

#web-app .mnl .dl-i:last-child,#web-app .mnl .dl-i:first-child,#web-app .mnl .dl-i {
    padding-bottom: 0;
    padding-top: 0;
}

#web-app .mnl .mnl-address {
    padding-bottom: 1rem;
    padding-top: 1rem;
}

#web-app .mnl .mnl-address:hover,#web-app .mnl .mnl-address:focus,#web-app .mnl .mnl-address:focus-visible {
    color: #fff;
}

#web-app .mnl .dl-i:hover,#web-app .mnl .dl-i:focus {
    padding-left: 10px;
}



.site-maintenance-text h1 {
    font-size: 1.5rem;
}

@media (min-width: 980px) {
    .site-maintenance-text h1 {
        font-size:3rem;
    }
}

.public-notices-featured-item .news-item-default-image,.public-notices-featured-item .dept_icon_uri {
    background-color: transparent;
    border-left: 1px solid #e0e0e0;
    height: 100%;
}

#system-messages.b--ob a,#system-messages.b--ob a[href^="mailto:"],#system-messages.b--ob a:visited {
    color: black;
}

#system-messages.b--ob a:hover {
    color: red;
}

.published-by-date.sb-t {
    display: block;
    width: 100%;
}

.published-by-date.sb-t time {
    display: inline;
}

@media (min-width: 768px) {
    td:before {
        display:none;
    }

    .responsive-table--vertical--horizontal tbody td th {
        display: none;
    }
}

@media (max-width: 768px) {
    td:before {
        display:none;
    }

    table.responsive-table--vertical--horizontal {
        border: none;
    }

    .responsive-table.responsive-table--vertical--horizontal tbody tr:not(.table--row) {
        border: 1px solid #091f2f;
        margin-bottom: 15px;
        display: block;
        overflow: hidden;
        background-color: #FFFFFF;
    }

    .responsive-table.responsive-table--vertical--horizontal tbody tr.table--row {
        display: table-row;
        overflow: hidden;
        overflow-wrap: break-word;
        word-wrap: break-word;
        -ms-word-break: break-all;
        word-break: break-all;
        word-break: break-word;
        -ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    .responsive-table--vertical--horizontal tbody tr tr td {
        border-bottom: 1px solid #58585B;
        color: #091F2F;
        display: table-row;
    }

    .responsive-table--vertical--horizontal.responsive-table tbody tr td:not(td[data-label]) {
        float: none;
        clear: none;
    }

    .responsive-table--vertical--horizontal.responsive-table tbody tr td[data-label] {
        display: table-cell;
        float: none;
        clear: none;
        font-size: 15px;
        color: #091F2F;
        padding: 10px;
        text-align: left;
    }

    .responsive-table--vertical--horizontal.responsive-table tbody tr td[data-label] ul li {
        min-height: 25px;
    }

    .responsive-table--vertical--horizontal.responsive-table tbody tr th {
        width: 40%;
        padding: 10px;
        vertical-align: middle;
        display: table-cell;
        border: none;
        border-bottom: 1px solid #fff;
    }

    .responsive-table--vertical--horizontal.responsive-table tbody tr td:not(td[data-label]) {
        padding: 8px;
        display: table;
    }

    .responsive-table--vertical--horizontal.responsive-table tbody tr:nth-child(even) {
        background-color: #e0e0e0;
    }
}

body.toolbar-fixed .site-banner.dr {
    top: 2.56em;
}

.nv-m {
    top: 38px;
}

body.toolbar-fixed .site-banner,body.toolbar-fixed .site-banner label {
    font-size: .84rem;
}

body.logged-in.toolbar-fixed .site-banner.dr {
    display: none;
}

#user-login-form #edit-new {
    margin: 20px 0;
}

#user-login-form #ping-fieldset {
    align-items: center;
    flex-direction: row-reverse;
}

#user-login-form #edit-ping {
    padding: 18% 0;
    width: 50% !important;
}

#user-login-form #creds-wrapper {
    border-left: 5px solid #333;
    padding: 0 0 0 30px;
    margin-left: 27px;
}

#user-login-form #edit-actions {
    align-self: flex-end;
    margin-bottom: 36px;
    margin-left: 27px;
    margin-right: 0px;
}

#user-login-form #ping-img {
    width: 50%;
    float: left;
}

#user-login-form #sso-wrapper {
    text-align: center;
    border: 1px solid #333;
    background-color: aliceblue;
}

@media screen and (max-width: 990px) {
    #user-login-form #ping-fieldset {
        display:block;
        text-align: center;
        margin: 0 auto;
        padding: 0;
    }

    #user-login-form #edit-ping {
        padding: 3em;
        width: 50% !important;
    }

    #user-login-form #creds-wrapper {
        border-left: none;
        margin: 0 auto;
        text-align: center;
    }

    #user-login-form #edit-actions {
        margin: 0 auto;
        text-align: center;
    }

    #user-login-form #ping-img {
        display: none;
    }

    #user-login-form #sso-wrapper {
        width: 100%;
        max-width: initial;
        padding-bottom: 20px;
        margin-right: 0;
        border-bottom: 5px solid #333;
    }
}

.translate-link {
    position: relative;
    display: flex;
    min-width: 120px;
    height: 65px;
    background-image: url("/themes/custom/bos_theme/images/Google_Translate_logo.svg_32.png");
    padding-left: 32px;
    background-repeat: no-repeat;
    background-position: left;
    background-size: 25px;
}

.translate-link span {
    position: absolute;
    opacity: 0;
    overflow: hidden;
    -webkit-animation: rotateWord 18s linear infinite 0s;
    -ms-animation: rotateWord 18s linear infinite 0s;
    animation: rotateWord 18s linear infinite 0s;
    width: max-content;
}

.translate-link span:nth-child(2) {
    -webkit-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s;
}

.translate-link span:nth-child(3) {
    -webkit-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}

.translate-link span:nth-child(4) {
    -webkit-animation-delay: 9s;
    -ms-animation-delay: 9s;
    animation-delay: 9s;
}

.translate-link span:nth-child(5) {
    -webkit-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}

.translate-link span:nth-child(6) {
    -webkit-animation-delay: 15s;
    -ms-animation-delay: 15s;
    animation-delay: 15s;
}

@-webkit-keyframes rotateWord {
    0% {
        opacity: 0;
    }

    2% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
    }

    5% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }

    17% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }

    20% {
        opacity: 0;
        -webkit-transform: translateY(30px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-ms-keyframes rotateWord {
    0% {
        opacity: 0;
    }

    2% {
        opacity: 0;
        -ms-transform: translateY(-30px);
    }

    5% {
        opacity: 1;
        -ms-transform: translateY(0px);
    }

    17% {
        opacity: 1;
        -ms-transform: translateY(0px);
    }

    20% {
        opacity: 0;
        -ms-transform: translateY(30px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes rotateWord {
    0% {
        opacity: 0;
    }

    2% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    5% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }

    17% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }

    20% {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@media screen and (max-width: 990px) {
    .column.g--8 {
        order:1;
    }

    .column.g--4 {
        order: 2;
    }

    #desktop-sidebar {
        display: none;
    }

    #mobile-sidebar {
        display: block;
        scroll-behavior: smooth;
    }

    #mobile-sidebar .sb-b address,#mobile-sidebar .sb-b.sb-b-np address {
        text-align: left;
        margin-top: -10px;
    }

    #mobile-sidebar .sb-b,#mobile-sidebar .sb-b.sb-b-np address {
        padding-top: 0;
        text-align: left;
        margin-top: -10px;
    }

    .topic-nav.ssm .sb-ic {
        visibility: hidden;
    }

    .topic-nav.ssm .sb .sb-i:first-child {
        border-bottom: none;
    }

    .topic-nav.ssm .sb .sb-i:last-child {
        border-bottom: 1px solid #e0e0e0;
    }

    .topic-nav.ssm .sb-i .sb-b,.topic-nav.ssm .sb-i .sb-d,.sb-b address,.sb-d address {
        margin: 0;
        padding: 0;
        text-indent: 0;
        font-family: Montserrat,sans-serif;
        text-align: center;
        background-image: none;
        font-size: 14px;
        line-height: 46px;
    }
}

@media screen and (min-width: 991px) {
    .topic-nav.ssm .topic-nav-sb {
        display:none;
    }

    #desktop-sidebar,#contact-sidebar {
        display: block;
    }

    #mobile-sidebar,#contact-sidebar {
        display: none;
    }
}

.no-sidebar #contact-sidebar {
    display: none;
}


.component-within-component .b--fw {
    width: auto;
}

.ssm.ssm__left.sticky li:hover {
    background-color: #1871bd;
    cursor: pointer;
}

.ssm.ssm__left.sticky li:hover a,.ssm.ssm__left.sticky li:hover a:active,.ssm.ssm__left.sticky li:hover a:hover,.ssm.ssm__left.sticky li:hover a:link,.ssm.ssm__left.sticky li:hover a:visited,.ssm li:hover a,.ssm li:hover a:active,.ssm li:hover a:hover,.ssm li:hover a:link,.ssm li:hover a:visited {
    background-color: #1871bd;
    cursor: pointer;
    color: #fff;
    font-weight: bold;
}

.toolbar-icon-bos-core-workbench-content-listing-menu:before {
    background-image: url(/themes/custom/bos_theme/images/workbench/787878/iconmonstr-task-1.svg);
}

.adminimal-admin-toolbar .toolbar .toolbar-bar a.toolbar-item:hover {
    text-decoration: none;
}

.adminimal-admin-toolbar .toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-active {
    background-color: rgba(255,255,255,.15);
    color: #fff;
    text-decoration: none;
}

.bos_admin .toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-active,.bos_admin .toolbar .toolbar-bar .toolbar-tab > .toolbar-item:focus {
    background-color: rgba(255,255,255,.15);
    text-decoration: none;
    filter: none;
    color: #EEEEEE;
    opacity: 0.8;
    border-bottom: none;
}

.bos_admin .toolbar .toolbar-tray .menu-item--active-trail > .toolbar-box a,.bos_admin .toolbar .toolbar-tray a.is-active {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    background-color: rgba(0,132,215,0.7);
    filter: none;
}

.adminimal-admin-toolbar .toolbar-tray-horizontal a:hover,.adminimal-admin-toolbar .toolbar-tray-horizontal a:active,.adminimal-admin-toolbar .toolbar-tray-horizontal a:focus,.adminimal-admin-toolbar .toolbar-tray-horizontal .menu-item--expanded a:hover,.adminimal-admin-toolbar .toolbar-tray-horizontal .menu-item--expanded a:active,.adminimal-admin-toolbar .toolbar-tray-horizontal .menu-item--expanded a:focus {
    background-color: rgba(0,132,215,0.45);
    color: #d8d8d8;
    text-decoration: none;
}


/* @license GPL-2.0-or-later https://www.drupal.org/licensing/faq */
.timeline-step-wrapper .timeline-number {
    font-size: 30px;
    line-height: 27px;
    font-size: 1.66667rem;
    line-height: 1.5rem;
    margin-top: 29.25px;
    margin-top: 1.625rem;
    margin-bottom: 29.25px;
    margin-bottom: 1.625rem;
    font-weight: 700;
    font-family: Montserrat,sans-serif;
    color: #091f2f;
}

@media (min-width: 980px) {
    .timeline-step-wrapper .timeline-number {
        font-size:75px;
        line-height: 67px;
        font-size: 4.16667rem;
        line-height: 3.72222rem;
        margin-top: 39px;
        margin-top: 2.16667rem;
        margin-bottom: 39px;
        margin-bottom: 2.16667rem;
    }
}

.timeline-step-wrapper .step-text,.timeline-step-wrapper .step-title {
    font-size: 16px;
    line-height: 22px;
    font-size: 0.88889rem;
    line-height: 1.22222rem;
    margin-top: 39px;
    margin-top: 2.16667rem;
    margin-bottom: 8.97px;
    margin-bottom: 0.49833rem;
    font-weight: 400;
    letter-spacing: 1px;
    font-family: Montserrat,sans-serif;
    color: #091f2f;
    text-transform: uppercase;
}

.paragraphs-item-cabinet .cabinet-contacts .timeline-step-wrapper .step-text,.timeline-step-wrapper .paragraphs-item-cabinet .cabinet-contacts .step-text,.paragraphs-item-cabinet .cabinet-contacts .timeline-step-wrapper .step-title,.timeline-step-wrapper .paragraphs-item-cabinet .cabinet-contacts .step-title {
    margin-top: 7px;
}

.paragraphs-item-group-of-links-grid .timeline-step-wrapper .step-text,.timeline-step-wrapper .paragraphs-item-group-of-links-grid .step-text,.paragraphs-item-group-of-links-grid .timeline-step-wrapper .step-title,.timeline-step-wrapper .paragraphs-item-group-of-links-grid .step-title,.paragraphs-item-group-of-links-list .timeline-step-wrapper .step-text,.timeline-step-wrapper .paragraphs-item-group-of-links-list .step-text,.paragraphs-item-group-of-links-list .timeline-step-wrapper .step-title,.timeline-step-wrapper .paragraphs-item-group-of-links-list .step-title,.view-transactions-main-transactions .timeline-step-wrapper .step-text,.timeline-step-wrapper .view-transactions-main-transactions .step-text,.view-transactions-main-transactions .timeline-step-wrapper .step-title,.timeline-step-wrapper .view-transactions-main-transactions .step-title {
    margin-top: 0;
    font-size: 14px;
}

.modal-overlay .timeline-step-wrapper .step-text,.timeline-step-wrapper .modal-overlay .step-text,.modal-overlay .timeline-step-wrapper .step-title,.timeline-step-wrapper .modal-overlay .step-title {
    margin: 0;
    line-height: 18px;
}

.modal-overlay .timeline-step-wrapper .step-text a,.timeline-step-wrapper .modal-overlay .step-text a,.modal-overlay .timeline-step-wrapper .step-title a,.timeline-step-wrapper .modal-overlay .step-title a {
    font-size: inherit;
}

.timeline-step-wrapper .title-with-hero.timeline-number {
    width: 100%;
    color: #ffffff;
    padding: 0;
    margin: 0 0 1rem;
    display: block;
}

body:not(.node-type-tabbed-content) .timeline-step-wrapper .title-with-hero.timeline-number,.timeline-step-wrapper body:not(.node-type-tabbed-content) .title-with-hero.timeline-number {
    font-size: 45px;
    line-height: 45px;
    font-size: 2.5rem;
    line-height: 2.5rem
}

@media (min-width: 768px) {
    body:not(.node-type-tabbed-content) .timeline-step-wrapper .title-with-hero.timeline-number,.timeline-step-wrapper body:not(.node-type-tabbed-content) .title-with-hero.timeline-number {
        font-size:75px;
        line-height: 75px;
        font-size: 4.16667rem;
        line-height: 4.16667rem;
    }
}

.node-type-landing-page .landing-hero .timeline-step-wrapper .timeline-number,.timeline-step-wrapper .node-type-landing-page .landing-hero .timeline-number {
    color: #ffffff;
    margin: 0 0 20px 0;
    padding: 0 20px;
    font-size: 36px;
    line-height: 40px;
    font-size: 2rem;
    line-height: 2.22222rem;
}

@media (min-width: 768px) {
    .node-type-landing-page .landing-hero .timeline-step-wrapper .timeline-number,.timeline-step-wrapper .node-type-landing-page .landing-hero .timeline-number {
        font-size:75px;
        line-height: 67px;
        font-size: 4.16667rem;
        line-height: 3.72222rem;
    }
}

@media (min-width: 980px) {
    .node-type-landing-page .landing-hero .timeline-step-wrapper .timeline-number,.timeline-step-wrapper .node-type-landing-page .landing-hero .timeline-number {
        font-size:90px;
        line-height: 85px;
        font-size: 5rem;
        line-height: 4.72222rem;
        padding: 0;
    }
}

.paragraphs-item-header-text .timeline-step-wrapper .timeline-number,.timeline-step-wrapper .paragraphs-item-header-text .timeline-number {
    margin-top: .75rem;
    margin-bottom: 0;
}

.paragraphs-item-featured-item .timeline-step-wrapper .title.featured-title.timeline-number,.timeline-step-wrapper .paragraphs-item-featured-item .title.featured-title.timeline-number {
    margin: 0 0 39px;
}

.node-script-page .timeline-step-wrapper .contact-title.step-text,.timeline-step-wrapper .node-script-page .contact-title.step-text,.node-script-page .timeline-step-wrapper .contact-title.step-title,.timeline-step-wrapper .node-script-page .contact-title.step-title {
    border-bottom: 1px solid lightgray;
    padding-bottom: 10px;
    margin: 0 0 20px;
}

.node-type-article .timeline-step-wrapper .contact-title.step-text,.timeline-step-wrapper .node-type-article .contact-title.step-text,.node-type-article .timeline-step-wrapper .contact-title.step-title,.timeline-step-wrapper .node-type-article .contact-title.step-title,.node-type-how-to .timeline-step-wrapper .contact-title.step-text,.timeline-step-wrapper .node-type-how-to .contact-title.step-text,.node-type-how-to .timeline-step-wrapper .contact-title.step-title,.timeline-step-wrapper .node-type-how-to .contact-title.step-title {
    border-bottom: 1px dashed lightgray;
    padding-bottom: 10px;
    margin: 0 0 20px;
}

.node-type-department-profile .timeline-step-wrapper .title.timeline-number,.timeline-step-wrapper .node-type-department-profile .title.timeline-number {
    text-align: center;
}

@media (min-width: 980px) {
    .node-type-department-profile .timeline-step-wrapper .title.timeline-number,.timeline-step-wrapper .node-type-department-profile .title.timeline-number {
        text-align:left;
    }
}

.node-type-department-profile .timeline-step-wrapper .contact-title.step-text,.timeline-step-wrapper .node-type-department-profile .contact-title.step-text,.node-type-department-profile .timeline-step-wrapper .contact-title.step-title,.timeline-step-wrapper .node-type-department-profile .contact-title.step-title {
    border-top: 0;
    border-right: 0;
    border-bottom: 1px;
    border-left: 0;
    border-style: dashed;
    border-color: #e0e0e0;
    padding-bottom: 10px;
    margin: 20px 0 20px;
}

.node-type-department-profile .with-hero .timeline-step-wrapper .title.timeline-number,.timeline-step-wrapper .node-type-department-profile .with-hero .title.timeline-number,.node-type-department-profile .node-public-notice .timeline-step-wrapper .title.timeline-number,.timeline-step-wrapper .node-type-department-profile .node-public-notice .title.timeline-number,.node-type-article .with-hero .timeline-step-wrapper .title.timeline-number,.timeline-step-wrapper .node-type-article .with-hero .title.timeline-number,.node-type-article .node-public-notice .timeline-step-wrapper .title.timeline-number,.timeline-step-wrapper .node-type-article .node-public-notice .title.timeline-number,.node-type-post .with-hero .timeline-step-wrapper .title.timeline-number,.timeline-step-wrapper .node-type-post .with-hero .title.timeline-number,.node-type-post .node-public-notice .timeline-step-wrapper .title.timeline-number,.timeline-step-wrapper .node-type-post .node-public-notice .title.timeline-number,.node-type-event .with-hero .timeline-step-wrapper .title.timeline-number,.timeline-step-wrapper .node-type-event .with-hero .title.timeline-number,.node-type-event .node-public-notice .timeline-step-wrapper .title.timeline-number,.timeline-step-wrapper .node-type-event .node-public-notice .title.timeline-number,.node-type-public-notice .with-hero .timeline-step-wrapper .title.timeline-number,.timeline-step-wrapper .node-type-public-notice .with-hero .title.timeline-number,.node-type-public-notice .node-public-notice .timeline-step-wrapper .title.timeline-number,.timeline-step-wrapper .node-type-public-notice .node-public-notice .title.timeline-number {
    margin-top: 0;
}

.place-did-you-know .timeline-step-wrapper .step-text,.timeline-step-wrapper .place-did-you-know .step-text,.place-did-you-know .timeline-step-wrapper .step-title,.timeline-step-wrapper .place-did-you-know .step-title {
    color: red;
}

section.timeline {
    margin: 0 0 60px 0;
    text-align: center;
}

.timeline-step-wrapper {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    margin-bottom: 20px;
    text-align: left;
}

@media (min-width: 768px) {
    .timeline-step-wrapper {
        width:49%;
        padding: 0 20px;
    }
}

@media (min-width: 980px) {
    .timeline-step-wrapper {
        width:calc(16.222% - 40px);
        margin: 0 20px;
        padding: 0 10px;
    }
}

@media (min-width: 980px) {
    .timeline-step-wrapper .timeline-step {
        width:130px;
    }
}

.timeline-step-wrapper .step-text {
    color: #58585b;
    margin: 0 0 10px 0
}

.timeline-step-wrapper .timeline-number {
    font-size: 60px;
    line-height: 60px;
    font-size: 3.33333rem;
    line-height: 3.33333rem;
    border-bottom: 3px solid #d22d23;
    margin: 0 0 20px 0;
    padding-bottom: 8px;
}

.timeline-step-wrapper .completed .timeline-number {
    background: url("https://patterns.boston.gov/images/public/icons/check.svg") no-repeat right 42px transparent;
}

.timeline-step-wrapper .pending .timeline-number {
    color: #58585b;
    border-color: #d2d2d2;
}

.timeline-step-wrapper .step-title {
    margin: 0 0 10px 0;
}

.timeline-step-wrapper .pending .step-title {
    color: #58585b;
}

.node-type-topic-page .intro-title-wrapper .timeline-step-wrapper .timeline-number,.timeline-step-wrapper .node-type-topic-page .intro-title-wrapper .timeline-number {
    font-size: 36px;
    line-height: 40px;
    font-size: 2rem;
    line-height: 2.22222rem;
    color: #ffffff;
    max-width: 80%;
    margin: 0 auto .25em;
}

@media (min-width: 768px) {
    .node-type-topic-page .intro-title-wrapper .timeline-step-wrapper .timeline-number,.timeline-step-wrapper .node-type-topic-page .intro-title-wrapper .timeline-number {
        font-size:75px;
        line-height: 67px;
        font-size: 4.16667rem;
        line-height: 3.72222rem;
        padding-left: 30px;
        padding-right: 30px;
    }
}

error-text h1,.error-text .timeline-step-wrapper .timeline-number,.timeline-step-wrapper .error-text .timeline-number {
    border-bottom: 5px solid;
    margin-bottom: 0;
    padding-bottom: 1rem;
    font-size: 30px;
    font-size: 1.66667rem;
}

@media (min-width: 980px) {
    .error-text h1,.error-text .timeline-step-wrapper .timeline-number,.timeline-step-wrapper .error-text .timeline-number {
        padding:3rem 0 0 0;
        font-size: 45px;
        font-size: 2.5rem;
    }
}

.denied-text {
    color: #ffffff;
    text-shadow: 0 0 5px #091f2f
}

.denied-text h1,.denied-text .timeline-step-wrapper .timeline-number,.timeline-step-wrapper .denied-text .timeline-number {
    color: #ffffff;
}

.translate {
    position: relative;
    display: block;
    background: none;
}

.translate--visible {
    display: block;
}

.translate-dd-link {
    font-family: Montserrat,Arial,sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
    min-width: 45px;
    text-align: left;
    line-height: 1;
    padding: 1rem .2rem 1rem 0;
    color: #fff;
    font-size: 12px;
    font-size: .75rem;
    font-range: 480px 1440px;
}

.translate-dd li {
    padding: 0;
    margin: 0;
    background: none;
}

.translate-dd-link--hidden {
    display: none;
}

.translate-overlay {
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 21000;
    width: 100%;
    text-align: left;
    color: #091f2f;
}

.translate-languages {
    display: block;
    background-color: #fff;
    padding: 2rem 1.1rem 1.5rem;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.translate-dd {
    padding: 0;
    margin-right: 14px;
}

.translate-overlay-background {
    visibility: hidden;
}

.translate-languages a {
    margin: 0;
}

.translate-overlay a.md-cb {
    color: #fff;
}

.translate-languages a:hover {
    text-decoration: underline;
}

.translate-message {
    display: none;
    background-color: #fff;
    padding: 1.2rem;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#disclaimerLanguageSelect {
    height: auto;
    font-size: .9rem;
}

.translate-form label {
    margin: 1rem 0;
}

.translate-disclaimer h4 {
    margin-bottom: 1.5rem;
    margin-bottom: .7rem;
}

.translate-disclaimer .translate-d-c {
    margin-bottom: .5rem;
    margin-bottom: .5rem;
}

.translate-disclaimer ol,.translate-disclaimer ol>li {
    background: none;
    list-style: decimal;
    list-style-type: decimal;
    margin-left: 20px;
    padding-left: 8px;
}

.translate-disclaimer ol>li:before {
    border: none;
    border-radius: 0;
    content: none;
}

.translate-disclaimer ul li,ul li.translate,li.translate,.translate ol li {
    background: none;
}

.translate-languages .translate-dd-link.ar,.translate-languages .translate-dd-link.az,.translate-languages .translate-dd-link.bs,.translate-languages .translate-dd-link.ha,.translate-languages .translate-dd-link.iw,.translate-languages .translate-dd-link.jw,.translate-languages .translate-dd-link.ku,.translate-languages .translate-dd-link.ms,.translate-languages .translate-dd-link.ps,.translate-languages .translate-dd-link.fa,.translate-languages .translate-dd-link.sd,.translate-languages .translate-dd-link.sw,.translate-languages .translate-dd-link.uz,.translate-languages .translate-dd-link.yi {
    text-align: center;
}

@media(min-width: 768px) {
    .translate-overlay {
        top:10%;
        left: 50%;
        z-index: 21000;
        margin-left: -300px;
        width: 600px;
        background-color: #1871bd;
    }

    .translate-languages {
        max-height: 80vh;
    }

    .translate-message {
        max-height: 80vh;
    }
}

.contextual {
    position: absolute;
    z-index: 500;
    top: 6px;
    right: 0;
}

[dir="rtl"] .contextual {
    right: auto;
    left: 0;
}

.contextual-region.focus {
    outline: 1px dashed #d6d6d6;
    outline-offset: 1px;
}

.contextual .trigger {
    position: relative;
    right: 6px;
    float: right;
    overflow: hidden;
    margin: 0;
    padding: 0 2px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 13px;
    background-color: #fff;
    background-attachment: scroll;
}

[dir="rtl"] .contextual .trigger {
    right: auto;
    left: 6px;
    float: left;
}

.contextual.open .trigger {
    z-index: 2;
    border: 1px solid #ccc;
    border-bottom-color: transparent;
    border-radius: 13px 13px 0 0;
    box-shadow: none;
}

.contextual-region .contextual .contextual-links {
    position: relative;
    top: -1px;
    right: 6px;
    float: right;
    clear: both;
    margin: 0;
    padding: 0.25em 0;
    text-align: left;
    white-space: nowrap;
    border: 1px solid #ccc;
    border-radius: 4px 0 4px 4px;
    background-color: #fff;
}

[dir="rtl"] .contextual-region .contextual .contextual-links {
    right: auto;
    left: 6px;
    float: left;
    text-align: right;
    border-radius: 0 4px 4px 4px;
}

.contextual-region .contextual .contextual-links li {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-image: none;
    border: none;
    background-color: #fff;
    line-height: 100%;
}

.contextual-region .contextual .contextual-links a {
    display: block;
    margin: 0.25em 0;
    padding: 0.4em 0.6em;
    color: #333;
    background-color: #fff;
    font-family: sans-serif;
    font-size: small;
    line-height: 0.8em;
}

.touchevents .contextual-region .contextual .contextual-links a {
    font-size: large;
}

.contextual-region .contextual .contextual-links a,.contextual-region .contextual .contextual-links a:hover {
    text-decoration: none;
}

.no-touchevents .contextual-region .contextual .contextual-links li a:hover {
    color: #000;
    background: #f7fcff;
}

.toolbar-bar .toolbar-icon-edit::before {
    background-image: url(/core/misc/icons/bebebe/pencil.svg);
}

.toolbar-bar .toolbar-icon-edit:active::before,.toolbar-bar .toolbar-icon-edit.is-active::before {
    background-image: url(/core/misc/icons/ffffff/pencil.svg);
}

.contextual .trigger {
    width: 26px !important;
    height: 26px !important;
    text-indent: -9999px;
    background-image: url(/core/misc/icons/bebebe/pencil.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px 16px;
}

.contextual .trigger:hover {
    background-image: url(/core/misc/icons/787878/pencil.svg);
}

.contextual .trigger:focus {
    outline: none;
    background-image: url(/core/misc/icons/5181c6/pencil.svg);
}

.paragraph--unpublished {
    background-color: #fff4f4;
}

/* Add some styling for buttons (if you want to add any later) */
#spending-container {
  /* display: block;                   Make button block-level so it spans the width */
  /* width: 400px;                     Set a fixed width */
  /* margin: 160px auto;                Center the button with auto margins */
  /* padding: 10px;                    Add padding inside the button */
  background-color: #77cb73;        /* Green background for button */
  /* color: white;                     White text color */
  /* border: none;                     Remove the default border */
  /* border-radius: 5px;               Rounded corners */
  /* font-size: 16px;                  Button text size */
  /* cursor: pointer;                  Change cursor to pointer when hovering */
}



button:hover {
  background-color: skyblue;        /* Darker green when hovering */
}

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.box {
  width: 400px;
  height: 160px;
  background-color: lightgrey;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px;
  border-radius: 8px;
  position: relative;
  font-size: 30px;

}


.green-box {
  background-color: #77cb73; 
  color: black;
  display:flex;
}

#blue-button {

color: white;
width: 400px;
height: 160px;
font-size: 30px;
align-items: center;
justify-content: center;
margin: 0 20px;
border-radius: 8px;
position: relative;
display: block;

}

p {
    font-size: 22px;
}

.interactive-box {
    display: flex
}

.text-for-slider {
    margin-top: 20px; /* Add spacing between the boxes and the paragraph */
    text-align: left; /* Align the text to the left */
}

.slider {
    height: 200px;
    width: 40%;
    padding: 160px 0 0 20px
}

.container {
  display: flex; /* Side-by-side layout */
  flex-direction: row; /* Ensure horizontal alignment */
  justify-content: center; /* Center items horizontally */
  align-items: flex-start; /* Align items to the top */
  gap: 2rem; /* Space between sections */
  max-width: 80%; /* Optional: Limit container width */
}


/* Style for budget total slider and note*/
#spending-slider {
    width: 30%; /* Increase the width of the slider */
    height: 60px; /* Increase the height of the slider */
    display: block; /* Ensure it's a block-level element */
    margin: 20px auto; /* Center the slider horizontally */
    background-color: #f0f0f0; /* Optional: Add a background color */
    border-radius: 10px; /* Optional: Add rounded corners */
    outline: none; /* Remove the default focus outline */
    margin-bottom: 0px;
    padding: 0px;
    margin: 0px;
    border: 0px;
}



#note-container {
    margin-top: 10px;
    font-size: 20px; /* Font size increased */
    line-height: 1.2; /* Slightly increased for readability */
    color: red; /* Text color red */
    min-height: 50px; /* Reserves space for the note */
    display: flex; /* Ensures content is centered */
    align-items: center; /* Vertically aligns text */
    justify-content: center; /* Horizontally aligns text */
    text-align: center; /* Centers the text */
    background: transparent; /* Default background */
    visibility: hidden; /* Keeps the space but hides content */
    transition: visibility 0.3s, opacity 0.3s; /* Smooth transition */
    opacity: 0; /* Fully transparent initially */
}

#note-container-175 {
    margin-top: 0px;
    font-size: 20px; /* Font size increased */
    line-height: 1.2; /* Slightly increased for readability */
    color: red; /* Text color red */
    min-height: 50px; /* Reserves space for the note */
    display: flex; /* Ensures content is centered */
    align-items: center; /* Vertically aligns text */
    justify-content: center; /* Horizontally aligns text */
    text-align: center; /* Centers the text */
    background: transparent; /* Default background */
    visibility: hidden; /* Keeps the space but hides content */
    transition: visibility 0.3s, opacity 0.3s; /* Smooth transition */
    opacity: 0; /* Fully transparent initially */
}



/* End of style for budget total slider and note*/


.tax-section {
  background-color: #fff;
  text-align: center;
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  flex: 1 1 300px; /* Allow flexibility and set min width */
  max-width: 400px; /* Optional: Set a maximum width */
}

.tax-section h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #333;
}

.calculation {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1rem;
}

.numerator, .denominator {
  background-color: #e8f5e9;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 1.2rem;
  color: #333;
  font-weight: bold;
  white-space: nowrap;
}

.divider {
  width: 100%;
  height: 2px;
  background-color: #333;
  margin: 0.5rem 0;
}

.result {
  font-size: 1.4rem;
  font-weight: bold;
  color: #2e7d32;
  background-color: #e8f5e9;
  padding: 0.5rem 1rem;
  border-radius: 4px;
}


#slider_175 {
  width: 100%; /* Increase the width of the slider */
  height: 20px; /* Increase the height of the slider */
  display: block; /* Ensure it's a block-level element */
  margin: 20px auto; /* Center the slider horizontally */
  background-color: #f0f0f0; /* Optional: Add a background color */
  border-radius: 10px; /* Optional: Add rounded corners */
  outline: none; /* Remove the default focus outline */
  margin-bottom: 0px;
  padding: 0px;
  margin: 0px;
  border: 0px;
}

.container_175 {
  width: 1200px;             /* Same width as the slider */
  margin: 0 auto;           /* Center the container */
  text-align: center;       /* Ensure proper alignment of content */
  position: relative;
}

.slider-labels {
  display: flex;            /* Use flexbox for even spacing */
  margin-top: 0px;         /* Add some space between the slider and labels */
  margin-bottom: 0px; 
  position: absolute;
  transform: translateX(0%);
      font-size: 24px;
    color: black;
    position: relative; /* Necessary for the tooltip */
    cursor: pointer;

}

.slider-label {
position: relative;

}





#label-175-hover{
    color: #00008D;
}



/* Show tooltip on hover */
.slider-labels:hover::after {
  content: ''; /* Default: no tooltip */
  position: relative;
  bottom: 100%; /* Position above the label */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out;
}

/* Show tooltip only for the 175% label */


input[type="range"] {
    padding: 0 
}

#spending-var {
    font-family: inherit; /* Use the parent's font */
    font-size: inherit; /* Use the parent's font size */
  }


.content-wrapper {
  transform: scale(0.85); /* Scales the content to 80% */
  transform-origin: center top; /* Ensures scaling starts from the top left */
  width: auto; /* Ensure the container takes up full width */
  height: auto; /* Adjusts height accordingly */
  /* overflow: hidden; Prevents overflow */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}

/* Style for Natural Tax Rate Calculation Section */
.natural-tax-rate {
    display: flex; /* Use flexbox layout */
    flex-direction: row; /* Arrange children in a row */
    justify-content: center; /* Center the items horizontally */
    align-items: center; /* Align items vertically in the center */
    width: 100%; /* Ensure the container takes up full width */
    flex-wrap: nowrap; /* Prevent wrapping of items */
}

.title-and-fraction-container {
    display: flex; /* Use flexbox layout */
    flex-direction: column; /* Arrange children in a column */
    align-items: center; /* Align items vertically in the center */
}

.ntr-fraction-container {
    display: flex; /* Use flexbox layout */
    flex-direction: row; /* Arrange children in a row */
    align-items: center; /* Align items vertically in the center */
    justify-content: center; /* Center the fraction container */
}

.ntr-fraction {
    display: flex; /* Use flexbox layout */
    flex-direction: column; /* Arrange children in a column */
    align-items: center; /* Align items horizontally in the center */
}

.ntr-divider {
    height: 3px;
    border: none;
    width: 405px;
    background: black;
    margin: 0 !important;
}

.ntr-denominator {
    white-space: nowrap; /* Prevent line breaks within the denominator */
}

.equals {
    margin-left: 10px; /* Add some space between the fraction and the equals sign */
}

.ntr-result {
    margin-left: 10px; /* Add some space between the equals sign and the result */
}

/* Start final tax rate calc section */

.container-two{
    width: 85%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px; 
    margin-left: 70px;
}

.title-and-fraction-container {
    display: flex;
    flex-direction: column;
    font-size: 30px;
    align-items: center;
}

.fraction-container {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px
  }

  .fraction {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-right: 10px; /* Space before equals sign */
  }

  .numerator {
    text-align: center;
    padding-bottom: 5px; /* Space between numerator and bar */
    border-radius: 0;
    margin-bottom: 10px;
    width: 155px;
  }

  .divider {
    height: 3px;
    border: none;
    width: 155px;
    background: black;
    margin: 0 !important;
  }

  .denominator {
    text-align: center;
    padding-top: 10px 0;
    border-radius: 0;
    width: 167px;
    margin-top: 10px;
    position: relative;
  }

  #exemptions {
    font-size: 14px;
    position: absolute;
    top: 0px;
    right: 10px;
    cursor: pointer;
  }

  #exemptions-popup{
    font-size: 14px !important;
    line-height: 1.4;
    position: absolute;
    left: 100%;
    bottom: 0px;
    width: 370px;
    padding: 10px;
    border: 2px solid black;
    white-space: normal;
    border-radius: 8px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    background: white;

    /* Hides it */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

/* Show popup */
#exemptions:hover + #exemptions-popup, #exemptions-popup:hover  {
    opacity: 1; 
    visibility: visible; 
}

  .equals {
    margin: 0 10px; /* Space on both sides of the equals sign */
  }

  .result {
    background-color: #d9f7be; /* Light green background for the result */
    padding: 5px 10px;
    border-radius: 5px;
  }

/* End final tax rate calc section */
  #slider_175 {
  width: 30%; /* Full width slider */
  margin: 0 auto;

}

#tooltip-175 {
    position: absolute;
    transform: translateX(-50%);
    z-index: 10; /* Bring tooltip above slider */
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 5px;
    padding: 1px;
    display: none; /* Initially hidden */
    pointer-events: none; /* Prevent interaction */
}

#slider_175::-webkit-slider-runnable-track {
    background: var(--slider-color);
    height: 14px;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    appearance: none;
}

.note {
  font-size: 0.875em; /* Smaller font size */
  color: #666; /* Optional: Lighter text color for subtlety */
  max-width: 1200px; /* Ensures it has the same width as other paragraphs */
  text-align: justify; /* Aligns text neatly */
  line-height: 1.4; /* Reduces line spacing */

}

.slider-label-container {
  display: flex; /* Arrange children in a row */
  justify-content: center; /* Center the sections horizontally */
  align-items: center; /* Align the sections vertically */
  gap: 6px; /* Add space between the sections */
  text-align: center; /* Center text within each section */
}

.label-section {
  line-height: 1.2; /* Adjust line height for better spacing */
}