@charset "UTF-8";
/*General*/
html {
font-size: unset;
}
body {
top: unset !important;
left: unset !important;
position: relative;
font-family: var(--global-text-font);
font-size: var(--global-text-font-size);
font-weight: var(--global-text-font-weight);
line-height: 1.4;
letter-spacing: .025em;
color: var(--global-text-font-color);
margin: 0;
padding: 0;
height: 100%;
}
form {
position: relative;
}
:focus-visible {
outline: 2px solid #000;
border-radius: 3px;
}
::-webkit-calendar-picker-indicator {
margin-left: 10px;
}
.hide_full {
display: none;
}
.label {
margin-bottom: .5rem;
display: inline-block;
}
.content {
margin-bottom: 1rem;
}
input[type='text'],
input[type='email'],
input[type='date'],
input[type='password'],
textarea,
select {
width: 100%;
font-family: var(--input-field-font-family) !important;
font-size: var(--input-field-font-size) !important;
color: var(--input-field-font-color) !important;
padding: var(--input-field-padding) !important;
border: var(--input-field-border) !important;
border-radius: var(--input-field-border-radius) !important;
background-color: var(--input-field-background);
box-shadow: var(--input-field-box-shadow) !important;
cursor: default;
}
input[type='text']:hover,
input[type='date']:hover,
input[type='email']:hover,
input[type='password']:hover,
textarea:hover,
select:hover {
border: var(--input-field-border-hover);
background-color: var(--input-field-background-hover);
box-shadow: var(--input-field-box-shadow-hover);
}
input[type='text']:focus,
input[type='date']:focus,
input[type='email']:focus,
input[type='password']:focus,
textarea:focus,
select:focus {
border: var(--input-field-border-focus);
background-color: var(--input-field-background-focus);
box-shadow: var(--input-field-box-shadow-focus);
}
form > div {
position: relative;
}
a {
color: var(--anchor-color);
text-decoration: var(--anchor-text-decoration);
}
.btn_wrapper {
margin-top: .5rem;
flex-shrink: 0;
display: flex;
}
a.global_button,
.global_button {
position: relative;
font-family: var(--button-font) !important;
font-weight: normal !important;
letter-spacing: var(--button-letter-spacing) !important;
border-radius: var(--button-border-radius) !important;
transition: var(--button-transition) !important;
display: flex;
justify-content: center;
align-items: center;
border: var(--button-primary-border) !important;
margin: 0;
width: var(--button-width) !important;
padding: var(--button-padding) !important;
color: var(--button-primary-font-color) !important;
background: var(--button-primary-background) !important;
cursor: pointer;
text-align: center;
text-decoration: none;
min-height: 48px;
white-space: normal;
box-shadow: var(--button-primary-shadow) !important;
}
a.global_button:hover,
.global_button:hover {
background: var(--button-primary-background-hover) !important;
border: var(--button-primary-border-hover) !important;
color: var(--button-primary-font-color-hover) !important;
box-shadow: var(--button-primary-shadow-hover) !important;
}
a.global_button.secondary,
.global_button.secondary {
background: var(--button-secondary-background) !important;
border: var(--button-secondary-border) !important;
color: var(--button-secondary-font-color) !important;
box-shadow: var(--button-secondary-shadow) !important;
}
a.global_button.secondary:hover,
.global_button.secondary:hover {
background: var(--button-secondary-background-hover) !important;
border: var(--button-secondary-border-hover) !important;
color: var(--button-secondary-font-color-hover) !important;
box-shadow: var(--button-secondary-shadow-hover) !important;
}
h1, h2, h3, h4, h5, h6, ul, li, p, form {
display: block;
margin: 0;
padding: 0;
}
[data-v-app] h1, [data-v-app] .text-h1, h1 {
font-family: var(--global-h1-font);
font-size: var(--global-h1-font-size);
color: var(--global-h1-font-color);
font-weight: var(--global-h1-font-weight);
hyphens: auto;
}
h1 {
margin-bottom: var(--global-h1-margin-bottom);
}
[data-v-app] h2, [data-v-app] .text-h2, h2 {
font-family: var(--global-h2-font);
font-size: var(--global-h2-font-size);
color: var(--global-h2-font-color);
font-weight: var(--global-h2-font-weight);
}
h2 {
margin-bottom: var(--global-h2-margin-bottom);
}
/*Layout*/
#mainframe {
all: unset;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
}
#main_content {
position: relative;
display: flex;
flex-direction: column;
height: auto;
background: var(--global-main-content-background);
align-items: center;
flex-grow: 1;
}
/*Header*/
#header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
align-self: flex-start;
width: 100%;
min-height: 121px;
position: relative;
background: var(--global-header-background);
border-bottom: var(--header-border-bottom);
box-shadow: var(--header-shadow);
margin-bottom: 2rem;
}
.header_top_wrapper {
max-width: 1200px;
width: 100%;
height: 100%;
display: flex;
position: relative;
padding: 17px 0;
align-items: flex-end;
}
#header .logo_wrapper {
flex: 0 0 260px;
}
#header ._logo {
background-image: url('../elements/logo.png');
background-repeat: no-repeat;
background-size: contain;
display: block;
width: 220px;
height: 95px;
}
div.header_small {
display: none;
}
/*Content*/
#content {
display: flex;
flex-direction: column;
max-width: 1200px;
width: 100%;
flex-grow: 1;
background: var(--global-main-content-background);
margin-bottom: 3rem;
}
#content .content_middle {
display: flex;
justify-content: flex-start;
}
#main_column {
position: relative;
width: 100%;
}
/*Footer*/
.footer {
background-color: var(--global-footer-background);
width: 100%;
}
.footer_wrapper {
max-width: 1200px;
margin: 0 auto;
width: 100%;
color: var(--global-footer-font-color);
text-align: center;
padding: 2rem 0;
font-weight: 400;
font-size: .9rem;
}
.footer_wrapper strong {
font-size: 1.1rem;
font-weight: 400;
}
.footer_wrapper a {
color: var(--global-footer-font-color);
}
/*Start*/
.start_text {
margin-bottom: 2rem;
}
#main_column .start .content_wrapper {
position: relative;
display: flex;
}
.start form.frm_login {
background: transparent;
all: unset;
padding: 1.5rem;
border-radius: var(--global-border-radius);
border: var(--global-border);
background-color: var(--global-content-background);
box-shadow: var(--global-content-shadow);
margin-right: 2rem;
box-sizing: border-box;
flex: 1 1 0;
}
form.frm_login .last .label,
form.frm_login .last .content {
padding-top: 0;
}
form.frm_login .plugin_login_navi_wrapper {
margin-top: 10px;
}
.plugin_login_navi_wrapper span {
font-size: 10px;
}
.plugin_login_navi_wrapper .btn_wrapper {
margin-top: 1rem;
display: flex;
justify-content: flex-end;
}
.loaded .tabct, .wbox {
padding: 1.5rem;
background: var(--global-content-background);
box-shadow: var(--global-content-shadow);
border: var(--global-border);
border-radius: var(--global-border-radius);
display: flex;
flex-direction: column;
flex: 1 1 0;
}
.wbox .login_steps_wrapper {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
padding-top: 35px;
}
.wbox .login_steps_wrapper .login_step {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.wbox .login_steps_wrapper .login_step .step_icon {
width: 25px;
height: 25px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--global-secondary-color);
color: #fff;
font-size: 15px;
}
p.step_content {
text-align: center;
}
#login_switch {
margin: 10px 0 15px 0;
}
#login_switch .input_wrapper {
font-weight: 400;
}
/*Meter Data*/
.meter_data_content {
display: flex;
flex-direction: column;
gap: 2rem;
}
.meter_list_small {
display: none;
}
.meter_list_big {
display: table;
}
.meter_data_card {
padding: 1.5rem;
background: var(--global-content-background);
box-shadow: var(--global-content-shadow);
border: var(--global-border);
border-radius: var(--global-border-radius);
}
.meter_data_card .field_desc,
.meter_data_card .field_value {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 20px;
}
.meter_data_card .field_value, .meter_data_card .field_value * {
font-weight: 600;
}
.meter_data_card .field_desc {
display: inline-block;
font-weight: 400;
margin-bottom: 5px;
min-width: 150px;
}
.meter_data_card select.select_location {
width: 100%;
}
#frame_location_select {
margin: 0;
}
.meter_data_card .meter_data_controls {
display: flex;
justify-content: space-between;
}
.meter_data_card .meter_data_controls * {
float: none;
}
.meter_data_card .list_meters table.list {
table-layout: fixed;
}
.meter_data_card .list_meters table.list tr {
display: grid;
align-items: center;
grid-template-columns: repeat(auto-fit, minmax(min(100%/7), 1fr));
grid-column-gap: 3px;
}
.meter_data_card .list_meters table.list th,
.meter_data_card .list_meters table.list td {
width: unset !important;
border: none;
}
.meter_list_small table.counter th,
.meter_data_card .list_meters table.list th {
font-weight: 700;
padding: 5px;
height: 50px;
}
.meter_list_small > .item:not(:last-of-type) {
margin-bottom: 2rem;
}
.meter_list_small table.counter td,
.meter_data_card .list_meters table.list td {
background-color: transparent;
font-weight: 400;
}
.meter_data_card .list_meters table.list th {
display: flex;
align-items: center;
}
.meter_list_small table.counter th,
.meter_data_card .list_meters table.list th {
font-weight: 700;
padding: 5px;
height: 40px;
}
.meter_list_small td.reading_date,
.meter_list_small td.reading_value,
.meter_list_big td.reading_date,
.meter_list_big td.reading_value {
display: flex;
align-items: center;
}
.meter_list_small td.reading_value,
.meter_list_big td.reading_value {
gap: 5px;
}
.meter_list_small td.reading_value input.reading,
.meter_list_big td.reading_value input.reading {
width: 80%;
}
.meter_list_small td.reading_value span.unit,
.meter_list_big td.reading_value span.unit {
width: calc(20% - 5px);
}
.meter_list_small td.reading_date input.date,
.meter_list_big td.reading_date input.date {
width: 100%;
}
.meter_list_big td.reading_date input.date {
text-align: right;
}
.meter_list_small table.counter tbody {
display: flex;
flex-direction: column;
gap: 2px;
}
.meter_list_small table.counter tbody tr {
display: flex;
align-items: center;
flex-wrap: wrap;
height: 60px;
}
.meter_list_small table.counter tr:first-child th,
.meter_list_small table.counter tr:first-child td {
padding-top: 10px;
}
.meter_list_small table.counter th {
white-space: break-spaces;
height: inherit;
vertical-align: middle;
}
.meter_list_small table.counter,
.meter_list_small table.counter th,
.meter_list_small table.counter td {
border: none;
}
.meter_list_small table.counter th,
.meter_list_small table.counter td {
width: calc(50%);
padding: 10px;
}
/*Dialog*/
w
#result_dialog {
width: 600px;
max-width: 100%;
max-height: 100%;
margin: 0 !important;
}
#result_dialog h4,
.ecp_dialog_bar {
margin: 0 !important;
padding: 10px;
text-align: center;
color: var(--messagebox-title-color);
font-size: var(--global-text-font-size);
font-weight: var(--global-text-font-weight);
background: var(--messagebox-title-background-color);
border-bottom: var(--global-border);
border-top-right-radius: inherit;
border-top-left-radius: inherit;
}
.ecp_dialog_bar h6 {
padding: 0px;
color: inherit;
font-size: inherit;
font-weight: inherit;
line-height: 2rem;
letter-spacing: .0125em;
}
.ecp_dialog_content {
padding: 1rem;
padding-right: 8px;
padding-bottom: 8px;
text-align: left;
font-size: var(--global-caption-font-size);
font-weight: var(--global-text-font-weight);
}
#result_dialog #list_result,
#result_dialog #contact_data {
padding: 0;
font-size: var(--global-caption-font-size);
font-weight: var(--global-text-font-weight);
}
#result_dialog .controls,
.ecp_dialog_controls {
margin-top: calc(1rem + 8px);
margin-bottom: 0px !important;
margin-right: 0px !important;
padding: 8px 0 0 !important;
display: flex;
justify-content: flex-end;
gap: 8px;
}
.ecp_dialog_close {
display: none;
}
#result_dialog .controls input[type=button],
.ecp_dialog_controls a {
color: var(--q-primary);
display: inline-flex;
flex-direction: column;
align-items: stretch;
position: relative;
outline: 0;
border: 0;
vertical-align: middle;
font-size: 14px;
line-height: 2em;
text-decoration: none;
color: inherit;
background: transparent;
font-weight: 500;
text-transform: uppercase;
text-align: center;
width: auto;
height: auto;
padding: 4px 16px;
min-height: 2.572em;
outline: none;
min-width: 64px;
cursor: pointer;
transition: background-color 0.3s cubic-bezier(.25,.8,.5,1), opacity 0.4s cubic-bezier(.25,.8,.5,1);
}
a.ecp_dialog_control:hover {
background: rgba(56, 47, 47, .15);
}
#result_dialog #contact_data table.form tr {
width: 100%;
display: flex;
align-items: start;
gap: 10px;
}
#result_dialog #contact_data table.form td,
#result_dialog #contact_data table.form th {
width: calc(50% - 5px);
}
#result_dialog #contact_data input[type="text"] {
min-width: unset;
width: 100%;
}
#result_dialog .btn_wrapper.controls {
margin: 10px !important;
margin-bottom: 15px !important;
gap: 10px;
}
.list_meters .upload_frame input[type="button"]{
margin: 0px;
width: 100%;
}