body {
    background-color: #383838;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 300;

    -webkit-touch-callout: none;    /* iOS Safari */
    -webkit-user-select: none;      /* Safari */
    -khtml-user-select: none;       /* Konqueror HTML */
    -moz-user-select: none;         /* Firefox */
    -ms-user-select: none;          /* Internet Explorer/Edge */
    user-select: none;              /* Non-prefixed version, currently supported by Chrome and Opera */
    cursor: default;
}

.default-font {
    font-family: Roboto, sans-serif;
}

textarea  {
    font-family: Roboto, sans-serif;
}

input   {
    font-family: Roboto, sans-serif;
}

.popover {
    font-family: Roboto, sans-serif;
}

.font-weight-100 { font-weight: 100; }
.font-weight-200 { font-weight: 200; }
.font-weight-300 { font-weight: 300; }
.font-weight-400 { font-weight: 400; }
.font-weight-500 { font-weight: 500; }
.font-weight-600 { font-weight: 600; }
.font-weight-700 { font-weight: 700; }
.font-weight-800 { font-weight: 800; }
.font-weight-900 { font-weight: 900; }

.effigos-symbol {
    font-family: EffigosSymbol;
    font-size: inherit;
}

input[type=checkbox], input[type=radio] {
    cursor: pointer;
}

.pointer-none {
    pointer-events: none;
}

.noselect {
    -webkit-touch-callout: none;    /* iOS Safari */
    -webkit-user-select: none;      /* Safari */
    -khtml-user-select: none;       /* Konqueror HTML */
    -moz-user-select: none;         /* Firefox */
    -ms-user-select: none;          /* Internet Explorer/Edge */
    user-select: none;              /* Non-prefixed version, currently supported by Chrome and Opera */
}

.checkbox.disabled input[type=checkbox], input[type=radio] {
    cursor: default;
    opacity: 0.5;
}

body div#root {
    position: absolute;
    width: 100%;
    height: 100%;
}

body > div:not(.oe-modal-root)  {
    transition: filter 0.33s ease;
}

body > div > * {
    filter: none;
    pointer-events: unset;
    transition: all 0s ease 0s;
}

div {
    display: block;
}

span {
    display: inline-block;
}

html.disable-page-scrolling {
    overflow: hidden;
}

body.disable-page-scrolling {
    position: fixed;
    overflow: hidden;
    top: 0; right: 0; bottom: 0; left: 0;
}

.unit-size-observer   {
    width: 1em !important;          /*16px*/
    height: 1em !important;         /*16px*/
}

