/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 11.01.2018, 16:12:29
    Author     : d_B102
*/
/*#bde8ed* lightGOB/
#9dd5db* normal/
#d4e9ec
#bfdfe2
#9dd5dbb3 heller GOBSIS
*/

:root {
    --themeColor: #7fbfc5;
    /*--buttonBorderTheme: #059fb8;*/
    /*--contraThemeColor: #FFFFFF;*/
    /*--listTreeHeader: #f9fcff;*/
    /*--borderTheme: #D9D9D9;*/
    /*--borderThemeInvisible: #FFFFFF;*/
    /*--backgroundTheme: #FFFFFF;*/
    /*--themeColorSelectedHover: #eef7f7;*/
    --hoverThemeColor: #cfedf1;
    /*--contraThemeColor: #FFFFFF;*/
    /*--disabledColorDark: rgba(0,0,0,0.34);*/
    /*--disabledColor: #D9D9D9;*/
    /*--textColor: black;*/

}

.z-tabbox-left > .z-tabs .z-tab.z-tab-selected {
    border-right: 2px solid #cfedf1;
}

.z-north-body, .z-south-body, .z-west-body, .z-center-body, .z-east-body {
    border: 0;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

.z-div {
    border: 0;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;

}

td.z-foot-bar {
    background-color: #fff;
}

.z-caption-content {
    padding: 6px 4px 5px 5px;
}

.caption-100 > .z-caption-content {
    width: 100%;
}

.z-cell {
    border-top: 1px solid #F2F2F2 !important;
    border-top-width: 1px !important;
    border-top-style: solid !important;
    border-top-color: rgb(242, 242, 242) !important;
}


.main-toolbar .z-toolbarbutton-content {
    font-size: 1.2em;
}

.main-toolbar .z-toolbarbutton-content > i {
    font-size: 2.1em;
}

.optToolbar {
    border-left: 2px;
}


.z-menubar.z-menubar-horizontal {
    padding: 1px;
}

.z-north-body, .z-south-body, .z-west-body, .z-center-body, .z-east-body, .z-center, .z-center-noborder, .z-borderlayout {
    width: 100%;
    height: 100%
}

.z-window, .z-window-content, .z-column-content {
    border: 0;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    color: #000000;
}

.z-toolbar-content > * {
    margin-left: 0px;
}

/*.z-toolbarbutton-content {
    font-size: small;
    padding: 1px 8px;
    color: rgba(0, 0, 0, 0.7);
}


*/
.z-toolbarbutton-content > img, .z-toolbarbutton-content > i {
    max-height: 150px;
    max-width: 300px;
    margin-right: 1px;
}


.z-column {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border-left: 1px solid #FFFFFF !important;
    border-bottom: 1px solid #FFFFFF !important;
}

.z-grid {
    padding: 3px;
}

.z-grid-header {
    background: #FFFFFF;
}

.z-grid-header-border {
    border-bottom: 1px solid #FFFFFF;
}

.z-grid-footer .z-footer {
    background: #FFFFFF;
}

.modal_win {
    padding: 5px;
}

.z-tabpanel {
    padding: 0px;
}

.z-radio .z-radio-cnt {
    /*  //color: #FF6969;*/

    position: relative;
    top: -2px;
    margin-right: 4px;
}

.z-checkbox .z-checkbox-cnt {
    position: relative;
    top: -2px;
    margin-right: 4px;
}

.z-bandbox-rounded input.z-bandbox-rounded-text-invalid {
    background: #FFD990;
}


.z-row-content {
    padding: 8px 13px;
}

.z-groupbox-3d > .z-groupbox-header .z-caption, .z-groupbox-3d > .z-groupbox-header .z-groupbox-title {
    padding: 4px 6px;

}

.z-groupbox-3d > .z-groupbox-content {
    padding: 6px;
}

.noBorderGrid.z-groupbox-3d > .z-groupbox-header {
    border-bottom: none;
}

.z-fieldset legend {
    font-weight: normal;
}

.z-caption-label {
    padding: 2px 0px 5px 0px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 13px;
}

.z-caption-image {
    height: 25px;
    width: 25px;
}

.window-title-bold > .z-window-header {
    font-size: 14px;
    font-weight: bold;
}

.z-groupbox-3d > .z-groupbox-header .z-caption-content {
    padding: 0px 0px 0px 0px;
    color: rgba(0, 0, 0, 0.70);
    font-size: 15px;
    font-weight: bold;
}

.z-groupbox-header.z-groupbox-readonly {
    background-color: #FFFFFF;
    margin-top: 0px;
}

/*.z-groupbox-3d > .z-groupbox-header > .z-caption{
    padding-top: 2px; padding-bottom: 2px;
}*/
.z-listheader {
    background-color: #cfedf1;
    background: #cfedf1;
    border-bottom: 0px;
    /*Farbe der Seperatoren zwischen Listcolumn*/
    border-left-color: #FFFFFF;
}


.z-listheader:hover {
    /*Farben wenn man in listheader hoverd*/
    background-color: #bedee1;
    border-left-color: #FFFFFF;
}

.z-listbox-header {
    background-color: #cfedf1;
}

.z-paging {
    background-color: #cfedf1;
}

.z-listheader-content {
    /*padding: 5px 18px 2px 18px;*/
    padding: 5px 0px 5px 4px;
    color: black;
}

.z-listheader:active, .z-listheader :active {
    /*padding: 5px 18px 2px 18px;*/
    background-color: #bde8ed;
}

.z-listheader-sort .z-listheader-sorticon {
    color: black;
}

.z-listhead-bar {
    border-left: #D9D9D9;
    background: #cfedf1;
}

.z-listbox-header {
    background: #cfedf1;
}

.z-footer-content {
    padding: 8px 8px 8px 5px;
}

.z-listbox {
    border: 0px;
    border-bottom: 1px #9dd5db;
}

.z-tree-header {
    background-color: #cfedf1;
    border-left-color: #9dd5db;;
}

.z-tree-header-border {
    background-color: #cfedf1;
    border-bottom: 1px solid #D9D9D9;
}

.z-treecol {
    background-color: #cfedf1;
    border-bottom: 1px solid #FFFFFF;
    border-left-color: #FFFFFF;
    border-left: 1px solid #FFFFFF;
}

.z-treecol-content {
    color: rgba(0, 0, 0, 0.9);
}

.z-treecols-bar {
    border-left: 1px solid #ffffff;
    background: #cfedf1;
    border-bottom: 1px solid #ffffff;
}

.z-treecell-content {
    padding: 4px 12px 4px 12px;
}

.z-button {
    /*border-color:#cfedf1;*/
    background-color: #FFFFFF;
    color: #000000;
    border-color: #cfedf1;
    min-height: 27px;
    padding: 4px !important;
    margin: 3px !important;
    font-size: 13px;
}

.z-button:hover {
    background-color: #d4e9ec;
    color: #000000;
}

.z-window-icon.z-window-close:hover {
    background-color: #9dd5db;
    font-size: large;
    border-color: #F1C4C4;


}

.z-window-icon.z-window-close {
    background-color: #FFFFFF;
    font-size: large;

}

.z-button img {
    vertical-align: middle;
}


.z-button:focus {
    color: #000000;
    border-color: #F1C4C4;
    background-color: #eef7f7;
}

.z-button:disabled:hover {
    background-color: #D9D9D9;
}

.smallButton .z-button {
    padding: 4px 8px;
    font-size: small;
}

.z-window-header {
    color: rgba(54, 54, 54, 0.85);
    padding: 0px 0px 0px 2px;
}

.z-window-header.z-window-header-move {
    color: rgba(54, 54, 54, 0.85);
    padding: 0px 0px 0px 2px;
}

.groupboxNoMargin .z-groupbox.z-groupbox-3d {
    margin: 0px 5px;
}

.z-south-header, .z-east-header, .z-north-header, .z-west-header, .z-center-header {
    color: rgba(0, 0, 0, 0.85);
    background-color: #cfedf1;
}

.z-messagebox-window.z-window.z-window-modal.z-window-shadow {
    min-width: 550px;
}

.z-messagebox-buttons.z-hlayout {
    padding: 0px 16px;
}

.z-window.z-window-modal.z-window-content {
    padding: 10px;
}

.z-window.z-window-modal {
    padding: 8px;
    min-height: 165px;
    min-width: 450px;
}

.z-window.z-window-modal.z-window-shadow {
    background-color: rgb(217, 229, 239);
    margin-top: 3px;
    /*    background-color: #dfdfdf;*/
}

.z-textbox {
    margin: 0px;
    padding: 5px;
}

/*.z-datebox {
    margin: 10px;
}*/

/*.z-combobox {
    margin: 10px;
}*/

.z-tab {
    background-color: #FFFFFF;
    border: 1px solid #cfcfcf;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    /*padding: 8px 14px 8px 14px;*/
}

.z-tab:hover {
    background-color: #eef7f7;
}

.z-tab.z-tab-selected {
    background-color: #cfedf1;
    border-bottom: 0px solid #9dd5db;
    margin-bottom: 0px;
    color: rgba(0, 0, 0, 0.9);
    font-weight: bold;
}

.z-tab.z-tab-selected.z-tab-text {
    font-weight: bold;
}

.z-tab-image {
    width: 20px;
    height: 20px;
}

.z-tab-text {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.9);
}

