@import url("https://use.typekit.net/vib2fms.css");


*:focus {
	outline: none;
}

:root {
	--black:#152b4e;
	--white: #FFF;
	--gray: #9C9C9C;
	
	--red:#EF4035;
	--red-dark:#7B0000;
	--red-light: #FF8686;
	--red-lighter:#FFF1F1;

	--blue:#3267B1;
	--blue-dark:#152B4E;
	--blue-light: #AFBFFF;
	--blue-lighter:#F0F4FC;
	--blue-tone: #6D89C5;

	--second-blue: #3F35D6;
	--second-yellow: #FFDB1D;
	--second-green: #C0CA29;

	--dim: 8px;

	--dim-4: calc(0.5 * var(--dim));
	--dim-8: calc(1 * var(--dim));
	--dim-16: calc(2 * var(--dim));
	--dim-24: calc(3 * var(--dim));
	--dim-32: calc(4 * var(--dim));
	--dim-40: calc(5 * var(--dim));
	--dim-48: calc(6 * var(--dim));
	--dim-56: calc(7 * var(--dim));
	--dim-64: calc(8 * var(--dim));
	--dim-72: calc(9 * var(--dim));
	--dim-80: calc(10 * var(--dim));
	--dim-96: calc(12 * var(--dim));
	--dim-104: calc(13 * var(--dim));
	--dim-128: calc(16 * var(--dim));
	--dim-144: calc(18 * var(--dim));

	--spacing-s: calc(1 * var(--dim));
	--spacing-m: calc(2 * var(--dim));
	--spacing-l: calc(3 * var(--dim));
	--spacing-xl: calc(4 * var(--dim));


	--fontsize-xxl: 64px;
	--fontsize-xl: 48px; 
	--fontsize-l: 24px; 
	--fontsize-ml: 20px; 
	--fontsize-m: 16px; 
	--fontsize-s: 14px;   
	--fontsize-xs: 12px;
}

html {
	scroll-behavior: smooth;
}

