@font-face { font-family: 'Titillium Web'; src: url('fonts/TitilliumWeb-Bold.eot'); src: url('fonts/TitilliumWeb-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/TitilliumWeb-Bold.woff2') format('woff2'), url('fonts/TitilliumWeb-Bold.woff') format('woff'), url('fonts/TitilliumWeb-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; font-display: block; } @font-face { font-family: 'Titillium Web'; src: url('fonts/TitilliumWeb-Light.eot'); src: url('fonts/TitilliumWeb-Light.eot?#iefix') format('embedded-opentype'), url('fonts/TitilliumWeb-Light.woff2') format('woff2'), url('fonts/TitilliumWeb-Light.woff') format('woff'), url('fonts/TitilliumWeb-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: block; } @font-face { font-family: 'Titillium Web'; src: url('fonts/TitilliumWeb-Regular.eot'); src: url('fonts/TitilliumWeb-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/TitilliumWeb-Regular.woff2') format('woff2'), url('fonts/TitilliumWeb-Regular.woff') format('woff'), url('fonts/TitilliumWeb-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: block; } /* Material Icon font and options */ @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url('fonts/MaterialIcons-Regular.eot'); src: local('Material Icons'), local('MaterialIcons-Regular'), url('fonts/MaterialIcons-Regular.woff2') format('woff2'), url('fonts/MaterialIcons-Regular.woff') format('woff'), url('fonts/MaterialIcons-Regular.ttf') format('truetype'); font-display: block; } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; } /* STYLES RESET */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } button[title="Overview map"] { display: none; } /* COLORS */ :root { --gs-text-color-rgb: 0, 0, 0; /* @primaryTextColor: #000000; */ --gs-text-color-inverse-rgb: 255, 255, 255; /* @inverseTextColor: rgb(255, 255, 255); */ --gs-color-success-rgb: 76, 175, 80; /* @gs-color-success: #4caf50; */ --gs-color-accent-rgb: 254, 194, 0; /* @gs-color-accent: #F6B332 rgb(246, 179, 50); */ --gs-color-warn-rgb: 255, 72, 72; /* @warningTextColor: #ff4848; */ --gs-bg-color-html-rgb: 229, 231, 235; /* background color of the element */ --gs-bg-color-rgb: 31, 34, 37; /* @gs-background-color: rgb(31, 34, 37); */ --gs-bg-color-1-rgb: 69, 81, 85; /* @primaryBackgroundColor: rgb(69, 81, 85); */ --gs-bg-color-2-rgb: 56, 67, 71; /* @secondaryBackgroundColor: rgb(56, 67, 71); */ --gs-bg-color-inverse-rgb: 255, 255, 255; /* @inverseBackgroundColor: rgb(255, 255, 255); */ --gs-link-color-rgb: 0, 86, 147; /* @primaryLinkColor: #005693; */ --gs-link-color-active-rgb: 6, 129, 211; /* @primaryLinkColorActive: #0681d3; */ --gs-link-color-inverse-rgb: 255, 255, 255; /* @inverseLinkColor: #ffffff; */ --gs-button-text-color-rgb: 255, 255, 255; /* @primaryButtonTextColor: #ffffff; */ --gs-button-bg-color-rgb: 69, 81, 85; /* @primaryButtonColor: rgb(69, 81, 85); */ --gs-button-bg-color-2-rgb: 255, 255, 255; /* @secondaryButtonColor: #FFFFFF; */ --gs-button-disabled-bg-color-rgb: 128, 128, 128; /* @primaryButtonDisabledColor: rgb(128, 128, 128); */ --gs-button-hover-bg-color-rgb: 39, 45, 47; /* @primaryButtonHoverColor: rgb(39, 45, 47); // #282e30 - AppBar device hover; */ } body, html { font-family: "Titillium Web", "Helvetica Neue", "sans-serif"; font-size: 16px; } a { color: rgb(var(--gs-link-color-rgb)); text-decoration: none; cursor: pointer; } a:hover, a:active { color: rgb(var(--gs-link-color-active-rgb)); } strong, b { font-weight: bold; } input { font: inherit; } .grund-unselectable { user-select: none; -webkit-user-select: none; } .grund-disabled { pointer-events: none; } .gs-link-disabled{ opacity: 0.5; pointer-events: none; } /* Button styles */ .grund-button { padding: 20px 30px; margin: 5px; font-family: "Titillium Web"; font-size: 20px; line-height: 20px; letter-spacing: 0.49px; border: 0; outline: 0; border-radius: 10px; cursor: pointer; user-select: none; -webkit-user-select: none; transition: background-color 0.3s ease-in-out; } .grund-button:hover, .grund-button:active:not(:disabled), .grund-button-active:not(:disabled) { background-color: rgb(var(--gs-button-hover-bg-color-rgb)); } .grund-button-small { padding: 10px 20px; font-size: 16px; } .grund-button:disabled, .grund-button-disabled { background-color: rgb(var(--gs-button-disabled-bg-color-rgb))!important; cursor: default; pointer-events: none; } .grund-button-primary { background-color: rgb(var(--gs-button-bg-color-rgb)); color: rgb(var(--gs-button-text-color-rgb)); fill: rgb(var(--gs-button-text-color-rgb)); } .grund-button-secondary { background-color: rgb(var(--gs-button-bg-color-2-rgb)); border: 2px solid rgb(var(--gs-button-bg-color-rgb)); color: rgb(var(--gs-button-bg-color-rgb)); } .grund-button-secondary:hover { color: rgb(var(--gs-button-text-color-rgb)); } .grund-button-secondary:disabled { border: none; color: rgb(var(--gs-button-bg-color-rgb)) !important; } .grund-button-transparent { background: rgba(var(--gs-bg-color-rgb), 0.6); color: rgb(var(--gs-button-text-color-rgb)); } .gs-submit-button-spinner-container .mat-progress-spinner circle { stroke: rgb(var(--gs-text-color-inverse-rgb)); } .gs-bg-color-menu{ background-color: rgb(var(--gs-bg-color-1-rgb)); /* #455155 */ } .gs-bg-color{ background-color: rgb(var(--gs-bg-color-rgb)); } .gs-bg-color-a03 { background-color: rgba(var(--gs-bg-color-rgb), 0.3); } .gs-bg-color-a05{ background-color: rgba(var(--gs-bg-color-rgb), 0.5); /* @gs-background-transparent-light */ } .gs-bg-color-a08{ background-color: rgba(var(--gs-bg-color-rgb), 0.8); /* @gs-background-transparent */ } .gs-bg-color-contrast{ background-color: rgb(var(--gs-bg-color-inverse-rgb)); } .gs-bg-color-warn{ background-color: rgb(var(--gs-color-warn-rgb)); } .gs-bg-color-warn-a05{ background-color: rgba(var(--gs-color-warn-rgb), 0.5); } .gs-bg-color-success{ background-color: rgb(var(--gs-color-success-rgb)); } .gs-bg-color-success-a05{ background-color: rgba(var(--gs-color-success-rgb), 0.5); } .gs-bg-color-accent{ background-color: rgb(var(--gs-color-accent-rgb)); } .gs-color-success{ color: rgb(var(--gs-color-success-rgb)); } .gs-color-accent{ color: rgb(var(--gs-color-accent-rgb)); } .gs-color-warn{ color: rgb(var(--gs-color-warn-rgb)); } .gs-color{ color: rgb(var(--gs-text-color-rgb)); fill: rgb(var(--gs-text-color-rgb)); } .gs-color-contrast{ color: rgb(var(--gs-text-color-inverse-rgb)); fill: rgb(var(--gs-text-color-inverse-rgb)); } .gs-modal-card { margin: auto; } .gs-modal-card-header { display: flex; height: 110px; padding: 20px; } .gs-modal-card-header__logo { margin: auto; } .gs-modal-card-header__title { margin: auto; font-size: 24px; text-align: center; } .gs-modal-card__container420 { max-width: 420px; margin-left: auto; margin-right: auto; } .gs-modal-card__content { position: relative; padding: 40px; } @media only screen and (max-width: 399px) { .gs-modal-card__content { padding: 20px; } } .gs-modal-card__in { display: flex; flex-direction: column; min-width: 634px; min-height: 570px; box-shadow: 0 2px 29px 0 rgba(0, 0, 0, 0.12); } @media only screen and (max-width: 699px) { .gs-modal-card__in{ min-width: 100vw; min-height: auto; } } .gs-navigator-panel .mat-expansion-panel-header{ background-color: rgb(var(--gs-bg-color-1-rgb)); } .gs-navigator-panel .mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-title { color: rgb(var(--gs-color-accent-rgb)); } .gs-navigator-panel .mat-expansion-panel-header-title { align-items: center; color: rgb(var(--gs-text-color-inverse-rgb)); } .gs-navigator-panel .mat-expansion-panel-header-description { color: rgb(var(--gs-text-color-inverse-rgb)); } .gs-navigator-panel.mat-expansion-panel { background-color: rgba(var(--gs-bg-color-rgb), 0.5); color: rgb(var(--gs-text-color-inverse-rgb)); } .gs-navigator-panel .mat-expansion-panel-body{ padding: 10px 24px 16px; } @media only screen and (max-width: 989px) { .gs-navigator-panel .mat-expansion-panel-body{ padding: 10px 12px 14px; } } .gs-navigator-panel .mat-expansion-indicator::after { color: rgb(var(--gs-bg-color-rgb)); } .gs-navigator-panel .mat-expansion-panel-header.mat-expanded .mat-expansion-indicator::after{ color: rgb(var(--gs-bg-color-1-rgb)); } .gs-navigator-panel .mat-expansion-panel-header.mat-expanded, .gs-navigator-panel .mat-expansion-panel-header.mat-expanded:focus, .gs-navigator-panel .mat-expansion-panel-header:hover, .gs-navigator-panel .mat-expansion-panel-header.mat-expanded:hover { background: rgb(var(--gs-bg-color-rgb)); } .gs-navigator-panel.mat-expansion-panel .mat-expansion-panel-header.cdk-keyboard-focused:not([aria-disabled='true']), .gs-navigator-panel.mat-expansion-panel .mat-expansion-panel-header.cdk-program-focused:not([aria-disabled='true']), .gs-navigator-panel.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:hover:not([aria-disabled='true']) { background: rgb(var(--gs-bg-color-rgb)); } /* .gs-navigator-panel.mat-expansion-panel-spacing{ margin: 0; } */ .gs-navigator-tool-button.grund-button:active:not(:disabled) { color: rgb(var(--gs-color-accent-rgb)); fill: rgb(var(--gs-color-accent-rgb)); } .gs-navigator-tool-button.grund-button-active:not(:disabled) { color: rgb(var(--gs-color-accent-rgb)); fill: rgb(var(--gs-color-accent-rgb)); } .gs-navigator-tool-button.grund-button:disabled { opacity: 0.6; } .gs-toolbar-side-file-name{ color: rgb(var(--gs-text-color-inverse-rgb)); } .gs-toolbar-side-file-name .mat-input-element{ caret-color: rgb(var(--gs-text-color-inverse-rgb)); font-size: 14px; } .gs-toolbar-side-file-name .save-file__field.mat-form-field-appearance-outline .mat-form-field-infix{ padding: 0.5em 0; border-top: none; } .gs-toolbar-side-file-name .save-file__field.mat-form-field-appearance-outline .mat-form-field-outline{ background-color: rgba(var(--gs-bg-color-rgb), 0.8); border-radius: 4px; } .gs-toolbar-bottom-button.grund-button:active:not(:disabled) { color: rgb(var(--gs-color-accent-rgb)); fill: rgb(var(--gs-color-accent-rgb)); border: 1px solid rgb(var(--gs-color-accent-rgb)); } .gs-toolbar-bottom-button.grund-button-active:not(:disabled) { color: rgb(var(--gs-color-accent-rgb)); fill: rgb(var(--gs-color-accent-rgb)); border: 1px solid rgb(var(--gs-color-accent-rgb)); } .grund-button-vc.grund-button:active:not(:disabled) { color: rgb(var(--gs-color-accent-rgb)); fill: rgb(var(--gs-color-accent-rgb)); } .grund-button-vc.grund-button-active:not(:disabled) { color: rgb(var(--gs-color-accent-rgb)); fill: rgb(var(--gs-color-accent-rgb)); } .gs-hintbox { display: flex; flex-direction: column; position: absolute; width: 30%; padding: 10px; min-width: 140px; box-shadow: 0 0 5px 0 rgba(var(--gs-bg-color-rgb), 0.4); border-radius: 100px; align-items: center; } .gs-hintbox span { text-align: center; margin: auto; letter-spacing: 0.44px; line-height: 17px; font-size: 15px; } .gs-hintbox span.italic { font-style: italic; } .mat-menu-panel.gs-toolbar-top-menu { background-color: rgb(var(--gs-bg-color-1-rgb)); } .mat-menu-panel.gs-toolbar-top-menu--disabled, .gs-toolbar-top-menu--disabled { pointer-events: none; cursor: default; } .mat-menu-item.gs-toolbar-top-menu-item:hover:not([disabled]){ background-color: rgba(var(--gs-bg-color-inverse-rgb), 0.1); } .mat-menu-item.gs-toolbar-top-menu-item, .mat-menu-item.gs-toolbar-top-menu-item:after, .mat-menu-item.gs-toolbar-top-menu-item .mat-icon, .mat-menu-item.gs-toolbar-top-menu-item a:hover:not([disabled]) { color: inherit; } .mat-menu-item[disabled].gs-toolbar-top-menu-item .mat-icon { color: rgba(var(--gs-bg-color-inverse-rgb), 0.5); } .mat-menu-item.gs-toolbar-top-menu-item a{ color: inherit; text-decoration: none; } .mat-slider.gs-slider-inverse .mat-slider-track-wrapper .mat-slider-track-fill { background-color: rgb(var(--gs-bg-color-inverse-rgb)); } .mat-slider.gs-slider-inverse .mat-slider-track-wrapper .mat-slider-track-background { background-color: rgb(var(--gs-bg-color-inverse-rgb)); } .mat-slider.gs-slider-inverse:hover .mat-slider-track-wrapper .mat-slider-track-background { background-color: rgb(var(--gs-bg-color-inverse-rgb)); } .mat-slider.gs-slider-inverse .mat-slider-thumb-container .mat-slider-thumb { background: rgb(var(--gs-bg-color-inverse-rgb)); } .mat-tooltip-inversed.mat-tooltip{ color: rgb(var(--gs-text-color-rgb)); background-color: rgb(var(--gs-bg-color-inverse-rgb)); } .mat-tooltip-error.mat-tooltip{ color: rgb(var(--gs-text-color-inverse-rgb)); font-weight: bold; background-color: rgb(var(--gs-color-warn-rgb)); } .mat-snack-bar-container.gs-color-warn{ color: rgb(var(--gs-color-warn-rgb)); } .mat-snack-bar-container.gs-color-success{ color: rgb(var(--gs-color-success-rgb)); } .mat-simple-snackbar .mat-button { color: rgb(var(--gs-text-color-inverse-rgb)); } .gs-slide-toggle.mat-slide-toggle.mat-checked .mat-slide-toggle-bar { background: rgba(var(--gs-color-success-rgb), 0.6); } .gs-slide-toggle.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb { background: rgba(var(--gs-color-success-rgb)); } .gs-progress-spinner-light.mat-progress-spinner circle { stroke: #d8d8d8; /* Fits both light and dark UI themes */ } .gs-password-strength--weak .mat-progress-bar .mat-progress-bar-fill::after { background-color: rgb(var(--gs-color-warn-rgb)); } .gs-password-strength--weak .mat-progress-bar .mat-progress-bar-buffer { background-color: rgb(var(--gs-bg-color-html-rgb)); } .gs-password-strength--weak .mat-progress-bar .mat-progress-bar-background { fill: rgba(var(--gs-color-warn-rgb), 0.5); } .gs-password-strength--weak .gs-password-strength-text { color: rgb(var(--gs-color-warn-rgb)); } .gs-password-strength--acceptable .mat-progress-bar .mat-progress-bar-fill::after { background-color: rgb(var(--gs-color-accent-rgb)); /* #f44336 */ } .gs-password-strength--acceptable .mat-progress-bar .mat-progress-bar-buffer { background-color: rgb(var(--gs-bg-color-html-rgb));/* #ffcdd2; */ } .gs-password-strength--acceptable .mat-progress-bar .mat-progress-bar-background { fill: rgba(var(--gs-color-accent-rgb), 0.5); /* fill: #ffcdd2; */ } .gs-password-strength--acceptable .gs-password-strength-text { color: rgb(var(--gs-color-accent-rgb)); } .gs-password-strength--strong .mat-progress-bar .mat-progress-bar-fill::after { background-color: rgb(var(--gs-color-success-rgb)); /* #f44336 */ } .gs-password-strength--strong .mat-progress-bar .mat-progress-bar-buffer { background-color: rgb(var(--gs-bg-color-html-rgb));/* #ffcdd2; */ } .gs-password-strength--strong .mat-progress-bar .mat-progress-bar-background { fill: rgba(var(--gs-color-success-rgb), 0.5); /* fill: #ffcdd2; */ } .gs-password-strength--strong .gs-password-strength-text { color: rgb(var(--gs-color-success-rgb)); } .ol-custom-overviewmap .ol-overviewmap-box { border: 2px solid rgba(var(--gs-color-warn-rgb)); } .ol-tooltip { background: rgba(var(--gs-bg-color-rgb), 0.5); color: rgb(var(--gs-text-color-inverse-rgb)); } .ol-tooltip-static { background-color: rgb(var(--gs-color-accent-rgb)); color: rgb(var(--gs-text-color-rgb)); border: 1px solid rgb(var(--gs-bg-color-inverse-rgb)); } .ol-tooltip-measure:before, .ol-tooltip-static:before { border-top: 6px solid rgba(var(--gs-bg-color-rgb), 0.5); border-right: 6px solid transparent; border-left: 6px solid transparent; content: ""; position: absolute; bottom: -6px; margin-left: -7px; left: 50%; } .ol-tooltip-static:before { border-top-color: rgb(var(--gs-color-accent-rgb)); } .gs-animate-flashing{ animation: flashing 1s linear infinite; } @keyframes flashing { from { opacity: 1; } 50% { opacity: 0; } to { opacity: 1; } }