.z-tabs-content {
    background-color: white;
    min-height: 34px;
    border-bottom: 0px solid #ffffff;
}

.z-tabs {
    min-height: 30px;
}

.z-tabbox {
    border-bottom: 1px solid #ffffff;
    border-top: 0px solid #ffffff;
    border-right: 0px solid #ffffff;
}

.z-tabpanels {
    border-top: 0px solid #D9D9D9;
    border-left: 1px solid #D9D9D9;
    border-right: 1px solid #D9D9D9;
}

.z-separator-horizontal {
    height: 5px;
}

.z-menu-text {
    font-size: 15px;
    color: rgba(0, 0, 0, 0.90);

}

.z-menu-selected > .z-menu-content {

    background-color: #7fbfc5;
}

.z-menu-content:active {

    background-color: #7fbfc5;
}

.z-menu-icon {
    color: rgba(0, 0, 0, 0.80);
}

.z-menuitem-text {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.80);
}

.z-menuitem:active {
    background-color: #7fbfc5;
}

.z-columns-bar {
    border-color: #FFFFFF;
    background-color: #FFFFFF;
}

.z-window.z-window-modal.z-window-shadow {
    background: #FFFFFF;
    border-color: #cfedf1;
}

input[type="radio"]:checked {
    border-color: #7fbfc5;
}

