/*------------------------------------*
#Material Icons
*------------------------------------*/

/* #region */
/*  region */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons'), url('../../dist/css/material-icons/MaterialIcons-Regular.ttf') format('truetype');
}

.material-icons {
    font-family: 'Material Icons', sans-serif;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

.md-light-orange-es {
    /* Computed by using the following website: https://codepen.io/sosuke/pen/Pjoqqp */
    filter: invert(80%) sepia(40%) saturate(770%) hue-rotate(327deg) brightness(101%) contrast(101%);
}

.md-icon-content {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;

    color: #fff;
    background-color: var(--light-orange-es);

    font-weight: 600;
    text-transform: uppercase;
    font-family: Segoe UI, sans-serif;
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #Icomoon Icons
\*------------------------------------*/

/* #region */
/*  region */

@font-face {
    font-family: 'icomoon';
    src: url('xpact-icons/icomoon.eot?k4jehu');
    src: url('xpact-icons/icomoon.eot?k4jehu#iefix') format('embedded-opentype'),
    url('xpact-icons/icomoon.ttf?k4jehu') format('truetype'),
    url('xpact-icons/icomoon.woff?k4jehu') format('woff'),
    url('xpact-icons/icomoon.svg?k4jehu#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^='icon-'],
[class*=' icon-'] {
    font-family: 'icomoon', sans-serif !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

input[readonly],
input:disabled {
    background-color: var(--light-grey-2);
    border: 1px solid var(--light-grey-4);
}

.icon-xpact-settings:before {
    content: '\f085';
}

.icon-xpact-users:before {
    content: '\f0c0';
}

.icon-xpact-terminal:before {
    content: '\f120';
}

.icon-xpact-cubes:before {
    content: '\f1b3';
}

.icon-edit-cut:before {
    content: '\e906';
}

.icon-xpact-drag:before {
    content: '\e908';
}

.icon-xpact-circle_uncheck:before {
    content: '\e909';
}

.icon-xpact-circle_check:before {
    content: '\e90a';
}

.icon-xpact-icon-classification:before {
    content: '\e900';
}

.icon-xpact-icon-reading:before {
    content: '\e901';
}

.icon-xpact-icon-customer:before {
    font-family: 'Material Icons', sans-serif !important;
    content: '\e873';
}

.icon-xpact-icon-search:before {
    content: '\e902';
}

.icon-xpact-icon-separation:before {
    content: '\e903';
}

.icon-xpact-icon-training:before {
    content: '\e904';
}

.icon-xpact-icon-workflow:before {
    content: '\e905';
}

.icon-cog:before {
    content: '\e994';
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #General Settings
\*------------------------------------*/

/* #region */
/*  region */
* {
    margin: 0;
    padding: 0;
    font-family: Segoe UI, sans-serif;
}

*:focus {
    outline: none;
}

:root {
    --header-height: 4.5rem;
    --light-grey-1: #f5f5f5;
    --light-grey-2: #f2f2f2;
    --light-grey-3: #e9e9e9;
    --light-grey-4: #c0c0c0;
    --light-grey-5: #969696;
    --dark-grey: #343a40;
    --blue-es: #4e7cc3;
    --green-es: #a0d935;
    --black-es: #000000;
    --white-es: #ffffff;
    --light-orange-1: #ffb96226;
    --light-orange-es: #ffb962;
    --orange-es: #f07814;
    --dark-orange-es: #c75000;
    --z-header: 40;
    --z-footer: 20;
    --z-content: 10;
}

html,
body,
#root {
    height: 100%;
    width: 100%;
    color: var(--dark-grey);
    position: relative;
    min-width: 1250px;
}

.xdrive-container {
    position: relative;
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #Syncfusion settings
\*------------------------------------*/

/* #region */
/*  region */

body .e-input-group:not(.e-float-icon-left):not(.e-float-input)::before,
body .e-input-group:not(.e-float-icon-left):not(.e-float-input)::after,
body .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before,
body .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after {
    background: var(--orange-es);
}

body .e-dropdownbase .e-list-item.e-active,
body .e-dropdownbase .e-list-item.e-active.e-hover {
    color: var(--orange-es);
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #Global Styles
\*------------------------------------*/

/* #region */
/*  region */
h2 {
    color: var(--dark-grey);
    margin-bottom: 1rem;
    font-weight: 500;
    font-size: 1.3rem;
}

hr {
    border: none;
    background: var(--light-grey-2);
    height: 1px;
    margin: 0.5rem 0;
}

.flex-break {
    flex-basis: 100%;
    height: 0;
}

.scrollToTop {
    display: none;
}

.scrollToTop i {
    font-size: 2.5rem;
    color: white;
    background: var(--orange-es);
    border-radius: 1.75rem;
    position: fixed;
    bottom: 0.7rem;
    right: 50%;
    margin-right: -1.25rem;
    opacity: 0.9;
    cursor: pointer;
    z-index: 99999;
}

.hidden {
    display: none;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    opacity: 1;
}

[data-tooltip] {
    position: relative;
}

[data-tooltip]:before {
    font-family: Segoe UI, sans-serif;
    position: absolute;
    padding: 0.3rem 0.5rem;
    max-width: 30rem;
    width: 30rem;
    background-color: rgba(199, 80, 0, 0.71);
    color: #fff;
    content: attr(data-tooltip);
    text-align: left;
    font-size: 14px;
    line-height: 1.2;
    white-space: normal;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    top: 0;
    left: 100%;
    margin-left: -12px;
    z-index: 88;
}

[data-tooltip]:hover:before {
    visibility: visible;
    opacity: 1;
    transform: translateX(12px);
}

.ui-hidden {
    display: none !important;
}

input,
textarea {
    font-weight: 400;
    font-size: 0.9rem;
}

textarea.grid-textinput {
    overflow-y: visible;
    resize: none;
    height: auto;
    min-height: 4.5rem;
    width: 16rem;
}

input[type='date'] {
    letter-spacing: unset;
}

.microloader-es {
    display: flex;
    align-items: center;
}

.grid-textinput {
    height: 2.1rem;
    width: 15.5rem;
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--light-grey-4);
}

.grid-input .grid-textinput {
    padding: 0.1rem 0.4rem 0.1rem 0.4rem;
}

/*  endregion */
/* #endregion */

/*------------------------------------*\
# Tab Content
\*------------------------------------*/

/* #region */
/*  region */

.tabhead-es {
    display: inline-block;
    background-color: var(--light-grey-3);
    color: var(--light-grey-5);
    border-bottom: var(--light-grey-3);
    box-shadow: none;
    cursor: pointer;
    line-height: 4rem;
    padding: 0 1rem 0 1rem;
    transition: all 0.3s ease;
    margin-right: 1rem;
    height: 3rem;
    min-width: 7rem;
}

.tabhead-es:hover {
    background-color: var(--light-grey-4);
    color: #fff;
}

.tabhead-es h3 {
    justify-content: center;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 0;
    line-height: 3rem;
    display: flex;
    align-items: center;
}

.tabhead-es.tabactive {
    background-color: var(--orange-es);
    color: #fff;
    z-index: 5555;
    position: relative;
    box-shadow: 0 -0.05rem 0.2rem var(--light-grey-4);
}

.tabcontent-es {
    position: relative;
    display: none;
    transition: all 0.3s;
    box-shadow: 0 0 0.2rem var(--light-grey-4);
}

.tabcontent-es > .vspace {
    padding-bottom: 2rem;
}

.tabcontent-es .view-controls {
    padding: 0 0 1.5rem 1rem;
}

.tabcontent-es .view-controls .btn-secondary-es {
    margin-top: 1.5rem;
}

.tabcontent-es .pageoverview {
    display: flex;
    flex-wrap: wrap;
}

.tabcontent-es.tabactive {
    display: block;
}

.tabcontent-es .download-es {
    position: absolute;
    display: flex;
    top: 0.5rem;
    right: 0;
    color: var(--light-grey-5);
    cursor: pointer;
    padding: 0.3rem 1rem;
}

.tabcontent-es .download-es i {
    font-size: 1.5rem;
    margin-right: 0.5rem;
    color: var(--orange-es);
}

.tabcontent-es .download-es:hover {
    color: var(--orange-es);
}

/*  endregion */
/* #endregion */

/*------------------------------------*\
# Error Container
\*------------------------------------*/

/* #region */
/*  region */
.container-es.error-container {
    background-color: var(--light-grey-4);
}

.container-es.error-container h3 {
    font-size: 0.9rem;
    color: var(--dark-orange-es);
    font-weight: 600;
    display: inline;
}

.container-es.error-container .error-controls {
    display: flex;
    margin: 0.8rem 0;
}

.container-es.error-container .error-controls div {
    margin-right: 1rem;
}

.container-es.error-container details {
    cursor: pointer;
    margin-top: 1rem;
    font-weight: 600;
    color: var(--orange-es);
}

.container-es.error-container details div {
    cursor: default;
    font-weight: 400;
    color: var(--dark-grey);
    font-size: 0.9rem;
}

.container-es.error-container details div b span {
    color: var(--dark-orange-es);
}

.container-es.error-container details article {
    display: flex;
    flex-flow: column;
    padding: 0;
    margin: 0;
}

/*  endregion */
/* #endregion */
/*------------------------------------*\
#Layout
\*------------------------------------*/
/* #region */
/*  region */

.container-es {
    min-height: 100%;
    background-color: var(--dark-grey);
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 100%;
}

.main-es {
    width: 100%;
    min-height: 98.5vh;
    display: flex;
    flex-direction: row;
}

.content-es {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: var(--z-content);
    background-color: #fff;
    padding-top: var(--header-height);
}

.article-es {
    height: 100%;
    display: flex;
    align-items: stretch;
}

.btn-secondary-es.small {
    color: var(--orange-es);
    background-color: var(--light-grey-2);
    font-size: 0.9rem;
    margin-right: 0;
    margin-left: 0;
}

.btn-secondary-es.small.disabled {
    color: var(--light-grey-4);
    pointer-events: none;
}

.btn-secondary-es.small:hover {
    background-color: #fff;
}

/* Full width box */
.full-box-es {
    padding: 2rem;
    width: 100%;
    background-color: white;
    position: relative;
}

/* Multiple boxes, for example for the dashboard layout */
.box-wrapper-es {
    padding: 1.25rem 0 0 1.25rem;
    display: flex;
    flex-wrap: wrap;
    background: red;
    border: 5px solid green;
    width: 100%;
}

.inner-box-es {
    position: relative;
    padding: 0 1rem 1rem 1rem;
    flex-grow: 1;
}

.admin-container,
.training-container {
    position: relative;
    padding-bottom: 10rem;
}

.view-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 1rem 1.5rem 0;
}

.view-controls .btn-secondary-es {
    margin-top: 0;
}

.view-controls .btn-secondary-es i {
    color: #fff;
}

.document-data-container {
    border: 1px solid var(--light-grey-2);
    width: calc(100% - 0.3rem);
    transition: all 0.3s;
    transition-timing-function: ease-in-out;
    max-width: 100%;
}

.view-mode .document-data-container {
    margin-left: -105%;
}

.sticky .test-upload-controls input {
    display: none;
}

.canvas-container .canvas-section .sticky > .title {
    display: flex;
    flex-flow: column;
}

.canvas-container .canvas-section .sticky > .title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--orange-es);
    padding-top: 0;
    padding-bottom: 0;
}

@-moz-document url-prefix() {
    .canvas-container .canvas-section h3.canvas-head.sticky {
        width: 11.7rem;
    }
}

.editor-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--light-grey-5);
    padding-bottom: 0.2rem;
}

.ruleEditor-container-es {
    transition: all 0.3s;
}

.canvas-container .canvas-section ul {
    list-style: none;
    margin-top: 0;
    width: 100%;
}

.canvas-container .canvas-section .pagination-container ul {
    margin-top: -1rem;
    margin-bottom: -1rem;
}

.canvas-container .canvas-section ul.accordion-help .rich-content {
    padding-left: 2.5rem;
}

.canvas-container .canvas-section .canvas-help-jump {
    display: flex;
    position: relative;
}

.canvas-container .canvas-section .jumplist-container {
    position: fixed;
    height: calc(100% - 9.9rem);
    top: 9.9rem;
    width: 200px;
    background: linear-gradient(270deg, rgba(245, 245, 245, 1) 0%, rgba(255, 255, 255, 1) 100%);
    overflow-y: auto;
    scrollbar-width: thin;
}

.canvas-container .canvas-section .jumplist-container .help-jumplist {
    padding: 0.1rem 0 1rem 15px;
    display: block;
    position: relative;
}

.canvas-container .canvas-section .help-jumplist span {
    color: var(--dark-grey);
    padding: 0.15rem 0 0.15rem 0.3rem;
    position: relative;
}

.canvas-container .canvas-section .jumplist-container ul {
    padding-left: 0;
}

.canvas-container .canvas-section .help-jumplist li {
    transition: all 0.2s;
    cursor: pointer;
    border-bottom: none;
    padding-left: 0;
    margin-left: 0;
    position: relative;
    font-size: 1rem;
}

.canvas-container .canvas-section .help-jumplist > li {
    margin-bottom: 1.5rem;
}

.canvas-container .canvas-section .help-jumplist li span {
    background-color: var(--light-orange-es);
    padding-left: 0.5rem;
    color: #fff;
    width: 90%;
    display: flex;
}

.canvas-container .canvas-section .help-jumplist ul li {
    font-size: 1rem;
}

.canvas-container .canvas-section .help-jumplist ul ul ul li span {
    font-weight: 400;
    font-size: 0.9rem;
    padding-left: 0;
}

.canvas-container .canvas-section .help-jumplist ul ul ul ul li span {
    color: var(--light-grey-5);
    padding-left: 0.3rem;
}

.canvas-container .canvas-section .help-jumplist ul li span {
    padding-left: 0;
    background-color: transparent;
    color: var(--dark-grey);
    font-size: 0.85rem;
}

.canvas-container .canvas-section .help-jumplist ul span:hover,
.canvas-container .canvas-section .help-jumplist ul span.active {
    color: var(--orange-es);
    background-color: transparent;
}

.canvas-container .canvas-section .help-jumplist span:hover,
.canvas-container .canvas-section .help-jumplist span.active {
    background-color: var(--orange-es);
}

.canvas-container .canvas-section .help-jumplist ul ul ul ul li span:before {
    content: '•';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0.15rem;
    left: -0.5rem;
}

.canvas-container .canvas-section .help-jumplist li span:hover:before {
    border-color: var(--orange-es);
}

.canvas-container .canvas-section .help-jumplist ul {
    margin-left: 0;
    padding-left: 0.6rem;
}

.canvas-container .canvas-section .help-jumpcontent {
    margin-left: 200px;
    position: relative;
    width: calc(100% - 200px);
    padding-top: 4.75rem;
}

.canvas-container .canvas-section ul.case-file-selector li {
    display: flex;
    flex-flow: column;
    padding-bottom: 0;
    position: relative;
    margin-bottom: 0.2rem;
    border-bottom: 1px solid var(--light-grey-2);
}

.canvas-container .canvas-section ul.tag-container li.tag i {
    transform: rotate(0deg);
}

.canvas-container .canvas-section ul li:not(.term-item) i {
    transform: rotate(-90deg);
    transition: all 0.3s;
}

.canvas-container .canvas-section .ac-training-offcanvas ul li:not(.term-item) i {
    transform: rotate(-0);
}

.canvas-container .canvas-section ul li.term-active i {
    transform: rotate(0);
}

.canvas-container .canvas-section ul li .arrow-head {
    position: absolute;
    font-size: 1.3rem;
    left: 0;
    top: 0;
    color: #fff;
    background-color: var(--light-orange-es);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    padding-left: 0.1rem;
}

.canvas-container .canvas-section ul li ul {
    display: none;
    margin-top: 0;
}

.canvas-container .canvas-section .help-jumplist li ul {
    display: block;
}

.canvas-container .canvas-section ul li span.accordion-section-head {
    /* width: 100%; */
    font-weight: 600;
    font-size: 1.1rem;
    padding: 0.7rem 0.5rem 0.7rem 2.5rem;
    cursor: pointer;
    min-height: 1.8rem;
    display: flex;
    align-items: center;
    position: relative;
    background: linear-gradient(0deg, rgba(242, 242, 242, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

.canvas-container .canvas-section .rich-content {
    padding: 0 1rem 1rem 1rem;
}

.canvas-container .canvas-section li .rich-content {
    padding-left: 0;
}

.canvas-container .canvas-section ul li .rich-content {
    display: none;
}

.canvas-container .canvas-section ul li.term-active .rich-content {
    display: block;
}

.canvas-container .canvas-section .rich-content,
.canvas-container .canvas-section .rich-content p {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.canvas-container .canvas-section .rich-content a {
    color: var(--orange-es);
}

.canvas-container .canvas-section .rich-content a:hover {
    text-decoration: underline;
}

.canvas-container .canvas-section .rich-content img {
    max-width: 95%;
    width: auto;
    padding-top: 0.3rem;
}

.canvas-container .canvas-section .rich-content blockquote {
    padding-left: 0.5rem;
    margin-top: 0.05rem;
    border-left: 0.2rem solid var(--light-orange-es);
}

.canvas-container .canvas-section .rich-content h1 {
    font-size: 1.3rem;
    font-weight: 400;
    margin-top: 1.5rem;
    padding-bottom: 0.1rem;
    border-bottom: 1px solid var(--light-orange-es);
    color: var(--orange-es);
}

.canvas-container .canvas-section .rich-content h2 {
    font-size: 1.3rem;
    font-weight: 400;
    margin-top: 1.2rem;
    padding-bottom: 0.1rem;
}

.canvas-container .canvas-section .rich-content * {
    scroll-margin: 6.8rem;
}

.canvas-container .canvas-section .rich-content h3 {
    font-size: 1.1rem;
    font-weight: 500;
}

.canvas-container .canvas-section .rich-content h4 {
    font-size: 1.1rem;
    font-weight: 400;
}

.canvas-container .canvas-section .rich-content h2,
.canvas-container .canvas-section .rich-content h3,
.canvas-container .canvas-section .rich-content h4 {
    margin: 1.5rem 0 0.5rem 0;
}

.canvas-container .canvas-section .rich-content h5,
.canvas-container .canvas-section .rich-content h6 {
    font-size: 1rem;
    font-weight: 500;
    margin: 1rem 0 0.5rem 0;
}

.canvas-container .canvas-section .rich-content ul,
.canvas-container .canvas-section .rich-content ol {
    margin-left: 0.5rem;
    padding: 0;
    margin-bottom: 1rem;
}

.canvas-container .canvas-section .rich-content ul {
    display: inherit !important;
    margin-top: 0;
}

.canvas-container .canvas-section .rich-content ul li {
    list-style: disc;
}

.canvas-container .canvas-section .rich-content ul li ul li {
    list-style: circle;
    padding: 0 0 0 0.3rem;
}

.canvas-container .canvas-section .rich-content li {
    display: list-item;
    border: none;
    margin: 0 0 0 0.7rem;
    padding: 0 0 0 0.5rem;
}

.canvas-container .canvas-section .rich-content ol li {
    margin-left: 0.5rem;
    padding-left: 0.7rem;
}

.canvas-container .canvas-section .rich-content tr td {
    padding-left: 0.6rem;
}

.canvas-container .canvas-section .rich-content tr td span {
    margin: 0.3rem 0 0.3rem 0;
    width: 1.3rem;
    height: 1.3rem;
}

.canvas-container .canvas-section .rich-content code {
    font-family: Consolas, monospace !important;
    font-weight: 500;
    font-size: 1rem;
    color: var(--dark-orange-es);
}

.canvas-container .canvas-section .rich-content pre code {
    background: var(--light-grey-2);
    display: block;
    padding: 0.5rem;
    margin: 0.5rem 0.5rem 0.5rem 0;
    font-weight: 400;
    color: var(--dark-grey);
    word-break: break-word;
    overflow: auto;
    scrollbar-width: thin;
}

.canvas-container .canvas-section *::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
    background-color: var(--light-grey-1);
}

.canvas-container .canvas-section *::-webkit-scrollbar {
    height: 8px;
    width: 8px;
    background-color: var(--light-grey-1);
}

.canvas-container .canvas-section *::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.25);
    background-color: var(--light-grey-5);
}

.readtable-subtable-container {
    overflow-x: auto;
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  Training Detail Off Canvas
\*------------------------------------*/

/* #region */
/*  region */

.ac-training-offcanvas table {
    width: 95%;
}

.ac-training-offcanvas .tabcontent-es {
    box-shadow: none;
    margin-bottom: 3.5rem;
}

.ac-training-offcanvas .principal {
    border: 1px solid var(--light-grey-3);
    padding: 1rem 0 0 1rem;
    margin: 1rem 0 1rem 0;
}

.ac-training-offcanvas .principal .definition-container {
    border-bottom: none;
    padding-top: 1.5rem;
}

.ac-training-offcanvas .principal .definition-container i.label {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    margin-top: -0.6rem;
    color: var(--light-orange-es);
}

.ac-training-offcanvas .principal .term-item i {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(0);
}

.ac-training-offcanvas .principal h3 {
    color: var(--light-grey-5);
    font-size: 1.1rem;
    font-weight: 600;
}

.ac-training-offcanvas .principal table tr td:first-child {
    color: var(--light-grey-5);
    font-size: 0.9rem;
    font-weight: 600;
    width: 7rem;
}

.ac-training-offcanvas .table {
    margin-bottom: 0;
}

.ac-training-offcanvas .table .drop-down-container-es {
    display: block;
    float: left;
    margin: 0;
}

.ac-training-offcanvas .table tr.floating-row td {
    padding-top: 1.7rem;
}

.ac-training-offcanvas .table td:first-child {
    width: 10rem;
}

.ac-training-offcanvas .table td:last-child {
    padding: 0.3rem 0.75rem;
}

.ac-training-offcanvas .table tr:last-child td {
    padding-top: 3rem;
}

.ac-training-offcanvas .table tr .ahead-section {
    display: flex;
}

.ac-training-offcanvas .table tr .ahead-section > div {
    margin-right: 1.5rem;
}

.ac-training-offcanvas .table tr .group-section {
    display: flex;
    flex-flow: column;
    position: relative;
}

.ac-training-offcanvas .table tr .group-section:before {
    content: '';
    background: linear-gradient(-90deg, rgba(245, 245, 245, 1) 50%, rgba(255, 255, 255, 1) 100%);
    position: absolute;
    height: 131%;
    width: 150%;
    left: 0;
    margin-top: -2rem;
    z-index: 0;
}

.ac-training-offcanvas .table tr .group-section > div {
    margin-bottom: 1rem;
    z-index: 1;
}

.ac-training-offcanvas .table tr .group-section > div.floating-input-container {
    z-index: 3;
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #Accordion
\*------------------------------------*/
/* #region */
/*  region */

.accordion-es {
    border-top: 1px solid var(--light-grey-3);
    border-bottom: 3px solid #fff;
}

.accordion-es.acc-active .accordion-content {
    height: auto;

    overflow: visible;
}

.accordion-head {
    display: flex;
    flex-flow: row;
    padding: 1rem 1rem 1rem 3.2rem;
    position: relative;
    align-items: center;
    border: 1px solid var(--light-grey-3);
    border-left: none;
    border-right: none;
    /* border-bottom: .3rem solid #fff; */
    border-top: none;
    background: linear-gradient(0deg, rgba(242, 242, 242, 1) 0%, rgba(255, 255, 255, 1) 100%);
    transition: all 0.3s;
    cursor: pointer;
}

.accordion-head .accordion-head-arrow {
    width: 2.2rem;
    background-color: var(--light-orange-es);
    color: #fff;
    height: 100%;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    transition: all 0.3s;
}

.accordion-head .accordion-head-arrow i {
    transform: rotate(-90deg);
    transition: all 0.3s;
}

.accordion-head:hover .accordion-head-arrow,
.training-container .accordion-head .accordion-head-arrow.acc-open {
    background-color: var(--orange-es);
}

.acc-active .accordion-head {
    background: linear-gradient(0deg, rgba(242, 242, 242, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

.acc-active .accordion-head .accordion-head-arrow i {
    transform: rotate(0deg);
}

/* #endregion */
/*  endregion */



.link-es {
    margin: 0 0.5rem 0 0.5rem;
    color: var(--orange-es);
}

.link-es:hover {
    color: var(--dark-orange-es);
}

/*------------------------------------*\
  #Multiselect
\*------------------------------------*/
/* #region */
/*  region */

.multiselect-container {
    position: relative;
    border: 1px solid var(--light-grey-3);
    cursor: pointer;
}

.multiselect-container .tag-container {
    margin: 0 0 -0.3rem 0.3rem;
}

.multiselect-container > span {
    padding: 0.5rem;
    font-weight: 400;
}

.multiselect-container > span:after {
    font-family: 'Material Icons', sans-serif;
    content: 'expand_more';
    color: var(--orange-es);
    font-size: 1.5rem;
    margin-top: -0.1rem;
}

.multiselect-container:hover .mulitselect-options {
    display: flex;
    padding-bottom: 0.5rem;
}

.multiselect-container .mulitselect-options {
    display: none;
    flex-direction: row;
    list-style: none;
    position: absolute;
    width: 100%;
    right: 0;
    background-color: var(--light-grey-2);
    z-index: 8888;
    box-shadow: 0 0.05rem 0.2rem var(--light-grey-4);
}

.multiselect-container .mulitselect-options li {
    width: 100%;
    padding: 0.2rem 0.5rem;
    font-weight: 400;
    display: flex;
    cursor: pointer;
    transition: all 0.2s;
}

.multiselect-container .mulitselect-options li:hover {
    color: var(--orange-es);
}

.multiselect-container .mulitselect-options li:before {
    font-family: 'Material Icons', sans-serif;
    content: 'add_circle';
    font-size: 1.3rem;
    color: var(--orange-es);
    padding-right: 0.3rem;
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #DataEdit
\*------------------------------------*/
/* #region */
/*  region */

.dataeditor-controls-container {
    display: flex;
    padding-top: 1rem;
    padding-left: 1rem;
    position: relative;
}

.dataedit-container {
    display: flex;
}

.data-edit-window {
    opacity: 0;
    margin-bottom: 5rem;
    transition: all 0.3s;
    top: 0;
    z-index: 99999;
    background-color: #fff;
    min-width: 60%;
    position: relative;
}

.data-edit-window-container {
    position: absolute;
    width: 100%;
    min-height: 100%;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: start;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: rgba(255, 255, 255, 0.8);
    visibility: hidden;
    padding: 0;
}

.data-edit-window-container.window-open {
    visibility: visible;
    /* overflow: auto; */
    max-height: none;
}

.data-edit-window-container.window-error {
    opacity: 0;
}

.window-open .data-edit-window {
    opacity: 1;
    margin-top: 3rem;
}

.dataeditor-container {
    box-shadow: 0 0 0.2rem var(--light-grey-4);
    padding: 1rem 0;
}

.dataeditor-container h2 {
    margin: 0;
    padding: 0 2rem;
    color: var(--light-grey-5);
}

.dataeditor-headline {
    font-size: 1.1rem;
    font-weight: 600;
    padding: 1rem 1rem 1rem 2rem;
    color: var(--orange-es);
}

.dataeditor-container table {
    width: 100%;
    border-spacing: 0;
}

.dataeditor-container table td {
    vertical-align: middle;
    width: 75%;
    flex-flow: row;
}

.dataeditor-container table td:first-child {
    width: auto;
    padding-left: 2rem;
}

.dataeditor-controls-container a {
    margin: 1rem;
}

.dataeditor-controls-container a.dataeditor-download-btn {
    position: absolute;
    right: 1rem;
    top: 1.3rem;
    font-size: 0.9rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--light-grey-5);
}

.dataeditor-controls-container a.dataeditor-download-btn:hover {
    color: var(--orange-es);
}

.dataeditor-controls-container a.dataeditor-download-btn i {
    font-size: 1.8rem;
    padding-right: 0.5rem;
    color: var(--orange-es);
}

.dataeditor-container .property-container {
    display: table-row;
}

.dataeditor-container .property-container:nth-child(even) {
    background-color: var(--light-grey-2);
}

.dataeditor-container .property-container span {
    display: flex;
    color: var(--dark-grey);
    font-size: 0.9rem;
    font-weight: 500;
    align-items: center;
    padding: 0.5rem 2rem 0.5rem 0;
}

.dataeditor-container .property-container span i {
    color: var(--dark-orange-es);
    padding-left: 0.2rem;
}

.dataeditor-container .grid-input {
    display: flex;
    align-items: center;
    margin-right: 1.5rem;
    padding: 0.3rem 0 0.3rem 0;
    position: relative;
}

.dataeditor-container .subtable {
    border-top: 1px solid var(--light-orange-es);
}

.dataeditor-container h4 {
    margin-top: 2rem;
    padding-bottom: 0.5rem;
    margin-left: 2rem;
    color: var(--orange-es);
    font-weight: 500;
}

.dataeditor-container .subtable .grid-input {
    padding-right: 0;
    margin-right: 0;
}

.dataeditor-container .subtable td {
    padding: 0.3rem 1rem;
    vertical-align: top;
    width: auto;
}

.dataeditor-container .subtable td:last-child {
    padding-right: 2rem;
}

.dataeditor-container .subtable th {
    text-align: left;
    padding: 1rem 1.1rem 0 1.1rem;
    color: var(--dark-grey);
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    padding-bottom: 0.2rem;
}

.dataeditor-container .subtable th:first-child {
    padding-left: 2rem;
}

.dataeditor-container .grid-input input,
.dataeditor-container .grid-input textarea {
    padding-left: 0.5rem;
    border: 1px solid var(--light-grey-4);
    line-height: 2rem;
    width: 100%;
    min-width: 7rem;
}

.dataeditor-container .grid-input textarea {
    line-height: 1.5rem;
}

.dataeditor-container .grid-input input.property-invalid-input {
    border: 1px solid var(--dark-orange-es);
}

.data-edit-window .closepopup {
    position: absolute;
    background-color: var(--orange-es);
    color: #fff;
    font-size: 2rem;
    top: -1rem;
    right: -1rem;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    border-radius: 50%;
    cursor: pointer;
}

/* #endregion */
/*  endregion */
/*------------------------------------*\
  #Messagebox
\*------------------------------------*/
/* #region */
/*  region */

.messagebox-container-es.messeagebox-open {
    visibility: visible;
    transition: all 0.3s;
}

.messagebox-container-es {
    position: fixed;
    visibility: hidden;
    display: flex;
    z-index: 99999;
    width: 100%;
    height: 100%;
    align-items: flex-start;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.5);
    top: 0;
    left: 0;
}

.messeagebox-open .messagebox-es {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    top: 8rem;
    opacity: 1;
}

.messagebox-es {
    top: 5rem;
    min-width: 35rem;
    max-width: 40rem;
    min-height: 15rem;
    position: relative;
    opacity: 0;
    background-color: var(--light-grey-2);
    transition: all 0.3s;
    box-shadow: 0 0 0.2rem var(--light-grey-4);
}

.messagebox-es .messagebox-title {
    font-size: 1.1rem;
    color: #fff;
    background: var(--orange-es);
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.messagebox-es .messagebox-title.padded {
    margin-bottom: 1.5rem;
}

.messagebox-es .messagebox-content {
    display: flex;
    align-items: center;
    padding: 2rem 1.3rem 1rem 1rem;
    overflow-x: hidden;
    word-break: break-word;
}

.messagebox-es .btn-text {
    color: var(--light-grey-5);
    cursor: pointer;
    font-size: 1.3rem;
    position: absolute;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 1.6rem;
    right: 2rem;
    transition: all 0.3s;
    border: none;
}

.messagebox-es .btn-text:hover {
    color: var(--orange-es);
}

.messagebox-es .messagebox-content ul {
    list-style: none;
    font-size: 0.8rem;
}

.messagebox-es .messagebox-content ul li {
    margin: 0.7rem 0;
    display: flex;
}

.messagebox-es .messagebox-content li i {
    font-size: 1.3rem;
    padding-right: 0.3rem;
}

.messagebox-es .messagebox-content ul span {
    font-weight: 600;
    color: var(--dark-orange-es);
}

.messagebox-es .messagebox-content i {
    font-size: 3.5rem;
    color: var(--orange-es);
    padding-right: 1rem;
    align-items: center;
}

.messagebox-es .messagebox-content .btn-secondary-es i {
    color: #fff;
    font-size: 1.4rem;
    padding-right: 0.4rem;
    transition: all 0.3s;
}

.messagebox-es .messagebox-content .btn-secondary-es {
    position: absolute;
    bottom: 1.1rem;
    right: 1.5rem;
}

.messagebox-es .messagebox-content i.copy-content {
    font-size: 1.6rem;
    padding-left: 1rem;
    color: var(--light-grey-5);
    cursor: pointer;
}

.messagebox-es .messagebox-content i.copy-content:hover {
    color: var(--orange-es);
}

.grid-edit .messagebox-content {
    align-items: end;
    justify-content: center;
}

.grid-edit .messagebox-content-text {
    display: flex;
    align-items: center;
}

.messagebox-error .messagebox-content {
    font-weight: 500;
}

.messagebox-error .grid-edit .messagebox-content i {
    color: var(--orange-es);
}

.grid-edit .messagebox-content i {
    font-size: 1.8rem;
    color: var(--light-grey-4);
    padding-right: 0.5rem;
}

.messagebox-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 5fr 1fr;
    grid-template-rows: 1fr 1fr;
    column-gap: 1rem;
    row-gap: 0.5rem;
}

.messagebox-content-grid > .row {
    display: grid;
}

.messagebox-content-grid > .fst-row {
    grid-row-start: 1;
}

.messagebox-content-grid > .snd-row {
    grid-row-start: 2;
}

.messagebox-content-grid > .fst-column {
    grid-column-start: 2;
}

.messagebox-content-grid > .snd-column {
    grid-column-start: 3;
}

.messagebox-content-grid > .span-two-rows {
    grid-row-end: span 2;
}

.messagebox-labels {
    line-height: 2rem;
    text-align: right;
}

input.messagebox-inputs {
    padding: 0 0.4rem;
    border: 1px solid var(--light-grey-4);
    line-height: 2rem;
}

.window-button-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    padding: 1rem 0 1.5rem 0;
    position: relative;
}

.window-button-container .btn-window-container {
    grid-column-start: 2;
    grid-column-end: 3;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.window-button-container .btn-text-container {
    grid-column-start: 3;
    grid-column-end: 4;
    display: flex;
    justify-content: flex-end;
    margin-right: 1rem;
}

.window-button-container .btn-text-container .btn-text {
    position: initial;
}

#training-detail-window .window-button-container {
    padding: 1rem 0 0 0;
}

.window-button {
    padding: 0.375rem 0.75rem;
    color: var(--orange-es);
    border: 1px solid var(--orange-es);
    margin: 0 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s;
    text-align: center;
    min-width: 4.9rem;
    font-size: 0.9rem;
    white-space: nowrap;
    display: flex;
    justify-content: center;
}

.window-button i {
    font-size: 1.4rem;
    padding-right: 0.4rem;
    transition: all 0.3s;
}

.window-button.primary {
    color: #fff;
    background-color: var(--orange-es);
}

.window-button.disabled,
.window-button.primary.disabled {
    background-color: var(--light-grey-4);
    border: 1px solid var(--light-grey-4);
    cursor: default;
    pointer-events: none;
}

.window-button.primary:hover {
    background-color: #fff;
    color: var(--orange-es);
}

.window-button:hover {
    color: #fff;
    background-color: var(--orange-es);
}

/* #endregion */
/*  endregion */


/*------------------------------------*\
  #Progress Status Indicator
\*------------------------------------*/
/* #region */
/*  region */

.progress-status-container {
    display: flex;
    padding: 0 1rem;
    margin-right: 5rem;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: var(--z-header);
    position: relative;
}

.progress-status-container .progress-status-btn {
    padding: 0.5rem 1rem;
    background-color: #fff;
    color: var(--orange-es);
    transition: all 0.3s;
    display: flex;
    font-size: 0.9rem;
    font-weight: 700;
    align-items: center;
    border: 1px solid var(--light-grey-4);
}

.progress-status-container.process-started .progress-status-btn {
    color: var(--light-grey-5);
}

.progress-status-container.process-started .progress-status-btn i.wait-state {
    opacity: 0;
}

.progress-status-container .progress-status-btn .microloader-es {
    position: absolute;
    left: 1.1rem;
}

.progress-status-container.process-started {
    pointer-events: none;
}

.progress-status-container .progress-status,
.progress-status-container .progress-status-btn {
    min-width: 10rem;
}

.progress-status-sub {
    display: flex;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    top: 4.8rem;
    left: 1rem;
    padding: 0.5rem 1rem;
    background-color: var(--light-grey-2);
    color: var(--light-grey-5);
    flex-flow: wrap;
    box-shadow: 0 0.05rem 0.2rem var(--light-grey-4);
    transition: all 0.2s ease-in-out;
    z-index: 77777;
}

.progress-status-container:hover .progress-status-sub {
    visibility: visible;
    opacity: 1;
    top: 4.15rem;
}

.progress-status-arrow-up {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--light-grey-4);
    position: absolute;
    top: -10px;
    left: 12px;
    overflow: visible;
}

.progress-status-sub-entry {
    white-space: nowrap;
    justify-content: center;
    display: flex;
    margin: 0.25rem 0;
    transition: all 0.2s;
}

.progress-status-container .progress-status-btn.result {
    background-color: var(--dark-orange-es);
    animation: progress-aware 1.5s 3;
    color: #fff;
    border-color: #fff;
}

.progress-status-container .progress-status-btn i {
    margin-right: 0.5rem;
}

.progress-status-container:hover .progress-status-btn {
    background-color: var(--orange-es);
    border-color: #fff;
    color: #fff;
}

@keyframes progress-aware {
    0% {
        background-color: var(--dark-orange-es);
    }
    50% {
        background-color: var(--light-orange-es);
    }
    100% {
        background-color: var(--dark-orange-es);
    }
}

.progress-status-container.active {
    background: var(--light-orange-es);
    color: #fff;
}

.progress-status-container .progress-status {
    display: flex;
    align-items: center;
    background-color: var(--light-orange-es);
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    padding: 0.5rem 1rem;
    position: relative;
    overflow: hidden;
    border-radius: 0.1rem;
}

.progress-status-container.show-help {
    cursor: help;
}

.progress-status-container .progress-background {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 33;
    transition: all 0.3s;
    background-color: var(--orange-es);
    left: 0;
}

.progress-status-container .progress-status-content,
.progress-status-container .progress-status-percent {
    display: flex;
    min-width: 3rem;
    position: relative;
    z-index: 99;
}

.progress-status-container .progress-status-percent {
    width: 3.5rem;
    justify-content: center;
}

.progress-status-container .progress-status-content {
    align-items: center;
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #Testing
\*------------------------------------*/
/* #region */
/*  region */
.testrun-search {
    margin: 0 0 1.5rem 0;
    display: flex;
    align-items: center;
}

.testing-message {
    display: flex;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--orange-es);
    align-items: center;
    background-color: var(--light-grey-2);
    padding: 0.5rem 1rem;
}

.testing-message i {
    padding-right: 1rem;
    font-size: 2rem;
    color: var(--dark-orange-es);
}

.testrun-search i {
    font-size: 1.5rem;
    margin-right: 0.3rem;
    color: var(--light-orange-es);
}

.testrun-search input {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--light-grey-5);
    height: 2rem;
    padding: 0 0.4rem;
}

.testing-config-controls,
.testing-container {
    display: flex;
}

.testing-config-controls {
    margin: 0 0 1.7rem 0;
}

.testing-config-controls span {
    margin-right: 0.35rem;
    color: var(--light-grey-5);
    line-height: 2.2rem;
}

.testing-config-controls .drop-down-container-es {
    margin: 0 2rem 0 0;
    max-height: 2.1rem;
}

.testing-config-controls .drop-down-container-es:after {
    line-height: 2.3rem;
}

.testing-config-controls .drop-down-container-es .drop-down-es {
    line-height: 2.1rem;
    margin: 0;
    color: var(--dark-grey);
}

.testing-config-controls .btn-secondary-es {
    margin: 0 2rem 0 0;
}

.testing-config-controls .btn-secondary-es i {
    font-size: 1.4rem;
    padding-right: 0.4rem;
}

.testing-config-controls .btn-text {
    margin: 0 2rem 0 0;
    height: 2.1rem;
    width: 2.1rem;
    font-size: 1.4rem;
    border-radius: 50%;
    cursor: pointer;
    border: 0.1rem solid var(--orange-es);
    transition: all 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.testing-config-controls .btn-text i {
    margin-right: 0;
}

.testresult-container {
    position: relative;
}

.testresult-container .run-action-btn {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    color: var(--light-grey-5);
    font-size: 0.9rem;
    font-weight: 600;
    align-items: center;
    transition: all 0.2s;
}

.testresult-container .run-action-btn:hover,
.testresult-container .run-action-btn:hover i {
    color: var(--orange-es);
}

.testresult-container .run-action-btn i {
    font-size: 1.8rem;
    margin-right: 0.4rem;
    color: var(--orange-es);
    transition: all 0.2s;
}

.testing-container table {
    font-size: 0.9rem;
    border-spacing: 0;
    max-width: 60rem;
    width: 100%;
    table-layout: fixed;
}

.testing-container table table {
    width: 100%;
    table-layout: unset;
    padding-top: 0.5rem;
}

.testing-container table tr.even {
    background-color: var(--light-grey-2);
}

.testing-container table td {
    word-break: initial;
    padding: 0.75rem;
    vertical-align: middle;
    position: relative;
    text-align: left;
}

.testing-container table td:last-child {
    text-align: right;
    width: 3rem;
}

.testing-container table table td:last-child {
    text-align: left;
    width: auto;
}

.testing-container table td.testresult-input {
    padding-left: 5rem;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.1s;
}

.testing-container table td.testresult-input:hover {
    color: var(--orange-es);
}

.testing-container table td.testresult-input:hover i.doc,
.testing-container table .open td.testresult-input:hover i.doc {
    background-color: var(--orange-es);
}

.testing-container table .nopen td.testresult-input {
    font-weight: 400;
    pointer-events: none;
}

.testing-container table td.testresult-input i {
    color: var(--light-grey-5);
    font-size: 1.6rem;
    transition: background-color 0.3s;
    transform: rotate(-90deg);
    position: absolute;
    left: 0.5rem;
}

.testing-container table td.testresult-input i.doc,
.testing-container table .open td.testresult-input i.doc,
.testing-container table td.testresult-input i.error,
.testing-container table .open td.testresult-input i.error {
    left: 2.5rem;
    transform: rotate(0);
    width: 2rem;
    height: 2rem;
    font-size: 1.3rem;
    background-color: var(--light-grey-4);
    color: #fff;
    display: flex;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    top: 0.65rem;
}

.testing-container table td.testresult-input i.error,
.testing-container table .open td.testresult-input i.error {
    background-color: var(--dark-orange-es);
    font-size: 1.1rem;
    margin-top: -0.1rem;
    width: 1.8rem;
    height: 1.8rem;
    margin-left: 0.05rem;
}

.testing-container table .open td.testresult-input i {
    color: var(--light-orange-es);
    transform: rotate(0deg);
}

.testing-container table td[colspan]:not([colspan='1']) {
    padding-top: 0;
    border-top: 1px solid var(--light-grey-3);
    text-align: left;
}

.testing-container table table td {
    padding: 0.5rem 0 0.5rem 0.5rem;
}

.testing-container table table td:first-child {
    padding-left: 4rem;
    width: 4.25rem;
}

.testing-container table table td i {
    top: 50%;
    margin-top: -0.7rem;
    position: absolute;
    left: 2.1rem;
}

.testing-container table td span {
    font-weight: 600;
}

.testing-container table td span.result-error {
    display: flex;
    text-align: left;
    padding: 0.7rem 1rem 0.1rem 2.4rem;
    font-weight: 400;
}

.testing-container table td i {
    color: var(--green-es);
}

.testing-container table td li i {
    color: var(--dark-orange-es);
}

.testruns-container .btn-text {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--light-grey-5);
    padding: 0.1rem;
    padding-right: 2.9rem;
}

.testruns-container .btn-text:hover {
    color: var(--orange-es);
}

.testruns-container .btn-text i {
    font-size: 1.6rem;
    margin-right: 0.3rem;
    color: var(--orange-es);
    transition: all 0.2s;
}

.testrun-list {
    margin: 0 1rem 0 0;
    padding: 0 1.5rem 0 0;
    display: flex;
    width: 32rem;
    flex-flow: column;
    border-right: 0.15rem solid var(--light-orange-es);
    min-height: 20rem;
    position: relative;
}

.testrun-list .run-stats {
    display: flex;
    opacity: 0;
    transition: all 0.3s;
}

.testrun-list ul li:hover .run-stats,
.testrun-list ul li.active-run .run-stats {
    opacity: 1;
}

.testrun-list ul li:hover .run-stats span {
    color: var(--light-grey-5);
}

.testrun-list .run-stats span {
    display: flex;
    align-items: center;
    padding-right: 0.5rem;

    color: var(--light-grey-5);
}

.testrun-list .run-stats span i {
    font-size: 1.3rem;
    color: var(--dark-orange-es);
    padding-right: 0.2rem;
}

.testrun-list .run-stats span.run-ok i {
    color: var(--green-es);
}

.testrun-list .run-stats span:first-child i {
    color: var(--light-grey-5);
}

.testrun-list h3 {
    font-weight: 400;
    font-size: 1rem;
    color: var(--orange-es);
    background-color: var(--light-grey-2);
    padding: 0.8rem 1rem;
}

.testing-container .drop-down-container-es {
    margin: 0;
}

.testing-container .drop-down-es {
    min-height: 2rem;
    min-width: 17.4rem;
    color: var(--dark-grey);
}

.testing-container .drop-down-container-es:after {
    color: var(--dark-grey);
}

.testrun-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: auto;
    display: flex;
    flex-flow: column;
}

.testrun-list ul li {
    position: relative;
    padding: 0.6rem 0.3rem;
    cursor: pointer;
    transition: all 0.5s;
    display: flex;
    border-left: 0.3rem solid #fff;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 600;
}

.testrun-list ul li:nth-child(odd) {
    background-color: var(--light-grey-2);
}

.testrun-list ul li span,
.testmanager .testrun-list ul li i {
    transition: all 0.3s;
}

.view-action {
    opacity: 0;
    margin-left: -1.2rem;
    padding: 0 0.2rem;
    color: var(--orange-es);
    transition: all 0.3s;
}

.view-action i {
    font-size: 1.5rem;
    margin-right: 0.3rem;
    color: var(--light-grey-4);
}

li:hover .view-action,
.active-run .view-action {
    opacity: 1;
    margin-left: 0;
}

.testrun-list ul li.last-run {
    animation-name: intro;
    animation-duration: 0.7s;
}

@keyframes intro {
    from {
        opacity: 0;
        background-color: var(--orange-es);
        margin-top: -2rem;
    }
    to {
        opacity: 1;
        margin-top: 0;
    }
}

.testrun-list ul li:hover,
.testrun-list ul li.active-run {
    border-left: 0.3rem solid var(--orange-es);
}

.testrun-list ul li:hover span,
.testrun-list ul li.user-active span {
    color: var(--orange-es);
}

.testrun-list .run-title {
    margin-right: 4rem;
}

.testrun-list .run-actions {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    padding: 0.5rem 0;
    align-items: center;
}

.testrun-list .run-actions i {
    font-size: 1.5rem;
    margin-right: 0.3rem;
}

.testrun-list .run-actions span {
    display: flex;
}

/* #endregion */
/*  endregion */
/*------------------------------------*\
  #XDrive
\*------------------------------------*/
/* #region */
/*  region */
.xdrivemode {
    max-width: 768px;
}

.xdrivemode .sidebarcontainer-es,
.xdrivemode .footer-es,
.xdrivemode .header-es,
.content-only-logout,
.content-only-settings {
    display: none !important;
}

.xdrivemode .content-es {
    padding-top: 0;
}

.xdrivemode .content-only-logout,
.xdrivemode .content-only-settings {
    position: absolute;
    right: 2rem;
    top: 0.5rem;
    z-index: 555;
    padding: 0.175rem 0.7rem 0.1rem 0.7rem;
    display: block !important;
    font-size: 1.6rem;
}

.xdrivemode .content-only-settings {
    right: 6rem;
}

.content-only-menu {
    display: none;
}

.xdrivemode .content-only-menu {
    display: block;
}

.atomizer-xdrive-summary {
    display: none;
}

.xdrivemode .scrollToTop {
    display: none !important;
}

.state-showResults .atomizer-xdrive-summary {
    display: block;
}

.atomizer-xdrive-summary .summary-progress-section {
    padding: 1rem;
    margin: 0.8rem 0;
    background-color: var(--light-grey-2);

    position: relative;
    transition: all 0.3s;
    opacity: 0.3;
}

.atomizer-xdrive-summary .progress-active .summary-progress-section {
    opacity: 1;
    margin: 0.8rem 0;
}

.atomizer-xdrive-summary h3 {
    font-weight: 300;
    margin-bottom: 0.3rem;
    color: var(--light-grey-5);
    display: flex;
}

.atomizer-xdrive-summary h3 span {
    padding-top: 0.2rem;
}

.progress-section-content .xpact-icon {
    color: var(--orange-es);
    font-size: 2.1rem;
}

.atomizer-xdrive-summary p {
    font-weight: 500;
    font-size: 0.8rem;
    padding: 0.2rem 0;
    color: var(--light-grey-5);
}

.atomizer-xdrive-summary .progress-errors,
.final-errors {
    border: 1px solid var(--dark-orange-es);
    color: var(--dark-orange-es);
    font-weight: 500;
    font-size: 0.8rem;
    padding: 0.2rem;
    margin-top: 0.3rem;
    display: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.final-errors:hover,
.atomizer-xdrive-summary .progress-errors:hover {
    background-color: var(--dark-orange-es);
    color: #fff;
}

.atomizer-xdrive-summary .progress-errors.progress-errors-active {
    display: flex;
}

.atomizer-xdrive-summary .progress-errors i {
    font-size: 1.3rem;
    margin-right: 0.3rem;
}

.atomizer-xdrive-summary .progress-section-content {
    position: relative;
    z-index: 888;
}

.atomizer-xdrive-summary .progressbar {
    position: relative;
    width: 1%;
    opacity: 0;
    left: 0;
    bottom: 2%;
    height: 1rem;
    min-height: 1rem;
    display: inline-block;
    background-color: var(--orange-es);
    box-shadow: 0 0 0.2rem var(--light-grey-4);
    border-radius: 3px;
    transition: all 0.3s;
}

.atomizer-xdrive-summary .progress-active .summary-progress-section .progressbar {
    opacity: 1;
}

.atomizer-xdrive-summary .final-summary {
    box-shadow: 0 0 0.2rem var(--light-grey-4);
    opacity: 0;
    display: flex;
    padding: 1rem;
    margin-top: 2rem;
    transition: all 0.4s ease-in-out;
}

.atomizer-xdrive-summary .final-summary.display-final {
    opacity: 1;
    margin-top: 0;
}

.atomizer-xdrive-summary .final-summary h3 {
    color: var(--orange-es);
    font-weight: 600;
    font-size: 1.1rem;
}

.atomizer-xdrive-summary .final-summary .final-content {
    padding: 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--light-grey-5);
}

.atomizer-xdrive-summary .final-summary .final-content .final-text {
    margin-bottom: 0.2rem;
}

.atomizer-xdrive-summary .final-summary i {
    color: var(--orange-es);
    display: inline-block;
    font-size: 3rem;
}

.final-errors.display-error {
    display: flex;
}

.atomizer-xdrive-summary .final-errors i {
    font-size: 1.3rem;
    margin-right: 0.3rem;
    color: var(--dark-orange-es);
    transition: all 0.3s;
}

.atomizer-xdrive-summary .final-errors:hover i {
    color: #fff;
}

.final-hint-text {
    color: var(--dark-grey);
    padding-bottom: 0.3rem;
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #Link Styles
\*------------------------------------*/

/* #region */
/*  region */
a {
    color: var(--dark-grey);
    cursor: pointer;
    display: flex;
    text-decoration: none;
}

a:hover {
    color: var(--orange-es);
}

.footer-es a {
    color: var(--orange-es);
    display: inline;
}

.footer-es a:hover {
    color: var(--light-grey-5);
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #Button Styles
\*------------------------------------*/

/* #region */
/*  region */
.btn-es {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0.375rem 0.75rem;
    line-height: 1.4;
    box-shadow: 0 0 3pt 2pt transparent;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    cursor: pointer;
    border: none;
}

.btn-primary-es {
    color: #fff;
    background-color: var(--orange-es);
    box-shadow: 0 0 0 2pt var(--orange-es);
}

.btn-primary-es:hover {
    background-color: var(--dark-orange-es);
    color: white;
}

.btn-primary-es:active {
    background-color: var(--dark-orange-es);
    color: white;
    box-shadow: 0 0 0 2pt #c2dafc;
}

.btn-text {
    padding: 0.375rem 0.75rem;
    color: var(--orange-es);
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.btn-text i {
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    margin-right: 0.3rem;
}

.btn-secondary-es {
    background-color: var(--orange-es);
    border: 1px solid var(--orange-es);
    color: #fff;
    padding: 0.375rem 0.75rem;
    text-align: center;
    text-decoration: none;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    transition: all 0.3s;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-secondary-es i {
    color: #fff;
    font-size: 1.4rem;
    padding-right: 0.4rem;
    transition: all 0.3s;
}

.btn-secondary-es:hover i {
    color: var(--orange-es);
}

.btn-secondary-es.disabled {
    background-color: var(--light-grey-4);
    border: 1px solid var(--light-grey-4);
    cursor: default;
    pointer-events: none;
}

.btn-secondary-es.disabled:hover {
    background-color: var(--light-grey-4);
    border: 2px solid var(--light-grey-4);
    color: #fff;
}

.btn-secondary-es:hover {
    background-color: #fff;
    color: var(--orange-es);
}

.btn-secondary-es:disabled,
.btn-secondary-es:hover:disabled {
    display: none;
}

.icon-btn-es {
    border-radius: 0.2rem;
    line-height: 1.5;
}

.btn-es i.pretext-es {
    margin-right: 0.5rem;
    font-size: 1.5rem;
}

.btn-round,
.btn-round-text {
    font-size: 1.5rem;
    border: 1px solid var(--orange-es);
    border-radius: 50%;
    width: 2.1rem;
    height: 2.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-round {
    color: #fff;
    background-color: var(--orange-es);
}

.btn-round:hover {
    color: var(--orange-es);
    background-color: #fff;
}

.btn-round.disabled {
    pointer-events: none;
    background-color: var(--light-grey-4);
    border-color: var(--light-grey-4);
}

.btn-round-text {
    color: var(--orange-es);
}

.btn-round-text.disabled {
    pointer-events: none;
    color: var(--light-grey-4);
    border-color: var(--light-grey-4);
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #Images
\*------------------------------------*/

/* #region */
/*  region */

.img-presentation-es {
    width: 100%;
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #Content Upload
\*------------------------------------*/

/* #region */
/*  region */
.custom-file-input {
    opacity: 1;
}

.upload-es .drop-down-container-es {
    margin: 0 1.5rem 0.5rem 0;
}

.droparea-es {
    position: relative;
    width: 100%;
    min-height: 20rem;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0.2rem #c0c0c0;
}

.state-dragged .droparea-es {
    background-color: var(--light-grey-1);
}

.droparea-es input[type='file'] {
    opacity: 0;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    position: absolute;
    cursor: pointer;
}

.droparea-es .file-loader {
    display: none;
}

.state-dropped .upload-message {
    display: none;
}

.custom-upload-es {
    transition: all 0.4s;
    display: flex;
    height: 95%;
}

.custom-upload-es.busy {
    pointer-events: none;
    opacity: 0.5;
}

.state-dropped input[type='file'] {
    display: none;
}

.upload-message {
    color: var(--light-grey-5);
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.drop-message-icon-es i {
    margin-top: 0.3rem;
    position: relative;
    text-align: center;
    display: inline-block;
    color: var(--light-grey-4);
    transition: all 0.3s;
    line-height: 4rem;
    font-size: 7rem;
}

.state-dragged .upload-message {
    color: var(--orange-es);
}

.drop-message-text-es {
    margin-bottom: 2rem;
}

.state-dragged .drop-message-icon-es i,
.custom-upload-es:hover .drop-message-icon-es i {
    font-size: 9rem;
    color: var(--orange-es);
}

.state-dragged .drop-message-text-es,
.custom-upload-es:hover .drop-message-text-es {
    color: var(--light-grey-4);
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #Content Actionmenu
\*------------------------------------*/

/* #region */
/*  region */

.actionmenu-es-container {
    position: absolute;
    right: 1rem;
    top: 2.4rem;
}

.actionmenu-es {
    display: flex;
    flex-flow: column;
    position: relative;
    cursor: pointer;
    margin-bottom: 0.3rem;
}

.menuentry-es.hide-menu-entry {
    display: none;
}

.actionmenu-title-es {
    white-space: nowrap;
    display: flex;
    justify-items: center;
    align-items: center;
    padding: 0.3rem 0.5rem;
    background-color: var(--light-grey-2);
    border: 1px solid var(--orange-es);
    transition: all 0.3s;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
    font-weight: 400;
}

.actionmenu-title-es i {
    font-size: 1.5rem;
    padding-right: 0.4rem;
    color: var(--light-grey-5);
}

.actionmenu-es:hover .actionmenu-title-es,
.actionmenu-es:hover .actionmenu-title-es i {
    color: var(--orange-es);
    border-color: var(--orange-es);
}

.actionsubmenu-es {
    display: none;
    position: absolute;
    min-width: 100%;
    top: 100%;
    width: auto;
    right: 0;
    background-color: #fff;
    z-index: 999;
    box-shadow: 0 0.05rem 0.2rem var(--light-grey-4);
}

.actionmenu-es:hover .actionsubmenu-es {
    display: block;
}

.menuentry-es {
    display: flex;
    justify-items: center;
    align-items: center;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    color: var(--dark-grey);
    transition: all 0.3s;
}

.menuentry-es:hover,
.menuentry-es:hover i {
    color: var(--orange-es);
    transition: all 0.3s;
}

.menuentries-disabled .menuentry-es,
.menuentries-disabled .menuentry-es i,
.menuentries-disabled .menuentry-es:hover,
.menuentries-disabled .menuentry-es:hover i {
    cursor: default;
    color: var(--light-grey-4);
}

.menuentry-es span {
    white-space: nowrap;
    font-weight: 500;
    font-size: 0.9rem;
}

.menuentry-es i {
    color: var(--light-grey-5);
    padding-right: 0.4rem;
    font-size: 1.5rem;
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #Content Readtable 
\*------------------------------------*/

/* #region */
/*  region */


.readtable h4:not(.control-label) {
    font-weight: 500;
    font-size: 1rem;
    padding: 2rem 0.8rem 0.5rem 0.8rem;
    margin: 0;
    color: var(--orange-es);
    border-bottom: 1px solid var(--light-orange-es);
}


.training-table-controls i,
.training-container .grid-input .icon-content {
    pointer-events: visible;
    cursor: help;
}


.training-container .term-item i {
    cursor: pointer;
    color: #fff;
}



.readtable table {
    font-size: 0.9rem;
    border-spacing: 0;
    min-width: 100%;
    table-layout: fixed;
}

.subtable-container {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.readtable-subtable {
    margin-top: 2rem;
}

.readtable table.readtable-subtable td:not(.address-container),
.readtable table.readtable-subtable th {
    text-align: left;
    vertical-align: text-top;
}

.readtable-subtable th {
    padding: 0 0.7rem;
}

.readtable table tr {
    transition: all 0.3s ease;
}

.readtable table tr:nth-child(even){
    background: var(--light-grey-2);
}

.readtable table tr:nth-child(odd),
.readtable.editable table tr:nth-child(even) {
    background: #fff;
}

.readtable table tr td:not(.address-container),
.gridtable table tr td {
    vertical-align: center;
    padding: 0.75rem;
    word-break: break-word;
}

.readtable table.case-detail-file-sub tr td:not(.address-container) {
    padding: unset !important;
}

.readtable table.training-table tr td.address-container,
.readtable table.readtable-subtable td.address-container {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 10px;
    padding: 0.75rem;
}

.readtable table tr td.address-container i {
    cursor: pointer;
}

.readtable table tr td.address-container:hover i {
    color: var(--orange-es);
}

.readtable table tr td div.multiline-container h4 {
    font-weight: 500;
    padding: 0;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    margin: 0;
    font-family: Segoe UI, sans-serif;
    font-size: 0.9rem;
    border-bottom: none;
    color: var(--dark-grey);
}

.readtable table.training-table tr td div.multiline-container {
    padding: unset;
}

.readtable table tr td:first-child {
    font-weight: 500;
    word-break: break-word;
    vertical-align: text-top;
}

td.aon-style,
td div.aon-style {
    width: 16rem !important;
}

.multivalue-row {
    color: var(--dark-grey);
}

.multivalue-row table td {
    background-color: #fff;
    border: 1px solid var(--light-grey-3);
    width: 50%;
    font-weight: 400 !important;
}

.multivalue-row td:first-child {
    vertical-align: middle !important;
}

.multivalue-row td table td.address-container {
    width: unset !important;
}

td.address-container.aon-table-style {
    max-width: 18rem;
}

table tr i {
    font-size: 1.4rem;
    color: var(--light-grey-4);
}

table tr i.check_circle {
    color: var(--green-es);
}

table tr i.error,
table tr i.settings {
    color: var(--dark-orange-es);
}

table tr i.hourglass_empty,
table tr i.help {
    color: var(--light-orange-es);
}

table.case-detail-overview span {
    display: flex;
    align-items: center;
}

table.case-detail-overview span i {
    font-size: 1.4rem;
}

table.case-detail-overview span i {
    margin-right: 0.3rem;
}

.grid-disabled-mask.active {
    display: block;
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #Content Dashboard
\*------------------------------------*/

/* #region */
/*  region */

.dashboard-container {
    display: flex;
    flex-wrap: wrap;
}

.dashboard-container .dashboard-card {
    box-shadow: 0 0 0.2rem var(--light-grey-4);
    margin-right: 1.5rem;
    margin-bottom: 1.5rem;
}

.dashboard-card h4 {
    font-weight: 600;
    color: var(--light-grey-5);
    padding: 0 1rem 0.6rem 1rem;
    font-size: 0.9rem;
}

.dashboard-metric-container {
    position: relative;
}

.dashboard-metric-info {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -0.9rem;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 600;
    pointer-events: none;
}

.dashboard-container .dashboard-metrics canvas {
    min-width: 20rem;
}

.dashboard-container .dashboard-card h3 {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
    font-size: 1.1rem;
    border-bottom: 0.15rem solid var(--light-orange-es);
    color: var(--light-grey-5);
    padding: 0 1rem;
    line-height: 3rem;
}

.dashboard-card td {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.dashboard-card .info-label {
    color: var(--dark-grey);
    font-size: 0.9rem;
}

.dashboard-card a {
    display: inline-block;
    color: var(--orange-es);
}

.dashboard-card tr:nth-child(even) {
    background: #fff;
}

.dashboard-card tr:nth-child(odd) {
    background: var(--light-grey-1);
}

.dashboard-card table {
    border-spacing: 0;
    margin: 0;
    min-width: 100%;
    margin-bottom: 0.8rem;
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #Form Styles
\*------------------------------------*/

/* #region */
/*  region */
.form-container-es {
    flex-direction: row;
    background-color: white;
    color: var(--dark-grey);
    padding: 2.5rem 5rem 2.5rem 2.5rem;
    transition: all 0.3s;
    margin: 4rem;
    position: relative;
    max-width: 100%;
}

.form-es {
    display: flex;
    flex-direction: column;
    margin: 0 0 1rem 0;
    transition: all 0.3s;
}

.form-container-es img {
    width: 18rem;
    margin: 0 0 1rem 0;
}

.form-group-es {
    display: flex;
    align-items: flex-end;
}

.form-group-es i {
    margin: 0 0.55rem 0.2rem 0;
    font-size: 1.3rem;
    padding-bottom: 0.35rem;
    cursor: pointer;
}

.form-sub-es {
    font-size: 0.75rem;
    color: var(--orange-es);
    margin: 0.15rem 0 1rem 0;
    text-align: right;
}

.login-version {
    font-size: 0.8rem;
    color: var(--light-grey-5);
    position: absolute;
    bottom: 0.3rem;
    right: 0.5rem;
}

.logincheck-container {
    position: relative;
}

.next-btn i {
    margin-top: 0.35rem;
}

.next-btn {
    position: absolute;
    top: 1.5rem;
    right: -3.2rem;
    font-size: 1.7rem;
    border-radius: 50%;
    display: flex;
    text-align: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    justify-content: center;
    background-color: var(--orange-es);
    color: #fff;
    border: 1px solid var(--orange-es);
    transition: all 0.2s;
}

.next-btn.decent {
    background-color: var(--light-grey-3);
    border-color: var(--light-grey-3);
    color: var(--light-grey-5);
}

.next-btn:hover,
.next-btn.decent:hover {
    background: #fff;
    border-color: var(--orange-es);
    color: var(--orange-es);
}

.expired-message {
    position: absolute;
    width: calc(100% - 0.6rem);
    background-color: var(--dark-orange-es);
    bottom: 100%;
    color: #fff;
    text-align: center;
    font-size: 0.9rem;
    padding: 0.6rem 0.3rem;
    left: 0;
    animation-name: fadeIn;
    animation-duration: 0.3s;
}

.shake-in {
    animation-name: headShake;
    animation-duration: 0.7s;
}

a.form-sub-es:hover {
    color: var(--dark-grey);
}

.floating-label-container-es {
    position: relative;
    padding: 1rem 0 0.1rem 0;
    width: 100%;
    margin-top: 0.3rem;
}

.floating-label-container-es input {
    border: none;
    width: 100%;
    border-bottom: 1px solid var(--light-grey-4);
    outline: 0;
    background: none;
    text-indent: 0.5rem;
    padding: 0.5rem 0;
}

.floating-label-container-es span {
    font-size: 0.9rem;
}

.floating-label-container-es .focus-border-es {
    position: absolute;
    bottom: 1px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--orange-es);
    transition: 0.2s;
}

.floating-label-container-es.active-es .focus-border-es {
    width: 100%;
}

.floating-input-container .grid-input {
    display: flex;
    align-items: baseline;
    position: relative;
    margin-right: 2rem;
    width: 100%;
}

.floating-input-container .drop-down-es {
    opacity: 0;
}

.floating-input-container.focused .drop-down-es {
    opacity: 1;
}

.suggestionbox-container {
    min-width: 100%;
}

.suggestionbox-container .floating-input-container i {
    pointer-events: none;
}

.ac-training-offcanvas .suggestionbox-container {
    min-width: 0;
}

.suggestionbox-container .floating-input-container .grid-input input {
    min-width: calc(100% - 2rem);
    padding-right: 2rem;
}

.suggestionbox-container .floating-input-container .grid-input {
    margin-right: 1rem;
    min-width: calc(100% - 0.6rem);
}

.ac-training-offcanvas .suggestionbox-container .floating-input-container .grid-input {
    min-width: 0;
    width: auto;
    padding-bottom: 0.5rem;
}

.floating-input-container .grid-input input {
    height: 2.1rem;
    min-width: 18.5rem;
    padding: 0.1rem 0.4rem;
    width: 100%;
    border: 1px solid var(--light-grey-4);
}

.floating-input-container .grid-input span {
    font-weight: 600;
    font-size: 0.8rem;
    position: absolute;
    top: 0.95rem;
    left: 0.6rem;
    color: var(--light-grey-5);
    transition: all 0.2s;
    pointer-events: none;
}

.floating-input-container .drop-down-container-es span {
    font-size: 0.8rem;
    position: absolute;
    top: 0.5rem;
    left: 1rem;
    color: var(--light-grey-5);
    transition: all 0.2s;
    font-weight: 600;
}

.floating-input-container {
    display: flex;
}

.floating-input-container.disabled {
    pointer-events: none;
}

.dirty .floating-input-container input {
    border-color: var(--light-orange-es);
}

.suggestionbox-container .term-container {
    padding: 0.3rem 0;
}

.suggestionbox-container .term-container .term-item {
    cursor: default;
}

.suggestionbox-container .term-container .term-item.isnegative {
    color: var(--dark-orange-es);
    font-weight: 600;
}

.suggestionbox-container .term-container .term-item:hover {
    border-color: var(--light-grey-4);
}

.suggestionbox-container .term-container .term-item:hover i {
    background-color: var(--light-grey-4);
}

.suggestionbox-container .term-container .term-item i:hover {
    background-color: var(--orange-es);
}

.suggestion-container {
    position: absolute;
    flex-flow: column;
    top: 0;
    left: 0;
    background-color: var(--light-grey-2);
    z-index: 9599;
    align-items: start;
    width: calc(100% + 0.55rem);
    margin: 2.1rem 0 0 0;
    border: 1px solid var(--light-grey-4);
    border-top: none;
    box-shadow: 0 0.15rem 0.1em var(--light-grey-3);
    transition: all 0.2s;
    overflow-y: auto;
    max-height: 25rem;
    box-sizing: border-box;
    opacity: 0;
    visibility: collapse;
    display: none;
}

.open .suggestion-container {
    visibility: visible;
    opacity: 1;
    display: flex;
}

.suggestion-container .combobox-suggestion {
    display: flex;
    flex-flow: column;
    align-items: start;
    width: 100%;
    margin: 0;
    padding: 0.4rem 0;
    text-indent: 0.5rem;
    color: var(--light-grey-5);
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
}

.suggestion-container .combobox-suggestion:nth-child(even) {
    background: #fff;
}

.suggestion-container .combobox-suggestion.selected,
.suggestion-container .combobox-suggestion:hover {
    background-color: var(--orange-es);
    color: #fff;
}

.floating-input-container.focused .grid-input span {
    transform-origin: left;
    font-weight: 600;
    top: -1.1rem;
}

.floating-input-container.focused .drop-down-container-es span {
    transform-origin: left;
    color: var(--light-grey-5);
    top: -1.4rem;
    left: 0.5rem;
    opacity: 1;
    visibility: visible;
}

.floating-label-container-es label {
    color: var(--light-grey-5);
    position: absolute;
    margin: 0.5rem 0 0 0.5rem;
    transition: all 0.2s;
    cursor: text;
}

.floating-label-container-es.active-es label {
    transform: scale(0.7);
    transform-origin: left;
    margin: -1.15rem 0 0 0.4rem;
    color: var(--orange-es);
}

.form-es button {
    margin: 0 2px 0 2px;
}

option {
    background-color: white;
    color: var(--dark-grey);
}

.drop-down-es {
    min-height: 2rem;
    font-size: 0.9rem;
    padding-right: 3rem;
    padding-left: 0.5rem;
    color: var(--orange-es);
    background-color: var(--light-grey-2);
    border: none;
    cursor: pointer;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    line-height: 2.2rem;
    min-width: 100%;
}

.toggle-password-es {
    top: 1rem;
    right: -0.575rem;
    padding: 0.7rem;
    background-color: #fff;
    display: flex;
    align-items: center;
    color: var(--light-grey-5);
}

i.toggle-password-es {
    position: absolute;
    top: 1rem;
    right: -0.575rem;
    padding: 0 0.7rem;
    margin-top: 0.7rem;
    background-color: #fff;
    display: flex;
    align-items: center;
    color: var(--light-grey-5);
}

.switch-control-es {
    display: flex;
    width: auto;
    cursor: pointer;
    position: absolute;
    top: 1.4rem;
    left: 10.5rem;
}

.switch-control-es .switch-indicator-container {
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--light-grey-3);
    position: relative;
    transition: all 0.3s;
}

.switch-control-es .switch-indicator-container:before,
.switch-control-es .switch-indicator-container:after {
    content: '';
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    background-color: var(--light-grey-3);
    top: 0;
    border-radius: 50%;
    transition: all 0.3s;
}

.switch-control-es .switch-indicator-container:before {
    left: -0.75rem;
}

.switch-control-es .switch-indicator-container:after {
    right: -0.75rem;
}

.switch-control-es .switch-indicator {
    background-color: var(--light-grey-4);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    position: absolute;
    z-index: 333;
    transition: all 0.3s;
}

.switch-control-es.active-es .switch-indicator {
    left: 0.75rem;
    background-color: var(--orange-es);
}

.switch-control-es.inactive-es .switch-indicator {
    left: -0.75rem;
}

.switch-control-es .switch-label {
    font-weight: 700;
    line-height: 1.5rem;
    font-size: 0.9rem;
    margin-left: 1.3rem;
    transition: all 0.3s;
    min-width: 6rem;
    color: var(--orange-es);
}

.switch-control-es.inactive-es .switch-label {
    color: var(--light-grey-5);
}

.validation-error-es {
    /* display: none; */
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dark-orange-es);
    max-width: 16.2rem;
    width: 100%;
    margin-left: 1.9rem;
    padding: 0.3rem 0;
    transition: all 0.3s;
}

.invalid-es .validation-error-es {
    opacity: 1;
    display: block;
}

.invalid-es .floating-label-container-es input {
    border-bottom: 1px solid var(--dark-orange-es);
}

.invalid-es .floating-label-container-es .focus-border-es {
    background-color: var(--dark-orange-es);
}

.formvalidation-error-es {
    color: var(--dark-orange-es);
    font-size: 0.8rem;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    display: flex;
    overflow: hidden;
    max-height: 0;
}

.formvalidation-error-es i {
    font-size: 2rem;
    margin-right: 0.5rem;
}

.formvalidation-error-es.has-error-es {
    display: flex;
    margin: 0.3rem 0.3rem 1rem 0.3rem;
    max-height: 50rem;
}

.grid-edit .drop-down-container-es {
    margin: 0;
}

.drop-down-es:focus {
    outline: none;
    box-shadow: 0 0 0.1rem var(--light-grey-4);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

:-webkit-autofill {
    animation-name: onAutoFillStart;
}

/* DON'T REMOVE EMPTY ANIMATIONS - JS ANIMATION EVENT BINDING */
@keyframes onAutoFillStart {
    from {
    }
    to {
    }
}

@keyframes onAutoFillCancel {
    from {
    }
    to {
    }
}
 
.checkbox-container, .checkbox-title {
    display: flex;
    align-items: center;
    min-width: 2.7rem;
    margin: 0.2rem 0.2rem;
}

.checkbox-container {
    display: flex;
    cursor: pointer;
}

.checkbox-label {
    display: block;
    cursor: pointer;
    position: relative;
    font-size: 22px;
    line-height: 24px;
    height: 24px;
    width: 24px;
    clear: both;
}

.checkbox-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox-title {
    font-size: 0.9rem;
}

.checkbox-label .checkbox-custom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.1rem;
    width: 1.1rem;
    background-color: transparent;
    border-radius: 50%;
    transition: all 0.3s ease-out;
    border: 2px solid var(--light-grey-4);
}

.checkbox-label:hover .checkbox-custom {
    border-color: var(--light-orange-es);
}

.checkbox-label.lad-checked .checkbox-custom,
.checkbox-label.checkbox-checked .checkbox-custom {
    opacity: 1;
    border-color: var(--light-orange-es);
}

.checkbox-label .checkbox-custom::after {
    font-family: 'Material Icons', sans-serif;
    display: flex;
    content: '';
    font-size: 0.9rem;
    opacity: 1;
    transition: all 0.3s ease-out;
}

.checkbox-label.checkbox-checked .checkbox-custom::after,
.checkbox-label.lad-checked .checkbox-custom::after {
    opacity: 1;
    content: 'check';
    color: var(--orange-es);
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #Helper Styles
\*------------------------------------*/

/* #region */
/*  region */
.userhelpicon-es {
    transition: all 0.3s;
}

.userhelpicon-es.state-helpericon-active {
    display: block;
}

.userhelpicon-icon-es {
    width: 2.6rem;
    border: 1px solid var(--orange-es);
    height: 2.6rem;
    font-size: 1.4rem;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 2.7rem;
    cursor: pointer;
    background-color: var(--orange-es);
    margin-right: 1rem;
}

.userhelpicon-icon-es:hover {
    color: #fff;
    background: var(--dark-orange-es);
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #Training Styles
\*------------------------------------*/

/* #region */
.term-container {
    padding: 0.3rem 0.3rem 0.3rem 0.3rem;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    max-width: 100%;
}

.definition-container.chaplet .term-container {
    padding-left: 0;
}

.definition-container.chaplet .term-item {
    margin-bottom: 0.25rem;
    margin-top: 0.25rem;
}

.definition-container.chaplet .term-input {
    margin-bottom: 0.25rem;
    margin-top: 0.25rem;
}
.table-definitions .term-controls {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    display: flex;
    justify-items: center;
    align-items: center;
    padding: 0 0.3rem;
    cursor: default;
    background-color: var(--light-grey-2);
}

.table-definitions .term-controls i {
    background-color: #fff;
    color: var(--orange-es);
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-top: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.table-definitions .term-controls i:first-child {
    margin-top: 0;
}

.table-definitions .term-controls i:hover {
    background-color: var(--orange-es);
    color: #fff;
}

.term-delete {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    display: flex;
    justify-items: center;
    align-items: center;
    padding: 0 0.3rem;
    cursor: pointer;
    background-color: var(--light-grey-2);
    transition: all 0.3s;
}

.add-mode .term-delete {
    display: none;
}

.term-delete i {
    background-color: #fff;
    color: var(--orange-es);
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-top: 0.3rem;
}

.term-delete:hover {
    background-color: var(--orange-es);
    color: #fff;
}

.training-container-es .drop-down-container-es {
    margin-top: 0;
}

.term-item {
    border: 1px solid var(--light-grey-4);
    border-radius: 0.3rem;
    margin-right: 0.5rem;
    cursor: pointer;
    color: var(--dark-grey);
    font-size: 0.9rem;
    font-weight: 400;
    position: relative;
    padding: 0.2rem 1.7rem 0.2rem 0.5rem;
    margin-bottom: 0.5rem;
    transition: all 0.3s;
    background: #fff;
    white-space: normal;
}

.term-item span {
    display: flex;
    text-align: left;
    word-break: break-all;
}

.term-item.changed {
    border-color: var(--dark-orange-es);
}

.term-item.changed i {
    background-color: var(--dark-orange-es);
}

.term-item.changed input {
    color: var(--dark-orange-es);
}

.term-item.inactive {
    border-color: var(--light-grey-3);
}

.term-item.inactive i {
    background-color: var(--light-grey-4);
}

.term-item .term-actions {
    width: 0;
    right: auto;
    left: 0;
    top: 0;
    position: absolute;
    height: 100%;
    transition: all 0.3s;
    overflow: hidden;
    display: none;
}

.term-item .term-size {
    visibility: hidden;
    height: 1px;
    overflow: hidden;
    display: block;
}

.term-item:hover .term-actions {
    width: auto;
    display: flex;
    display: none;
}

.term-item .term-actions i {
    position: relative;
    border-right: 1px solid #fff;
    padding: 0 0.05rem;
}

.term-item .term-actions i.icon-xpact-circle_uncheck {
    background-color: var(--light-grey-4);
}

.term-item input {
    border: none;
    min-width: 0;
    display: flex;
    padding: 0;
    width: 100%;
}

.term-item.dragged {
    opacity: 0.35;
}

.term-item.dragged-over {
    margin-right: 5rem;
}

.term-item.dragged-over:after {
    content: '';
    display: block;
    width: 5rem;
    height: 28px;
    position: absolute;
    right: -5rem;
    top: 0;
}

.term-item i,
.training-container-es .grid-input .term-item i {
    right: 0;
    background-color: var(--light-grey-4);
    height: 100%;
    top: 0;
    color: #fff;
    font-size: 1.2rem;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(0);
    margin-right: 0;
    transition: all 0.3s;
    position: absolute;
    pointer-events: auto;
}

.term-item:hover {
    border: 1px solid var(--orange-es);
}

.term-item.inactive:hover {
    border-color: var(--light-grey-4);
}

.term-item:hover i,
.training-container-es .grid-input .term-item:hover i {
    background-color: var(--orange-es);
}

.definition-container .term-item.inactive:hover i {
    background-color: var(--light-grey-4);
}

.definition-container .term-input {
    outline: none;
    border: none;
    margin-bottom: 0.5rem;
    min-width: 17rem;
    background-color: transparent;
}

.definition-container.add-mode .term-input::placeholder,
.definition-container.add-mode .term-input[placeholder],
.training-table-controls .definition-set-add input,
.training-table-controls .definition-set-add input::placeholder,
.training-table-controls .definition-set-add input[placebolder] {
    opacity: 1;
}

/*  endregion */

/*------------------------------------*\
  #Admin Styles
\*------------------------------------*/

/* #region */
/*  region */
fieldset {
    padding: 1rem 1rem 0 1rem;
    border: 1px solid var(--light-grey-2);
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    min-height: 4rem;
}

.edit-action {
    opacity: 0;
    margin-left: -1.2rem;
    padding: 0 0.2rem;
    color: var(--orange-es);
    transition: all 0.3s;
}

li:hover .edit-action,
.user-active .edit-action,
.active-section .edit-action {
    opacity: 1;
    margin-left: 0;
}

.config-control-container .loader-es {
    transform: scale(0.7);
    /* position: absolute; */
    left: -2.8rem;
    top: 0.4rem;
    text-align: center;
    transition: all 0.3s;
    opacity: 0;
    z-index: 8888888;
}

.config-control-container .run-action.loader-es {
    opacity: 1;
    transform: scale(0.7);
}

.admin-container i {
    font-size: 1.5rem;
    margin-right: 0.3rem;
    color: var(--light-grey-4);
}

.admin-container .messagebox-title i {
    color: #fff;
}

.suggested-action-btn i {
    color: var(--dark-grey);
}

.suggested-action-btn i:hover {
    color: var(--orange-es);
}

.context-menu-container {
    position: absolute;
    z-index: 9989;
    display: none;
    box-shadow: 0 0.05rem 0.2rem var(--light-grey-4);
}

.context-menu-container.menu-active {
    display: block;
}

.context-menu-container .context-menu {
    position: absolute;
    background-color: var(--light-grey-1);
    z-index: 5555555;
    box-shadow: 0 0.05rem 0.2rem var(--light-grey-4);
    padding: 0.25rem 0;
}

.context-menu-container .context-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.context-menu-container .context-menu ul li span {
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-size: 0.9rem;
    color: var(--light-grey-5);
}

.context-menu-container .context-menu ul li span:first-child {
    font-size: 1rem;
    color: var(--dark-grey);
}

.context-menu-container .context-menu ul li {
    position: relative;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    padding-right: 2.5rem;
    white-space: nowrap;
}

.context-menu-container .context-menu ul li div {
    display: flex;
    flex-flow: column;
    justify-content: center;
}

.context-menu-container .context-menu ul li div:after {
    content: 'chevron_right';
    font-family: 'Material Icons', sans-serif;
    font-size: 1.5rem;
    position: absolute;
    right: 0.5rem;
}

.context-menu-container .context-menu ul li ul {
    position: absolute;
    left: 100%;
    min-width: 8rem;
    background-color: #fff;
    border: 1px solid var(--light-grey-2);
    z-index: auto;
    top: -0.1rem;
    display: none;
}

.context-menu-container .context-menu ul li ul li span:first-child {
    font-family: Consolas, monospace !important;
}

.context-menu-container .context-menu ul li:hover ul {
    display: block;
}

.context-menu-container .context-menu ul li:hover div span,
.context-menu-container .context-menu ul li ul li:hover span {
    color: var(--orange-es);
}

.ruleEditor-container-es .ruleEditor {
    border: 1px solid var(--light-orange-es);
    padding: 1rem 0 0;
    position: relative;
    margin-bottom: 1rem;
    overflow-x: visible;
    overflow-y: hidden;
    max-width: 100%;
}

.ruleEditor-container-es .ruleEditor-controls {
    display: flex;
    align-items: center;
    justify-content: left;
}

.ruleEditor-container-es .ruleEditor-controls.sticky {
    position: fixed;
    bottom: 0;
    z-index: 99;
    left: 0;
    padding: 0.5rem 3.5rem 0.5rem 1rem;
    box-shadow: 0.1rem -0.1rem 0.1rem var(--light-grey-3);
    background-color: #fff;
}

.ruleEditor-container-es .rule-validation-indicator {
    font-size: 2rem;
    position: absolute;
    left: 6rem;
    padding-top: 0.3rem;
}

.ruleEditor-container-es .sticky .rule-validation-indicator {
    left: 7rem;
}

.ruleEditor-container-es .rule-validation-indicator i {
    padding-top: 0.1rem;
    padding-left: 0.7rem;
}

.ruleEditor-container-es .rule-validation-indicator .ruleEditor-invalid {
    color: var(--dark-orange-es);
}

.ruleEditor-container-es .rule-validation-indicator .ruleEditor-valid {
    color: var(--light-grey-4);
}

.ruleEditor-container-es .btn-secondary-es,
.config-control-container .btn-secondary-es {
    max-width: 12rem;
    cursor: pointer;
    margin-top: 0;
}

.ruleEditor-container-es .btn-secondary-es.disabled {
    cursor: default;
}

.config-control-container .btn-secondary-es.disabled {
    cursor: default;
    pointer-events: none;
}

.ruleEditor-container-es .ruleEditor textarea {
    opacity: 0;
}

.ruleEditor-container-es .ruleEditor .CodeMirror-scroll {
    overflow: hidden !important;
}

.ruleEditor-container-es .ruleEditor:before {
    position: absolute;
    content: '';
    background-color: var(--light-orange-es);
    width: 32px;
    left: 0;
    height: 100%;
    top: 0;
    border-right: 27px solid var(--light-grey-1);
}

.CodeMirror {
    color: var(--dark-grey);
    position: relative;

    padding-right: 20px;
}

.CodeMirror pre.CodeMirror-line .cm-whitespace,
.CodeMirror pre.CodeMirror-line-like .cm-whitespace {
    text-indent: 0;
}

.configmanager-container-es .CodeMirror {
    opacity: 1;
}

.ruleEditor {
    min-height: 17rem;
    flex-shrink: 0;
}

.configmanager-container-es .ruleEditor-container-es {
    display: flex;
    flex-flow: column;
    max-width: 100%;
}

.configmanager-container-es .grid-textinput.invalid {
    grid-template-columns: auto 40px;
    border: 1px solid var(--dark-orange-es) !important;
}

.configmanager-container-es .grid-textinput {
    height: auto;
    min-height: 2.1rem;
    width: 27rem;
}

.configmanager-container-es textarea.grid-textinput {
    height: 10rem;
    overflow-y: visible;
    resize: none;
}

.configmanager-container-es .messagebox-title i {
    background-color: #fff;
    border-radius: 50%;
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.7rem;
    color: var(--orange-es);
}

.config-control-container {
    display: flex;
    margin-top: 1rem;
    position: relative;
}

.configmanager-container-es .selected-section-title {
    padding: 0.6rem 0.7rem 0.6rem 0;
    color: var(--orange-es);
    font-weight: 600;
    font-size: 1.1rem;
}

.configmanager-container-es .window-button.disabled {
    background-color: var(--light-grey-4);
    border: 1px solid var(--light-grey-4);
    cursor: default;
    color: #fff;
    pointer-events: none;
}

.configmanager-container-es .config-control-container a {
    margin-right: 1rem;
}

.configmanager-container-es .cm-s-default .cm-string-2 {
    color: #000;
}

.CodeMirror i {
    font-size: 1.3rem;
    color: var(--dark-orange-es);
    margin: 0 0.3rem;
    text-indent: 30px;
}

.CodeMirror .CodeMirror-scroll {
    padding-left: 30px
}

.CodeMirror-hints:hover .CodeMirror-hint {
    background: unset;
    color: black;
}

.CodeMirror-hints:hover .CodeMirror-hint .rulehint-termhint {
    color: var(--light-grey-5);
}

.CodeMirror-hints:hover .CodeMirror-hint:hover .rulehint-termhint {
    color: white;
}

.CodeMirror-hints:hover .CodeMirror-hint:hover {
    background: var(--orange-es);
    color: white;
}

.CodeMirror-hint .rulehint-termhint {
    color: var(--light-grey-5);
    padding-left: 0.4rem;
}

.CodeMirror-hints .rulehint-termhint {
    color: var(--light-grey-5);
}

.CodeMirror-gutter-elt {
    left: auto !important;
}

.active-es .CodeMirror {
    opacity: 1;
}

.active-es.disabled .CodeMirror {
    opacity: 0.5;
    pointer-events: none;
}

.error-text-highlight {
    background-color: rgba(199, 80, 0, 0.35);
}

.CodeMirror .CodeMirror-hscrollbar {
    left: -2px !important;
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #Errormessage Styles
\*------------------------------------*/

/* #region */
/*  region */
.error-message-es {
    width: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
    flex-wrap: wrap;
}

.error-message-es.state-error-active {
    display: flex;
}

.error-message-icon-es {
    color: var(--orange-es);
    font-size: 2rem;
    padding-right: 0.5rem;
}

.error-message-content-es {
    font-weight: 700;
}

.error-message-es .btn-es {
    margin-top: 1.2rem;
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #Loader Styles
\*------------------------------------*/

/* #region */
/*  region */
.loader-ex {
    position: fixed;
    width: auto;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    top: 0;
    z-index: 9999;
    background-color: rgba(255, 255, 255, 0.8);
}

.loader-ex.state-loader-active {
    display: flex;
}

.loader-ex.active-center {
    display: flex;
    width: 100%;
}

.busy-loader {
    width: 48px;
    height: 48px;
    border: 3px solid var(--light-grey-2);
    border-bottom-color: var(--light-grey-4);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: busy-loader-animation .7s linear infinite;
}

@keyframes busy-loader-animation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.spinner {
    width: 40px;
    height: 40px;
    position: relative;
}

.cube1,
.cube2 {
    background-color: var(--light-grey-1);
    border: 1px solid var(--light-grey-4);
    width: 15px;
    height: 15px;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
    animation: sk-cubemove 1.8s infinite ease-in-out;
}

.cube2 {
    background-color: var(--light-grey-1);
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

@-webkit-keyframes sk-cubemove {
    25% {
        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    }
    50% {
        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    }
    75% {
        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    }
    100% {
        -webkit-transform: rotate(-360deg);
    }
}

@keyframes sk-cubemove {
    25% {
        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
        transform: translateX(42px) rotate(-90deg) scale(0.5);
    }
    50% {
        -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
        transform: translateX(42px) translateY(42px) rotate(-179deg);
    }
    50.1% {
        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
        transform: translateX(42px) translateY(42px) rotate(-180deg);
    }
    75% {
        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
        transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    }
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #Microloader Styles
\*------------------------------------*/

/* #region */
/*  region */

.microloader-es .loadingtext {
    text-align: left;
    font-weight: 500;
    font-size: 0.8rem;
}

.micro-spinner {
    width: 50px;
    height: 40px;
    text-align: center;
    transform: scale(0.7);
}

.micro-spinner > div {
    background-color: var(--orange-es);
    height: 100%;
    width: 6px;
    margin-left: 3px;
    display: inline-block;

    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.micro-spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.micro-spinner .rect3 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

.micro-spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.micro-spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
    0%,
    40%,
    100% {
        -webkit-transform: scaleY(0.4);
    }
    20% {
        -webkit-transform: scaleY(1);
    }
}

@keyframes sk-stretchdelay {
    0%,
    40%,
    100% {
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0.4);
    }
    20% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #Table Styles
\*------------------------------------*/

/* #region */
/*  region */

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
    border-spacing: 0 !important;
    border-collapse: collapse;
}

.table thead th {
    color: var(--orange-es);
    vertical-align: bottom;
    border-bottom: 2px solid var(--orange-es);
    background: var(--light-grey-1);
    text-align: left;
    font-weight: 500;
}

.table > tbody > tr {
    border-bottom: 2rem solid #fff;
}

.table thead th:last-child {
    text-align: center;
}

.table td,
.table th {
    padding: 1.4rem;
    font-size: 0.9rem;
    vertical-align: top;
}

.table td i {
    font-size: 1.4rem;
    color: var(--orange-es);
}

.table-borderless,
.table-borderless table {
    border-spacing: 0;
    box-shadow: 0 0 0.2rem var(--light-grey-4);
}

.table-borderless table {
    box-shadow: none;
    border: 1px solid var(--light-grey-2);
}

.table td:last-child {
    padding: 0.75rem;
}

.table .table-borderless td {
    vertical-align: bottom;
    padding: 0.75rem;
}

.table-borderless tbody td:last-child {
    border: none;
}

.table-borderless tr:nth-child(even) {
    background: #fff;
}

.table-borderless tr:nth-child(odd) {
    background: var(--light-grey-2);
}

.table-borderless table thead td {
    padding-top: 0;
    background: #fff;
    font-weight: 500;
    vertical-align: bottom;
    border: 1px solid var(--light-grey-2);
    border-left: 0;
    border-right: 0;
}

.table-borderless table thead td:last-child {
    border: 1px solid var(--light-grey-2);
    border-left: none;
}

.table-borderless table thead td:first-child {
    border-left: 1px solid var(--light-grey-2);
}

.table-borderless tbody tr:last-child td:first-child {
    vertical-align: middle;
    font-weight: 500;
}

.table-borderless table tr td {
    vertical-align: bottom !important;
    font-weight: 400;
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #login page
\*------------------------------------*/

/* #region */
/*  region */

.login-checkbox-container {
    margin: 0 0 1rem 0;
}

.login-checkbox-container > .checkbox-container {
    margin: 0.2rem 0;
}

.login-checkbox-container > .checkbox-container > .checkbox-label {
    margin: 0 0.3rem 0 0;
}

.login-checkbox-container > .checkbox-container:hover > .checkbox-label > .checkbox-custom,
.login-checkbox-container > .checkbox-container:focus > .checkbox-label > .checkbox-custom {
    border-color: var(--light-orange-es);
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #userconfirmation
\*------------------------------------*/

/* #region */
/*  region */
.userconfirmation {
    display: flex;
    text-align: center;
    justify-content: center;
}

.userconfirmation .full-box-es {
    background-color: var(--light-grey-1);
    box-shadow: 0 0.05rem 0.2rem var(--light-grey-4);
}

.userconfirmation .btn-secondary-es {
    font-size: 1rem;
    margin-top: 1.5rem;
    max-width: 20rem;
    display: inline-block;
}

.userconfirmation .reset-retry,
.userconfirmation .reset-login {
    display: none;
}

.userconfirmation .highlighted {
    color: var(--orange-es);
}

.userconfirmation h3 {
    font-weight: 600;
    font-size: 1.1rem;
    padding: 1rem;
}

.userconfirmation h3 span {
    color: var(--orange-es);
}

.userconfirmation img {
    max-width: 20rem;
}

.userconfirmation .confirmation-container {
    background-color: #fff;
    box-shadow: 0 0.05rem 0.2rem var(--light-grey-4);
    padding: 2rem;
}

.userconfirmation .reset-form {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}

.userconfirmation .validation-error-es {
    opacity: 1;
    max-width: 100%;
    margin-top: 0.5rem;
}

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

.userconfirmation .reset-form .btn-secondary-es {
    margin-top: 0;
}

.userconfirmation .reset-form input {
    height: 2.1rem;
    margin-right: 2rem;
    width: 15rem;
    padding-left: 0.5rem;
}

.userconfirmation .reset-form i {
    font-size: 1.5rem;
    margin-right: 0.7rem;
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #Aniomations
\*------------------------------------*/

/* #region */
/*  region */

@keyframes fa-scale {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.4);
    }
    100% {
        transform: scale(1);
    }
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #ComboBox & Dropdown
\*------------------------------------*/

/* #region */
/*  region */

.drop-down-container {
    background-color: var(--light-grey-2);
    border: 1px solid var(--light-grey-4);
    display: flex;
    position: relative;
}

.drop-down-container.multi {
    font-size: 0.9rem;
    min-width: 16rem;
}

.drop-down-container.multi span {
    align-items: baseline;
    padding: 0;
    color: var(--dark-grey);
    font-size: 0.9rem;
    min-height: 2.35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drop-down-container.multi span span {
    font-weight: 600;
    color: var(--orange-es);
    font-size: 1rem;
}

.drop-down-container.multi span span.no-selection {
    color: var(--light-grey-5);
}

.drop-down-container.multi .drop-down .option-container {
    margin-top: 2.3rem;
    padding: 0;
    margin-left: -1px;
    background-color: #fff;
}

.multiselect .drop-down-container span {
    display: flex;
    width: 100%;
    min-height: 2rem;
    justify-content: center;
    align-items: center;
}

.drop-down-container .drop-down {
    min-height: 2rem;
    font-size: 1rem;
    padding-right: 3rem;
    padding-left: 0.5rem;
    color: var(--orange-es);
    background-color: var(--light-grey-2);
    cursor: pointer;
    line-height: 2.2rem;
    margin: 0;
    display: flex;
    flex-flow: column;
    align-items: start;
    position: relative;
    width: 100%;
}

.floating-input-container .drop-down-container .drop-down .drop-down-value {
    display: flex;
    flex-flow: column;
    padding: 0.3rem 0;
}

.floating-input-container .drop-down-container .drop-down .drop-down-value span {
    padding: 0;
    margin: 0;

    --combo-box-option-height: 1.225rem;
    line-height: var(--combo-box-option-height);
}

.floating-input-container .drop-down-container .drop-down .drop-down-value span.option-head {
    color: var(--orange-es);
    min-height: var(--combo-box-option-height);
}

.drop-down-container .drop-down-value.nolabel {
    display: unset !important;
    font-weight: normal !important;
}

.floating-input-container.disabled .drop-down:after {
    color: var(--light-grey-5);
}

.floating-input-container.disabled
.drop-down-container
.drop-down
.drop-down-value
span.option-head {
    color: var(--light-grey-5);
}

.floating-input-container .drop-down-container .drop-down input {
    height: 2.1rem;
    width: 95%;
    border: none;
    position: absolute;
    left: 0;
    text-indent: 0.4rem;
    background-color: var(--light-grey-2);
    opacity: 0;
}

.floating-input-container .drop-down-container .drop-down.open input {
    opacity: 1;
}

.drop-down:after {
    font-family: 'Material Icons', sans-serif;
    content: 'expand_more';
    font-size: 1.6rem;
    position: absolute;
    right: 0.5rem;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drop-down.open:after {
    transform: rotate(180deg);
}

.drop-down-container .floating-label {
    font-weight: 600;
    font-size: 0.8rem;
    position: absolute;
    top: -0.05rem;
    left: 0.4rem;
    color: var(--light-grey-5);
    pointer-events: none;
    z-index: 9;
    display: flex;
    height: 100%;
    align-items: center;
}

.drop-down-container .drop-down-value.ishidden {
    visibility: hidden;
}

.drop-down-container .floating-label.floating,
.floating-input-container.focused .floating-label {
    top: -2.4rem;
    opacity: 1;
    color: var(--light-grey-5);
    left: 0;
    margin-top: 0;
}

.drop-down-container .option-label {
    color: var(--light-grey-5);
    font-size: 0.9rem;
}

.drop-down-container .option-head {
    color: var(--light-grey-5);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.drop-down-container .drop-down .option-container {
    position: absolute;
    flex-flow: column;
    top: 0;
    left: 0;
    background-color: var(--light-grey-2);
    z-index: 9599;
    align-items: start;
    min-width: 100%;
    margin: 2.1rem 0 0 -0.1rem;
    border: 1px solid var(--light-grey-4);
    border-top: none;
    padding-right: 0.15rem;
    box-shadow: 0 0.15rem 0.1em var(--light-grey-3);
    transition: all 0.2s;
    opacity: 0;
    visibility: collapse;
    display: none;
    overflow-y: auto;
    max-height: 25rem;
}

.drop-down-container .drop-down.open .option-container {
    visibility: visible;
    opacity: 1;
    display: flex;
    overflow-x: hidden;
}

.drop-down-container .option-container .drop-down-option {
    display: flex;
    flex-flow: column;
    align-items: start;
    max-width: 100%;
    width: 100%;
    margin: 0;
    font-size: 0.9rem;
    padding: 0.4rem 0;
}

.drop-down-container .option-container .drop-down-option:nth-child(even) {
    background: #fff;
}

.drop-down-container .option-container .drop-down-option.selected {
    background-color: var(--light-grey-4);
}

.drop-down-container .option-container .drop-down-option.nolabel {
    font-weight: normal !important;
}

.drop-down-container.multi .option-container .drop-down-option {
    background-color: #fff;
    display: flex;
    flex-flow: row;
    color: var(--dark-grey);
    align-items: center;
    word-break: break-all;
    width: 100%;
}

.drop-down-container.multi .option-container .drop-down-option i {
    padding-left: 0.3rem;
    cursor: pointer;
}

.drop-down-container.multi .option-container .drop-down-option.selected i {
    color: var(--light-orange-es);
}

.drop-down-container.multi .option-container .drop-down-option:hover {
    background-color: var(--light-grey-2);
    margin-right: 0.5rem;
}

.drop-down-container.multi .option-container .drop-down-option:hover i {
    color: var(--orange-es);
}

.drop-down-container .option-container .drop-down-option:hover {
    background-color: var(--orange-es);
}

.drop-down-container .option-container .drop-down-option.selected > span,
.drop-down-container .option-container .drop-down-option:hover > span {
    color: #fff;
}

.drop-down-container .option-container .drop-down-option > span {
    line-height: 1.3rem;
    align-items: start;
    padding: 0 0.5rem;
}

.drop-down-sizer {
    height: 0;
    visibility: hidden;
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #Training Upload
\*------------------------------------*/

/* #region */
/*  region */

.test-upload {
    display: none;
    flex-flow: row;
    align-items: center;
    position: relative;
    padding: 0.5rem 0;
    transition: margin 0.3s;
}

.switch-container {
    position: absolute;
    right: 6.5rem;
    top: 0.8rem;
}

.switch-container span {
    padding-right: 3rem;
    color: var(--light-grey-5);
}

.switch-container .switch-control-es {
    top: 0;
    left: auto;
    right: 0;
}

.test-visible .test-upload {
    display: flex;
}

.test-visible .test-upload {
    margin-right: 25rem;
}

.test-upload h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-right: 1rem;
}

.test-upload .microloader-es {
    opacity: 0;
    transition: all 0.2s;
}

.test-upload.state-uploading .microloader-es {
    opacity: 1;
}

.test-upload .btn-secondary-es {
    display: flex;
    margin-top: 0;
    min-height: 1.7rem;
    margin-left: 1rem;
}

.test-upload .upload-container {
    position: relative;
    display: flex;
}

.test-upload .custom-pdf-viewer input {
    position: unset !important;
    opacity: 1 !important;
    cursor: default !important;
}

.test-upload input {
    position: absolute;
    width: 90%;
    height: 100%;
    top: 0;
    opacity: 0;
    cursor: pointer;
}

.upload-btn {
    display: flex;
    border: 0.1rem solid var(--orange-es);
    cursor: pointer;
    background-color: var(--orange-es);
    align-items: center;
    justify-content: center;
}

.upload-btn i {
    font-size: 1.5rem;
    color: #fff;
    background-color: var(--orange-es);
    padding: 0.5rem 0.5rem 0.5rem 0.7rem;
    transition: all 0.3s;
}

.upload-btn span {
    color: #fff;
    background-color: var(--orange-es);
    padding: 0.6rem 0.5rem 0.5rem 0;
    transition: all 0.3s;
    height: 1.4rem;
    display: inline-block;
}

.upload-btn .upload-filename {
    background-color: #fff;
    font-size: 0.9rem;
    color: var(--light-grey-5);
    border: 0.1rem solid var(--orange-es);
    width: 12rem;
    border-right: none;
    border-left: none;
    overflow: hidden;
    height: 100%;
    padding: 0 0 0 0.1rem;
    margin: 0;
    text-indent: 0.5rem;
    display: flex;
    align-items: center;
    min-height: 2.4rem;
}

.test-workflow .test-upload .data-edit-window-container {
    top: -5rem;
}

.test-upload .data-edit-window-container {
    top: -10rem;
}

.test-upload .data-edit-window h2 {
    margin-bottom: 1.7rem;
}

.test-upload .dataeditor-container .property-container span {
    padding: 0.3rem;
    color: var(--light-grey-5);
}

.test-upload .dataeditor-container .property-container .grid-input span {
    color: var(--dark-grey);
}

.test-upload .dataeditor-container td {
    vertical-align: middle;
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #Popout
\*------------------------------------*/

/* #region */
/*  region */

.popout-container {
    position: fixed;
    display: flex;
    left: 50%;
    top: 50%;
    max-width: 90%;
    max-height: 75%;
    z-index: 5556;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0.2rem var(--light-grey-4);
}

.popout-textarea {
    border: none;
    min-width: 450px;
    min-height: 200px;
    padding: 0.3rem 0.7rem;
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #Address Popup
\*------------------------------------*/

/* #region */
/*  region */

.address-popup-container.open {
    visibility: visible;
    transition: all 0.3s;
}

.address-popup-container {
    position: fixed;
    visibility: hidden;
    padding: 2rem;
    padding-bottom: 1rem;
    left: 75%;
    top: 50%;
    width: 27rem;
    z-index: 99999;
    opacity: 1;
    transform: translate(-50%, -50%);
    background-color: #fff;
    align-items: flex-start;
    justify-content: center;
    box-shadow: 0 0 0.2rem var(--light-grey-4);
}

.address-popup-container > h2.address-popup-title {
    margin: 0;
    padding-bottom: 0.7rem;
    color: var(--light-grey-5);
}

.address-popup-container .address-popup-sections {
    align-items: flex-start;
    padding-top: 0.2rem;
    margin-bottom: 1rem;
}

.address-popup-container .address-popup-sections .address-input {
    flex-flow: column;
    justify-content: center;
    padding-top: 0.7rem;
}

textarea.grid-textinput.address-input {
    min-height: 0;
    width: 100%;
    border: none;
    margin: 0.1rem 0.1rem 0 0.1rem;
}

.address-popup-container .address-popup-sections .grid-input {
    display: flex;
    position: relative;
}

.address-popup-container .address-popup-sections .grid-input span {
    font-weight: 500;
    font-size: 0.9rem;
    width: 10rem;
    color: var(--light-grey-5);
    padding-bottom: 0.3rem;
}

#compare-container .grid-container-address {
    background-color: var(--light-grey-2);
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 777;
    opacity: 0.5;
    top: 0;
    margin-left: -2rem;
}

.address-popup-container .textarea-autosize {
    max-height: 75px;
    min-height: 38px;
    width: 100%;
    resize: none;
    box-sizing: border-box;
    padding: 9px;
    position: relative;
}

/* #endregion */
/*  endregion */
/*------------------------------------*\
  #Maintenance Window
\*------------------------------------*/

/* #region */
/*  region */

.messagewindow-container-es {
    position: fixed;
    visibility: hidden;
    display: flex;
    z-index: 99999;
    width: 100%;
    height: 100%;
    align-items: flex-start;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.5);
    top: 0;
    left: 0;
    opacity: 0;
    transition: 0.2s;
}

.messagewindow-container-es.active {
    visibility: visible;
    opacity: 1;
}

.messagewindow-container-es .messagewindow {
    position: absolute;
    display: flex;
    left: 50%;
    max-width: 40rem;
    min-width: 35rem;
    min-height: 15rem;
    width: 100%;
    max-height: 75%;
    z-index: 5558;
    background-color: var(--light-grey-2);
    transform: translate(-50%, 0);
    box-shadow: 0 0 0.4rem var(--light-grey-4);
    top: 5rem;
    transition: all 0.3s;
}

.messagewindow-container-es.active .messagewindow {
    top: 8rem;
}

.messagewindow-container-es .messagewindow .maintenance-container-es {
    width: 100%;
    overflow: hidden;
    display: flex;
}

.messagewindow-container-es .messagewindow .close-btn {
    position: absolute;
    font-size: 1.5rem;
    right: -0.75rem;
    top: -0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 444;
    padding: 0.2rem;
    color: var(--orange-es);
    border: 1px solid var(--orange-es);
    background-color: var(--light-grey-1);
    border-radius: 50%;
}

.messagewindow-container-es .messagewindow .close-btn:hover {
    background-color: var(--orange-es);
    color: #fff;
}

.messagewindow-container-es .messagewindow .window-button {
    margin: 1rem 0;
}

.messagewindow-container-es .messagewindow .btn-text {
    position: absolute;
    right: 1.5rem;
    bottom: 0.75rem;
    color: var(--light-grey-5);
    background-color: var(--light-grey-2);
    border-radius: 50%;
    border: 1px solid var(--light-grey-4);
    height: 2.1rem;
    width: 2.1rem;
    overflow: hidden;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.messagewindow-container-es .messagewindow .btn-text i {
    margin-right: 0;
}

.messagewindow-container-es .messagewindow .btn-text:hover {
    color: var(--orange-es);
    border-color: var(--orange-es);
}

.messagewindow-container-es .messagewindow .message-controls > div {
    position: absolute;
    font-size: 2rem;
    border: 2px solid var(--light-grey-3);
    color: var(--light-grey-5);
    cursor: pointer;
    transition: all 0.2s;
    top: 45%;
    height: 2.5rem;
    display: flex;
    width: 2.5rem;
    align-items: center;
    justify-content: center;
    background-color: var(--light-grey-2);
    border-radius: 50%;
}

.messagewindow-container-es .messagewindow .message-controls > div:hover {
    color: var(--orange-es);
}

.messagewindow-container-es .messagewindow .message-controls > div.prev {
    left: -3.5rem;
}

.messagewindow-container-es .messagewindow .message-controls > div.next {
    right: -3.5rem;
}

.messagewindow-container-es .messagewindow .title {
    font-size: 1.1rem;
    font-weight: 600;
    text-align: left;
    padding: 0.5rem 3.5rem 0.5rem 1.3rem;
    display: flex;
    align-items: center;
    color: #fff;
    box-shadow: 0 0 0.2rem var(--light-grey-4);
    word-break: break-word;
}

.messagewindow-container-es .messagewindow .title i {
    font-size: 2rem;
    padding-right: 0.5rem;
}

.messagewindow-container-es .messagewindow .content img {
    max-width: 98%;
    padding: 0.5rem 0;
}

.messagewindow-container-es .messagewindow .content {
    padding: 1rem 1.5rem 3.5rem 1.5rem;
    display: flex;
    align-items: baseline;
    overflow-x: hidden;
    word-break: break-word;
    font-size: 0.95rem;
    overflow: auto;
    max-height: 15rem;
    position: relative;
    min-height: 15rem;
    flex-flow: column;
}

.messagewindow-container-es .messagewindow .maintenance-message {
    position: relative;
    width: 100%;
    height: 100%;
}

.messagewindow-container-es .messagewindow .maintenance-message.prev .content {
    animation-name: prev;
    animation-duration: 0.3s;
}

.messagewindow-container-es .messagewindow .maintenance-message.next .content {
    animation-name: next;
    animation-duration: 0.3s;
}

@keyframes prev {
    from {
        left: 1.5rem;
        opacity: 0;
    }
    to {
        left: 0;
        opacity: 1;
    }
}

@keyframes next {
    from {
        right: 1.5rem;
        opacity: 0;
    }
    to {
        right: 0;
        opacity: 1;
    }
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #Table creator
\*------------------------------------*/

/* #region */
/*  region */

.table-creator-container {
    display: grid;
    grid-template-columns: auto 7rem;
    grid-template-rows: min-content max-content;
    transition: all 0.2s;
}

.table-creator-container > .table-creator-drop-down-container {
    display: flex;
    gap: 0.5rem;
    grid-column-start: 1;
    grid-row-start: 1;
    margin-top: 1rem;
}

.table-creator-container > .table-creator-drop-down-container > .drop-down-container-es {
    width: auto !important;
}

.table-creator-container > .table-creator-button-container {
    display: flex;

    align-items: flex-end;

    grid-column-start: 2;
    grid-row-start: 1;
}

.table-creator-container > .table-creator-preview-container {
    margin-top: 1.5rem;

    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;

    overflow-x: auto;
}

.table-creator-container .table-preview {
    width: 100% !important;
}

.table-creator-container .table-preview > thead > tr > th {
    text-align: center;
    min-width: 5rem;
    max-width: 15rem;
    font-weight: 500;
}

.table-creator-container .table-preview > tbody > tr > td > .placeholder {
    display: block;

    margin: 0 0.5rem;
    min-height: 0.85rem;
    border-radius: 0.5rem;

    background-color: var(--light-grey-3);
}

.table-creator-container .table-preview > tbody > tr > td:last-child {
    width: auto;
    vertical-align: middle;
}

.table-creator-container .floating-input-container {
    width: 100%;
}

.table-creator-container .floating-input-container > .drop-down-container {
    width: 100%;
}

.table-creator-container .table-creator-button-container .action-control {
    margin-bottom: 0.5rem;
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #Sub table container
\*------------------------------------*/

/* #region */
/*  region */

.case-detail-file-sub-container {
    padding: 0.5rem 1rem;
}

.case-detail-file-sub-container .case-control-btn .material-icons {
    margin-right: 0.4rem;
    font-size: 1.4rem;
    color: var(--orange-es);
}

.case-detail-file-sub-container .case-control-btn span {
    display: flex;
    align-items: center;
    margin-right: 1.5rem;
    color: var(--light-grey-5);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #DropDown
\*------------------------------------*/

/* #region */
/*  region */

.drop-down-container-es {
    background-color: var(--light-grey-2);
    border: 1px solid var(--light-grey-4);
    position: relative;
    margin: 1rem 0 0.3rem 0;
    display: flex;
}

.drop-down-container-es.disabled {
    pointer-events: none;
}

.drop-down-container-es:after {
    font-family: 'Material Icons', sans-serif;
    content: 'arrow_drop_down';
    line-height: 2.5rem;
    right: 0.4rem;
    color: var(--orange-es);
    font-size: 1.5rem;
    pointer-events: none;
    position: absolute;
}

.drop-down-container-es.disabled::after {
    color: var(--light-grey-5);
}

.drop-down-container-es.disabled > select {
    color: var(--light-grey-5);
}

/* #endregion */
/*  endregion */

/*------------------------------------*\
  #Document Text Window
\*------------------------------------*/

/* #region */
/*  region */

.documenttext-container {
    visibility: collapse;
    top: 0rem;
    opacity: 0;
    left: 2rem;
    min-height: 15rem;
    position: fixed;
    transition: all 0.3s;
    z-index: 999;
    width: calc(50% - 6rem);
}

.documenttext-container.open {
    visibility: visible;
    top: 2rem;
    opacity: 1;
}

.documenttext {
    background-color: rgba(242, 242, 242, 0.9);
    box-shadow: 0 0 0.2rem var(--light-grey-4);
}

.documenttext-container i.close-btn {
    position: absolute;
    font-size: 1.5rem;
    right: -0.75rem;
    top: -0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 444;
    padding: 0.2rem;
    color: var(--orange-es);
    border: 1px solid var(--orange-es);
    background-color: var(--light-grey-1);
    border-radius: 50%;
}

.documenttext-container i.close-btn:hover {
    color: #fff;
    background-color: var(--orange-es);
}

.canvas-active .canvas-container #compare-container .document-text,
.canvas-active .canvas-container #compare-container .document-text textarea {
    background-color: transparent;
}

/* #region */
/*  region */


/*------------------------------------*\
  #ac training
\*------------------------------------*/

/* #region */
/*  region */

.definition-container.wordwarp,
.definition-container.linewarp {
    flex-wrap: wrap;
}

.definition-container.wordwarp .grid-input {
    margin-right: 0;
    margin-bottom: 0.5rem;
}

.definition-container.wordwarp label {
    margin-bottom: 0.75rem;
}

.definition-container.wordwarp .grid-input label {
    margin-left: 0.3rem;
    margin-bottom: 0.1rem;
}

.definition-container.wordwarp .control-btn {
    margin-bottom: 1rem;
}

.training-container .add-wordwrap .control-btn {
    margin: 0 0 0.5rem 0;
}

.ac-training-offcanvas .tabhead-es {
    padding: 0.5rem;
    height: 2rem;
    margin-right: 0.5rem;
    margin-top: 0.5rem;
}

.ac-training-offcanvas .tabhead-es h3 {
    font-size: 0.9rem;
    line-height: 2rem;
}

.acfadelets {
    background: linear-gradient(0deg, rgba(245, 245, 245, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

.acfadelets .tags-icon {
    position: absolute;
    top: 50%;
    margin-top: -1.05rem;
}

.acfadelets .grid-input {
    position: relative;
    margin-left: 2rem;
}

.acfadelets span {
    position: relative;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--light-grey-5);
    margin-right: 1rem;
}

.acpoplets .definition-container,
.acwordtrains .definition-container,
.acpagewraps .definition-container {
    padding-top: 1.5rem;
}

.aclinewarps label {
    margin-left: 0.3rem;
    color: var(--dark-grey);
}

.aclinewarps .grid-input label {
    margin-left: 0.3rem;
    font-weight: 400;
    color: var(--light-grey-5);
}

.aclinewarps .grid-input {
    margin: 0;
    padding-right: 0;
}

.aclinewarps .floating-input-container {
    margin-right: 1rem;
}

.aclinewarps hr {
    width: 100%;
    background: transparent;
}

.acpageWarp {
    padding-top: 1rem;
}

.acpageWarp .grid-input i {
    color: var(--orange-es);
}

/* #region */
/*  region */

@keyframes headShake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg);
    }

    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg);
    }

    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg);
    }

    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg);
    }

    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*
  PDF Viewer
  Temporary fix for a CSS bug in the Syncfusion.
  Just one underline should shown in search
  TODO: Remove this code once the bug is fixed by Syncfusion.
*/
.e-pv-text-search-bar-elements {
    .e-input-group:not(.e-float-icon-left), .e-input-group.e-success:not(.e-float-icon-left), .e-input-group.e-warning:not(.e-float-icon-left), .e-input-group.e-error:not(.e-float-icon-left), .e-input-group.e-control-wrapper:not(.e-float-icon-left), .e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left), .e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left), .e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
        border: none !important;
    }
}

.e-pv-text-search-bar-elements {
    .e-input-group:not(.e-float-icon-left), .e-input-group.e-control-wrapper:not(.e-float-icon-left) {
        border-bottom: none !important;
    }
}