/* --------------------------------------------------------------------------- */
/* fix bootstrap styles */
a:hover {
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

/* --------------------------------------------------------------------------- */
.popover-pin    {
    position: absolute;
}

.fullscreen-element {
    visibility: visible !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.fullscreen-element * {
    visibility: visible !important;
}

.themecolor,
.themecolor:hover {
    background-color: #4fa3d1;
}

.opacity-0   {
    opacity: 0;
}

.window {
    position: absolute;
    height: 100%;
    width: 100%;
}

.back-drop  {
    z-index: 1049;
}

.backdrop-blur {
    background-color: rgba(64, 64, 64, .6);
}
 
@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
    .backdrop-blur {
        background-color: rgba(0, 0, 0, 0);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
    }
}

div.anim-auto-size-container .content {
    display: block;
    width: auto; height: auto;
    transition: none;
}

.gray-filter {
    -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
}

.multi-column-container {
    display: inline-flex;
    flex-flow: column wrap;
    width: auto;
    padding: 0;
}

.multi-column-container > * {
    display: inline-block;
}

.layout-size-container  {
    display: grid;
}

.layout-size-container .layout-size-container-item  {
    grid-column: 1;
    grid-row: 1;
}

.pe-none {
    pointer-events: none;
}

a.oe-button.disabled {
    pointer-events: initial;
}

/* --------------------------------------------------------------------------- */
/* fix bootstrap btn disabled styles */
.btn {
    font-size: 1em;                 /*16px*/
    padding: 0.375em 0.75em;        /*6px 12px*/
    line-height: 1.5;
    border-radius: 0.25em;          /*4px*/
    cursor: pointer !important;
}

.btn.disabled, .btn[disabled] {
    cursor: initial !important;
}

.btn-primary:hover {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary.disabled:hover, .btn-primary[disabled]:hover {
    background-color: #007bff;
}

.btn-secondary:hover {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-secondary.disabled:hover, .btn-secondary[disabled]:hover {
    background-color: #6c757d;
}

/* --------------------------------------------------------------------------- */
/* icon fonts */
.icon {
    display: inline-block;
    margin: 0;
    padding: 0;
    text-align: center;
    vertical-align: baseline;
}

.icon.valign-middle  {
    vertical-align: middle;
}

.icon.valign-middle div  {
    vertical-align: middle;
}

.icon div {
    display: inline;
}

.middle-align-btn .icon  {
    vertical-align: middle;
}

.icon.rotate-180.icon-code-uF122    {
    transform: rotate(180deg) translateY(0.09375em);
}

/* --------------------------------------------------------------------------- */
.navigation-view.not-on-top {
    display: none;
}

.hello-world-app div {
    display: inline-block;
    color: #fff;
}

.hello-world-app button  {
    display: inline-block;
}

.oe-embed-container {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}

iframe.oe-embed {
    transition: filter 0.33s ease;
}

.oe-embed iframe {
    position: absolute;
    height: 100%;
    width: 100%;
    border: none;
    box-shadow: none;
}

div.hello-world {
    position: absolute;
    top: 2em;                       /*32px*/
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    border: none;
    box-shadow: none;
}

.hello-world iframe {
    position: absolute;
    height: 100%;
    width: 100%;
    border: none;
    box-shadow: none;
}

div.app-container {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

div.oe-module-container {
    position: relative;
    width: 100%;
    flex-grow: 1;
    transition: filter 0.33s ease;
}

div.ui-layer {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    transition: filter 0.33s ease;
}

a span {
    vertical-align: baseline;
}

a i {
    vertical-align: baseline;
}

button {
    font-size: 1em;
    border: none;
}

button span {
    vertical-align: baseline;
}

button i {
    vertical-align: baseline;
}

button:focus {
    border: none;
    outline: none;
}

a:focus {
    border: none;
    outline: none;
}

.separator {
    display: block;
    height: 0;
    border-bottom: 1px solid;
}

.p-absolute-center   {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* OEWidgetHeader */
.widget-header  {
    font-size: 0.75em;              /*12px*/
    display: block;
    position: relative;
    padding: 0;
    color: inherit;
    line-height: 1.2;
    font-weight: 500;
    background-color: rgba(0, 0, 0, 0.0);
}

.widget-header .content {
    display: flex;
    justify-content: space-between;
    position: relative;
    height: 2.16667em;              /*26px*/
    font-size: inherit;
    line-height: inherit;
    padding: 0 0 0 0.41667em;       /*0 0 0 5px*/
}

.widget-header .separator {
    margin-top: 0.16667em;          /*2px*/
    border-width: 0.16667em;        /*2px*/
}

.widget-header .title {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.widget-header .title span {
    display: inline-block;
    margin-left: 0.75em;            /*9px*/
    margin-top: 0.6667em;           /*8px*/
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.widget-header .title .icon {
    font-size: 1.41667em;           /*17px*/
    display: inline-block;
    color: inherit;
    margin-left: 0.117647em;        /*2px*/
}

.widget-header .draggable-handle    {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.widget-header .buttons   {
    margin: 0 0.5em;                /*0 6px*/
    z-index: 1;
}

.widget-header .center-bar   {
    margin: 0 0.5em;                /*0 6px*/
    z-index: 1;
}

.widget-header button, .widget-header a {
    font-size: 1.3333em;            /*16px*/
    display: inline-block;
    vertical-align: top;
    margin: 0 0.125em;              /*0 2px*/
    color: inherit;
    background-clip: padding-box;
    border-radius: 0.1875em;        /*3px*/
    text-shadow: none; 
    width: 1.5em;                   /*24px*/
    height: 1.5em;                  /*24px*/
    padding: 0;
    opacity: 1;
    line-height: 1.5;               /*24px*/
    text-align: center;
}

.widget-header .center-bar a   {
    margin-top: 0.125em;            /*2px*/
}

/* --------------------------------------------------------------------------- */
/* popover */
.popover-target {
    font-size: 1em;                 /*16px*/
    position: absolute;
    top: 0;
    right: -0.375em;                /*-6px*/
    left:  -0.375em;                /*-6px*/
    height: 0;
}

.popover {
    font-size: 1em;                 /*16px*/
    z-index: 1048;                  /* 2 below modals*/
    max-width: initial;
    border-radius: 0.3em;           /*4.8px*/
}

.popover.with-backdrop {
    z-index: 1049; /* 1 below modals, renders in front of cap bar*/
}

.popover-control {
    border: none;
    border-radius: 0;
    font-weight: 500;
}

.popover-control .popover-body {
    display: block;
    position: relative;
    padding: 0;
    color: inherit;
    font-weight: 400;
    background-color: rgba(0, 0, 0, 0.0);
}

.popover .popover-target {
    font-size: 1em;                 /*16px*/
}

.popover-control .popover-header {
    border-bottom-style: none;
}

.popover-control .popover-header::before    {
    border-bottom-style: none !important;
}

.popover-control .popover-head-popover-target {
    position: absolute;
    top: -1.625em;                  /*-26px*/
    right: -0.375em;                /*-6px*/
    left: 0;
}

.popover-control button {
    color: inherit;
    border: none;
}

.popover-control button:hover {
    color: inherit;
}

.popover-control .transparent-btn {
    background-color: rgba(0, 0, 0, 0.3);
}

.popover-control .transparent-btn.disabled:hover  {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

.popover-control .transparent-btn.disabled.active:hover {
    background-color: rgba(128, 128, 128, 0.8) !important;
}

.popover .arrow {
    color: rgba(0, 0, 0, 0);
}

.popover .arrow::before {
    color: rgba(0, 0, 0, 0);
}

.popover .arrow::after {
    color: rgba(0, 0, 0, 0);
}

.popover[x-placement^=right] .arrow {
    border-right-color: inherit !important;
}

.popover[x-placement^=right] .arrow::before {
    border-right-color: rgba(0, 0, 0, 0) !important;
}

.popover[x-placement^=right] .arrow::after {
    border-right-color: inherit !important;
}

.popover[x-placement^=left] .arrow {
    border-left-color: inherit !important;
}

.popover[x-placement^=left] .arrow::before {
    border-left-color: rgba(0, 0, 0, 0) !important;
}

.popover[x-placement^=left] .arrow::after {
    border-left-color: inherit !important;
}

.popover[x-placement^=top] .arrow {
    border-top-color: inherit !important;
}

.popover[x-placement^=top] .arrow::before {
    border-top-color: rgba(0, 0, 0, 0) !important;
}

.popover[x-placement^=top] .arrow::after {
    border-top-color: inherit !important;
}

.popover[x-placement^=bottom] .arrow {
    border-bottom-color: inherit !important;
}

.popover[x-placement^=bottom] .arrow::before {
    border-bottom-color: rgba(0, 0, 0, 0) !important;
}

.popover[x-placement^=bottom] .arrow::after {
    border-bottom-color: inherit !important;
}

.popover .arrow {
    width: 1em;
    height: 0.5em;
    margin: 0 0.3em;
}

.bs-popover-auto[x-placement^=right], .bs-popover-right {
    margin-left: 0.5em;
}

.bs-popover-auto[x-placement^=right] .arrow, .bs-popover-right .arrow {
    left: calc((0.5em - 0.0625em)* -1);
    width: 0.5em;
    height: 1em;
    margin: 0.3em 0;
}

.bs-popover-auto[x-placement^=right] .arrow::after,
.bs-popover-auto[x-placement^=right] .arrow::before,
.bs-popover-right .arrow::after,
.bs-popover-right .arrow::before {
    border-width: 0.5em 0.5em 0.5em 0;
}

.bs-popover-auto[x-placement^=right] .arrow::after,
.bs-popover-right .arrow::after {
    left: 0;
}

.bs-popover-auto[x-placement^=left], .bs-popover-left {
    margin-right: 0.5em;
}

.bs-popover-auto[x-placement^=left] .arrow, .bs-popover-left .arrow {
    right: calc((0.5em - 0.0625em)* -1);
    width: 0.5em;
    height: 1em;
    margin: 0.3em 0;
}

.bs-popover-auto[x-placement^=left] .arrow::after,
.bs-popover-auto[x-placement^=left] .arrow::before,
.bs-popover-left .arrow::after,
.bs-popover-left .arrow::before {
    border-width: 0.5em 0 0.5em 0.5em;
}

.bs-popover-auto[x-placement^=left] .arrow::after,
.bs-popover-left .arrow::after  {
    right: 0;
}

.bs-popover-auto[x-placement^=top], .bs-popover-top {
    margin-bottom: 0.5em;
}

.bs-popover-auto[x-placement^=top] .arrow, .bs-popover-top .arrow {
    bottom: calc((0.5em - 0.0625em)* -1);
}

.bs-popover-auto[x-placement^=top] .arrow::after,
.bs-popover-auto[x-placement^=top] .arrow::before,
.bs-popover-top .arrow::after,
.bs-popover-top .arrow::before {
    border-width: 0.5em 0.5em 0;
}

.bs-popover-auto[x-placement^=top] .arrow::after,
.bs-popover-top .arrow::after   {
    bottom: 0;
}

.bs-popover-auto[x-placement^=bottom], .bs-popover-bottom {
    margin-top: 0.5em;
}

.bs-popover-auto[x-placement^=bottom] .arrow, .bs-popover-bottom .arrow {
    top: calc((0.5em - 0.0625em)* -1);
}

.bs-popover-auto[x-placement^=bottom] .arrow::after,
.bs-popover-auto[x-placement^=bottom] .arrow::before,
.bs-popover-bottom .arrow::after,
.bs-popover-bottom .arrow::before {
    border-width: 0 0.5em 0.5em 0.5em;
}

.bs-popover-auto[x-placement^=bottom] .arrow::after,
.bs-popover-bottom .arrow::after    {
    top: 0;
}

.popover.hide-arrow {
    margin: 0;
}

.popover .widget-header {
    font-size: 0.75em;              /*12px*/
}

div.draggable-container    {
    display: inline-block;
}

/* jquery-ui slider */
.ui-slider  {
    font-size: 0.875em;             /*14px*/
    border-radius: 0.2857em;
}

.ui-slider-handle {
    outline: none;
}

.ui-slider-horizontal .ui-slider-handle {
    padding: 0.3em;                 /*4.2px*/
    margin-left: -0.9em;            /*-12.6px*/
    top: -0.8em;                    /*-11.2px*/
    width: auto;
    height: auto;
}

.ui-slider > .ui-slider-handle {
    background: none;
    border: none;
}

.ui-slider-horizontal .ui-slider-handle span    {
    position: relative;
    display: inline-block;
    top: 0.22em;                    /*3.08px*/
    margin: 0;
    padding: 0;
    width: 1.2em;                   /*16.8px*/
    height: 1.2em;                  /*16.8px*/
}

.ui-slider:hover {
    cursor: pointer;
}

.ui-slider-disabled:hover {
    cursor: initial;
}

.ui-slider .ui-slider-handle:hover {
    cursor: pointer;
}

.ui-slider-disabled .ui-slider-handle:hover {
    cursor: initial;
}

/* reactstrap modal dialog */
.modal-dialog {
    font-size: 1em;                 /*16px*/
    position: relative;
    width: auto;
    margin: 12vh 1.875em 0.625em 1.875em;   /*12vh 30px 10px 30px*/
}

/*overwrite inappropriate styles from reactstrap*/
@media (min-width: 576px)   {
    .modal-dialog {
        max-width: 31.25em;         /*500px*/
        margin: 1.75em auto;
    }
}

.modal-content  {
    border-radius: 0.3em;           /*4.8px*/
}

.modal-header   {
    padding: 1em;                   /*16px*/
    border-top-left-radius: 0.3em;      /*4.8px*/
    border-top-right-radius: 0.3em;     /*4.8px*/
}

.modal-body {
    padding: 1em;
}

/* */

.modal-header .modal-title {
    font-size: 1.25em;              /*20px*/
    display: inline-block;
}

.modal-header .close-btn {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0.375px 0.75em;        /*6px 12px*/ 
}

.modal.fullscreen-modal {
    opacity: 1 !important;
    overflow: hidden;
}

.modal.fullscreen-modal * {
    visibility: initial !important;
}

.modal-backdrop.fullscreen-modal    {
    opacity: 0;
}

.modal.fullscreen-modal .modal-dialog {
    max-width: 100%;
    height: 100%;
    margin: 0;
}

.modal.fade.fullscreen-modal .modal-dialog {
    -webkit-transform: translate(0,100%) !important;
    transform: translate(0,100%) !important;
}

.modal.show.fullscreen-modal .modal-dialog {
    -webkit-transform: translate(0,0) !important;
    transform: translate(0,0) !important;
}

.modal.fullscreen-modal .modal-dialog .modal-content {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
}

.modal.fullscreen-modal .modal-dialog .oe-modal-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: black;
}

.modal.fullscreen-modal .modal-dialog .modal-body {
    padding: 0;
}

.modal.v-center .modal-dialog   {
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
}

.modal.clear-bg .modal-content   {
    background-color: rgba(0,0,0,0);
    border: none;
}

/* --------------------------------------------------------------------------- */
/* logo */
div.logo-view   {
    transition: opacity 0.3s ease;
}

div.logo-view.masked   {
    opacity: 0;
}

div.logo-view img   {
    width: auto; height: auto;
}

div.company-logo   {
    font-size: 1em;                 /*16px*/
    position: absolute;
    top: 1.25em;                    /*20px*/
    right: 6.25em;                  /*100px*/
    width: auto; height: auto;
    background-color: rgba(0, 0, 0, 0);
}

.ui-layer div.company-logo   {
    top: auto; right: auto;
    padding: 0 0 1.25em 1.25em;     /*0 0 20px 20px*/
    z-index: 1;
}

/* --------------------------------------------------------------------------- */
/* std styles */
.stdBackgroundColor {
    background-color: rgba(0, 0, 13, 0.4) !important;
}

.stdLabelTextColor {
    color: rgba(255, 255, 255, 1) !important;
}

.iconTextBtn {
    display: inline-block;
    text-align: center;
}

.iconTextBtn span {
    display: block;
} 

.rotate-180 {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.rot-toggle {
    font-size: 1.09375em;           /*17.5px*/
    display: inline-block;
    padding-left: 0;
    padding-top: 0;
    text-align: center;
    transform-origin: center;
    transition: transform 0.3s ease; 
}

.rot-toggle .icon   {
    vertical-align: middle;
}

.rot-rotate-toggle   {
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.full-transparent-btn:focus {
    border: none;
    outline: none;
}

.full-transparent-btn {
    border: none;
    outline: none;
    background-color: transparent !important;
}

.full-transparent-btn:hover {
    /*
    opacity: 0.75;
    */
    cursor: pointer;
    background-color: transparent !important;
}

.full-transparent-btn.disabled {
    opacity: 0.5;
    background-color: transparent !important;
}

.full-transparent-btn.disabled:hover {
    opacity: 0.5;
    cursor: initial;
    background-color: transparent !important;
}

.transparent-btn:focus {
    border: none;
    outline: none;
}

.transparent-btn {
    border: none;
    outline: none;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

.transparent-btn.disabled {
    opacity: 0.5;
}

.transparent-btn.active  {
    background-color: rgba(128, 128, 128, 0.8) !important;
}

.transparent-btn:hover  {
    /*
    background-color: rgba(128, 128, 128, 0.4) !important;
    */
    cursor: pointer;
}

.transparent-btn.disabled:hover {
    cursor: initial;
    background-color: transparent !important;
}

/*
.transparent-btn.active:hover  {
    background-color: rgba(128, 128, 128, 0.7) !important;
}
*/

.transparent-btn.disabled.active:hover {
    background-color: rgba(128, 128, 128, 0.8) !important;
    cursor: initial;
}

.transparent-btn-hover:hover  {
    /*
    background-color: rgba(128, 128, 128, 0.4) !important;
    */
    cursor: pointer;
}

.std-transparent-btn:focus {
    border: none;
    outline: none;
}

.std-transparent-btn {
    border: none;
    outline: none;
    transition: background-color 0.3s ease, opacity 0.3s ease; 
}

.std-transparent-btn.disabled {
    opacity: 0.5;
}

.std-transparent-btn.active  {
    background-color: rgba(178, 178, 178, 0.8) !important;
}

.std-transparent-btn:hover  {
    /*
    background-color: rgba(178, 178, 178, 0.4) !important;
    */
    cursor: pointer;
}

/*
.std-transparent-btn.active:hover  {
    background-color: rgba(178, 178, 178, 0.7) !important;
}
*/

.std-transparent-btn.disabled.active:hover {
    background-color: rgba(178, 178, 178, 0.8) !important;
    cursor: initial;
}

.std-transparent-btn.disabled:hover {
    cursor: initial;
}

/* --------------------------------------------------------------------------- */
/* bg-loading-display */
.bg-loading-display {
    font-size: 0.625em;             /*10px*/
    position: absolute;
    text-align: right;
    bottom: 0.4em;                  /*4px*/
    right: 0.4em;                   /*4px*/
    color: #fff;
    background-color: rgba(0, 0, 0, 0);
    z-index: 1;
    text-align: left;
}

.bg-loading-display span {
    margin: 0;
    padding: 0;
}

.bg-loading-display-progress-bar {
    display: block;
    height: 0.4em;                  /*4px*/
    margin: 0;
    padding: 0;
    min-width: 15em;                /*150px*/
}

.bg-loading-display-progress-bar-inner {
    display: block;
    width: 0%;
    height: 0.4em;                  /*4px*/
    background-color: rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------------------- */
/* post-process-panel */
.post-process-panel {
    font-size: 1em;                 /*16px*/
    width: 15.625em;                /*250px*/
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0.5em;                 /*8px*/
}

/* --------------------------------------------------------------------------- */
/* dev-tools */
.dev-tools {
    font-size: 1em;                 /*16px*/
    position: absolute;
    margin: 2em;                    /*32px*/
    z-index: 3;
}

/* --------------------------------------------------------------------------- */
/* theme-indicator */
.theme-indicator-controller   {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    background-color: rgba(0, 0, 0, 0.0);
    z-index: 1100;                  /* 40 over react strap modals*/
}

.theme-indicator-controller.dim   {
    background-color: rgba(0, 0, 0, 0.6);
}

.theme-indicator-controller-window-portal  {
    filter: none !important;        /* set to none otherwise filter blur from OEBlurModalBackdropLayer -> body > div:not(.oe-modal-root) applies and breaks height: 100% */
}

.theme-indicator-view   {
    margin: auto;
    position: absolute;
    width: 5%;
    height: 5%;
    top: 0;
    right: 0;
    bottom: 30%;
    left: 0;
}

.theme-indicator-view svg   {
    margin: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.theme-indicator-view .activity-ring  {
    -webkit-animation: rotation 1s linear infinite;
    -moz-animation: rotation 1s linear infinite;
    -o-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}

button.navbar-toggler:focus  {
    /* fixes button:focus */
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* --------------------------------------------------------------------------- */
/* custom scrollbar */
.custom-scrollbar   {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.custom-scrollbar-view   {
    position: absolute;
    inset: 0px;
    overflow: scroll;
    scrollbar-width: none;
}

.custom-scrollbar-content   {
    position: relative;
}

.track-horizontal,
.track-vertical   {
    position: absolute;
    bottom: 0;
    width: auto;
    height: auto;
    transition: opacity 0.3s ease;
}

.track-horizontal   {
    right: 0;
    left: 0;
    height: 0.375em;                /*6px*/
}

.show-track-gap .track-horizontal {
    right: 0.375em;                 /*6px*/
}

.track-vertical   {
    top: 0;
    right: 0;
    width: 0.375em;                 /*6px*/
}

.show-track-gap .track-vertical {
    bottom: 0.375em;                /*6px*/
}

.thumb-horizontal,
.thumb-vertical   {
    position: absolute;
    border-radius: 0.125em;         /*2px*/
}

.thumb-horizontal {
    height: 100%;
}

.thumb-vertical   {
    width: 100%;
}

.track-gap  {
    visibility: hidden;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0.375em;                 /*6px*/
    height: 0.375em;                /*6px*/
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.show-track-gap .track-gap  {
    visibility: visible;
}

.track-bg   {
    background-color: rgba(116, 116, 116, 0.118);
}

.thumb-bg   {
    background-color: rgb(116, 116, 116);
}

/* --------------------------------------------------------------------------- */
/* reactstrap fixes */
label {
    margin-bottom: 0.5em;
}

/* --------------------------------------------------------------------------- */
/* bootstrap toogle */
.toggle.toggle-switch   {
    font-size: 1em;                 /*16px*/
    width: 3.625em !important;      /*58px*/
    height: 1.875em !important;     /*30px*/
}

.toggle.toggle-switch .toggle-handle {
    background-color: #fff;
}

.toggle.toggle-switch.off {
    background-color: #999 !important;
}

.toggle.toggle-switch[disabled]   {
    filter: alpha(opacity=65) !important;
    opacity: .65 !important;
}

.toggle.toggle-switch .toggle-off.btn {
    padding-right: 0.0625em;
    padding-left: 0.875em;
}

.toggle.toggle-switch .toggle-on.btn {
    padding-right: 0.875em;
    padding-left: 0.125em;
}

.toggle.toggle-switch.btn {
    min-width: 3.6875em;            /*59px*/
    min-height: 1.875em;            /*30px*/
}

.toggle.toggle-switch.btn .btn {
    font-size: 1em;                 /*16px*/
    line-height: 1.75em;            /*28px*/
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle;
}

.btn-sm[disabled]   {
    pointer-events: none !important;
    cursor: not-allowed !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

/* fixes btn styles broken by styles inherited from popover */
.toggle.toggle-switch .toggle-on,
.toggle.toggle-switch .toggle-off {
    border: none !important;
    -webkit-box-shadow: inset 0 0.1875em 0.3125em rgba(0, 0, 0, .125);  /*inset 0 3px 5px rgba(0, 0, 0, .125)*/
    box-shadow: inset 0 0.1875em 0.3125em rgba(0, 0, 0, .125);          /*inset 0 3px 5px rgba(0, 0, 0, .125)*/
}

.toggle.toggle-switch .toggle-off,
.toggle.toggle-switch[disabled] .toggle-off:hover {
    background-color: #999 !important;
    color: #fff;
}

/*
.toggle.toggle-switch .toggle-off:hover {
    background-color: #888 !important;
}
*/

/* --------------------------------------------------------------------------- */
/* OEButton */
.button {
    font-size: 1em;                 /*16px*/
    display: inline-block;
    padding: 0 0.25em;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
    text-shadow: none;
    border: none;
    outline: none;
    border-radius: 0.1875em;        /*3px*/
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

.compact .button   {
    font-size: 0.875em;             /*14px*/
    border-radius: 0.1429em;        /*2px*/
}

.popover .widget-header button, .popover .widget-header a {
    font-size: 1.3333em;            /*16px*/
}

.icon-button {
    font-size: 1em;                 /*16px*/
    background-color: rgba(0, 0, 0, 0.3);
    width: 1.5em;                   /*24px*/
    height: 1.5em;                  /*24px*/
    padding: 0;
    line-height: 1.5;               /*24px*/
    font-size: inherit;
    text-align: center;
    vertical-align: middle;
    border: none;
    outline: none;
    border-radius: 0.1875em;        /*3px*/
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

.icon-button:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

.compact .icon-button   {
    font-size: 0.875em;             /*14px*/
    border-radius: 0.1429em;        /*2px*/
}

.icon-button.disabled   {
    opacity: 0.5;
}

.icon-button:focus {
    border: none;
    outline: none;
}

.icon-button.active,
.icon-button.active:hover  {
    background-color: rgba(128, 128, 128, 0.8);
}

.icon-button:hover {
    /*
    background-color: rgba(128, 128, 128, 0.4);
    */
    cursor: pointer;
}

.icon-button.disabled:hover {
    cursor: initial;
    background-color: rgba(0, 0, 0, 0.3);
}

/*
.icon-button.active:hover  {
    background-color: rgba(128, 128, 128, 0.6);
}
*/

.icon-button.disabled.active:hover {
    background-color: rgba(128, 128, 128, 0.8);
    cursor: initial;
}

/* --------------------------------------------------------------------------- */
/* OEButtonGroup */
div.oe-button-group    {
    display: inline-block;
}

div.oe-button-group .button    {
    margin-right: 0.25em;       /*4px*/
}

div.oe-button-group .button.last    {
    margin-right: 0;
}

/* --------------------------------------------------------------------------- */
/* OECustomCheckbox */
.custom-checkbox {
    font-size: 1em;                 /*16px*/
    border: none;
    outline: none;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    background-color: rgba(0, 0, 0, 0.3);
    width: 1.5em;                   /*24px*/
    height: 1.5em;                  /*24px*/
    line-height: 1.5em;             /*24px*/
    padding: 0;
    border-radius: 0.1875em;        /*3px*/
    text-align: center;
}

.custom-checkbox .icon  {
    font-size: 1.25em;              /*20px*/
    vertical-align: top;
}

.custom-checkbox.disabled   {
    opacity: 0.5;
}

.custom-checkbox.not-active .icon  {
    visibility: hidden;
}

.custom-checkbox.has-unchecked-icon.not-active .icon  {
    visibility: initial;
}

.custom-checkbox:focus {
    border: none;
    outline: none;
}

.custom-checkbox:hover {
    /*
    background-color: rgba(128, 128, 128, 0.4) !important;
    */
    background-color: rgba(0, 0, 0, 0.3) !important;
    cursor: pointer;
}

.custom-checkbox.disabled:hover {
    cursor: initial;
    background-color: rgba(0, 0, 0, 0.3) !important;
}

/* --------------------------------------------------------------------------- */
/* OECustomRadioButton */
.custom-radio-button.button {
    font-size: 1em;                 /*16px*/
    position: relative;
    width: 1.5em;                   /*24px*/
    height: 1.5em;                  /*24px*/
}

.custom-radio-button.button .crb-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1em;                     /*16px*/
    height: 1em;                    /*16px*/
    border-radius: 50%;
}

.custom-radio-button.button .crb-border {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.9375em;                /*15px*/
    height: 0.9375em;               /*15px*/
    border: 0.125em solid rgba(255, 255, 255);
    border-radius: 50%;
}

.custom-radio-button.button .crb-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.4375em;                /*7px*/
    height: 0.4375em;               /*7px*/
    border-radius: 50%;
}

.custom-radio-button.button.active .crb-handle {
    background-color: rgba(255, 255, 255);
}

.custom-radio-button.button:hover .crb-handle {
    /*
    background-color: rgba(255, 255, 255, 0.4) !important;
    */
    cursor: pointer;
}

.custom-radio-button.button.active:hover .crb-handle {
    /*
    background-color: rgba(255, 255, 255, 0.8) !important;
    */
    cursor: pointer;
}

.custom-radio-button.button:disabled .crb-handle {
    opacity: 0.5;
}

/* --------------------------------------------------------------------------- */
/* dropdown */
.dropdown   {
    font-size: 1em;                 /*16px*/
}

.dropdown .btn   {
    border-radius: 0.25em;          /*4px*/
}

.dropdown-menu {
    font-size: 1em;                 /*16px*/
    min-width: 10em;                /*160px*/
    padding: 0.5em 0;               /*8px 0*/
    margin: 0.125em 0 0;            /*2px 0 0*/
    border-radius: 0.25em;          /*4px*/
}

.compact .dropdown   {
    font-size: 0.875em;             /*14px*/
}

.compact .dropdown .btn   {
    border-radius: 0.142857em;      /*2px*/
}

.compact .dropdown-menu {
    font-size: 1em;                 /*14px*/
    min-width: 7.142857em;          /*100px*/
    padding: 0.285714em 0;          /*4px 0*/
    margin: 0.142857em 0 0;         /*2px 0 0*/
    border-radius: 0.142857em;      /*2px*/
}

.group-control .dropdown button, .dropdown button {
    padding: 0.375em 0.75em;        /*6px 12px*/
    line-height: 1.5;
    box-shadow: none !important;
    cursor: pointer;
    min-height: 2.25em;             /*36px*/
    color: inherit;
}

.compact .dropdown button   {
    padding: 0.214286em 0.857143em;     /*3px 12px*/
    min-height: 1.92857em;          /*27px*/
    font-weight: 300;
}

.compact .dropdown-toggle::after {
    margin-top: 0.142857em;         /*2px*/
    margin-right: -0.285714em;      /*-4px*/
}

.group-control .dropdown button.disabled, .dropdown button.disabled {
    cursor: initial;
}

button.dropdown-item.active, button.dropdown-item:active,
button.dropdown-item.active:hover, button.dropdown-item:active:hover {
    color: #fff;
    text-decoration: none;
    background-color: #007bff;
}

button.dropdown-item:focus {
    background-color: transparent;
    color: inherit;
}

button.dropdown-item:hover {
    background-color: transparent;
    color: inherit;
}

/* --------------------------------------------------------------------------- */
/* dropdown-submenu */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: 0;
    margin-left: -0.625em;          /*10px*/
    border-radius: 0 0.375em 0.375em 0.375em;   /*0 6px 6px 6px*/
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

.dropdown-item {
    padding: 0.375em 0.75em;        /*6px 12px*/
}

.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 0.3125em 0 0.3125em 0.3125em;    /*5px 0 5px 5px*/
    border-left-color: rgb(33, 37, 41);
    margin-top: 0.3125em;           /*5px*/
    margin-right: 0;
}

.dropdown-submenu > .dropdown-item:hover:focus  {
    background-color: inherit;
    color: inherit;
}

.dropdown-submenu > .dropdown-item:focus  {
    background-color: inherit;
    color: inherit;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 0.625em;           /*10px*/
    border-radius: 0.375em 0 0.375em 0.375em;       /*6px 0 6px 6px*/
}

/* OETextField */
.text-field   {
    font-size: 0.875em;             /*14px*/
    font-weight: 300;
    line-height: 1.5;               /*21px*/
    text-align: left;
    color: inherit;
    border-color: inherit;
    border-radius: 0.35em;          /*4.9px*/
}

.compact .text-field   {
    font-size: 0.8125em;            /*13px*/
    line-height: 1;                 /*13px*/
    border-radius: 0.153846em;      /*2px*/
}

.text-field .container  {
    font-size: inherit;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    border: 1px solid #fff;
    border-color: inherit;
    border-radius: inherit;
    background-color: rgba(0, 0, 0, 0.3);
    color: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: inherit;
    max-width: none !important;     /* overwrite reactstrap media styles */
}

.text-field.disabled .container  {
    opacity: 0.5;
}

.text-field input {
    font-size: inherit;
    flex-grow: 1;
    flex-shrink: 1;
    padding: 0.45em 0.6429em;       /*6.3px 9px*/
    border: none;
    outline-offset: 0;
    outline: none;
    height: auto;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.0);
    color: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: inherit;
}

.compact .text-field input   {
    padding: 0.153846em 0.461538em;     /*2px 6px*/
}

.text-field .clear-btn    {
    font-size: inherit;
    flex-grow: 0;
    flex-shrink: 0;
    text-align: center;
    cursor: pointer;
    line-height: inherit;
    padding: 0 0.5em;
    margin-right: 0.1em;
}

.text-field.disabled .text-field .clear-btn    {
    cursor: initial;
}

/* OELStringTextField */
.l-string-text-field  {
    font-size: 0.875em;             /*14px*/
    font-weight: 300;
    line-height: 1.5;               /*21px*/
    text-align: left;
    color: inherit;
    border-color: inherit;
    border-radius: 0.35em;          /*4.9px*/
}

.compact .l-string-text-field   {
    font-size: 0.8125em;            /*13px*/
    line-height: 1;                 /*13px*/
    border-radius: 0.153846em;      /*2px*/
}

.l-string-text-field > .container  {
    font-weight: inherit;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    text-align: inherit;
    color: inherit;
    border-color: inherit;
    border-radius: inherit;
    max-width: none !important;     /* overwrite reactstrap media styles */
}

.l-string-text-field .text-field  {
    flex-grow: 1;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: inherit;
    color: inherit;
    border-color: inherit;
    border-radius: inherit;
}

.l-string-text-field .text-field input {
    width: 100%;
}

.l-string-text-field .language-picker-btn  {
    font-size: 1.142857em !important;   /*16px !important*/
    flex-shrink: 0;
    margin-left: 0.285714em;        /*4px*/
}

.compact .l-string-text-field .language-picker-btn  {
    font-size: 1.076923em !important;   /*14px !important*/
}

/* OENumberInput */
.number-input   {
    font-size: 0.875em;             /*14px*/
    font-weight: 300;
    line-height: 1.5;               /*21px*/
    color: inherit;
    border-color: inherit;
    border-radius: 0.35em;          /*4.9px*/
}

.compact .number-input   {
    font-size: 0.8125em;            /*13px*/
    line-height: 1;                 /*13px*/
    border-radius: 0;
}

.number-input input {
    font-size: inherit;
    padding: 0.0714286em 0.285714em;    /*1px 4px*/
    border: 1px solid #fff;
    border-color: inherit;
    border-radius: inherit;
    -moz-appearance: textfield;
    appearance: textfield;
    outline-offset: 0;
    outline: none;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.3);
    color: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: right;
    width: 2.85714em;               /*40px*/
}

.number-input input:focus-visible {
    outline: none;
}

.number-input input[type=number]::-webkit-inner-spin-button, 
.number-input input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0;
}

.number-input.disabled .input   {
    opacity: 0.5;
}

.number-input .label {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    margin-right: 0.42857em;        /*6px*/
}

.number-input .unit-label {
    font-size: inherit;
    margin-left: 0.142857em;        /*2px*/
    font-weight: inherit;
    line-height: inherit;
}

/* OETextEdit */
.text-edit   {
    position: relative;
    font-size: 0.875em;             /*14px*/
    font-weight: 400;
    line-height: 1.5;               /*21px*/
    text-align: left;
    color: inherit;
    border-color: inherit;
}

.text-edit > div {
    position: relative;
    font-size: 1em;                 /*14px*/
    height: 7.142857em;             /*100px*/
    color: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: inherit;
    border: 1px solid #fff;
    border-color: inherit;
    border-radius: 0.35em;          /*4.9px*/
    background-color: rgba(0, 0, 0, 0.3);
    padding: 0.45em;                /*6.3px*/
}

.text-edit.autosize > div {
    padding-right: 0;
}

.text-edit.autosize .custom-scrollbar-content {
    padding-right: 0.6428571429em;  /*9px*/
    min-height: 100%;
}

.text-edit form {
    font-size: 1em;                 /*14px*/
    border: none;
    color: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: inherit;
    height: 100%;
    margin: 0;
    padding: 0;
}

.text-edit.autosize form {
    height: initial;
}

.text-edit textarea {
    font-size: 1em;                 /*14px*/
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
    color: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: inherit;
    resize: none;
    tab-size: 4;
    background-color: #0000;
}

.text-edit.autosize textarea {
    overflow: hidden;               /*forces textarea build in scrollbar to be hidden*/
    min-height: calc(100% - 1em);
}

.text-edit.disabled textarea {
    opacity: 0.5;
}

.text-edit textarea:focus {
    outline: none !important;
    border:none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

/* --------------------------------------------------------------------------- */
/* color picker */
.color-picker {
    padding: 0.75em;                /*12px*/
}

.color-picker-popover-target    {
    position: absolute;
    top: 0;
    right: -0.375em;                /*-6px*/
    left: -0.375em;                 /*-6px*/
}

.popover .color-picker-popover-target    {
    top: -1.625em;                  /*-26px*/
}

.popover.no-header .color-picker-popover-target    {
    top: 0;
}

.color-picker .pickers  {
    display: block;
    position: relative;
    line-height: 0;
}

.color-picker .bottom-bar   {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-top: 0.5em;              /*8px*/
    padding: 0;
    background-color: transparent;
}

.color-picker .text-field   {
    font-size: 0.875em;             /*14px*/
}

.color-picker .bottom-bar .text-field   {
    width: 12.25em;                 /*196px*/
    display: inline-block;
}

.color-picker .bottom-bar .text-field input   {
    padding: 0.35714em 0.642857em;     /*5px 9px*/ 
}

.color-picker .bottom-bar .right-buttons    {
    text-align: right;
    float: right;
}

.color-picker .bottom-bar .right-buttons .button   {
    font-size: 1.625em;             /*26*/
    line-height: 1.23077em;         /*32px*/
    width: 1.23077em;               /*32px*/
    height: 1.23077em;              /*32px*/
    padding: 0;
}

.color-picker .bottom-bar .right-buttons .palette-button    {
    margin-right: 0.384615em;       /*10px*/
}

.color-picker .bottom-bar .right-buttons .palette-button .icon    {
    vertical-align: middle;
}

.color-picker .palette-toggle   {
    font-size: 0.75em;              /*12px*/
    position: absolute;
    right: 0.5em;                   /*6px*/
    bottom: 1.58333em;              /*19px*/
}

.color-picker .palette-toggle.closed   {
    opacity: 0.5;
}

.checker-background   {
    background: #eee url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill-opacity=".25" > <rect x="20" width="20" height="20" /> <rect y="20" width="20" height="20" /> </svg>');
    background-size: 1em;           /*16px*/
}

.color-picker-sv-view   {
    display: inline-block;
    position: relative;
    margin: 0;
    width: 12.25em;                 /*196px*/
    height: 12.25em;                /*196px*/
    cursor: pointer;
}

.color-picker-sv-view.disabled   {
    opacity: 0.5;
    pointer-events: none;
    cursor: initial;
}

.color-picker-hue-view   {
    display: inline-block;
    position: relative;
    margin-left: 0.75em;            /*12px*/
    width: 2em;                     /*32px*/
    height: 12.25em;                /*196px*/
    cursor: pointer;
}

.color-picker-hue-view.disabled   {
    opacity: 0.5;
    pointer-events: none;
    cursor: initial;
}

.color-picker-alpha-view   {
    display: inline-block;
    position: relative;
    margin-left: 0.75em;            /*12px*/
    width: 1em;                     /*16px*/
    height: 12.25em;                /*196px*/
    cursor: pointer;
}

.color-picker-alpha-view.disabled   {
    opacity: 0.5;
    pointer-events: none;
    cursor: initial;
}

.color-picker-sv-view canvas, .color-picker-hue-view canvas, .color-picker-alpha-view canvas    {
    position: absolute;
    width: 100%;
    height: 100%;
}

.color-picker-sv-view .marker   {
    position: absolute;
    top: 0%;
    left: 100%;
    width: 0.625em;                 /*10px*/
    height: 0.625em;                /*10px*/
    transform: translate(-50%, -50%);
    background-color: black;
    border: 1px solid white;
    border-radius: 0.3125em;        /*5px*/
}

.color-picker-hue-view .marker   {
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: white;
    pointer-events: none;
}

.color-picker-alpha-view .handle   {
    position: absolute;
    top: 0%;
    left: 50%;
    padding: 0.5em 0.25em;          /*8px 4px*/
    transform: translate(-50%, -50%);
}

.color-picker-alpha-view .handle div   {
    position: relative;
    border-radius: 0.1875em;        /*3px*/
    width: 1.375em;                 /*22px*/
    height: 0.625em;                /*10px*/
    background: #e6e6e6;
    border: 1px solid white;
}

.color-picker-palette-view .thumb-horizontal,
.color-picker-palette-view .thumb-vertical   {
    border-radius: 0.625em;         /*10px*/
}

.color-picker-palette-view .thumb-bg    {
    background-color: #aaa;
}

.color-picker-palette-view   {
    display: inline-block;
    position: relative;
    margin-left: 0.75em;            /*12px*/
    width: 5em;                     /*80px*/
    height: 12.25em;                /*196px*/
    overflow: hidden;
}

.color-picker-palette-view.narrow   {
    width: 4.375em;                 /*70px*/
}

.color-picker-palette-view.scrollable   {
    width: 5em;                     /*80px*/
}

.color-picker-palette-view.disabled   {
    opacity: 0.5;
    pointer-events: none;
    cursor: initial;
}

.color-picker-palette-view .content {
    display: inline-flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.color-picker-palette-view .separator {
    margin: 0.125em 0.625em 0.5em 0;    /*2px 10px 8px 0*/
}

.color-picker-palette-view.narrow .separator {
    margin-right: 0;
}

.color-picker-palette-view.scrollable .separator {
    margin-right: 625em;            /*10px*/
}

.color-picker-palette-view-cell   {
    display: inline-block;
    width: 2em;                     /*32px*/
    height: 2em;                    /*32px*/
    margin-right: 0.375em;          /*6px*/
    margin-bottom: 0.375em;         /*6px*/
    cursor: pointer;
}

.color-picker-palette-view-cell.second   {
    margin-right: 0;
}

.color-picker-palette-view-cell.not-selectable   {
    cursor: initial;
}

.color-picker-palette-view-cell .content   {
    position: relative;
    width: 100%;
    height: 100%
}

.color-picker-palette-view-cell .content .background   {
    position: absolute;
    width: 100%;
    height: 100%
}

.color-picker-palette-view-cell .content .foreground   {
    position: absolute;
    width: 100%;
    height: 100%;
}

.color-picker-rgb-input {
    display: inline-flex;
}

.color-picker-rgb-input div {
    display: inline-block;
}

.color-picker-rgb-input .rgb-segment {
    width: 12.25em;                 /*196px*/
    display: inline-flex;
    justify-content: center;
}

.color-picker .number-input {
    font-size: 0.875em;             /*14px*/
}

.color-picker-rgb-input .number-input    {
    margin: 0 0.2857143em;          /*0 4px*/
}

.color-picker-rgb-input .center-segment    {
    width: 2.5em;                   /*40px*/
    display: inline-flex;
    justify-content: center;
}

.color-picker .number-input input {
    padding: 0.0714286em 0.4285714em;   /*1px 6px*/
}

.color-picker-rgb-input .alpha-segment .number-input .unit-label  {
    margin-left: 0.4285714em;          /*6px*/
}

.color-picker-btn   {
    display: inline-block;
    position: relative;
    width: 2.625em;                 /*42px*/
    height: 1.5em;                  /*24px*/
    padding: 0;
    cursor: pointer;
}

.compact .color-picker-btn   {
    width: 2.25em;                  /*36px*/
    height: 1.3125em;               /*21px*/
}

.color-picker-btn div.content   {
    position: relative;
    width: 100%;
    height: 100%;
}

.color-picker-btn .background   {
    position: absolute;
    width: 100%;
    height: 100%;
}

.color-picker-btn .foreground   {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid #aaa;
}

.color-picker-btn.disabled   {
    opacity: 0.5;
    cursor: initial;
}

.color-palette-controller   {
    width: 18.75em;                 /*300px*/
    padding: 0.25em;                /*4px*/
}

.color-palette-controller .color-palette-row   {
    display: flex;
    height: 2em;                    /*32px*/
}

.color-palette-controller .color-palette-row .button  {
    font-size: 1em;                 /*16px*/
    flex-grow: 1;
    height: 100%;
    cursor: pointer;
    border-radius: 0;
}

.color-palette-controller .color-palette-row button.disabled  {
    cursor: default;
}

.color-palette-controller .color-palette-additional-color-container {
    display: flex;
    margin: 0.75em 0 0.125em 0;     /*12px 0 2px 0*/
}

.color-palette-controller div.additional-color-item {
    display: inline-block;
    text-align: center;
    flex-grow: 1;
    line-height: 0.75em;            /*12px*/
}

.color-palette-controller .additional-color-item .button  {
    font-size: 1em;                 /*16px*/
    display: inline-block;
    width: 2.25em;                  /*36px*/
    height: 2em;                    /*32px*/
    cursor: pointer;
    border-radius: 0;
}

.color-palette-controller .additional-color-item .button.disabled  {
    cursor: default;
}

.color-palette-controller .additional-color-item span  {
    font-size: 0.75em;              /*12px*/
    display: inline-block;
    font-weight: 300;
    line-height: 1;                 /*12px*/
    margin-top: 0.3333em;           /*4px*/
}

/* --------------------------------------------------------------------------- */
/* language picker */
.language-picker    {
    width: 18.75em;                 /*300px*/
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0.625em 0.875em 0.375em 0.875em;   /*10px 14px 6px 14px*/
}

.language-picker-cell   {
    font-size: 0.75em;              /*12px*/
    width: 11.3333em;               /*136px*/
    padding: 0.3333em 0.8333em 0.3333em 0.8333em;   /*4px 10px 4px 10px*/
}

.language-picker-cell span {
    margin-left: 0.8333em;          /*10px*/
}

.language-picker-cell.disabled span {
    opacity: 0.5;
}

/* --------------------------------------------------------------------------- */
/* number picker */
.number-picker {
    display: flex;
}

.number-picker-component {
    width: auto;
    min-width: 4em;                 /*64px*/
    padding: 0.0625em 0 0.125em 0;          /*1px 0 2px 0*/
}

.number-picker-component .label {
    font-size: 0.875em;             /*14px*/
    padding: 0 0.571429em 0 0.285714em;     /*0 8px 0 4px*/
    font-weight: 300;
    line-height: 1.71429;           /*24px*/
}

.number-picker-component .cell-container {
    height: 10.5em;                 /*168px*/
}

.number-picker-component .number-picker-cell {
    font-size: 0.875em;             /*14px*/
    text-align: center;
    margin: 0 0.571429em 0 0.071429em;      /*0 8px 0 1px*/
    padding: 0 0.142857em 0 0.142857em;     /*0 2px 0 2px*/
    font-weight: 300;
    line-height: 1.71429;           /*24px*/
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

/*
.number-picker-component .number-picker-cell:hover {
    background-color: rgba(96, 96, 96, 0.6);
}
*/

.number-picker-component .number-picker-cell.active {
    background-color: rgba(255, 255, 255, 1);
    font-weight: 400;
    color: black;
}

.number-picker-component .number-picker-cell.active:hover {
    background-color: rgba(255, 255, 255, 1);
}

/* --------------------------------------------------------------------------- */
/* OEObjectModelValueEdit */
.object-model-value-edit .object-value-cell   {
    background-color: rgba(255, 255, 255, 0.4);
    margin: 0 0 0.5em 0;            /*0 0 8px 0*/
    border-radius: 0.5em;           /*8px*/
}

.object-model-value-edit .group .object-value-cell   {
    background-color: rgba(0, 0, 0, 0.2);
    margin: 0;
    border-radius: 0;
}

.object-model-value-edit .object-value-cell.last   {
    margin-bottom: 0;
}

.object-model-value-edit .group .object-value-cell.first   {
    border-radius: 0.5em 0.5em 0 0;         /*8px 8px 0 0*/
}

.object-model-value-edit .group .object-value-cell.last   {
    border-radius: 0 0 0.5em 0.5em;         /*0 0 8px 8px*/
}

.compact .object-model-value-edit .object-value-cell   {
    margin: 0 0 0.25em 0;           /*0 0 4px 0*/
    border-radius: 0.125em;         /*2px*/
}

.compact .object-model-value-edit .object-value-cell.last   {
    margin-bottom: 0;
}

.compact .object-model-value-edit .group .object-value-cell   {
    margin: 0;
    border-radius: 0;
}

.compact .object-model-value-edit .group .object-value-cell.first   {
    border-radius: 0.125em 0.125em 0 0;     /*2px 2px 0 0*/
}

.compact .object-model-value-edit .group .object-value-cell.last   {
    border-radius: 0 0 0.125em 0.125em;     /*0 0 2px 2px*/
}

.object-model-value-edit.multi-column > .content    {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5em;                   /*0 8px*/
}

.compact .object-model-value-edit.multi-column > .content    {
    gap: 0 0.25em;                  /*0 4px*/
}

.object-model-value-edit.multi-column > .content .object-value-cell    {
    flex-grow: 1;
}

.object-model-value-edit .object-value-cell.single-column   {
    width: 100%;
}

.object-model-value-edit .object-value-cell.inline-bar .content    {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.object-model-value-edit .object-value-cell .content .bar {
    font-size: 0.75em;              /*12px*/
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0.166667em 0 0 0;      /*2px 0 0 0*/
    line-height: 1.5;               /*18px*/
    font-weight: 300;
}

.object-model-value-edit .object-value-cell.inline-bar .content .bar {
    flex-direction: column;
    justify-content: space-between;
}

.compact .object-model-value-edit .object-value-cell .content .bar {
    font-size: 0.625em;             /*10px*/
    padding: 0.1em 0 0 0;           /*1px 0 0 0*/
    line-height: 1.25;              /*12.5px*/
}

.object-model-value-edit .object-value-cell .content .bar span    {
    margin: 0 0.33333em;            /*0 4px*/
}

.compact .object-model-value-edit .object-value-cell .content .bar span    {
    margin: 0 0.4em;                /*0 4px*/
}

.object-model-value-edit .object-value-cell .content .edit-element    {
    padding: 0.125em 0.25em 0.25em 0.25em;              /*2px 4px 4px 4px*/
}

.object-model-value-edit .object-value-cell.inline-bar .content .edit-element    {
    padding: 0.1875em 0.25em 0.1875em 0.25em;           /*3px 4px 3px 4px*/
}

.compact .object-model-value-edit .object-value-cell .content .edit-element    {
    padding: 0.0625em 0.1875em 0.1875em 0.1875em;       /*1px 3px 3px 3px*/
}

.compact .object-model-value-edit .object-value-cell.inline-bar .content .edit-element    {
    padding: 0.125em 0.1875em 0.125em 0.1875em;         /*2px 3px 2px 3px*/
}

.object-model-value-edit .object-value-cell .content .edit-element .number-input input,
.object-model-value-edit .object-value-cell .content .edit-element .text-field input    {
    padding: 0.45em 0.642857em;     /*6.3px 9px*/
    border: none;
    width: 100%;
}

.object-model-value-edit .object-value-cell .content .edit-element .text-field .container   {
    border: none;
}

.compact .object-model-value-edit .object-value-cell .content .edit-element .number-input input,
.compact .object-model-value-edit .object-value-cell .content .edit-element .text-field input    {
    padding: 0 0.1538461em;         /*0 2px*/
}

.object-model-value-edit .object-value-cell .content .edit-element .number-input input,
.object-model-value-edit .object-value-cell .content .edit-element .text-field .container,
.object-model-value-edit .object-value-cell .content .edit-element .dropdown button,
.object-model-value-edit .object-value-cell .content .edit-element .dropdown-menu    {
    border-radius: 0;
}

.object-model-value-edit .object-value-cell .content .edit-element.bool {
    display: flex;
    justify-content: flex-end;
}

.object-model-value-edit .object-value-cell .content .edit-element.vec2,
.object-model-value-edit .object-value-cell .content .edit-element.vec2i,
.object-model-value-edit .object-value-cell .content .edit-element.vec3,
.object-model-value-edit .object-value-cell .content .edit-element.vec3i {
    display: flex;
    align-items: center;
}

.object-model-value-edit .object-value-cell .content .edit-element .label   {
    font-size: 0.875em;             /*14px*/
    padding: 0 0.2857143em;         /*0 4px*/
    line-height: 1.5;               /*21px*/
    font-weight: 300;
}

.compact .object-model-value-edit .object-value-cell .content .edit-element .label   {
    font-size: 0.8125em;            /*13px*/
    padding: 0 0.1538462em;         /*0 2px*/
    line-height: 1;
}

.object-model-value-edit .object-value-cell .content .edit-element .bar .label,
.compact .object-model-value-edit .object-value-cell .content .edit-element .bar .label   {     /* overwrite last two styles for in groups nested cells */
    font-size: inherit;
    padding: 0;
    line-height: inherit;
    font-weight: inherit;
}

.object-model-value-edit .object-value-cell .content .dropdown button.dropdown-toggle    {
    background-color: rgba(0, 0, 0, 0.3);
}

/*
.object-model-value-edit .object-value-cell .content .dropdown button.dropdown-toggle:hover    {
    background-color: rgba(30, 30, 30, 0.3);
}
*/

/* --------------------------------------------------------------------------- */
/* controls */
.group-control  {
    font-size: 1em;                 /*16px*/
    display: block;
    position: relative;
    padding: 0;
}

.popover .group-control  {
    font-size: 1em;                 /*16px*/
}

.multi-column-container .group-control  {
    display: inline-block;
    width: 15.625em;                /*250px*/
}

.group-control-header  {
    font-size: 0.625em;             /*10px*/
    text-align: left;
    padding: 0.8em 0 0 1.4em;       /*8px 0 0 14px*/
}

.compact .group-control .group-control-header  {
    font-size: 0.625em;             /*10px*/
    text-align: left;
    padding: 0.2em 0 0 1.4em;       /*2px 0 0 14px*/
}

.group-control-header.user-collapsable  {
    text-align: left;
    padding: 0.8em 0 0.8em 1.4em;   /*8px 0 8px 14px*/
}

.compact .group-control-header.user-collapsable  {
    text-align: left;
    padding: 0.4em 0 0.4em 1.4em;   /*4px 0 4px 14px*/
}

.group-control-header a {
    font-size: 1em;                 /*10px*/
    display: block;
    margin: 0;
    padding: 0;
}

.group-control-body  {
    position: relative;
    padding: 0.125em 0 0.25em 0;    /*2px 0 4px 0*/
}

.compact .group-control-body  {
    padding: 0.0625em 0 0.1875em 0; /*1px 0 3px 0*/
}

.group-control.no-header .group-control-body  {
    padding-top: 0.375em;           /*6px*/
}

.group-control-title  {
    text-align: left;
}

.group-control-separator    {
    width: 100%;
    padding: 0;
    margin: 0;
    border-bottom: 0.125em solid rgba(84, 84, 84, 0.4); /*2px solid rgba(84, 84, 84, 0.4)*/
    height: 0;
}

.group-control-title .rot-toggle  {
    font-size: 1.4em;               /*14px*/
    margin-right: 0.571429em;       /*8px*/
}

.group-control-popover-target    {
    position: absolute;
    top: -0.125em;                  /*-2px*/
    right: -0.375em;                /*-6px*/
    left: -0.375em;                 /*-6px*/
}

.control-popover-target    {
    position: absolute;
    top: -0.125em;                  /*-2px*/
    right: -0.375em;                /*-6px*/
    left: -0.375em;                 /*-6px*/
}

.control {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375em 1em 0.375em 1em;   /*6px 16px 6px 16px*/
}

.compact.group-control .control {
    padding: 0.1875em 1em 0.1875em 1em;     /*3px 16px 3px 16px*/
}

.compact .group-control .control  {
    padding: 0.1875em 0.5em 0.1875em 0.5em;     /*3px 8px 3px 8px*/
}

.control > .label {
    font-size: 0.75em;              /*12px*/
    font-weight: 400;
    line-height: 1.25em;            /*15px*/
    margin-right: 1em;              /*12px*/
}

.compact .control > .label {
    font-size: 0.625em;             /*10px*/
    margin-right: 1.2em;            /*12px*/
}

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

.control.with-header {
    display: block;
    justify-content: initial;
    align-items: initial;
}

.control.with-header > .label {
    font-size: 0.625em;             /*10px*/
    line-height: 1.25;
    padding-bottom: 0.4em          /*4px*/ 
}

.control.with-header .control-widget {
    display: block;
}

.control-without-label  {
    position: relative;
    display: block;
    text-align: left;
    padding: 0.375em 1em 0.375em 1em;   /*6px 16px 6px 16px*/
}

.compact.group-control .control-without-label  {
    padding: 0.1875em 1em 0.1875em 1em;     /*3px 16px 3px 16px*/
}

.compact .group-control .control-without-label  {
    padding: 0.1875em 0.5em 0.1875em 0.5em;     /*3px 8px 3px 8px*/
}

.control-without-label.row  {
    display: flex;
}

.control-without-label.control-button .button  {
    font-size: 1em;                 /*16px*/
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 0.375em 0.75em;        /*6px 12px*/
    color: white;
    background-color: #007bff;
    border-color: #007bff;
    line-height: 1.5;               /*24px*/
    cursor: pointer;
}

.control-without-label.control-button .button:hover {
    color: white;
    /*
    background-color: #0069d9;
    border-color: #0062cc;
    */
}

.control-without-label.control-button .button.disabled {
    color: white;
    background-color: #007bff;
    border-color: #007bff;
    opacity: 0.5;
    cursor: default;
}

.control-without-label.control-button .button.disabled:hover {
    background-color: #007bff;
    border-color: #007bff;
}

.control-without-label .transparent-btn {
    height: 1.5em;                  /*24px*/
    width: 1.5em;                   /*24px*/
    padding: 0;
    margin: 0 0.125em;              /*0 2px*/
}

.control-widget .slider {
    flex-grow: 1;
    min-width: 7.142857em;          /*100px*/
    max-width: 50%;
}

.slider .control-widget input   {
    width: 3.75em;                  /*60px*/
    margin-left: 0.75em;            /*12px*/
}

.popover-control .dropdown  {
    color: #fff;
}

.control-widget .custom-checkbox .icon   {
    font-size: 1.125em;             /*18px*/
}

.control-icon-button .control-widget .icon-button,
.control-widget .custom-checkbox   {
    margin-right: 0.5em;            /*8px*/
}

.compact .control-icon-button .control-widget .icon-button,
.compact .control-widget .custom-checkbox    {
    margin-right: 0.571429em;       /*8px*/
}

.align-right.control-checkbox .control-widget .custom-checkbox,
.align-right.control-icon-button .control-widget .icon-button   {
    margin-right: 0;
}

.control-number-input .number-input   {
    font-size: 0.75em;              /*12px*/
    font-weight: 300;
}

.control-number-input .unit-label   {
    font-weight: 400;
}

.control-without-label.control-button-group,
.control-without-label.control-icon-button-group   {
    text-align: right;
}

.control-without-label.control-button-group.toolbar,
.control-without-label.control-icon-button-group.toolbar   {
    text-align: left;
    padding: 0 0.75em 0 0.75em;     /*0 12px 0 12px*/
}

.control-icon-button-group.toolbar .icon-button   {
    width: 1.8em;
    height: 1.8em;
    padding: 0;
    line-height: 1.8em;
}

.control-button .button {
    font-size: 1.375em;             /*22px*/
    padding: 0.090909em;            /*2px*/
    line-height: 1;
}

.compact .control-button .button {
    font-size: 1.203125em;          /*19.25px*/
}

.control-without-label .full-transparent-btn    {
    font-size: 1.3125em;            /*21px*/
    padding-left: 0.38095em;        /*8px*/
    padding-right: 0.38095em;       /*8px*/
    line-height: 1.42857;           /*30px*/
}

/* animation controls */
div.animation-controls {
    display: flex;
    align-items: center;
    overflow: visible;
}

.animation-controls-left-btns  {
    float: left;
}

.animation-controls-btn    {
    font-size: 1em;
    display: inline-block;
    width: 2.5em;                   /*40px*/
    line-height: 1.5;               /*24px*/
    text-align: center;
    border-radius: 0.1875em;        /*3px*/
    background-clip: padding-box;
    margin-right: 0.375em;          /*6px*/
    padding: 0;
}

.animation-controls-btn .icon {
    vertical-align: baseline;
}

.animation-controls-btn i {
    vertical-align: baseline;
}

.transparent-btn.animation-controls-btn  {
    width: 2.5em;                   /*40px*/
    height: auto;
    margin-right: 0.375em;          /*6px*/
    background-color: rgba(0, 0, 0, 0.3);
}

.transparent-btn.animation-controls-btn.disabled:hover  {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

.transparent-btn.animation-controls-btn.disabled.active:hover {
    background-color: rgba(128, 128, 128, 0.8) !important;
}

.animation-controls-slider-container   {
    flex-grow: 1;
    overflow: visible;
    padding: 0.4em 0.6111em 0.4em 0.6111em;     /*6.4px 9.776px 6.4px 9.776px*/
}

/* --------------------------------------------------------------------------- */
/* oe-dropdown */
.oe-dropdown   {
    font-size: 0.875em;             /*14px*/
    display: inline-block;
    width: auto;
    color: white;
    font-weight: 300;
}

.oe-dropdown.disabled   {
    pointer-events: none;
}

.oe-dropdown .menu {
    display: none;
    width: auto;
}

.oe-dropdown .menu {
    position: absolute;
    transform: translateX(calc(-100% - 0.1428571429em));    /*translateX(calc(-100% - 2px))*/
}

.oe-dropdown.sub-orientation-right .menu {
    right: auto;
    transform: none;
    left: calc(100% + 0.1428571429em);      /*calc(100% + 2px)*/
}

.oe-dropdown > .menu {
    display: block;
    position: initial;
    right: initial;
    margin-top: 0;
    padding-right: 0;
    height: 0;
    overflow: hidden;
    transform: none;
}

.oe-dropdown.open > .menu {
    height: auto;
}

.oe-dropdown.open .menu {
    display: block;
}

.oe-dropdown .item {
    display: block;
    padding: 0.57142em 0.85714em 0.57142em 0.85714em;       /*8px 12px 8px 12px*/
    background-color: rgba(0, 0, 0, 0.1);
    margin-top: 0.142857em;         /*2px*/
}

.oe-dropdown .menu .menu .item.first {
    margin-top: 0;
}

.oe-dropdown .item.toggle {
    margin: 0;
    pointer-events: initial;
}

.oe-dropdown .item.toggle .rot-toggle {
    font-size: 1.25em;              /*17.5px*/
}

.oe-dropdown .item .item-content{
    display: inline-block;
    margin-left: 0.85714em;         /*12px*/
}

.oe-dropdown .item .item-content-sub-menu   {
    display: inline-block;
}

.oe-dropdown .item.toggle .item-content{
    margin-left: 0.42857em;         /*6px*/
}

/* --------------------------------------------------------------------------- */
/* licensing start app */
@media (max-width: 767px)   {
    .oe-licensing-start-app .title-bar .nav-link {
        display: none;
    }

    .oe-licensing-start-app .nav-item>.dropdown-menu {
        display: block;
        border: none;
    }

    .oe-licensing-start-app .dropdown-menu .dropdown-item {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        font-weight: 300;
        color: rgba(0, 0, 0, 0.5);
    }
}

.oe-licensing-start-app .background {
    position: fixed;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
}

.oe-licensing-start-app .theme-indicator-controller   {
    position: fixed;
}

.oe-licensing-start-app div.key-input  {
    display: block;
    margin: 0 0.625rem 0 10%;       /*0 10px 0 10%*/
}

.oe-licensing-start-app .key-input h4  {
    display: block;
}

.oe-licensing-start-app .key-input input  {
    display: inline-block;
    margin: 0.625rem 0.625rem 0.625rem 0;   /*10px 10px 10px 0*/
}

.oe-licensing-start-app .key-input .btn  {
    display: inline-block;
    margin: 0.625rem 0;             /*10px 0*/
    vertical-align: baseline;
    width: auto;
    padding-left: 0.75rem;
    padding-right: 1.1rem;
}

.oe-licensing-start-app .card-body {
    padding-top: 5%;
}

.oe-licensing-start-app .card-img {
    display: block;
    position: relative;
    margin-left: 24%;
    width: 50%;
}

.oe-licensing-start-app .card-img-top {
    position: absolute;
    top: 0; right: 0;
    left: 0;
}

.oe-licensing-start-app .card-subtitle {
    position: relative;
    display: block;
    color: #fff;
    text-align: left;
    margin: 5%;
    text-transform: uppercase;
    font-weight: bold;
}

.oe-licensing-start-app .card-title {
    height: 3.125rem;               /*50px*/
    color: #6c757d;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 0.75rem;
}

.oe-licensing-start-app .card-body button:focus  {
    box-shadow: none;
    border: 1px solid rgb(134, 142, 150);
}

.oe-licensing-start-app .card-body button:active  {
    background-color: rgb(134, 142, 150);
}

.oe-licensing-start-app .btn .icon, .oe-licensing-start-app button .icon {
    margin-right: 0.75rem;      /*12px*/
    vertical-align: middle;
}

.oe-licensing-start-app .btn.themecolor,
.oe-licensing-start-app .btn.themecolor:hover    {
    color: white;
}

.oe-licensing-start-app .btn.themecolor.disabled {
    opacity: 0.5;
    cursor: default;
}

.oe-licensing-start-app .btn.themecolor.disabled:hover  {
    background-color: #4fa3d1;
}

.oe-licensing-start-app .icon {
    font-size: 1.3125rem;       /*21px*/
}

.oe-licensing-start-app .key-input .btn .icon {
   margin-right: 0.75rem;       /*12px*/
   vertical-align: middle;
}

@media (max-width: 767px)   {
    .oe-licensing-start-app .card-title {
        height: 3.75rem;        /*60px*/
    }
}

@media (max-width: 575px)   {
    .oe-licensing-start-app .card-title {
        min-height: 0;
        height: auto;
        margin-bottom: 1.5rem;
    }

    .oe-licensing-start-app .key-input .btn  {
        width: 100%;
    }

    .oe-licensing-start-app .key-input .btn .icon {
        margin-right: 4%;
    }
}

/* --------------------------------------------------------------------------- */
/* tutor */
div.tutor {
    font-size: 1em;                 /*16px*/
    position: absolute;
    left: 5.75em;                   /*92px*/
    bottom: 2.875em;                /*46px*/
    width: 24em;                    /*384px*/
    height: auto;
    z-index: 2;
}

.tutor .head {
    position: relative;
    background-color: #abc7dc;
    color: #cedfe9;
    display: block;
    height: auto;
    min-height: 3.625em;            /*58px*/
}

.tutor .head .transparent-btn.close    {
    font-size: 2.25em;              /*36px*/
    position: absolute;
    right: 0.1111em;                /*10px*/
    top: 0.2222em;                  /*8px*/
    margin: 0.1111em;               /*4px*/
    line-height: 1;
    text-shadow: none;
    color:#738996;
    opacity: 0.75;
}

.tutor .head .transparent-btn    {
    font-size: 1.875em;             /*30px*/
    color: #748a97
}

.tutor .head .transparent-btn:hover    {
    background-color: rgba(0, 0, 0, 0) !important;
    /*
    color: #96b2c2;
    */
}

.tutor .head .label {
    font-size: 1.875em;             /*30px*/
    margin-right: 1.7333em;         /*52px*/
    padding: 0.4em 0 0.4em 0.6em;   /*12px 0px 12px 18px*/
    line-height: 1.1333;            /*34px*/
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.tutor .head .label .icon {
    font-size: 1em;                 /*30px*/
    margin-right: 0.5333em;         /*16px*/
}

.tutor .body {
    position: relative;
    background-color: #b2d3e6;
    display: block;
}

.tutor .body .shadow-caster {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    transform: translate(0px, -0.9375em) scale(0.8, 1) perspective(18.75em) rotateX(10deg);   /*translate(0px, -15px) scale(0.8, 1) perspective(300px) rotateX(10deg)*/
    box-shadow: 1.25em 1.25em 3.75em 1.25em rgba(0,0,0,0.7);    /*20px 20px 60px 20px rgba(0,0,0,0.7)*/
    z-index: -1;
    pointer-events: none;
}

/* the shadow caster solution above does not work properly with blurring on some browser (firefox),
since applying a filter to a parent breaks transform perspective for some unknown reason,
thus we providing a bitmap based solution for the shadow volume */
.tutor .body .shadow-caster {
    /*background-size: cover;*/
    background-size: 100% 100%;
    background-image: url("../../../images/tutor_shadow.png");
    /*transform: scale(1.43, 1.5) translate(0.3125em, 0.3125em);*/      /*transform: scale(1.43, 1.5) translate(5px, 5px)*/
    transform: scale(1.35, 1.5) translate(0.9375em, 1.25em);            /*scale(1.35, 1.5) translate(15px, 20px)*/
    background-color: rgba(0,0,0,0);
    box-shadow: none;
}

.tutor .body .container {
    position: relative;
    padding: 1em 2em 0 2em;         /*16px 32px 0px 32px*/
}

.tutor .body .message {
    font-size: 1.375em;             /*22px*/
    padding: 0.3636em 0;            /*8px 0*/
    color: #333f55;
    line-height: 1.2727;            /*28px*/
    font-weight: 400;
    min-height: 8.1818em;           /*180px*/
    position: relative;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tutor .body .message .container {
    padding: 0;
    margin: 0;
    width: auto;
}

.tutor .body .message .container i {
    font-family: EffigosSymbol;
    font-style: normal;
}

.tutor .body .message .container strong {
    font-weight: 600;
}

.tutor .body .navigation    {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    color: #32496b;
    font-weight: 400;
}

.tutor .body .navigation .label {
    font-size: 1.375em;             /*22px*/
    display: inline-block;
    font-weight: 600;
    vertical-align: baseline;
}

.tutor .body .navigation .label .number {
    margin: 0 0.09090em;            /*0 2px*/
}

.tutor .body .navigation .label .separator {
    display: none;
}

.tutor .body .navigation .label span.completed {
    font-weight: 300;
}

.tutor .body .navigation .label span.current {
    font-size: 1.0909em;            /*24px*/
    font-weight: 800;
    margin: 0 0.08333em;            /*0 2px*/
}

.tutor .body .navigation .transparent-btn    {
    font-size: 1.875em;             /*30px*/
    margin: 0.2667em 0.1333em;      /*8px 4px*/
}

.tutor .body .navigation .transparent-btn:hover    {
    background-color: rgba(0, 0, 0, 0) !important;
    /*
    color: #5176ad;
    */
}

.tutor .body .navigation .transparent-btn.disabled:hover    {
    color: #32496b;
}

.tutor .body .disable-chapter-control   {
    font-size: 0.8125em;            /*13px*/
    display: block;
    padding: 0.4615em 0 1.6923em 0;     /*6px 0 22px 0*/
    color: #748a97;
    line-height: 1;                 /*13px*/
}

.tutor .body .disable-chapter-control div   {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}

.tutor .body .disable-chapter-control .custom-checkbox   {
    font-size: 1em;                 /*13px*/
    color: #748a97;
    border: 1px solid #748a97;
    background-color: transparent;
    margin-right: 0.46153em;        /*6px*/
}

/* --------------------------------------------------------------------------- */
/* media center */
.media-center {
    font-size: 1em;                 /*16px*/
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: visible;
    background-color: rgba(0, 0, 0, 0);
    color: white;
    z-index: 2;
    pointer-events: none;
}

.media-center .button   {
    font-size: 1em;
}

.media-center .rot-toggle   {
    font-size: 1.09375em;           /*17.5px*/
}

.media-center .right-bar    {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    background-color: rgba(0, 0, 0, 0);
    padding: 0;
    pointer-events: initial;
    display: flex;
}

.media-center .right-bar .std-content   {
    position: relative;
    width: 24.125em;                /*386px*/
    height: 100%;
}

.media-center .right-bar .widget-header {
    font-size: 0.75em;              /*12px*/
    height: 2.4166667em;            /*29px*/
}

.media-center .right-bar .widget-header .button {
    font-size: 1.33333em;          /*16px*/
}

.media-center .right-bar .body    {
    position: absolute;
    top: 1.8125em;                  /*29px*/
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0.375em 0 0.5em 0.5em;     /*6px 0px 8px 8px*/
}

.media-center .bottom-bar {
    position: absolute;
    right: 24.125em;                /*386px*/
    bottom: 0;
    left: 0;
    height: auto;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.5);
    pointer-events: initial;
    padding-bottom: 1px;            /* workaround for edge, firefox and chrome on windows eating the last pixel row */
}

.media-center .central-view {
    position: absolute;
    top: 0;
    right: 25em;                    /*400px*/
    bottom: 6.25em;                 /*100px*/
    left: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0);
}

.media-center .central-view.central-view-outer  {
    right: 0;
    bottom: 0;
}

.media-center .central-view .central-view-inner {
    position: absolute;
    top: 0;
    right: 25em;                    /*400px*/
    bottom: 6.25em;                 /*100px*/
    left: 0;
}

.media-center .central-view .central-view-inner.hide {
    opacity: 0;
}

.media-center .central-view .play-mode-controls {
    position: absolute;
    bottom: 0.625em;                 /*10px*/
    width: 100%;
    padding: 0 1.5em;               /*0 24px*/
    text-align: center;
}

.media-center .central-view .play-mode-controls.hide {
    opacity: 0;
}

.media-center .central-view .play-mode-controls .control-bar    {
    position: relative;
    display: inline-block;
}

.media-center .central-view .play-mode-controls .animation-controls {
    display: inline-block;
    vertical-align: top;
}

.media-center .central-view .play-mode-controls .control-bar .animation-controls-btn    {
    font-size: 1.625em;             /*26px*/
    line-height: 1.846154em;        /*48px*/
    vertical-align: middle;
    width: 1.846154em;              /*48px*/
    height: 1.846154em;             /*48px*/
    border-radius: 0.3076923em;     /*8px*/
    margin: 0.3846154em;            /*10px*/
    pointer-events: initial;
    opacity: 0.5;
}

.media-center .central-view .play-mode-controls.hide .control-bar .animation-controls-btn    {
    pointer-events: none;
}

.media-center .central-view .play-mode-controls .control-bar .animation-controls-btn.disabled   {
    opacity: 0.25;
}

.media-center .central-view .play-mode-controls .control-bar .animation-controls-btn.stop .icon    {
    vertical-align: baseline;
}

.media-center .central-view.big-play-btn .central-view-inner    {
    display: flex;
    justify-content: center;
    align-items: center;
}

.media-center .central-view .big-play-btn .animation-controls-btn   {
    font-size: 4em;                 /*64px*/
    line-height: 2em;               /*128px*/
    width: 2em;                     /*128px*/
    height: 2em;                    /*128px*/
    pointer-events: initial;
    opacity: 1;
    margin: 0;
}

.media-center .central-view .hide .big-play-btn .animation-controls-btn   {
    pointer-events: none;
}

.media-center .central-view .big-play-btn .animation-controls-btn .icon   {
    vertical-align: baseline;
}

.media-center .central-view .media-viewer {
    font-size: 1em;                 /*16px*/
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 1em;                    /*16px*/
    pointer-events: initial;
    background-color: rgba(0, 0, 0, 0.0);
}

.media-center-item-collection {
    position: relative;             /*for contained resize observer*/
    display: block;
}

.bottom-bar .media-center-item-collection {
    height: 8.125em !important;     /*128px !important*/
}

.bottom-bar .media-center-item-collection.vertical-layout {
    height: 100% !important;
    width: 8.125em !important;     /*128px !important*/
}

.media-center-item-collection .media-center-item-collection-container {
    margin: 0.25em 0.125em 0.125em 0.125em;     /*4px 2px 2px 2px*/
    padding: 0;
    overflow: visible;
    white-space: nowrap;
}

.media-center-item-collection.vertical-layout .media-center-item-collection-container {
    margin: 0.125em 0.125em 0.125em 0.25em;     /*2px 2px 2px 4px*/
    white-space: normal;
}

div.media-center-item-std  {
    position: relative;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.3);
    height: 7.25em;                 /*116px*/
    width: 7.25em;                  /*116px*/
    margin: 0 0.25em 0 0;           /*0 4px 0 0*/
    vertical-align: top;
}

.vertical-layout div.media-center-item-std  {
    margin: 0 0.25em 0.25em 0;           /*0 4px 4px 0*/
}

div.media-center-item-std.disabled  {
    opacity: 0.5;
}

div.media-center-item-std:hover  {
    cursor: pointer;
}

div.media-center-item-std.disabled:hover  {
    cursor: initial;
}

div.media-center-item-std.item-type-separator  {
    height: auto;
    width: calc(100% - 0.75em);     /*calc(100% - 12px)*/
    pointer-events: none;
}

div.media-center-item-std div.content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0;
}

div.media-center-item-std > div.content {
    border: 0.125em solid #0000;   /*2px solid rgba(30, 195, 255)*/
}

div.media-center-item-std.selected > div.content    {
    border-color: rgba(30, 195, 255);
}

div.media-center-item-std div.content div.container {
    width: 100%;
    height: 100%;
    padding: 0.25em;                /*4px*/
    background-size: cover;
    background-position: center center;
}

div.media-center-item-std.item-type-presentation div.content div.container.state-bg-image {
    background-color: rgba(0, 0, 0, 0.25);
}

div.media-center-item-std.item-type-separator div.content div.container {
    width: 100%;
    height: 100%;
    padding: 0;
}

div.media-center-item-std .head {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1.625em;                /*26px*/
    line-height: 1.25;              /*20px*/
}

div.media-center-item-std .head .content {
    position: absolute;
    margin: 0.125em 0.25em 0 0.25em;    /*2px 4px 0 4px*/
    width: auto;
    right: 0;
    left: 0;
}

div.media-center-item-std .name-top .head {
    top: auto;
    bottom: 0.25em;                 /*4px*/
}

div.media-center-item-std .head .icon {
    font-size: 1.25em;              /*20px*/
    position: absolute;
    top: 0.1em;                     /*2px*/
    right: 0;
    line-height: 1;                 /*20px*/
}

div.media-center-item-std .name-top .head .icon {
    bottom: 0;
    top: auto;
}

div.media-center-item-std .head .number {
    font-size: 1.5em;               /*24px*/
    position: absolute;
    top: 0;
    left: 0;
    font-weight: 500;
    line-height: 1;                 /*24px*/
}

div.media-center-item-std .name-top .head .number {
    bottom: 0;
    top: auto;
}

div.media-center-item-std .label {
    font-size: 0.75em;              /*12px*/
    position: absolute;
    top: 2.5em;                     /*30px*/
    left: 0;
    padding: 0 0.333333em;          /*0 4px*/
    width: auto;
    height: auto;
    white-space: normal;
    line-height: 1.154;             /*13.848px*/
}

div.media-center-item-std .name-top .label {
    top: auto;
}

div.media-center-item-std.item-type-separator .label {
    position: static;
}

div.media-center-item-std .footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
    padding: 0 0.25em 0.125em 0.25em;   /*0 4px 2px 4px*/
}

div.media-center-item-std .footer .content {
    width: 100%;
}

div.media-center-item-std .footer .content .stats {
    font-size: 0.75em;              /*12px*/
    width: 100%;
    display: flex;
    justify-content: space-between;
}

div.media-center-item-std .footer .content div.duration {
    display: inline-block;
}

div.media-center-item-std .footer .content .duration .icon {
    margin-right: 0.5em;            /*6px*/
}

div.media-center-item-pres {
    margin: 0 0.625em 0.375em 0;        /*0 10px 6px 0*/
    position: relative;
}

.media-center-item-pres div.header  {
    display: flex;
    position: relative;
    padding: 0.125em;               /*2px*/
    overflow-x: hidden;
}

.media-center-item-pres div.header .border-frame    {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    pointer-events: none;
}

.media-center-item-pres.selected div.header .border-frame {
    border: 0.125em solid rgb(30, 195, 255);    /*2px solid rgb(30, 195, 255)*/
}

.media-center-item-pres .header  {
    font-size: 1em;                 /*16px*/
    line-height: 1.5;               /*24px*/
}

.media-center-item-pres .header .toggle {
    padding: 0.375em 0.75em 0.375em 0.75em;     /*6px 12px 6px 12px*/
    text-align: center;
    overflow: visible;
}

.media-center-item-pres .header div.icon  {
   vertical-align: baseline;
}

.media-center-item-pres .header .clicktarget {
    background-color: rgba(0, 0, 0, 0.3);
}

.media-center-item-pres .header .clicktarget:hover {
    /*
    background-color: rgba(96, 96, 96, 0.3);
    */
    cursor: pointer;
}

.media-center-item-pres.disabled .header .clicktarget:hover {
    cursor: initial;
}

.media-center-item-pres .header .separator.vertical  {
    height: auto;
    border-bottom: none;
    width: 1px;
    background-color: white;
    flex-shrink: 0;
}

.media-center-item-pres .header .right {
    display: flex;
    flex-grow: 1;
}

.media-center-item-pres .header .label  {
    padding: 0.375em 0.375em 0.375em 0.75em;    /*6px 6px 6px 12px*/
    flex-grow: 1;
}

.media-center-item-pres .header .duration  {
    padding: 0.375em;               /*6px*/
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 0.375em;            /*6px*/
}

.media-center-item-pres .header .sound-icon {
    padding: 0.375em 0.75em 0.375em 0.375em;    /*6px 12px 6px 6px*/
    text-align: center;
    overflow: visible;
}

.media-center-item-pres .presentation-slides-view   {
    position: relative;
    border: none;
    border-radius: 0;
    height: auto !important;
}

.media-center-item-pres li.presentation-item    {
    display: block;
    position: relative;
    width: auto;
    height: 12.25em;                /*196px*/
    margin: 0.375em 0 0.375em 0;    /* 6px 0 6px 0*/
    background-color: rgba(0, 0, 0, 0);
}

.media-center-item-pres li.presentation-item.selected    {
    background-color: rgba(0, 0, 0, 0);
    border: 0.125em solid rgba(30, 195, 255);   /*2px solid rgba(30, 195, 255)*/
}

.media-center-item-pres .presentation-item div  {
    height: auto;
    width: auto;
    position: absolute;
    padding: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.media-center-item-pres .presentation-item div.container {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    padding: 0.375em;               /*6px*/
}

.media-center-item-pres .presentation-item.selected div.container   {
    padding: 0.25em;                /*4px*/
}

.media-center-item-pres .presentation-item div div.detail {
    position: relative;
    margin-left: 0.375em;           /*6px*/
    margin-right: 0.125em;          /*2px*/
    width: 30%;
}

.media-center-item-pres .presentation-item div div.detail div {
    right: auto;
    bottom: auto;
}

.media-center-item-pres .presentation-item div .preview {
    position: relative;
    height: 100%;
    flex-grow: 3;
}

.media-center-item-pres .presentation-item div .preview div {
    right: auto;
    bottom: auto;
}

.media-center-item-pres .presentation-item div div.detail .index {
    font-size: 1.5em;               /*24px*/
    position: relative;
    font-weight: 400;
}

.media-center-item-pres .presentation-item div div.detail .name {
    font-size: 0.875em;             /*14px*/
    position: relative;
    white-space: pre-wrap;
    line-height: 1.285714em;        /*18px*/
}

.media-center-category-collection {
    position: relative;
    right: 0;
    left: 0;
    background-color: #0000;
    margin: 0 0.25em 0 0;           /*0 4px 0 0*/
    padding: 0.25em;                /*4px*/
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;                     /*8px*/
}

.media-center-category-item  {
    font-size: 1.875em;             /*30px*/
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.5);
    width: 1.4916667em;             /*44.75px*/
    height: 1.4916667em;            /*44.75px*/
    margin: 0;
    text-align: center;
    border: 0.066667em solid #0000;   /*2px hidden #0000*/
    line-height: 1.3125;            /*39.375px*/
}

.media-center-category-item.selected  {
    border-color: #fff;
}

.media-center-category-item.disabled  {
    opacity: 0.5;
}

.media-center-category-item:hover    {
    cursor: pointer;
}

.media-center-category-item.disabled:hover    {
    cursor: initial;
}

.media-center .bottom-bar .slider-bar {
    padding: 0.75em 1em;            /*12px 16px*/
}

.media-center .bottom-bar .slider-bar .ui-slider {
    font-size: 0.875em;             /*14px*/
}

.media-center .bottom-bar .control-bar {
    padding: 0.25em 1em;            /*4px 16px*/
    background-color: rgba(128, 128, 128, 0.2);
    line-height: 0;
}

.media-center .bottom-bar .presentation-slides-view {
    position: relative;
    border: none;
}

.media-center .bottom-bar .control-bar .middle {
    display: flex;
    justify-content: center;
}

.media-center .bottom-bar .control-bar .right {
    width: 5.75em;                  /*92px*/
}

.media-center .bottom-bar .layout-size-container  {
    position: absolute;
    visibility: hidden;
}

.media-center .media-center-control-bar-panel   {
    flex-grow: 1;
    line-height: 1.5;               /*24px*/
    display: flex;
    justify-content: center;
    align-items: center;
}

.media-center .media-center-control-bar-panel .label-panel   {
    font-size: 0.875em;             /*14px*/
    display: flex;
    align-items: center;
    background-color: rgba(51, 51, 51, 0.3);
    border-radius: 0.2142857em;     /*3px*/
    margin: 0.14285714em 0;         /*2px 0*/
    padding: 0.2857143em 1.142857em;          /*4px 16px*/
    min-height: 1.7142857em;        /*24px*/
    line-height: 1.142857em;        /*16px*/
    flex-grow: 1;
    max-width: 50em;                /*700px*/
    overflow: hidden;
}

.media-center .media-center-control-bar-panel .label-panel .number   {
    text-align: left;
    min-width: 1.142857em;          /*16px*/
    align-self: stretch;
}

.media-center .media-center-control-bar-panel .label-panel .label   {
    text-align: center;
    flex-grow: 1;
    margin-left: 0.57142857em;      /*8px*/
}

.media-center .control-bar a  {
    margin-top: 0.125em;            /*2px*/
    margin-bottom: 0.125em;         /*2px*/
}

.media-center .media-center-control-bar-panel a {
    height: 1.5em;                  /*24px*/
    padding: 0 0.75em;              /*0 12px*/
    margin-left: 0.25em;            /*4px*/
    margin-right: 0.25em;           /*4px*/
    line-height: 1.5;               /*24px*/
    vertical-align: middle;
}

.media-center .bottom-bar div.animation-controls    {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.media-center .bottom-bar .presentation-item div {
    -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
}

.media-center .track-bg {
    background-color: rgba(255, 255, 255, 0.15);
}

.media-center .thumb-bg {
    background-color: #fff;
}

.media-center .right-bar .media-center-item-collection    {
    background-color: #0000;
    margin: 0.375em 0 0 0.25em;     /*6px 0 0 4px*/
}

.media-center .right-bar .media-center-item-collection .media-center-item-collection-container    {
    margin: 0;
    white-space: normal;
}

.media-center .right-bar div.media-center-item-std  {
    margin: 0 0.5em 0.5em 0;        /*0 8px 8px 0*/
}

.media-center .right-bar .bottom-bar    {
    position: relative;
    display: inline-block;
    height: 100%;
}

.media-center .right-bar .bottom-bar .media-center-item-collection  {
    margin: 0;
}

.media-center .right-bar .bottom-bar .media-center-item-collection.vertical-layout .media-center-item-collection-container {
    margin: 0.125em 0.125em 0.125em 0.25em;
}

.media-center .right-bar .bottom-bar.vertical-layout div.media-center-item-std {
    margin: 0 0.25em 0.25em 0;
}

/* --------------------------------------------------------------------------- */
/* media function fragment view */
.media-function-fragment-view {
    font-size: 1em;                 /*16px*/
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0);
    color: white;
    z-index: 1049;
    pointer-events: none;
}

.media-function-fragment-view .backdrop  {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.3);
    pointer-events: initial;
}

.media-function-fragment-view .media-container  {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0);
    pointer-events: none;
}

.media-function-fragment-view .media-viewer {
    font-size: 1em;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: 1em;                    /*16px*/
    pointer-events: initial;
    background-color: rgba(0, 0, 0, 0.0);
}

/* --------------------------------------------------------------------------- */
/* overlays */
.overlay-container {
    font-size: 1em;                 /*16px*/
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0);
    color: white;
    z-index: 2;
    pointer-events: none;
}

.overlay-factory {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0);
}

.overlay .toogle.toogle-switch,
.overlay .btn {
    font-size: 1em;                 /*16px*/
}

.overlay .ui-slider {
    font-size: 0.875em;             /*14px*/
}

.overlay .view {
    position: absolute;
    font-weight: 400;
    transition: visibility 0.3s linear, opacity 0.3s linear;
}

.overlay .view.right-bottom {
    width: 6.25em;                  /*100px*/
    display: block;
    text-align: center;
    padding: 0;
    right: 0.5em;                   /*8px*/
    bottom: 0.5em;                  /*8px*/
}

.overlay .view.right-bottom a {
    pointer-events: initial;
    display: block;
}

.overlay .view.right-bottom .hide-lens img {
    height: 2.0625em;               /*33px*/
}

.overlay .view.animation-control {
    display: block;
    width: 37.5em;                  /*600px*/
    max-width: calc(100% - 0.375em);    /*calc(100% - 6px)*/
    text-align: left;
    padding: 0;
    bottom: 0.375em;                /*6px*/
    margin-left: 0;
}

.overlay .view.animation-control div.body {
    pointer-events: initial;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.375em 0.25em 0.375em 0.625em;    /*6px 4px 6px 10px*/
}

.overlay .view.animation-control .transparent-btn.animation-controls-btn {
    font-size: 1em;
    background-color: rgba(0, 0, 0, 0);
    width: 2em;                     /*32px*/
    height: 2em;                    /*32px*/
    margin: 0 0.125em 0 0;          /*0 2px 0 0*/
    line-height: 2;                 /*32px*/
}

.overlay .view.animation-control div.header .icon-label    {
    display: inline-block;
    position: relative;
    left: 1em;                      /*16px*/
    padding: 0.25em 1em;            /*4px 16px*/
}

.overlay .view.animation-control div img    {
    height: 1.375em;                /*22px*/
}

.overlay .view.animation-control .animation-controls {
    display: inline-flex;
    align-items: center;
    width: initial;
    flex-grow: 1;
    min-width: 6.25em;              /*100px*/
    margin-right: 0.375em;          /*6px*/
}

.overlay .view.animation-control .animation-controls .animation-controls-slider-container    {
    flex-grow: 1;
    min-width: 9.375em;             /*150px*/
}

.overlay .view.animation-control div.body .animation-controls-left-btns  {
    padding-top: 0;
}

.overlay .overlay-text-box    {
    position: absolute;
    width: 50%;
    max-width: 45em;                /*720px*/
    left: 10%;
    top: 10%;
    background-color: white;
    border: 1px solid black;
    pointer-events: none;
    transition: visibility 0s linear, opacity 0.3s ease-in-out;
    opacity: 0;
}

.overlay .overlay-text-box.right    {
    left: unset;
    right: 10%;
}

.overlay .overlay-text-box.isOpen   {
    opacity: 1;
    pointer-events: initial;
}

.overlay .overlay-text-box.isHidden   {
    visibility: hidden;
    pointer-events: none;
}

.overlay .overlay-text-box .top-btn   {
    font-size: 1.5em;               /*24px*/
    position: absolute;
    top: -0.833333em;               /*-2px*/
    line-height: 1;                 /*24px*/
    background-color: rgba(0, 0, 0, 0);
    color: rgb(26, 26, 26);
    padding: 0.35em 0.35em;         /*8.4px 8.4px*/
}

.overlay .overlay-text-box .top-btn:hover   {
    color: rgb(26, 26, 26);
    background-color: rgba(0, 0, 0, 0);
    cursor: pointer;
}

.overlay .overlay-text-box .right.top-btn   {
    right: 0;
}

.overlay .overlay-text-box .left.top-btn   {
    left: 0;
}

.overlay .overlay-text-box iframe {
    width: 100%;
    border: none;
}

.overlay.zeiss-uv .view.display {
    top: 50%;
    margin-left: 1.125em;           /*18px*/
    padding: 0;
    transform: translateY(-50%);
    text-align: center;
}

.overlay.zeiss-uv .view.display div {
    font-size: 1.5em;               /*24px*/
    line-height: 1.0833333;         /*26px*/
    padding: 0.0833333em 0.333333em;    /*2px 8px*/
}

.overlay.zeiss-uv .view.display.wavelength {
    min-width: 1.25em;              /*20px*/
}

.overlay.zeiss-uv .view.display.wavelength div .first-line {
    font-size: 1.08333333em;        /*26px*/
    line-height: 1.0769231;         /*28px*/
    min-width: 3.8461538em;         /*100px*/
}

.overlay.zeiss-uv .view.display.wavelength div .second-line {
    font-size: 0.70833333em;        /*17px*/
    line-height: 1.1176471;         /*19px*/
    font-weight: 300;
}

.overlay.zeiss-uv .view.display.age {
    min-width: 1.25em;              /*20px*/
}

.overlay.zeiss-uv .view.display.anatomy {
    min-width: 1.25em;              /*20px*/
}

.overlay.zeiss-uv .view.display.title {
    left: 50%;
    transform: translateX(-50%);
    top: 0.875em;                   /*14px*/
}

.overlay.zeiss-opti .view   {
    font-weight: 300;
}

.overlay.zeiss-opti .view.container {
    position: fixed;
    bottom: auto;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
}

.overlay.zeiss-opti .view.container .preview {
    position: absolute;
    left: 0.25em;                   /*4px*/
    bottom: 0.25em;                 /*4px*/
    margin: 0;
    width: 6.375em;                 /*102px*/
    text-align: right;
    padding: 0;
}

.overlay.zeiss-opti .view.container .preview div    {
    display: block;
    font-size: 0.875em;             /*14px*/
    padding: 0.2857em;              /*4px*/
    margin: 0.2857em;               /*4px*/
}

.overlay.zeiss-opti .view.container .preview div img,
.overlay.zeiss-opti .view.container .preview div span    {
    position: absolute;
    left: 0.5em;                    /*7px*/
    height: 1.375em;                /*19.25px*/
    margin-top: 0.0625em;
}

.overlay.zeiss-opti .view.container .preview div img    {
    margin-top: 0.0625em;
}

.overlay.zeiss-opti .view.container .zoom {
    position: absolute;
    bottom: 0.5em;                  /*8px*/
    left: 0.5em;                    /*8px*/
    margin: 0;
    width: auto;
    height: auto;
    text-align: right;
    padding: 0;
    pointer-events: initial;
}

.overlay.zeiss-opti .view.container .zoom .transparent-btn {
    display: inline-block;
}

.overlay.zeiss-opti .view.container .zoom .transparent-btn.next {
    margin-left: 0.375em;           /*6px*/
}

.overlay.zeiss-opti .view.container .zoom .transparent-btn .icon {
    font-size: 1.375em;             /*22px*/
    padding: 0.2727273em;           /*6px*/
    line-height: 1.181818;          /*26px*/
}

.overlay.zeiss-opti .view.container.zoom-perspectives {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.overlay.zeiss-opti .view.container.zoom-perspectives .item {
    display: block;
    height: 2em;                    /*32px*/
    background-size: cover;
    pointer-events: initial;
    flex-shrink: 2;
    margin: 0.125em 0;              /*2px 0*/
    border: 1px solid #fff;
}

.overlay.zeiss-opti .view.container.zoom-perspectives .item.first {
    margin-top: 0;
}

.overlay.zeiss-opti .view.container.zoom-perspectives .item.last {
    margin-bottom: 0;
}

.overlay.zeiss-opti .view.container.zoom-perspectives .item.selected {
    border: 1px solid rgba(95, 131, 251, 1);
}

.overlay.zeiss-opti .view.container.zoom-perspectives .item:hover {
    cursor: pointer;
}

.overlay.zeiss-opti .view.animation-control div img    {
    height: 1.875em;                /*30px*/
    margin-right: 1.125em;          /*18px*/
}

.overlay.zeiss-opti .view.animation-control .hide-lens-control {
    display: inline-block;
    white-space: nowrap;
    margin-left: 0.5em;             /*8px*/
    margin-right: 2.5em;            /*40px*/
}

.overlay.zeiss-opti .view.animation-control .correction-btn-control  {
    display: inline-flex;
    flex-grow: 1;
    width: initial;
    white-space: nowrap;
}

.overlay.zeiss-opti .view.animation-control .animation-controls-btn.correction  {
    line-height: 2;                 /*32px*/
    padding-top: 0.0625em;          /*1px*/
}

.overlay.zeiss-opti .view.animation-control .right-label {
    display: inline-block;
    margin-right: 0.875em;          /*14px*/
    min-width: 4.75em;              /*76px*/
    text-align: right;
}

.overlay.animal-cell {
    transition: visibility 0.3s linear, opacity 0.3s linear;
}

.overlay.animal-cell .view.title {
    font-size: 1.75em;              /*28px*/
    position: absolute;
    top: 3.7142857em;               /*104px*/
    margin-left: 2.2142857em;       /*62px*/
    padding: 0 0.64285714em;        /*0 18px*/
    color: #000;
    background-color: rgba(162, 162, 162, 1);
    border: 1px solid #000;
    border-radius: 0.3571429em;     /*10px*/
    font-weight: 400;
    line-height: 1.821429;          /*51px*/
    text-align: center;
    vertical-align: middle;
    min-width: 10.142857em;         /*284px*/
}

/* --------------------------------------------------------------------------- */
/* controller */

/* presentation controller */
.presentation-controller {
    width: 15.625em;                /*250px*/
}

.presentation-controller .group-control-title  {
    font-size: 1.2em;               /*12px*/
}

.presentation-controller .group-control.presentation .group-control-body,
.presentation-controller .group-control.slides .group-control-body   {
    padding-bottom: 0.25em;         /*4px*/
}

.presentation-controller .save-btn    {
    margin: 0 0 0 0.25em;           /*0 0 0 4px*/
}

.presentations-view,
.presentation-slides-view {
    display: block;
    height: 4.325em !important;     /*70px !important*/
    width: auto !important;
    border-radius: 0.125em;         /*2px*/
    border: 1px solid #888888;
}

.presentation-slide-magnification   {
    position: absolute;
    background-size: cover;
    background-position: center center;
    border: 1px solid #888888;
}

.presentation-slide-magnification.hide   {
    display: none;
}

.presentations-view ul,
.presentation-slides-view ul {
    margin: 0.125em 0.0625em 0.125em 0.0625em;  /*2px 1px 2px 1px*/
    padding: 0;
    list-style-type: none;
    overflow: visible;
    white-space: nowrap;
}

li.presentation-item  {
    display: inline-block;
    position: relative;
    background-color: rgba(0, 0, 0, 0);
    width: 3.625em;                 /*58px*/
    height: 3.625em;                /*58px*/
    margin: 0 0.0625em 0 0.0625em;  /*0 1px 0 1px*/
}

li.presentation-item.selected  {
    background-color: rgba(30, 195, 255);
}

li.presentation-item:hover    {
    cursor: pointer;
}

li.presentation-item.disabled:hover    {
    cursor: initial;
}

.disabled li.presentation-item:hover    {
    cursor: initial;
}

.presentation-item div {
    position: relative;
    left: 0.125em;                  /*2px*/
    top: 0.125em;                   /*2px*/
    width: 3.375em;                 /*54px*/
    height: 3.375em;                /*54px*/
    padding: 0.125em;               /*2px*/
    background-size: cover;
    background-position: center center;
}

.presentation-item span.index-label {
    font-size: 1em;                 /*16px*/
    position: absolute;
    right: 0.1875em;                /*3px*/
    bottom: 0.1875em;               /*3px*/
    padding: 0.0625em 0.0625em 0 0.125em;   /*1px 1px 0 2px*/
    vertical-align: bottom;
    font-weight: 300;
    line-height: 1;                 /*16px*/
    background-color: rgba(0.3, 0.3, 0.3, 0.4);
}

.presentation-controller .track-bg    {
    background-color: rgba(255, 255, 255, 0.15);
}

.presentation-controller .thumb-bg    {
    background-color: rgb(255, 255, 255);
}

.presentation-controller .two-row-button-bar    {
    padding-top: 0.125em;           /*2px*/
    padding-bottom: 0;
}

.presentation-controller .two-row-button-bar .left .transparent-btn {
    margin-left: 0;
}

.presentation-controller .two-row-button-bar .right .transparent-btn {
    margin-right: 0;
}

.presentation-controller .separator {
    margin: 0.4375em 0;             /*7px 0*/
}

.presentation-controller .animation-controls-slider-container   {
    padding-right: 0;
}

.presentation-controller .animation-controls-left-btns .stop   {
    margin-left: 0;
}

/* --------------------------------------------------------------------------- */
/* presentation slide toolbar */
.presentation-slide-toolbar {
    font-size: 1em;                 /*16px*/
    margin: 0;
    padding: 0.5em;                 /*8px*/
}

.presentation-slide-toolbar .presentation-slides-view {
    display: block;
    height: 7.25em !important;      /*116px !important*/
    width: auto !important;
    border: 1px solid rgba(178, 178, 178, 0.5);
}

.presentation-slide-toolbar .presentation-slides-view ul {
    margin: 0.125em 0.0625em 0.125em 0.0625em;      /*2px 1px 2px 1px*/
}

.presentation-slide-toolbar li.presentation-item  {
    background-color: rgba(0, 0, 0, 0);
    height: 6.5em;                  /*104px*/
    width: 6.5em;                   /*104px*/
    margin: 0 0.0625em 0 0.0625em;  /*0 1px 0 1px*/
}

.presentation-slide-toolbar li.presentation-item.selected  {
    background-color: rgba(30, 195, 255);
}

.presentation-slide-toolbar .presentation-item div {
    left: 0.125em;                  /*2px*/
    top: 0.125em;                   /*2px*/
    height: 6.25em;                 /*100px*/
    width: 6.25em;                  /*100px*/
    padding: 0.125em;               /*2px*/
}

.presentation-slide-toolbar .track-bg    {
    background-color: rgba(255, 255, 255, 0.15);
}

.presentation-slide-toolbar .thumb-bg    {
    background-color: rgb(255, 255, 255);
}

.presentation-slide-toolbar div.animation-controls    {
    padding-top: 0.5em;             /*8px*/
    padding-right: 0;
}

/*-----------------------------------------------------------------------------*/
/* presentation-slide-controller */
.presentation-slide-controller {
    width: 15.625em;                /*250px*/
}

.no-header .presentation-slide-controller {
    padding-top: 0.375em;           /*6x*/
}

.presentation-slide-controller .control {
    justify-content: right;
}

.presentation-slide-controller .control .control-widget {
    width: 4.25em;                  /*68px*/
}

/*-----------------------------------------------------------------------------*/
/* presentation-data-controller */
.presentation-data-controller {
    width: 15.625em;                /*250px*/
    padding-bottom: 0.5em;          /*8px*/
}

.presentation-data-controller .control {
    justify-content: right;
}

.presentation-data-controller .control > .label {
    text-align: right;
}

.presentation-data-controller .control .control-widget {
    width: 4.25em;                  /*68px*/
}

/*-----------------------------------------------------------------------------*/
/* add-presentation-controller */
.add-presentation-controller    {
    width: 15.625em;                /*250px*/
}

/*-----------------------------------------------------------------------------*/
/* interval-edit-view */
.interval-edit-view {
    font-size: 1em;                 /*16px*/
    position: relative;
    overflow: hidden;
    font-weight: 300;
    border-color: transparent;
}

.interval-edit-view .upper-bar  {
    position: relative;
    display: flex;
    justify-content: space-between;
    background-color: transparent;
    font-weight: inherit;
    border-color: inherit;
}

.interval-edit-view .upper-bar div {
    display: inline-block;
    border-color: inherit;
}

.interval-edit-view .upper-bar div.center div {
    display: inline-block;
    width: 2.5em;                   /*40px*/
    margin: 0 0.25em;               /*0 4px*/
    text-align: center;
}

.interval-edit-view .number-input    {
    font-size: 0.875em;             /*14px*/
}

.interval-edit-view .upper-bar .number-input    {
    padding: 0;
    margin: 0;
    font-weight: inherit;
}

.interval-edit-view .upper-bar .number-input input   {
    width: 2.857143em;              /*40px*/
}

.interval-edit-view .container-view   {
    position: relative;
    display: block;
    background-color: transparent;
    border-color: inherit;
}

.interval-edit-view .container-view .content-view   {
    position: relative;
    display: block;
    height: 2.25em;
    background-color: transparent;
    border-color: inherit;
}

.interval-edit-view .container-view .content-view .duration-view  {
    position: absolute;
    background-color: white;
}

.interval-edit-view .container-view .content-view .interval-view  {
    position: absolute;
    background-color: rgba(178, 178, 178, 0.6);
}

.interval-edit-view .container-view .content-view .natural-interval-view  {
    position: absolute;
    background-color: rgba(51, 51, 51, 0.6);
}

.interval-edit-view .container-view .content-view .line-view  {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.9);
}

.interval-edit-view .container-view .content-view .interval-edit-drag-view    {
    position: absolute;
    display: inline-block;
    width: 1.5em;                   /*24px*/
    height: 1.5em;                  /*24px*/
    padding: 0.25em;                /*4px*/
}

.interval-edit-view .container-view .content-view .interval-edit-drag-view .btn-view   {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid rgba(77, 77, 77, 0.6);
    background-color: rgba(230, 230, 230, 1);
}

.interval-edit-view .container-view .content-view .interval-edit-drag-view.disabled .btn-view   {
    opacity: 0.25;
}

/*-----------------------------------------------------------------------------*/
/* presentation-attribute-controller */
.presentation-attribute-controller  {
    width: 20.125em;                /*322px*/
    padding-bottom: 0.75em;         /*12px*/
}

.presentation-attribute-cell  {
    display: block;
    padding: 0.25em 0 0 0;          /*4px 0 0 0*/
    font-weight: 300;
    line-height: 1;                 /*16px*/
}

.presentation-attribute-cell .body  {
    display: block;
    position: relative;
    font-weight: inherit;
}

.presentation-attribute-cell .separator {
    margin: 0.5em 0.5em 0 0.5em;    /*8px 8px 0 8px*/
}

.presentation-attribute-cell .header  {
    display: flex;
    position: relative;
    font-weight: 300;
    padding: 0 0.25em;              /*0 4px*/
}

.presentation-attribute-cell .header .title  {
    font-size: 0.75em;              /*12px*/
    display: inline-block;
    flex-grow: 1;
    line-height: 1.33333;           /*16px*/
    margin-top: 0.33333em;          /*4px*/
}

.presentation-attribute-cell .header .right-bar  {
    font-size: 0.75em;              /*12px*/
    float: right;
    width: 7.16667em;               /*86px*/
    margin: 0.33333em 0.5em 0 0.66667em;    /*4px 6px 0 8px*/
    line-height: 1.33333;           /*16px*/
}

.presentation-attribute-cell .header .link-type-icon    {
    font-size: 0.75em;              /*12px*/
    margin: 0 0.33333em;            /*0 4px*/
    line-height: 1.33333;           /*16px*/
}

.presentation-attribute-cell .transparent-btn   {
    font-size: 0.875em;             /*14px*/
    display: inline-block;
    border-radius: 0.2142857em;     /*3px*/
    width: 1.7142857em;             /*24px*/
    height: 1.7142857em;            /*24px*/
    padding: 0;
    text-align: center;
    line-height: 1.7142857;         /*24px*/
}

.presentation-attribute-cell .add-btn {
    margin-top: 0.285714em;         /*4px*/
    margin-right: 1.142857em;       /*16px*/
    width: 2.142857em;              /*30px*/
    height: 2.142857em;             /*30px*/
    line-height: 2.142857;          /*30px*/
}

.presentation-attribute-cell .type-icon {
    font-size: 0.875em;             /*14px*/
    width: 1.428571em;              /*20px*/
    line-height: 1.428571;          /*20px*/
}

.presentation-attribute-cell .dump-btn {
    z-index: 1;
    vertical-align: middle;
    margin-right: 0.57142857em;     /*8px*/
}

.presentation-attribute-cell .number-input    {
    font-size: 0.75em;              /*12px*/
    font-weight: inherit;
}

.presentation-attribute-cell .number-input input    {
    width: 3.33333em;               /*40px*/
}

.presentation-attribute-cell .number-input .label    {
    font-weight: 400;
}

.presentation-attribute-cell .interval-edit-view {
    font-size: 1em;                 /*16px*/
    font-weight: inherit;
    display: block;
    margin-top: 0.375em;            /*6px*/
}

.presentation-attribute-cell .interval-edit-view .upper-bar {
    padding: 0 0.25em;              /*0 4px*/
}

.presentation-attribute-cell .interval-edit-view .upper-bar div.left {
    margin-left: 2em;               /*32px*/
}

.presentation-attribute-cell .interval-edit-view .upper-bar div.center {
    display: none;
}

.presentation-attribute-cell .interval-edit-view .upper-bar div.right {
    width: 5.375em;                 /*86px*/
    margin-right: 0.375em;          /*6px*/
}

.presentation-attribute-cell .interval-edit-view .container-view {
    display: block;
    padding: 0 2.3125em;            /*0 37px*/
}

.presentation-attribute-cell .interval-edit-view .container-view .content-view {
    margin-top: 0.375em;            /*6px*/
}

.presentation-attribute-cell.slide-view-time .body  {
    text-align: center;
}

.presentation-attribute-cell.slide-view-time .number-input    {
    display: inline-block;
    margin: 0.5em 0.66667em 0 0.66667em;    /*6px 8px 0 8px*/
}

.presentation-attribute-cell.slide-view-time .number-input .label    {
    margin-right: 0.66667em;        /*8px*/
    font-weight: 400;
}

.presentation-attribute-cell.slide-view-time .sync-slide-view-time-btn    {
    margin-left: 0.2857143em;       /*4px*/
}

/*-----------------------------------------------------------------------------*/
/* asset-selection-controller */
.asset-selection-controller  {
    width: 17.5em;                  /*280px*/
}

.asset-selection-controller .container {
    display: block;
    height: 17.5em;                 /*280px*/
    padding: 0.25em 0 0 0.25em;     /*4px 0 0 4px*/
}

.asset-selection-controller .container .custom-scrollbar-content {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

.asset-selection-controller .bottom-bar {
    display: block;
    text-align: right;
    position: relative;
    right: initial;
    bottom: initial;
    left: initial;
    height: auto;
    padding: 0;
    margin: 0.25em;                 /*4px*/
    background-color: transparent;
}

.asset-selection-controller .bottom-bar .transparent-btn    {
    font-size: 1em;                 /*16px*/
    display: inline-block;
    width: 1.875em;                 /*30px*/
    text-align: center;
    line-height: 1.875;             /*30px*/
    background-color: transparent;
}

.asset-selection-controller .asset-selection-cell   {
    position: relative;
    display: inline-block;
    width: 5.3125em;                /*85px*/
    height: 5.3125em;               /*85px*/
    background-color: #6F6F6F;
    margin: 0.125em;                /*2px*/
}

.asset-selection-controller .asset-selection-cell .cell-border {
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: 0;
    border: none;
    background-color: transparent;
}

.asset-selection-controller .asset-selection-cell.selected .cell-border {
    border: 0.125em solid rgb(30, 195, 255);    /*2px solid rgb(30, 195, 255)*/
}

.asset-selection-controller .asset-selection-cell .container   {
    position: absolute;
    top: 0.125em;                   /*2px*/
    left: 0.125em;                  /*2px*/
    bottom: 0.125em;                /*2px*/
    right: 0.125em;                 /*2px*/
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.asset-selection-controller .asset-selection-cell .icon {
    font-size: 1.125em;             /*18px*/
    position: absolute;
    right: 0.222222em;              /*4px*/
}

.asset-selection-controller .asset-selection-cell .label {
    font-size: 0.75em;              /*12px*/
    position: absolute;
    right: 0.333333em;              /*4px*/
    bottom: 0.333333em;             /*4px*/
    left: 0.333333em;               /*4px*/
    font-weight: 300;
}

/*-----------------------------------------------------------------------------*/
/* search controller */
.search-controller {
    width: 21.875em;                /*350px*/
    font-weight: 300;
}

.search-controller .control-without-label {
    padding: 0.5em 0.5em 0.25em 0.5em;  /*8px 8px 4px 8px*/
}

.search-controller .control-without-label.search-list {
    height: 23.4375em;              /*375px*/
}

.search-controller .search-cell {
    margin-bottom: 0.125em;         /*2px*/
}

.search-controller .search-cell .content {
    display: flex;
    padding-right: 0.5em;           /*8px*/
}

.search-controller .search-cell .label {
    font-size: 0.75em;              /*12px*/
    flex-grow: 1;
    line-height: 1.3333;            /*16px*/
    padding-left: 0.16667em;        /*2px*/
}

.search-controller .search-cell.non-reachable .label    {
    opacity: 0.5;
}

.search-controller .search-cell .label .primary {
    line-height: 2.6667;            /*32px*/
    vertical-align: middle;
}

.search-controller .search-cell .label .primary span {
    font-size: 1em;                 /*12px*/
    display: inline-block;
    line-height: 1.3333;            /*16px*/
}

.search-controller .search-cell .label .secondary {
    font-size: 0.8333em;            /*10px*/
    line-height: 1.4;               /*14px*/
}

.search-controller .search-cell .btn-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 0.5em;               /*0 8px*/
}

.search-controller .search-cell .transparent-btn {
    font-size: 1em;                 /*16px*/
    display: inline-block;
    margin: 0;
    height: 1.5em;                  /*24px*/
    width: 1.5em;                   /*24px*/
    padding: 0;
    border-radius: 0.1875em;        /*3px*/
    text-align: center;
    line-height: 1.5;               /*24px*/
}

.search-controller .search-cell .btn-spacer {
    display: inline-block;
    height: 1.5em;                  /*24px*/
    width: 1em;                     /*16px*/
}

.search-controller .search-cell .separator {
    margin: 0.125em 0.625em 0 0;    /*2px 10px 0px 0px*/
    border-color: rgba(255, 255, 255, 1);
}

/* --------------------------------------------------------------------------- */
/* settings controller */
.settings-controller {
    width: 15.625em;                /*250px*/
}

/* --------------------------------------------------------------------------- */
/* label controller */
.label-controller {
    width: 15.625em;                /*250px*/
}

/* --------------------------------------------------------------------------- */
/* substructure controller */
.substructure-controller {
    width: 15.625em;                /*250px*/
}

.substructure-controller .class .head {
    font-size: 0.875em;             /*14px*/
    display: flex;
    align-items: baseline;
    margin-bottom: 0.571429em;      /*8px*/
    line-height: 1.142857;          /*16px*/
}

.substructure-controller .class .head .label {
    margin: 0 0.571429em 0 0.285714em;  /*0 8px 0 4px*/
    flex-grow: 1;
}

.substructure-controller .class .head .color-checkbox   {
    flex-shrink: 0;
}

.substructure-controller .class .head .color-checkbox span {
    margin-right: 0.428571em;       /*6px*/
}

.substructure-controller .class .category-dropdown.not-applied .dropdown-toggle {
    opacity: .65;
}

/* --------------------------------------------------------------------------- */
/* note controller */
.note-controller {
    width: 15.625em;                /*250px*/
}

/* note popover */
.note-popover {
    width: 34.375em;                /*550px*/
    height: 18.75em;                /*300px*/
    max-width: calc(100vw - 1em);
    max-height: calc(100vh - 2.625em);
    min-width: 15.625em;;           /*250px*/
    min-height: 9.375em;            /*150px*/
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.note-popover .transparent-btn {
    font-size: 1em;                 /*16px*/
    display: inline-block;
    position: relative;
    height: 1.5em;                  /*24px*/
    width: 1.5em;                   /*24px*/
    padding: 0;
    border-radius: 0.1875em;        /*3px*/
    text-align: center;
    margin: 0 0.125em;              /*0 2px*/
}

.note-popover .color-picker-btn.transparent-btn .background, .note-popover .color-picker-btn.transparent-btn .foreground    {
    display: none;
}

.note-popover .text-edit {
    font-size: 0.875em;             /*14px*/
    font-weight: 300;
    margin: 0.214286em 0.5714286em 0.357143em 0.5714286em;     /*3px 8px 5px 8px*/
    color: white;
    flex-grow: 1;
}

.note-popover .text-edit > div {
    height: 100%;                  
    border: none;
    padding: 0.142857em 0.4285714em;    /*2px 6px*/
    background-color: rgba(127, 127, 127, 0.3);
    border-radius: 0;
}

.note-popover .text-edit.autosize > div {
    padding-right: 0;
}

.note-popover .text-edit.autosize .custom-scrollbar-content {
    padding-right: 0.6428571429em;      /*9px*/
}

.note-popover .thumb-bg {
    background-color: rgb(255, 255, 255);
}

.note-popover .note-toolbar  {
    margin: 0 0.375em 0.875em 0.375em;      /*0 6px 14px 6px*/
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.625em 0;                 /*10px 0*/
}

.note-popover .note-toolbar .note-toolbar-button-group  {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625em 0;                 /*10px 0*/
}

.note-popover .font-size-btns   {
    display: inline-block;
}

.note-popover .transparent-btn .icon.primary    {
    font-size: 0.75em;              /*12px*/
    line-height: 1;
    position: absolute;
    right: 0.25em;                  /*3px*/
    top: 0.25em;                    /*3px*/
}

.note-popover .transparent-btn .icon.secondary  {
    font-size: 0.625em;             /*10px*/
    line-height: 1;
    position: absolute;
    left: 0.3em;                    /*3px*/
    bottom: 0.2em;                  /*2px*/
}

.note-popover .transparent-btn .icon.tertiary    {
    font-size: 0.75em;              /*12px*/
    line-height: 1;
    position: absolute;
}

.note-popover .transparent-btn .icon.primary.note-line-color  {
    right: 0.3333em;                /*4px*/
    top: 0.3333em;                  /*4px*/
}

.note-popover .transparent-btn .icon.secondary.note-line-color  {
    font-size: 1em;                 /*16px*/
    transform: rotate(-45deg);
    left: 0.375em;                  /*6px*/
    bottom: 0.125em;                /*2px*/
}

.note-popover .transparent-btn .icon.primary.link-point-size  {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0.16667em;              /*2px*/
    left: 50%;
    transform: translateX(-50%);
}

.note-popover .transparent-btn .icon.secondary.link-point-size  {
    font-size: 0.375em;             /*6px*/
    top: 0.833333em;                /*5px*/
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
}

.note-popover .transparent-btn .icon.tertiary.link-point-size  {
    font-size: 1.25em;              /*20px*/
    transform: rotate(90deg);
    top: -0.1em;
}

.note-popover .transparent-btn.btns-font-dec {
    font-size: 0.625em;             /*10px*/
    height: 2.4em;                  /*24px*/
    width: 2.4em;                   /*24px*/
    padding-top: 0.7em;             /*7px*/
    border-radius: 0.3em;           /*3px*/
    margin: 0 0.2em;                /*0 2px*/
}

.note-popover .transparent-btn .color-bar   {
    font-size: 1.4375em;            /*23px*/
    position: absolute;
    bottom: -0.5434782609em;        /*-12.5px*/
    right: 0;
    left: 0;
    height: 100%;
    pointer-events: none;
}

.note-popover .transparent-btn.is-in-document   {
    font-size: 0.875em;             /*14px*/
    height: 1.714286em;             /*24px*/
    width: 1.714286em;              /*24px*/
    padding: 0;
    border-radius: 0.214286em;      /*3px*/
    text-align: center;
    margin: 0 0.142857em;           /*0 2px*/
}

/* --------------------------------------------------------------------------- */
/* .note-function-controller  */
.note-function-controller .state-color-bar  {
    display: flex;
    justify-content: space-between;
    background-color: rgba(64, 64, 82, 0.8);
    padding: 0.25em 0.625em 0.25em 0.375em;     /*4px 10px 4px 6px*/
}

.note-function-controller .state-color-bar .color-btns {
    height: 2em;                    /*32px*/
}

.note-function-controller .state-color-bar .transparent-btn {
    font-size: 1em;                 /*16px*/
    display: inline-block;
    position: relative;
    width: 1.5em;                   /*24px*/
    height: 1.5em;                  /*24px*/
    padding: 0;
    text-align: center;
    margin: 0 0.125em;              /*0 2px*/
}

.note-function-controller .state-color-bar .color-picker-btn.transparent-btn .background,
.note-function-controller .state-color-bar .color-picker-btn.transparent-btn .foreground    {
    display: none;
}

.note-function-controller .state-color-bar .transparent-btn .color-bar   {
    font-size: 1.4375em;            /*23px*/
    position: absolute;
    left: 0;
    bottom: -0.5652174em;           /*-13px*/
    right: 0;
    height: 100%;
    pointer-events: none;
}

.note-function-controller .state-color-bar .transparent-btn .icon.primary    {
    font-size: 0.75em;              /*12px*/
    line-height: 1;
    position: absolute;
    right: 0.25em;                  /*3px*/
    top: 0.25em;                    /*3px*/
}

.note-function-controller .state-color-bar .transparent-btn .icon.secondary  {
    font-size: 0.625em;             /*10px*/
    line-height: 1;
    position: absolute;
    left: 0.3em;                    /*3px*/
    bottom: 0.2em;                  /*2px*/
}

.note-function-controller .state-color-bar .transparent-btn .icon.primary.note-line-color  {
    right: 0.3333em;                /*4px*/
    top: 0.3333em;                  /*4px*/
}

.note-function-controller .state-color-bar .transparent-btn .icon.secondary.note-line-color  {
    font-size: 1em;                 /*16px*/
    transform: rotate(-45deg);
    left: 0.375em;                  /*6px*/
    bottom: 0.125em;                /*2px*/
}

.note-function-controller .state-color-bar .state-btns .button  {
    font-size: 0.75em;              /*12px*/
    font-weight: 300;
}

.note-function-controller .state-color-bar .state-btns .button.active    {
    color:rgb(30, 195, 255) !important;
}

.note-function-controller .state-color-bar .state-btns .button.disabled    {
    opacity: 0.6;
}

/* --------------------------------------------------------------------------- */
/* note-ext-popover  */
.note-ext-popover {
    width: 12.5em;                  /*200px*/
    min-height: 5.9375em;           /*95px*/
}

/* --------------------------------------------------------------------------- */
/* note-style-transfer-popover  */
.note-style-transfer-popover {
    width: 12.5em;                  /*200px*/
    min-height: 5.9375em;           /*95px*/
}

/*---------------------------------------------------------------------------- */
/* audio track controller */
.audio-track-controller {
    width: 18.75em;                 /*300px*/
}

.audio-track-controller .transparent-btn {
    width: 1.5em;                   /*24px*/
    height: 1.5em;                  /*24px*/
    margin: 0 0.125em;              /*0 2px*/
}

.audio-track-controller .control-without-label.animation-ok {
    display: flex;
    padding: 0.25em 0.25em 0.3125em 0.25em;     /*4px 4px 5px 4px*/
}

.audio-track-controller .animation-controls {
    flex-grow: 1;
}

.audio-track-controller .animation-controls .transparent-btn {
    margin: 0 0.125em;              /*0 2px*/
}

.audio-track-controller .animation-controls-slider-container    {
    padding-left: 0.625em;          /*10px*/
    padding-right: 0.625em;         /*10px*/
}

/*---------------------------------------------------------------------------- */
/* preset controller */
.preset-controller {
    width: 18.75em;                 /*300px*/
}

.preset-controller .transparent-btn {
    display: inline-block;
    width: 1.5em;                   /*24px*/
    height: 1.5em;                  /*24px*/
    padding: 0;
    flex-shrink: 0;
    margin: 0 0.125em;              /*0 2px*/
}

.preset-controller .preset-list {
    position: relative;
    display: block;
    height: 14.5em;                 /*232px*/
}

.preset-controller .preset-cell {
    display: block;
    margin: 0 0.5em 0 0;            /*0 8px 0 0*/
}

.preset-controller .preset-cell .content {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 0.25em;              /*0 4px*/
}

.preset-controller .preset-cell .text-field {
    font-size: 0.875em;             /*14px*/
    flex-grow: 1;
    margin: 0.785714em 0 0.7142857em 0;     /*11px 0 10px 0*/
}

.preset-controller .preset-cell .content > .icon {
    margin: 0 0 0 0.375em;          /*0 0 0 6px*/
    width: 1.5em;                   /*24px*/
    height: 1.5em;                  /*24px*/
    flex-shrink: 0;
    vertical-align: middle;
    line-height: 1.5;               /*24px*/
}

.preset-controller .preset-cell .apply-btn {
    margin: 0 0 0 0.5em;            /*0 0 0 8px*/
}

.preset-controller .preset-cell .dump-btn {
    margin: 0 0.25em 0 0;           /*0 4px 0 0*/
}

.preset-controller .preset-cell .separator {
    margin: 0 0.5em 0 0.5em;        /*0 8px 0 8px*/
}

/*---------------------------------------------------------------------------- */
/* function controller */
.function-controller {
    width: 15em;                    /*240px*/
}

.function-controller .transparent-btn {
    display: inline-block;
    width: 1.5em;                   /*16px*/
    height: 1.5em;                  /*16px*/
    padding: 0;
    margin: 0 0.125em;              /*0 2px*/
}

.function-controller .fragment-list {
    position: relative;
    display: block;
    height: 17.5em;                 /*280px*/
}

.function-controller .fragment-list.compact {
    height: 15em;                   /*240px*/
}

.function-controller .fragment-cell {
    margin: 0 0.5em 0 0.375em;      /*0 8px 0 6px*/
}

.function-controller .fragment-cell .content    {
    margin-bottom: 0.375em;             /*6px*/
}

.function-controller .fragment-cell .content .bar   {
    padding: 0.25em 0;              /*4px 0*/
    margin: 0 0.125em 0;            /*0 2px 0*/
}

.function-controller .fragment-cell .content .bar > .icon {
    font-size: 1em;                 /*16px*/
    line-height: 1.5em;             /*16px*/
    height: 1.5em;                  /*16px*/
}

.function-controller .compact .fragment-cell .content .bar > .icon {
    font-size: 0.875em;             /*14px*/
}

.function-controller .fragment-cell .buttons   {
    float: right;
}

.function-controller .fragment-cell .dump-btn   {
    margin-right: 0;
}

.function-controller .object-model-value-edit .object-value-cell   {
    margin: 0 0.125em 0.5em 0.125em;    /*0 2px 8px 2px*/
}

/* --------------------------------------------------------------------------- */
/* popover menu */
.popover-menu {
    font-size: 1em;                 /*16px*/
    width: auto;
    height: auto;
    padding: 0.125em;               /*2px*/
}

.popover-menu .button {
    font-size: 1em;                 /*16px*/
    height: 1.5em;                  /*24px*/
    width: 1.5em;                   /*24px*/
    padding: 0;
    margin: 0.125em;                /*2px*/
}

/* --------------------------------------------------------------------------- */
/* arrow controller */
.arrow-controller {
    width: 15.625em;                /*250px*/
}

/* --------------------------------------------------------------------------- */
/* arrow-popover  */
.arrow-popover {
    width: 10em;                    /*160px*/
    min-height: 5.9375em;           /*95px*/
}

.arrow-popover .group-control .group-control-body {
    padding: 0 0 0.25em 0;          /*0 0 4px 0*/
}

.arrow-popover .arrow-tool-padding  {
    padding: 0.125em 0.5em 0 0.0625em;  /*2px 8px 0 1px*/
}

.arrow-popover .arrow-tool-tip {
    padding: 0 0 0 0.125em;         /*0 0 0 2px*/ 
}

.arrow-popover .arrow-tool-tip img {
    width: 1.875em;                 /*30px*/
    height: 2.1875em;               /*35px*/
}

.arrow-popover .arrow-tool-middle {
    margin: -0.0625em;              /*-1px*/
}

.arrow-popover .arrow-tool-middle img {
    width: 3.4375em;                /*55px*/
    height: 2.1875em;               /*35px*/
}

.arrow-popover .arrow-tool-end img {
    width: 1.875em;                 /*30px*/
    height: 2.1875em;               /*35px*/
}

.arrow-popover .control .label .icon {
    min-width: 0.75em;              /*9px*/
}

.arrow-popover .control-widget .slider {
    font-size: 0.875em;             /*14px*/
    flex-grow: 0;
    width: 7.857143em;              /*110px*/
    min-width: initial;
    max-width: none;
}

.arrow-popover .color-picker-btn   {
    font-size: 1em;                 /*16px*/
    width: 1.875em;                 /*30px*/
    height: 1.875em;                /*30px*/
    padding: 0.375em;               /*6px*/
    vertical-align: middle;
}

.arrow-popover .popover-slider-setting {
    padding: 0.375em 0.9375em 0.375em 0.5625em;   /*6px 15px 6px 9px*/
}

/* --------------------------------------------------------------------------- */
/* arrow-ext-popover  */
.arrow-ext-popover {
    width: 12.5em;                  /*200px*/
    min-height: 5.9375em;           /*95px*/
    padding-top: 0.125em;           /*2px*/
}

/* --------------------------------------------------------------------------- */
/* user object controller */
.user-object-controller {
    width: 15.625em;                /*250px*/
}

/* --------------------------------------------------------------------------- */
/* user-object-popover  */
.user-object-popover {
    width: 14.0625em;               /*225px*/
    min-height: 5.9375em;           /*95px*/
}

/* --------------------------------------------------------------------------- */
/* user-object-material-popover  */
.user-object-material-popover {
    width: 12.5em;                  /*200px*/
    min-height: 5.9375em;           /*95px*/
}

/* --------------------------------------------------------------------------- */
/* cut controller */
.cut-controller {
    width: 15.625em;                /*250px*/
}

.cut-controller .group-control {
    text-align: center;
}

.cut-controller .control-without-label  {
    text-align: center;
}

.cut-controller .option-group   {
    background-color: rgba(127, 127, 127, 0.3)
}

.cut-controller .control-without-label .cc-button  {
    font-size: 0.75em;              /*12px*/
    width: 7em;                     /*84px*/
    height: auto;
    padding: 0.166667em 0.666667em 0.333333em 0.666667em;   /*2px 8px 4px 8px*/
    margin: 0 0.166667em 0 0.166667em;      /*0 2px 0 2px*/
}

.cut-controller .control-without-label .cc-button .icon {
    font-size: 4em;                 /*48px*/
    margin: 0.083333em 0.208333em 0.083333em 0.208333em;    /*4px 10px 4px 10px*/
    line-height: 1;                 /*48px*/
}

.cut-controller .control-without-label .cc-button.option {
    padding: 0.166667em 0.666667em 0.5em 0.666667em;        /*2px 8px 6px 8px*/
    margin: 0;
    width: 7.166667em;              /*86px*/
    background-clip: padding-box;
}

.cut-controller .control-without-label .cc-button.option.left {
    border-radius: 1em 0 0 1em;     /*12px 0 0 12px*/
}

.cut-controller .control-without-label .cc-button.option.right {
    border-radius: 0 1em 1em 0;     /*0 12px 12px 0*/
}

.cut-controller .control-without-label .cc-button.option .icon {
    font-size: 2.33333em;           /*28px*/
    margin: 0.2142857em 0.357143em 0.142857em 0.357143em;   /*6px 10px 4px 10px*/
    line-height: 1.142857;          /*32px*/
}

.popover-control .cut-controller-minimal .main-menu-button {
    background-color: rgba(0, 0, 0, 0);
}

/* --------------------------------------------------------------------------- */
/* screenshot controller */
.screenshot-controller {
    width: 15.625em;                /*250px*/
}

.screenshot-controller .control.usage-rights-btn .label    {
    line-height: 1.125;             /*13.5px*/
}

.screenshot-controller .control.usage-rights-btn .control-widget .icon-button  {
    font-size: 1.5em;               /*24px*/
    margin-right: 0;
}

.screenshot-preview-controller .image-container {
    display: block;
    text-align: center;
    background-color: black;
}

.screenshot-preview-controller img {
    display: inline-block;
    max-width: 80vw;
    max-height: 80vh;
    object-fit: contain;
    background-color: black;
}

.screenshot-preview-controller .btn-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
    max-width: 80vw;
}

.screenshot-preview-controller .custom-radio-button.button  {
    font-size: 1em;             /*16px*/
}

.screenshot-preview-controller .btn-bar .custom-radio-button.button .crb-frame {
    background-color: rgba(0, 0, 0, 0.6);
}

.screenshot-preview-controller .btn-bar .left {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-weight: 400;
}

.screenshot-preview-controller .btn-bar .attribute-image-control {
    display: inline-flex;
    align-items: center;
    margin: 0.75em 2em 0 0.4375em;  /*12px 32px 0 7px*/
}

.screenshot-preview-controller .btn-bar .left .label {
    font-size: 0.875em;             /*14px*/
    vertical-align: middle;
    margin-left: 0.8571429em;       /*12px*/
    color: rgb(202, 202, 202);
}

.screenshot-preview-controller .btn-bar div.alignment {
    display: inline-flex;
    margin-left: 0.5em;             /*8px*/
    width: 2em;                     /*32px*/
    height: 2em;                    /*32px*/
    flex-wrap: wrap;
    justify-content: space-between;
    flex-shrink: 0;
} 

.screenshot-preview-controller .btn-bar .alignment .custom-radio-button.button  {
    font-size: 0.875em;             /*14px*/
    width: 1.142857em;              /*16px*/
    height: 1.142857em              /*16px*/
}

.screenshot-preview-controller .btn-bar .alignment .custom-radio-button.button .crb-frame {
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
}

.screenshot-preview-controller .btn-bar .alignment .custom-radio-button.button .crb-border {
    border-radius: 0;
}

.screenshot-preview-controller .btn-bar .alignment .custom-radio-button.button .crb-handle {
    width: 0.5625em;                /*7.875px*/
    height: 0.5625em;               /*7.875px*/
    border-radius: 0;
}

.screenshot-preview-controller .btn-bar .alignment .custom-radio-button.button.active .crb-handle,
.screenshot-preview-controller .btn-bar .alignment .custom-radio-button.button.active:hover .crb-handle
{
    background-color: rgba(47, 124, 255) !important;
}

/*
.screenshot-preview-controller .btn-bar .alignment .custom-radio-button.button:hover .crb-handle {
    background-color: rgba(47, 124, 255, 0.4) !important;
    cursor: pointer;
}
*/

.screenshot-preview-controller .save-btn  {
    display: inline-block;
    padding: 0;
    min-width: 9.375em;             /*150px*/
    margin-top: 0.75em;             /*12px*/
}

/* --------------------------------------------------------------------------- */
/* text view controller */
.text-view-controller {
    width: 29.6875em;               /*475px*/
    background-color: white;
    margin: 0.078125em;             /*1.25px*/
}

.text-view-controller .close-btn    {
    font-size: 1.5em;               /*24px*/
    position: absolute;
    top: -0.1666667em;              /*-4px*/
    right: 0.1666667em;             /*4px*/
    line-height: 1;                 /*24px*/
    background-color: rgba(0, 0, 0, 0);
    color: rgb(26, 26, 26) !important;
    padding: 0.35em;                /*8.4px*/
}

.text-view-controller .close-btn:hover    {
    color: rgb(26, 26, 26) !important;
    background-color: rgba(0, 0, 0, 0);
    cursor: pointer;
}

.text-view    {
    width: 100%;
    height: auto;
    min-height: 12.5em;             /*200px*/
    max-height: 75vh;
}

.text-view iframe {
    width: 100%;
    border: none;
}

/* --------------------------------------------------------------------------- */
/* alert modal controller */
.modal.alert-modal-controller .modal-dialog    {
    margin-top: 25vh;
}

.modal.alert-modal-controller.fade .modal-dialog    {
    transform: translate(0, -50%);
}

.modal.alert-modal-controller.show .modal-dialog    {
    transform: translate(0, 0);
}

.modal.alert-modal-controller .modal-dialog .modal-content {
    overflow: hidden;
    border: none;
    background: none;
}

.modal.alert-modal-controller .modal-dialog button.close-btn {
    font-size: 1.375em;             /*22px*/
    padding: 0.2727273em 0.54545454em;      /*6px 12px*/
    color: #f8f9fa;
    opacity: 1;
    background: none;
}

.modal.alert-modal-controller .modal-dialog button:hover {
    cursor: pointer;
}

.modal.alert-modal-controller .modal-dialog div.modal-header {
    background-color: #dc3545;
    color: #f8f9fa;
    text-align: center;
    display: block;
    border: none;
    border-radius: 0;
}

.modal.alert-modal-controller.message-style .modal-dialog div.modal-header {
    background-color: #7e7e7e;
}

.modal.alert-modal-controller .modal-dialog div.modal-body {
    background: #fff;
}

.modal.alert-modal-controller .modal-dialog div.modal-footer {
    background: #fff;
}

.modal.alert-modal-controller .modal-dialog .modal-title {
    font-weight: 300;
}

/* --------------------------------------------------------------------------- */
/* status dialog */
.status-dlg  {
    text-align: center;
    line-height: 1.5;               /*24px*/
}

.status-dlg .message    {
    font-size: 1.25em;              /*20px*/
    font-weight: 500;
    margin: 1.2em;                  /*24px*/
    line-height: 1.2;               /*24px*/
}

.status-dlg .upgrade-message    {
    margin: 0 1.5em 1.5em 1.5em;    /*0 24px 24px 24px*/
    font-weight: 300;
}

.status-dlg .upgrade-browser-bar    {
    margin: 0 1.5em 1.5em 1.5em;    /*0 24px 24px 24px*/
    font-weight: 400;
}

/* --------------------------------------------------------------------------- */
/* browser bar */
.browser-bar    {
    display: block;
    text-align: center;
}

.browser-bar button {
    display: inline-block;
    background-color: rgba(0, 0, 0, 0);
    color: black;
    border: none;
    margin: 0 0.625em;              /*0 10px*/
    background-clip: padding-box;
    border-radius: 0.1875em;        /*3px*/
}

.browser-bar button:hover   {
    cursor: pointer;
}

.browser-bar button:active   {
    background-color: rgba(0, 0, 0, 0.1);
}

.browser-bar button img {
    display: block;
    width: 3em;                     /*48px*/
    height: 3em;                    /*48px*/
    background-color: rgba(0, 0, 0, 0);
    margin: 0 auto;
}

.browser-bar button span {
    display: block;
    text-align: center;
}

/* --------------------------------------------------------------------------- */
/* std modal controller */
div.modal.oe-modal {
    transition: filter 0.33s ease 0s, opacity .15s linear;  /* support for animated blur filters with OEBlurLayer for specific OEModal */
}

.modal.std-modal-controller .modal-dialog {
    font-size: 1em;                 /*16px*/
    position: relative;
    width: auto;
    margin: 12vh auto auto auto;
}

.modal.std-modal-controller .modal-dialog .modal-content {
    background-color: rgba(0, 0, 0, 0);
    color: #eee;
    border: none;
}

.modal.std-modal-controller .modal-dialog .header .btn {
    font-size: 1em;                 /*16px*/
    position: absolute;
    top: 0;
    right: 2.125em;                 /*34px*/
    width: 2.375em;                 /*38px*/
    height: 2.375em;                /*38px*/
    padding: 0;
    line-height: 1.875;             /*30px*/
}

.modal.std-modal-controller .modal-dialog button.close-btn {
    font-size: 1.5em;               /*24px*/
    position: absolute;
    top: -0.5em;                    /*-12px*/
    right: -0.5em;                  /*-12px*/
    width: 1.5833em;                /*38px*/
    height: 1.5833em;               /*38px*/
    padding: 0px 0px 0.0417em 0.0417em;   /*0px 0px 1px 1px*/
    color: #000;
    background-color: #ccc;
    border-radius: 50%;
    opacity: 1.0;
    text-shadow: none;
    text-align: center;
    line-height: 1.5833;            /*38px*/
    cursor: pointer;
    z-index: 3;
}

.modal.std-modal-controller .modal-dialog button.close-btn:hover {
    background-color: #ccc;
}

/*
.modal.std-modal-controller .modal-dialog button.close-btn:hover {
    background-color: #999;
}
*/

.modal.std-modal-controller img.logo {
    position: absolute;
    top: -2.5em;                    /*-40px*/
    left: -2.5em;                   /*-40px*/
    width: 8.125em;                 /*130px*/
    height: auto;
    z-index: 3;
    filter: drop-shadow(0.25em 0.25em 0.1875em rgba(0,0,0,0.5));   /*drop-shadow(4px 4px 3px rgba(0,0,0,0.5))*/
}

.modal.std-modal-controller .modal-dialog .track-horizontal {
    height: 0.375em !important;     /*6px*/
}

.modal.std-modal-controller .modal-dialog .track-vertical {
    width: 0.375em !important;      /*6px*/
}

.modal.std-modal-controller .modal-dialog div.modal-header {
    padding-top: 0.3125em;          /*5px*/
    padding-left: 6.25em;           /*100px*/
    border-bottom: none;
}

.modal.std-modal-controller .modal-dialog .modal-title {
    font-weight: 800;
    font-size: 2em;                 /*32px*/
}

.modal.std-modal-controller.simple-header .modal-dialog {
    width: 80%;
    max-width: 120vh;
    margin: 12vh auto auto auto;
}

.modal.std-modal-controller.simple-header .modal-dialog div.modal-header  {
    padding: 0.5em 0.75em 0.25em 0.75em;     /*8px 12px 4px 12px*/
    display: block;
    text-align: center;
    min-height: 2.3125em;           /*37px*/
}

.modal.std-modal-controller.simple-header .modal-dialog .modal-title   {    /***/
    font-size: 1.375em;             /*22px*/
    font-weight: 500;
    line-height: 1;
}

.modal.std-modal-controller.simple-header .modal-dialog .modal-title.icon-text  {
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal.std-modal-controller.simple-header .modal-dialog .modal-title .text  {
    display: inline-block;
}

.modal.std-modal-controller.simple-header .modal-dialog .modal-title .icon  {
    margin: 0 0.375em;              /*0 12px*/
}

.modal.std-modal-controller.simple-header .modal-dialog button.close-btn    {
    font-size: 1.125em;             /*18px*/
    top: -0.1111em;                 /*-2px*/
    right: -0.1111em;               /*-2px*/
    color: inherit;
    line-height: 1.3333;            /*24px*/
    background-color: rgba(0, 0, 0, 0);
}

.modal.std-modal-controller.simple-header .modal-dialog button.close-btn:hover    {
    background-color: rgba(0, 0, 0, 0);
}

.modal.std-modal-controller.simple-header .modal-body  {
    padding: 0 0.5em 0.5em 0.5em;   /*0 8px 8px 8px*/
}

.modal-backdrop.clear-backdrop.show  {
    opacity: 0;
}

.modal.std-modal-controller.center {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.modal.std-modal-controller.center .modal-dialog {
    margin: auto !important;
    width: 80% !important;
    max-width: 120vh !important;
}

.modal.std-modal-controller.fit-content .modal-dialog {
    width: fit-content !important;
    width: -moz-fit-content !important;
    max-width: unset !important;
}

/* --------------------------------------------------------------------------- */
/* info view */
.modal.info-view-controller .modal-dialog div.modal-header {
    padding: 0;
}

.modal.info-view-controller .modal-dialog .modal-body {
    padding: 0;
}

.info-view-controller .info-view-scrollbar .custom-scrollbar-view {
    position: relative;
    max-height: 80vh;
}

.info-view-controller .info-view-content  {
    padding: 0.9375em 1.5625em;     /*15px 25px*/
}

.gray-btn   {
    color: black;
    background-color: #aaa;
    border-radius: 0.75em;          /*12px*/
}

.gray-btn:hover    {
    background-color: #aaa;
}

/*
.gray-btn:hover    {
    background-color: #999;
}
*/

.gray-btn:active    {
    background-color: #888;
}

.info-view-item .btn {
    font-size: 1.875em;             /*30px*/
    display: block;
    height: auto;
    font-weight: bold;
    padding: 0.2em 0.4em;           /*6px 12px*/
    border-radius: 0.4em;           /*12px*/
}

.info-view-item .info-view-item-separator   {
    display: block;
    height: 1px;
    padding: 0;
    margin: 0;
    background-color: white;
}

.info-view-item .info-view-item-header  {
    margin-top: 0.25em;             /*4px*/
    margin-bottom: 0.25em;          /*4px*/
    padding-bottom: 0.0625em;       /*1px*/
    display: block;
}

.info-view-item .info-view-item-header:hover    {
    cursor: pointer;
}

.info-view-item .info-view-item-toggle {
    font-size: 1.5em;               /*24px*/
    display: inline-block;
    position: relative;
    line-height: 1;                 /*24px*/
    padding: 0;
    margin: 0;
    width: 0.4166667em;             /*10px*/
}

.info-view-item .info-view-item-title-label {
    font-size: 1em;                 /*16px*/
    display: inline-block;
    position: relative;
    line-height: 1.5em;             /*24px*/
    padding: 0;
    margin: 0 0 0 1.25em;           /*0 0 0 20px*/
}

.info-view-controller .ivi-header .version-label    {
    padding: 0 1.5625em 1.875em 5em;    /*0 25px 30px 80px*/
}

.info-view-controller .ivi-header .title-label h5  {
    font-size: 2em;                 /*32px*/
    padding-left: 2.5em;            /*80px*/
    font-weight: 800;
}

.info-view-controller .ivi-header.no-logo .version-label    {
    padding-left: 0;
}

.info-view-controller .ivi-header.no-logo .title-label h5  {
    padding-left: 0;
}

.info-view-controller .ivi-tutorials .tutorials-container {
    padding: 0 1.25em 0.9375em 1.875em;     /*0 20px 15px 30px*/
}

.info-view-controller .ivi-tutorials .tutorials-start-view-btn {
    margin-bottom: 0.5em;           /*15px*/
}

.info-view-controller .ivi-tutorials .tutorials-tools-functions-label {
    display: block;
    padding-top: 0.3125em;          /*5px*/
    padding-bottom: 0.3125em;       /*5px*/
}

.info-view-controller .ivi-licensing .licensing-container {
    padding: 0 1.25em 0.625em 1.875em;      /*0 20px 10px 30px*/
}

.info-view-controller .ivi-licensing .licensing-entry   {
    display: flex !important;
    align-items: center;
    width: 100%;
    margin: 0.625em 0;              /*10px 0*/
}

.info-view-controller .ivi-licensing .licensing-entry-left   {
    flex-grow: 1;
    vertical-align: middle;
}

.info-view-controller .ivi-licensing .licensing-entry-right   {
    width: 2.4375em;                /*39px*/
    margin-left: 0.5em;             /*8px*/
    padding: 0;
    vertical-align: middle;
    text-align: center;
}

.info-view-controller .ivi-licensing .licensing-entry-right.single  {
    width: 4.1875em;                /*67px*/
}

.info-view-controller .ivi-licensing .licensing-product-badge {
    font-size: 0.9375em;            /*15px*/
    background-color: rgba(255, 255, 255, 0.3);
    color: inherit;
    width: 100%;
    height: auto;
    border-radius: 0.266667em;      /*4px*/
    outline: none;
    padding: 0.266667em;            /*4px*/
    border: 1px solid rgba(255, 255, 255, 0.4);
    vertical-align: middle;
    line-height: 1.066667;          /*16px*/
}

.info-view-controller .ivi-licensing .licensing-product-badge-name {
    display: inline-block;
    position: relative;
}

.info-view-controller .ivi-licensing .licensing-product-badge-module-name {
    display: inline-block;
    position: relative;
}

.info-view-controller .ivi-licensing .licensing-product-badge-edition {
    display: inline-block;
    position: relative;
}

.info-view-controller .ivi-licensing .licensing-product-badge-expiration-date {
    font-size: 0.8em;               /*12px*/
    display: inline-block;
    position: relative;
    line-height: 1;                 /*12px*/
}

.info-view-controller .ivi-licensing input[type=text] {
    border-radius: 0.25em;          /*4px*/
    outline: none;
    padding: 0.625em 0.3125em;      /*1p 5px*/
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: color 0.30s ease-in-out, border 0.30s ease-in-out, box-shadow 0.30s ease-in-out;
}
   
.info-view-controller .ivi-licensing input[type=text]:focus {
    box-shadow: 0 0 0.3125em #4fa3d1;   /*0 0 5px #4fa3d1*/
    padding: 0.625em 0.3125em;      /*1p 5px*/
    border: 1px solid #4fa3d1;
}
  
.info-view-controller .ivi-licensing input {
    background-color: rgba(0, 0, 0, 0);
    color: inherit;
    width: 100%;
    height: 2em;                    /*32px*/
}

.info-view-controller .ivi-licensing a.btn {
    font-size: 1em;                 /*16px*/
    display: inline-block;
    font-weight: bold;
    height: 2em;                    /*32px*/
    width: 100%;
    border-radius: 0.25em;          /*4px*/
    opacity: 1;
    text-align: center;
    padding: 0;
    color:  inherit !important;
    cursor: pointer;
}

/*
.info-view-controller .ivi-licensing a.btn:hover {
    background-color: #306480;
}
*/

.info-view-controller .ivi-licensing a.btn.disabled {
    background-color: #4fa3d1;
    opacity: 0.5;
    cursor: default;
}

.info-view-controller .ivi-licensing a.btn.disabled:hover {
    background-color: #4fa3d1;
}

.info-view-controller .ivi-licensing a.btn .icon {
    vertical-align: sub;
}

.info-view-controller .ivi-media .media-container {
    padding: 0 1.25em 0 1.875em;    /*0 20px 0 30px*/
}

.info-view-controller .ivi-media .media-container .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin-bottom: 0.9375em;        /*15px*/
}

.media-container .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --------------------------------------------------------------------------- */
/* zeiss uv welcome view */
.modal.std-modal-controller.zeiss-uv-welcome-view .modal-dialog div.modal-header   {
    padding: 0;
}

.modal.zeiss-uv-welcome-view .modal-dialog .modal-title    {
    display: none;
}

.modal.zeiss-uv-welcome-view .modal-dialog .modal-body    {
    padding: 0;
}

.zeiss-uv-welcome-view .content  {
    background: white;
    color: black;
    padding: 2em;                   /*32px*/
    font-weight: 400;
}

.zeiss-uv-welcome-view .content img.logo  {
    display: block;
    position: relative;
    top: 0;
    left: 0;
    width: 3.5em;                   /*56px*/
    margin-left: 0.5em;             /*8px*/
}

.zeiss-uv-welcome-view .content .line  {
    display: block;
    position: relative;
    top: 0;
    left: 0;
}

.zeiss-uv-welcome-view .content .line-1  {
    font-size: 1.625em;             /*26px*/
    line-height: 1.076923em;        /*28px*/
    margin-top: 2.153846em;         /*56px*/
}

.zeiss-uv-welcome-view .content .line-2  {
    font-size: 1.875em;             /*30px*/
    line-height: 1.066667em;        /*32px*/
    margin-top: 0.4em;              /*12px*/
}

.zeiss-uv-welcome-view .content .line-3  {
    font-size: 1.5em;               /*24px*/
    line-height: 1.083333em;        /*26px*/
}

.zeiss-uv-welcome-view .content .line-4  {
    font-size: 0.8125em;            /*13px*/
    line-height: 1.153846em;        /*15px*/
    margin-top: 23.076923em;        /*300px*/
}

/* --------------------------------------------------------------------------- */
/* disclaimer-view */
.modal.std-modal-controller.disclaimer-view .modal-dialog   {
    border: 1px solid black;
    filter: drop-shadow(-1.25em 1.25em 1.25em rgba(0, 0, 0, 0.5));  /*drop-shadow(-20px 20px 20px rgba(0, 0, 0, 0.5))*/
}

.modal.std-modal-controller.disclaimer-view .oe-modal-content   {
    width: 48em;                    /*768px*/
    max-width: 90vw;
    background-color: white !important;
}

.modal.std-modal-controller.disclaimer-view .modal-body {
    padding: 0;
}

.modal.std-modal-controller.disclaimer-view .text-view {
    height: 70vh;
    max-height: 70vh;
}

.modal.std-modal-controller.disclaimer-view .bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    color: black;
    margin-top: 0.75em;             /*12px*/
    margin-bottom: 1.625em;         /*26px*/
}

.modal.std-modal-controller.disclaimer-view .bottom .check-box-container    {
    margin: 0.75em;                 /*12px*/
    font-weight: 400;
    display: flex;
    align-items: center;
}

.modal.std-modal-controller.disclaimer-view .bottom .check-box-container .custom-checkbox   {
    font-size: 1em;                 /*16px*/
    margin: 0 0.75em;               /*0 12px*/
    width: 1em;                     /*16px*/
    height: 1em;                    /*16px*/
    background-color: rgba(0, 0, 0, 0);
    border: 0.125em solid rgb(127, 139, 135);   /*2px solid rgb(127, 139, 135)*/
    border-radius: 0;
}

.modal.std-modal-controller.disclaimer-view .bottom .check-box-container span   {
    font-size: 1.0625em;            /*17px*/
}

.modal.std-modal-controller.disclaimer-view .bottom .check-box-container .custom-checkbox .icon   {
    font-size: 1.5em;               /*24px*/
    margin: -0.4166667em 0 0 -0.458333em;    /*-10px 0 0 -11px*/
    padding: 0.25em;                /*6px*/
    line-height: 0.666667;          /*16px*/
    color: rgb(65, 74, 71);
}

.modal.std-modal-controller.disclaimer-view .bottom .close-btn .button   {
    font-size: 1.5em;               /*24px*/
    padding: 0.2916667em 0.4166667em;   /*7px 10px*/
    color: rgb(200, 209, 206);
    background-color: rgb(65, 74, 71);
    border-radius: 0.25em;          /*6px*/
}

.modal.std-modal-controller.disclaimer-view .bottom .close-btn .button.disabled:hover   {
    background-color: rgb(65, 74, 71);
}

/* --------------------------------------------------------------------------- */
/* OEStartViewStd */
.start-view-std div.start-view-header-factory    {
    padding: 0.625em 2.8125em 0 2.8125em;   /*10px 45px 0 45px*/
}

.start-view-std .custom-checkbox   {
    font-size: 1em;
}

.custom-checkbox.show-again-cb   {
    width: 1.25em;                  /*20px*/
    height: 1.25em;                 /*20px*/
    line-height: 1.125;             /*18px*/
    border: solid 1px #fff;
    margin: 0 0.625em 0 0;          /*0 10px 0 0*/
    vertical-align: baseline;
}

.custom-checkbox.show-again-cb .icon {
    font-size: 1em;                 /*16px*/
}

.start-view-std .carousel-container  {
    display: block;
    width: 100%;
    height: auto;
}

.start-view-std .aspect-dummy    {
    display: block;
    width: 100%;
    height: auto;
}

.start-view-std .video-player {
    display: block;
    width: 100%;
    position: relative;
}

.oe-carousel  {
    display: block;
    margin-bottom: 2.8125em;        /*45px*/
}

.oe-carousel-inner  {
    display: block;
    overflow: hidden;
    width: auto;
    white-space: nowrap;
    overflow: hidden;
}

.oe-carousel-item  {
    display: inline-block;
    vertical-align:top;
    width: 100%;
    height: auto;
    margin: 0;
    white-space: wrap;
}

.oe-carousel-item img {
    display: inline-block;
    width: 100%;
    height: auto;
    margin: 0;
}

.start-view-std .oe-carousel  {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0;
}

.start-view-std .carousel-control-btn {
    top: auto;
    height: 2em;                    /*32px*/
    width: 6em;                     /*96px*/
    border-radius: 0.25em;          /*4px*/
    opacity: 1;
    margin: 0 0.25em 0.25em 0.25em; /*0 4px 4px 4px*/
    color: #000 !important;
    font-weight: 600;
    cursor: pointer;
}

/*
.start-view-std .carousel-control-btn:hover {
    background-color: #306480;
}
*/

.start-view-std .carousel-control-btn.disabled {
    background-color: #4fa3d1;
    opacity: 0.5;
    cursor: default;
}

.start-view-std .carousel-control-btn.disabled:hover    {
    background-color: #4fa3d1;
}

.start-view-std .carousel-control-prev   {
    margin-left: 0.9375em;          /*15px*/
    margin-bottom: 0.9375em;        /*15px*/
}

.start-view-std .carousel-control-next   {
    margin-right: 0.9375em;         /*15px*/
    margin-bottom: 0.9375em;        /*15px*/
}

.start-view-std .carousel-indicators   {
    bottom: 0.625em;                /*10px*/
    margin-right: 7.5em;            /*120px*/
    margin-left: 7.5em;             /*120px*/
    margin-bottom: 0.625em;         /*10px*/
}

.start-view:not(.old) .flow-nav-checkbox-element div.title   {
    margin-left: 1.125em;           /*18px*/
}

.start-view:not(.old) .flow-nav-checkbox-element div.title span.primary-title   {
    font-weight: 400;
}

/* --------------------------------------------------------------------------- */
/* flow navigation view system */
.modal.std-modal-controller.flow-nav-modal .modal-dialog {
    width: 30.625em;                 /* 490px, simple fallback for browsers not supporting max-content */
    width: -moz-max-content;
    width: -webkit-max-content;
    width: max-content;
    max-width: 80%;
    margin: 12vh auto auto auto;
}

.flow-nav-modal .oe-modal-content   {
    background-color: #222329 !important;
    color: #d6d6d6 !important;
}

.modal.std-modal-controller.flow-nav-modal img.logo {       /***/
    width: 7em;                     /*112px*/
    top: -1.75em;                   /*-28px*/
    left: -1.4375em;                /*-23px*/
    filter: drop-shadow(0.25em 0.25em 0.1875em rgba(0,0,0,0.5));   /*drop-shadow(4px 4px 3px rgba(0,0,0,0.5))*/
}

.modal.std-modal-controller.flow-nav-modal .modal-dialog .header {
    color: #d6d6d6;
}

.modal.std-modal-controller.flow-nav-modal .modal-dialog .header .btn {
    color: #d6d6d6;
}

.modal.std-modal-controller.flow-nav-modal .modal-dialog button.close-btn    {
    color: #d6d6d6;
}

.modal.std-modal-controller.flow-nav-modal .modal-dialog .header .modal-title .icon    {
    color: #d6d6d6;
}

.modal.std-modal-controller.flow-nav-modal .modal-body  {
    background-color: rgba(0, 0, 0, 0);
    margin: 0 0.125em 0.75em 0.75em;  /*0 2px 12px 12px*/
    padding: 0;
    font-weight: 500;
    line-height: 1;
}

.modal.std-modal-controller.flow-nav-modal.no-navigation-controller .modal-body {
    margin-right: 0.75em;           /*12px*/
}

.flow-nav-menu-element {
    display: flex;
    align-items: center;
    height: 3.375em;                /*54px*/;
    cursor: pointer;
    color: #c7c7c7;
}

.flow-nav-menu-element.disabled {
    opacity: 0.5;
    cursor: initial;
}

.flow-nav-menu-element .left {
    font-size: 2.25em;              /*36px*/
    position: relative;
    background-color: #48494d;
    min-width: 20%;
    color: #c7c7c7;
    text-align: right;
    height: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 0 0.3333em;            /*0 12px*/
}

.flow-nav-menu-element .left .icon  {
    position: relative;
    top: 0;
    min-width: 1.3888em;            /*50px*/
    text-align: center;
}

/*
.flow-nav-menu-element.enabled:hover .left {
    background-color: #83858d;
}
*/

.flow-nav-menu-element .spacer {
    background-color: rgba(0, 0, 0, 0);
    width: 0.3125em;                /*5px*/
    height: 100%;
}

.flow-nav-menu-element .spacer.opaque {
    background-color: #48494d;
}

/*
.flow-nav-menu-element.enabled:hover .spacer.opaque {
    background-color: #83858d;
}
*/

.flow-nav-menu-element .main {
    position: relative;
    background-color: #48494d;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}

.flow-nav-menu-element .main span {
    font-size: 1.375em;             /*22px*/
    margin: 0.2727em 0.2727em 0.2727em 0.9090em;   /*6px 6px 6px 20px*/
}

/*
.flow-nav-menu-element.enabled:hover .main {
    background-color: #83858d;
}
*/

.flow-nav-menu-element .main div.logo  {
    height: 100%;
    margin-right: 0.5em;            /*8px*/
    padding: 0.5em;                 /*8px*/
    background: white;
}

.flow-nav-menu-element .main div.logo img  {
    height: 2.375em;                /*38px*/
}

.flow-nav-menu-element.bayer-entry .main div.logo  {
    padding: 0.25em;                /*4px*/
}

.flow-nav-menu-element.bayer-entry .main div.logo img  {
    height: 2.8785em;               /*46px*/
}

.flow-nav-menu-element.help-entry .icon    {
    color: #9dcde4;
}

.flow-nav-menu-element .icon.icon-code-u00CA div    {   /*octTarget*/
    margin-left: -0.25em;         /*-8px*/
}

.flow-nav-checkbox-element   {
    margin-left: 10%;
    margin-right: 0.75em;           /*12px*/
    display: flex;
    min-height: 2.0625em;           /*33px*/
    color: #c7c7c7;
}

.flow-nav-checkbox-element .custom-checkbox   {
    margin-top: 0.25em;             /*4px*/
    width: 1.25em;                  /*20px*/
    height: 1.25em;                 /*20px*/
    line-height: 1.125em;           /*18px*/
    border: solid 1px #c7c7c7;
}

.flow-nav-checkbox-element div.title   {
    font-size: 1.125em;             /*18px*/
    font-weight: 300;
    margin: 0.3333em 0 0 0.5555em;   /* 6px 0 0 10px */
}

.flow-nav-checkbox-element div.title span.primary-title   {
    display: block;
    font-size: inherit;
}

.flow-nav-checkbox-element div.title span.sub-title   {
    font-size: 0.875em;             /*14px*/
}

.flow-nav-hyperlink-element   {
    margin: 0 0.75em;               /*0 12px*/
    display: block;
    font-weight: 300;
    text-align: center;
}

.flow-nav-hyperlink-element a   {
    display: inline-block;
    margin-left: 0.25em;            /*4px*/
    cursor: pointer;
    color: #c7c7c7;
}

.flow-nav-hyperlink-element a:hover {
    color: #c7c7c7;
}

.flow-nav-hyperlink-element span   {
    display: inline-block;
}

.flow-nav-chapter .title   {
    font-size: 1.625em;             /*26px*/
    display: block;
    padding: 0.6154em;              /*16px*/
}

.flow-nav-chapter > .body > span {
    font-size: 1.125em;             /*18px*/
    display: block;
    padding: 0.8888em;              /*16px*/
    font-weight: 400;
}

.flow-nav-chapter > .body > .flow-nav-std-sub-item {
    font-size: 1.125em;             /*18px*/
    display: flex;
    padding: 0.8888em;              /*16px*/
    font-weight: 400;
}

.flow-nav-chapter > .body > .flow-nav-std-sub-item .left {
    font-size: 0.6666em;            /*12px*/
    margin-right: 0.8333em;         /*10px*/
    line-height: 1.333;
    color: #4fa3d1;
}

.flow-nav-chapter > .body i {
    font-family: EffigosSymbol;
    font-style: normal;
    /*margin: 0 0.111em;*/          /*0 2px for font size 18px*/
}

.flow-nav-paragraph .title-bar    {
    background-color: #48494d;
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 1em 6% 1em 24.5%;      /*16px 6% 16px 24.5%*/
    min-height: 3.5em;              /*56px*/
}

.flow-nav-paragraph .title-bar .icon   {
    font-size: 1.625em;             /*26px*/
    position: relative;
    top: 0;
    width: 1.1153em;                /*29px*/
    text-align: center;
    line-height: 0.6923;            /*18px*/
}

.flow-nav-paragraph.no-icon .title-bar    {
    justify-content: center;
    padding-left: 6%;
}

.flow-nav-paragraph .title-bar .left    {
    width: 2.5em;                   /*40px*/
    margin-right: 0.75em;           /*12px*/
}

.flow-nav-paragraph .title-bar .right    {
    width: 2.5em;                   /*40px*/
    margin-right: 0.75em;           /*12px*/
}

.flow-nav-paragraph.no-icon .title-bar .left    {
    width: 0;
    margin-right: 0;
}

.flow-nav-paragraph.no-icon .title-bar .right    {
    width: 0;
    margin-left: 0;
}

.flow-nav-paragraph .body {
    padding: 1em 0;                  /*16px 0*/
}

.flow-nav-paragraph.empty .body {
    padding-bottom: 0;
}

.flow-nav-paragraph .flow-nav-std-item {
    font-size: 0.875em;             /*14px*/
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12%;
    height: 6.4285em;               /*90px*/
    font-weight: 300;
}

.flow-nav-paragraph .flow-nav-std-item.no-icon {
    height: 4.2857em;               /*60px*/
}

.flow-nav-paragraph .flow-nav-std-item .main {
    margin: 0 1.7143em;           /*0px 24px*/
    text-align: left;
}

.flow-nav-paragraph .flow-nav-std-item.sub-paragraph .main span {
    font-size: 1.2857em;            /*18px*/
}

.flow-nav-paragraph .flow-nav-std-item.left-align .main {
    flex-grow: 1;
}

.flow-nav-paragraph .flow-nav-std-item .left {
    min-width: 4em;                 /*56px*/
    text-align: center;
}

.flow-nav-paragraph .flow-nav-std-item .right {
    min-width: 4em;                 /*56px*/
    text-align: center;
}

.flow-nav-paragraph .flow-nav-std-item .icon div {
    font-size: 4em;                 /*56px*/
    color: #c7c7c7;
}

/* .flow-nav-std-sub-item */
.flow-nav-paragraph .flow-nav-std-sub-item {
    font-size: 0.875em;            /*14px*/
    display: flex;
    align-items: center;
    padding: 0 12% 0 31%;
    height: 2.5em;                  /*35px*/
    font-weight: 300;
}

.flow-nav-paragraph .flow-nav-std-sub-item .left {
    font-size: 1.5714em;            /*22px*/
    display: inline-block;
    color: #c7c7c7;
    margin-right: 0.9091em;         /*20px*/
    vertical-align: middle;
    width: 1.4545em;                /*32px*/
    text-align: right;
}

.flow-nav-paragraph .flow-nav-std-sub-item .main {
    display: inline-block;
}

.flow-nav-paragraph .flow-nav-std-sub-item.sub-paragraph {
    font-size: 1.2857em;            /*18px*/
    padding: 0 6% 0 22%;
    height: 1.9444em;               /*35px*/
}

.flow-nav-paragraph .flow-nav-std-sub-item.sub-paragraph .left {
    font-size: 1.7778em;            /*32px*/
}

.flow-nav-paragraph .flow-nav-std-sub-item.sub-paragraph .right {
    width: 0;
}

.flow-nav-block {
    display: flex;
    align-items: center;
    margin-left: 10%;
    margin-right: 2.25em;           /*36px*/
    color: #c7c7c7;
    font-weight: 400;
    line-height: 1.25;
}

.flow-nav-block i   {
    font-family: EffigosSymbol;
    font-style: normal;
}

.flow-nav-block span    {
    white-space: pre-line;
}

.flow-nav-paragraph .flow-nav-std-sub-item .left .icon-element.tree-expand   {
    font-size: 0.7955em;            /*17.5px*/
    text-align: center;
    color: #c7c7c7;
}

.flow-nav-paragraph .flow-nav-std-sub-item .left .icon-element.tree-name   {
    font-size: 0.6364em;            /*14px*/
}

.flow-nav-paragraph .flow-nav-std-sub-item .left .icon-element.tree-color div   {
    text-align: right;
}

.flow-nav-paragraph .flow-nav-std-sub-item .left .icon-element.tree-color div   {
    display: inline-block;
    width: 0.7273em;                /*16px*/
    height: 0.7273em;               /*16px*/
    background-color: wheat;
}

.flow-nav-paragraph .flow-nav-std-sub-item .left div.icon-element.tree-rm    {
    padding-top: 0.2727em;          /*6px*/
}

.flow-nav-paragraph .flow-nav-std-sub-item .icon-element.tree-rm .ct_btn    {
    font-size: 0.6818em;            /*15px*/
}

.flow-nav-paragraph .flow-nav-std-sub-item .icon-element.tree-rm .ct_btn:disabled   {
    opacity: 1;
}

.flow-nav-paragraph .flow-nav-separator    {
    height: 2px;
    background-color: #48494d;
    margin: 1.5em 0.75em;           /*24px 12px*/
}

.flow-nav-view {
    background-color: rgba(0, 0, 0, 0);
    width: 29.75em;                 /*476px*/
    max-width: 100%;
}

.flow-nav-view.video {
    width: 75em;                    /*1200px*/
}

.flow-nav-view-content   {
    margin-right: 0.625em;          /*10px*/
}

.flow-nav-view-content-colors   {
    background-color: #393a3e;
    color: #c7c7c7;
}

.flow-nav-view .custom-scrollbar-view {
    position: relative;
    max-height: 80vh;
}

.flow-nav-view .track-bg    {
    background-color: rgba(0, 0, 0, 0);
}

.flow-nav-view .video-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.flow-nav-view .video-container .video-item {
    flex-grow: 1;
    margin: 0.125em;                /*2px*/
    border: solid 1px #c7c7c7;
}

.flow-nav-view .video-container .oe-plyr .plyr    {
    min-width: 0;
}

.flow-nav-selection-bar {
    font-size: 0.875em;             /*14px*/
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.2143em;                  /*3px*/
    margin-left: 5%;
    margin-right: 5%;
    color: #d6d6d6;
    font-weight: 400;
    line-height: 1.25;
}

.flow-nav-selection-bar .flow-nav-selection-bar-cell    {
    position: relative;
    width: 4.2143em;                /*59px*/
    height: 3.8571em;               /*54px*/
    background-color: #48494d;
    cursor: pointer;
}

/*
.flow-nav-selection-bar .flow-nav-selection-bar-cell:hover    {
    background-color: #83858d;
}
*/

.flow-nav-selection-bar.disabled .flow-nav-selection-bar-cell    {
    cursor: initial;
    opacity: 0.6;
}

.flow-nav-selection-bar .flow-nav-selection-bar-cell.disabled    {
    cursor: initial;
    opacity: 0.6;
}

.flow-nav-selection-bar .flow-nav-selection-bar-cell.disabled:hover,
.flow-nav-selection-bar.disabled .flow-nav-selection-bar-cell:hover    {
    background-color: #48494d;
}

.flow-nav-selection-bar .flow-nav-selection-bar-cell .cell-border    {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: transparent;
}

.flow-nav-selection-bar .flow-nav-selection-bar-cell.selected .cell-border    {
    border: 0.14286em solid #ffbb00;      /*2px solid #ffbb00*/
}

.flow-nav-selection-bar .flow-nav-selection-bar-cell .container   {
    position: absolute;
    top: 0.14286em;                 /*2px*/
    left: 0.14286em;                /*2px*/
    bottom: 0.14286em;              /*2px*/
    right: 0.14286em;               /*2px*/
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.14286em;                 /*2px*/
}

.flow-nav-selection-bar .flow-nav-selection-bar-cell .label {
    text-align: center;
}

.flow-nav-selection-bar .flow-nav-selection-bar-cell .icon {
    text-align: center;
    font-size: 2em;
}

/* --------------------------------------------------------------------------- */
/* flow navigation help view */
.flow-nav-view.help .credits   {
    font-size: 1em;
    font-weight: 300;
    text-align: center;
}

.flow-nav-view.help .credits div   {
    display: inline-block;
}

.flow-nav-view.help .credits img   {
    padding-left: 0.625em;          /*10px*/
    max-width: 8em;                 /*128px*/
    opacity: 0.7;
}

.flow-nav-view.help .flow-nav-menu-element.usage-rights .left .icon {
    margin-bottom: 0.1389em;        /*5px*/
}

.flow-nav-view.help .flow-nav-menu-element.usage-rights .left .icon div {
    font-size: 0.9444em;            /*34px*/
    font-family: 'Roboto';
    font-weight: 600;
}

.flow-nav-view.help .flow-nav-menu-element.tutor-reset .left  {
    color: rgb(171, 232, 174);
}

.flow-nav-view.help .flow-nav-menu-element.disable-tutor .left  {
    color: rgb(232, 183, 171);
}

.flow-nav-view.help div.version   {
    margin: 0 0.75em;
    font-weight: 300;
    justify-content: center;
    font-size: 0.8em;
    color: rgb(132 132 132);
}

.flow-nav-view.video.help-videos .oe-plyr .plyr__video-embed {
    aspect-ratio: 16 / 9 !important;
}

/* --------------------------------------------------------------------------- */
/* flow navigation start selection view */
.flow-nav-view.start-selection .current-choice  {
    font-size: 1em;
    margin-left: calc(18.5% + 0.625em);    /*calc(18.5% + 10px)*/
}

.flow-nav-view.start-selection .category {
    font-size: 1.25em;              /*20px*/
    margin-left: 18.5%;
    color: #c7c7c7;
    font-weight: 400;
}

.flow-nav-view.start-selection .subcategory {
    font-size: 1.1875em;            /*19px*/
    margin-left: 18.5%;
    color: #c7c7c7;
    font-weight: 400;
}

.flow-nav-view.start-selection .item {
    font-size: 1.125em;             /*18px*/
    margin-bottom: 0.2222em;        /*4px*/
    margin-left: calc(18.5% + 0.5555em + 0.7777em); /*calc(18.5% + 10px + 14px)*/
    color: #c7c7c7;
    cursor: pointer;
    font-weight: 400;
}

.flow-nav-view.start-selection .item.last {
    margin-bottom: 0;
}

.flow-nav-view.start-selection .flow-nav-separator  {
    margin-left: calc(18.5% + 0.625em);     /*calc(18.5% + 10px)*/
    width: 11%;
    height: 0.125em;                /*2px*/
    background-color: #505154;
}

.flow-nav-view.start-selection .flow-nav-separator.module-bar-separator  {
    width: calc(100% - 18.5% - 0.625em - 18.5% - 0.625em);    /*calc(100% - 18.5% - 10px - 18.5% - 10px)*/
}

/*
.flow-nav-view.start-selection .item:hover    {
    background-color: #83858d;
}
*/

.flow-nav-view.start-selection .item.disabled   {
    cursor: initial;
    opacity: 0.3;
}

.flow-nav-view.start-selection .item.disabled:hover   {
    background-color: rgba(0, 0, 0, 0);
}

.flow-nav-view.start-selection .item .dot   {
    font-size: 1.375em;             /*22px*/
    margin: 0 0.2727em 0 0.2727em;      /*0 6px 0 6px*/
    color: #d6d6d6;
}

.flow-nav-view.start-selection .item.current   {
    color: #e6e6e6;
}

.theme-indicator-controller.dim.start-selection   {
    background-color: rgba(0, 0, 0, 0);
    cursor: wait;
}

.theme-indicator-controller.start-selection .theme-indicator-view   {
    display: none;
}

.flow-nav-view.start-selection .module-selection-bar    {
    color: #c7c7c7;
}

.flow-nav-view.start-selection .module-selection-bar .flow-nav-selection-bar-cell    {
    width: 3.1429em;                /*44px*/
    height: 3.1429em;               /*44px*/
    background-color: rgba(0, 0, 0, 0);
}

.flow-nav-view.start-selection .module-selection-bar .flow-nav-selection-bar-cell .container    {
    overflow: visible;
}

.flow-nav-view.start-selection .module-selection-bar .flow-nav-selection-bar-cell .selection-caret  {
    font-size: 1.1em;               /*15.4px*/
    position: absolute;
    bottom: -1.4935em;              /*-23px*/
    color: #c7c7c7;
    -moz-transform: rotate(90deg) scale(1.5, 1.0);
    -ms-transform: rotate(90deg) scale(1.5, 1.0);
    -o-transform: rotate(90deg) scale(1.5, 1.0);
    -webkit-transform: rotate(90deg) scale(1.5, 1.0);
    transform: rotate(90deg) scale(1.5, 1.0);
}

/*
.flow-nav-view.start-selection .module-selection-bar .flow-nav-selection-bar-cell:hover    {
    background-color: #48494d;
}
*/

.flow-nav-view.start-selection .module-selection-bar.disabled .flow-nav-selection-bar-cell:hover    {
    background-color: rgba(0, 0, 0, 0);
}

.flow-nav-view.start-selection .module-selection-bar .flow-nav-selection-bar-cell .cell-border    {
    display: none;
}

.flow-nav-view.start-selection .module-selection-bar .flow-nav-selection-bar-cell.selected    {
    color: #e6e6e6;
}

/* --------------------------------------------------------------------------- */
/* free premium view std */
.flow-nav-view.free-premium-view .flow-nav-block    {
    margin-left: 20%;
}

/* --------------------------------------------------------------------------- */
/* context menu */
.context-menu-area   {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.context-menu    {
    font-size: 1em;                 /*16px*/
    position: absolute;
    z-index: 1;
    overflow: hidden;
    width: 17.25em;                 /*276px*/
}

.context-menu a {
    cursor: pointer;
}

.cmc-close-button {
    font-size: 0.9375em;            /*15px*/
    position: absolute;
    top: 0; right: 0;
    padding: 0 0.266667em 0.4em 0.4em;      /*0 4px 6px 6px*/
}

.cmc-close-button .icon {
    vertical-align: top;
}

.context-menu-top {
    display: inline-block;
    text-align: left; 
    line-height: 0.75;              /*12px*/
    padding: 0.25em 1.375em 0 0.375em;      /*4px 22px 0 6px*/
    color: inherit;
}

.context-menu-top h1 {
    display: inline-block;
    font-size: 0.75em;              /*12px*/
    cursor: default;
    line-height: 1.2;              /*14.4px*/
    font-weight: 400;
    margin: 0;
}

.context-menu-top h2 {
    display: inline-block;
    font-size: 0.625em;             /*10px*/
    cursor: default;
    line-height: 1.2;               /*12px*/
    font-weight: 300;
    margin: 0;
}

.context-menu-top h1 span {
    display: inline-block;
}

.context-menu-top h2 span {
    display: inline-block;
}

.context-menu ul {
    display: flex;
    display:-ms-flexbox;
    justify-content:flex-start;
    -ms-flex-pack:start;
    padding: 0.125em 0 0 0;         /*2px 0 0 0*/
    margin: 0;
    color: inherit;
}

.context-menu li    {
    width: 25%;
    list-style-type: none;
    padding: 0;
    margin: 0;
    float: left;
    color: inherit;
}

.context-menu .button   {
    font-size: 1em;
}

.context-menu .cmc-button {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 0.375em 0.375em 0 0.375em;     /*6px 6px 0 6px*/
    height: 3.125em;                /*50px*/
    border-radius: 0;
    border: 1px solid rgba(178, 178, 178, 0.5);
    border-left: none;
    border-bottom: none;
}

.context-menu .cmc-button.last {
    border-right: none;
}

.context-menu .cmc-button span {
    line-height: 1em;               /*16px*/
}

.context-menu .cmc-button .icon {
    font-size: 1.625em;             /*26px*/
    margin: 0 0.625em 0 0.625em;    /*0 10px 0 10px*/
    margin-bottom: 0;
    line-height: 1em;               /*26px*/
}

.context-menu .cmc-button .cmc-button-label {
    font-size: 0.625em;             /*10px*/
    line-height: 1.2em;             /*12px*/
}

.context-menu .content {
    margin-bottom: -0.0625em;       /*-1px*/    /*compensation of .context-menu ul padding top - 1px*/
}

.context-menu .content .info-box .nav-tabs  {
    border-color: inherit;
    border-width: 1px;
}

.context-menu .content .info-box .nav-item {
    padding: 0.125em 0 0 0;         /*2px 0 0 0*/
    width: 33.3%;
    text-align: center;
    margin: 0;
}

.context-menu .content .info-box .nav-tabs .nav-link    {
    font-size: 0.75em;              /*12px*/
    border-style: solid;
    border-width: 1px;
    font-weight: 400;
    height: 100%;
    padding: 0.666667em 0.333333em;     /*8px 4px*/
    border-top-left-radius: 0.25em;
    border-top-right-radius: 0.25em;
}

.context-menu .content .info-box .nav-link:hover {
    border-color: rgba(0, 0, 0, 0);
}

.context-menu .content .info-box .nav-link.active   {
    pointer-events: none;
    background-color: inherit;
    color: inherit;
    border-color: inherit;
}

.context-menu .content .info-box .content-container {
    max-height: 18.75em;            /*300px*/
}

.context-menu .content .info-box .content-container .custom-scrollbar-view {
    position: relative;
    max-height: 18.75em;            /*300px*/
}

.context-menu .content .info-box .content-container .tab-content {
    font-size: 0.75em;              /*12px*/
    line-height: 1.5;               /*18px*/
    font-weight: 400;
}

.context-menu .content .info-box .content-container .tab-pane .row {
    /* for row the margin left/right are set to -15px for unknown reason by reactstrap, but this breaks correct horizontal scrollbar behaviour here, so we set it to 0 */
    margin-left: 0;
    margin-right: 0;
}

.context-menu .content .info-box .content-container .text {
    padding: 1.25em 0;              /*15px 0*/
    text-align: justify;
}

.context-menu .content .info-box .content-container .text .col {
    padding: 0 1.25em;              /*0 15px*/
}

.context-menu .content .info-box .content-container .text a {
    font-size: 1em;
    display: initial;
    text-align: initial;
    cursor: pointer;
    line-height: 1.5;               /*18px*/
}

.context-menu .content .info-box .content-container .icon    {
    font-size: 2.083333em;          /*25px*/
    padding: 0 0.32em 0 0.32em;     /*0 8px 0 8px*/
}

/* --------------------------------------------------------------------------- */
/* component controller */
div.component-controller {
    display: block;
    position: relative;
    width: 15.625em;                /*250px*/
    height: 100%;
    background-color: rgba(20, 20, 20, 0);
    overflow-x: hidden;
    overflow-y: hidden;
}

.component-controller .widget-header    {
    font-size: 0.75em;              /*12px*/
    height: 2.416667em;             /*29px*/
}

.component-controller .widget-header .buttons   {
    margin-right: 0.83333em;        /*10px*/
}

.component-controller .body {
    position: absolute;
    top: 1.8125em;                  /*29px*/
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
}

.component-controller .control-without-label.search-input {
    padding: 0.5em 0.25em 0.25em 0.25em;    /*8px 4px 4px 4px*/
}

div.component-tree {
    flex-grow: 1;
    background-color: rgba(20, 20, 20, 0);
}

.component-tree-node {
    font-size: 1em;
    display: block;
    position: relative;
    background-color: rgba(0, 0, 0, 0);
    padding-left: 0;
    line-height: 1.75em;            /*28px*/
    font-weight: 300;
}

.component-tree ul {
    margin-left: 0;
    padding-left: 0;
    display: block;
    position: relative;
}

.component-tree ul.root {
    margin-right: 0.5em;            /*8px*/
}

.component-tree-node ul {
    margin-left: 0;
}

.component-tree li {
    display: block;
    position: relative;
}

.component-tree .track-bg   {
    background-color: rgba(255, 255, 255, 0.15);
}

.component-tree .thumb-bg   {
    background-color: #aaa;
}

.component-tree .thumb-horizontal,
.component-tree .thumb-vertical   {
    border-radius: 0.625em;         /*10px*/
}

.ct_header {
    display: block;
    padding-left: 0.25em;           /*4px*/
}

/*
.ct_header:hover {
    background-color: rgba(128, 128, 128, 0.4);
    transition: background-color 0.3s ease;
}

.ct_header.disabled:hover {
    background-color: rgba(128, 128, 128, 0.2);
    transition: background-color 0.3s ease;
}
*/

.component-tree-node.principal > div.ct_header    {
    border-bottom: 1px solid #aaa;
}

.ct_label {
    font-size: 0.8125em;            /*13px*/
    display: inline-block;
    max-width: 18.076923em;         /*235px*/
    line-height: 1.538462em;        /*20*/
    /*vertical-align: middle;*/
}

.component-tree-node.principal > div.ct_header ct_label {
    font-size: 1em;                 /*16px*/
    max-width: 14.6875em;           /*235px*/
    line-height: 1.25em;            /*20px*/
    font-weight: 400;
}

.ct_header.disabled .ct_label {
    opacity: 0.5;
}

.ct_header div.icon.terminal {
    font-size: 0.8125em;            /*13px*/
    position: absolute;
    top: 0.92308em;                 /*12px*/
    left: 0.3076923em;              /*4px*/
    height: 0.461538em;             /*6px*/
    width: 0.461538em;              /*6px*/
    border-radius: 0.230769em;      /*3px*/
    background-color: white;
}

.ct_header.disabled div.icon.terminal {
    opacity: 0.5;
}

.ct_toggle {
    font-size: 1.09375em;           /*17.5*/
    line-height: 1.371429em;        /*24px*/
    position: absolute;
    top: 0.171429em;                /*3px*/
    left: 0.228571em;               /*4px*/
    color: #aaa;
}

.ct_header.disabled .ct_toggle {
    opacity: 0.5;
}

.ct_toggle .icon {
    vertical-align: baseline;
}

.ct_click_target {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.ct_btn_container {
    font-size: 1em;                 /*16px*/
    position: absolute;
    right: 0.125em;                 /*2px*/
    top: 0;
}

.ct_btn {
    font-size: 0.9375em;            /*15px*/
    margin: 0 0 0 0.5333em;         /*0px 0px 0px 8px*/
    color: black;
    text-align: center;
    text-decoration: none;
    width: 1.4667em;                /*22px*/
    height: 1.3333em;               /*20px*/
    padding: 0;
    line-height: 1.2;
    vertical-align: text-top;
    outline: none !important;
    cursor: pointer;
    border-radius: 0.1333em;        /*2px*/
    -moz-border-radius: 0.1333em;
    -webkit-border-radius: 0.1333em;
    border: 1px solid #888;
}

.ct_btn:focus {
    border: 1px solid #888;
}

/*
.ct_btn:hover {
    border: 1px solid #aaa;
    background: #aaa;
}
*/

.ct_btn:active {
    border: 1px solid #eee;
    background: #eee;
}

.ct_btn:hover:disabled {
    border: 1px solid #888;
    background: -moz-linear-gradient(-45deg, #888 0%, #888 37%, #666 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, #888), color-stop(37%, #888), color-stop(100%, #666));
    background: -webkit-linear-gradient(-45deg, #888 0%, #888 37%, #666 100%);
    background: -o-linear-gradient(-45deg, #888 0%, #888 37%, #666 100%);
    background: -ms-linear-gradient(-45deg, #888 0%, #888 37%, #666 100%);
    background: linear-gradient(135deg, #888 0%, #888 37%, #666 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888', endColorstr='#666', GradientType=1);
}

.ct_btn:disabled {
    opacity: 0.5;
    cursor: auto;
}

button.ct_btn {
    padding: 0;
    background: #888;
    background: -moz-linear-gradient(-45deg, #888 0%, #888 37%, #666 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, #888), color-stop(37%, #888), color-stop(100%, #666));
    background: -webkit-linear-gradient(-45deg, #888 0%, #888 37%, #666 100%);
    background: -o-linear-gradient(-45deg, #888 0%, #888 37%, #666 100%);
    background: -ms-linear-gradient(-45deg, #888 0%, #888 37%, #666 100%);
    background: linear-gradient(135deg, #888 0%, #888 37%, #666 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888', endColorstr='#666', GradientType=1);
}

button.ct_btn .icon {
    vertical-align: baseline;
}

.ct_cat_btn {
    font-size: 0.875em;             /*14px*/
    width: 1.428571em;              /*20px*/
    border-radius: 0.714286em;      /*10px*/
}

button.ct_cat_switch_btn,
button.ct_cat_switch_btn:hover:disabled {
    background: #595959;
}

button.ct_cat_switch_btn,
button.ct_cat_activation_btn    {
    margin-top: 1px;
}

button.ct_cat_activation_btn .icon,
button.ct_cat_switch_btn .icon {
    vertical-align: middle;
}

.ct_cat_switch_btn {
    color: #838383;
}

.ct_cat_switch_1 {
    color: #01b9ef;
}

.ct_cat_switch_2 {
    color: #aed49b;
}

.ct_cat_switch_3 {
    color: #f78e55;
}

.ct_cat_switch_4 {
    color: #ca4363;
}

.ct_cat_activation_btn {
    color: #3e3e3e;
}

.ct_cat_activation_off {
    color: rgba(0, 0, 0, 0);
}

.ct_btn.ct_cat_btn:disabled {
    opacity: 0.35;
}

.ct_btn.ct_color_btn    {
    border: none;
    display: inline-block;
}

.ct_btn.ct_color_btn.disabled    {
    opacity: 0.25;
}

.ct_btn.ct_color_btn.disabled:hover    {
    border: none;
}

.color-picker-btn.ct_btn.ct_color_btn .foreground   {
    border-color: #555;
}

.ct_switch_act_btn  {
    color: #222;
    background-color: rgba(0, 0, 0, 0);
}

/* render mode btn */
.ct_rm_btn {
    color: #222;
    background-color: rgba(0, 0, 0, 0);
}

.ct_rm_btn .icon {
    vertical-align: baseline;
}

.button-hide {
    color: rgba(0, 0, 0, 0);
}

.button-transparent {
    color: #555;
}

/* --------------------------------------------------------------------------- */
/* left slide-in container */
.left-slide-in-container {
    position: absolute;
    top: 0;
    left: -15.625em;                /*-250px*/
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    z-index: 10;
    text-align: left;
    width: 20.125em;                /*322px*/
    overflow: hidden;
 }

 /* --------------------------------------------------------------------------- */
 /* left widget toolbar */
 .left-widget-toolbar {
    font-size: 1em;                 /*16px*/
    display: inline-block;
    position: relative;
    width: auto;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
 }

 .bottom-bar {
    position: absolute;
    right: 0; bottom: 0; left: 0;
    height: auto;
    padding: 0.5em;                 /*8px*/
    background-color: rgba(0, 0, 0, 0.5);
}

 .bottom-bar div.animation-controls    {
    padding-top: 0.5em;             /*8px*/
    padding-right: 0;
}

/* bottom widget toolbar */
.bottom-widget-toolbar {
    font-size: 1em;                 /*16px*/
    position: absolute;
    right: 0; bottom: 0; left: 0;
    height: auto;
    z-index: 8;
    padding: 0 0.125em;             /*0 2px*/
    background-color: rgba(0, 0, 0, 0.5);
    padding-bottom: 1px;            /* workaround for edge, firefox and chrome on windows eating the last pixel row */
}

.bottom-widget-toolbar.vertical-layout    {
    top: 0; right: 0; bottom: 0; left: initial;
    width: auto;
    padding: 0.125em 0;             /*2px 0*/
}

.bottom-widget-toolbar .bottom-widget-toolbar-widget   {
    padding-bottom: 0.25em;         /*4px*/
}

.bottom-widget-toolbar .bottom-widget-toolbar-widget.last   {
    padding-bottom: 0;
}

.bottom-widget-toolbar.vertical-layout .bottom-widget-toolbar-widget   {
    padding-bottom: 0;
    padding-right: 0.25em;          /*4px*/
}

.bottom-widget-toolbar.vertical-layout .bottom-widget-toolbar-widget.last   {
    padding-right: 0;
}

.bottom-widget-toolbar .presentation-slide-toolbar {
    font-size: 1em;
}

  /* media center item toolbar */
.media-center-item-toolbar.vertical-layout    {
    height: 100%;
}

.media-center-item-toolbar .track-bg    {
    background-color: rgba(255, 255, 255, 0.15);
}

.media-center-item-toolbar .thumb-bg    {
    background-color: rgb(255, 255, 255);
}

/* --------------------------------------------------------------------------- */
/* main menu */
.main-menu {
    font-size: 1em;                 /*16px*/
    position: absolute;
    left: 15.625em; top: 0;
    height: 100%;
    background-color: rgba(0, 0, 13, 0.6);
    text-align: left;
    z-index: 10;
 }

.main-menu .unit-size-observer   {
    width: 3.375em !important;      /*54px*/
    height: 3.375em !important;     /*54px*/
}

.main-menu-bar {
    position: relative;
}

.main-menu-top {
    position: relative;
    left: 0; top: 0;
}

.main-menu-bottom {
    position: absolute;
    left: 0; right: 0; bottom: 0;
}

.main-menu-button    {
    font-size: 1.625em;             /*26px*/
    display: block;
    padding: 0;
    width: 2.07692em;               /*54px*/
    height: 2.07692em;              /*54px*/
    line-height: 2.07692;           /*54px*/
    color: inherit;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
}

.main-menu-button:hover {
    background-color: rgba(0, 0, 0, 0);
}

.main-menu-button .icon    {
    vertical-align: top;
}

.main-menu-button.disabled .icon    {
    cursor: initial;                /* prevents some strange behavior in chrome, when gliding with mouse cursor over the border of disabled buttons (not a problem in firefox)*/
}

.main-menu ul {
    padding: 0;
    margin: 0;
}

.main-menu li {
    display: inline-block;
    padding: 0;
    margin: 0;
}

/* --------------------------------------------------------------------------- */
/* main menu control button bar*/
.main-menu-control-button-bar   {
    font-size: 1em;                 /*16px*/
    position: absolute;
    top: 0;
    left: 3.375em;                  /*54px*/
    background-color: rgba(0, 0, 0, 0);
    color: #fff;
    z-index: 11;
    padding: 0;
    transition: none;
    pointer-events: none;
}

.main-menu-control-button   {
    font-size: 1.625em;             /*26px*/
    display: inline-block;
    position: relative;
    background-color: rgba(0, 0, 0, 0);
    color: #fff;
    z-index: 11;
    text-align: center;
    padding: 0.46154em 0 0.46154em 0;   /*12px 0 12px 0*/
    width: 2.0768em;                /*54px*/
    line-height: 1;
    transition: none;
    cursor: pointer;
    text-shadow: none;
    vertical-align: top;
    pointer-events: initial;
}

.main-menu-control-button .icon {
    vertical-align: top;
}

.main-menu-control-button-logo   {
    display: inline-block;
    vertical-align: top;
    margin: 0.875em 0 0 0;          /*14px 0 0 0*/
    max-width: 4em;                 /*64px*/
}

.main-menu-control-button-bar .target-menu  {
    pointer-events: initial;
}

.main-menu-control-button-bar .oe-dropdown  {
    font-size: 0.875em;             /*14px*/
}

.main-menu-control-button a:active {
    color: #aaa;
}

/* --------------------------------------------------------------------------- */
/* right top bar */
div.right-top-bar    {
    font-size: 1em;                 /*16px*/
    position: absolute;
    top: 0; right: 0;
    height: auto;
    width: auto;
    background-color: rgba(0, 0, 0, 0);
    padding: 0;
    margin: 0;
    z-index: 10;
}

div.target-menu {
    display: inline-block;
    z-index: 10;
}

div.right-top-bar .oe-dropdown  {
    font-size: 0.875em;             /*14px*/
}

.right-top-bar-button {
    font-size: 1.5em;               /*24px*/
    display: inline-block;
    position: static;
    top: 0;
    width: 2.25em;                  /*54px*/
    line-height: 1;                 /*24px*/
    width: auto;
    padding: 0.5em;                 /*12px*/
}

/* ---------------------------------------------------------------------------- */
/* cap-bar */
div.cap-bar {
    font-size: 1em;                 /*16px*/
    position: relative;
    width: 100%;
    height: auto;
}

div.cap-bar-ui-layer-container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: filter 0.33s ease;
}

div.cap-bar-ui-layer-container div.cap-bar {
    position: absolute;
    top: 0;
}

div.app-container div.cap-bar {
    flex-grow: 0;
}

.cap-bar.transparent .btn.disabled {
    opacity: 1;
    color: rgba(255, 255, 255, 0.5);
}

.cap-bar.transparent .oe-dropdown.disabled .item  {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ---------------------------------------------------------------------------- */
/* std-cap-bar */
.std-cap-bar {
    font-size: 1em;                 /*16px*/
    position: relative;
    height: auto;
    width: 100%;
    z-index: 1049;                  /* 1 below modals*/
}

div.cap-bar .std-cap-bar {
    font-size: 1em;
}

.std-main-menu-cap-bar {
    z-index: 10;                    /* same as left main menu bar */
}

.std-cap-bar a span {
    vertical-align: top;
}

.std-cap-bar div {
    vertical-align: top;
}

.std-cap-bar .spacer-flex-v {
    display: inline-block;
    flex-grow: 1;
    height: auto;
}

.std-cap-bar .spacer-flex {
    display: inline-block;
    flex-grow: 1;
    height: auto;
    min-height: 2.6875em;           /*43px*/
}

.std-cap-bar .btn {
    font-size: 1.625em;             /*26px*/
    height: 1.653846154em;          /*43px*/
    line-height: 1.653846154;       /*43px*/
    padding: 0 0.30769em 0 0.30769em;   /*0px 8px 0 8px*/
    border: none;
    transition: none;
    border-radius: 0;
}

.std-cap-bar .btn .icon {
    vertical-align: baseline;
}

.std-cap-bar .left {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    min-height: 2.6875em;           /*43px*/
    justify-content: flex-start;
    flex-direction: column;
    height: 100%;
}

.std-cap-bar .left .btn {
    width: 2.07692em;               /*54px*/
}

.std-cap-bar .right {
    display: flex;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    min-height: 2.6875em;           /*43px*/
    justify-content: flex-start;
    flex-direction: column;
    text-align: right;
}

.std-cap-bar .right .btn {
    width: 1.653846154em;           /*43px*/
}

.std-cap-bar .middle {
    position: relative;
    height: auto;
    min-height: 2.6875em;           /*43px*/
    margin-right: 2.6875em;         /*43px*/
    margin-left: 3.375em;           /*54px*/
}

.std-cap-bar.multi-row .middle {
    display: flex;
    flex-wrap: wrap;
}

.std-main-menu-cap-bar .middle {
    display: flex;
    justify-content: space-between;
}

.std-cap-bar .std-cap-bar-main-menu-bar .btn    {
    width: 1.653846154em;          /*43px*/
}

.std-main-menu-cap-bar.multi-row .middle .target-type-bar {
    order: 0;
}

.std-main-menu-cap-bar.multi-row .middle .left-main-menu {
    order: 1;
}

.std-main-menu-cap-bar.multi-row .middle .right-main-menu {
    order: 2;
}

/* .middle .target-type-bar */
.std-cap-bar .middle .target-type-bar {
    position: relative;
    display: flex;
    justify-content: left;
    flex-wrap: nowrap;
    height: auto;
    min-height: 2.6875em;           /*43px*/
}

.std-target-bar-cap-bar .middle .target-type-bar {
    position: absolute;
    top: 0;
    right: 0;
}

.std-main-menu-cap-bar .middle .target-type-bar {
    flex-grow: 1;
}

.std-main-menu-cap-bar.multi-row .middle .target-type-bar {
    width: 100%;
}

.std-target-bar-cap-bar.multi-row .middle .target-type-bar {
    position: relative;
    top: initial;
    right: initial;
    left: initial;
    width: 100%;
    justify-content: center;
}

.std-cap-bar .middle .target-type-bar .content    {
    position: relative;
    white-space: nowrap;
}

.std-cap-bar .middle .target-type-bar .btn  {
    width: 1.730769231em;           /*45px*/
    min-height: 1.653846154em;      /*43px*/
    text-align: center;
}

.std-cap-bar .middle .target-type-bar .btn.str {
    font-size: 1em;                 /*16px*/
    width: auto;
    height: 2.6875em;               /*43px*/
    line-height: 2.6875;            /*43px*/
    min-height: 2.6875em;           /*43px*/
    padding: 0 1em;                 /*0 16px*/
}

.std-cap-bar .middle .target-type-bar .btn .icon.icon-code-u00CA div    {   /*octTarget*/
    margin-left: -0.0625em;         /*-1.625px*/
}

.std-cap-bar .middle .target-type-bar .spacer {
    display: inline-block;
    height: 100%;
    width: 2em;                     /*32px*/
}

/* .middle .main-menu-bar */
.std-cap-bar .middle .std-cap-bar-main-menu-bar {
    display: flex;
}

.std-main-menu-cap-bar.multi-row .middle .right-main-menu {
    flex-grow: 1;
}

.std-main-menu-cap-bar.three-row .middle .left-main-menu {
    flex-grow: 1;
}

.std-cap-bar .middle .main-menu-bar {
    min-height: 2.6875em;           /*43px*/
    white-space: nowrap;
}

.std-cap-bar .middle .main-menu-bar ul {
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
}

.std-cap-bar .middle .main-menu-bar li {
    display: inline-block;
}

/* .middle .target-bar */
.std-cap-bar .middle .target-bar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    min-height: 2.6875em;           /*43px*/
    text-align: left;
    justify-content: center;
}

.std-cap-bar.multi-row .middle .target-bar {
    width: 100%;
    order: 1;
}

.std-cap-bar .middle .target-bar .content {
    position: relative;
}

.std-cap-bar.multi-row .middle .target-bar .content {
    display: flex;
    flex-wrap: wrap;
}

.std-cap-bar.multi-row.three-row .middle .target-bar .content {
    flex-grow: 1;
}

.std-cap-bar .middle .target-bar .target-title,
.std-cap-bar .middle .target-bar .target-label {
    font-size: 1em;                 /*16px*/
    display: inline-block;
    position: relative;
    min-height: 2.6875em;           /*43px*/
    line-height: 2.6875;            /*43px*/
    font-weight: 400;
    vertical-align: top;
    text-align: left;
    padding: 0 0.5em 0 2em;         /*0 8px 0 32px*/
}

.std-cap-bar .middle .target-bar.has-label .target-title {
    padding-right: 0.125em;         /*2px*/
}

.std-cap-bar .middle .target-bar.has-title .target-label {
    padding-left: 0.125em;          /*2px*/
}

.std-cap-bar .middle .target-bar.has-button .target-label {
    padding-right:0.125em;          /*2px*/
}

.std-cap-bar.multi-row .middle .target-bar .target-title {
    text-align: center;
    padding: 0 0.5em;               /*0 8px*/
}

.std-cap-bar.multi-row .middle .target-bar .target-label {
    text-align: center;
}

.std-cap-bar .middle .target-bar .target-title-container, .std-cap-bar .middle .target-bar .target-label-container {
    display: inline-block;
    min-height: 2.6875em;           /*43px*/
}

.std-cap-bar.three-row .target-bar .target-title-container, .std-cap-bar.three-row .target-bar .target-label-container    {
    display: flex;
    width: 100%;
}

.std-cap-bar .middle .target-bar .target-title-container > div, .std-cap-bar .middle .target-bar .target-label-container > div {
    position: relative;
}

.std-cap-bar .middle .target-bar .target-bar-btn {
    width: 1.730769231em;           /*45px*/
    min-height: 1.653846154em;      /*43px*/
    text-align: center;
}

.std-cap-bar .target-bar .target-menu    {
    max-height: 2.6875em;           /*43px*/
}

.std-cap-bar.three-row .target-bar .target-menu    {
    text-align: center;
}

.std-cap-bar .target-bar .target-menu-container    {
    display: inline-block;
    max-height: 2.6875em;           /*43px*/
    flex-shrink: 0;
}

.std-cap-bar.three-row .target-bar .target-menu-container    {
    display: flex;
    width: 100%;
}

.std-cap-bar .middle .target-bar .target-menu-container > div {
    position: relative;
}

.std-cap-bar .middle .target-title span, .std-cap-bar .middle .target-label span {
    font-size: 1em;                 /*16px*/
    margin-left: 0.375em;           /*6px*/
    font-weight: 400;
}

/**/

.std-cap-bar .oe-dropdown    {
    font-size: 1em;                 /*16px*/
    font-weight: 400;
    flex-grow: 1;
}

.std-cap-bar .rot-toggle    {
    font-size: 1.375em;             /*22px*/
    position: absolute;
    margin-top: -0.0454545em;       /*-1px*/
}

.std-cap-bar .oe-dropdown .item  {
    line-height: 2.6875em;          /*43px*/
    min-height: 2.6875em;           /*43px*/
    padding: 0 0.875em 0 1.5em;     /*0 14px 0 24px*/
    cursor: pointer;
}

.std-cap-bar.three-row .oe-dropdown .item  {
    padding: 0 1.1875em;            /*0 19px*/
}

.std-cap-bar .oe-dropdown .item.toggle  {
    padding-left: 0.5em;            /*8px*/
}

.std-cap-bar.three-row .oe-dropdown .item.toggle  {
    padding-left: 0.1875em;         /*3px*/
}

.std-cap-bar .oe-dropdown .item.toggle .item-content {
    margin-left: 1em;               /*16px*/
    max-width: none;
}

.std-cap-bar .oe-dropdown > .menu .menu {
    width: max-content;
}

/* ---------------------------------------------------------------------------- */
/* blur layer */
.blur-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* --------------------------------------------------------------------------- */
/* loading screen */
.loading-screen {
    font-size: 1em;                 /*16px*/
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    text-align: center;
    z-index: 9;
    font-weight: 400;
    color: rgb(57, 116, 163);
}

.loading-screen .inner-loading-wrapper {
    position: absolute;
    top: 35%;
    left: 25%;
    width: 50%;
    height: 50%;
    text-align: center;
}

.loading-screen .progress-container {
    margin: 1.25em auto;            /*20px auto*/
    min-height: 0.25em;             /*4px*/
}

.loading-screen .progress {
    font-size: 1em;                 /*16px*/ /*overwrites reactstrap*/
    margin: 0 auto;
    height: 0.25em;                 /*4px*/
    max-width: 25.125em;            /*402px*/
    background-color: rgb(57, 116, 163);
    border-radius: 0;
}

.loading-screen .progress .progress-bar {
    background-color: #4fa3d1;
    transition: none;
}

.loading-screen .spinner {
    max-width: 3.125em;             /*50px*/
    margin: 0 auto;
}

.loading-screen .message {
    font-size: 1em;                 /*16px*/
}

/* --------------------------------------------------------------------------- */
/* blocking view */
.blocking-view  {
    position: fixed;
    height: 100%; width: 100%;
    background-color: rgba(0, 0, 0, 0);
    z-index: 1100;
    cursor: wait;
    /* next with !important to overwrite modal blur layer styles for "body > div:not(.oe-modal-root)" selector */
    pointer-events: all !important;
    filter: none !important;
    transition: none !important;
}

/* --------------------------------------------------------------------------- */
/* media viewer */
.test-media-viewer  {
    position: fixed;
    top: 6.25em;                    /*100px*/
    right: 6.25em;                  /*100px*/
    bottom: 6.25em;                 /*100px*/
    left: 6.25em;                   /*100px*/
    z-index: 1;
}

.media-viewer  {
    font-size: 1em;                 /*16px*/
    overflow: hidden;
    font-weight: 300;
}

.media-viewer-window  {
    width: 100%;
    height: 100%;
    position: relative;
}

.media-viewer-window-content-container  {
    position: absolute;
    width: 100%;
    height: 100%;
}

.media-viewer-content-cache {
    display: none;
}

.media-viewer-overlay   {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 1;
    pointer-events: none;
}

.media-viewer-overlay .mouse-event-target-ref  {
    position: absolute;
    width: 100%;
    height: 100%;
}

.media-viewer-overlay .overlay-view {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
}

.media-viewer-overlay-element {
    pointer-events: initial;
    transition: opacity 0.3s ease;
}

.media-viewer-overlay .waiting-spinner  {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    transition: opacity 0.3s ease;
}

.media-viewer-overlay .waiting-spinner .theme-indicator-view    {
    width: 4em;                     /*64px*/
    height: 4em;                    /*64px*/
}

.media-viewer-overlay .btn   {
    font-size: 1em;                 /*16px*/
    color: white !important;
    background-color: rgba(0, 0, 0, 0);
}

.media-viewer-overlay .btn.disabled   {
    color: rgba(255, 255, 255, 0.5) !important;
}

.media-viewer-overlay .btn-close,
.media-viewer-overlay .btn-fullscreen   {
    font-size: 2em;                 /*32px*/
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0.25em;          /*8px*/
    background-color: rgba(0, 0, 0, 0.2);
    margin:  0.25em;                /*8px*/
    padding: 0;
    width: 1.5em;                   /*48px*/
    height: 1.5em;                  /*48px*/
}

.media-viewer-overlay .btn-prev   {
    font-size: 2em;                 /*32px*/
    position: absolute;
    top: 50%;
    left: 0.5em;                    /*16px*/
    transform: translateY(-50%);
}

.media-viewer-overlay .btn-next   {
    font-size: 2em;                 /*32px*/
    position: absolute;
    top: 50%;
    right: 0.5em;                   /*16px*/
    transform: translateY(-50%);
}

.media-viewer-overlay .btn-big-play   {
    font-size: 4em;                 /*64px*/
    display: inline-block;
    position: relative;
    top: 50%;
    right: 0;
    width: 1.5em;                   /*96px*/
    height: 1.5em;                  /*96px*/
    transform: translateY(-50%);
    border-radius: 0.125em;         /*8px*/
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0;
}

.media-viewer-overlay .controls    {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: auto;
    color: white;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0 0.5em;               /*0 8px*/
}

.media-viewer-overlay .controls .btn-play,
.media-viewer-overlay .controls .btn-stop    {
    flex-grow: 0;
    padding: 0;
    width: 2em;                     /*32px*/
}

.media-viewer-overlay .controls .display-time    {
    flex-grow: 0;
    padding: 0 0.5em;               /*0 8px*/
    width: 3.4375em;                /*55px*/
    text-align: center;
}

.media-viewer-overlay .controls .progress-slider    {
    flex-grow: 1;
    margin: 0 0.5em;                /*0 8px*/
}

.media-viewer-overlay .controls .progress-slider.ui-slider {
    font-size: 0.875em;             /*14px*/
}

.media-viewer-overlay .controls .display-duration    {
    flex-grow: 0;
    padding: 0 0.5em;               /*0 8px*/
    width: 3.4375em;                /*55px*/
    text-align: center;
}

.media-viewer-content  {
    position: absolute;
    width: 100%;
    height: 100%;
}

.media-viewer-content .content-container  {
    position: absolute;
    width: 100%;
    height: 100%;
}

.media-viewer-content .content-container .zoom-container  {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.media-viewer-content .content-container img  {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;   /* prevent canceling of events for gesture recognizer in window controller */  
}

.media-viewer-content .content-container video  {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.media-viewer-content .content-container .pdf-view {
    font-size: 1em;                 /*1em*/
    height: 100%;
}

.media-viewer-content .content-container .pdf-view .custom-scrollbar-view {
    padding-right: 0.5em;           /*8px*/
}

.media-viewer-content .content-container .pdf-view .track-bg   {
    background-color: rgba(0, 0, 0, 0.2);
}

.media-viewer-content .content-container .pdf-view .thumb-bg   {
    background-color: rgb(220, 220, 220);
}

.media-viewer-content .pdf-view .react-pdf__Page__svg  {
    background-color: #fff !important;
}

.media-viewer-content .content-container iframe  {
    background-color: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
    margin: 0;
    padding: 0;
}

/* --------------------------------------------------------------------------- */
/* pdf view */
.pdf-view {
    position: relative;
}

.pdf-view .theme-indicator-controller.dim   {
    z-index: 0;
    background-color: rgba(0, 0, 0, 0.3);
}

.pdf-view .theme-indicator-view   {
    width: 10%;
    height: 10%;
}

.pdf-view .custom-scrollbar-view {
    padding-right: 0.625em;         /*10px*/
}

.pdf-view .track-bg   {
    background-color: rgba(116, 116, 116, 0.118);
}

.pdf-view .thumb-bg   {
    background-color: rgb(116, 116, 116);
}

.pdf-view div.react-pdf__Page  {
    background-color: transparent !important;
    padding-bottom: 1%;
}

.pdf-view div.last.react-pdf__Page    {
    padding-bottom: 0;
}

.pdf-view .react-pdf__Page__canvas  {
    background-color: transparent !important;
}

.pdf-view .no-explicite-page-width .react-pdf__Page__canvas  {
    width: 100% !important;
    height: auto !important;
}

.pdf-view .react-pdf__Page__svg  {
    background-color: transparent !important;
    width: 100% !important;
    height: auto !important;
}

.pdf-view .render-mode-none .react-pdf__Page__textContent  {
    position: initial !important;
    background-color: transparent !important;
    top: initial !important;
    left: initial !important;
    transform: none !important;
    pointer-events: unset !important;
}

.pdf-view .react-pdf__Page__textContent.textLayer  {
    pointer-events: none !important;
}

.pdf-view .react-pdf__Page__annotations  {
    display: none;
}

.pdf-modal .pdf-view > div {
    max-height: 80vh;
}

/* ---------------------------------------------------------------------------- */
/* manual view */
.manual-view .oe-plyr    {
    margin-right: 0.625em;          /*10px*/
}

.manual-view .video-content   {
    position: relative;
    margin-right: 0.625em;          /*10px*/
}

.manual-view .video-content .aspect-container   {
    padding-top: 56.25%;
}

.manual-view .video-content .aspect-content-container  {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.manual-view .media-viewer  {
    width: 100%;
    height: 100%;
}

/* --------------------------------------------------------------------------- */
/* loading screen spinner animation */
@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}

@-o-keyframes rotation {
    from {-o-transform: rotate(0deg);}
    to {-o-transform: rotate(360deg);}
}

@keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}