body { display: flex; min-height: 100vh; flex-direction: column; } header, main, footer { margin-left: 350px; } @media only screen and (max-width: 992px) { header, main, footer { margin-left: 0; } } main { flex: 1 0 auto; margin-bottom: 24px; } .text-color { color: #212121; } .budgetmaster-blue { background-color: #2E79B9; } .budgetmaster-blue-text { color: #2E79B9; } .budgetmaster-blue-light { background-color: rgba(46, 121, 185, 0.8); } .budgetmaster-blue-light-text { color: rgba(46, 121, 185, 0.8); } .budgetmaster-green { background-color: #5cb85c !important; } .budgetmaster-green-text { color: #5cb85c; } .budgetmaster-dark-green { background-color: #468C46; } .budgetmaster-dark-green-text { color: #468C46; } .budgetmaster-red { background-color: #D82C29 !important; } .budgetmaster-red-text { color: #D82C29; } .budgetmaster-orange { background-color: orange; } .budgetmaster-orange-text { color: orange; } .budgetmaster-grey { background-color: #696969 !important; } .budgetmaster-grey-text { color: #696969; } .budgetmaster-baby-blue { background-color: #4CABD3; } .budgetmaster-baby-blue-text { color: #4CABD3; } .budgetmaster-purple { background-color: #5856d6; } .budgetmaster-purple-text { color: #5856d6; } .budgetmaster-text-black { color: rgba(0,0,0,0.87); } .budgetmaster-text-isPayment { color: #FFFFFF; } .budgetmaster-dark-orange { background-color: #ff7043; } .budgetmaster-dark-orange-text { color: #ff7043; } .budgetmaster-update { background-color: #F7EB84; } .sidenav-trigger, .sidenav-trigger i { font-size: 1.5em; } .sidenav { width: 350px; } ul.sidenav.sidenav-fixed > li:last-child { margin-bottom: 160px; } .sidenav li.active { background-color: rgba(0, 0, 0, 0.15); } /*active nav bar sub list items*/ .sidenav .collapsible-body > ul:not(.collapsible) > li.active, .sidenav.fixed .collapsible-body > ul:not(.collapsible) > li.active { background-color: rgba(0, 0, 0, 0.25); } /*text color for active nav bar sub list items*/ .sidenav .collapsible-body > ul:not(.collapsible) > li.active a, .sidenav.fixed .collapsible-body > ul:not(.collapsible) > li.active a { color: rgba(0, 0, 0, 0.87); } .sidenav li > a, .sidenav-sub li > a { font-weight: 600; } .searchWrapper { background-color: #FFFFFF; box-shadow: none; } .searchWrapper .input-field i, .searchWrapper .input-field label.active i{ color: #212121; } .sidenav #buttonSearch { right: 3rem; } .btn, .btn-flat { text-transform: none; font-weight: 600; } .btn:hover, .btn-floating:hover { background-color: #70A3CF; } .btn:focus, .btn-floating:focus { background-color: #2E79B9; } .bold { font-weight: bold; } .italic { font-style: italic; } /* label focus color */ .input-field input[type=text]:focus + label { color: #2E79B9 !important; } /* label underline focus color */ .input-field input[type=text]:focus { border-bottom: 1px solid #2E79B9 !important; box-shadow: 0 1px 0 0 #CCCCCC !important; } /* label password focus color */ .input-field input[type=password]:focus + label { color: #2E79B9 !important; } /* label password underline focus color */ .input-field input[type=password]:focus { border-bottom: 1px solid #2E79B9 !important; box-shadow: 0 1px 0 0 #CCCCCC !important; } /* label focus color */ .input-field textarea:focus + label { color: #2E79B9 !important; } /* label underline focus color */ .input-field textarea:focus { border-bottom: 1px solid #2E79B9 !important; box-shadow: 0 1px 0 0 #CCCCCC !important; } /* label focus color */ .chips-label.active { color: #2E79B9 !important; } /* label chips underline focus color */ .chips.focus { border-bottom: 1px solid #2E79B9 !important; box-shadow: 0 1px 0 0 #CCCCCC !important; } .main-card { margin: auto; width: 95%; padding: 2rem; } #nav-logo-container { padding: 10px 0 10px 10px; height: 100px !important; } #nav-logo { max-height: 80px; } #logo { max-height: 100px; } .page-footer { padding-top: 0; } .nav-padding { padding: 0 0 0 32px !important; } .nav-margin { margin: 0 0 0 32px !important; } .no-padding { padding: 0; } .no-margin-bottom { margin-bottom: 0; } .no-margin-top { margin-top: 0; } .no-margin { margin: 0 !important; } .text-red { color: #D82C29; } .text-light-red { color: #F55856; } .text-green { color: #5cb85c; } .text-dark-green { color: #247A2C; } .text-grey { color: #757575; } .color-red { background-color: #D82C29; } .color-green { background-color: #5cb85c; } .budget-bar-container { margin: auto; width: 85%; height: 3%; } .budget-bar { height: 100%; } .icon-chevron { font-size: 6vmin !important; } .icon-today { font-size: 4vmin !important; } .headline { font-size: 2rem; text-transform: initial; color: #212121; } .headline-advice { color: #212121; opacity: 0.7; margin-top: 0.5rem; } .headline-date { font-size: 4vmin; text-transform: capitalize; } .headline-date:hover { cursor: pointer; text-decoration: underline; } .budget-headline-icon { margin-top: 0; } .mobile-menu { color: #000000; background-color: #FFFFFF; width: 70px; } .mobile-menu-icon { margin-right: 5px !important; } #logo-huge { max-height: 20vmin; } #logo-home { max-height: 15vmin; } .break-all { word-break: break-all; } .stripe { width: 8px; margin-right: 26px; height: 48px; display: inline-block; float: left; } .stripe-level-2 { width: 16px; margin-right: 52px; height: 48px; display: inline-block; float: left; } /* select font color */ ul.dropdown-content.select-dropdown li span { color: #2E79B9; } ul.dropdown-content.select-dropdown li.selected { background-color: rgba(0, 0, 0, 0.15); } /* switch color */ .switch label input[type="checkbox"]:checked + .lever { background-color: rgba(46, 121, 185, 0.6); } .switch label input[type="checkbox"]:checked + .lever::after { background-color: #2E79B9; } /* normal checkbox*/ input[type="checkbox"]:checked + span:not(.lever)::before { border-top: 3px solid transparent; border-left: 3px solid transparent; border-right: 3px solid #2E79B9; border-bottom: 3px solid #2E79B9; } /* chips autocomplete dropdown */ .autocomplete-content li span { color: #2E79B9; } .autocomplete-content li:hover { background-color: rgba(0, 0, 0, 0.15); } /* radio buttons */ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + span::after { background-color: #2E79B9; } input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + span::before, [type="radio"].with-gap:checked + span::after { border: 2px solid #2E79B9; } .account-budget { font-size: 20px !important; } .account-budget-date { font-size: 12px !important; } .account-navbar { padding: 5px 32px 12px 32px; } .all-account-placeholder { font-weight: bold; } .login-button { text-transform: none; } .login-margin-top { margin-top: 20px; } .login-message { width: auto; margin: auto } .btn-flat, .btn { text-overflow: ellipsis; white-space: nowrap; } .home-menu-flex { display: flex; flex-wrap: wrap; } .home-menu-flex .col { margin-bottom: 3rem; } .home-menu-link { display: inline-block; } .home-menu-link-item { font-size: 1.2rem; } .home-menu-link-item:hover { background-color: #EEEEEE; } .home-menu-disabled * { color: #AAAAAA !important; } /* mark navbar entry "chart" as not available */ .home-menu-disabled > li > a > i { color: #AAAAAA !important; } .home-menu-text { padding-left: 16px; margin-top: 2rem; } .import-text { color: #2E79B9; } .datePicker-fixed-width { width: 30%; } .no-border-table tr { border: none; } .bordered tr { border-bottom: 1px solid #212121; } .no-wrap { white-space: nowrap; } .settings-switch { margin-bottom: 20px; } /* inputs with icon prefix */ .input-field .prefix.active { color: #2E79B9; } .invisible { opacity: 0; } .hidden { display: none; } @media all and (min-width: 960px) { .icon-budget { font-size: 4vmin !important; } .budget-headline { font-size: 1.5vmin; color: #757575; } .budget { font-size: 2.5vmin; } .fixed-action-btn { right: 53px; } } @media all and (max-width: 959px) and (min-width: 600px) { .icon-budget { font-size: 5.5vmin !important; } .budget-headline { font-size: 2.5vmin; color: #757575; } .budget { font-size: 3.5vmin; } } @media all and (max-width: 599px) and (min-width: 320px) { .icon-budget { font-size: 6vmin !important; } .budget-headline { font-size: 4vmin; color: #757575; } .budget { font-size: 3.8vmin; } .container, .transaction-container { width: 100% !important; } } .debug { border: 1px solid red; }