body, html {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

body {
	font-weight: normal;
	scroll-behavior: smooth;
	color: var(--black);
	letter-spacing: -0.02em;

	font-family: "freight-sans-pro", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: var(--fontsize-m);
}


a {
	text-decoration: none;
	color: currentColor;
}

p {
	padding: 0;
	margin: 0;
}

* {
	font-feature-settings: 'pnum' on, 'lnum' on;
}

/* BACKGRUONDS  */

/* Background color classes */
.bg--black {
	background-color: var(--black);
	color: var(--white);
}

.bg--white {
	background-color: var(--white);
	color: var(--black);
}

.bg--gray {
	background-color: var(--gray);
	color: var(--black);
}

.bg--red {
	background-color: var(--red);
	color: var(--white);
}

.bg--red-dark {
	background-color: var(--red-dark);
	color: var(--white);
}

.bg--red-light {
	background-color: var(--red-light);
	color: var(--black);
}

.bg--red-lighter {
	background-color: var(--red-lighter);
	color: var(--black);
}

.bg--blue {
	background-color: var(--blue);
	color: var(--white);
}

.bg--blue-dark {
	background-color: var(--blue-dark);
	color: var(--white);
}

.bg--blue-light {
	background-color: var(--blue-light);
	color: var(--black);
}

.bg--blue-lighter {
	background-color: var(--blue-lighter);
	color: var(--black);
}

.bg--second-blue {
	background-color: var(--second-blue);
	color: var(--white);
}

.bg--second-yellow {
	background-color: var(--second-yellow);
	color: var(--black);
}

.bg--second-green {
	background-color: var(--second-green);
	color: var(--black);
}

.bg--dotted {
	background-image: url('_images/pattern--dots.svg');
	background-size: var(--dim-8);
}

/* Font color classes */
.font__set--color--black {
	color: var(--black);
}

.font__set--color--white {
	color: var(--white);
}

.font__set--color--gray {
	color: var(--gray);
}

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

.font__set--color--red-dark {
	color: var(--red-dark);
}

.font__set--color--red-light {
	color: var(--red-light);
}

.font__set--color--red-lighter {
	color: var(--red-lighter);
}

.font__set--color--blue {
	color: var(--blue);
}

.font__set--color--blue-dark {
	color: var(--blue-dark);
}

.font__set--color--blue-light {
	color: var(--blue-light);
}

.font__set--color--blue-lighter {
	color: var(--blue-lighter);
}

.font__set--color--second-blue {
	color: var(--second-blue);
}

.font__set--color--second-yellow {
	color: var(--second-yellow);
}

.font__set--color--second-green {
	color: var(--second-green);
}

.font__set--serif {
	font-family: "freight-big-pro", serif;
}

h1, h2, h3, h4, h5 {
	padding: 0;
	margin: 0;
	font-weight: normal;

/*	text-transform: uppercase;
	letter-spacing: -1px;*/
}

h3 {
	font-weight: bold;
}

/* FONTS SIZE */

.font__size--head {
	font-size: var(--dim-64);
	line-height: var(--dim-56);
}

.font__size--sub {
	font-size: var(--dim-32);
	line-height: var(--dim-24);
}

.font__size--body {
	font-size: var(--dim-16);
	line-height: var(--dim-24);
}

.font__size--label {
	font-size: 13px;
	line-height: 13px;
}


/* GRID */

.section, section, footer, header {
	position: relative;
	margin: 0;
	padding: 0vw 0;
}

.section__margin {
	position: relative;
	width: calc(100% - var(--dim-64) - var(--dim-64) );
	padding: 0 var(--dim-32);
}

.grid--12 {
	position: relative;
/*	width: 100%;*/

	width: calc(100% - 0vw);
    padding-left: 0vw;

	display: grid;
	grid-template-columns: repeat(12, [col-start] 1fr);
	gap: var(--dim-16) var(--dim-16);
}

.col--1 {
	position: relative;
	grid-column: span 1;
}

.col--2 {
	position: relative;
	grid-column: span 2;
}

.col--3 {
	position: relative;
	grid-column: span 3;
}

.col--4 {
	position: relative;
	grid-column: span 4;
}

.col--5 {
	position: relative;
	grid-column: span 5;
}

.col--6 {
	position: relative;
	grid-column: span 6;
}

.col--7 {
	position: relative;
	grid-column: span 7;
}

.col--8 {
	position: relative;
	grid-column: span 8;
}

.col--9 {
	position: relative;
	grid-column: span 9;
}

.col--10 {
	position: relative;
	grid-column: span 10;
}

.col--11 {
	position: relative;
	grid-column: span 11;
}

.col--12 {
	position: relative;
	grid-column: span 12;
}

div[class^='col--'] {
/*	padding: 2vw;*/
/*	border-radius: 0.8vw;*/
}

/* BUTTONS */

.btn__normal {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0 var(--spacing-m);

	height: var(--dim-32);

	background-color: var(--blue-lighter);

	letter-spacing: 0.005em;
	border-radius: 2px;

	box-sizing: border-box;
	transition: all 0.1s;
}

.btn__normal:hover {
	border-bottom: 2px solid var(--red);
}

.btn__normal.active {
	background-color: var(--red);
	color: white;
}

.btn__huge {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	
	align-items: center;
	padding: 0 var(--spacing-m);
	height: var(--dim-40);
	
	font-weight: 600;
	font-size: 18px;

	background-color: var(--blue-lighter);

	letter-spacing: 0.005em;
	border-radius: 2px;

	box-sizing: border-box;
	transition: all 0.1s;

	    border: none;
    font-family: inherit;
}

.btn__huge.active {
	background-color: var(--red);
	color: white;
}

.btn__huge:hover {
	background-color: var(--red);
	color: white;
}

.btn__tags {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	padding: 0 var(--spacing-m);

	height: var(--dim-32);

	border-radius: var(--dim-40);
	border:1px solid var(--blue-light);
	color: var(--blue);

	font-size: var(--fontsize-m);
	letter-spacing: 0.005em;

	transition: all 0.1s;
}

.btn__tags:hover {
	border-color: var(--blue);
	color: var(--blue-dark);
}

.btn__tags.active {
	background-color: var(--blue-dark);
	color: white;
}

.btn__huge_xl {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	
	align-items: center;
	padding: 0 var(--spacing-l);
	height: var(--dim-64);
	
	font-weight: 600;
	font-size: 24px;

	background-color: var(--blue-lighter);

	letter-spacing: 0.005em;
	border-radius: 2px;

	box-sizing: border-box;
	transition: all 0.1s;

	    border: none;
    font-family: inherit;

    background-color: var(--red);
    color: white;

    border-radius: 40px;
    transition: 0.2s all;
}

.btn__huge_xl:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

.btn__browse {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* APP */

.app__base {
	width: 100%;
	height: 100%;
}

/* NAV SIDE */

.dashboard__nav {
	position: fixed;
		top: 0;
		left: 0;

	width: var(--dim-104);

	height: 100%;
	display: flex;

	z-index: 400;
}

.dashboard__nav--margin, .nav__type--second {
	width: 100%;

	padding: var(--dim-16) 0;

	box-sizing: border-box;

	height: 100%;
	display: flex;
    flex-direction: column;
    justify-content: flex-start;

    gap: var(--dim-16);
}

.nav__type--second {
	height: max-content;
}

.nav__wrapper {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.logo__type--dash {
	position: relative;
    padding: var(--dim-8);

    width: var(--dim-64);
    box-sizing: border-box;
    border-radius: 50%;

    display: flex;
    background-color: white;

    margin-left: calc( var(--dim-8) + var(--dim-4) );
}

.logo__type--dash img {
	width: var(--dim-56);
}

.nav__type--main,
.nav__type--second {
	position: relative;
	width: max-content;
	padding: var(--dim-24) var(--dim-16) var(--dim-24) var(--dim-16);

	border-top-right-radius: var(--dim-24);
	border-bottom-right-radius: var(--dim-24);
}

.nav__type--second {
	padding: var(--dim-16) var(--dim-16) var(--dim-16) var(--dim-16);
}

.nav__type--main ul,
.nav__type--second ul {
	margin: 0;
	padding: 0;

	width: var(--dim-56);

	display: flex;
	flex-direction: column;
	gap: var(--dim-16);
}

.nav__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--dim-4);
	align-content: center;
	flex-wrap: wrap;
	align-items: center;
}

.nav__item a {
	position: absolute;
		top: 0;
		left: 0;

	width: 100%;
	height: 100%;

	z-index: 3;
}

.nav__item--icon {
	position: relative;
	display: flex;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;

	width: var(--dim-56);
	height: var(--dim-56);

	padding: 14px;
	box-sizing: border-box;

	border-radius: var(--dim-24);
	border:1px solid var(--red);
	background-color: white;

	transition: all 0.4s ease-out;

	outline: 4px solid rgba(239, 64, 53, 0);
	color: var(--red);
}

.nav__item:hover .nav__item--icon {
	outline: 4px solid rgba(239, 64, 53, 0.2);
	color: var(--red);
}

.nav__type--second .nav__item--icon {
	border-color: var(--blue);
	color: var(--blue);
}

.nav__type--second .nav__item:hover .nav__item--icon {
	outline: 4px solid rgba(26,42,75, 0.2);
	color: var(--blue);
}

.nav__item.selected .nav__item--icon {
	color: white;
	background-color: var(--red);
}

.nav__type--second .nav__item.selected .nav__item--icon {
	color: white;
	background-color: var(--blue);
}

.nav__item.selected .nav__item--icon:before {
	content: "";
	position: absolute;
		top: 0;
		left: -17px;

	width: var(--dim-4);
	height: 100%;

	border-top-right-radius: var(--dim-4);
	border-bottom-right-radius: var(--dim-4);

	background-color: var(--red);
}

.nav__type--second .nav__item.selected .nav__item--icon:before {
	content: "";
	position: absolute;
		top: 0;
		left: -17px;

	width: var(--dim-4);
	height: 100%;

	border-top-right-radius: var(--dim-4);
	border-bottom-right-radius: var(--dim-4);

	background-color: var(--blue);
}

.nav__wallet--currentbalance {
	position: fixed;
		top:16px;
		right: var(--dim-96);

	height: 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;

	font-size: var(--fontsize-l);

	z-index: 500;

	display: none;
}

/* BOX */

.group__box {
	padding: var(--spacing-m);
	display: flex;
	flex-direction: column;
	gap: 0;

	border-radius: var(--dim-8);
	border:1px solid var(--blue-light);
}

.group__box--header {
	text-transform: uppercase;
	font-size: var(--fontsize-s);
	letter-spacing: 0.02em;
	font-weight: 600;
	color: var(--blue-light);
}

/* NAV ACCOUNT */

.menu__dropdown[aria-hidden="true"] {
	display: none;
}

.menu__dropdown[aria-hidden="false"] {
	display: block;
}


.menu-container {
	position: relative;
	display: inline-block;
}

.menu__button {
	padding: 10px 20px;
	background-color: #f3f3f3;
	border: 1px solid #ccc;
	border-radius: 5px;
	cursor: pointer;
}

.menu__dropdown {
	position: absolute;
	top: 50px;
	right: 0;
	background: white;
	border: 1px solid var(--blue-light);
	border-radius: var(--dim-8);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
	width: 300px;
	z-index: 100000;
	overflow: hidden;
}

.menu__dropdown ul {
	list-style: none;
	margin: 0;
	padding: var(--dim-8);
}

.menu__dropdown ul li {
	padding: var(--dim-8) 0;
	padding-left: var(--dim-8);
	border-bottom: 1px solid var(--blue-lighter);
}

.menu__dropdown ul li:hover {
	background-color: var(--blue-lighter);
}

.menu__dropdown ul li:last-child {
	border-bottom: none;
}

.menu__dropdown ul li p {
	margin: var(--dim-4); 0;
	color: #555;
}

.menu__dropdown ul li small {
	color: #999;
}

.see__all {
	display: block;
	text-align: left;

	padding: var(--dim-8);
	padding-left: var(--dim-16);

	text-decoration: none;
	border-top: 1px solid var(--blue-lighter);
	background: var(--blue-lighter);
}

.see__all:hover {
	border-top: 1px solid var(--blue-light);
}



.main__page {
	position: relative;
	width: 100%;
	height: 100%;
}

.main__page--margin {
	position: relative;
	width: calc(100% - var(--dim-128) - var(--dim-128) );
	min-height: calc(100% - var(--dim-64) - var(--dim-128) );

	margin: 0;
	margin-left: calc(var(--dim-128) + var(--dim-40) );

	padding-top: var(--dim-64);
	padding-bottom: var(--dim-128);
}

.main__page--header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: white;

	padding-top: var(--spacing-m);
	padding-bottom: var(--spacing-m);

	font-size: var(--fontsize-m);
	line-height: 1;
}

