.blue {
background-color: blue;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.pink {
background-color: pink;
}
body {
background-color: white;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
* {
color: #506d7e;
}
.main-container {
width: 100%;
overflow: hidden;
position: relative;
background-color: white !important;
background: linear-gradient(-40deg, rgba(1, 1, 1, 0) -67%, rgba(255, 255, 255, 1) 51%), url('data:image/svg+xml;utf8,');
background-size: 250px 250px;
background-position: 100% 103%;
background-repeat: no-repeat;
min-height: 100vh;
}
.main-container > .inner {
display: flex;
flex-wrap: nowrap;
}
#mobile-header {
width: 100%;
height: 60px;
position: fixed;
left: 0;
transition: left 250ms;
z-index: 900;
background-color: white;
padding: 5px;
}
#menu-toggle {
height: 40px;
width: 40px;
margin: 5px;
background: #2aa0b2;
float: left;
cursor: pointer;
color: white;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}
#mobile-header.menu-open {
left: 225px;
}
#menu-toggle:hover {
background-color: #506d7e;
}
.left-nav {
background-color: #DBF0F1;
height: 100%;
min-height: 100%; /* nav spans the whole visible area*/
position: relative;
left: 0;
top: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
flex-basis: 225px;
width: 225px;
transition: all 0.15s ease-in-out;
/* transform: translateX(-225px); */
flex-wrap: nowrap;
height: auto;
margin-left: -225px;
}
.left-nav.menu-open {
/* overflow-y: auto; */
/* transform: translateX(0); */
margin-left: 0px;
}
.left-nav .inner {
height: auto;
/*min-height: calc(100vh - 60px);*/
}
.left-nav .greeting-text {
font-size: 20px;
color: #506d7e;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 30px;
word-break: break-word;
}
.left-nav .nav-link {
color: #506d7e;
font-size: 16px;
position: relative;
}
.left-nav .nav-link * {
color: #506d7e;
}
.left-nav .nav-link img {
width: 22px;
filter: invert(40%) sepia(23%) saturate(554%) hue-rotate(158deg) brightness(95%) contrast(87%);
}
.left-nav .nav-link.collapse-control {
padding-right: 40px;
}
.left-nav .nav-link.collapse-control.collapsed:before {
transform: rotate(0deg) translateY(-50%);
transform-origin: 50% 50%;
}
.left-nav .nav-link.collapse-control:before {
position: absolute;
width: 16px;
height: 16px;
content: "";
background-image: url("data:image/svg+xml, ");
background-repeat: no-repeat;
background-size: 1rem 1rem;
top: 50%;
right: 20px;
transition: all 0.15s ease-in-out;
transform: rotate(180deg) translateY(50%);
transform-origin: 50% 50%;
}
.left-nav .collapse *,
.left-nav .collapsing * {
font-size: 14px;
}
.left-nav .nav-link.active * {
color: #93b9d0;
}
.left-nav .nav-link.active img {
filter: invert(100%) sepia(48%) saturate(4493%) hue-rotate(170deg) brightness(84%) contrast(93%);
}
.left-nav .nav-link:hover * {
color: #93b9d0;
}
.left-nav .nav-link:hover img {
filter: invert(100%) sepia(48%) saturate(4493%) hue-rotate(170deg) brightness(84%) contrast(93%);
}
.left-nav .nav-link.active {
color: #506d7e;
}
.left-nav .nav-link.active:after {
position: absolute;
content: "";
width: 0;
height: 0;
border-top: 15px solid transparent;
border-right: 15px solid white;
border-bottom: 15px solid transparent;
border-left: 15px solid transparent;
top: 5px;
right: 0;
}
.left-nav .nav-link.disabled {
color: #6b8b98;
}
.nav-section {
margin-left: 15px;
}
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid blue;
}
.completion-bar-text {
margin: 0 15px;
color: #506d7e;
font-size: 14px;
}
.completion-bar {
margin: 0 15px 15px;
}
.progress-bar.completion-bar-inner {
background-color: #506d7e;
}
.footer {
align-self: center;
margin-top: 10px;
margin-bottom: 10px;
}
.footer * {
color: #506d7e;
font-size: 12px;
}
.footer .security img {
width: 20px;
filter: invert(88%) sepia(21%) saturate(422%) hue-rotate(119deg) brightness(87%) contrast(95%);
}
.footer a {
text-decoration: underline;
}
/* #menu.menu-open .footer {
margin-top: 100px;
} */
.page-content {
padding: 60px 30px;
left: 0;
max-width: none;
transition: all 0.15s ease-in-out;
background: #fff;
/* background-color: #b6e1e3; */
}
.page-content.menu-open {
/* transform: translateX(225px); */
overflow: hidden;
}
form {
width: 100%;
}
.page-title {
/*color: #2aa0b2;
font-size: 45px;
line-height: 60px;
margin-top: 10px;*/
width: 100%;
height: 60px;
left: 256px;
top: 35px;
font-family: 'Saira';
font-style: normal;
font-weight: 400;
font-size: 44px;
line-height: 60px;
margin-bottom: 10px;
/* identical to box height, or 136% */
color: #2AA0B2;
}
.subtitle {
/* font-size: 36px;
color: #506d7e;
line-height: 36px;
padding-bottom: 25px;*/
height: 36px;
left: 256px;
top: 106px;
font-family: 'Saira';
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 36px;
color: #506D7E;
}
.description {
/* font-size: 1rem;*/
color: #506d7e;
margin-bottom: 10px;
font-family: 'Saira';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
}
.logo {
height: 60px;
width: 120px;
margin-top: 15px;
margin-bottom: 30px;
background-image: url("../img/header-logo.png");
background-repeat: no-repeat;
background-size: contain;
}
.header-logo {
float: right;
height: 50px;
width: 100px;
background-image: url("../img/header-logo.png");
background-repeat: no-repeat;
background-size: contain;
}
@media (min-width: 768px) {
#mobile-header {
display: none;
}
.page-content {
max-width: 1000px;
padding: 50px;
padding-top: 35px;
}
.page-content.dashboard {
background-color: transparent;
/* padding: 0; */
}
.left-nav {
margin-left: 0px;
overflow: hidden;
}
.page-content.menu-open {
transform: translateX(0);
}
}
/* Hamburger icon */
.hamburger {
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
}
.hamburger:hover {
opacity: 0.7;
}
.hamburger.is-active:hover {
opacity: 0.7;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
background-color: white;
}
.hamburger-box {
width: 70%;
height: 24px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
width: 100%;
height: 4px;
background-color: white;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before,
.hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
.hamburger--arrow.is-active .hamburger-inner::before {
transform: translate3d(-5px, 3px, 0) rotate(-45deg) scale(0.7, 1);
}
.hamburger--arrow.is-active .hamburger-inner::after {
transform: translate3d(-5px, -3px, 0) rotate(45deg) scale(0.7, 1);
}
.pay-wall-4 a {
color: #FDC689;
text-decoration: underline;
}
.pay-wall-icon {
float: right;
height: 22px;
}
.pay-wall-4 {
padding: 4px 6px 4px 11px;
margin: 10px 0;
width: 100%;
background-color: #C23B34;
color: white;
display: flex;
align-items: center;
justify-content: space-between;
}
.pay-wall-icon-2 {
height: 30px;
}
.inner-text {
color: #506D7D;
}
@media screen and (max-width: 767px) {
.left-nav {
position: fixed;
z-index: 1000;
}
}
@media screen and (max-width: 992px) {
.subtitle {
font-size: 24px;
padding-bottom: 15px;
}
}