/*/ RESET /*/

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: revert;
	padding: revert;
	font: inherit;
}

html {
	scroll-behavior: smooth;
	interpolate-size: allow-keywords;
	@font-face {
		font-family: "Roboto";
		src: url("https://ascendiomsa2.lightning.force.com/sfsites/c/resource/AtoscaFontRoboto") format("truetype");
	}
	@font-face {
		font-family: "Poppins";
		src: url("https://ascendiomsa2.lightning.force.com/sfsites/c/resource/AtoscaFontPoppins") format("truetype");
	}
}

body {
	min-height: 100vh;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
a {
	margin: 0;
}

@font-face {
	font-family: "Poppins";
	src: url("https://ascendiomsa2.my.site.com/sfsites/c/resource/AtoscaFontPoppins") format("truetype");
}

@font-face {
	font-family: "Roboto";
	src: url("https://ascendiomsa2.my.site.com/sfsites/c/resource/AtoscaFontRoboto") format("truetype");
}

[class*="slds"]:empty:not([class*="checkbox"]):not([class*="combobox"]):not(input) {
	display: none;
}

/*/ CUSTOM PROPERTIES /*/

:host {
	/*/ SPACING /*/
	--lwc-layoutVerticalPadding: 16px;
	--menu-lateral-width: 296px;

	/*/ HEADINGS /*/
	--lwc-fontSizeHeader: 32px;
	--lwc-fontWeightHeader: 700;

	/*/ COLORS /*/
	--dxp-g-color-brand: #3c46c3;
	--dxp-g-color-blue-main: #3c46c3;
	--dxp-g-color-blue-50: #f0f1ff;
	--dxp-g-color-blue-100: #8f91bd;
	--dxp-g-color-blue-200: #5e6ad6;
	--dxp-g-color-blue-500: #2a31ab;
	--dxp-g-color-blue-primary-500: #1b2190;
	--dxp-g-color-green-main: #c5da37;
	--dxp-g-color-green-10: #f8fbe7;
	--dxp-g-color-green-100: #b8c831;
	--dxp-g-color-green-200: #b4c336;
	--dxp-g-color-green-300: #5c6d08;
	--dxp-g-color-aux-blue-dark: #3b65cc;
	--dxp-g-color-aux-blue-mid: #4aa2e2;
	--dxp-g-color-aux-blue-light: #7ebfea;
	--dxp-g-color-aux-blue-lighter: #c2e3f6;
	--dxp-g-color-white: #fff;
	--dxp-g-color-white-aux: #fafafa;
	--dxp-g-color-grey-20: #f1f2f5;
	--dxp-g-color-grey-40: #f1f6f8;
	--dxp-g-color-grey-50: #e1e5ee;
	--dxp-g-color-grey-60: #c9cbd0;
	--dxp-g-color-grey-80: #a7aab1;
	--dxp-g-color-grey-90: #71757e;
	--dxp-g-color-black: #222222;
	--dxp-g-color-blue-aux-hard: #3b65cc;
	--dxp-g-color-blue-aux-mid: #4aa2e2;
	--dxp-g-color-blue-aux-light: #7ebfea;
	--dxp-g-color-blue-aux-lighter: #c4d1f0;
	--dxp-g-color-grey-aux1: #c1c1c1;
	--dxp-g-color-grey-aux2: #f5f8fb;
	--dxp-g-color-red-aux: #df4e3a;
	--dxp-g-color-yellow: #f9b507;

	/*/ DIMENSIONS /*/
	--w50: 50%;
	--w100: 100%;
	--h100: 100%;
	--max-width-atosca: 1512px;
	--border-solid-1px-white: solid 1px var(--dxp-g-color-white);
	--border-solid-1px-grey-50: solid 1px var(--dxp-g-color-grey-50);
}

/*/ GENERAL STYLES /*/

#appMainPanel,
.cb-FullHeight {
	overflow: hidden;
}

::-webkit-scrollbar {
	width: 4px;
}

::-webkit-scrollbar-track {
	border-radius: 100px;
	background: var(--dxp-g-color-grey-60, #c9cbd0);
}

::-webkit-scrollbar-thumb {
	border-radius: 100px;
	background: var(--dxp-g-color-grey-90, #71757e);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--dxp-g-color-grey-90, #71757e);
}

.button-reset {
	padding: 0;
	border-radius: 0;
	font: inherit;
	color: inherit;
	text-align: inherit;
	cursor: pointer;
	border: none;
	box-shadow: none;
	background: none;
	appearance: none;
	-webkit-appearance: none;
}

.button-blue {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 6px 16px;
	border-radius: 2px;
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
	box-shadow: none;
	appearance: none;
	border: none;
	-webkit-appearance: none;
	color: var(--dxp-g-color-white, #fff);
	background-color: var(--dxp-g-color-blue-500, #2a31ab);
}

.button-blue:disabled {
	color: var(--dxp-g-color-blue-100, #8f91bd);
	background-color: var(--dxp-g-color-blue-50, #f0f1ff);
	border: none;
}

.button-outline {
	padding: 6px 16px;
	border-radius: 2px;
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
	box-shadow: none;
	background: none;
	appearance: none;
	-webkit-appearance: none;
	color: var(--dxp-g-color-blue-500, #2a31ab);
	background-color: var(--dxp-g-color-white, #fff);
	border: solid 1px var(--dxp-g-color-blue-500, #2a31ab);
}

/*/ LAYOUT UTILITIES /*/

.d-block {
	display: block;
}

.d-flex {
	display: flex;
	width: var(--w100, 100%);
	flex: 1;
}

.flex-column {
	flex-direction: column;
}

.flex-row {
	flex-direction: row;
}

.flex-md-column {
	flex-direction: row;
}
@media (min-width: 768px) {
	.flex-md-column {
		flex-direction: column;
	}
}

.flex-md-row {
	flex-direction: column;
}

@media (min-width: 768px) {
	.flex-md-row {
		flex-direction: row;
	}
}

.flex-wrap {
	flex-wrap: wrap;
}

.align-items-center {
	align-items: center;
}

.justify-content-center {
	justify-content: center;
}

.w-100 {
	width: var(--w100, 100%);
}

.h-100 {
	height: var(--h100, 100%);
}

.no-margin {
	margin: revert;
}

.visible-on-edit-mode {
	display: none;
}

.is-edit-mode .visible-on-edit-mode {
	display: block;
	padding: 16px;
	margin: 16px;
	color: var(--dxp-g-color-black, #222);
	background-color: var(--dxp-g-color-grey-40, #f1f6f8);
	outline: dashed 2px var(--dxp-g-color-grey-90, #71757e);
	box-shadow: 0px 4px 6px var(--dxp-g-color-grey-90, #71757e);
	border-radius: 5px;
	touch-action: manipulation;
}

.visible-on-edit-mode .headings {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.json-container {
	word-break: break-all;
	padding-block: 16px;
}

/*/ COMPONENTS /*/

.siteforceContentArea {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	min-height: 100vh;
}

.contentRegion {
	overflow: hidden;
}

.contentRegion,
.container {
	display: flex;
	justify-content: center;
	justify-self: center;
	flex: 1;
	width: 100%;
	max-width: var(--max-width-atosca, 1512px);
	padding-block: 24px !important;
	padding-inline: 16px;
}

@media (min-width: 768px) {
	.contentRegion,
	.container {
		padding-block: 40px !important;
		padding-inline: 96px;
		min-height: revert;
	}
}

.contentRegion > div > div {
	margin-bottom: 24px !important;
}

@media (min-width: 768px) {
	.contentRegion > div > div {
		margin-bottom: 40px !important;
	}
}

.hamburger-menu-open .contentRegion {
	min-height: 630px;
}

.hamburger-menu-open .comm-content-footer,
.hamburger-menu-open c-footer-atosca,
.hamburger-menu-open .contentRegion {
	display: none;
}

.container.is-logged-in {
	padding-left: revert;
}

.is-logged-in.user-scrolled.is-desktop .menu-lateral {
	top: 0;
}

.has-menu-lateral .contentRegion,
.has-menu-lateral .container {
	width: 100%;
}

.has-menu-lateral .contentRegion {
	min-height: 350px;
}

.has-menu-lateral.is-desktop .contentRegion,
.has-menu-lateral.is-desktop .container {
	width: auto;
	min-height: 560px;
	padding-left: 24px;
}

.has-menu-lateral.is-desktop.is-car-class-open .contentRegion {
	min-height: 1430px;
}

/* increases specificity */
.has-menu-lateral.is-desktop .contentRegion,
.has-menu-lateral.is-desktop .container {
	width: -webkit-fill-available;
}

.comm-content-header:has(c-menu-lateral) + .contentRegion,
.has-menu-lateral.is-desktop > .comm-content-header + div {
	margin-left: var(--menu-lateral-width, 296px);
}

@media (min-width: 1512px) {
	.has-menu-lateral.is-desktop .container,
	.has-menu-lateral.is-desktop .contentRegion,
	.comm-content-header:has(c-menu-lateral) + .contentRegion {
		width: calc(var(--max-width-atosca, 1512px) - var(--menu-lateral-width, 296px)) !important;
	}
}

.contentRegion > div {
	display: flex;
	flex-direction: column;
	width: var(--w100, 100%);
}

.contentRegion > div > div {
	width: var(--w100, 100%);
}

.comm-content-header:not(:empty) {
	flex: revert;
	z-index: 900;
	background-color: var(--dxp-g-color-brand, #2a31ab)!important;
}

.comm-content-footer {
	flex: revert;
	z-index: 900;
}

.comm-content-header,
.comm-content-footer {
	flex: revert;
	padding: revert !important;
	width: var(--w100, 100%);
}

.cCenterPanel {
	padding: revert;
	margin-top: revert;
	max-width: unset !important;
}

/*/ LWC COMPONENTS OVERWRITING /*/
.slds-progress__item {
	cursor: pointer;
}

.signup-personal__container .slds-icon_xx-small,
.signup-personal__container .slds-progress__marker.slds-progress__marker_icon.slds-icon__container {
	width: 28px;
	height: 28px;
}

.signup-personal__container .step-label-active.slds-progress__item.slds-is-active > div {
	width: 22px;
	height: 22px;
}

.signup-personal__container .slds-icon_xx-small:hover,
.signup-personal__container .slds-progress__item:hover,
.signup-personal__container .step-label-active.slds-progress__item.slds-is-active:hover,
.signup-personal__container .slds-progress__marker.slds-progress__marker_icon.slds-icon__container:hover {
	cursor: pointer;
}

c-trip-simulator-atosca .trip-simulator__container lightning-combobox label,
c-trip-simulator-atosca .trip-simulator__content-container__top lightning-input label {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	color: var(--dxp-g-color-black, #222);
}

.slds-required {
	color: var(--dxp-g-color-black, #222);
}

.slds-progress {
	max-width: 100%;
}

.payer__container.logged-in .slds-dropdown {
	--slds-g-color-neutral-base-100: #f5f8fb;
}

@media (min-width: 768px) {
	.is-car-class-open .contentRegion {
		min-height: 1430px;
	}
}

.signup-my-vehicles {
	--lwc-colorBackgroundInputDisabled: var(--dxp-g-color-white, #fff);
}

.signup-my-vehicles .slds-is-disabled,
.signup-my-vehicles .slds-combobox__input,
.signup-my-vehicles .slds-input_faux,
.signup-my-vehicles .slds-combobox__input-value,
.signup-my-vehicles .slds-dropdown_fluid,
.signup-my-vehicles .slds-listbox,
.signup-my-vehicles .slds-dropdown,
.signup-my-vehicles .slds-listbox_vertical {
	background-color: var(--dxp-g-color-white, #fff);
}

.loggedin-add-vehicles,
.loggedin-edit-vehicles {
	--lwc-colorBackgroundInputDisabled: var(--dxp-g-color-grey-aux2, #f5f8fb);
}

.loggedin-add-vehicles .slds-is-disabled,
.loggedin-edit-vehicles .slds-is-disabled {
	background-color: var(--dxp-g-color-grey-aux2, #f5f8fb);
}

/*/ TYPOGRAPHY /*/

h1 {
	font-size: 24px;
	font-weight: 600;
	line-height: 28.8px;
	letter-spacing: -0.02em;
	color: var(--dxp-g-color-blue-500, #2a31ab);
}

@media (min-width: 768px) {
	h1 {
		font-size: 32px;
		line-height: 41.6px;
	}
}

h5 {
	font-size: 18px;
	font-weight: 500;
	line-height: 21.6px;
	letter-spacing: -0.02em;
}

/* PUBLISHED ON VSCODE: 19/03 10h06 */
