@charset "UTF-8";
@font-face {
    font-family: "Myriad W01 Regular";
    src: url("../fonts/admin/myriad.eot");
    src: url("../fonts/admin/myriad.ttf") format('truetype'), url("../fonts/admin/myriad.eot#iefix") format('embedded-opentype'), url("../fonts/admin/myriad.svg") format('svg'), url("../fonts/admin/myriad.woff") format('woff'), url("../fonts/admin/myriad.woff2") format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Myriad W01 Lt";
    src: url("../fonts/admin/myriadLight.eot");
    src: url("../fonts/admin/myriadLight.ttf") format('truetype'), url("../fonts/admin/myriadLight.eot#iefix") format('embedded-opentype'), url("../fonts/admin/myriadLight.svg") format('svg'), url("../fonts/admin/myriadLight.woff") format('woff'), url("../fonts/admin/myriadLight.woff2") format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Myriad W01 SmBd";
    src: url("../fonts/admin/myriadSmBd.eot");
    src: url("../fonts/admin/myriadSmBd.ttf") format('truetype'), url("../fonts/admin/myriadSmBd.eot#iefix") format('embedded-opentype'), url("../fonts/admin/myriadSmBd.svg") format('svg'), url("../fonts/admin/myriadSmBd.woff") format('woff'), url("../fonts/admin/myriadSmBd.woff2") format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* ==========================================================================
   Variables
   ========================================================================== */

:root {
    --ColorGrey0: #000000;
    --ColorGrey1: #25313F;
    --ColorGrey2: #909da5;
    --ColorGrey3: #bfc3c7;
    --ColorGrey4: #bfc3c7;
    --ColorGrey5: #eaeaea;
    --ColorGrey6: #f4f4f4;
    --ColorGrey7: #ffffff;
    --ColorDeco1: #0098ca;
    --ColorDeco2: #cc1880;
    --ColorDeco3: #0098ca;
    --ColorDeco4: #B5DBE8;
    --ColorDeco5: #05d890;
    --ColorDeco6: #fd9352;
    --ColorDeco7: #f2c65c;
    --ColorFalse: #cc1880;
    --ColorTrue: #05d890;
    --ColorTransparent: transparent;
    --ColorOverlayTransparent: rgba(37, 54, 63, 0.3);
    --ColorIcon: var(--ColorGrey0);
    --Font1: 'Myriad W01 Lt', arial, sans-serif;
    --Font2: 'Myriad W01 SmBd', arial, sans-serif;
    --Font3: 'Myriad W01 Regular', arial, sans-serif;
    --Font4: 'Myriad W01 Regular', arial, sans-serif;
    --Font5: 'Myriad W01 Regular', arial, sans-serif;
    --Font6: 'Myriad W01 Regular', arial, sans-serif;
    --FontSerif: 'Courier New', monospace, serif;
    --FontInputs: Arial, sans-serif;
    --FontIcons: 'Touchway';
    --FontSize1: 12px;
    --FontSize2: 14px;
    --FontSize3: 16px;
    --FontSize4: 21px;
    --FontSize5: 25px;
    --FontSize6: 36px;
    --FontSize7: 56px;
    --FontSize8: 50px;
    --FontSize9: 600px;
    --Radius0: 0;
    --Radius1: 100%;
    --Radius2: 0;
    --Radius3: 2px;
    --Radius4: 0;
    --Radius5: 0;
    --Line1: 1px solid var(--ColorGrey3);
    --Line2: 0px solid var(--ColorGrey3);
    --Line3: 1px solid var(--ColorGrey2);
    --LineBrick: 2px dotted var(--ColorGrey3);
    --Contour1: none;
    --Contour2: none;
    --Contour3: none;
    --Space05: 5px;
    --Space1: 10px;
    --Space2: 20px;
    --Space3: 30px;
    --Space4: 40px;
    --Space5: 50px;
    --Space6: 60px;
    --Space7: 70px;
    --Space8: 80px;
    --Space9: 90px;
    --Space10: 100px;
    --PageWidth: 100%;
    --PageHeight: 100%;
    --HeightHeader: 30px;
    --HeightFooter: 30px;
    --KeyboardOffset: -200px;
    --PageInnerWidth: 1460px;
    --ButtonWidth1: 120px;
    --ButtonHeight1: 120px;
    --BoxShadow1: none;
    --BoxShadow2: 5px 5px 15px #333333;
    --TransitionSpeed1: 0.3s;
    --IconArrowLeft: '0';
    --IconArrowRight: '1';
}

/* ----------------------------------------------
 * Reset
 * ----------------------------------------------
*/

* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

body.no-scroll,
html.no-scroll {
    overflow: hidden;
}

ul,
li {
    list-style: none;
}

printer {
    display: none;
}

/* ----------------------------------------------
 * Structure
 * ----------------------------------------------
*/

article {
    background-color: var(--ColorGrey5);
    background-size: cover;
    -webkit-transition: -webkit-transform var(--TransitionSpeed1) ease;
    transition: -webkit-transform var(--TransitionSpeed1) ease;
    transition: transform var(--TransitionSpeed1) ease;
    transition: transform var(--TransitionSpeed1) ease, -webkit-transform var(--TransitionSpeed1) ease;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    width: var(--PageWidth) !important;
    height: var(--PageHeight) !important;
    max-width: var(--PageWidth);
    max-height: var(--PageHeight);
}

body.open article {
    -webkit-transform: translate3d(0, var(--KeyboardOffset), 0);
    transform: translate3d(0, var(--KeyboardOffset), 0);
}

login {
    position: fixed;
    background-color: var(--ColorGrey7);
}

header {
    height: var(--HeightHeader);
    background-color: var(--ColorDeco1);
    padding: 0 var(--Space2);
    visibility: hidden;
}

header.visible {
    visibility: visible;
}

header.mmb {
    background-color: var(--ColorGrey1);
    height: 50px;
    padding: 0 var(--Space2) 0 0;
}

header>toggler {
    display: block;
    height: 100%;
    width: 50px;
    border-right: var(--Line3);
}

header admin-menu>.level-1>li {
    position: relative;
}

header admin-menu>.level-1>li>a {
    font-size: var(--FontSize3);
    font-family: var(--Font2);
    color: var(--ColorGrey2);
    padding: 0 var(--Space3);
    display: block;
    height: 100%;
    line-height: 50px;
    min-width: 100px;
    text-align: center;
    border-right: var(--Line3);
}

header admin-menu>.level-1>li>a:hover {
    color: var(--ColorGrey7);
}

header admin-menu>.level-1>li>ul {
    display: none;
    position: absolute;
    top: 100%;
    background: var(--ColorGrey1);
    min-width: calc(100% + 150px);
    z-index: 999;
    border-top: var(--Line3);
}

header admin-menu .level-2>li>a {
    display: block;
    padding: var(--Space1);
    border-bottom: var(--Line3);
}

header admin-menu .level-2>li>a:hover {
    background-color: var(--ColorGrey2);
    color: var(--ColorGrey7);
}

header admin-menu>.level-1>li:hover>ul {
    display: block;
}

header>.logo {
    width: 100px;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

header>toggler>i {
    font-size: 26px;
    color: var(--ColorGrey4);
    display: block;
    width: 100%;
    text-align: center;
    line-height: 50px;
}

header p,
header a {
    font-size: var(--FontSize2);
    color: var(--ColorGrey7);
    font-family: var(--Font3);
}

header a {
    margin-left: var(--Space2);
    cursor: pointer;
    font-family: var(--Font2);
}

header a:hover {
    color: var(--ColorGrey0);
}

header .logo img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

nav {
    padding: var(--Space5) 0 var(--Space3) 0;
}

nav>ul>li {
    display: inline-block;
}

nav a {
    font-size: var(--FontSize6);
    margin-right: var(--Space3);
}

nav a.selected {
    /* font-weight: bold; */
    color: var(--ColorDeco1);
}

filter-container {
    position: relative;
    height: 80px;
    z-index: 1;
}

filter {
    position: absolute;
    left: 0;
    top: 0;
    height: 0;
    -webkit-transition: all 218ms ease;
    transition: all 218ms ease;
}

filter.first {
    opacity: 0;
    height: 0;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
}

filter.second {
    opacity: 0;
    height: 0;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    background-color: var(--ColorDeco1);
    padding: 0 var(--Space2);
}

filter.second>.caption {
    color: var(--ColorGrey7);
    line-height: 40px;
    padding-right: var(--Space2);
    margin-right: var(--Space1);
    border-right: 1px solid var(--ColorGrey7);
}

filter .close,
filter .close:hover {
    font-size: var(--FontSize6);
    color: var(--ColorGrey7);
}

filter>div {
    margin-right: var(--Space1);
}

filter .filter-label {
    margin-right: var(--Space05);
}

filter>button,
filter>div>button {
    padding: 0 var(--Space05);
    font-size: 30px;
}

filter i {
    /* vertical-align: middle; */
}

filter .mobile-filter {
    margin-right: 0;
}

filter-container[type="filter-1"]>filter.first {
    opacity: 1;
    height: 100%;
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

filter-container[type="filter-2"]>filter.second {
    opacity: 1;
    height: 100%;
    overflow: visible;
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}

footer,
.footer,
admin-footer {
    padding: var(--Space1) var(--Space3);
}

footer .logo,
.footer .logo,
admin-footer .logo {
    height: 20px;
    width: auto;
    margin-right: var(--Space2);
}

main {
    padding: var(--Space1) var(--Space3) 0 var(--Space3);
    overflow: auto;
    position: relative;
}

main>section,
.section {
    background-color: var(--ColorGrey7);
    padding: var(--Space2);
    border: var(--Line1);
    width: 100%;
}

main>section {
    height: 100%;
    margin: auto;
}

main[type="box"]>section {
    overflow: auto;
    height: 100%;
}

main>section.no-scroll {
    overflow: hidden;
}

main[type="flow"] {
    padding: var(--Space5) var(--Space5) 0 var(--Space5);
}

main[type="flow"]>section {
    height: auto;
}

/* ----------------------------------------------
 * Skeleton
 * ----------------------------------------------
*/

.rows,
.cols,
[rows],
[cols] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.cols,
[cols] {
    width: 100%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.rows,
[rows] {
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.wrap,
[wrap] {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.rows>*,
.cols>*,
.auto,
[auto] {
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
}

.full-h,
[full-h] {
    height: 100%;
}

.wide,
[wide] {
    -ms-flex-preferred-size: 80%;
    flex-basis: 80%;
}

.thin,
[thin] {
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
}

.cols>.space,
.cols>[space] {
    width: var(--Space1);
}

.cols.with-space {
    margin-bottom: var(--Space2);
}

.rows>.space,
.rows>[space] {
    height: var(--Space1);
}

.flex,
[flex] {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.x2 {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
}

.x3 {
    -ms-flex-preferred-size: 33.33333333333%;
    flex-basis: 33.33333333333%;
}

.x4 {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
}

.x5 {
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
}

.x6 {
    -ms-flex-preferred-size: 16.66666666666%;
    flex-basis: 16.66666666666%;
}

.x7 {
    -ms-flex-preferred-size: 14.28571428571429%;
    flex-basis: 14.28571428571429%;
}

.x8 {
    -ms-flex-preferred-size: 12.5%;
    flex-basis: 12.5%;
}

.x9 {
    -ms-flex-preferred-size: 11.11111111111111%;
    flex-basis: 11.11111111111111%;
}

.x10 {
    -ms-flex-preferred-size: 10%;
    flex-basis: 10%;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
    .sm-x1 {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
    .sm-x2 {
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    }
    .sm-rows,
    [sm-srows] {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

/* ----------------------------------------------
 * Font styles
 * ----------------------------------------------
*/

h1 {
    font-family: var(--Font3);
    font-size: var(--FontSize6);
}

h2 {
    font-family: var(--Font1);
    font-size: var(--FontSize4);
}

h3 {
    font-family: var(--Font1);
    font-size: var(--FontSize3);
}

h4 {
    font-family: var(--Font1);
    font-size: var(--FontSize2);
}

h5 {
    font-family: var(--Font1);
    font-size: var(--FontSize1);
}

p,
.p,
figcaption {
    font-family: var(--Font3);
    font-size: var(--FontSize2);
}

p.placeholder,
.p.placeholder {
    color: var(--ColorGrey4);
}

legend {
    font-family: var(--Font1);
    font-size: var(--FontSize4);
    padding: var(--Space3) 0 var(--Space1);
    color: var(--ColorGrey0);
    text-transform: uppercase;
}

th {
    font-family: var(--Font1);
    font-size: var(--FontSize2);
    font-weight: normal;
    text-align: left;
}

td {
    font-family: var(--Font1);
    font-size: var(--FontSize2);
    font-weight: normal;
}

p.small,
small,
strong {
    font-family: var(--Font1);
    font-size: var(--FontSize2);
}

p.strong,
strong,
strong>*,
.strong>*,
.strong {
    font-weight: bold;
    font-family: var(--Font2);
}

p.small,
small {
    font-size: var(--FontSize1);
}

p.light {
    font-weight: normal;
}

a {
    text-decoration: none;
    font-family: var(--Font1);
    font-size: var(--FontSize2);
    color: var(--ColorGrey0);
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
    cursor: pointer;
}

a:hover {
    color: var(--ColorDeco1);
}

label,
.label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-family: var(--Font2);
    font-size: var(--FontSize2);
    /* cursor: pointer; */
    /* No select properties */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

label>.mandatory {
    color: var(--ColorFalse);
    padding-left: var(--Space05);
}

label.checkbox {
    line-height: 18px;
}

.active {
    color: var(--ColorDeco1);
}

.error {
    color: var(--ColorFalse);
}

.tag {
    background-color: var(--ColorGrey1);
    color: var(--ColorGrey7);
    padding: var(--Space05) var(--Space1);
    display: inline-block;
    margin-right: var(--Space2);
    margin-bottom: var(--Space1);
    border-radius: 4px;
}

.tag>* {
    line-height: var(--FontSize4);
}

.tag>p {
    float: left;
}

.tag>i {
    float: right;
    margin-left: var(--Space1);
    font-size: var(--FontSize5);
    cursor: move;
}

/* ----------------------------------------------
 * Table
 * ----------------------------------------------
*/

table-filter {
    display: block;
    padding-bottom: var(--Space1);
    user-select: none;
}

table-filter label {
    margin-right: var(--Space1);
    white-space: nowrap;
}

table-filter .from-to {
    min-width: 150px;
    padding: 0 var(--Space1);
}

table-filter .offsetLabel {
    min-width: 100px;
    text-align: center;
}

tableview {
    height: 100%;
    width: 100%;
    overflow: auto;
    position: relative;
}

tableview table tbody a {
    color: var(--ColorDeco1);
}

table,
.table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    /* transform-style: preserve-3d; */
}

table .flex {
    width: 100%;
}

table>thead {
    cursor: pointer;
}

table>thead>tr>th {
    background-color: var(--ColorGrey1);
    color: var(--ColorGrey7);
    padding: var(--Space05) var(--Space3) var(--Space05) var(--Space1);
    border-right: 1px solid var(--ColorGrey2);
    line-height: var(--Space3);
    position: relative;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

table>thead>tr>th>input[type="checkbox"] {
    background-color: var(--ColorTransparent);
}

table>thead>tr>th>i {
    position: absolute;
    right: var(--Space05);
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: var(--FontSize5);
}

table>tbody>tr {
    border-bottom: var(--Line1);
    background-color: var(--ColorTransparent);
    cursor: pointer;
}

table>tbody>tr:hover {
    background-color: var(--ColorGrey6);
}

table>tbody>tr.activeOnDevice {
    -webkit-animation: pulse 2s infinite;
    animation: pulse 2s infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

@-webkit-keyframes pulse {
    from {
        background-color: var(--ColorTransparent);
    }
    to {
        background-color: var(--ColorGrey3);
    }
}

@keyframes pulse {
    from {
        background-color: var(--ColorTransparent);
    }
    to {
        background-color: var(--ColorGrey3);
    }
}

table>tbody>tr>td {
    /* No select properties */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    line-height: var(--Space3);
    padding: var(--Space05) var(--Space2) var(--Space05) var(--Space1);
    vertical-align: top;
    border-right: 1px solid var(--ColorGrey6);
    position: relative;
}

table td.multi-edit,
table th.multi-edit {
    cursor: cell;
    width: var(--Space3);
    min-width: var(--Space3);
    vertical-align: middle;
    padding: 0 var(--Space1);
    line-height: 0;
}

table td.multi-edit {
    border-right: none;
    cursor: pointer;
}

table td .edit {
    position: absolute;
    right: var(--Space1);
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    font-weight: normal;
    font-size: var(--FontSize4);
    color: var(--ColorGrey2);
}

table td.delete,
table th.delete {
    width: var(--Space3);
    min-width: var(--Space3);
    padding: 0;
}

table td .text-center {
    text-align: center;
}

table>tbody>tr[multiEdit="true"] {
    background-color: var(--ColorGrey5);
}

table .badge-number input[type="text"] {
    max-width: 100px;
}

table>tbody>tr>td img {
    width: 200px;
    height: auto;
}

table a.remove {
    font-size: var(--FontSize5);
}

inline-editing {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--ColorGrey7);
    z-index: 10;
    padding: var(--Space2);
    border: var(--Line1);
}

/* ----------------------------------------------
 * Icons
 * ----------------------------------------------
*/

i,
.icon,
icon {
    font-family: var(--FontIcons);
    font-style: normal;
    -webkit-font-variant-ligatures: normal;
    font-variant-ligatures: normal;
    font-variant-caps: normal;
    font-variant-numeric: normal;
    font-variant-east-asian: normal;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1;
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon.bigger,
icon.bigger,
i.bigger {
    font-size: var(--FontSize4);
}

/* 
icon:before {
    position: relative;
} */

.tw-check:before {
    content: '\0043';
}

.tw-license:before {
    content: '\0041';
}

.tw-settings:before {
    content: '\0041';
}

.tw-quit:before {
    content: '\0051';
}

.tw-filter:before {
    content: '\0049';
}

.tw-indent:before {
    content: '\0083';
}

.tw-edit:before {
    content: '?';
}

.tw-export:before {
    content: '\002C';
}

.tw-import:before {
    content: '\002A';
}

.tw-calendar:before {
    content: 'y';
}

.tw-time:before {
    content: 'B';
}

.tw-menu:before,
.jsoneditor-contextmenu.tw-menu:before {
    content: 'G';
    font-family: var(--FontIcons);
}

.jsoneditor-previous:before {
    content: '\027';
    font-family: var(--FontIcons);
}

.jsoneditor-next:before {
    content: ')';
    font-family: var(--FontIcons);
}

.jsoneditor-refresh:before {
    content: 'O';
    font-family: var(--FontIcons);
}

.jsoneditor-outer {
    flex: 1;
    -webkit-box-flex: 1;
    -ms-flex: 1;
}

.tw-phone:before {
    content: 'P';
}

.tw-save:before {
    content: 'u';
}

.tw-plus:before {
    content: '8';
}

.tw-print:before {
    content: '\005D';
}

.tw-delete:before {
    content: '\0074';
}

.tw-clear:before,
.tw-close:before {
    content: 'X';
}

.tw-home:before {
    content: 'H';
}

.tw-world:before {
    content: 'W';
}

.tw-bell:before {
    content: 'V';
}

.tw-duplicate:before {
    content: '\0039';
}

.tw-mail {
    font-size: var(--FontSize4);
    line-height: var(--FontSize4);
}

.tw-mail:before {
    content: 'D';
}

.tw-invitation:before {
    content: '\0044';
}

.tw-arrow-right:before {
    content: var(--IconArrowRight);
    left: 5px;
}

.tw-expand-all:before {
    content: '\00F6';
}

.tw-collapse-all:before {
    content: '\00FC';
}

.tw-undo:before {
    content: '{';
}

.tw-redo:before {
    content: '}';
}

i.drag:before,
.tw-drag:before {
    content: 'h';
}

.tw-move:before,
.jsoneditor-dragarea.tw-move:before {
    content: '/';
    font-family: var(--FontIcons);
}

.tw-arrow-up:before {
    content: '\027';
}

.jsoneditor-collapsed:before {
    content: 's';
    font-family: var(--FontIcons);
}

.tw-indent:before {
    content: '\0083';
}

.tw-code:before {
    content: '\0084';
}

.tw-repair:before {
    content: '\0085';
}

.jsoneditor-expanded:before {
    content: 'r';
    font-family: var(--FontIcons);
}

.tw-arrow-down:before {
    content: '\029';
}

.tw-arrow-left:before {
    content: var(--IconArrowLeft);
}

.tw-arrow-left-end:before {
    content: '\0032';
}

.tw-arrow-right-end:before {
    content: '\0033';
}

.tw-arrow-left-big:before {
    content: '\003C';
}

.tw-search:before {
    content: 'S';
    top: 2px;
}

/* ----------------------------------------------
 * Buttons, Links
 * ----------------------------------------------
*/

button,
.button,
dropdown-button {
    border: var(--Line2);
    padding: 0 var(--Space2);
    font-family: var(--Font2);
    font-size: var(--FontSize3);
    height: var(--Space3);
    min-width: var(--Space3);
    line-height: var(--Space3);
    border-radius: var(--Radius3);
    background-color: var(--ColorDeco1);
    color: var(--ColorGrey7);
    cursor: pointer;
    display: inline-block;
}

button.neutral,
.button.neutral {
    background-color: var(--ColorGrey2);
}

[type="cancel"],
.button.cancel,
button.cancel,
.alertify-button-cancel {
    background-color: var(--ColorGrey1);
}

button:hover,
.button:hover {
    background-color: var(--ColorGrey2);
    color: var(--ColorGrey7);
}

filter button:hover,
filter .button:hover {
    background-color: var(--ColorGrey1);
}

button.neutral:hover,
.button.neutral:hover {
    background-color: var(--ColorGrey1);
}

button:active,
.button:active {
    background-color: var(--ColorGrey1);
}

button.light,
.button.light {
    background-color: var(--ColorTransparent);
    color: var(--ColorDeco1);
    padding: 0 var(--Space1);
    font-size: var(--FontSize5);
}

button.light:hover,
.button.light:hover {
    color: var(--ColorGrey1);
}

button.danger,
.button.danger {
    background-color: var(--ColorFalse);
}

button[disabled],
.button[disabled] {
    opacity: 0.25;
    cursor: not-allowed;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

button.controls,
.button.controls {
    line-height: var(--ButtonHeight1);
    width: var(--ButtonWidth1);
    font-size: var(--FontSize6);
    padding: 0;
}

button.dropdown,
.button.dropdown,
dropdown-button {
    padding-right: var(--Space4);
    position: relative;
}

dropdown-button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transition: all 0.3s ease;
}

dropdown-button>.dropdown-wrapper {
    position: absolute;
    top: calc(100% + 2px);
    right: 0;
    min-height: 50px;
    width: 200px;
    background: var(--ColorGrey7);
    border: var(--Line1);
    border-radius: var(--Radius3);
    padding: var(--Space1);
    display: none;
    z-index: 2;
}

dropdown-button>.dropdown-wrapper li {
    border-bottom: var(--Line1);
}

dropdown-button>.dropdown-wrapper li:last-child {
    border-bottom: none;
}

dropdown-button.open {
    background-color: var(--ColorGrey1);
}

dropdown-button.open>.dropdown-wrapper {
    display: block;
}

dropdown-button>.dropdown-wrapper button {
    width: 100%;
    text-align: left;
}

button.dropdown:before,
.button.dropdown:before,
dropdown-button:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px;
    border-color: var(--ColorGrey7) transparent transparent transparent;
    position: absolute;
    z-index: 0;
    display: block;
    right: var(--Space1);
    top: 13px;
    pointer-events: none;
}

dropdown-button.open:before {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    top: 7px;
}

/* button.dropdown:hover::after, filter button:hover::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: currentColor;
    opacity: .12;
    border-radius: inherit;
    pointer-events: none;
} */

/* button.dropdown:active::after, filter button:active::after {
    opacity: .18;
} */

input[type="text"],
input[type="email"],
input[type="date"],
input[type="time"],
textarea,
.input[type="text"],
.prototype-core,
.input[type="modal"],
table.jsoneditor-search input,
angular-jsoneditor .jsoneditor-search input {
    line-height: var(--Space3);
    height: var(--Space3);
    font-family: var(--FontInputs);
    font-size: var(--FontSize2);
    border-radius: var(--Radius3);
    color: var(--ColorGrey1);
    padding: 0 var(--Space1);
    border: var(--Line1);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type="text"].has-filter,
input[type="email"].has-filter,
textarea.has-filter,
datepicker.has-filter>div,
select.has-filter {
    border-color: var(--ColorDeco1);
}

tableview datepicker{
    display:block;
    min-width: 150px;
}

datepicker label,
timepicker label {
    font-size: var(--FontSize5);
    line-height: 30px;
}

datepicker.has-filter label {
    background-color: var(--ColorDeco1);
    border-right-color: var(--ColorDeco1);
    color: var(--ColorGrey7);
}

input[readonly],
textarea[readonly] {
    background-color: var(--ColorGrey6);
}

::-webkit-input-placeholder {
    -webkit-transition: all 128ms ease;
    transition: all 128ms ease;
}

input:focus::-webkit-input-placeholder {
    color: var(--ColorGrey3);
}

.input[type="modal"] {
    cursor: pointer;
}

timepicker.ng-touched.ng-invalid .input-group {
    border-color: var(--ColorFalse);
}

.input.readonly {
    background-color: var(--ColorGrey6);
}

.input-group {
    height: var(--Space3);
    border-radius: var(--Radius3);
    padding: 0;
    border: var(--Line1);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -ms-flex-direction: row;
    position: relative;
}

.input-group hint {
    font-family: var(--Font1);
    font-size: var(--FontSize2);
    position: absolute;
    right: var(--Space1);
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    color: var(--ColorGrey2);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.input-group input,
.input-group .input {
    border: none;
    height: 100%;
    width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: var(--ColorGrey7);
}

.input-group label {
    background-color: var(--ColorGrey5);
    width: 30px;
    height: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-right: var(--Line1);
}

.input-group label>i {
    font-size: var(--FontSize4);
    /* vertical-align: middle; */
}

textarea {
    min-height: 100px;
    line-height: var(--Space2);
    padding: var(--Space1);
}

input[type="checkbox"] {
    -webkit-appearance: none;
    background-color: var(--ColorGrey7);
    border: var(--Line1);
    width: 18px;
    height: 18px;
    border-radius: var(--Radius2);
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

input[type="checkbox"].small {
    padding: var(--Space1);
}

/* Next element to checkbox should have a padding to the left*/

input[type="checkbox"]+* {
    padding-left: var(--Space1);
    vertical-align: middle;
}

label>input[type="checkbox"] {
    margin-right: var(--Space1);
}

input[type="checkbox"]:checked {
    background-color: var(--ColorDeco1);
}

input[type="checkbox"]:checked:after {
    font-family: var(--FontIcons);
    font-size: var(--FontSize2);
    content: 'C';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    color: var(--ColorGrey7);
}

/* ----------------------------------------------
 * <status> and bullets
 * ----------------------------------------------
*/

status>* {
    margin-left: var(--Space05);
}

.bullet {
    border-radius: 50px;
    height: 10px;
    width: 10px;
    background-color: var(--ColorGrey7);
}

.bullet[status="online"] {
    background-color: var(--ColorTrue);
}

.bullet[status="offline"] {
    background-color: var(--ColorFalse);
}

.bullet[status="action"] {
    background-color: var(--ColorDeco1);
}

.image-upload>.image-upload-wrapper {
    height: 250px;
    padding: var(--Space2);
    border: var(--Line1);
    background-color: var(--ColorGrey6);
    position: relative;
    cursor: pointer;
}

.brick .image-upload>.image-upload-wrapper {
    height: initial;
    border: none;
}

.brick .image-upload>.image-upload-wrapper {
    padding: 0;
}

.brick .image-upload>.image-upload-wrapper>.image-holder {
    height: 250px;
    position: relative;
    background-size: cover;
}

.brick .image-upload>.image-upload-wrapper>.image-holder>resize-rectangle {
    display: none;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 25%);
    background-color: var(--ColorGrey7);
    border: var(--Line1);
    border-width: 2px;
    height: 15px;
    width: 15px;
    cursor: row-resize;
}

.brick .image-upload>.image-upload-wrapper>.image-holder:hover>resize-rectangle {
    display: block;
}

.brick size {
    position: absolute;
    top: var(--Space05);
    right: var(--Space05);
    padding: var(--Space05) var(--Space1);
    display: inline-block;
    background-color: var(--ColorGrey1);
    border-radius: var(--Radius3);
    color: var(--ColorGrey7);
    opacity: 0.85;
}

.brick size input {
    width: 60px;
    display: block;
    background-color: var(--ColorTransparent);
    color: var(--ColorGrey7);
    border: var(--Line1);
    text-align: left;
    margin-left: var(--Space1);
    padding: 0 var(--Space05);
    line-height: 25px;
}

.image-upload>.image-upload-wrapper.readOnly {
    cursor: default;
}

.image-upload>.image-upload-wrapper.error {
    border-color: var(--ColorFalse);
    background-color: var(--ColorFalse);
}

.image-upload .functions {
    margin-top: var(--Space05);
}

.image-upload>.image-upload-wrapper .description {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    text-align: center;
}

.image-upload>.image-upload-wrapper .command {
    position: relative;
}

.image-upload>.image-upload-wrapper>.delete {
    font-size: var(--FontSize6);
    cursor: pointer;
    position: absolute;
    top: 0;
    right: var(--Space1);
}

.image-upload>.image-upload-wrapper i.drag {
    font-size: 80px;
    color: var(--ColorGrey4);
}

.image-upload>.image-upload-wrapper>figcaption {
    position: absolute;
    bottom: var(--Space1);
    right: var(--Space1);
    text-align: right;
}

.image-upload>.image-upload-wrapper.drag-over {
    background-color: var(--ColorGrey5);
    border-color: var(--ColorTrue);
}

.image-upload>.image-upload-wrapper>.image-holder {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transition: opacity var(--TransitionSpeed1) ease, -webkit-transform var(--TransitionSpeed1) ease;
    transition: opacity var(--TransitionSpeed1) ease, -webkit-transform var(--TransitionSpeed1) ease;
    transition: opacity var(--TransitionSpeed1) ease, transform var(--TransitionSpeed1) ease;
    transition: opacity var(--TransitionSpeed1) ease, transform var(--TransitionSpeed1) ease, -webkit-transform var(--TransitionSpeed1) ease;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
}

.image-upload>.image-upload-wrapper>.image-holder.active {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.image-upload>.image-upload-wrapper.drag-over>.image-holder.active {
    opacity: 0.8;
}

.image-upload .file-wrapper {
    position: absolute;
    bottom: var(--Space1);
    left: var(--Space1);
}

.select {
    position: relative;
    display: inline-block;
    width: 100%;
}

.select:after,
dropdown .header:after,
dropdown-input:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px;
    border-color: var(--ColorDeco3) transparent transparent transparent;
    position: absolute;
    z-index: 1;
    display: block;
    right: 10px;
    top: 12px;
    pointer-events: none;
}

select,
dropdown,
.dropdown,
dropdown-input {
    font-family: var(--FontInputs);
    font-size: var(--FontSize2);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    line-height: var(--Space3);
    height: var(--Space3);
    padding: 0 var(--Space4) 0 var(--Space1);
    color: var(--ColorGrey1);
    border-radius: var(--Radius3);
    border: var(--Line1);
    background: var(--ColorGrey7);
}

.select.small {
    max-width: 125px;
}

.select.small>select {
    font-size: var(--FontSize1);
    line-height: var(--Space2);
    height: var(--Space2);
}

.select.small:after {
    top: 7px;
}

search {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

search .input-group {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}

search i,
.input-icon-clear {
    position: absolute;
    font-size: var(--FontSize5);
    right: 0;
    top: 0;
    bottom: 0;
    display: block;
    cursor: pointer;
    display: none;
    border-radius: var(--Radius3);
    background-color: var(--ColorTransparent);
    color: var(--ColorDeco1);
}

search i.visible,
.input-icon-clear.visible {
    display: inline-block;
    line-height: var(--Space3);
    padding: 0 var(--Space05);
}

search>input[type="text"] {
    float: right;
}

search>input[type="text"]:after {
    clear: right;
}

dropdown {
    padding: 0 var(--Space1);
    position: relative;
}

dropdown [data-role="search"] {
    width: 100%;
}

dropdown.open {
    border-radius: var(--Radius3) var(--Radius3) 0 0;
    border-bottom: none;
}

dropdown .header {
    font-family: var(--FontInputs);
    height: var(--Space3);
    line-height: calc(var(--Space3) - 2px);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

dropdown .header .selector,
dropdown-input>.selector {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
    display: inline-block;
    cursor: pointer;
}

input.type-ahead {
    background-color: var(--ColorTransparent);
    border: none;
    height: var(--Space3);
    width: 100%;
    padding: 0;
}

dropdown label {
    position: relative;
}

dropdown a {
    cursor: pointer;
}

dropdown label i {
    position: absolute;
    right: var(--Space1);
    font-size: var(--FontSize5);
    line-height: var(--Space3);
}

dropdown .body {
    position: absolute;
    left: -1px;
    right: -1px;
    visibility: hidden;
    background: var(--ColorGrey7);
    top: 100%;
    z-index: 2;
    border: var(--Line1);
    border-top: none;
    border-radius: 0 0 var(--Radius3) var(--Radius3);
    height: 0;
    overflow: hidden;
    padding: var(--Space1);
}

dropdown.open .body {
    visibility: visible;
    height: auto;
}

dropdown .scroller {
    margin-top: var(--Space1);
    padding: 0;
    max-height: 300px;
}

dropdown .item,
.dropdown .item,
dropdown-body .item,
.dropdown-item {
    cursor: pointer;
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
    line-height: var(--FontSize5);
    font-weight: bold;
    display: block;
    padding: 0 var(--Space1);
    color: var(--ColorGrey1);
}

dropdown .item.more,
.dropdown .item.more,
dropdown-body .item.more,
.dropdown-item.more {
    color: var(--ColorGrey2);
}

dropdown .item:hover,
dropdown-body .item:hover,
.dropdown-item:hover,
.dropdown-item.hover,
dropdown-body .item.hover,
.dropdown-item:hover,
.dropdown-item.hover,
dropdown .item:hover,
.dropdown .item:hover,
.dropdown .item.hover {
    background-color: var(--ColorGrey6);
}

dropdown .item.selected,
.dropdown .item.selected,
dropdown-body .item.selected,
.dropdown-item.selected {
    background-color: var(--ColorGrey6);
}

dropdown .item>p>*:first-child,
dropdown-body .item>p>*:first-child {
    margin-right: var(--Space1);
}

dropdown .item>p>*:nth-child(2),
dropdown-body .item>p>*:nth-child(2) {
    color: var(--ColorGrey2);
}

dropdown .item>p>*:last-child,
dropdown-body .item>p>*:last-child {
    font-family: var(--Font1);
    text-align: right;
}

.prototype-core {
    background-color: var(--ColorGrey7);
}

/* ----------------------------------------------
 * <product-info>
 * ----------------------------------------------
*/

product-info li>*:after {
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
    content: '/';
}

product-info li:last-child>*:after {
    display: none;
}

/* ----------------------------------------------
 * <dropdown-edit>
 * ----------------------------------------------
*/

dropdown-edit>dropdown-core,
dropdown-prototype>dropdown-core {
    position: relative;
    display: block;
    width: 100%;
    height: var(--Space3);
    margin-bottom: var(--Space05);
}

dropdown-edit dropdown-input,
dropdown-prototype dropdown-input {
    position: relative;
    display: block;
    padding-right: var(--Space3);
}

dropdown-edit dropdown-input.no-items,
dropdown-prototype dropdown-input.no-items {
    background-color: var(--ColorGrey6);
}

dropdown-edit dropdown-input.no-items:after,
dropdown-prototype dropdown-input.no-items:after {
    opacity: 0.5;
}

dropdown-edit dropdown-input.no-items .selector,
dropdown-prototype dropdown-input.no-items .selector {
    cursor: default;
}

dropdown-edit dropdown-body,
dropdown-prototype dropdown-body {
    z-index: 2;
    display: none;
    position: relative;
    width: 100%;
}

dropdown-edit dropdown-body.open,
dropdown-prototype dropdown-body.open {
    display: block;
}

dropdown-edit dropdown-body .dropdown-results,
dropdown-prototype dropdown-body .dropdown-results {
    position: absolute;
    top: -1px;
    left: 0;
    max-height: 200px;
    background: var(--ColorGrey7);
    border: var(--Line1);
    width: 100%;
    overflow: auto;
}

dropdown-edit>dropdown-form,
dropdown-prototype>dropdown-form {
    position: absolute;
    height: 0;
    width: 100%;
    max-height: none;
    overflow: auto;
    display: none;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    background-color: var(--ColorGrey6);
    padding: var(--Space2);
    left: 0;
    top: 46px;
    z-index: 2;
}

dropdown-edit>dropdown-form.open,
dropdown-prototype>dropdown-form.open {
    height: 100%;
    display: block;
}

dropdown-edit dropdown-body li .indent,
dropdown-prototype dropdown-body li .indent {
    width: 5px;
    display: inline-block;
    background: var(--ColorGrey0);
    height: 1px;
    vertical-align: middle;
    margin-right: var(--Space05);
}

dropdown-prototype dropdown-body li[level="1"] {
    padding-left: var(--Space3);
}

dropdown-prototype dropdown-body li[level="2"] {
    padding-left: calc(var(--Space3) + 15px);
}

dropdown-prototype dropdown-body li[level="3"] {
    padding-left: calc(var(--Space3) + 30px);
}

dropdown-prototype dropdown-body li[level="4"] {
    padding-left: calc(var(--Space3) + 45px);
}

dropdown-prototype dropdown-body li[level="5"] {
    padding-left: calc(var(--Space3) + 60px);
}

dropdown-prototype dropdown-body li>* {
    display: inline-block;
}

dropdown-prototype loader {
    display: none;
}

dropdown-prototype loader.visible {
    display: block;
}

/* ----------------------------------------------
 * List  styles
 * ----------------------------------------------
*/

.list>li {
    padding: var(--Space2);
}

.list>li>* {
    margin-right: var(--Space1);
}

.list.l1>li>*:nth-child(2) {
    font-weight: bold;
}

.list.l1>li>*:nth-child(3) {
    font-size: var(--FontSize1);
}

.list.l1>li {
    border-bottom: var(--Line1);
}

.list.small>li {
    padding: var(--Space05);
}

.list.l2>li>*:nth-child(2) {
    font-weight: bold;
}

.list.l2>li>*:nth-child(3) {
    font-size: var(--FontSize1);
}

.list.l2>li {
    border-bottom: var(--Line1);
}

ul.multiple>li {
    margin-bottom: var(--Space1);
}

/* ----------------------------------------------
 * Align helpers
 * ----------------------------------------------
*/

.align-1 {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}

.align-2 {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.align-3 {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.align-4 {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

/* ----------------------------------------------
 * Visits / User
 * ----------------------------------------------
*/

.remoteCam {
    position: absolute;
    top: var(--Space3);
    right: 30%;
    border: var(--Line1);
    -webkit-box-shadow: var(--BoxShadow2);
    box-shadow: var(--BoxShadow2);
}

/* ----------------------------------------------
 * Language selector
 * ----------------------------------------------
*/

language-selector .list>li {
    padding: 0;
}

language-selector a.selected {
    color: var(--ColorGrey1);
}

language-selector a {
    margin-left: var(--Space1);
}

/* ----------------------------------------------
 * Context- menu
 * ----------------------------------------------
*/

.context-menu {
    position: fixed;
    background-color: var(--ColorGrey7);
    padding: var(--Space2);
    display: none;
    -webkit-box-shadow: var(--BoxShadow2);
    box-shadow: var(--BoxShadow2);
    border: var(--Line1);
}

.context-menu.open {
    display: block;
}

/* ----------------------------------------------
 * GPS component
 * ----------------------------------------------
*/

gps .get {
    margin: 0 var(--Space1);
    cursor: pointer;
}

gps .functions {
    margin-top: var(--Space05);
    cursor: pointer;
}

gps .functions.waiting {
    cursor: initial;
    color: var(--ColorGrey2);
}

gps .map-wrapper {
    background: white;
    height: 0;
    margin-top: var(--Space1);
    border: var(--Line1);
    z-index: 1;
    overflow: hidden;
    opacity: 0;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

gps .address-wrapper {
    margin-top: var(--Space05);
}

gps .map-wrapper.open {
    display: block;
    opacity: 1;
    height: 250px;
}

gps .map-wrapper .map {
    height: 100%;
    width: 100%;
}

/* ----------------------------------------------
 * Detail popups
 * ----------------------------------------------
*/

.detail,
contact-detail,
visit-invitation {
    display: none;
    position: fixed;
    top: 0;
    left: 50%;
    background-color: var(--ColorGrey6);
    transform: translateX(-50.22%);
    -webkit-transform: translateX(-50.21%);
    -ms-transform: translateX(-50.21%);
    z-index: 2;
    width: 600px;
    height: 100%;
}

.detail.big {
    left: 0%;
    width: 100%;
    transform: initial;
    -webkit-transform: initial;
    -ms-transform: initial;
}

.detail.import {
    display: block;
}

.detail.import [status="OK"] {
    color: var(--ColorTrue);
}

.detail.import [status="ERROR"] {
    color: var(--ColorFalse);
}

.detail.import [status="IMPORTING"] {
    color: var(--ColorDeco1);
}

.detail.import .import-entry {
    background-color: var(--ColorGrey7);
    padding: 0 var(--Space1);
    border: var(--Line1);
    line-height: var(--Space4);
}

.detail detail-header {
    height: 46px;
    background-color: var(--ColorGrey1);
    color: var(--ColorGrey7);
    line-height: 46px;
    padding: 0 0 0 var(--Space2);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 3;
    /* cursor: move; */
}

.detail detail-body {
    overflow: auto;
}

.detail detail-body .align-4>label {
    margin-top: 3px;
}

.detail detail-footer {
    border-top: var(--Line1);
    padding: var(--Space2);
}

.detail detail-header>.close {
    height: 46px;
    width: 46px;
    line-height: 46px;
    font-size: var(--FontSize6);
    color: var(--ColorGrey7);
    cursor: pointer;
}

.detail.open {
    display: block;
}

.detail menu>* {
    margin-left: var(--Space05);
}

.detail .detail-form {
    padding: var(--Space4);
    height: auto;
}

.detail .detail-form .thin {
    flex-basis: 150px;
}

.detail .detail-form[name="importForm"] {
    height: 100%;
}

.detail .detail-form .separator {
    height: var(--Space1);
}

/* ----------------------------------------------
 * Filter-detail popup
 * ----------------------------------------------
*/

filter-dialog {
    display: none;
    height: auto;
    width: 95%;
    max-height: 95%;
    max-width: 600px;
    position: fixed;
    background-color: var(--ColorGrey7);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 15%;
    left: 50%;
    z-index: 2;
    /* border: var(--Line1); */
    padding-bottom: var(--Space2);
    -webkit-box-shadow: var(--BoxShadow2);
    box-shadow: var(--BoxShadow2);
    overflow: auto;
}

filter-dialog.visible {
    display: block;
}

filter-dialog>filter-dialog-body {
    padding: 0 var(--Space2) var(--Space2) var(--Space2);
    display: block;
}

filter-dialog>filter-dialog-body input {
    width: 100%;
}

filter-dialog>filter-dialog-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 46px;
}

filter-dialog>filter-dialog-header>button {
    font-size: var(--Space3);
    background-color: transparent;
    color: var(--ColorGrey1);
    padding: 0;
    height: 46px;
    line-height: 46px;
    width: 46px;
}

/* ----------------------------------------------
* Forms
* ----------------------------------------------
*/

form>* {
    margin-bottom: var(--Space1);
}

form>*:last-child {
    margin-bottom: 0;
}

/* ----------------------------------------------
* Scroll container & helpers
* ----------------------------------------------
*/

.scroller {
    overflow: hidden !important;
    position: relative;
    /*scroll-behavior: smooth;*/
    height: 100%;
}

/* POP UP
—————————————————————————————————————————————————————————————————————— */

.popup-view-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--ColorOverlayTransparent);
    z-index: 1000;
    display: none;
}

.popup-view-container.open {
    display: block;
}

.popup-view-container form {
    padding: 0;
}

.popup-view-container .wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 33%;
    background-color: var( --ColorGrey7);
    height: 66vh;
    -webkit-box-shadow: var(--BoxShadow1);
    box-shadow: var(--BoxShadow1);
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    border: var(--Line1);
}

.popup-view-container .scroller {
    padding: 0 var(--Space2) var(--Space2) var(--Space2);
}

.popup-view-container .scroller>div {
    padding-bottom: var(--Space3);
}

.popup-view-container .header {
    padding: var(--Space2) var(--Space2) 0 var(--Space2);
}

.popup-view-container nav {
    overflow: hidden;
    margin-bottom: var(--Space2);
    padding: 0;
}

.popup-view-container nav button {
    width: auto;
    min-width: 50px;
    float: left;
}

.popup-view-container nav button:last-child {
    float: right;
}

.popup-view-container label .icon-search:after {
    top: 17px;
}

.popup-view-container label .circle {
    right: 40px;
}

.popup-view-container .close {
    font-size: var(--FontSize6);
    color: var(--ColorGrey0);
    cursor: pointer;
}

.popup-view-container .popup-search {
    margin-top: var(--Space1);
    width: 100%;
}

.popup-view-container .circle .icon-close:after {
    top: 12px;
}

.popup-view-container li {
    margin-bottom: var(--Space05);
    border-bottom: var(--Line1);
}

.popup-view-container li:last-child {
    margin-bottom: 0;
}

.popup-view-container ul a {
    display: block;
    padding: var(--Space1);
    cursor: pointer;
}

.popup-view-container ul a.selected {
    color: var(--ColorDeco1);
}

/* ==========================================================================
   PROGRESSBAR
   ========================================================================== */

progressbar {
    display: block;
    height: var(--Space4);
    background: var(--ColorGrey7);
    width: 100%;
    position: relative;
    border: var(--Line1);
}

progressbar>.progress {
    display: inline-block;
    height: 100%;
    background: var(--ColorDeco1);
    -webkit-transition: width 0.12s ease;
    transition: width 0.12s ease;
    position: relative;
}

progressbar>.progress>p {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: var(--ColorGrey7);
}

/* ==========================================================================
   SPINNER / LOADER
   ========================================================================== */

loader {
    width: 100%;
}

loader[type="centered"] {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

loader p {
    text-align: center;
}

loader .spinner.sk-fading-circle {
    display: block;
    margin: auto;
    width: 100px;
    height: 100px;
    position: relative;
    left: 50%;
    margin-left: -50px;
    margin-bottom: var(--Space5);
}

loader .spinner.sk-fading-circle .sk-circle {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

loader .spinner.sk-fading-circle .sk-circle:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: var(--ColorGrey3);
    border-radius: 100%;
    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
    animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}

loader .spinner.sk-fading-circle .sk-circle2 {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}

loader .spinner.sk-fading-circle .sk-circle3 {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}

loader .spinner.sk-fading-circle .sk-circle4 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

loader .spinner.sk-fading-circle .sk-circle5 {
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
}

loader .spinner.sk-fading-circle .sk-circle6 {
    -webkit-transform: rotate(150deg);
    transform: rotate(150deg);
}

loader .spinner.sk-fading-circle .sk-circle7 {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

loader .spinner.sk-fading-circle .sk-circle8 {
    -webkit-transform: rotate(210deg);
    transform: rotate(210deg);
}

loader .spinner.sk-fading-circle .sk-circle9 {
    -webkit-transform: rotate(240deg);
    transform: rotate(240deg);
}

loader .spinner.sk-fading-circle .sk-circle10 {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}

loader .spinner.sk-fading-circle .sk-circle11 {
    -webkit-transform: rotate(300deg);
    transform: rotate(300deg);
}

loader .spinner.sk-fading-circle .sk-circle12 {
    -webkit-transform: rotate(330deg);
    transform: rotate(330deg);
}

loader .spinner.sk-fading-circle .sk-circle2:before {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

loader .spinner.sk-fading-circle .sk-circle3:before {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

loader .spinner.sk-fading-circle .sk-circle4:before {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

loader .spinner.sk-fading-circle .sk-circle5:before {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

loader .spinner.sk-fading-circle .sk-circle6:before {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}

loader .spinner.sk-fading-circle .sk-circle7:before {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

loader .spinner.sk-fading-circle .sk-circle8:before {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

loader .spinner.sk-fading-circle .sk-circle9:before {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

loader .spinner.sk-fading-circle .sk-circle10:before {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}

loader .spinner.sk-fading-circle .sk-circle11:before {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}

loader .spinner.sk-fading-circle .sk-circle12:before {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
    0%,
    39%,
    100% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
}

@keyframes sk-circleFadeDelay {
    0%,
    39%,
    100% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
}

/* ==========================================================================
ALERTIFY
========================================================================== */

.alertify,
.alertify-show,
.alertify-log {
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.alertify-cover,
.TWOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background-color: var(--ColorGrey1);
    opacity: 0.3;
}

.TWOverlay {
    z-index: 1;
}

.TWOverlay.danger {
    background-color: var(--ColorFalse);
    -webkit-animation: dangerPulse 2s infinite;
    animation: dangerPulse 2s infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

@-webkit-keyframes dangerPulse {
    from {
        opacity: 0.3;
    }
    to {
        opacity: 0.75;
    }
}

@keyframes dangerPulse {
    from {
        opacity: 0.3;
    }
    to {
        opacity: 0.75;
    }
}

.TWOverlay>loader {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9999999;
    display: block;
    opacity: 1;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

.alertify-cover-hidden {
    display: none;
}

.alertify {
    position: fixed;
    width: 50%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    z-index: 99999;
    opacity: 1;
}

.alertify-buttons {
    padding: 0;
    margin-top: var(--Space2);
}

.alertify-buttons>* {
    float: right;
    margin-left: var(--Space1);
}

.alertify-message {
    text-align: left;
    font-size: var(--FontSize3);
}

.alertify-buttons:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

.alertify-hidden {
    -webkit-transform: translate3d(-50%, -40%, 0);
    transform: translate3d(-50%, -40%, 0);
    opacity: 0;
    display: none;
}

/* overwrite display: none; for everything except IE6-8 */

:root *>.alertify-hidden {
    display: block;
    visibility: hidden;
}

.alertify-logs {
    position: fixed;
    z-index: 5000;
    bottom: 10px;
    right: 10px;
    max-height: 300px;
    padding: var(--Space2);
}

.alertify-logs-hidden {
    display: none;
}

.alertify-log {
    display: block;
    margin-top: 10px;
    position: relative;
    right: -300px;
    opacity: 0;
}

.alertify-log-show {
    right: 0;
    opacity: 1;
}

.alertify-log-hide {
    -webkit-transform: translate(300px, 0);
    transform: translate(300px, 0);
    opacity: 0;
}

.alertify-dialog {
    padding: var(--Space2);
}

.alertify-resetFocus {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.alertify-inner {
    text-align: center;
}

.alertify-text {
    margin-bottom: 15px;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 100%;
}

/*.alertify-button, .alertify-button:hover, .alertify-button:active, .alertify-button:visited {
    background: none;
    text-decoration: none;
    border: none;
    line-height: 1.5;
    font-size: 100%;
    display: inline-block;
    cursor: pointer;
    margin-left: 5px;
}*/

@media only screen and (max-width: 680px) {
    .alertify,
    .alertify-logs {
        width: 90%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .alertify {
        margin: 0;
    }
}

/**
 * Default Look and Feel
 */

.alertify,
.alertify-log {
    font-family: var(--Font3);
}

.alertify {
    background: #FFF;
    border: 10px solid #333;
    border: var(--Line1);
    border-radius: var(--Radius3);
    /* Safari 4? Chrome 6? */
    /* Firefox 3.6 */
    background-clip: padding-box;
    /* Firefox 4, Safari 5, Opera 10, IE 9 */
}

.alertify-text {
    border: var(--Line1);
    padding: var(--Space1);
    border-radius: var(--Radius1);
}

.alertify-log {
    background: var(--ColorGrey2);
    padding: var(--Space2);
    border-radius: var(--Radius3);
    color: var(--ColorGrey7);
    font-family: var(--Font3);
    font-size: var(--FontSize2);
}

.alertify-log-error {
    background-color: var(--ColorFalse);
}

.alertify-log-success {
    background-color: var(--ColorTrue);
}

/* ------------------------------------------------------------- 
/* GrapeJS editor 
/* ------------------------------------------------------------- */

.gjs-cv-canvas>iframe {
    max-width: 600px;
}

/* ------------------------------------------------------------- 
/* Content editor 
/* ------------------------------------------------------------- */

.brick {
    display: block;
    transition: border 0.2s ease, box-shadow 0.3s ease 0.2s;
    position: relative;
}

.brick>[contenteditable="true"]:focus {
    background-color: var(--ColorGrey7);
    outline: 3px solid red;
}

.brick:hover {
    /* border: var(--LineBrick); */
    box-shadow: 5px 5px 15px #333;
}

.brick .bullet-list>li {
    list-style-type: disc;
    list-style-position: inside;
}

brick-toolbar {
    display: block;
    width: 20px;
    height: 60px;
    position: absolute;
    left: 0;
    top: var(--Space05);
    z-index: 1;
    transform: translate(-50%, calc(-1 * var(--Space05)));
    visibility: hidden;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.125s ease, transform 0.35s ease 0.125s;
}

brick-toolbar button {
    min-width: 0;
    padding: 0;
    color: var(--ColorGrey7);
    background-color: var(--ColorDeco1);
    transition: all 0.125s ease;
}

brick-toolbar button[disabled],
brick-toolbar button[disabled]:hover,
brick-toolbar button[disabled]:focus,
brick-toolbar button[disabled]:active {
    background-color: var(--ColorGrey3);
    opacity: 1;
}

brick-toolbar button:hover {
    background-color: var(--ColorGrey1);
}

brick-toolbar button:first-child {
    border-top-left-radius: var(--Radius3);
    border-top-right-radius: var(--Radius3);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

brick-toolbar button:last-child {
    border-bottom-left-radius: var(--Radius3);
    border-bottom-right-radius: var(--Radius3);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

brick-toolbar separator {
    display: block;
    height: 1px;
    border-bottom: var(--Line1);
    width: 100%;
    margin: auto;
}

brick-menu {
    display: block;
    position: absolute;
    bottom: var(--Space05);
    right: var(--Space05);
    z-index: 1;
    transition: all 0.3s ease;
}

brick-menu button {
    padding: 0;
    min-width: unset;
    width: 35px;
    line-height: 35px;
    height: 35px;
    border-radius: 100px;
    font-size: var(--FontSize5);
    background-color: var(--ColorDeco1);
    opacity: 0;
    transform: scale(0);
    opacity: 0;
    visibility: hidden;
    transform-origin: right center;
}

brick-menu li:first-child>button {
    transition: opacity 125ms ease, transform 125ms ease;
}

brick-menu li:last-child>button {
    transition: opacity 125ms ease 75ms, transform 125ms ease 75ms;
}

brick-menu li {
    padding-left: var(--Space05);
}

.brick:hover brick-menu {
    transform: scale(1);
    visibility: visible;
    opacity: 1;
}

.brick:hover brick-menu button {
    visibility: visible;
    transform: scale(1);
    opacity: 1;
}

.brick:hover brick-toolbar {
    visibility: visible;
    transform: translate(-50%, 0);
    opacity: 1;
}

.brick-list {
    background-color: var(--ColorGrey1);
}

brick-list-item {
    display: block;
    width: 100%;
    min-width: 130px;
    height: 100px;
    text-align: center;
    margin-bottom: var(--Space05);
    padding: var(--Space2);
    border-radius: var(--Radius3);
    color: var(--ColorGrey7);
    border-bottom: var(--Line1);
}

brick-list-item>i {
    font-size: var(--FontSize7);
}

content-editor {
    display: block;
    height: 100%;
}

content-editor .stage {
    background-color: var(--ColorGrey2);
    padding: var(--Space2) 0;
}

content-editor .document {
    max-width: 600px;
    margin: auto;
    display: block;
    background-color: var(--ColorGrey7);
}

content-editor new {
    border-bottom: var(--Line1);
    border-bottom-style: dashed;
    position: relative;
    height: 40px;
    transition: background-color 0.125s ease, height 0.125s ease 0.125s;
}

content-editor new .hint {
    padding: var(--Space1);
    color: var(--ColorGrey7);
    opacity: 0;
    transition: 0.125s ease 0.125s;
}

content-editor new[toggled="true"] {
    height: 100px;
    border-bottom: 5px solid var(--ColorDeco1);
    background-color: var(--ColorGrey1);
}

content-editor new[toggled="true"] .hint {
    opacity: 1;
}

content-editor new ul {
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease 0.125s;
}

content-editor new[toggled="true"] ul {
    opacity: 1;
    visibility: visible;
}

content-editor new>button {
    position: absolute;
    bottom: 0;
    left: var(--Space1);
    background-color: var(--ColorGrey2);
    transform: translateY(50%);
    border-radius: var(--Radius1);
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: var(--ColorGrey7);
    text-align: center;
    padding: 0;
    margin: 0;
    font-size: var(--FontSize6);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
    transform-origin: center center;
}

content-editor new[toggled="true"] button {
    background-color: var(--ColorDeco1);
}

content-editor new>button:hover {
    background-color: var(--ColorDeco1);
}

content-editor brick-list-button {
    display: flex;
    border-left: var(--Line1);
    height: 100%;
    color: var(--ColorGrey7);
    justify-content: center;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: 0.125s all ease;
}

content-editor brick-list-button:hover {
    background-color: var(--ColorDeco1);
}

content-editor brick-list-button>i {
    font-size: var(--FontSize6);
}

/* ------------------------------------------------------------- 
/* Cache loader 
/* ------------------------------------------------------------- */
cache-loader{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    background-color:var(--ColorGrey6);
}

cache-loader loader{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}


/* ------------------------------------------------------------- 
/* NG Tags 
/* ------------------------------------------------------------- */

tags-input {
    display: block;
}

tags-input *,
tags-input :after,
tags-input :before {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

tags-input .host {
    position: relative;
    /* margin-top: 5px; */
    /* margin-bottom: 5px; */
    height: 100%;
}

tags-input .host:active {
    outline: 0
}

tags-input .tags {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    padding: 1px;
    overflow: hidden;
    word-wrap: break-word;
    cursor: text;
    background-color: var(--ColorGrey7);
    border: var(--Line1);
    height: 100%;
}

tags-input .tags.focused {
    outline: 0;
}

tags-input .tags .tag-list {
    margin: 0;
    padding: 0;
    list-style-type: none
}

tags-input .tags .tag-item {
    margin: 1px 1px;
    padding: 0 var(--Space1);
    display: inline-block;
    float: left;
    font-family: var(--Font1);
    font-size: var(--FontSize2);
    height: var(--Space3);
    line-height: var(--Space3);
    /* border: 1px solid #acacac; */
    border-radius: var(--Radius3);
    /* background: -webkit-linear-gradient(top, #f0f9ff 0, #cbebff 47%, #a1dbff 100%); */
    background: var(--ColorDeco1);
    color: var(--ColorGrey7);
}

tags-input .tags .tag-item.selected {
    background: -webkit-linear-gradient(top, #febbbb 0, #fe9090 45%, #ff5c5c 100%);
    background: linear-gradient(to bottom, #febbbb 0, #fe9090 45%, #ff5c5c 100%)
}

tags-input .tags .tag-item .remove-button {
    margin: 0 0 0 5px;
    padding: 0;
    border: none;
    background: 0 0;
    cursor: pointer;
    vertical-align: middle;
    /* font-family:var(--Font2); */
    color: var(--ColorGrey7);
}

tags-input .tags .input.invalid-tag,
tags-input .tags .tag-item .remove-button:active {
    color: var(--ColorFalse);
}

tags-input .tags .input {
    float: left;
    padding: 0 2px;
}

tags-input .tags .input::-ms-clear {
    display: none
}

tags-input[disabled] .host:focus {
    outline: 0
}

tags-input[disabled] .tags {
    background-color: #eee;
    cursor: default
}

tags-input[disabled] .tags .tag-item {
    opacity: .65;
    background: -webkit-linear-gradient(top, #f0f9ff 0, rgba(203, 235, 255, .75) 47%, rgba(161, 219, 255, .62) 100%);
    background: linear-gradient(to bottom, #f0f9ff 0, rgba(203, 235, 255, .75) 47%, rgba(161, 219, 255, .62) 100%)
}

tags-input[disabled] .tags .tag-item .remove-button {
    cursor: default
}

tags-input[disabled] .tags .tag-item .remove-button:active {
    color: #585858
}

tags-input[disabled] .tags .input {
    background-color: #eee;
    cursor: default
}

tags-input .autocomplete {
    margin-top: 5px;
    position: absolute;
    padding: 5px 0;
    z-index: 999;
    width: 100%;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2)
}

tags-input .autocomplete .suggestion-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
    max-height: 280px;
    overflow-y: auto;
    position: relative
}

tags-input .autocomplete .suggestion-item {
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font: 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #000;
    background-color: #fff
}

tags-input .autocomplete .suggestion-item.selected,
tags-input .autocomplete .suggestion-item.selected em {
    color: #fff;
    background-color: #0097cf
}

tags-input .autocomplete .suggestion-item em {
    font: normal 700 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #000;
    background-color: #fff
}

/* ----------------------------------------------
 * ANGULAR JSON Editor
 * ----------------------------------------------
*/

/* reset styling (prevent conflicts with bootstrap, materialize.css, etc.) */

div.jsoneditor .jsoneditor-search input:focus {
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

div.jsoneditor table {
    border-collapse: collapse;
    width: auto;
}

div.jsoneditor td,
div.jsoneditor th {
    padding: 0;
    display: table-cell;
    text-align: left;
    vertical-align: inherit;
    border-radius: inherit;
}

div.jsoneditor-field,
div.jsoneditor-value,
div.jsoneditor-readonly {
    border: 1px solid transparent;
    min-height: 16px;
    min-width: 32px;
    padding: 2px;
    margin: 1px;
    word-wrap: break-word;
    float: left;
}

/* adjust margin of p elements inside editable divs, needed for Opera, IE */

div.jsoneditor-field p,
div.jsoneditor-value p {
    margin: 0;
}

div.jsoneditor-value {
    word-break: break-word;
}

div.jsoneditor-readonly {
    min-width: 16px;
    color: #808080;
}

div.jsoneditor-empty {
    border-color: #d3d3d3;
    border-style: dashed;
    border-radius: 2px;
}

div.jsoneditor-field.jsoneditor-empty::after,
div.jsoneditor-value.jsoneditor-empty::after {
    pointer-events: none;
    color: #d3d3d3;
    font-size: 8pt;
}

div.jsoneditor-field.jsoneditor-empty::after {
    content: "field";
}

div.jsoneditor-value.jsoneditor-empty::after {
    content: "value";
}

div.jsoneditor-value.jsoneditor-url,
a.jsoneditor-value.jsoneditor-url {
    color: green;
    text-decoration: underline;
}

a.jsoneditor-value.jsoneditor-url {
    display: inline-block;
    padding: 2px;
    margin: 2px;
}

a.jsoneditor-value.jsoneditor-url:hover,
a.jsoneditor-value.jsoneditor-url:focus {
    color: #ee422e;
}

div.jsoneditor td.jsoneditor-separator {
    padding: 3px 0;
    vertical-align: top;
    color: #808080;
}

div.jsoneditor-field[contenteditable=true]:focus,
div.jsoneditor-field[contenteditable=true]:hover,
div.jsoneditor-value[contenteditable=true]:focus,
div.jsoneditor-value[contenteditable=true]:hover,
div.jsoneditor-field.jsoneditor-highlight,
div.jsoneditor-value.jsoneditor-highlight {
    background-color: #FFFFAB;
    border: 1px solid yellow;
    border-radius: 2px;
}

div.jsoneditor-field.jsoneditor-highlight-active,
div.jsoneditor-field.jsoneditor-highlight-active:focus,
div.jsoneditor-field.jsoneditor-highlight-active:hover,
div.jsoneditor-value.jsoneditor-highlight-active,
div.jsoneditor-value.jsoneditor-highlight-active:focus,
div.jsoneditor-value.jsoneditor-highlight-active:hover {
    background-color: #ffee00;
    border: 1px solid #ffc700;
    border-radius: 2px;
}

div.jsoneditor-value.jsoneditor-string {
    color: #008000;
}

div.jsoneditor-value.jsoneditor-object,
div.jsoneditor-value.jsoneditor-array {
    min-width: 16px;
    color: #808080;
}

div.jsoneditor-value.jsoneditor-number {
    color: #ee422e;
}

div.jsoneditor-value.jsoneditor-boolean {
    color: #ff8c00;
}

div.jsoneditor-value.jsoneditor-null {
    color: #004ED0;
}

div.jsoneditor-value.jsoneditor-invalid {
    color: #000000;
}

div.jsoneditor-tree button {
    width: 24px;
    height: 24px;
    line-height: 24px;
    padding: 0;
    margin: 0;
    border: none;
    cursor: pointer;
}

div.jsoneditor-mode-view tr.jsoneditor-expandable td.jsoneditor-tree,
div.jsoneditor-mode-form tr.jsoneditor-expandable td.jsoneditor-tree {
    cursor: pointer;
}

div.jsoneditor-tree button.jsoneditor-expanded {
    background-position: 0 -72px;
}

div.jsoneditor-tree button.jsoneditor-contextmenu {
    background-position: -48px -72px;
}

div.jsoneditor-tree button.jsoneditor-contextmenu:hover,
div.jsoneditor-tree button.jsoneditor-contextmenu:focus,
div.jsoneditor-tree button.jsoneditor-contextmenu.jsoneditor-selected,
tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-contextmenu {
    background-position: -48px -48px;
}

div.jsoneditor-tree *:focus {
    outline: none;
}

div.jsoneditor-tree button.jsoneditor-invisible {
    visibility: hidden;
    background: none;
}

div.jsoneditor-tree div.jsoneditor-show-more {
    display: inline-block;
    padding: 3px 4px;
    margin: 2px 0;
    background-color: #e5e5e5;
    border-radius: 3px;
    color: #808080;
    font-family: arial, sans-serif;
    font-size: 10pt;
}

div.jsoneditor-tree div.jsoneditor-show-more a {
    display: inline-block;
    color: #808080;
}

div.jsoneditor-tree div.jsoneditor-show-more a:hover,
div.jsoneditor-tree div.jsoneditor-show-more a:focus {
    color: #ee422e;
}

div.jsoneditor {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 0;
    line-height: 100%;
}

div.jsoneditor-tree table.jsoneditor-tree {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    margin: 0;
}

textarea.jsoneditor-text,
.ace-jsoneditor {
    min-height: 150px;
}

div.jsoneditor-tree {
    width: 100%;
    /* height: 100%; */
    position: relative;
    /* overflow: auto; */
}

textarea.jsoneditor-text {
    width: 100%;
    height: 100%;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline-width: 0;
    border: none;
    background-color: white;
    resize: none;
}

tr.jsoneditor-highlight,
tr.jsoneditor-selected {
    background-color: #d3d3d3;
}

tr.jsoneditor-selected button.jsoneditor-dragarea,
tr.jsoneditor-selected button.jsoneditor-contextmenu {
    visibility: hidden;
}

tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-dragarea,
tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-contextmenu {
    visibility: visible;
}

div.jsoneditor-tree button.jsoneditor-dragarea {
    cursor: move;
    background-color: var(--ColorGrey3);
}

div.jsoneditor-tree button.jsoneditor-dragarea:hover,
div.jsoneditor-tree button.jsoneditor-dragarea:focus,
tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-dragarea {
    background-position: -72px -48px;
}

div.jsoneditor tr,
div.jsoneditor th,
div.jsoneditor td {
    border: none;
}

div.jsoneditor tr:hover {
    background-color: var(--ColorTransparent);
}

.jsoneditor-expandable {
    border-top: var(--Line1);
}

.jsoneditor-expandable:first-child {
    border-top: none;
}

div.jsoneditor td {
    vertical-align: middle;
}

div.jsoneditor td.jsoneditor-tree {
    vertical-align: middle;
}

div.jsoneditor-field,
div.jsoneditor-value,
div.jsoneditor td,
div.jsoneditor th,
div.jsoneditor textarea,
.jsoneditor-schema-error {
    font-family: "courier new", courier, monospace, sans-serif;
}

/* popover */

.jsoneditor-schema-error {
    cursor: default;
    display: inline-block;
    /*font-family: arial, sans-serif;*/
    height: 24px;
    line-height: 24px;
    position: relative;
    text-align: center;
    width: 24px;
}

div.jsoneditor-tree .jsoneditor-schema-error {
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0 4px 0 0;
    background-color: var(--ColorFalse);
}

.jsoneditor-schema-error .jsoneditor-popover {
    background-color: var(--ColorGrey1);
    color: #fff;
    display: none;
    position: absolute;
    z-index: 4;
}

.jsoneditor-schema-error .jsoneditor-popover.jsoneditor-above {
    bottom: 32px;
    left: -98px;
}

.jsoneditor-schema-error .jsoneditor-popover.jsoneditor-below {
    top: 32px;
    left: -98px;
}

.jsoneditor-schema-error .jsoneditor-popover.jsoneditor-left {
    top: -7px;
    right: 32px;
}

.jsoneditor-schema-error .jsoneditor-popover.jsoneditor-right {
    top: -7px;
    left: 32px;
}

.jsoneditor-schema-error .jsoneditor-popover:before {
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    content: '';
    display: block;
    left: 50%;
    margin-left: -7px;
    position: absolute;
}

.jsoneditor-schema-error .jsoneditor-popover.jsoneditor-above:before {
    border-top: 7px solid #4c4c4c;
    bottom: -7px;
}

.jsoneditor-schema-error .jsoneditor-popover.jsoneditor-below:before {
    border-bottom: 7px solid #4c4c4c;
    top: -7px;
}

.jsoneditor-schema-error .jsoneditor-popover.jsoneditor-left:before {
    border-left: 7px solid #4c4c4c;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    content: '';
    top: 19px;
    right: -14px;
    left: inherit;
    margin-left: inherit;
    margin-top: -7px;
    position: absolute;
}

.jsoneditor-schema-error .jsoneditor-popover.jsoneditor-right:before {
    border-right: 7px solid #4c4c4c;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    content: '';
    top: 19px;
    left: -14px;
    margin-left: inherit;
    margin-top: -7px;
    position: absolute;
}

.jsoneditor-schema-error:hover .jsoneditor-popover,
.jsoneditor-schema-error:focus .jsoneditor-popover {
    display: block;
    -webkit-animation: fade-in .3s linear 1, move-up .3s linear 1;
    animation: fade-in .3s linear 1, move-up .3s linear 1;
}

@-webkit-keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/*@-webkit-keyframes move-up {*/

/*from   { bottom: 24px; }*/

/*to { bottom: 32px; }*/

/*}*/

/*@-moz-keyframes move-up {*/

/*from   { bottom: 24px; }*/

/*to { bottom: 32px; }*/

/*}*/

/*@-ms-keyframes move-up {*/

/*from   { bottom: 24px; }*/

/*to { bottom: 32px; }*/

/*}*/

/* JSON schema errors displayed at the bottom of the editor in mode text and code */

.jsoneditor .jsoneditor-text-errors {
    width: 100%;
    border-collapse: collapse;
    color: var(--ColorFalse);
    border-top: var(--Line1);
}

.jsoneditor .jsoneditor-text-errors td {
    padding: 3px 6px;
    vertical-align: middle;
}

.jsoneditor-text-errors .jsoneditor-schema-error {
    border: none;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0 4px 0 0;
    background: url("img/jsoneditor-icons.svg") -168px -48px;
}

/* ContextMenu - main menu */

div.jsoneditor-contextmenu-root {
    position: relative;
    width: 0;
    height: 0;
}

div.jsoneditor-contextmenu {
    position: absolute;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    z-index: 99999;
}

div.jsoneditor-contextmenu ul,
div.jsoneditor-contextmenu li {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    position: relative;
}

div.jsoneditor-contextmenu ul {
    position: relative;
    left: 0;
    top: 0;
    width: 250px;
    background: var(--ColorGrey7);
    border: var(--Line1);
    -webkit-box-shadow: var(--BoxShadow2);
    box-shadow: var(--BoxShadow2);
    list-style: none;
}

div.jsoneditor-contextmenu ul li button {
    position: relative;
    padding: 0 var(--Space05) 0 0;
    margin: 0;
    width: 250px;
    height: auto;
    border: none;
    cursor: pointer;
    color: var(--ColorGrey1);
    background: transparent;
    font-size: var(--FontSize2);
    font-family: var(--Font3);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: left;
}

/* Fix button padding in firefox */

div.jsoneditor-contextmenu ul li button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

div.jsoneditor-contextmenu ul li button:hover,
div.jsoneditor-contextmenu ul li button:focus {
    color: #1a1a1a;
    background-color: #f5f5f5;
    outline: none;
}

div.jsoneditor-contextmenu ul li button.jsoneditor-default {
    width: 96px;
    /* 128px - 32px */
}

div.jsoneditor-contextmenu ul li button.jsoneditor-expand {
    float: right;
    width: 32px;
    height: 24px;
    border-left: 1px solid #e5e5e5;
}

div.jsoneditor-contextmenu div.jsoneditor-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    border: none;
    padding: 0;
    margin: 0;
    background-image: url("img/jsoneditor-icons.svg");
}

div.jsoneditor-contextmenu ul li ul div.jsoneditor-icon {
    margin-left: 24px;
}

div.jsoneditor-contextmenu div.jsoneditor-text {
    padding: 4px 0 4px 24px;
    word-wrap: break-word;
}

div.jsoneditor-contextmenu div.jsoneditor-text.jsoneditor-right-margin {
    padding-right: 24px;
}

div.jsoneditor-contextmenu ul li button div.jsoneditor-expand:before {
    content: 's';
    font-family: var(--FontIcons);
}

div.jsoneditor-contextmenu ul li button div.jsoneditor-expand {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0 4px 0 0;
    text-align: center;
    font-size: var(--FontSize3);
}

div.jsoneditor-contextmenu ul li.jsoneditor-selected div.jsoneditor-expand:before {
    content: 'r';
}

div.jsoneditor-contextmenu ul li button:hover div.jsoneditor-expand,
div.jsoneditor-contextmenu ul li button:focus div.jsoneditor-expand,
div.jsoneditor-contextmenu ul li.jsoneditor-selected div.jsoneditor-expand,
div.jsoneditor-contextmenu ul li button.jsoneditor-expand:hover div.jsoneditor-expand,
div.jsoneditor-contextmenu ul li button.jsoneditor-expand:focus div.jsoneditor-expand {
    opacity: 1;
}

div.jsoneditor-contextmenu div.jsoneditor-separator {
    height: 0;
    border-top: 1px solid #e5e5e5;
    padding-top: 5px;
    margin-top: 5px;
}

div.jsoneditor-contextmenu button.jsoneditor-remove>div.jsoneditor-icon {
    background-position: -24px -24px;
}

div.jsoneditor-contextmenu button.jsoneditor-remove:hover>div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-remove:focus>div.jsoneditor-icon {
    background-position: -24px 0;
}

div.jsoneditor-contextmenu button.jsoneditor-append>div.jsoneditor-icon {
    background-position: 0 -24px;
}

div.jsoneditor-contextmenu button.jsoneditor-append:hover>div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-append:focus>div.jsoneditor-icon {
    background-position: 0 0;
}

div.jsoneditor-contextmenu button.jsoneditor-insert>div.jsoneditor-icon {
    background-position: 0 -24px;
}

div.jsoneditor-contextmenu button.jsoneditor-insert:hover>div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-insert:focus>div.jsoneditor-icon {
    background-position: 0 0;
}

div.jsoneditor-contextmenu button.jsoneditor-duplicate>div.jsoneditor-icon {
    background-position: -48px -24px;
}

div.jsoneditor-contextmenu button.jsoneditor-duplicate:hover>div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-duplicate:focus>div.jsoneditor-icon {
    background-position: -48px 0;
}

div.jsoneditor-contextmenu button.jsoneditor-sort-asc>div.jsoneditor-icon {
    background-position: -168px -24px;
}

div.jsoneditor-contextmenu button.jsoneditor-sort-asc:hover>div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-sort-asc:focus>div.jsoneditor-icon {
    background-position: -168px 0;
}

div.jsoneditor-contextmenu button.jsoneditor-sort-desc>div.jsoneditor-icon {
    background-position: -192px -24px;
}

div.jsoneditor-contextmenu button.jsoneditor-sort-desc:hover>div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-sort-desc:focus>div.jsoneditor-icon {
    background-position: -192px 0;
}

div.jsoneditor-contextmenu button.jsoneditor-transform>div.jsoneditor-icon {
    background-position: -216px -24px;
}

div.jsoneditor-contextmenu button.jsoneditor-transform:hover>div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-transform:focus>div.jsoneditor-icon {
    background-position: -216px 0;
}

/* ContextMenu - sub menu */

div.jsoneditor-contextmenu ul li button.jsoneditor-selected,
div.jsoneditor-contextmenu ul li button.jsoneditor-selected:hover,
div.jsoneditor-contextmenu ul li button.jsoneditor-selected:focus {}

div.jsoneditor-contextmenu ul li {
    overflow: hidden;
}

div.jsoneditor-contextmenu ul li ul {
    display: none;
    position: relative;
    left: -10px;
    top: 0;
    border: none;
    -webkit-box-shadow: inset 0 0 10px rgba(128, 128, 128, 0.5);
    box-shadow: inset 0 0 10px rgba(128, 128, 128, 0.5);
    padding: 0 10px;
    /* TODO: transition is not supported on IE8-9 */
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

div.jsoneditor-contextmenu ul li ul li button {
    padding-left: 24px;
    -webkit-animation: all ease-in-out 1s;
    animation: all ease-in-out 1s;
}

div.jsoneditor-contextmenu ul li ul li button:hover,
div.jsoneditor-contextmenu ul li ul li button:focus {
    background-color: #f5f5f5;
}

div.jsoneditor-contextmenu button.jsoneditor-type-string>div.jsoneditor-icon {
    background-position: -144px -24px;
}

div.jsoneditor-contextmenu button.jsoneditor-type-string:hover>div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-type-string:focus>div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-type-string.jsoneditor-selected>div.jsoneditor-icon {
    background-position: -144px 0;
}

div.jsoneditor-contextmenu button.jsoneditor-type-auto>div.jsoneditor-icon {
    background-position: -120px -24px;
}

div.jsoneditor-contextmenu button.jsoneditor-type-auto:hover>div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-type-auto:focus>div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-type-auto.jsoneditor-selected>div.jsoneditor-icon {
    background-position: -120px 0;
}

div.jsoneditor-contextmenu button.jsoneditor-type-object>div.jsoneditor-icon {
    background-position: -72px -24px;
}

div.jsoneditor-contextmenu button.jsoneditor-type-object:hover>div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-type-object:focus>div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-type-object.jsoneditor-selected>div.jsoneditor-icon {
    background-position: -72px 0;
}

div.jsoneditor-contextmenu button.jsoneditor-type-array>div.jsoneditor-icon {
    background-position: -96px -24px;
}

div.jsoneditor-contextmenu button.jsoneditor-type-array:hover>div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-type-array:focus>div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-type-array.jsoneditor-selected>div.jsoneditor-icon {
    background-position: -96px 0;
}

div.jsoneditor-contextmenu button.jsoneditor-type-modes>div.jsoneditor-icon {
    background-image: none;
    width: 6px;
}

/* pico modal styling */

.jsoneditor-modal-overlay {
    position: absolute !important;
    background: rgb(1, 1, 1) !important;
    opacity: 0.3 !important;
}

.jsoneditor-modal {
    position: absolute !important;
    max-width: 100% !important;
    border-radius: 2px !important;
    padding: 45px 15px 15px 15px !important;
    -webkit-box-shadow: 2px 2px 12px rgba(128, 128, 128, 0.3) !important;
    box-shadow: 2px 2px 12px rgba(128, 128, 128, 0.3) !important;
    font-size: 10.5pt;
    font-family: arial, sans-serif;
    color: #4d4d4d;
    line-height: 1.3em;
}

.jsoneditor-modal .pico-modal-header {
    position: absolute;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
    font-family: arial, sans-serif;
    font-size: 11pt;
    background: #3883fa;
    color: white;
}

.jsoneditor-modal table th,
.jsoneditor-modal table td {
    padding: 5px 20px 5px 0;
    text-align: left;
    vertical-align: top;
    font-weight: normal;
    font-size: 10.5pt;
    font-family: arial, sans-serif;
    color: #4d4d4d;
    line-height: 32px;
}

.jsoneditor-modal p:first-child {
    margin-top: 0;
}

.jsoneditor-modal a {
    color: #3883fa;
}

.jsoneditor-modal table td.jsoneditor-modal-input {
    text-align: right;
    padding-right: 0;
    white-space: nowrap;
}

.jsoneditor-modal table td.jsoneditor-modal-actions {
    padding-top: 15px;
}

.jsoneditor-modal .pico-close {
    background: none !important;
    font-size: 24px !important;
    top: 7px !important;
    right: 7px !important;
    color: white;
}

.jsoneditor-modal select,
.jsoneditor-modal textarea,
.jsoneditor-modal input,
.jsoneditor-modal #query {
    background: #ffffff;
    border: 1px solid #d3d3d3;
    color: #4d4d4d;
    border-radius: 3px;
    padding: 4px;
    font-size: 10.5pt;
    font-family: arial, sans-serif;
}

.jsoneditor-modal input[type="button"],
.jsoneditor-modal input[type="submit"] {
    background: #f5f5f5;
    padding: 4px 20px;
}

.jsoneditor-modal select,
.jsoneditor-modal input {
    cursor: pointer;
}

.jsoneditor-modal input {
    padding: 4px;
}

.jsoneditor-modal input[type="text"] {
    cursor: inherit;
}

.jsoneditor-modal input[disabled] {
    background: #d3d3d3;
    color: #808080;
}

.jsoneditor-modal .jsoneditor-select-wrapper {
    position: relative;
    display: inline-block;
}

.jsoneditor-modal .jsoneditor-select-wrapper:after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #666;
    position: absolute;
    right: 8px;
    top: 10px;
    pointer-events: none;
}

.jsoneditor-modal select {
    padding: 3px 24px 3px 10px;
    width: 100%;
    max-width: 300px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-indent: 0;
    text-overflow: "";
    font-size: 10pt;
    line-height: inherit;
}

.jsoneditor-modal select::-ms-expand {
    display: none;
}

.jsoneditor-modal .jsoneditor-button-group input {
    padding: 4px 10px;
    margin: 0;
    border-radius: 0;
    border-left-style: none;
}

.jsoneditor-modal .jsoneditor-button-group input.jsoneditor-button-first {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-left-style: solid;
}

.jsoneditor-modal .jsoneditor-button-group input.jsoneditor-button-last {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-asc input.jsoneditor-button-asc,
.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-desc input.jsoneditor-button-desc {
    background: var(--ColorDeco1);
    color: var(--ColorGrey7);
}

.jsoneditor-modal #query,
.jsoneditor-modal .jsoneditor-transform-preview {
    width: 400px;
}

.jsoneditor-modal .jsoneditor-transform-preview {
    font-family: monospace;
    background: #f5f5f5;
    height: 200px;
}

.jsoneditor-modal .jsoneditor-transform-preview.jsoneditor-error {
    color: #ee422e;
}

.jsoneditor-modal .jsoneditor-jmespath-wizard {
    line-height: 1.2em;
    width: 100%;
    background: #ffffe0;
    border: 1px solid #ffe99a;
    padding: 0 10px 10px;
    border-radius: 3px;
}

.jsoneditor-modal .jsoneditor-jmespath-wizard-label {
    font-style: italic;
    margin: 4px 0 2px 0;
}

.jsoneditor-modal .jsoneditor-jmespath-filter-field {
    width: auto;
    max-width: 200px;
}

.jsoneditor-modal .jsoneditor-jmespath-filter-relation {
    width: auto;
}

.jsoneditor-modal .jsoneditor-jmespath-filter-value {
    width: 100px;
}

.jsoneditor-modal .jsoneditor-jmespath-sort-field {
    width: auto;
    max-width: 200px;
}

.jsoneditor-modal .jsoneditor-jmespath-sort-order {
    width: auto;
}

.jsoneditor-modal .jsoneditor-jmespath-select-fields {
    width: auto;
    max-width: 100%;
}

div.jsoneditor-menu-wrapper {
    background-color: var(--ColorGrey1);
    padding: var(--Space05) var(--Space3) var(--Space05) var(--Space1);
    color: var(--ColorGrey7);
}

div.jsoneditor-menu>button {
    background-color: var(--ColorTransparent);
    border-radius: 0;
}

div.jsoneditor-menu>button:focus,
div.jsoneditor-menu>button:active,
div.jsoneditor-menu>div.jsoneditor-modes>button:focus,
div.jsoneditor-menu>div.jsoneditor-modes>button:active {
    /* background-color: var(--ColorDeco1); */
}

div.jsoneditor-menu>button:disabled,
div.jsoneditor-menu>div.jsoneditor-modes>button:disabled {
    opacity: 0.5;
}

div.jsoneditor-menu>button.jsoneditor-collapse-all {
    background-position: 0 -96px;
}

div.jsoneditor-menu>button>icon {
    font-size: var(--FontSize4);
}

div.jsoneditor-menu>button.jsoneditor-undo {
    background-position: -24px -96px;
}

div.jsoneditor-menu>button.jsoneditor-undo:disabled {
    background-position: -24px -120px;
}

div.jsoneditor-menu>button.jsoneditor-redo {
    background-position: -48px -96px;
}

div.jsoneditor-menu>button.jsoneditor-redo:disabled {
    background-position: -48px -120px;
}

div.jsoneditor-menu>button.jsoneditor-compact {
    background-position: -72px -96px;
}

div.jsoneditor-menu>button.jsoneditor-format {
    background-position: -72px -120px;
}

div.jsoneditor-menu>button.jsoneditor-repair {
    background-position: -96px -96px;
}

div.jsoneditor-menu>div.jsoneditor-modes {
    display: inline-block;
    float: left;
}

div.jsoneditor-menu>div.jsoneditor-modes>button:hover {
    background-color: var(--ColorDeco1);
}

div.jsoneditor-menu>button.jsoneditor-separator,
div.jsoneditor-menu>div.jsoneditor-modes>button.jsoneditor-separator {
    margin-left: 10px;
    font-family: var(--Font3);
    font-size: var(--FontSize2);
}

div.jsoneditor-menu a {
    font-family: arial, sans-serif;
    font-size: 10pt;
    color: white;
    opacity: 0.8;
    vertical-align: middle;
}

div.jsoneditor-menu a:hover {
    opacity: 1;
}

div.jsoneditor-menu a.jsoneditor-poweredBy {
    font-size: 8pt;
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px;
}

table.jsoneditor-search div.jsoneditor-results {
    color: var(--ColorGrey7);
    padding-right: var(--Space1);
    font-family: var(--Font3);
}

table.jsoneditor-search {
    position: absolute;
    right: 4px;
    top: 4px;
    border-collapse: collapse;
    border-spacing: 0;
}

table.jsoneditor-search>tbody>tr:hover {
    background-color: initial;
}

table.jsoneditor-search>tbody>tr>td {
    border-right: none;
}

table.jsoneditor-search input {
    width: 120px;
    border: none;
    outline: none;
    margin: 1px;
    line-height: 20px;
}

table.jsoneditor-search button {
    padding: 0 var(--Space1);
    margin: 0;
    border: none;
    background-color: var(--ColorGrey1);
    vertical-align: top;
    font-size: var(--FontSize5);
}

div.jsoneditor div.autocomplete.dropdown {
    position: absolute;
    background: white;
    -webkit-box-shadow: 2px 2px 12px rgba(128, 128, 128, 0.3);
    box-shadow: 2px 2px 12px rgba(128, 128, 128, 0.3);
    border: 1px solid #d3d3d3;
    z-index: 100;
    overflow-x: hidden;
    overflow-y: auto;
    cursor: default;
    margin: 0;
    padding-left: 2pt;
    padding-right: 5pt;
    text-align: left;
    outline: 0;
    font-family: "dejavu sans mono", "droid sans mono", consolas, monaco, "lucida console", "courier new", courier, monospace, sans-serif;
    font-size: 10pt;
}

div.jsoneditor div.autocomplete.dropdown .item {
    color: #333;
}

div.jsoneditor div.autocomplete.dropdown .item.hover {
    background-color: #ddd;
}

div.jsoneditor div.autocomplete.hint {
    color: #aaa;
    top: 4px;
    left: 4px;
}

div.jsoneditor-treepath {
    padding: 0 5px;
    overflow: hidden;
}

div.jsoneditor-treepath div.jsoneditor-contextmenu-root {
    position: absolute;
    left: 0;
}

div.jsoneditor-treepath span.jsoneditor-treepath-element {
    margin: 1px;
    font-family: arial, sans-serif;
    font-size: 10pt;
}

div.jsoneditor-treepath span.jsoneditor-treepath-seperator {
    margin: 2px;
    font-size: 9pt;
    font-family: arial, sans-serif;
}

div.jsoneditor-treepath span.jsoneditor-treepath-element:hover,
div.jsoneditor-treepath span.jsoneditor-treepath-seperator:hover {
    cursor: pointer;
    text-decoration: underline;
}

div.jsoneditor-statusbar {
    line-height: 26px;
    height: 26px;
    margin-top: -1px;
    color: var(--ColorGrey0);
    background-color: var(--ColorGrey5);
    border-top: var(--Line1);
    font-family: var(--Font3);
}

div.jsoneditor-statusbar>.jsoneditor-curserinfo-label {
    margin: 0 2px 0 4px;
}

div.jsoneditor-statusbar>.jsoneditor-curserinfo-val {
    margin-right: 12px;
}

div.jsoneditor-statusbar>.jsoneditor-curserinfo-count {
    margin-left: 4px;
}

div.jsoneditor-navigation-bar {
    width: 100%;
    height: 26px;
    line-height: 26px;
    padding: 0;
    margin: 0;
    border-bottom: var(--Line1);
    color: var(--ColorGrey1);
    background-color: var(--ColorGrey6);
    font-family: var(--Font3);
    font-size: var(--FontSize2);
    /* overflow: hidden; */
}

/* ----------------------------------------------
 * PICKER
 * ----------------------------------------------
*/

/** * Note: the root picker element should *NOT* be styled more than what’s here. */

.picker {
    font-size: var(--FontSize2);
    font-family: var(--Font3);
    text-align: left;
    line-height: 1.2;
    color: var(--ColorGrey0);
    position: fixed;
    z-index: 10000;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/** * The picker input element. */

.picker__input {
    cursor: default;
}

/** * When the picker is opened, the input element is “activated”. */

.picker__input.picker__input--active {
    border-color: var(--ColorGrey3);
}

/** * The holder is the only “scrollable” top-level container element. */

.picker__holder {
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.picker--opened .picker__holder.time {
    max-height: 400px;
    overflow: auto;
}

/*! * Classic picker styling for pickadate.js * Demo: http://amsul.github.io/pickadate.js */

/** * Note: the root picker element should *NOT* be styled more than what’s here. */

.picker {
    width: 100%;
}

/** * The holder is the base of the picker. */

.picker__holder {
    position: absolute;
    bottom: 0;
    background: var(--ColorGrey7);
    border: var(--Line1);
    border-top-width: 0;
    border-bottom-width: 0;
    border-radius: 0 0 var(--Radius3) var(--Radius3);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 176px;
    max-width: 466px;
    max-height: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transform: translateY(-1em) perspective(600px) rotateX(10deg);
    transform: translateY(-1em) perspective(600px) rotateX(10deg);
    transition: -webkit-transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s 0.15s, border-width 0s 0.15s;
    -webkit-transition: opacity 0.15s ease-out, max-height 0s 0.15s, border-width 0s 0.15s, -webkit-transform 0.15s ease-out;
    transition: opacity 0.15s ease-out, max-height 0s 0.15s, border-width 0s 0.15s, -webkit-transform 0.15s ease-out;
    transition: transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s 0.15s, border-width 0s 0.15s;
    transition: transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s 0.15s, border-width 0s 0.15s, -webkit-transform 0.15s ease-out;
    overflow: hidden;
}

.picker__holder.bottom {
    bottom: auto;
    top: 0;
}

/** * The frame and wrap work together to ensure that * clicks within the picker don’t reach the holder. */

.picker__frame {
    padding: 1px;
}

.picker__wrap {
    margin: -1px;
}

/** * When the picker opens... */

.picker--opened .picker__holder {
    max-height: none;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    border-top-width: 1px;
    border-bottom-width: 1px;
    -webkit-transform: translateY(0) perspective(600px) rotateX(0);
    transform: translateY(0) perspective(600px) rotateX(0);
    transition: -webkit-transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s, border-width 0s;
    -webkit-transition: opacity 0.15s ease-out, max-height 0s, border-width 0s, -webkit-transform 0.15s ease-out;
    transition: opacity 0.15s ease-out, max-height 0s, border-width 0s, -webkit-transform 0.15s ease-out;
    transition: transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s, border-width 0s;
    transition: transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s, border-width 0s, -webkit-transform 0.15s ease-out;
    -webkit-box-shadow: 0 6px 18px 1px rgba(0, 0, 0, 0.12);
    box-shadow: 0 6px 18px 1px rgba(0, 0, 0, 0.12);
}

/* ========= $CLASSIC-DATE-PICKER ============= */

/** * The picker box. */

.picker__box {
    padding: var(--Space2) var(--Space2);
}

/** * The header containing the month and year stuff. */

.picker__header {
    text-align: center;
    position: relative;
    margin-top: .75em;
}

/** * The month and year labels. */

.picker__month,
.picker__year {
    font-size: var(--FontSize2);
    display: inline-block;
    margin-left: .25em;
    margin-right: .25em;
}

/** * The month and year selectors. */

.picker__select--month,
.picker__select--year {
    border: var(--Line1);
    height: 2em;
    padding: .5em;
    margin-left: .25em;
    margin-right: .25em;
}

@media (min-width: 24.5em) {
    .picker__select--month,
    .picker__select--year {
        margin-top: -0.5em;
    }
}

.picker__select--month {
    width: 35%;
}

.picker__select--year {
    width: 22.5%;
}

.picker__select--month:focus,
.picker__select--year:focus {
    border-color: var(--ColorGrey3);
}

/** * The month navigation buttons. */

.picker__nav--prev,
.picker__nav--next {
    position: absolute;
    padding: .5em 1.25em;
    width: 1em;
    height: 1em;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    top: -0.25em;
    font-size: var(--FontSize1);
}

@media (min-width: 24.5em) {
    .picker__nav--prev,
    .picker__nav--next {
        top: -0.33em;
    }
}

.picker__nav--prev {
    left: -1em;
    padding-right: 1.25em;
}

@media (min-width: 24.5em) {
    .picker__nav--prev {
        padding-right: 1.5em;
    }
}

.picker__nav--next {
    right: -1em;
    padding-left: 1.25em;
}

@media (min-width: 24.5em) {
    .picker__nav--next {
        padding-left: 1.5em;
    }
}

.picker__nav--prev:before,
.picker__nav--next:before {
    content: " ";
    border-top: .5em solid transparent;
    border-bottom: .5em solid transparent;
    border-right: 0.75em solid var(--ColorGrey0);
    width: 0;
    height: 0;
    display: block;
    margin: 0 auto;
}

.picker__nav--next:before {
    border-right: 0;
    border-left: 0.75em solid var(--ColorGrey0);
}

.picker__nav--prev:hover,
.picker__nav--next:hover {
    cursor: pointer;
    color: var(--ColorGrey0);
    background: var(--ColorDeco4);
}

.picker__nav--disabled,
.picker__nav--disabled:hover,
.picker__nav--disabled:before,
.picker__nav--disabled:before:hover {
    cursor: default;
    background: none;
    border-right-color: var(--ColorGrey3);
    border-left-color: var(--ColorGrey3);
}

/** * The calendar table of dates */

.picker__table {
    text-align: center;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    font-size: inherit;
    width: 100%;
    margin-top: .75em;
    margin-bottom: .5em;
}

@media (min-height: 33.875em) {
    .picker__table {
        margin-bottom: .75em;
    }
}

.picker__table td {
    margin: 0;
    padding: 0;
}

/** * The weekday labels */

.picker__weekday {
    width: 14.285714286%;
    /* font-size: var(--FontSize1); */
    /* padding-bottom: .25em; */
    /* color: var(--ColorGrey4); */
    padding: var(--Space05) 0;
    text-align: center;
    /* Increase the spacing a tad */
}

@media (min-height: 33.875em) {
    .picker__weekday {
        padding-bottom: .5em;
    }
}

/** * The days on the calendar */

.picker__day {
    padding: .3125em 0;
    border: 1px solid transparent;
}

.picker__day--today {
    position: relative;
}

.picker__day--today:before {
    content: " ";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 0;
    height: 0;
    border-top: 0.5em solid var(--ColorGrey3);
    border-left: .5em solid transparent;
}

.picker__day--disabled:before {
    border-top-color: var(--ColorGrey7);
}

.picker__day--outfocus {
    color: var(--ColorGrey6);
}

.picker__day--infocus:hover,
.picker__day--outfocus:hover,
.picker__list-item:hover {
    cursor: pointer;
    color: var(--ColorGrey0);
    background: var(--ColorDeco4);
}

.picker__list-item {
    padding: var(--Space1);
}

.picker__day--highlighted {
    border-color: var(--ColorDeco1);
}

.picker__day--highlighted:hover,
.picker--focused .picker__day--highlighted {
    cursor: pointer;
    color: var(--ColorGrey0);
    background: var(--ColorDeco4);
}

.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
    background: var(--ColorDeco1);
    color: var(--ColorGrey7);
}

.picker__day--disabled,
.picker__day--disabled:hover,
.picker--focused .picker__day--disabled {
    background: var(--ColorGrey6);
    border-color: var(--ColorGrey6);
    color: var(--ColorGrey6);
    cursor: default;
}

.picker__day--highlighted.picker__day--disabled,
.picker__day--highlighted.picker__day--disabled:hover {
    background: var(--ColorGrey6);
}

/** * The footer containing the "today", "clear", and "close" buttons. */

.picker__footer {
    text-align: center;
}

.picker__button--today,
.picker__button--clear,
.picker__button--close {
    margin: 0 1px;
}

.picker__button--today:last-child,
.picker__button--clear:last-child,
.picker__button--close:last-child {
    margin-right: 0px;
}

.picker__button--today:hover,
.picker__button--clear:hover,
.picker__button--close:hover {
    cursor: pointer;
}

.picker__button--today:focus,
.picker__button--clear:focus,
.picker__button--close:focus {
    outline: none;
}

.picker__button--clear:before {
    top: -0.25em;
    width: .66em;
    border-top: 3px solid var(--ColorDeco2);
}

.picker__button--today[disabled],
.picker__button--today[disabled]:hover {
    background: var(--ColorGrey6);
    border-color: var(--ColorGrey6);
    color: var(--ColorGrey6);
    cursor: default;
}

.picker__button--today[disabled]:before {
    border-top-color: var(--ColorGrey6);
}

/* ----------------------------------------------
 * HELPER / SPECIAL Classes
 * ----------------------------------------------
*/

/* .disabled,
[disabled],
.disabled:hover,
[disabled]:hover {
    opacity: 0.1;
    user-select: none;
} */

.hidden,
[hidden] {
    display: none !important;
}

.right {
    float: right;
}

.noselect {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}

/* ----------------------------------------------
 * CSS TEMPLATE PRINTING
 * ----------------------------------------------
*/

@page {
    size: 85mm 55mm;
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

print {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    border: none;
    page-break-after: always;
}

print .logo {
    width: 30mm;
    height: auto;
}

print .card-structure {
    height: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: none;
}

print .logo {
    width: 15mm;
    height: auto;
    float: right;
    padding: 0;
    margin: 0;
}

print .photo {
    width: 20mm;
    height: 20mm;
    -o-object-fit: cover;
    object-fit: cover;
}

print .card-structure .card-header {
    background-color: var(--ColorGrey5);
}

print .card-structure .card-header>table {
    height: 100%;
    width: 100%;
}

print .card-structure .card-photo {
    vertical-align: middle;
}

print .card-structure .card-logo {
    text-align: right;
    vertical-align: top;
    padding-top: 5mm;
    padding-right: 0;
}

print .card-structure .card-code {
    vertical-align: bottom;
    text-align: right;
    padding: 0;
}

print .card-structure .card-body {
    height: 25mm;
}

print table>tbody>tr>td {
    border: none;
    border-right: none;
    line-height: 1em;
}

print table>tbody>tr {
    border-bottom: none;
}

print table>tbody>tr:hover {
    background-color: initial;
}

print .card-body table tr td:first-child {
    width: 1%;
    font-weight: bold;
}

/* SMARTPHONES */

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
    .hide-mobile {
        display: none;
    }
    .select {
        width: 100%;
    }
    table.jsoneditor-search {
        display: none;
    }
    div.jsoneditor-menu>button {
        padding: 0 var(--Space05);
    }
    filter.second {
        padding: 0 var(--Space1);
    }
    .context-menu {
        height: auto;
        width: 95%;
        max-height: 60%;
        max-width: 600px;
        position: fixed;
        padding-bottom: var(--Space2);
        -webkit-box-shadow: var(--BoxShadow2);
        box-shadow: var(--BoxShadow2);
        overflow: auto;
        top: 50% !important;
        left: 50% !important;
        z-index: 999;
        -webkit-transform: translate(-50%, -50%) !important;
        transform: translate(-50%, -50%) !important;
        padding-bottom: var(--Space2);
        z-index: 2;
        overflow: auto;
    }
    .detail detail-body {
        padding-bottom: 100px;
    }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2),
(min-width: 768px) and (max-width: 1024px) {
    :root {
        --HeightHeader: 45px;
    }
    .mobile-only {
        display: block;
    }
    .desktop-only {
        display: none;
    }
    main {
        padding: var(--Space1) var(--Space2) 0 var(--Space2);
    }
    main>section,
    .section {
        padding: var(--Space1);
    }
    header {
        padding: 0;
    }
    header button.menu,
    header .button.menu {
        font-size: var(--Space3);
        padding: 0 var(--Space1);
        background-color: var(--ColorTransparent);
    }
    header button.menu:hover,
    header .button.menu:hover,
    header button.menu:active,
    header .button.menu:active,
    header .button.menu:focus,
    header button.menu:focus {
        background-color: transparent;
        outline: none;
    }
    footer {
        /* display: none !important; */
    }
    nav-header {
        display: block;
        height: var(--HeightHeader);
        width: 100%;
        background-color: var(--ColorGrey7);
        /* border-bottom: var(--Line1); */
    }
    nav.main {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
        z-index: 2;
        background-color: var(--ColorGrey7);
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        padding: 0;
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
    nav.main>ul {
        padding: var(--Space3) var(--Space2);
    }
    nav.main button.menu,
    nav.main .button.menu {
        background-color: var(--ColorTransparent);
        color: var(--ColorDeco1);
        font-size: 30px;
        line-height: var(--HeightHeader);
        height: var(--HeightHeader);
        padding: 0 var(--Space1);
        margin-right: 0;
    }
    nav.main button.menu.inverted,
    nav.main .button.menu.inverted {
        color: var(--ColorGrey2);
    }
    nav.main.toggled {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    nav.main>ul>li {
        display: block;
    }
    form .cols {
        /* flex-direction: column; */
        -webkit-box-align: initial;
        -ms-flex-align: initial;
        align-items: initial;
    }
    form label {
        margin-bottom: var(--Space05);
    }
    dropdown-edit .cols {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    product-info {
        display: none;
    }
    socket-status status>p {
        display: none;
    }
    .detail,
    contact-detail,
    visit-invitation {
        width: 100%;
        max-width: 600px;
        height: 100%;
    }
    detail-body form {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important;
    }
    .detail .detail-form,
    .detail detail-footer {
        padding: var(--Space2);
    }
    .detail detail-footer {
        background-color: var(--ColorGrey7);
    }
    body,
    html {
        overflow: hidden !important;
        width: 100%;
        height: 100%;
    }
    filter-container {
        /* overflow: hidden; WHY???? */
    }
    filter-container .change-filter {
        background-color: var(--ColorGrey2);
    }
    filter-button {
        min-width: var(--Space3) !important;
        width: var(--Space3) !important;
    }
    input,
    textarea {
        font-size: initial !important;
    }
    language-selector {
        float: right;
    }
    language-selector ul {
        padding: 0;
        margin: 0 var(--Space1) 0 0;
        line-height: var(--HeightHeader);
    }
    nav-header language-selector a {
        font-size: var(--FontSize3);
    }
    table>tbody>tr>td img {
        width: 100px;
        vertical-align: middle;
    }
}

/* TABLET & IPAD */

@media (min-width: 768px) and (max-width: 1024px) {
    nav.main {
        width: 300px;
        left: -300px;
    }
    body.toggled article {
        -webkit-transform: translate3d(300px, 0, 0);
        transform: translate3d(300px, 0, 0);
    }
}