input[type="radio"]:checked::before {
    background-color: #7fbfc5;
}

input[type="radio"]:hover {
    border-color: #000000;
}

input[type="checkbox"]:checked {
    background-color: #7fbfc5;
    color: #FFFFFF;
    /*color: rgba(0,0,0,0.34);*/
}

input[type="checkbox"][disabled] {
    cursor: default;
    color: rgba(0, 0, 0, 0.34);
    background-color: #f2f2f2;
}

input[type="checkbox"]:hover {
    border-color: #000000;
}


.z-textbox:focus, .z-decimalbox:focus, .z-intbox:focus, .z-longbox:focus, .z-doublebox:focus {
    border-color: #F1C4C4;

}

.z-comboitem-selected * {
    font-weight: bold;
    color: #000000;

}

.z-timebox-button:hover > i, .z-spinner-button:hover > i, .z-doublespinner-button:hover > i {
    border-top: 1px solid #9dd5db;
}

.z-combobox-popup, .z-bandbox-popup, .z-datebox-popup, .z-timebox-popup {
    border: 1px solid #9dd5db;
}

.z-combobox-open .z-combobox-button, .z-bandbox-open .z-bandbox-button, .z-datebox-open .z-datebox-button {
    border-color: #bde8ed;
}

.z-combobox-input:focus, .z-bandbox-input:focus, .z-datebox-input:focus, .z-timebox-input:focus, .z-spinner-input:focus, .z-doublespinner-input:focus {
    border-color: #F1C4C4;
}