.main__page--header:before {
	content: "";
	position: absolute;
		top: 0;
		right: 100%;

	width: 100px;
	height: 100%;

	background-color: white;
}

.breadcrumbs {
	display: flex;
	gap: var(--spacing-s);
}

.breadcrumbs span:last-child {
	font-style: italic;
	letter-spacing: 0.02em;
}

.nav__item--account {
	position: fixed;
		top: var(--dim-16);
		right: var(--dim-16);

	z-index: 6000;
}

.profile__handle {
	position: relative;
	width: var(--dim-48);
	height: var(--dim-48);

	border-radius: 50%;
	background-color: var(--red);

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;

	color: white;
}

.profile__handle span {

}

.profile__handle span::first-letter {
	font-size: 1.1em; /* Make the first letter larger */
	font-weight: bold; /* Make it bold */
	transform: translateY(5px);
}

/* BROWSE */

.nav__browse {
	display: flex;
	gap: var(--spacing-s);
}

.nav__browse a:last-child {
	align-self: flex-end;

position: absolute;
    right: 0;
    top: 0;
}

.nav__browse--tags {
	display: flex;
	gap: var(--spacing-s);

	padding-bottom: var(--dim-32);
}

/* CARD SERVICE */

.card__service, .card__service * {
	box-sizing: border-box;
}

