/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
/**
 * Office UI Fabric Core 10.1.0
 * The front-end framework for building experiences for Office 365.
 **/
/*
  Your use of the content in the files referenced here is subject to the terms of the license at http://aka.ms/fabric-assets-license
*/
@font-face {
    font-family: 'Selawik Web';
    src: url('https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-light.woff2') format('woff2'), url('https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-light.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Selawik Web';
    src: url('https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-semilight.woff2') format('woff2'), url('https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-semilight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Selawik Web';
    src: url('https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-regular.woff2') format('woff2'), url('https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Selawik Web';
    src: url('https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-semibold.woff2') format('woff2'), url('https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Selawik Web';
    src: url('https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-bold.woff2') format('woff2'), url('https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

.ms-Fabric {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    color: #323130;
    font-family: 'Selawik Web', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
    font-size: 14px;
}

.ms-Fabric button,
.ms-Fabric input,
.ms-Fabric textarea {
    font-family: inherit;
}

.ms-Fabric--selawik {
    font-family: 'Selawik Web', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
}

/** code beginning from here is pestsoft-specific css
* Copyright (c) IONS **/
* {
    font-family: 'Selawik Web', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
}

html {
    width: 100%;
    height: 100%;
}

body {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
    background-color: #f8f8f8;
    font-weight: 300;
}

p {
    margin: 0 0 11px 0;
    line-height: 16px;
}

a {
    cursor: pointer;
    text-decoration: none;
    color: #00686f;
}

a:hover {
    text-decoration: underline;
}

a.blk {
    color: #000000;
}

img {
    border: 0;
    vertical-align: bottom;
}

td img {
    vertical-align: middle;
}

textarea,
input,
body {
    font-size: 11pt;
}

h1 {
    font-size: 22.5pt;
    font-weight: 100;
    margin-top: 22px;
    min-height: 33px;
    padding: 1px 5px 17px;
    border-bottom: 1px solid #d3d6da;
}

h2 {
    font-size: 13.5pt;
    font-weight: 500;
    color: #212121;
    margin: 0px;
    padding: 8px 0 0 5px;
    min-height: 33px;
    line-height: 18px;
    background-color: inherit;
}

h2 span {
    color: #505c6d;
    font-size: 9pt;
    font-weight: 400;
    margin-left: 4px;
}

h2 .svg {
    margin-left: 5px;
    position: relative;
    top: 4px;
}

h2.border {
    border-bottom: 2px solid #515c6c;
    padding-bottom: 7px;
}

h3 {
    font-size: 13.5pt;
    font-weight: 500;
    line-height: 16pt;
    margin: 11px 0 0 0;
    padding: 2px 0 4px 5px;
    min-height: 20px;
    background-color: inherit;
}

h2.m,
h3.m {
    width: 60%;
    display: inline-block;
}

h2.small,
h3.small,
h3.s {
    display: inline-block;
}

.h3_s {
    margin: 0px;
    padding: 2px 0 0 5px;
    min-height: 20px;
    line-height: 20px;
    width: 40%;
    display: inline-block;
}

.h3_s input {
    margin-right: 6px;
}

.h3_s label {
    font-size: 10px !important;
}

h2.small + .page-toolbar.h2,
h3.small + .page-toolbar.h3 {
    width: 60%;
}

h2.small + .page-toolbar.h2 .item,
h3.small + .page-toolbar.h3 .item {
    float: left;
    margin-left: 0;
    margin-right: 5px;
}

table a.arrow {
    line-height: 6px;
    margin-right: 4px;
    float: left;
}

td.w3 {
    width: 138px;
}

td.w3x {
    width: 162px;
}

td.w4 {
    width: 184px;
}

td.w4x {
    width: 198px;
}

/* layout */
.wrapper {
    position: relative;
    margin: 0 auto;
    height: auto;
    min-width: 1166px;
    min-height: 630px;
    background-color: inherit;
}

.header {
    position: fixed;
    width: 100%;
    z-index: 900;
}

.page {
    padding-top: 75px;
    /* 48px from fixed header + 27px */
    padding-bottom: 11px;
}

.page .page-dyn {
    position: relative;
}

.page * {
    box-sizing: border-box;
}

/* topnav */
.top-menu {
    height: 48px;
    background-color: #282828;
    padding-left: 11px;
}

.top-menu .item {
    float: left;
    width: auto;
    height: 40px;
    margin-top: 4px;
    padding: 0 10px;
    color: #ffffff;
    font-size: 11pt;
    line-height: 29pt;
}

.top-menu .item a {
    color: #d9d9d9;
    text-decoration: none;
}

.top-menu .item.info-name {
    font-size: 16px;
    font-weight: 500;
    margin-right: 33px;
}

.top-menu .item a:hover,
.top-menu .item:hover {
    color: #ffffff;
}

.top-menu .item.active a,
.top-menu .item.active {
    color: #ffffff;
    font-weight: 500;
}

.top-menu .item.dynamics:hover {
    background-color: #255053;
}

.top-menu .item.right {
    float: right;
    text-align: center;
}

.top-menu .item.active,
.top-menu .item:hover {
    background-color: inherit;
}

.top-menu .settings {
    float: right;
    width: 36px;
    height: 22px;
}

.top-menu .svg {
    float: right;
    margin-top: 4px;
}

.top-menu .language {
    float: right;
    margin: 4px 20px 0;
    text-transform: uppercase;
    cursor: pointer;
}

.top-menu .language-picker {
    position: absolute;
    width: 50px;
    height: auto;
    padding-left: 9px;
    font-size: 10pt;
    line-height: 22px;
    text-transform: uppercase;
    background-color: #404040;
    z-index: 900;
    display: none;
    right: 118px;
    top: 44px;
}

.top-menu .notification-badge {
    position: relative;
    top: -8px;
    right: -2px;
    padding: 2px 4px;
    border-radius: 50%;
    background: #d4343d;
    color: white;
    font-size: 11px;
}

/* page-toolbar */
.page-toolbar {
    position: relative;
    margin: 0 55px 11px 55px;
    border-bottom: 1px solid #707070;
}

.page-toolbar label {
    margin: 4px 0;
}

.page-toolbar .icon {
    float: left;
    width: 44px;
    height: 33px;
    margin-left: -44px;
}

.page-toolbar .title {
    float: left;
    margin: 5px;
    padding-top: 5px;
    min-width: 44px;
}

.page-toolbar a {
    color: inherit;
    text-decoration: none;
}

.page-toolbar a .item {
    position: relative;
    margin: 11px 17px 0 0;
    border-bottom: 0;
    float: left;
    width: auto;
    padding: 6px 25px 0 29px;
    height: 30px;
}

.page-toolbar .item {
    position: relative;
    margin: 11px 17px 0 0;
    border-bottom: 0;
    float: left;
    width: auto;
    padding: 6px 25px 0 25px;
    height: 30px;
}

.page-toolbar .item .wrap .ms-Toggle {
    margin-top: 0;
}

.page-toolbar .item .wrap label {
    margin-top: 0;
}

.page-toolbar .item:hover {
    background-color: #d9f0f2;
}

.page-toolbar .item.active {
    background-color: #ffffff;
    font-weight: 600;
}

.page-toolbar .item.notice {
    background-color: #b2e9ed;
}

.page-toolbar .item.highlight {
    background-color: #b2e9ed;
}

.page-toolbar .item.icon-only {
    padding-right: 0;
}

.page-toolbar .item.disabled {
    background-color: #c8c8c8;
    pointer-events: none;
    transition: background-color 0.3s;
}

.item-icon {
    position: absolute;
    top: 5px;
    left: 4px;
    height: 21px;
    width: 22px;
    padding: 0;
    background-image: url(../img/icons/icons.svg?v3);
    background-repeat: no-repeat;
    background-position: -769px -50px;
    filter: invert(29%) sepia(82%) saturate(1431%) hue-rotate(157deg) brightness(93%) contrast(101%);
}

.item-icon.add,
.item-icon.plus {
    background-position: -209px -50px;
}

.item-icon.back {
    background-position: -809px -50px;
}

.item-icon.filter {
    background-position: -89px -50px;
}

.item-icon.funnel {
    background-position: -169px -50px;
}

.item-icon.link {
    background-position: -769px -50px;
}

.item-icon.pdf {
    background-position: -489px -50px;
}

.item-icon.chart {
    background-position: -448px -10px;
}

.item-icon.minus {
    background-position: -929px -50px;
}

.item-icon.warn {
    background-position: -329px -10px;
}

.page-toolbar.h3,
.page-toolbar.h2 {
    float: right;
    width: 40%;
    height: 27px;
    padding-left: 0;
    margin: 11px 0 0 0;
    text-align: right;
    border: 0;
}

.page-toolbar.h3 .item,
.page-toolbar.h2 .item {
    float: right;
    height: 27px;
    min-width: 77px;
    border: 0;
    margin: 0 0 0 5px;
}

.page-toolbar.h2 {
    height: 33px;
}

.page-toolbar.h2 .item {
    height: 27px;
    margin: 5px;
    border: 1px solid #ffffff;
}

/* page-add */
.page-add,
.page-errors,
.page-confirmation,
.page-notification {
    position: relative;
    margin-left: 11px;
    margin-right: 11px;
    margin-bottom: 22px;
    background-color: #ffffff;
    padding-left: 44px;
    padding-top: 0;
}

.page-add .icon,
.page-errors .icon {
    float: left;
    width: 44px;
    height: 33px;
    margin-left: -44px;
}

.page-filter .box,
.page-add .box {
    float: left;
    margin-right: 44px;
}

.page-add {
    /*margin: 0 0 11px 0;*/
    padding-bottom: 22px;
}

.page-add .icon {
    height: 28px;
}

.page-add .item {
    /*min-height: 22px;
      margin: 5px 0 0 0;*/
}

.page-add .item .label {
    padding-top: 5px;
}

.page-add .item .input {
    padding: 0;
    min-height: 23px;
}

.page-add .item .input.grid-height-1 {
    height: auto;
    min-height: 23px;
}

.page-add .item.form_row {
    margin-right: 11px;
}

.page-add .top {
    font-size: 22.5pt;
    font-weight: 100;
    margin-top: 22px;
    margin-bottom: 15px;
    float: left;
    width: auto;
    min-height: 33px;
    /*border-bottom:1px solid #707070;*/
}

.page-add h2 {
    background-color: inherit;
    min-height: 24px;
    margin-top: 22px;
    padding: 0;
}

.page-add .item {
    position: relative;
    float: left;
}

.page-add .item .label {
    float: left;
}

.page-add .item .label table {
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

.page-add .item .input {
    float: left;
    min-height: 25px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.page-add .button {
    margin: 5px 0 7px;
}

.page-add .input.S {
    float: right;
    margin: 5px 5px 0 0;
    margin-bottom: 0 !important;
    height: 23px;
    z-index: 10;
}

.page-add .box_l,
.page-add .box_r {
    float: left;
    width: auto !important;
    margin-right: 11px;
}

.page-add .box_l {
    width: auto !important;
    margin-right: 44px;
}

.page-add .sub.secondary {
    background-color: #e5ebe6;
}

.page-add .btnbox {
    float: right;
    margin-bottom: 4px;
    width: 40px;
}

.page-add .btnbox .input {
    height: 28px;
}

.page-add .btnbox .grid-width-1 {
    width: 28px;
}

.page-add .btnbox .input-submit {
    height: 28px;
}

.page-add .item .checkboxes {
    float: left;
    padding-top: 2px;
    padding-bottom: 5px;
}

.page-add .item .checkboxes .checkboxes-wrapper {
    float: left;
    background-color: #ffffff;
}

.page-add .item .checkboxes .checkboxes-wrapper .checkbox {
    float: left;
    padding-left: 10px;
    height: 23px;
    line-height: 23px;
}

.page-add .item .checkboxes .checkboxes-wrapper .checkbox label {
    font-size: 11px;
}

.page-add .item .output {
    float: left;
    line-height: 17px;
    padding: 8px 0 0 5px;
    margin-bottom: 8px;
}

.page-add .box_compact .item {
    min-height: 25px;
    margin: 4px 0 2px 0;
}

.page-add .box_compact .item .label,
.page-add .box_compact .item .output {
    padding-top: 4px !important;
    height: auto;
    min-height: 22px;
    margin-bottom: 0;
    line-height: 17px;
}

.page-add .box_compact .input {
    padding-top: 0 !important;
}

.page-add.sub {
    margin: 0 11px;
    padding-bottom: 11px;
}

.page-add.sub h2 {
    font-size: 13px;
    line-height: 20px;
    height: auto !important;
    margin: 0;
}

.page-add.sub h3 {
    margin: 0 11px;
}

.page-add.sub .top {
    font-size: 14pt;
    font-weight: 500;
    margin-bottom: 5px;
}

h3.sub {
    margin: 0 11px;
}

/* user feedback */
.page-notification {
    background-color: #ccf0e3 !important;
    padding-left: 132px;
}

.page-notification h2 {
    background: none;
    padding-left: 0;
    font-size: 16px;
    font-weight: normal;
    line-height: 20px;
}

.page-notification p {
    padding-bottom: 11px;
}

.page-confirmation {
    display: none;
    padding-top: 11px;
    padding-bottom: 11px;
    background-color: #b2e9ed !important;
}

.page-errors {
    background-color: #ffb99a !important;
    padding-bottom: 11px;
}

.page-errors p {
    padding-top: 11px;
}

.page-errors p:last-child {
    margin-bottom: 0;
}

/* page-filter */
.page-filter {
    position: relative;
    margin: 6px 11px 22px 11px;
    background-color: inherit;
    padding-left: 44px;
    padding-top: 4px;
}

.page-filter label.inner {
    font-size: 10px;
    float: left;
    margin: 11px 8px 0 0;
    padding-top: 1px;
}

.page-filter .icon {
    float: left;
    width: 44px;
    height: 33px;
    margin-left: -44px;
}

.page-filter .top {
    font-size: 22.5pt;
    font-weight: 100;
    float: left;
    width: auto;
    height: 33px;
    line-height: 33px;
    padding-left: 5px;
    padding-right: 5px;
}

.page-filter .item {
    position: relative;
    float: left;
}

.page-filter .item .label {
    float: left;
}

.page-filter .item .label table {
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

.page-filter .item .input table {
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

.page-filter .item .checkboxes {
    float: left;
    padding-top: 5px;
    padding-bottom: 5px;
}

.page-filter .item .checkboxes .checkboxes-wrapper {
    float: left;
    background-color: #ffffff;
    margin: 2px 0;
}

.page-filter .item .checkboxes .checkboxes-wrapper .checkbox {
    float: left;
    padding-left: 10px;
    height: 23px;
    line-height: 23px;
}

.page-filter .item .checkboxes .checkboxes-wrapper .checkbox label {
    font-size: 11px;
}

.page-filter .input {
    float: left;
    height: 33px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.page-filter .box_l,
.page-filter .box_r {
    float: left;
    width: auto !important;
    margin-right: 11px;
}

.page-filter .box_l {
    margin-right: 22px;
}

/* page-component */
.page-component {
    position: relative;
    padding-left: 11px;
    padding-right: 11px;
    padding-bottom: 22px;
    /* table */
}

.page-component p {
    padding-left: 5px;
}

.page-component .top {
    min-height: 33px;
    background-color: inherit !important;
}

.page-component .top .label {
    float: left;
    width: auto;
    height: auto;
    min-height: 33px;
    line-height: 33px;
    font-size: 13.5pt;
    font-weight: 600;
}

.page-component .top .pager {
    float: right;
    width: auto;
    min-width: 143px;
    height: 22px;
    line-height: 22px;
    background-color: #f3f3ed;
    padding-left: 5px;
    padding-top: 6px;
}

.page-component .item {
    position: relative;
    float: right;
    margin: 11px 17px 0 0;
    border-bottom: 0;
    width: auto;
    padding: 6px 25px 0 25px;
}

.page-component table .input,
.page-component table .checkbox {
    float: left;
    margin-right: 2px !important;
}

.page-component table .input.grid-height-1 {
    height: auto;
}

.page-component table input {
    margin: 0 !important;
}

.page-component table textarea,
.page-component select {
    min-height: 23px;
}

.page-component select {
    padding-top: 3px;
}

.page-component .table tbody {
    /*tr:last-of-type {
        border-bottom: 1px solid #707070;
      }*/
}

.page-component .table tbody tr:hover,
.page-component .table tbody tr.even:hover {
    /* background-color: #e8f5fd !important;  */
    background-color: #ffffff !important;
    box-shadow: 0 2px 6px -3px #888888;
}

.page-component .table tbody tr {
    border-bottom: 1px solid #d3d6da;
}

.page-component .table tbody td.b {
    font-weight: 600;
}

.page-component .table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
}

.page-component .table td,
.page-component .table th {
    color: #212121;
    padding: 6px 5px 5px 5px;
    text-align: left;
    height: 30px;
}

.page-component .table td img,
.page-component .table td .svg,
.page-component .table th img,
.page-component .table th .svg {
    vertical-align: bottom;
    margin-top: -4px;
    margin-bottom: -4px;
}

.page-component .table td input,
.page-component .table td select,
.page-component .table th input,
.page-component .table th select {
    margin-top: -4px;
    margin-bottom: -4px;
}

.page-component .table td input[type=checkbox],
.page-component .table td input[type=radio],
.page-component .table th input[type=checkbox],
.page-component .table th input[type=radio] {
    margin: 3px 0 0 4px !important;
    min-height: auto;
}

.page-component .table td .right,
.page-component .table td .r,
.page-component .table th .right,
.page-component .table th .r {
    text-align: right;
    float: inherit !important;
}

.page-component .table th {
    font-size: 9pt;
    line-height: 14px;
    color: #505c6d;
    font-weight: 300;
}

.page-component .table td {
    vertical-align: top;
}

.page-component .table th.center,
.page-component .table td.center {
    text-align: center;
}

.page-component .table td.tdsym {
    padding-top: 5px;
    padding-bottom: 2px;
    text-align: center;
}

.page-component .table td.btn,
.page-component .table td.icon {
    padding-top: 6px;
    text-align: center;
}

.page-component .table thead {
    /* fix position on scrolling: */
    background-color: #f8f8f8;
    position: sticky;
    top: 0;
    z-index: 850;
}

.page-component .table thead.sticky {
    background-color: #e9e9e9;
}

.page-component .table thead.sticky th {
    color: #212121;
}

.page-component .table tbody {
    border-top: 1px solid #b9b9b9;
}

.page-component .table tbody tr.active {
    background-color: #b4e9ec !important;
}

.page-component .table tbody tr.group {
    background-color: #ebeced !important;
}

.page-component .table .not_editable {
    font-style: italic;
}

.pager .item {
    margin: 0;
    float: left;
    padding: 0;
    position: relative;
    top: 7px;
}

.pager .item .ms-Toggle {
    margin: 0;
}

/* table-helper */
#TableOutput {
    max-height: 472px;
    overflow-x: auto;
    padding-bottom: 0;
}

#TableOutputAdd {
    padding-top: 5px;
}

#sub_Title {
    font-size: 16px;
    font-weight: 400;
}

.hl_pager {
    padding-bottom: 0 !important;
}

.hl_pager h2 {
    width: 80%;
    display: inline-block;
}

.hl_pager .pager,
.hl_pager .page-toolbar {
    float: right;
    width: 19%;
    height: 33px;
    border-left: 0;
}

.hl_pager .pagepicker {
    margin-top: 6px;
    float: right;
    padding-right: 5px;
}

.hl_pager .next,
.hl_pager .back {
    margin: 6px 0 0 4px;
    float: right;
    width: 44px;
    height: 22px;
}

.hl_pager .page-toolbar {
    padding-left: 0;
    margin: 0;
}

.hl_pager .page-toolbar .item {
    float: right;
}

/* col with DIFferent action */
td.dif:hover {
    background-color: #f9f9f9 !important;
    cursor: default;
}

td.ico,
td.btn {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

td.btn .svg {
    margin: 0 !important;
}

th.col_button {
    width: 44px;
}

td.r.btn input {
    margin-right: 4px !important;
}

.page .page-component .table tbody tr.clickable,
tbody tr.click {
    cursor: pointer;
}

.page .page-component .table tbody tr.movable,
tbody tr.move {
    cursor: -webkit-grab;
    cursor:         grab;
}

.page .page-component .table tfoot .toolbar {
    padding: 0;
    background-color: #e5ebe6;
}

.page .page-component .table tfoot .toolbar img {
    float: left;
}

.page .page-component .table tfoot .toolbar .item {
    position: relative;
    float: left;
    width: auto;
    height: 23px;
    min-width: 166px;
    margin: 5px;
    border: 1px solid #ffffff;
    line-height: 21px;
    text-align: center;
    font-weight: bold;
    color: #2650ac;
    padding-left: 44px;
    padding-right: 44px;
}

.page .page-component .table tfoot .toolbar .item .item:hover {
    /* background-color: #FFF;  */
    background-color: inherit;
}

.page .page-component .table tfoot .toolbar .item .item.active {
    background-color: #ffeea5;
    border-color: #ffbf3c;
}

.page .page-component .table tfoot .toolbar a {
    color: inherit;
    text-decoration: none;
}

.page .page-component .table tfoot .toolbar .input-submit {
    float: right;
    margin: 5px;
}

/* d...deleted */
tr.lvl0d {
    color: #be5757 !important;
}

tr.lvl0d td {
    color: #be5757 !important;
}

td.lvl0d {
    color: #be5757 !important;
}

tr.lvl1d {
    background-color: #f2b0b0;
}

tr.lvl2d {
    background-color: #e17e7e;
}

tr.lvl3d {
    background-color: #be5757;
}

tr.cur {
    background-color: #e5ebe6;
}

tr.org,
td.chg {
    background-color: #f3f2ea;
}

tr.i {
    font-style: italic;
}

/* set max-height,overflow,display to fix position on scrolling: */
.sticky_table {
    width: 100%;
    max-height: 750px;
    overflow: auto;
    display: inline-block;
    border-top: 2px solid #515c6c;
    border-bottom: 1px solid #515c6c;
}

div::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

div::-webkit-scrollbar-track {
    background: #efefef;
}

div::-webkit-scrollbar-thumb {
    background: #aaaaaa;
}

div::-webkit-scrollbar-thumb:hover {
    background: #aaaaaa;
}

.colorbox {
    width: 16px;
    height: 16px;
    margin-top: 1px;
}

.colorbox .bordered {
    border: 1px solid #808080;
}

/* page-dyn */
.page-dyn .box_l {
    float: left;
    width: 48%;
    margin-right: 22px;
    padding-bottom: 4px;
}

.page-dyn .box_r {
    float: left;
    width: 48%;
    margin-right: 0;
    padding-bottom: 4px;
}

.page-dyn .page-add .top {
    min-height: 28px;
}

/* ###
###### Box Groups
###
 */
.box-group {
    display: flex;
    flex: 1 auto;
    width: calc(100vw - 66px);
    min-width: 1100px;
}

.box-group form {
    display: flex;
}

.box-group .box {
    width: 100%;
    margin-right: 22px;
}

.box-group .box h4 {
    border-bottom: 1px solid #d3d6da;
    padding-bottom: 4px;
    font-size: 10pt;
    font-weight: 600;
    margin: 8px 0 4px 0;
}

.box-group .box .item {
    width: 100%;
    margin-bottom: 4px;
    background-image: url(../img/icons/dots.svg?v1);
    background-repeat: repeat-x;
    background-size: 9px 2px;
    background-position: left 16px;
}

.box-group .box .item label {
    float: left;
    margin-right: 2%;
    font-size: 10pt;
    padding: 7px 1% 0 0;
    max-width: 32%;
    background-color: #f8f8f8;
}

.box-group .box .item label .sym-state {
    margin-top: -2px;
}

.box-group .box .item div.wrap {
    width: 66%;
    padding-left: 1%;
    float: right;
    font-weight: 300;
    background-color: #f8f8f8;
    min-height: 29px;
    font-size: 10.5pt;
    line-height: 14pt;
    margin: 0;
}

.box-group .box .item input,
.box-group .box .item select,
.box-group .box .item textarea {
    width: 100%;
}

.box-group .box .item input:disabled,
.box-group .box .item select:disabled,
.box-group .box .item textarea:disabled {
    opacity: 1;
    border: 0;
}

.box-group .box .item input[type='checkbox'] {
    width: auto;
    float: left;
    margin-right: 8px;
}

.box-group .box .item input[type='submit'],
.box-group .box .item input[type='button'] {
    margin-top: 8px;
    min-width: 32%;
}

.box-group .box .item input[type=file] {
    background: #ffff;
}

.box-group .box .item.sub-hl {
    background-image: url(../img/icons/line.svg?v1);
    min-height: 29px;
}

.box-group .box .item.sub-hl label {
    font-weight: 600;
}

.box-group .box .item.sub-hl div.wrap {
    background-color: transparent !important;
}

.box-group .box .item.text div.wrap {
    padding: 7px 8px 0 1%;
}

.box-group .box .item.infobar {
    background-image: none;
    background-color: #b2e9ed !important;
    min-height: 32px;
    padding: 7px 8px;
}

.box-group .box .item.infobar label,
.box-group .box .item.infobar .wrap {
    background-color: #b2e9ed !important;
}

.box-group .box .item.info .wrap {
    background-color: #b2e9ed !important;
    padding-top: 5px;
}

.box-group .box .item.info .wrap a {
    color: #00686f;
}

.box-group .box .item.info .wrap a:hover {
    text-decoration: underline;
}

.overlay .box-group,
.page-add .box-group {
    width: 100%;
    min-width: 784px;
}

.overlay .box-group label,
.overlay .box-group div.wrap,
.page-add .box-group label,
.page-add .box-group div.wrap {
    background-color: #ffffff !important;
}

#info_System .box-group,
.plantool-system-info .box-group {
    min-width: 100%;
}

.plantool-system-info {
    height: auto !important;
    min-height: 400px;
}

.plantool-system-info .box .item {
    margin: 0 0 4px;
    padding: 0;
}

/* ###
######
###### Form Classes
######
### */
form .grid-height-1 {
    height: 18px;
}

input,
select,
textarea {
    padding: 4px;
    border: 1px solid #ababab;
    font-size: 10.5pt;
    min-height: 29px;
    -webkit-border-radius: 0;
    box-shadow: none;
    outline: none;
}

input {
    padding-left: 8px;
}

input:disabled,
select:disabled,
textarea:disabled {
    background-color: #e5e7e9;
    border: 0;
}

input:hover,
select:hover,
textarea:hover {
    border: 1px solid #00b7c3;
}

input:focus,
select:focus,
textarea:focus {
    border: 1px solid #008489;
}

input[type=checkbox] {
    min-height: auto;
}

input[type=submit],
input[type=button],
input[type=reset] {
    height: 28px;
    border: 1px solid #888a86;
    border-radius: 2px;
    background-color: #ffffff;
    color: #212121;
    font-weight: 600;
    cursor: pointer;
    padding: 0 20px;
    width: auto;
    min-width: 51px;
    margin-right: 8px;
}

input[type=submit]:hover,
input[type=button]:hover,
input[type=reset]:hover {
    background-color: #f6f7f8;
}

.input-submit.active {
    background-color: #ffeea5;
    border-color: #ffbf3c;
}

.input-checkbox {
    margin-right: 5px;
}

.input-textarea.r2 {
    height: 33px;
}

.input-textarea.r3 {
    height: 49px;
}

.input-textarea.r6 {
    height: 86px;
}

.input-textarea.r7 {
    height: 96px;
}

.input-file.grid-height-1 {
    height: 24px;
}

.form_block {
    float: left;
}

.form_block.left {
    width: 50%;
}

.form_block.right {
    width: 45%;
}

/* form-row */
.form_row {
    min-height: 25px;
    overflow: visible;
    height: auto;
}

.form_row select {
    padding-top: 3px;
    height: 23px;
    -webkit-appearance: menulist-button;
}

.form_row select[multiple='multiple'] {
    height: 66px;
}

.form_row select.height_3 {
    height: 89px;
}

.form_row .label,
.form_row .output,
.form_row label {
    padding: 8px 5px 0 5px;
}

.form_row .checkbox label {
    display: inline-block;
    font-size: 10px !important;
    vertical-align: middle;
    padding-top: 0px !important;
}

.form_row .checkboxes-wrapper {
    overflow: visible !important;
    height: auto !important;
}

.form_row .checkboxes {
    /*padding: 0 !important;*/
}

.form_row .checkbox {
    /*padding-top: 5px;*/
    min-height: 29px !important;
    overflow: visible !important;
    height: auto !important;
}

.form_row .input-checkbox {
    margin-top: 8px;
}

/* plantool */
.plantool {
    padding: 0 5.5px;
}

.plantool h2 {
    font-size: 13.5pt !important;
    margin-top: 14px;
    border-bottom: 2px solid #515c6c;
}

.plantool h3 {
    font-size: 13.5pt;
    margin-top: 22px !important;
}

.plantool .page-component {
    padding: 0;
}

.plantool .page-component .table {
    border-top: 1px solid #515c6c;
}

.plantool .page-toolbar {
    margin-left: 0;
    margin-right: 0;
}

.plantool:after {
    content: '';
    display: block;
    clear: both;
}

.plantool ~ .page-toolbar {
    margin-bottom: 0;
}

#plantool-left,
.plantool-viewport,
.plantool-system-info {
    float: left;
    width: 35%;
    box-sizing: border-box;
    padding: 0 5.5px;
    height: calc(100vh - 178px);
    margin-bottom: 11px;
}

.page-filter.open ~ .plantool #plantool-left,
.page-filter.open ~ .plantool .plantool-viewport {
    height: calc(100vh - 308px);
    transition: all 0.01s;
}

.page-filter.open ~ .plantool .plantool-structure {
    height: calc(100vh - 330px);
}

.plantool-structure,
.plantool-legend {
    float: left;
    overflow: auto;
    width: 100%;
    height: calc(100vh - 192px);
}

.plantool-legend {
    height: 22px;
}

.plantool-viewport {
    width: 65%;
}

.plantool-alignment,
.plantool-icons {
    float: right;
    margin: 15px 5px 3px;
}

.plantool-alignment .svg,
.plantool-icons .svg {
    vertical-align: middle;
    margin-right: 5px;
}

#PlaeneAnzeigenFilterSub {
    overflow: auto;
    height: 44px;
    display: block;
    margin-bottom: 0;
}

#myDrawing {
    height: 100%;
    /* border:1px solid #b6b8ba; */
    box-sizing: border-box;
    border: 0;
    background-color: #ffffff;
}

.plantool.compact {
    padding: 0 33px;
    /*pointer-events: none;*/
}

.plantool.compact #plantool-left {
    display: none;
}

.plantool.compact .plantool-viewport {
    width: 100%;
    padding: 0;
    height: 400px;
}

#search_minimized {
    /* background-color: #F3F3ED;
      border-left: 11px solid #FFFFFF; */
    background-color: inherit;
    border-left: 0;
    float: right;
    height: 33px;
    margin-right: 11px;
    position: relative;
    top: -44px;
    width: 55px;
    z-index: 50;
}

#search_minimized .sym {
    margin: 0;
}

/* helpers */
.hidden {
    display: none;
}

.clear,
.clb {
    clear: both;
}

.s {
    font-size: 9px;
}

.inactive {
    color: #808080;
}

.err {
    background-color: #ffb99a !important;
}

.inf {
    background-color: #b2e9ed !important;
}

.suc {
    background-color: #d5f0c1 !important;
}

.astat1 {
    background-color: #37d1bf !important;
}

.astat2 {
    background-color: #53db78 !important;
}

.astat3 {
    background-color: #5d9bff !important;
}

/* overlay */
/* overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-color:rgba(192,193,194,0.5); */
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    opacity: 0;
}

.overlay .overlay-wrapper {
    position: relative;
    /*margin-top:66px;
          width:800px;
          height:auto;*/
    /* box-shadow: 0 0 2px #111; */
    box-shadow: none;
    background: url(../js/overlay/loader.gif) no-repeat center center #ffffff;
    opacity: 0;
    height: calc(100% - 48px);
    margin: 48px 120px 0;
    width: auto !important;
    min-width: 916px;
}

.overlay .overlay-wrapper .overlay-title {
    /*  height:22px;
              background-color:#efeff0;
              border-bottom: 1px solid #797a7c; */
    background-color: inherit;
    border-bottom: 0;
    height: 72px;
    padding-top: 32px;
    color: #505c6d;
}

.overlay .overlay-wrapper .overlay-title .title {
    float: left;
    height: 22px;
    /* margin-left:11px; */
    margin-left: 66px;
    margin-right: 11px;
    line-height: 22px;
}

.overlay .overlay-wrapper .overlay-title .icon-close {
    margin-right: 55px;
}

.overlay .overlay-wrapper .page {
    margin-left: 44px;
    margin-right: 44px;
}

.overlay .overlay-wrapper .page h2 {
    border-bottom: 1px solid #515c6c;
    margin: 22px 0 11px 0;
}

.overlay .overlay-wrapper .page h3 {
    border-bottom: 1px solid #515c6c;
    margin-bottom: 11px;
}

.overlay .overlay-wrapper .page .page-filter {
    margin: 0 0 40px 0;
}

.overlay .overlay-wrapper .page .page-toolbar {
    margin: 44px 0 22px 0;
}

.overlay .overlay-wrapper .overlay-content {
    padding: 11px;
    min-height: 176px;
    background-color: #ffffff;
    opacity: 0;
    /*max-height:600px;*/
    overflow-y: auto;
    height: calc(100% - 115px);
    /* 100% minus overlay-title */
}

.overlay .page-add {
    /*margin: 0 0 11px 0;*/
    padding-bottom: 5px;
}

.overlay .page-add .icon {
    height: 28px;
}

.overlay .page-add .page-toolbar .item {
    min-height: 22px;
    margin: 5px 0 0 0;
}

.overlay .page-add .page-toolbar .item .label {
    padding-top: 5px;
}

.overlay .page-add .page-toolbar .item .input {
    padding: 0;
    min-height: 23px;
}

.overlay .page-add .page-toolbar .item .input.grid-height-1 {
    height: auto;
    min-height: 23px;
}

.overlay .page-add .page-toolbar .item.form_row {
    margin-right: 11px;
}

.overlay .margin_bottom_small {
    margin-bottom: 0 !important;
}

.overlay .page-filter {
    /*border-top: 1px solid #515C6C;*/
}

.overlay-content img {
    max-width: 260px;
}

.overlay .page-add .item .label,
.page-add .box_compact .item .output {
    padding-top: 0;
    height: auto;
    min-height: 22px;
    margin-bottom: 0;
}

.ui-autocomplete {
    z-index: 1100 !important;
}

/* icons */
.svg {
    display: inline-block;
    height: 40px;
    width: 40px;
    background-image: url(../img/icons/icons.svg?v3);
    background-repeat: no-repeat;
    cursor: pointer;
}

.svg.disabled {
    opacity: 0.25;
}

.svg.icon-marker {
    width: 22px;
    height: 22px;
    background-position: -9px -9px;
}

.svg.icon-move {
    background-position: -40px 0px;
}

.svg.icon-settings {
    background-position: -80px 0px;
}

.svg.icon-exit {
    background-position: -160px 0px;
}

.svg.icon-exit:hover {
    background-color: #d4343d;
}

.svg.icon-print {
    background-position: -120px 0px;
}

.svg.icon-print:hover {
    background-color: #404040;
}

.svg.icon-close {
    position: absolute;
    right: 0;
    background-position: -200px 0px;
}

.svg.icon-plan {
    width: 22px;
    height: 22px;
    background-position: -289px -9px;
}

.svg.icon-hint {
    width: 22px;
    height: 22px;
    background-position: -329px -9px;
}

.svg.icon-hint.red {
    filter: invert(44%) sepia(16%) saturate(1279%) hue-rotate(314deg) brightness(98%) contrast(120%);
}

.svg.icon-stopwatch {
    width: 22px;
    height: 22px;
    background-position: -370px -9px;
}

.svg.icon-calendar {
    width: 22px;
    height: 22px;
    background-position: -410px -9px;
}

.svg.icon-align-bottom {
    width: 22px;
    height: 22px;
    background-position: -450px -9px;
    filter: invert(29%) sepia(82%) saturate(1431%) hue-rotate(157deg) brightness(93%) contrast(101%);
}

.svg.icon-align-top {
    width: 22px;
    height: 22px;
    background-position: -490px -9px;
    filter: invert(29%) sepia(82%) saturate(1431%) hue-rotate(157deg) brightness(93%) contrast(101%);
}

.svg.icon-align-left {
    width: 22px;
    height: 22px;
    background-position: -530px -9px;
    filter: invert(29%) sepia(82%) saturate(1431%) hue-rotate(157deg) brightness(93%) contrast(101%);
}

.svg.icon-align-right {
    width: 22px;
    height: 22px;
    background-position: -570px -9px;
    filter: invert(29%) sepia(82%) saturate(1431%) hue-rotate(157deg) brightness(93%) contrast(101%);
}

.svg.icon-align-horizontal {
    width: 22px;
    height: 22px;
    background-position: -610px -9px;
    filter: invert(29%) sepia(82%) saturate(1431%) hue-rotate(157deg) brightness(93%) contrast(101%);
}

.svg.icon-align-vertical {
    width: 22px;
    height: 22px;
    background-position: -650px -9px;
    filter: invert(29%) sepia(82%) saturate(1431%) hue-rotate(157deg) brightness(93%) contrast(101%);
}

.svg.icon-multiselect {
    width: 22px;
    height: 22px;
    background-position: -690px -9px;
    filter: invert(29%) sepia(82%) saturate(1431%) hue-rotate(157deg) brightness(93%) contrast(101%);
}

.svg.icon-undo {
    width: 22px;
    height: 22px;
    background-position: -730px -9px;
    filter: invert(29%) sepia(82%) saturate(1431%) hue-rotate(157deg) brightness(93%) contrast(101%);
}

.svg.icon-redo {
    width: 22px;
    height: 22px;
    background-position: -770px -9px;
    filter: invert(29%) sepia(82%) saturate(1431%) hue-rotate(157deg) brightness(93%) contrast(101%);
}

.svg.icon-move-multiple {
    width: 22px;
    height: 22px;
    background-position: -50px -9px;
    filter: invert(29%) sepia(82%) saturate(1431%) hue-rotate(157deg) brightness(93%) contrast(101%);
}

.svg.icon-lock-closed {
    width: 22px;
    height: 22px;
    background-position: -810px -9px;
    filter: invert(29%) sepia(82%) saturate(1431%) hue-rotate(157deg) brightness(93%) contrast(101%);
}

.svg.icon-lock-open {
    width: 22px;
    height: 22px;
    background-position: -850px -9px;
    filter: invert(29%) sepia(82%) saturate(1431%) hue-rotate(157deg) brightness(93%) contrast(101%);
}

.svg.icon-photo {
    width: 22px;
    height: 22px;
    background-position: -890px -9px;
}

.svg.icon-sketch {
    width: 22px;
    height: 22px;
    background-position: -930px -9px;
}

.svg.icon-note {
    width: 22px;
    height: 22px;
    background-position: -970px -9px;
}

.svg.icon-history {
    width: 22px;
    height: 22px;
    background-position: -1010px -9px;
}

.svg.icon-delete {
    width: 22px;
    height: 22px;
    background-position: -1050px -9px;
}

.svg.icon-deactivate {
    width: 22px;
    height: 22px;
    background-position: -1090px -9px;
}

/* symbols */
.sym,
.sym-action,
.sym-state {
    float: left;
    margin-left: -40px;
    display: inline-block;
    height: 30px;
    width: 40px;
    background-image: url(../img/icons/icons.svg?v4);
    background-repeat: no-repeat;
    margin-top: -1px;
}

.sym.sym-inline {
    margin: 0;
}

.sym.sym-visible {
    float: left;
    margin: -2px 0 0 0;
    width: 22px;
    height: 22px;
    background-position: -9px -49px;
}

.sym.sym-invisible {
    float: left;
    margin: -2px 0 0 0;
    width: 22px;
    height: 22px;
    background-position: -49px -49px;
}

.sym.sym-checked {
    float: left;
    margin: -2px 0 0 0;
    width: 22px;
    height: 22px;
    background-position: -969px -49px;
}

.sym.sym-toolbar {
    background-position: -120px -44px;
    display: none;
}

.sym.sym-filter,
.sym.sym-filter-lnk {
    background-position: -160px -44px;
}

.sym.sym-filter-lnk {
    filter: invert(29%) sepia(82%) saturate(1431%) hue-rotate(157deg) brightness(93%) contrast(101%);
}

.sym.sym-plus {
    background-position: -200px -44px;
    margin-top: 27px;
}

.sym.sym-edit {
    background-position: -240px -44px;
    margin-top: 27px;
}

.sym.sym-add {
    margin-top: 21px;
}

.sym.sym-stopwatch {
    background-position: -280px -44px;
}

.sym.sym-calendar {
    background-position: -320px -44px;
}

.sym.sym-folder {
    cursor: pointer;
    margin: -4px 4px 0 0;
    width: 20px;
    height: 22px;
    background-position: -410px -49px;
}

.sym.sym-folder-open {
    cursor: pointer;
    margin: -4px 4px 0 0;
    width: 20px;
    height: 22px;
    background-position: -450px -49px;
}

.sym.sym-document {
    margin: -4px 4px 0 0;
    width: 20px;
    height: 22px;
    background-position: -490px -49px;
}

.sym.sym-link {
    margin: -4px 4px 0 0;
    width: 20px;
    height: 22px;
    background-position: -530px -49px;
}

.sym.sym-up {
    background-position: -520px -44px;
}

.sym.sym-down {
    background-position: -560px -44px;
}

.sym.sym-first,
.sym.sym-first-inactive {
    margin-left: 0;
    width: 20px;
    background-position: -650px -44px;
}

.sym.sym-last,
.sym.sym-last-inactive {
    margin-left: 0;
    width: 20px;
    background-position: -690px -44px;
}

.sym.sym-previous,
.sym.sym-previous-inactive {
    margin-left: 0;
    width: 20px;
    background-position: -730px -44px;
}

.sym.sym-next,
.sym.sym-next-inactive {
    margin-left: 0;
    width: 20px;
    background-position: -770px -44px;
}

.sym.sym-first-inactive,
.sym.sym-last-inactive,
.sym.sym-previous-inactive,
.sym.sym-next-inactive {
    opacity: 0.4;
}

.sym-action {
    float: none;
    margin: 0;
    width: 22px;
    height: 20px;
    background-image: url(../img/icons/states_action.svg?v1);
}

.sym-action.action-3 {
    background-position: -49px -10px;
}

.sym-action.action-2 {
    background-position: -89px -10px;
}

.sym-action.action-1 {
    background-position: -129px -10px;
}

.sym-action.action-0,
.sym-action.action-4 {
    background-position: -9px -10px;
}

.sym-state {
    float: none;
    margin: 0;
    width: 22px;
    height: 20px;
    background-image: url(../img/icons/states_system.svg?v1);
}

.sym-state.state-3 {
    background-position: -49px -10px;
}

.sym-state.state-2 {
    background-position: -89px -10px;
}

.sym-state.state-1 {
    background-position: -129px -10px;
}

.sym-state.state-4 {
    background-position: -169px -10px;
}

.sym.icon-add {
    width: 22px;
    height: 20px;
    margin-left: 0;
    background-position: -209px -50px;
    filter: invert(29%) sepia(82%) saturate(1431%) hue-rotate(157deg) brightness(93%) contrast(101%);
}

.sym.icon-edit {
    width: 22px;
    height: 20px;
    margin-left: 0;
    background-position: -249px -50px;
    filter: invert(29%) sepia(82%) saturate(1431%) hue-rotate(157deg) brightness(93%) contrast(101%);
}

.sym.icon-edit.inactive,
.sym.icon-deactivate.inactive,
.sym.icon-delete.inactive {
    opacity: 0.4;
}

.sym.icon-deactivate {
    width: 22px;
    height: 20px;
    margin-left: 0;
    background-position: -889px -49px;
    filter: invert(29%) sepia(82%) saturate(1431%) hue-rotate(157deg) brightness(93%) contrast(101%);
}

.sym.icon-delete {
    width: 22px;
    height: 20px;
    margin-left: 0;
    background-position: -849px -50px;
    filter: invert(29%) sepia(82%) saturate(1431%) hue-rotate(157deg) brightness(93%) contrast(101%);
}

.sym.icon-hint {
    width: 22px;
    height: 20px;
    margin-left: 0;
    background-position: -329px -9px;
    filter: invert(29%) sepia(82%) saturate(1431%) hue-rotate(157deg) brightness(93%) contrast(101%);
}

.sym.icon-info {
    width: 22px;
    height: 20px;
    margin-left: 0;
    background-position: -1009px -49px;
    filter: invert(29%) sepia(82%) saturate(1431%) hue-rotate(157deg) brightness(93%) contrast(101%);
}

.sym.icon-history {
    width: 22px;
    height: 20px;
    margin-left: 0;
    background-position: -1009px -9px;
    filter: invert(29%) sepia(82%) saturate(1431%) hue-rotate(157deg) brightness(93%) contrast(101%);
}

/* layout helper */
.right {
    float: right !important;
}

.r {
    text-align: right;
}

.r.btns {
    min-width: 72px;
}

.hint {
    color: #be5757;
}

.margin_t_1,
.m_t_1 {
    margin-top: 11px !important;
}

.margin_t_2,
.m_t_2 {
    margin-top: 22px !important;
}

.margin_l_05,
.m_l_05 {
    margin-left: 5px !important;
}

.margin_l_1,
.m_l_1 {
    margin-left: 11px !important;
}

.margin_l_2,
.m_l_2 {
    margin-left: 22px !important;
}

.margin_r_1,
.m_r_1 {
    margin-right: 11px !important;
}

.margin_r_2,
.m_r_2 {
    margin-right: 22px !important;
}

.margin_b_1,
.m_b_1 {
    margin-bottom: 11px !important;
}

.margin_b_0,
.m_b_0 {
    margin-bottom: 0 !important;
}

.margin_t_-1,
.m_t_-1 {
    margin-top: -11px !important;
}

.margin_0,
.m_0 {
    margin: 0 !important;
}

.m_t_05 {
    margin-top: 5px !important;
}

.m_r_05 {
    margin-right: 5px !important;
}

.m_r_0 {
    margin-right: 0 !important;
}

.m_l_0 {
    margin-left: 0 !important;
}

.m_l_4 {
    margin-left: 44px !important;
}

.fl_r {
    float: right !important;
}

.padding_t_0 {
    padding-top: 0 !important;
}

.p_b_0,
.padding_b_0 {
    padding-bottom: 0 !important;
}

.p_b_1,
.padding_b_1 {
    padding-bottom: 11px !important;
}

.no_padding {
    padding: 0 !important;
}

.p_t_1 {
    padding-top: 11px !important;
}

.p_t_2 {
    padding-top: 22px !important;
}

.p_l_0 {
    padding-left: 0 !important;
}

.p_l_05 {
    padding-left: 5px !important;
}

.p_l_1 {
    padding-left: 11px !important;
}

.p_l_4 {
    padding-left: 44px !important;
}

.p_r_1 {
    padding-right: 11px !important;
}
.p_r_2 {
    padding-right: 22px !important;
}

.p_l_4 {
    padding-left: 44px !important;
}

.p_r_0 {
    padding-right: 0 !important;
}

.r {
    text-align: right !important;
}

.l {
    text-align: left !important;
}

.c {
    text-align: center !important;
}

/* percent widths */
.w30p {
    float: left;
    width: calc(100% / 3 - 11px);
}

.w51p {
    float: left;
    width: calc(100% / 2);
}

.w50p {
    float: left;
    width: calc(100% / 2 - 11px);
}

.w49p {
    float: left;
    width: calc(100% / 2 - 22px);
}

.w60p {
    float: left;
    width: calc(100% / 3 * 2 - 22px);
}

/* generated with grid.php */
.grid-width-075 {
    width: 33px;
}

.grid-width-1 {
    width: 44px;
}

.grid-width-1_25 {
    width: 55px;
}

.grid-width-1_5 {
    width: 66px;
}

.grid-width-2 {
    width: 88px;
}

.grid-width-3 {
    width: 132px;
}

.grid-width-4 {
    width: 176px;
}

.grid-width-5 {
    width: 220px;
}

.grid-width-6 {
    width: 264px;
}

.grid-width-7 {
    width: 308px;
}

.grid-width-8 {
    width: 352px;
}

.grid-width-9 {
    width: 396px;
}

.grid-width-10 {
    width: 440px;
}

.grid-width-11 {
    width: 484px;
}

.grid-width-12 {
    width: 528px;
}

.grid-width-13 {
    width: 572px;
}

.grid-width-14 {
    width: 616px;
}

.grid-width-15 {
    width: 660px;
}

.grid-width-16 {
    width: 704px;
}

.grid-width-17 {
    width: 748px;
}

.grid-width-18 {
    width: 792px;
}

.grid-width-19 {
    width: 836px;
}

.grid-width-20 {
    width: 880px;
}

.grid-width-21 {
    width: 924px;
}

.grid-width-22 {
    width: 968px;
}

.grid-width-23 {
    width: 1012px;
}

.grid-width-24 {
    width: 1056px;
}

.grid-width-25 {
    width: 1100px;
}

.grid-width-26 {
    width: 1144px;
}

.grid-min-width-1 {
    min-width: 44px;
}

.grid-min-width-2 {
    min-width: 88px;
}

.grid-min-width-3 {
    min-width: 132px;
}

.grid-min-width-4 {
    min-width: 176px;
}

.grid-min-width-5 {
    min-width: 220px;
}

.grid-min-width-6 {
    min-width: 264px;
}

.grid-min-width-7 {
    min-width: 308px;
}

.grid-min-width-8 {
    min-width: 352px;
}

.grid-min-width-9 {
    min-width: 396px;
}

.grid-min-width-10 {
    min-width: 440px;
}

.grid-min-width-11 {
    min-width: 484px;
}

.grid-min-width-12 {
    min-width: 528px;
}

.grid-min-width-13 {
    min-width: 572px;
}

.grid-min-width-14 {
    min-width: 616px;
}

.grid-min-width-15 {
    min-width: 660px;
}

.grid-min-width-16 {
    min-width: 704px;
}

.grid-min-width-17 {
    min-width: 748px;
}

.grid-min-width-18 {
    min-width: 792px;
}

.grid-min-width-19 {
    min-width: 836px;
}

.grid-min-width-20 {
    min-width: 880px;
}

.grid-min-width-21 {
    min-width: 924px;
}

.grid-min-width-22 {
    min-width: 968px;
}

.grid-min-width-23 {
    min-width: 1012px;
}

.grid-min-width-24 {
    min-width: 1056px;
}

.grid-min-width-25 {
    min-width: 1100px;
}

.grid-min-width-26 {
    min-width: 1144px;
}

.grid-min-height-1 {
    min-height: 33px;
}

.grid-height-1 {
    height: 33px;
}

.grid-height-2 {
    height: 66px;
}

.grid-height-3 {
    height: 99px;
}

.grid-height-4 {
    height: 132px;
}

.grid-height-5 {
    height: 165px;
}

.grid-height-6 {
    height: 198px;
}

.grid-height-7 {
    height: 231px;
}

.grid-height-8 {
    height: 264px;
}

.grid-height-9 {
    height: 297px;
}

.grid-height-10 {
    height: 330px;
}

.grid-min-height-1 {
    min-height: 33px;
}

.grid-min-height-2 {
    min-height: 66px;
}

.grid-min-height-3 {
    min-height: 99px;
}

.grid-min-height-4 {
    min-height: 132px;
}

.grid-min-height-5 {
    min-height: 165px;
}

.grid-min-height-6 {
    min-height: 198px;
}

.grid-min-height-7 {
    min-height: 231px;
}

.grid-min-height-8 {
    min-height: 264px;
}

.grid-min-height-9 {
    min-height: 297px;
}

.grid-min-height-10 {
    min-height: 330px;
}

.grid-width-percentage-1 {
    width: 1%;
}

.grid-width-percentage-2 {
    width: 2%;
}

.grid-width-percentage-3 {
    width: 3%;
}

.grid-width-percentage-4 {
    width: 4%;
}

.grid-width-percentage-5 {
    width: 5%;
}

.grid-width-percentage-6 {
    width: 6%;
}

.grid-width-percentage-7 {
    width: 7%;
}

.grid-width-percentage-8 {
    width: 8%;
}

.grid-width-percentage-9 {
    width: 9%;
}

.grid-width-percentage-10 {
    width: 10%;
}

.grid-width-percentage-11 {
    width: 11%;
}

.grid-width-percentage-12 {
    width: 12%;
}

.grid-width-percentage-13 {
    width: 13%;
}

.grid-width-percentage-14 {
    width: 14%;
}

.grid-width-percentage-15 {
    width: 15%;
}

.grid-width-percentage-16 {
    width: 16%;
}

.grid-width-percentage-17 {
    width: 17%;
}

.grid-width-percentage-18 {
    width: 18%;
}

.grid-width-percentage-19 {
    width: 19%;
}

.grid-width-percentage-20 {
    width: 20%;
}

.grid-width-percentage-21 {
    width: 21%;
}

.grid-width-percentage-22 {
    width: 22%;
}

.grid-width-percentage-23 {
    width: 23%;
}

.grid-width-percentage-24 {
    width: 24%;
}

.grid-width-percentage-25 {
    width: 25%;
}

.grid-width-percentage-26 {
    width: 26%;
}

.grid-width-percentage-27 {
    width: 27%;
}

.grid-width-percentage-28 {
    width: 28%;
}

.grid-width-percentage-29 {
    width: 29%;
}

.grid-width-percentage-30 {
    width: 30%;
}

.grid-width-percentage-31 {
    width: 31%;
}

.grid-width-percentage-32 {
    width: 32%;
}

.grid-width-percentage-33 {
    width: 33%;
}

.grid-width-percentage-34 {
    width: 34%;
}

.grid-width-percentage-35 {
    width: 35%;
}

.grid-width-percentage-36 {
    width: 36%;
}

.grid-width-percentage-37 {
    width: 37%;
}

.grid-width-percentage-38 {
    width: 38%;
}

.grid-width-percentage-39 {
    width: 39%;
}

.grid-width-percentage-40 {
    width: 40%;
}

.grid-width-percentage-41 {
    width: 41%;
}

.grid-width-percentage-42 {
    width: 42%;
}

.grid-width-percentage-43 {
    width: 43%;
}

.grid-width-percentage-44 {
    width: 44%;
}

.grid-width-percentage-45 {
    width: 45%;
}

.grid-width-percentage-46 {
    width: 46%;
}

.grid-width-percentage-47 {
    width: 47%;
}

.grid-width-percentage-48 {
    width: 48%;
}

.grid-width-percentage-49 {
    width: 49%;
}

.grid-width-percentage-50 {
    width: 50%;
}

.grid-width-percentage-51 {
    width: 51%;
}

.grid-width-percentage-52 {
    width: 52%;
}

.grid-width-percentage-53 {
    width: 53%;
}

.grid-width-percentage-54 {
    width: 54%;
}

.grid-width-percentage-55 {
    width: 55%;
}

.grid-width-percentage-56 {
    width: 56%;
}

.grid-width-percentage-57 {
    width: 57%;
}

.grid-width-percentage-58 {
    width: 58%;
}

.grid-width-percentage-59 {
    width: 59%;
}

.grid-width-percentage-60 {
    width: 60%;
}

.grid-width-percentage-61 {
    width: 61%;
}

.grid-width-percentage-62 {
    width: 62%;
}

.grid-width-percentage-63 {
    width: 63%;
}

.grid-width-percentage-64 {
    width: 64%;
}

.grid-width-percentage-65 {
    width: 65%;
}

.grid-width-percentage-66 {
    width: 66%;
}

.grid-width-percentage-67 {
    width: 67%;
}

.grid-width-percentage-68 {
    width: 68%;
}

.grid-width-percentage-69 {
    width: 69%;
}

.grid-width-percentage-70 {
    width: 70%;
}

.grid-width-percentage-71 {
    width: 71%;
}

.grid-width-percentage-72 {
    width: 72%;
}

.grid-width-percentage-73 {
    width: 73%;
}

.grid-width-percentage-74 {
    width: 74%;
}

.grid-width-percentage-75 {
    width: 75%;
}

.grid-width-percentage-76 {
    width: 76%;
}

.grid-width-percentage-77 {
    width: 77%;
}

.grid-width-percentage-78 {
    width: 78%;
}

.grid-width-percentage-79 {
    width: 79%;
}

.grid-width-percentage-80 {
    width: 80%;
}

.grid-width-percentage-81 {
    width: 81%;
}

.grid-width-percentage-82 {
    width: 82%;
}

.grid-width-percentage-83 {
    width: 83%;
}

.grid-width-percentage-84 {
    width: 84%;
}

.grid-width-percentage-85 {
    width: 85%;
}

.grid-width-percentage-86 {
    width: 86%;
}

.grid-width-percentage-87 {
    width: 87%;
}

.grid-width-percentage-88 {
    width: 88%;
}

.grid-width-percentage-89 {
    width: 89%;
}

.grid-width-percentage-90 {
    width: 90%;
}

.grid-width-percentage-91 {
    width: 91%;
}

.grid-width-percentage-92 {
    width: 92%;
}

.grid-width-percentage-93 {
    width: 93%;
}

.grid-width-percentage-94 {
    width: 94%;
}

.grid-width-percentage-95 {
    width: 95%;
}

.grid-width-percentage-96 {
    width: 96%;
}

.grid-width-percentage-97 {
    width: 97%;
}

.grid-width-percentage-98 {
    width: 98%;
}

.grid-width-percentage-99 {
    width: 99%;
}

.grid-width-percentage-100 {
    width: 100%;
}

.grid-height-percentage-1 {
    height: 1%;
}

.grid-height-percentage-2 {
    height: 2%;
}

.grid-height-percentage-3 {
    height: 3%;
}

.grid-height-percentage-4 {
    height: 4%;
}

.grid-height-percentage-5 {
    height: 5%;
}

.grid-height-percentage-6 {
    height: 6%;
}

.grid-height-percentage-7 {
    height: 7%;
}

.grid-height-percentage-8 {
    height: 8%;
}

.grid-height-percentage-9 {
    height: 9%;
}

.grid-height-percentage-10 {
    height: 10%;
}

.grid-height-percentage-11 {
    height: 11%;
}

.grid-height-percentage-12 {
    height: 12%;
}

.grid-height-percentage-13 {
    height: 13%;
}

.grid-height-percentage-14 {
    height: 14%;
}

.grid-height-percentage-15 {
    height: 15%;
}

.grid-height-percentage-16 {
    height: 16%;
}

.grid-height-percentage-17 {
    height: 17%;
}

.grid-height-percentage-18 {
    height: 18%;
}

.grid-height-percentage-19 {
    height: 19%;
}

.grid-height-percentage-20 {
    height: 20%;
}

.grid-height-percentage-21 {
    height: 21%;
}

.grid-height-percentage-22 {
    height: 22%;
}

.grid-height-percentage-23 {
    height: 23%;
}

.grid-height-percentage-24 {
    height: 24%;
}

.grid-height-percentage-25 {
    height: 25%;
}

.grid-height-percentage-26 {
    height: 26%;
}

.grid-height-percentage-27 {
    height: 27%;
}

.grid-height-percentage-28 {
    height: 28%;
}

.grid-height-percentage-29 {
    height: 29%;
}

.grid-height-percentage-30 {
    height: 30%;
}

.grid-height-percentage-31 {
    height: 31%;
}

.grid-height-percentage-32 {
    height: 32%;
}

.grid-height-percentage-33 {
    height: 33%;
}

.grid-height-percentage-34 {
    height: 34%;
}

.grid-height-percentage-35 {
    height: 35%;
}

.grid-height-percentage-36 {
    height: 36%;
}

.grid-height-percentage-37 {
    height: 37%;
}

.grid-height-percentage-38 {
    height: 38%;
}

.grid-height-percentage-39 {
    height: 39%;
}

.grid-height-percentage-40 {
    height: 40%;
}

.grid-height-percentage-41 {
    height: 41%;
}

.grid-height-percentage-42 {
    height: 42%;
}

.grid-height-percentage-43 {
    height: 43%;
}

.grid-height-percentage-44 {
    height: 44%;
}

.grid-height-percentage-45 {
    height: 45%;
}

.grid-height-percentage-46 {
    height: 46%;
}

.grid-height-percentage-47 {
    height: 47%;
}

.grid-height-percentage-48 {
    height: 48%;
}

.grid-height-percentage-49 {
    height: 49%;
}

.grid-height-percentage-50 {
    height: 50%;
}

.grid-height-percentage-51 {
    height: 51%;
}

.grid-height-percentage-52 {
    height: 52%;
}

.grid-height-percentage-53 {
    height: 53%;
}

.grid-height-percentage-54 {
    height: 54%;
}

.grid-height-percentage-55 {
    height: 55%;
}

.grid-height-percentage-56 {
    height: 56%;
}

.grid-height-percentage-57 {
    height: 57%;
}

.grid-height-percentage-58 {
    height: 58%;
}

.grid-height-percentage-59 {
    height: 59%;
}

.grid-height-percentage-60 {
    height: 60%;
}

.grid-height-percentage-61 {
    height: 61%;
}

.grid-height-percentage-62 {
    height: 62%;
}

.grid-height-percentage-63 {
    height: 63%;
}

.grid-height-percentage-64 {
    height: 64%;
}

.grid-height-percentage-65 {
    height: 65%;
}

.grid-height-percentage-66 {
    height: 66%;
}

.grid-height-percentage-67 {
    height: 67%;
}

.grid-height-percentage-68 {
    height: 68%;
}

.grid-height-percentage-69 {
    height: 69%;
}

.grid-height-percentage-70 {
    height: 70%;
}

.grid-height-percentage-71 {
    height: 71%;
}

.grid-height-percentage-72 {
    height: 72%;
}

.grid-height-percentage-73 {
    height: 73%;
}

.grid-height-percentage-74 {
    height: 74%;
}

.grid-height-percentage-75 {
    height: 75%;
}

.grid-height-percentage-76 {
    height: 76%;
}

.grid-height-percentage-77 {
    height: 77%;
}

.grid-height-percentage-78 {
    height: 78%;
}

.grid-height-percentage-79 {
    height: 79%;
}

.grid-height-percentage-80 {
    height: 80%;
}

.grid-height-percentage-81 {
    height: 81%;
}

.grid-height-percentage-82 {
    height: 82%;
}

.grid-height-percentage-83 {
    height: 83%;
}

.grid-height-percentage-84 {
    height: 84%;
}

.grid-height-percentage-85 {
    height: 85%;
}

.grid-height-percentage-86 {
    height: 86%;
}

.grid-height-percentage-87 {
    height: 87%;
}

.grid-height-percentage-88 {
    height: 88%;
}

.grid-height-percentage-89 {
    height: 89%;
}

.grid-height-percentage-90 {
    height: 90%;
}

.grid-height-percentage-91 {
    height: 91%;
}

.grid-height-percentage-92 {
    height: 92%;
}

.grid-height-percentage-93 {
    height: 93%;
}

.grid-height-percentage-94 {
    height: 94%;
}

.grid-height-percentage-95 {
    height: 95%;
}

.grid-height-percentage-96 {
    height: 96%;
}

.grid-height-percentage-97 {
    height: 97%;
}

.grid-height-percentage-98 {
    height: 98%;
}

.grid-height-percentage-99 {
    height: 99%;
}

.grid-height-percentage-100 {
    height: 100%;
}

.site-loader {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1200;
    background-color: rgba(255, 255, 255, 0.5);
    background-image: url(../js/overlay/loader.gif);
    background-repeat: no-repeat;
    background-position: center center; }

body .ajax-loader {
    opacity: 0;
    transition: all 250ms ease-in;
    -moz-transition: all 250ms ease-in;
    -webkit-transition: all 250ms ease-in;
    -o-transition: all 250ms ease-in;
    visibility: hidden;
    z-index: 1000; }

body.loading .ajax-loader {
    opacity: 1;
    visibility: visible; }

.ajax-loader {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.5);
    background-image: url(../js/overlay/loader.gif);
    background-repeat: no-repeat;
    background-position: center center; }

/* overwriting fabric-js styles */
.ms-Toggle {
    margin-top: 7px;
    margin-bottom: 22px;
}

.ms-Toggle .label-after {
    padding: 0 !important;
    margin: -1px 5px 0;
    float: right;
    max-width: none !important;
}

.ms-Toggle .ms-Toggle-field.is-selected {
    background-color: #008489 !important;
    border-color: #008489 !important;
    margin: 0;
}

.ms-Toggle.is-disabled .ms-Toggle-field.is-selected {
    background-color: #ffffff !important;
    border-color: #c8c8c8 !important;
}

.fl_r.is-disabled {    
    color: #c8c8c8 !important;
    pointer-events: none;
}

.ms-Toggle-field {
    height: 18px;
    width: 44px;
    border: 1px solid #ababab;
    background-color: #ffffff !important;
}

.ms-Toggle-field.is-disabled {
    background-color: #f8f8f8 !important;
}

.ms-Toggle-field:hover {
    border-color: #00b7c3 !important;
}

.ms-Toggle-field:focus {
    border-color: #008489 !important;
}

.ms-DatePicker {
    float: right;
    width: 100%;
    margin-bottom: 0;
}

.ms-DatePicker input {
    float: none !important;
    width: 100% !important;
}

.ms-DatePicker .ms-DatePicker-picker {
    left: calc(100% - 440px);
}

.ms-DatePicker .ms-DatePicker-prevMonth,
.ms-DatePicker .ms-DatePicker-nextMonth {
    top: -2px;
}

.ms-DatePicker .ms-Icon--ChevronLeft {
    content: none;
    font-family: inherit;
    margin-left: 0;
    width: 20px;
    display: inline-block;
    height: 30px;
    background-image: url(../img/icons/icons.svg?v3);
    background-repeat: no-repeat;
    margin-top: -1px;
    background-position: -730px -44px;
}
.ms-Icon--ChevronLeft::before {
    content: none;
}

.ms-DatePicker .ms-Icon--ChevronRight {
    content: none;
    font-family: inherit;
    margin-left: 0;
    width: 20px;
    display: inline-block;
    height: 30px;
    background-image: url(../img/icons/icons.svg?v3);
    background-repeat: no-repeat;
    margin-top: -1px;
    background-position: -770px -44px;
}
.ms-Icon--ChevronRight::before {
    content: none;
}
.ms-DatePicker-picker--opened {
    z-index: 880;
}
/* highcharts */
.highcharts-figure {
    min-height: 400px;
}
.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

.overlay-content .page.charting {
    padding-top: 0;
    margin-top: -18px;
}
.overlay-content .page.charting h1 {
    margin-top: 0;
}