@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700;800&display=swap');

html {
    scroll-behavior: smooth;
}

.alert {
    color: var(--color-red);
}

.panel {
    margin-bottom: 1em;
    padding: 1rem;
    position: relative;
}

button.remove,
a.remove {
    color: var(--color-orange);
    position: absolute;
    right: 5px;
    top: 5px;
}

.icon-button {
    padding: unset;
    background: unset;
    border: unset;
}

.icon-button:hover {
    color: var(--color-gray-dark);
}

.field small {
    color: var(--color-gray-dark);
    padding: 6px 0;
}

/* Taken from: https://css-tricks.com/snippets/css/clear-fix/ */
.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.75;
}

.button.primary:disabled:hover {
    background-color: var(--color-green-light);
    border-color: var(--color-green-light);
}

.collapse {
    display: none;
}

.show {
    display: block;
}

.indicator .outline {
    border: 1px solid var(--color-green-light);
}

.indicator .outline.inactive {
    border: 1px solid var(--color-orange);
}

/* Plan Styles */
.grid-row {
    align-items: center;
    display: grid;
    grid-gap: 1em;
    grid-template-columns: 1fr;
    justify-items: left;
    margin-bottom: 1em;
}

.grid-row * {
    align-self: center;
    justify-self: left;
}

.life-money .grid-row * {
    justify-self: center;
}

.grid-row .number {
    justify-self: left;
}

.grid-row.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-row.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-row.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-row.grid-5 {
    grid-template-columns: repeat(5, 1fr);
}

.image-center {
    text-align: center;
}

.income-goals {
    text-align: center;
}

.income-goals .circle {
    background-color: var(--color-green-light);
    border-radius: 50%;
    color: #fff;
    font-size: 1.15rem;
    font-weight: bold;
    height: 150px;
    padding: 0 25px;
    text-align: center;
    width: 150px;
    display: inline-block;
}

.life-money-two-inputs .input-group {
    display: inline-block;
}

.page-content .toggle-off {
    color: var(--color-red);
}

.page-content .toggle-off:hover {
    color: var(--color-gray-dark);
}

#print-plan .page-title {
    border-left: 5px solid var(--color-green-light);
    color: var(--color-green-light);
    margin-bottom: 1.5em;
    padding: 0.25em 0 0 1em;
    text-transform: uppercase;
}

.ql-editor {
    overflow-y: hidden !important;
}

.ql-editor h1 {
    border-left: 5px solid var(--color-green-light);
    padding-left: 1em !important;
    text-transform: uppercase;
    color: var(--color-green-light);
}

.ql-editor p {
    margin: 0 0 20px 0 !important;
}

.ql-snow .ql-editor {
    word-break: break-word;
}

.ql-snow .ql-editor blockquote {
    border-left: 4px solid var(--color-green-highlight) !important;
    margin-bottom: 2em !important;
    padding-left: 2em !important;
}


.ql-snow .ql-editor h2 {
    font-size: 20px !important;
}

.ql-snow .ql-editor h3 {
    font-size: 16px !important;
}

.ql-snow .ql-editor h4 {
    font-size: 14px !important;
}

.toggle-on {
    color: var(--color-green-light);
}

.two-column-table td {
    width: 50%
}

.three-column-table td {
    width: 33.33%
}

/* Plan Print Styles */
.show-print {
    display: none;
}

.gray-background {
    background-color: #f5f5f5;
    opacity: 50%;
    position: relative;
}

.gray-background:after {
    content: "WILL NOT PRINT";
    position: absolute;
    top: 33%;
    left: 29%;
    font-size: 4rem;
    opacity: 1;
    transform: rotate(-45deg);
}

.light-green-background {
    background-color: rgba(169, 222, 191, .5);
    position: relative;
}


@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin {
    animation: rotation 2s infinite linear;
    display: inline-block;
    height: 24px;
    line-height: 0;
    vertical-align: middle;
}
@media screen and (max-width: 1024px) {
    .sidebar-header .site-title {
        flex: 1 0 168px;
    }
}
@media screen and (max-width: 480px) {
    ul {
        list-style-type: none;
        margin-bottom: 1em;
        padding: 0;
    }

    li {
        margin-bottom: 1em;
    }

    ul ul {
        margin-top: 1em;
    }

    .gray-background:after {
        left: 25%;
        font-size: 3rem;
    }
}

@media print {
    html, body {
        height: auto !important;
    }

    #print-plan .page.panel:last-child {
        page-break-after: auto !important;
    }

    body {
        background-color: var(--color-white);
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        line-height: 20px;
    }

    .page-content {
        max-width: 100%;
    }

    .container {
        width: auto;
    }

    .panel {
        box-shadow: unset;
        padding: 1rem 1rem 0 1rem;
    }

    #print-plan p {
        line-height: 20px;
        margin: 0 0 20px 0;
    }

    a[href]:after {
        content: none;
    }
    
    table,
    tr,
    td,
    th {
        border: 1px solid var(--color-gray-light);
        font-size: 12px;
        margin: 0 0 0.75em 0;
        padding: 0.75em;
    }

    table tr td,
    table tr th {
        page-break-inside: avoid !important;
    }

    table tbody tr td:before,
    table tbody tr td:after {
        content: "";
        height: 4px;
        display: block;
    }


    thead th {
        color: var(--color-green-light);
        font-weight: bold;
    }

    th {
        font-weight: bold;
    }

    canvas {
        max-height: 4in;
        max-width: 100%;
        width: 100%;
    }

    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        page-break-inside:avoid;
    }

    img {
        page-break-inside: avoid;
        page-break-after: avoid;
    }

    blockquote, pre {
        page-break-inside: avoid;
    }

    ul, ol, dl  {
        page-break-before: avoid;
    }

    .establish-credit-score-ul li{
        word-break: break-word;
    }

    .stop-page-break {
        page-break-after: avoid;
        page-break-inside: avoid;
    }

    .page {
        border: 0;
        break-after: always;
        float: none;
        margin-top: 0;
        padding-top: 0;
        page-break-after: always;
        width: 100%;
    }

    #print-plan .trainer-comments {
        border: 0;
    }

    .show-print {
        display: inline-block;
    }

    .student-loan-management-td {
        word-break: break-word;
    }

    .ql-editor {
        display: block;
        line-height: 20px;
        padding: unset !important;
        overflow: hidden;
    }

    blockquote {
        padding-left: 2em !important;
    }

    h3.show-print {
        display: block;
    }

    .hide-print {
        display: none;
    }

    nav,
    .sidebar,
    button,
    footer {
        display: none !important;
    }

    .col-md-9 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    header {
        margin-top: 25%;
    }

    .communication-timeline {
        margin-top: 100px;
    }

    .field {
        display: none;
    }

    strong {
        font-weight: bold;
    }

    #home-savings ul {
        margin-bottom: 0;
    }

    .light-green-background {
        background-color: unset;
    }

    section.footer {
        border-top: 1px solid var(--color-gray-light);
        margin-top: 3rem;
        padding-top: 3rem;
    }

    section.footer h2 {
        font-weight: bold;
        font-size: 15px;
        margin: 0;
    }

    section.footer h3 {
        font-weight: bold;
        font-size: 13px;
        margin: 0;
    }

    #print-plan section.footer p {
        margin-bottom: 10px;
    }

    /* Edge on Windows */
    .windows-print a[href]:after {
        content: " [" attr(href) "] ";
    } 
}

@-moz-document url-prefix() {
    @media print {
        a[href]:after {
            content: " [" attr(href) "] ";
        }
    }
}