.card__service {
	width: 100%;
	border: 1px solid var(--blue-light);
	border-radius: var(--dim-4);
	overflow: hidden;

	transition: all 0.2s ease-out;

	display: flex;
	flex-direction: column;
}

.card__service:hover {
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
	transform: translateY(-4px);
}

.card__service--link {
	position: absolute;
		top: 0;
		left: 0;

	width: 100%;
	height: 100%;

	z-index: 4;
}

.card__service--remove {
	position: absolute;
		top: 4px;
		right: 4px;

	/*width: 100%;
	height: 100%;*/

	padding: 0 var(--spacing-s);
	line-height: 32px;

	background-color: var(--red);
	color: white;
	border-radius: 16px;

	z-index: 40;
}

.card__service--remove:hover {
	background-color: var(--blue);
	color: white;
}

.card__service--image {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.card__service--content {
	padding: var(--spacing-m);
	padding-top: var(--spacing-s);
	background-color: #ffffff;
}

.card__service--title {
	font-size: var(--fontsize-l);
	line-height: 1;
	margin-bottom: var(--spacing-s);
}

.card__service--relevant .card__service--title {
	font-size: var(--fontsize-ml);
}

.card__service--pitch {
	font-size: var(--fontsize-s);
	line-height: 1;
	margin-bottom: var(--spacing-s);
	opacity: 0.8;
}

.card__service--footer {
	font-size: var(--fontsize-s);
	line-height: 1;
	height: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	padding: var(--spacing-m);
	flex-direction: column;
	gap: var(--dim-4);

	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-feature-settings: 'pnum' on, 'lnum' on;

	color: var(--blue);
}

.card__service--relevant .card__service--footer {
	color: var(--blue);
}

/* SERVICE */

.service__lead {
	display: flex;
	flex-direction: row;
	gap: var(--dim-16);

	padding: var(--spacing-l) 0;
	padding-bottom: var(--spacing-l);
}

.service__lead--photo {
	width: var(--dim-64);
	height: var(--dim-64);
	aspect-ratio: 1 /1 ;
	border-radius: 50%;
	    object-fit: cover;
}

.service__lead--info {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.service__lead--name {
	font-size: var(--fontsize-l);
	line-height: 1.5;
}

.service__lead--title {
	font-size: var(--fontsize-m);
	color: var(--blue);
	line-height: 1;
}

.service__summary {
	width: 100%;
	border: 1px solid var(--blue-light);
	border-radius: var(--dim-4);
	overflow: hidden;

	transition: all 0.2s ease-out;
}

.service__summary--includes {
	position: relative;
	width: 100%;
	padding: var(--spacing-m);
	padding-top: 0;
	box-sizing: border-box;
}

.list__includes {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-s);
	padding: 0;
	margin: 0;
}

.item__include {
	width: 100%;
	display: flex;
	flex-direction: row;
	gap: var(--dim-8);
}

.item__include svg {
	width: var(--dim-16);
	height: var(--dim-16);
	color: var(--red);
}

.service__summary--price {

}

.service__summary .card__service--image {
	aspect-ratio: 3 / 1;
}

.search__panel.main__page--margin {
	min-height: unset;
	padding-bottom: 0;
	padding-top: 0;

	position: fixed;
		top: 0;

	z-index: 3000;
}

.card__goal {
	display: flex;
	flex-direction: row;
	align-items: flex-start;

	gap: var(--dim-144);

	padding: var(--spacing-l);
	border-radius: 2px;

	    font-size: 18px;
}

.card__goal--info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	gap: var(--spacing-l);
}

