:root { --primary-800: 16,43,81; --lightgrey-200: 217,217,217; --lightgrey-100: 244,240,240; --secondary-500: 180,151,80; } .block { display: block; } .button { color: rgb(var(--primary-800)); border: 1px solid rgb(var(--primary-800)); border-radius: 5rem; width: fit-content; background: none; padding: 0.2rem 1rem; font-weight: 800; } .button_primary { font-size: 1rem; padding: 0.6rem; text-decoration: none; /* text-transform: uppercase; */ background: rgb(var(--primary-800)); color: white; width: 9em; text-align: center; transition: transform 0.4s ease-out; } .button_primary:hover { transform: translate(7px, 0); } .button_secondary { font-weight: bold; } .checkbox__input { display: none; } .checkbox__input:checked ~ .checkbox:before { display: flex; align-items: center; justify-content: center; content: "\2713"; color: #3d99db; overflow: hidden; width: var(--checkbox-size); height: var(--checkbox-size); } .checkbox { --checkbox-size: 15px; display: inline-block; width: var(--checkbox-size); height: var(--checkbox-size); border: none; background: rgb(var(--lightgrey-200)); } .flex { display: flex; } .flex_column { flex-direction: column; } .flex_apart { justify-content: space-between; } .form__section { border-radius: 5px; background: rgb(var(--lightgrey-100)); border: none; padding-top: 1em; margin-top: 2em; } .form__header { margin: 0; padding: 0; margin-bottom: 1em; color: rgb(var(--primary-800)); text-transform: uppercase; font-size: 1rem; font-weight: 600; display: flex; align-items: center; grid-gap: 0.5em; white-space: nowrap; } .form__header:before, .form__header:after { height: 0.5em; width: 100%; content: " "; background: rgb(var(--secondary-500)); } .form__subheading { text-align: center; font-size: 1rem; margin-bottom: 0.5rem; } .form__button { margin-top: 1em; } .header { background: rgb(var(--lightgrey-100)); display: flex; justify-content: space-between; border-radius: 5px; } .header__logo { width: 4rem; } .header__text { color: rgb(var(--secondary-500)); font-weight: bold; } .input { border: 1px solid rgb(var(--primary-800)); box-shadow: inset 0px 0px 1px 0.3px rgb(var(--primary-800)); background: none; width: 5rem; } .input_number { width: 5rem; } .loader { --loader-color: var(--color-brand-blue); display: none; margin:0 auto; border:4px solid transparent; position:fixed; top: 0; width:100%; z-index: 20; padding:1px; background: white; } .loader:before { content:''; border:1px solid var(--loader-color); position:absolute; top:-4px; right:-4px; bottom:-4px; left:-4px; } .loader .loader__bar { position:absolute; top:0; right:100%; bottom:0; left:0; background:var(--loader-color); width:0; animation:borealisBar 2s linear infinite; } @keyframes borealisBar { 0% { left:0%; right:100%; width:0%; } 10% { left:0%; right:75%; width:25%; } 90% { right:0%; left:75%; width:25%; } 100% { left:100%; right:0%; width:0%; } } .loader_fullscreen { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 10; } .loader_preloader { --preloader-background: white; --preloader-spinner-color: rgb(var(--color-rgb-primary)); --preloader-text-color: var(--preloader-spinner-color); display: inline-block; /* position: relative; */ background: var(--preloader-background); display: flex; justify-content: center; align-items: center; } .loader_preloader:before { content: "Loading..."; font-size: 1.5rem; color: var(--preloader-text-color); } .loader_preloader:after { content: " "; display: block; border-radius: 50%; width: 0; height: 0; margin: 8px; box-sizing: border-box; border: 32px solid var(--preloader-spinner-color); border-color: var(--preloader-spinner-color) transparent var(--preloader-spinner-color) transparent; animation: preloader 1.2s infinite; } @keyframes preloader { 0% { transform: rotate(0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 50% { transform: rotate(900deg); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 100% { transform: rotate(1800deg); } } .question { display: flex; flex-direction: column; margin-bottom: 1em; } .question__prompt { margin: 0; } .question__response { display: block; align-self: end; } .question__response_option { align-self: start; margin-bottom: 0.5rem; display: flex; grid-gap: 0.5rem; align-items: center; } .question__response_checkbox { border: none; background: rgb(var(--lightgrey-200)); } .question_checkbox { } .question__help-text { display: block; font-size: 0.8rem; cursor: pointer; align-self: end; } .question__prompt { } .question__help { font-size: 0.9em; } .question_finaid { --question-input-align: center; --question-label-align: center; } .question_finaid > .question__prompt { text-align: center; } .question_finaid > .question__response { display: block; margin: auto; } .question_flex { flex-direction: row; grid-gap: 2em; justify-content: space-between; } .question_break-housing { flex-direction: row; grid-gap: 2em; justify-content: space-between; } .question_break-housing > .question__help-text { } .question_custom-income { grid-area: 2/span 3; } .question_table { display: grid; grid-gap: 0.5em; grid-template-columns: repeat(5, 1fr); } .question_table__heading { display: flex; align-items: end; justify-content: center; font-weight: bold; grid-row-start: 1; grid-row-end: 1; margin: 0; } .question_table > .question_table__input:nth-of-type(1) { grid-column-start: 1; } .question_table > .question_table__input { width: 100%; box-sizing:border-box; } @media screen and (min-width: 370px) { .question_table { display: grid; } } .radio__input { display: none; } .radio { --radio-size: 20px; border-radius: 50%; width: var(--radio-size); height: var(--radio-size); display: inline-block; border: none; background: rgb(var(--lightgrey-200)); } .radio__input:checked ~ .radio:before { display: flex; align-items: center; justify-content: center; content: "\2713"; color: #3d99db; overflow: hidden; width: var(--radio-size); height: var(--radio-size); } /* .table { border-collapse: collapse; } .table__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 0; } .table_statement > .table__body { grid-template-columns: repeat(4, minmax(0, 1fr)); } */ .table { width: fit-content; --table-heading-text-align: left; --table-subheading-text-align: left; border-collapse: collapse; border: 1px solid rgb(var(--secondary-500)); border-top: none; background: rgb(var(--lightgrey-100)); vertical-align: top; } .table__body { margin-left: -1px; margin-bottom: -1px; margin-right: -1px; } .table__row { width: 100%; } .table__cell { border: 1px solid rgb(var(--secondary-500)); margin-left: -1px; } .table__row > .table__cell_expenditure { border-left-width: 5px; } .table__row > .table__cell_expenditure ~ .table__cell_expenditure { border-left-width: 1px; } .table__cell_header { margin: 0; border: 1px solid rgb(var(--secondary-500)); border-bottom: none; margin-left: -1px; margin-right: -1px; color: rgb(var(--primary-800)); font-weight: bold; text-align: var(--table-heading-text-align); } .table__cell_span-2 { width: 310px; } .table__subheader { text-align: var(--table-subheading-text-align); } .table_statement { --table-heading-text-align: center; } .table_statement-data { display: flex; align-items: flex-start; justify-content: space-between; } .table__sub-table { flex-basis: 50%; flex-grow: 1; } @font-face { font-family: Roboto; src: url('/assets/fonts/Roboto/Roboto-Bold.ttf'); font-weight: 800 } @font-face { font-family: Roboto; src: url('/assets/fonts/Roboto/Roboto-Medium.ttf'); font-weight: 500 } @font-face { font-family: Roboto; src: url('/assets/fonts/Roboto/Roboto-Regular.ttf'); font-weight: 400 } @font-face { font-family: Roboto; src: url('/assets/fonts/Roboto/Roboto-Light.ttf'); font-weight: 300 } @font-face { font-family: Roboto; src: url('/assets/fonts/Roboto/Roboto-Thin.ttf'); font-weight: 200 } body { font-family: Roboto; color: rgb(var(--primary-800)); font-weight: 300; } .personal-statement { display: grid; grid-gap: 2rem; } .personal-statement__month-total { font-size: 0.85em; } .prinbill__total { text-align: center; } @media screen and (min-width: 800px) { .header { flex-basis: 40%; } .input-page { display: flex; flex-wrap: wrap; grid-gap: 1rem 3rem; } .input-page > .form__section:nth-of-type(1) { flex-grow: 1; width: auto; } .input-page > .form__section { margin-top: 0; width: 100%; } .form__section { padding: 1em; } .form__section_income > .form__group { display: grid; grid-gap: 1em 2em; grid-template-columns: repeat(3, 1fr); padding: 1em 0; } .form__section_income .form__button { grid-column-start: 1; } .form__section_income > .form__group:not(:last-of-type) { border-bottom: 1px dashed rgb(var(--primary-800)); } .form__section_income .question__response { align-self: start; } .form__section_income .form__subheading { text-align: left; grid-area: 1 /span 3; margin: 0; } .question_finaid { grid-area: 1 / span 3; } .form__button-group { width: 100%; justify-content: start; grid-gap: 9rem; } .results-page { display: flex; flex-wrap: wrap; grid-gap: 2rem; } .results-page__statement { flex: 0.15 0.75 65%; } .results-page__prinbill-plan { flex: 0.85 0.25 25%; } } @media screen and (min-width: 1000px) { .form__section_expenditure { position: relative; display: flex; padding-top: calc(2em + 21px); } .form__section_expenditure > .form__header { width: calc(100% - 2em); box-sizing: border-box; position: absolute; top: 1em; } .form__section_expenditure > .form__group { border-right: 1px dashed rgb(var(--primary-800)); padding: 1em; } .personal-statement { display: grid; grid-gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); } .personal-statement__title { grid-column: 1 / -1; } } @media print { .results-page { display: block; } .personal-statement { display: block; } .personal-statement__table { margin-bottom: 2rem; } .button { display: none; } } @media print { .table { break-inside: avoid; } }