.z-combobox-button:hover, .z-bandbox-button:hover, .z-datebox-button:hover, .z-timebox-button:hover, .z-spinner-button:hover, .z-doublespinner-button:hover {
    border-color: #F1C4C4;
    background: #cfedf1;
}

.z-combobox-input:focus, .z-bandbox-input:focus, .z-datebox-input:focus, .z-timebox-input:focus, .z-spinner-input:focus, .z-doublespinner-input:focus {
    border-color: #F1C4C4;
}

.z-calendar-selected {
    background: #cfedf1;
}

.z-calendar-selected {
    background: #000000;
}

.z-calendar-cell:hover {
    color: rgba(0, 0, 0, 0.9);
    background: #eef7f7;
}

.z-calendar-selected:hover {
    color: #fff;
    background: #bde8ed;
}

.z-toolbar {
    padding: 6px 59px 0px 1px;
}

/*.z-toolbar-center{
    align: left;
}*/
.z-listheader.z-listheader-selected {
    background: #cfedf1;
}

.z-listitem.z-listitem-selected {
    background: #cfedf1;
}

.z-listitem.z-listitem-selected:hover > .z-listcell {
    background: #eef7f7;
}

.z-listitem:hover {
    background: #eef7f7;
}

.z-listitem:hover > .z-listcell {
    background: #eef7f7;
}

.z-listitem.z-listitem-selected > .z-listcell {
    background: #cfedf1;
}

.z-listbox-header-border {
    border-bottom: 1px solid #FFFFFF;
}

.z-listitem.z-listitem-selected.z-listitem-focus > .z-listcell {
    background: #cfedf1;
}

.z-listitem.z-listitem-selected.z-listitem-focus:hover > .z-listcell {
    background: #eef7f7;
}

.z-listitem.z-listitem-selected.z-listitem-focus:hover {
    background: #eef7f7;
}

.z-row:hover > .z-row-inner, .z-row:hover > .z-cell {
    background: #eef7f7;
}


.z-tab-selected .z-tab-text {
    color: #000000;

}

.z-tab-selected .z-tab-text:hover {
    color: #000000;
}


.z-bandbox-input {
    padding: 8px 6px 8px 6px;
}

.z-toolbarbutton:hover {
    background-color: #eef7f7 !important;
}

.z-toolbarbutton:focus {
    border-color: #eef7f7 !important;
    background-color: #eef7f7 !important;
    color: #000000;
}

.z-toolbarbutton:hover .z-toolbarbutton-content {
    background-color: #eef7f7;
    color: #000000;
}

.z-combobox-input[readonly], .z-bandbox-input[readonly],
.z-spinner-input[readonly], .z-doublespinner-input[readonly] {
    background-color: #ffffff;
}

.z-panelchildren.z-panelchildren-noheader.z-panelchildren-noborder {
    padding: 0px 0px 0px 8px;
}

.z-errorbox-content {
    padding: 8px 20px 2px 34px;
}


.smallSouth .z-south-body {
    margin-top: 4px;
    height: 45px;
}

.pflicht .z-combobox-input {
    background: #FFD990;
}

.pflicht {
    background: #FFD990;
}

.pflicht > .z-bandbox-input {
    background: #FFD990;
}

.pflicht .z-datebox-input {
    background: #FFD990;
}

.pflicht .z-timebox-input {
    background: #FFD990;
}

.pflichtRadio {
    border: 3px solid #FFD990;
    padding: 5px 12px 5px 0px;
    margin: 0px 0px 0px -2px;
}

.pflicht .z-label-input {
    background: #FFD990;
}