.card__goal img {
	width: 144px;
	height: auto;
}

/* PROJECT */

.project__thead {
	display: flex;
	flex-direction: row;
	gap: var(--spacing-s);
}

.project__thead span:nth-child(1) {
	width: 50%;
}

.project__thead span:nth-child(2) {
	width: 25%;
}

.project__thead span:nth-child(3) {
	width: 25%;
}

.project__list {
	padding: 0;
	margin: 0;

	display: flex;
	flex-direction: column;
	gap: var(--spacing-m);

	padding-top: var(--spacing-m);
}

.project__item {
	display: flex;
	flex-direction: row;

	border-bottom: 1px solid var(--blue-lighter);
	padding-bottom: var(--spacing-m);

	cursor: pointer;
}

.project__item:hover {
	background: var(--blue-lighter);
}

.project__item:last-child {
	border-bottom: none;
}

.project__item--info {
	position: relative;
	width: 50%;

	display: flex;
	flex-direction: row;
	gap: var(--spacing-m);
	align-items: center;
}

.project__item--date {
	color: var(--blue);
}

.project__item--image {
	position: relative;
	width: 20%;
	display: flex;
}

.project__item--image img {
	width: 100%;
	height: auto;

	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 2px;
}

.project__item--team {
	width: 25%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.project__item--team img {
	width: var(--dim-32);
	height: var(--dim-32);

	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;

	margin-right: -2%;
}

.project__item--status {
	width: 25%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.status--inbrief {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0 var(--dim-8);
	height: var(--dim-24);
	
	border-radius: var(--dim-4);
	border: 1px solid var(--second-yellow);
	background: var(--second-yellow);
	color: var(--blue-dark);
	
	font-size: var(--fontsize-m);
	letter-spacing: 0.005em;
	transition: all 0.1s;
}

.main__page--checkout {
padding-top: var(--dim-64);
	padding-bottom: var(--dim-64);
	background-attachment: fixed;
}

.main__page--checkout .main__page--margin {
	position: relative;
	width: calc(100% - var(--dim-144) - var(--dim-144) - var(--dim-144));
	min-height: calc(100% - var(--dim-64) - var(--dim-128));
	margin: 0 auto;
	padding: var(--dim-32);
	padding-top: var(--dim-32);
	padding-bottom: var(--dim-64);
}

.main__page--checkout .main__page--header:before {
	content: unset;
}

.checkout__faq {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-s);

	padding-top: var(--spacing-l);
}

.checkout__faq--head {
	display: flex;
	flex-direction: row;
	gap: var(--spacing-m);

	padding-bottom: var(--spacing-m);
}

.checkout__faq--head img {
	width: 128px;
	height: auto;

	aspect-ratio: 3/2;
	border-radius: 2px;
}

.checkout__faq--input {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-s);
}

