body { background-color: #f5f5f5; } .dashboard-title { padding: .5em; font-size: 1.65em; margin: 0; } .dashboard-header { background-color: #000e23; position: fixed; top: 0%; left: 0%; right: 0%; z-index: 1000; } .dashboard-header__logo-bar, .dashboard-header__logo { float: left; } .dashboard-header__logo { color: #fff; font-weight: bold; font-size: 1.4em; padding: .8em 5em .8em 1em; } .dashboard-header__logo a { color: #fff; } .dashboard-header__bar { font-size: 1.2em; float: right; padding: 1em; } .dashboard-header__bar a { color: #fff; } .dashboard-header__nav { font-size: .92em; float: right; } .dashboard-header__nav li { display: inline-block; vertical-align: middle; } .dashboard-header__nav a { color: #fff; display: inline-block; padding: .8em 1.4em; } .main-container { margin-top: 4em; } .main-container__sidebar { background-color: #fff; box-shadow: 3px 0 3px rgba(0, 0, 0, 0.12); width: 220px; padding: 1.3em 0 0 0; position:fixed; left: 0%; height: 100%; } .main-container__sidebar a { color: #0b3075; display: block; padding: 1.3em 1.5em; } .main-container__sidebar a:hover { color: #1653c4; } .main-container__nav:hover { overflow-y: scroll; } .main-container__nav ul { list-style: none; margin: 0; padding: 0; } .main-container__nav .fa { margin: 0 .4em 0 0; } .main-container__body { margin: 4.3em 0 1em 220px; } .main-container__body-header { background: #007BFF; background: linear-gradient(to bottom, #007BFF, #007BFF); color: #fff; font-weight: bold; font-size: 1.5em; padding: 1em; } .main-container__body-header .fa { margin: 0 .3em 0 0; } .main-container__body-block { background-color: #fff; box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.12); border: 1px solid #e0e0e0; margin: 1em; padding: .5em; } .account-balance { background-color: #f0f0f0; border-radius: .3em; margin: 1em; } .account-balance--blue { background-color: #007BFF; color: #fff; } .account-balance--red { background-color: #e95754; color: #fff; } .account-balance--green { background-color: #007BFF; color: #fff; } .account-balance--yellow { background-color: #b3b002; color: #fff; } .account-balance--blank { background-color: #fafafa; border: 1px solid #e0e0e0; color: #909090; } .account-balance--blank__title { font-size: .9em; font-weight: bold; text-transform: uppercase; } .account-balance--blank__currency { padding: 0 0 0 1em; } .account-balance--blank__amount { color: #000e23 !important; font-weight: bold; font-size: 1.3em; padding: 0 0 0 .7em; } .account-balance--blank__icon { border-radius: .2em; padding: .5em; text-align: center; } .account-balance__currency { font-size: 1.5em; } .account-balance__title { font-size: .75em; padding: .6em 0; text-transform: uppercase; } .ref-info { border: 1px solid #e0e0e0; margin: 1em; } .ref-info__title { background-color: #007BFF; color: #fff; padding: .5em; font-size: 1em; } .ref-info__content-value { font-size: 1.5em; font-weight: bold; padding: 1em; } .ref-info__content-title { padding: 0 1em 1em 1.3em; } .tablex-container { margin: 1em; } .tablex { border-collapse: collapse; font-size: .87em; width: 100%; } .tablex td { background-color: #fff; border-bottom: 1px solid #f0f0f0; padding: .8em; } .tablex__head td { border-width: 1px 0; border-top-color: #f0f0f0; border-bottom-color: #cacaca; border-style: solid; font-weight: bold; } .pagination { color: #444; font-size: .9em; padding: 1em; } .pagination__text { padding: .5em; } .pagination__buttons span, .pagination__buttons a { display: inline-block; padding: .5em .6em; vertical-align: middle; } .button--small { border-radius: 0; font-size: .9em; font-weight: normal; padding: .7em 1em; margin: 0 .4em; } .text--small { font-size: .8em; } input:disabled { background-color: #f0f0f0; border-color: #e0e0e0; cursor: not-allowed; } @media (max-width: 800px) { body { padding-top: .3em; } .main-container__sidebar { top: 0%; z-index: 100000; overflow-y: scroll; left: -120%; transition: all ease-in-out .3s; } .main-container__sidebar--is-active { left: 0% !important; } .main-container__body { margin: 0; } .dashboard-header__bar { margin: 0; float: right; } .dashboard-header__nav { display: none; overflow: scroll; width: 100%; } .dashboard-header__nav ul { overflow-x: scroll; max-width: 100%; } .dashboard-header__nav li { display: table-cell; } .dashboard-header__nav a { padding: .5em; white-space: nowrap; } .tablex-container { overflow-x: scroll; } }