.button-red > span > i.fas,
.button-red > span > i.far,
.button-red > span > i.fab,
.button-red > span > i.fal,
.button-red > span > i.fad,
.button-red > span > i.fab,
.button-red > span > i.glyphicon,
.button-red > span > i.z-icon-fw {
    color: red !important;
    padding: 2px;
    margin-left: 2px;
    margin-right: 2px;
}


i.icon-red {
    color: orangered !important;
    padding: 2px;
    margin-left: 2px;
    margin-right: 2px;
}

i.icon-green {
    color: green !important;
    padding: 2px;
    margin-left: 2px;
    margin-right: 2px;
}

.z-listcell-content {
    padding: 4px 10px;
}

.z-listbox-autopaging .z-listcell-content {
    height: 27px;
    padding: 4px 10px;
    overflow: hidden;
}

.z-auxheader {
    background-color: #FFFFFF;
    border-left: 0px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;

}

.z-auxheader-content {
    color: #000000;
}


.tag-blue, .tag-green, .tag-coral, .tag-red {
    /*box-sizing: border-box;*/
    /*display: inline-block;*/
    position: relative;
    margin: 0px !important;
    padding: 2px 5px 2px 5px;
}


.tag-green span {
    margin: 0px 0px 0px 0px !important;;

    padding: 7px 18px 6px 2px;
    position: relative;
    z-index: 200;
    color: white;
    display: block;
    border-radius: 16px;
    background: green;
    transition: all 0.08s ease-in;
}

.tag-coral span {
    margin: 0px 0px 0px 0px !important;;

    padding: 7px 18px 6px 2px;
    position: relative;
    z-index: 200;
    color: white;
    display: block;
    border-radius: 16px;
    background: coral;
    transition: all 0.08s ease-in;
}

.tag-red span {
    margin: 0px 0px 0px 0px !important;;

    padding: 7px 18px 6px 2px;
    position: relative;
    z-index: 200;
    color: white;
    display: block;
    border-radius: 16px;
    background: red;
    transition: all 0.08s ease-in;
}

.tag-red > span > i, .tag-coral > span > i, .tag-green > span > i, .tag-blue > span > i {
    color: black;
}

.button-red > span > i.fas,
.button-red > span > i.far,
.button-red > span > i.fab,
.button-red > span > i.fal,
.button-red > span > i.fad,
.button-red > span > i.fab,
.button-red > span > i.glyphicon,
.button-red > span > i.z-icon-fw {
    color: red !important;
    /*padding: 2px;*/
    /*margin-left: 2px;*/
    /*margin-right: 2px;*/
}

a.button-orange > span > i.fas,
a.button-orange > span > i.far,
a.button-orange > span > i.fab,
a.button-orange > span > i.fal,
a.button-orange > span > i.fad,
a.button-orange > span > i.fab,
a.button-orange > span > i.glyphicon,
a.button-orange > span > i.z-icon-fw {
    color: orange !important;
    /*padding: 2px;*/
    /*margin-left: 2px;*/
    /*margin-right: 2px;*/
}


a.button-green > span > i.fas,
a.button-green > span > i.far,
a.button-green > span > i.fab,
a.button-green > span > i.fal,
a.button-green > span > i.fad,
a.button-green > span > i.fab,
a.button-green > span > i.glyphicon,
a.button-green > span > i.z-icon-fw {
    color: green !important;
    /*padding: 2px;*/
    /*margin-left: 2px;*/
    /*margin-right: 2px;*/
}


a.button-blue > span > i.fas,
a.button-blue > span > i.far,
a.button-blue > span > i.fab,
a.button-blue > span > i.fal,
a.button-blue > span > i.fad,
a.button-blue > span > i.fab,
a.button-blue > span > i.glyphicon,
a.button-blue > span > i.z-icon-fw {
    color: blue !important;
    /*padding: 2px;*/
    /*margin-left: 2px;*/
    /*margin-right: 2px;*/
}

