@media screen and (orientation:landscape) {
:root {
--buttonSize: 5vh;
}
}
@media screen and (orientation:portrait) {
:root {
--buttonSize: 6dvw;
}
}
* {
-webkit-tap-highlight-color: transparent;
box-sizing: unset !important;
}
html {
height: 100%;
width: 100%;
background-color: #1d292c;
}
body {
overflow: hidden;
user-select: none;
margin: 0;
max-height: 100%;
height: 100%;
width: 100%;
}
#application-canvas {
top: 256;
left: 0;
right: 0;
bottom: 0;
}
#application-canvas.fill-mode-NONE {
margin: auto;
}
#application-canvas.fill-mode-KEEP_ASPECT {
width: 100%;
height: auto;
margin: 0;
}
#application-canvas.fill-mode-FILL_WINDOW {
width: 100%;
height: 100%;
margin: 0;
}
canvas:focus {
outline: none;
}
.shrinkCanvas {
width: calc(100dvw - 480px) !important;
}
.bendOperations {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
position: absolute;
bottom: 8vh;
gap: 5vw;
}
.bendOperationsButton {
display: flex;
width: calc(var(--buttonSize)*3.5);
height: var(--buttonSize);
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0);
border-radius: calc(var(--buttonSize)/3);
align-content: center;
justify-content: center;
padding: 20px 10px;
gap: 10px;
}
@media (hover) {
.bendOperationsButton:hover {
background-color: #eee;
}
}
.bendOperationsButton:active {
background-color: #eee;
}
.bendOperationsButtonIcon {
width: var(--buttonSize);
height: auto;
object-fit: contain;
}
.bendOperationsButtonText {
align-self: center;
font-family: jura;
font-size: calc(var(--buttonSize) / 3);
}
.dropDown {
background-color: #ffffff;
width: 100%;
text-align: center;
flex-direction: column;
justify-content: center;
font-family: 'Jura';
min-height: 32px;
}
.dropDownActive {
height: 32px;
line-height: 32px;
}
.dropDownEntries {
display: flex;
flex-direction: column;
max-height: 320px;
overflow-y: auto;
border-top: 5px solid #ddd;
}
.dropDownEntry {
border-top: 1px solid #dddddd;
line-height: 32px;
}
@media (hover) {
.dropDownActive:hover {
background-color: #dddddd;
}
.dropDownEntry:hover {
background-color: #dddddd;
}
}
.dropDownWrapper {
border-radius: 8px;
border: 2px solid #ddd;
background-color: white;
display: flex;
flex-direction: column;
z-index: 100;
}
.dropDownShow {
position: absolute;
}
.flex-row {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
body {
overflow: hidden;
user-select: none;
}
.hide {
display: none !important;
}
.closeMenu {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(255, 255, 255, 0.8);
z-index: 98;
}
.menuFooterButton {
font-family: 'Jura';
font-weight: bold;
border: 1px solid rgb(211, 211, 211);
border-radius: 32px;
width: 105px;
height: 32px;
text-align: center;
cursor: pointer;
padding: 5px 10px;
line-height: 30px;
background-color: #256ba8;
color: #ffffff;
margin: 10px;
}
@media (hover) {
.menuFooterButton:hover {
background-color: #256ba8ee;
}
}
.menuButtonWrapper {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
position: fixed;
left: var(--buttonSize);
top: calc(50vh - var(--buttonSize)* 4);
gap: var(--buttonSize);
}
.menuButton {
background-color: #ffffff;
width: var(--buttonSize);
height: var(--buttonSize);
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
padding: calc(var(--buttonSize)/2);
gap: calc(var(--buttonSize)/8);
border-radius: calc(var(--buttonSize)/4);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0);
}
@media (hover) {
.menuButton:hover {
background-color: #eee;
}
}
.menuButtonIcon {
width: var(--buttonSize);
height: auto;
object-fit: contain;
}
.menuButtonText {
font-family: Jura;
font-size: calc(var(--buttonSize)/4);
}
.dividerH {
height: 64px;
border-right: 2px solid #dddddd;
}
.dividerV {
width: 100%;
border-bottom: 2px solid #dddddd;
}
.profileInspectorButton {
position: absolute;
width: 256px;
height: 64px;
border-radius: 16px;
left: calc(50dvw - 128px);
bottom: 15dvh;
background-color: #fff;
text-align: center;
line-height: 64px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
font-family: 'Jura';
font-size: 1.2rem;
font-weight: 700;
}
@media (hover) {
.profileInspectorButton:hover {
background-color: #eee;
}
}
.profileInspectorHeading {
display: flex;
width: 90%;
font-family: 'Jura';
font-size: 1.2rem;
justify-content: center;
margin-top: 32px;
text-align: center;
}
.profileInspectorBody {
display: flex;
height: 100%;
width: 90%;
flex-direction: column;
gap: 10px;
overflow-x: hidden;
overflow-y: auto;
}
.profileInspectorField {
display: flex;
flex-direction: row;
width: 95%;
justify-content: flex-start;
align-items: center;
gap: 10px;
text-align: center;
border-radius: 5px;
border: 1px solid #ddd;
padding: 5px;
}
.profileInspectorFieldName {
font-family: 'Jura';
font-size: 1rem;
font-weight: 700;
}
.profileInspectorFieldValue {
font-family: 'Jura';
font-size: 1rem;
}
.profileInspectorWrapper,
.dimensionEditorWrapper{
width: 480px;
height: 100dvh;
min-height: 250px;
position: absolute;
top: 0;
right: 0;
background-color: #ffffff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 9;
}
.dimensionEditor,
.profileInspector {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.profileInspector {
gap: 20px;
}
.dimensionEditorVSection {
display: flex;
width: 100%;
margin-top: 10px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
}
.dimensionEditorHSection{
display: flex;
width: 100%;
height: 100%;
flex-direction: row;
justify-content: center;
align-items: flex-start;
}
.dimensionEditorParameterContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
border: 2px solid #ddd;
padding: 16px 0px;
border-radius: 10px;
width: 80%;
}
.dimensionEditorParameterContainerDisabled {
background-color: #256ba8;
}
.dimensionEditorBody {
font-family: 'Jura';
font-size: 1.2rem;
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
justify-content: flex-start;
align-items: center;
overflow-y: auto;
overflow-x: hidden;
gap: 10px;
margin: 10px
}
.dimensionEditorClose,.profileInspectorClose {
width: 75%;
}
.dimensionEditorMountingDirectionWrapper {
font-size: 1.1rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
gap: 10px;
}
.flexRow {
display: flex;
width: 100%;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10px;
}
.dimensionEditorMountingDirection {
font-size: 1.1rem;
display: flex;
width: 80%;
flex-direction: row;
justify-content: center;
align-items: center;
height: 32px;
border-radius: 16px;
border: 2px solid #ddd;
}
.dimensionEditorMountingDirectionButtonLeft {
height: 100%;
border-radius: 16px 0px 0px 16px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
border-right: 1px solid #ddd;
line-height: 32px;
padding-left: 10px;
}
.dimensionEditorMountingDirectionButtonRight {
height: 100%;
border-radius: 0px 16px 16px 0px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
border-left: 1px solid #ddd;
line-height: 32px;
padding-right: 10px;
}
.dimensionEditorMountingDirectionButtonCenter {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
line-height: 32px;
}
@media (hover) {
.dimensionEditorMountingDirectionButtonLeft:hover,
.dimensionEditorMountingDirectionButtonCenter:hover,
.dimensionEditorMountingDirectionButtonRight:hover {
background-color: #eee;
}
}
.dimensionEditorMountingDirectionButtonSelected,
.dimensionEditorMountingDirectionButtonSelected:hover {
background-color: #256ba8;
color: #fff;
}
.dimensionEditorMountingDirectionHelp {
width: 16px;
height: 16px;
border-radius: 16px;
border: 2px solid #bbb;
color: #bbb;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
line-height: 16px;
}
@media (hover) {
.dimensionEditorMountingDirectionHelp:hover {
background-color: #ddd;
}
}
.dimensionEditorHead {
padding: 10px;
font-size: 2rem;
font-family: 'Jura';
}
.inputDimensionRange {
width: 90%;
height: 14px;
appearance: none;
-webkit-appearance: none;
background: #c6c6c6;
outline: none;
border-radius: 15px;
overflow: hidden;
outline: 1px solid #ddd;
}
.inputDimensionRange::-moz-range-thumb {
appearance: none;
-webkit-appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: #256ba8;
cursor: pointer;
border: 2px solid #ffffff;
box-shadow: -412px 0 0 400px #256ba8;
z-index: 999;
}
.inputDimensionRange::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: #256ba8;
cursor: pointer;
border: 2px solid #ffffff;
box-shadow: -412px 0 0 400px #256ba8;
}
.inputDimensionRange:disabled {
background: #3d3d3d;
}
@keyframes slideUp {
100% {
transform: translateY(-240px);
}
}
.activeItemDimensionsAnchor {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
}
.activeItemDimensions {
background-color: #ffffff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 20px;
padding: 20px;
border-radius: 0px 0px 20px 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.activeItemDimensionsSlideUp {
animation: slideUp 1s;
}
.closeActiveItemDimensions {
display: none;
}
.addToCartDialogActionButton{
color: #222;
background-color: #fff;
font-size: 1rem;
width: 160px;
}
@media (hover) {
.addToCartDialogActionButton:hover{
background-color: #256ba8;
color: #fff;
}
}
.messageDialogAnchor,.addToCartDialogAnchor{
background-color: #ffffff;
position: fixed;
display: flex;
flex-direction: column;
padding: 20px;
justify-content: center;
align-items: flex-end;
border-radius: 16px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 99;
max-width: 420px;
}
.messageDialog,.addToCartDialog{
width: 100%;
height: 100%;
background-color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 10px;
}
.messageDialogHeader,.addToCartDialogHeader {
font-family: Jura;
font-size: 2rem;
color: #dc143c;
}
.messageDialogText, .addToCartDialogText {
font-family: Jura;
font-size: 1rem;
text-align: justify;
}
.addToCartDialogAction{
display: flex;
flex-direction: row;
}
.newItemDimensionsAnchor {
background-color: #ffffff;
position: fixed;
display: flex;
flex-direction: column;
width: 256px;
height: 256px;
padding: 20px;
top: calc(50dvh - 148px);
left: calc(50dvw - 148px);
justify-content: center;
align-items: flex-end;
border-radius: 16px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 99;
}
.newItemDimensions {
background-color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
width: 100%;
height: 100%;
margin-top: 10px;
}
.newItemDimensionsHeader {
font-family: Jura;
font-size: 1.5rem;
}
.newItemDimensionConfirm {
font-family: 'Jura';
border: 1px solid rgb(211, 211, 211);
border-radius: 32px;
width: 196px;
height: 32px;
text-align: center;
cursor: pointer;
padding: 5px 10px;
line-height: 30px;
background-color: #256ba8;
color: #ffffff;
}
@media (hover) {
.newItemDimensionConfirm:hover {
background-color: #256ba8dc;
}
}
.newItemDimensionConfirm:active {
background-color: #256ba881;
}
.inputDimension {
font-family: Jura;
border: 2px solid transparent;
font-size: 0.9rem;
width: 80%;
min-height: 2.5em;
padding-left: 0.8em;
outline: none;
overflow: hidden;
background-color: #f3f3f3;
border-radius: 10px;
transition: all 0.5s;
text-align: center;
}
.inputDimension:hover,
.inputDimension:focus {
border: 2px solid #4a9dec;
background-color: white;
}
.inputDimension:disabled {
background-color: #256ba8;
color: #fff;
}
.Menu {
background-color: #ffffff;
position: fixed;
top: calc(50vh - (75vh / 2));
left: calc(50vw - (75vh / 2));
width: 75vh;
height: 75vh;
padding: 20px;
border-radius: calc(var(--buttonSize)/4);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 99;
}
.menuCloseButton {
border: 1px solid rgb(211, 211, 211);
border-radius: 25%;
width: 16px;
height: 16px;
padding: 5px 5px 5px 5px;
cursor: pointer;
}
@media (hover) {
.menuCloseButton:hover {
background-color: #eee;
}
}
.menuCloseButton:active {
background-color: #999;
}
.menuHeader {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
width: 100%;
height: 10%;
font-family: 'Jura';
border-bottom: 2px solid #dddddd;
}
.menuFooter {
height: 10%;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
margin-top: auto;
border-top: 2px solid #dddddd
}
.menuHeading {
width: 90%;
font-size: xx-large;
text-align: center;
}
.menuBody {
display: flex;
width: 100%;
margin-top: 10px;
height: 78%;
flex-direction: column;
justify-content: flex-start;
align-items: center;
overflow-y: auto;
overflow-x: clip;
}
.menuEntry {
background-color: #ffffff;
display: flex;
flex-direction: row;
width: 90%;
margin: 10px;
padding: 10px;
border-radius: calc(var(--buttonSize) / 4);
border: 1px solid #dddddd;
cursor: pointer;
}
.menuEntryDetails {
display: flex;
flex-direction: column;
width: 100%;
}
.menuEntryDetailsWrapper {
display: flex;
flex-direction: row;
width: 100%;
border-bottom: 2px solid #dddddd;
}
.menuEntryActionWrapper {
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-end;
margin-top: 8px;
}
.menuEntryActionButton {
font-family: 'Jura';
width: 100px;
height: 25px;
border: 1px solid #dddddd;
border-radius: 5px;
line-height: 25px;
text-align: center;
color: #ffffff;
background-color: #256ba8;
}
@media (hover) {
.menuEntryActionButton:hover {
background-color: #226eb1;
}
}
.menuEntryOptions {
display: none;
}
.menuEntryIcon {
width: auto;
height: 100px;
object-fit: contain;
border-right: 1px solid #dddddd;
}
.menuEntryText {
display: flex;
flex-direction: column;
margin-left: 10px;
width: 100%;
}
.menuEntryTitle {
font-family: 'Jura';
margin: 0px;
font-size: 16px;
}
.menuEntryDescription {
font-family: 'Roboto';
text-align: left;
font-size: 10px;
}
@keyframes rotate {
0% {
transform: rotate3d(0);
}
50% {
transform: rotate3d(1, 0, 0, 90deg);
}
100% {
transform: rotate3d(1, 0, 0, 0deg);
}
}
.animRotTransition {
animation: rotate 1s;
}
.animRotTransitionReverse {
animation: rotate 1s;
animation-direction: reverse;
}
.menuEntrySelected {
flex-direction: column;
gap: 10px;
border: 2px solid #bbb;
}
.menuEntrySelected>.menuEntryDetails {
display: none;
}
.menuEntrySelected>.menuEntryOptions {
display: flex;
flex-direction: column;
width: 100%;
gap: 10px;
}
.menuEntryOptions>.menuEntryTitle {
font-family: 'Jura';
margin: 0px;
font-size: 28px;
text-align: center;
}
.menuEntryOptions>.menuEntryTextHeading {
font-family: 'Jura';
font-size: 16px;
}
.profileMenuBody {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
height: 80%;
overflow-y: auto;
}
.profileMenuEntry {
background-color: #ffffff;
display: flex;
flex-direction: column;
text-align: center;
width: 128px;
margin: 10px;
padding: 10px;
border: 1px solid #dddddd;
border-radius: 10px;
}
.profileMenuEntrySelected {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
@media (hover) {
.profileMenuEntry:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
}
.profileMenuEntryThumbnail {
width: 100%;
height: auto;
object-fit: contain;
}
.profileMenuEntryName {
font-family: 'Jura';
font-size: 0.9rem;
border-top: 2px solid #dddddd;
padding-top: 8px;
}
.summary {
position: absolute;
top: 0;
right: 0;
background-color: #ffffff;
border-radius: 0px 0px 0px 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
gap: 32px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0);
}
.summaryInfo {
display: flex;
flex-direction: column;
font-family: Jura;
width: 100%;
}
.summaryHeading {
font-size: 1.2rem;
font-weight: bold;
padding-bottom: 5px;
}
.summaryPrice {
font-size: 2rem;
padding-bottom: 10px;
}
.summaryImage {
width: 25%;
height: auto;
object-fit: contain;
}
.summaryText {
display: flex;
gap: 5px;
width: 100%;
justify-content: flex-start;
padding-bottom: 2px;
}
.summaryValue {
font-family: 'Roboto';
}
.addToCart {
width: 80%;
}
.addToCartContainer {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.transparent {
background-color: #ffffff00;
}
.summaryButton {
display: none;
position: absolute;
top: 2dvh;
right: 2dvh;
background-color: #fff;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
padding: calc(var(--buttonSize)*0.3);
gap: calc(var(--buttonSize)/8);
border-radius: calc(var(--buttonSize)/4);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0);
}
@media (hover) {
.summaryButton:hover {
background-color: #eee;
}
}
.summaryButtonIcon {
width: 2rem;
height: auto;
object-fit: contain;
}
.summaryButtonText {
font-size: 1rem;
font-family: Jura;
font-weight: bold;
}
.summaryItemCount {
font-family: 'Jura';
font-size: 1.1rem;
display: flex;
width: 80%;
flex-direction: row;
justify-content: center;
align-items: center;
height: 32px;
border-radius: 16px;
border: 2px solid #ddd;
}
.summaryItemCountSubtract {
height: 100%;
border-radius: 16px 0px 0px 16px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
border-right: 1px solid #ddd;
line-height: 32px;
padding-left: 10px;
}
.summaryItemCountAdd {
height: 100%;
border-radius: 0px 16px 16px 0px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
border-left: 1px solid #ddd;
line-height: 32px;
padding-right: 10px;
}
.summaryItemCountText {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
line-height: 32px;
border:0px;
font-family: 'Jura';
font-size: 1.2rem;
text-align: center;
}
@media (hover) {
.summaryItemCountSubtract:hover,
.summaryItemCountAdd:hover {
background-color: #eee;
}
}
.summaryItemCountSubtract:active,
.summaryItemCountAdd:active {
background-color: #256ba8;
color: #fff;
}
.welcomeScreen {
background-color: #ffffff;
position: fixed;
top: 0;
left: 0;
width: 100dvw;
height: 100dvh;
border-radius: calc(var(--buttonSize)/4);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 9998;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.welcomeScreenLogo {
object-fit: contain;
width: 33%;
}
.welcomeScreenLanguagesWrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
gap: 20px;
}
.welcomeScreenLanguages {
display: flex;
flex-direction: row;
width: 100%;
justify-content: center;
}
.welcomeScreenMessage {
font-family: Jura;
font-size: 2rem;
text-align: center;
align-self: center;
}
.welcomeScreenSubtitle {
font-family: Jura;
font-size: 1rem;
font-weight: bold;
}
.welcomeScreenLanguage {
font-family: 'Jura';
font-weight: bold;
border: 1px solid rgb(211, 211, 211);
border-radius: 32px;
width: 105px;
height: 32px;
text-align: center;
cursor: pointer;
padding: 5px 10px;
line-height: 30px;
background-color: #ffffff;
color: #000000;
margin: 10px;
}
.welcomeScreenLanguageSelected {
background-color: #256ba8;
color: #ffffff;
}
.welcomeScreenStart {
width: 80%;
max-width: 384px;
line-height: 64px;
height: 64px;
align-items: center;
justify-content: center;
background-color: #fff;
color: #000000;
}
@media (hover) {
.welcomeScreenStart:hover {
color: #fff;
}
}
.welcomeScreenStart:active {
color: #fff;
}
@media screen and (max-width:980px) {
.shrinkCanvas{
width: 50dvw !important;
}
.profileInspectorWrapper,
.dimensionEditorWrapper{
width: 50dvw;
}
.activeItemDimensions {
flex-direction: column;
max-width: 95vw;
border-radius: 0px 0px 20px 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.closeActiveItemDimensions {
display: unset;
width: 25%;
height: 4px;
background-color: #aaa;
border-radius: 2px;
}
.Menu {
position: absolute;
left: 0 !important;
top: 0 !important;
width: 100vw;
height: 100dvh;
padding: 0px;
z-index: 99;
}
.menuHeader {
justify-content: center;
}
.bendOperationsButton {
padding: 10px;
}
@media (hover) {
.bendOperationsButton:hover {
background-color: #fff;
}
}
.bendOperationsButton:active {
background-color: #eee;
}
.welcomeScreenLogo {
width: 75dvw;
}
}
@media screen and (max-width:720px) {
.profileInspectorWrapper,
.dimensionEditorWrapper {
border-radius: unset;
width: 100dvw;
height: 100dvh;
top: 0;
left: 0;
right: unset;
}
.summary {
right: unset;
border-radius: unset;
width: 100%;
align-items: center;
padding: 20px 0px;
}
.summaryInfo {
align-items: flex-start;
width: 80%;
}
.summaryPrice {
align-self: center;
font-size: 2.5rem;
}
.summaryText {
justify-content: space-between;
}
.summaryButton {
flex-direction: column;
top: unset;
right: unset;
bottom: 2dvh;
left: 2dvh;
}
.summaryButtonText {
font-size: 0.75rem;
}
.welcomeScreenMessage {
font-size: 1.5rem;
}
}