.checkout__faq--input textarea {
	width: 100%;
	height: 128px;
	border-radius: 4px;
	border:1px solid var(--blue-light);
	font-family: inherit;
	font-size: inherit;

	padding: var(--spacing-s);

	box-sizing: border-box;
}

.main__page--login .main__page--margin {
	display: flex;
	flex-direction: column;
	justify-content: center;

    position: relative;
    width: calc(100% - var(--dim-144) - var(--dim-144) - var(--dim-144));
    min-height: calc(100% - var(--dim-64) - var(--dim-128));
    margin: 0 auto;
}

.panel__login {
	padding: var(--spacing-xl);
	border-radius: var(--dim-8);
	border: 1px solid #C1D1E8;

	display: flex;
	flex-direction: column;
	gap: var(--spacing-xl);
}

.panel__login--head {
	display: flex;
	flex-direction: row;
	gap: var(--dim-8);
	align-items: center;
}

.panel__login--head span {
	font-style: italic;
	font-size: var(--dim-24);
	line-height: 1rem;
}

.panel__login--head img {
	width: var(--dim-32);
	height: auto;
}

.panel__login--form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-m);
}

.login__field {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.login__field label {
	font-size: var(--fontsize-s);
	opacity: 0.7;
}

.login__field input {
	font-family: inherit;
	border: 1px solid var(--blue-light);
	line-height: var(--fontsize-xl);
	font-size: var(--fontsize-m);
	padding: 0 var(--dim-8);
	border-radius: 2px;
}

.nav__toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

/*@media screen and (min-width: 1300px){

.main__page--margin {
	width: 1000px;
}

}*/

.alert__budget {
	position: relative;
	width: 100%;

	display: flex;
	flex-direction: row;
	gap: 8px;
	align-items: center;

	padding: 8px;
	padding-right: 32px;
	margin-bottom: 16px;

	background-color: var(--red-lighter);

	border-radius: 4px;

	box-sizing: border-box;
}

.alert__budget .nav__item--icon {
	border: none;
	background: none;
	color: var(--red);
	transform: scale(1.2);
}

@media screen and (min-width: 1400px){

.main__page--margin {
	width: 1200px;
	margin: 0 auto;
}

}

@media screen and (max-width: 1300px) {

	.nav__browse a:last-child {
		display: none;
	}

	.nav__browse .btn__normal {
		height: var(--dim-48);
	}

	.card__goal {
		grid-column: span 10;
	}

}

@media screen and (max-width: 1100px) {

	.card__service {
		grid-column: span 4;
	}

	.card__goal {
		grid-column: span 12;
	}


}

@media screen and (max-width: 768px){

.main__page--margin {
	position: relative;
	width: calc(100% - var(--dim-24) - var(--dim-24));
	min-height: calc(100% - var(--dim-64) - var(--dim-128));
	margin: 0;
	margin-left: calc(var(--dim-24));
	padding-top: var(--dim-64);
	padding-bottom: var(--dim-128);
}

	.card__service {
		grid-column: span 6;
	}

.dashboard__nav {
	display: none;
}


/*   .nav__toggle {
        display: block;
    }

    .nav__menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: white;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 10;
    }

    .nav__menu a {
        padding: 1rem;
        border-bottom: 1px solid #ccc;
    }

    .nav__browse[aria-expanded="true"] .nav__menu {
        display: flex;
    }*/


}