a.button-coral > span > i.fas,
a.button-coral > span > i.far,
a.button-coral > span > i.fab,
a.button-coral > span > i.fal,
a.button-coral > span > i.fad,
a.button-coral > span > i.fab,
a.button-coral > span > i.glyphicon,
a.button-coral > span > i.z-icon-fw {
    color: coral !important;
    /*padding: 2px;*/
    /*margin-left: 2px;*/
    /*margin-right: 2px;*/
}

.flexWrapSpaceBetween {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.flexWrapSpaceEvenly {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}


.flexWrapSpaceAround {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.treecellFlexWrapCenter > .z-treecell-content {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

.align-center {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.align-top {
    display: flex;
    align-content: start;
    align-items: start;
    justify-content: start;
}

.align-right {
    display: flex;
    align-content: end;
    align-items: end;
    justify-content: end;
}

.align-left {
    display: flex;
    align-content: start;
    align-items: start;
    justify-content: start;
}

.flexWrapEnd {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.flexWrapCenter {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

.flexWrapStart {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.colWrapStart {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: start;
}

.colWrapCenter {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.img-upload-chip-title {
    font-weight: 400;
}

@media (max-width: 700px) {
    .img-upload-button-container {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .img-upload-wrapper {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: flex-start;
        align-items: start;
    }

    .img-upload-chip {
        margin: 10px 0px 10px 0px;
        display: inline-block;
        padding: 0 25px;
        height: 50px;
        font-size: 16px;
        line-height: 50px;
        border-radius: 15px;
        width: 100%;
        background-color: #f1f1f1;
    }
}

@media (min-width: 701px) {
    .img-upload-button-container {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: start;
        align-items: center;
    }

    .img-upload-wrapper {
        display: flex;
        flex-wrap: wrap;
        flex: 1 1 100%;
    }

    .img-upload-chip {
        margin: 10px;
        display: inline-block;
        padding: 0 25px;
        height: 50px;
        font-size: 16px;
        line-height: 50px;
        border-radius: 15px;
        background-color: #f1f1f1;
    }
}

.img-upload-button-save, .img-upload-button-upload {
    transition: all 0.5s cubic-bezier(0.65, -0.25, 0.25, 1.95);
    font-weight: 700;
    color: #202121;
    padding: 1.25rem 2rem;
    border: none;
    margin: 4px;
}

.img-upload-button-save {
    background: #BBFFBB;

}

.img-upload-button-upload {
    background: #9dd5db;
}

.listbox-no-hover > .z-listbox-body > table > tbody > .z-listitem:hover > .z-listcell {
    color: #FFFFFF;
}

.img-upload-icon-button .z-toolbarbutton-content > i {
    font-size: 2.0em;
}

.img-upload-lc-noborder {
    border: 0 !important;
}


.listbox-disable-all-checkbox > .z-listheader-content > .z-listheader-checkable {
    display: none;
}

.z-macro {
    width: 100%;
    height: 100%;
}

.wrapper-inner {
    border: 1px solid #d9d9d9;
    padding: 1px 1px 1px 1px;
    margin: 1px 1px 1px 1px;
    box-sizing: border-box;
    border-radius: 6px 6px 6px 6px;
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 100%;
}

.wrapper {
    display: flex;
    flex: 1 1 100%;
}

.flexWrapCenter {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

.subDefinition {
    font-size: 70%;
    font-weight: bold;
    font-style: normal;
    font-family: 'Arial Kursiv';
}

.tag-blue span {
    margin: 0px 0px 0px 0px !important;
    padding: 1px 10px 1px 10px;
    border: 0;
    position: relative;
    z-index: 200;
    color: black;
    border-radius: 16px;
    background: #f2f2f2;
    transition: all 0.08s ease-in;
}

.default-padding {
    padding: 5px;
}

.meter {
    font-size: 1px;
    height: 3px;
}

.meter-inner {
    width: 0px;
    height: 3px;
}

.meter-red .meter-inner {
    background: red;
}

.meter-orange .meter-inner {
    background: orange;
}

.meter-green .meter-inner {
    background: green;
}