/* app/masks.css */

/*
   Resource loading mask
*/

.resource-panel-mask-msg .x-mask-msg-inner {
    padding: 0px !important;
    border: 0px !important;
}

.resource-panel-mask-msg {
    padding: 15px 30px 15px 30px !important;
    border: 1px solid #eaeaea !important;
    background-color: #fefefe !important;
    color: #222222 !important;
}

/*
   IFrame loading mask
*/

.iframe-mask-msg .x-mask-msg-inner {
    padding: 0px !important;
    border: 0px !important;
}

.iframe-mask-msg .x-mask-msg-text {
    padding: 15px 30px 15px 30px !important;
    border: 1px solid #eaeaea !important;
    background-color: #fefefe !important;
    color: #222222 !important;
}

/* Mask Z-Index changes, mask should be on top of everything */

.x-mask-global-dialog {
    z-index: 100000;
}

.x-mask-global-dialog-msg {
    z-index: 1000001 !important;
}

/*
Application mask
*/

.x-connection-lost-mask {
    z-index: 200000 !important;
}

.x-connection-lost-mask-msg {
    z-index: 200001 !important;
    padding: 5px !important;
    border: 2px solid !important;
    border-color: #eaeaea !important;
    background-image: none !important;
    background-color: #fefefe !important;
    max-width: 400px;
}

.x-connection-lost-mask-msg .x-mask-msg-inner {
    padding: 0px !important;
    border: 0px !important;
}

.x-connection-lost-mask-msg .x-mask-msg-text {
    padding: 25px 30px 25px 30px !important;
    background-image: none !important;
    background-position: 5px center !important;
    border: 1px solid #eaeaea !important;
    background-color: #fefefe !important;
    color: #222222 !important;
    font: normal 13px tahoma, arial, verdana, sans-serif !important
}

.x-connection-lost-mask-msg a {
    cursor: pointer;
    text-decoration: underline;
    color: #3978b1;
    font-weight: bold;
}

.x-connection-lost-mask-msg dt {
    font-style: italic;
}

.x-connection-lost-mask-msg dd {
    margin-left: 1em;
    margin-bottom: 0.3em;
}


/* app/icon.css */



.x-btn-button .btn-icon-font {
    font-size: 14px;
    line-height: 14px;
    color: #666666;
}

.btn-icon-font-grow {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.x-btn-button:hover .btn-icon-font-grow, .x-btn-button:focus .btn-icon-font-grow, .x-btn-button:active .btn-icon-font-grow:active {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

.x-item-disabled:hover .btn-icon-font-grow, .x-item-disabled:focus .btn-icon-font-grow, .x-item-disabled:active .btn-icon-font-grow:active {
    -webkit-transform: scale(1);
    transform: scale(1);
    color: #666666;
}

.data-set-filter-full {
    color: #3892d3 !important;
}

.data-set-filter-empty {
}


/* app/tools.css */

/*
 Extensions for tools
*/


/* app/task.css */

.task-view {

}

.task-view .task {
    border-top: solid lightgrey 1px;
    padding: 4px;
}

.task-view .x-item-over {
    border: 1px solid #dddddd;
    background: #efefef;
    padding: 4px;
}

.task-view .x-item-selected {
    background: #eff5fb;
    border: 1px solid #99bbe8;
    padding: 4px;
}

.task-view table {
    padding: 0px;
    margin: 0px;
    border: 0px;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%
}

.task-view table > tbody {
    padding: 0px;
    margin: 0px;
    border: 0px;
}

.task-view table > tbody > tr > td {
    padding: 5px;
    margin: 0px;
    border: 0px;
    vertical-align: top;
}

.task-view .heading {
    line-height: 20px;
    vertical-align: middle;
}

.task-view .icon {
    line-height: 20px;
    font-size: 16px;
}

.task-view .icon .running {
    color: black;
}

.task-view .icon .waiting {
    color: darkgrey;
}

.task-view .icon .failed {
    color: red;
}

.task-view .icon .canceled {
    color: #c6bc07;
}

.task-view .icon .successful {
    color: #48974f;
}

.task-view .stop i {
    color: red !important;
}

.task-view .name {
    font-size: smaller;
    font-weight: bold;
    margin-left: 5px;
    line-height: 20px;
    vertical-align: middle;
}

.task-view .stats {
    font-size: smaller;
}

.task-view .separator {
    color: #e0e0e0;
    margin: 0px 5px 0px 5px;
}

.task-view .stats .label {
    display: inline;
    font-style: italic;
    margin: 0px 8px 0px 0px;
}

.task-view .log {
    font-size: smaller;
}

.task-view .task .progress {
    margin: 10px 0px 5px 0px;
    font-size: smaller;
    background-color: #ebebeb;
    border-radius: 8px;
    padding: 2px;
}

.task-view .task .progress > div {
    background-color: #2a6d9e;
    height: 4px;
    border-radius: 8px;
}

.task .message {
    font-size: smaller;
}

.task-description {
    margin: 0px;
    padding: 5px;
}

.task-description .log {
    white-space: pre-wrap;
    margin: 0px;
    padding: 0px;
}

.task-badge-large {
    top: -9px !important;
    left: -2px !important;
    padding: .3em .4em !important;
    font-weight: bold;
    font-size: 10px !important;
}

.task-badge-medium {
    top: -4px !important;
    left: 0px !important;
    padding: .3em .4em !important;
    font-weight: 400;
    font-size: 8px !important;;
}

.task-badge-small {
    top: -2px !important;
    left: 1px !important;
    padding: .3em .4em !important;
    font-weight: 400;
    font-size: 8px !important;
}

.task-badge {
    position: relative;
    top: -2px;
    left: 1px;
    margin: 0px !important;
    display: inline-block;
    padding: .3em .4em;
    font-weight: 400;
    font-size: 8px;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .4rem;
}

.task-badge.pending {
    background-color: rgba(108, 117, 125, 0.6);
}

.task-badge.failed {
    background-color: rgba(255, 0, 0, 0.6);
}

.task-badge.canceled {
    color : #222;
    background-color: rgb(220, 220, 58);
}

.task-badge.completed {
    background-color: rgba(72, 151, 79, 0.6);
}


/* app/about.css */

.about div {
    font-size: 7pt;
}

.about .product-name {
    font-size: 12pt;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 8px;
}

.about .modules {
    font-size: 11pt;
    margin-left: 20px;
    margin-top: 2px;
    margin-bottom: 4px;
    list-style: disc outside none;
}

.about .modules .module {
    display: list-item;
    white-space: nowrap;
}

.about .modules .module span {
    display: inline-block;
}

.about .modules .module .name {
    min-width: 300px;
}

.about .modules .module .version {

}

.about .modules .patch {
    display: list-item;
    white-space: nowrap;
}

.about .modules .patch span {
    display: inline-block;
}

.about .modules .patch .name {
    min-width: 100px;
}

.about .modules .patch .value {

}

.about .copyright {
    margin-top: 5px;
}

.about .copyright-oracle {
    margin-top: 15px;
    font-size: 7pt;
}

.about .copyright-oracle span {
    font-weight: bold;
}

.license div {
    margin-top: 5px;
}

.license table {
    width: 100%
}

.license table td {
    padding: 2px;
    text-align: left;
    vertical-align: top;
}

.license table td.product-key {
    white-space: nowrap;
}

.license .features {
    height: 0;
    overflow-y: auto;
}

.license .features table {
    border: 1px solid #EEE;
    border-collapse: collapse;
    border-spacing: 0;
}

.license .features table th {
    background-color: #ececec;
    font-size: 11px;
    font-weight: bold;
}

.license .features table th, .license .features table td {
    text-align: left;
    vertical-align: top;
    padding: 2px;
    font-size: 10px;
    border: 1px solid #EEE;
}

.license .features table td {
    font-size: 9px;
}

.license .feature-group {
    font-size: 12px;
    list-style-type: circle;
}

.license .feature {
    font-style: italic;
    font-weight: bold;
    list-style-type: square;
}

.license .invalid {
    color: red;
    font-weight: bold;
}

.license .valid {
    color: #008000;
    font-weight: bold;
}

.customer_service div {
    font-size: 13pt;
    font-family: MS Reference Sans Serif, Geneva, sans-serif;
}

.customer_service .product-name {
    font-size: 20pt;
    margin-top: 25px;
    margin-bottom: 40px;
    margin-left: 10px;
    font-weight: bold;
}

.customer_service .login_link {
    font-weight: normal;
    font-size: 13px;
    margin-left: 10px;
}

.customer_service .login_link span {
    font-weight: bold;
}

.customer_service a, .customer_service a:visited {
    color: #0067b1;
    font-weight: bold;
}

.customer_service ul {
    padding-left: 20px;
}

.customer_service li,
.customer_service .faq {
    font-size: 13px;
}

span.faq {
    font-weight: bold;
}


/* app/embedded-html.css */

.plain-html ol, .plain-html ul, .plain-html dir {
    /*margin: 1.12em 0 !important;*/
    margin-left: 30px !important;
    /*padding-left : 20px !important;*/
}

.plain-html u {
    text-decoration: underline !important;
}

.plain-html i, .plain-html em {
    font-style: italic !important;
}

.plain-html li {
    display: list-item !important;
}

.plain-html ol {
    list-style-type: decimal !important;
}

.plain-html ul {
    list-style-type: disc !important;
}

.plain-html ol ul, .plain-html ul ol, .plain-html ul ul, .plain-html ol ol {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.plain-html u, .plain-html ins {
    text-decoration: underline !important;
}

.plain-html td.nowrap {
    white-space:nowrap !important;
}

.plain-html td {
    font-size: 11px !important;
}

.plain-html h1 {
    font-size: 17px !important;
    text-align: center !important;
}

.plain-html h2 {
    font-size: 15px !important;
    text-align: left !important;
}

.plain-html h3 {
    font-size: 13px !important;
    text-align: left !important;
}

.plain-html table {
    border: 1px solid #999 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

.plain-html .border {
    border: 1px solid #999 !important;
}

.plain-html table th {
    background-color: #ddd !important;
    font-size: 12px !important;
    font-weight: bold !important;
}

.plain-html table th, .plain-html table td {
    text-align: left !important;
    vertical-align: top !important;
    padding: 2px !important;
    font-size: 11px !important;
    border: 1px solid #999 !important;
}

.plain-html table td.norightborder {
    border-right: none !important;
}

.plain-html table td.nobottomborder {
    border-bottom: none !important;
}

.plain-html table td.noleftborder {
    border-left: none !important;
}

.plain-html table td.nosides {
    border-left: none !important;
    border-right: none !important;
}

.plain-html tr.error {
    background-color: #f9c6b7 !important;
}

.plain-html th.line, .plain-html td.line {
    min-width:40px !important;
    text-align:right !important;
}

.plain-html .title {
    padding:5px !important;
    font-size: 15px !important;
    background-color: #b6e0cb !important;
}

.plain-html .sub-title {
    padding:5px !important;
    font-size: 13px !important;
    background-color: #b6e0cb !important;
}

.plain-html th.header {
    background-color: #c4c4c4 !important;
}

.plain-html td.header {
    background-color: #c4c4c4 !important;
}

.plain-html .info, .plain-html .warning {
    border: 1px solid !important;
    margin: 10px 0px !important;
    padding: 15px 10px 15px 50px !important;
    background-repeat: no-repeat !important;
    background-position: 10px center !important;
    display: block !important;
}

.plain-html .info {
    color: #00529B !important;
    background-color: #BDE5F8 !important;
    background-image: url('${imageURI}/fugue/info.png') !important;
}

.plain-html .warning {
    color: #9F6000 !important;
    background-color: #FEEFB3 !important;
    background-image: url('${imageURI}/fugue/warning.png') !important;
}


/* app/component/login-panel.css */

/**
 * Login Dialog
 */

.login-panel-icon-title {
    background-image: none!important;
}

.form-login-error {
    background-color: var(--sp-body-background-color);
    font-size: 11px;
    font-weight: bold;
    padding: 5px 10px;
}
.form-login-bottom {
    background-color: var(--sp-body-background-color);
    padding-bottom: 40px;
    top: 210px !important;
}

.form-login-error .error {
    color: red;
}

.form-login-warning {
    padding: 2px;
    font-weight: bold;
}

/**
 * Flags
 */
.flag-us {
    background-image: url("/image/flags/us.gif") !important;
}

.login-panel .x-panel-body-default-framed,
.login-panel .x-panel-body-default {
    border: none!important;
}

.login-panel .x-panel-body-default-framed,
.login-panel .x-panel-body-default {
    background-color: var(--sp-body-background-color);
    overflow: visible;
}

.login-panel .x-form-text-default.ux-icon-combo-input {
    padding: 4px 6px 3px 26px
}

.login-panel .x-toolbar-footer {
    top: 200px !important;
}

.login-panel .x-toolbar-footer {
    background-color: var(--sp-panel-background-color);
    border: none;
}



/* app/component/navigation.css */

:root {

    --sp-navigation-top-submenu-item-hover-background-color: #ebf6fe;
    --sp-navigation-top-submenu-item-hover-border-color: #f5f5f5;
    --sp-navigation-split-icon-color: #f1f1f1;
    --sp-navigation-left-floated-item-padding: 3px 3px 3px 0px;
    --sp-navigation-left-group-item-border-color: rgba(255,255,255,0.05);
    --sp-navigation-left-group-item-border: 1px solid var(--sp-navigation-left-group-item-border-color);
    --sp-footer-background-color: #3771b8;
    --sp-footer-link-color: #333333;
}

/*
    Footer
*/

.x-sp-footer {
    background-color: var(--sp-footer-background-color);
}

.x-sp-footer a, .x-sp-footer a:visited {
    color: var(--sp-footer-link-color);
}

/*
    Header
*/
.x-sp-header {
    background-color: var(--sp-navigation-top-background-color);
    margin: auto;
}

/** App top menu, drop down menu style **/
div.x-navigation-submenu.x-menu {
    top: 50px !important;
}

div.x-navigation-submenu.x-menu:before {
    content: ' ';
    position: absolute;
    bottom: 100%;
    left: 80%;
    height: 0;
    width: 0;
    border: 8px solid transparent;
    border-bottom-color: var(--sp-navigation-top-color);
    margin-left: -8px;
}

.x-navigation-submenu .x-menu-item-text-default.x-menu-item-indent {
    margin: 2px 13px;
    width: 140px;
}

.x-navigation-submenu a#home {
    border: 1px solid var(--sp-navigation-top-color);
}
div.x-navigation-submenu.x-menu {
    background: var(--sp-navigation-top-color);
    border: 1px solid var(--sp-navigation-top-menu-border-color);
    text-align: left;
    width: 200px;
}

.x-navigation-submenu .x-menu-item-text-default {
    color: var(--sp-navigation-top-menu-color);
    font-size: var(--sp-navigation-font-size);
    line-height: 28px;
    margin-left: 28px;
}

.x-navigation-submenu .x-menu-item.logout {
    background-image: none !important;
}

.x-navigation-submenu .x-box-scroller-menu-default.x-box-scroller-top {
    background-image: none;
}

.x-navigation-submenu .x-menu-icon-separator-default {
    border-left: none;
    background-color: transparent;
    width: 0px;
}

.x-navigation-submenu .x-menu-item {
    font-size: var(--sp-navigation-font-size);
    color: var(--sp-navigation-top-menu-color);
    text-align: left;
    border: none;
}

.x-navigation-submenu .x-menu-item a:hover {
    background-color: var(--sp-navigation-top-submenu-item-hover-background-color);
    border: 1px solid var(--sp-navigation-top-submenu-item-hover-border-color);
}

.x-navigation-submenu .x-menu-item-default.x-menu-item-active {
    background-color: transparent;
    border: none;
}

/** top menu (toolbar) style **/

.x-navigation-toolbar {
    background-color: var(--sp-navigation-top-background-color);
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    height: 60px;
    padding: 0px;
    padding-right: 30px;
    top: 0px !important;
}

.x-navigation-toolbar.x-toolbar-default {
    padding: 0 0 0 0;
}

.x-navigation-toolbar a {
    font-size: var(--sp-navigation-font-size);
    padding: 0px 10px;
}


.x-navigation-toolbar .x-btn.x-btn-focus.x-btn-default {
    background-color: var(--sp-navigation-left-background-color);
}
.x-navigation-toolbar .x-btn,
.x-navigation-toolbar .x-btn.x-btn-menu-active.x-btn-default-toolbar-small,
.x-navigation-toolbar .x-btn.x-btn-focus.x-btn-default {
    padding: 0px;
    background-color: inherit;
    border-bottom: none;
    border-radius: 0px;
    border-color: transparent;
}

.x-navigation-toolbar .x-btn-wrap-default-toolbar-small.x-btn-split-right > .x-btn-button:after {
    border-right: 0px;
}

.x-navigation-toolbar .x-btn-wrap-default-toolbar-small.x-btn-split-right:after {
    color: var(--sp-navigation-split-icon-color);
}

.x-navigation-toolbar .x-btn-focus {
    background-color: inherit;
    border-color: var(--sp-navigation-left-background-color);
    padding: 0px 10px;
}

.x-navigation-toolbar .x-btn.x-btn-menu-active.x-btn-default-toolbar-small,
.x-navigation-toolbar .x-btn.x-btn-pressed.x-btn-default-toolbar-small,
.x-navigation-toolbar .x-btn-over.x-btn-default-toolbar-small,
.x-navigation-toolbar .x-btn-focus.x-btn-default-toolbar-small
{
    border-bottom: none;
    background-color: var(--sp-navigation-top-background-color-active);
    border-top: none;
    border-right: none;
    border-left: none;
    padding: 0px 10px;
}

.x-navigation-toolbar .x-btn.x-btn-menu-active.x-btn-inner,
.x-navigation-toolbar .x-btn.x-btn-focus.x-btn-inner,
.x-navigation-toolbar .x-btn.x-btn-pressed.x-btn-inner {
    font-weight: bold;
}

.x-navigation-toolbar .x-toolbar-spacer.logo {
    background-image: url("/image/extjs/spirent/spirent-logo/spirent-touch-logo.png");
    background-position: center center;
    background-repeat: no-repeat;
    width: 248px;
    height: 60px;
}

.x-navigation-toolbar .x-toolbar-btn-small,
.x-navigation-toolbar .x-btn-default-toolbar-small {
    height: 60px;
    text-align: center;
    border-width: 0px !important;
    padding: 0px 10px;
}

.x-navigation-toolbar .x-btn-wrap-default-toolbar-small .x-btn-split .x-btn-over, .x-navigation-toolbar .x-btn-wrap-default-toolbar-small .x-btn-split .x-btn-focus,
.x-navigation-toolbar .x-btn-wrap-default-toolbar-small .x-btn-split .x-btn-menu-active, .x-navigation-toolbar .x-btn-wrap-default-toolbar-small .x-btn-split .x-btn-pressed {
    border: 1px solid var(--sp-navigation-top-color);
    font-weight: bold;
}
.x-navigation-toolbar .x-btn-inner-default-toolbar-small {
    color: var(--sp-navigation-top-color);
    font-size: var(--sp-navigation-font-size);
}

.x-navigation-toolbar .x-btn-pressed .x-btn-inner {
    font-weight: bold;
}

.x-navigation-toolbar .x-btn-inner {
    overflow: visible;
}


/*
    Navigation
*/

.x-navigation {
    border : 0;
}

.x-navigation.x-panel-default, .x-navigation .x-panel-default {
    border: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}

.x-navigation .x-panel-header-title {
    color: var(--sp-navigation-top-color);
    font-size: var(--sp-navigation-font-size);
    line-height: 32px;
    font-weight: normal;
}

.x-navigation .x-panel-body-default {
    border: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}

.x-navigation .x-panel-header-default-top {
    border : 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}

.app-body .x-panel-header-default-vertical {
    background-color: var(--sp-navigation-left-background-color);
    width: 50px;
    border: none;
    padding: 10px 10px;
}

.x-panel-header-default-vertical .x-panel-header-title-default {
    font-size: var(--sp-navigation-font-size);
    color: var(--sp-navigation-top-color);
    font-weight: var(--sp-font-weight-bold);
}

.x-navigation, .x-navigation .x-panel-header {
    background-color: var(--sp-navigation-left-background-color);
}

.x-navigation .x-panel-header-default-horizontal.x-header-noborder {
    padding: 4px 6px 4px 6px;
    margin: 0px 0px;
}

.x-navigation-item {
    font-size: var(--sp-navigation-font-size);
    font-weight: var(--sp-font-weight-bold);
    cursor: pointer;
    color: var(--sp-navigation-left-color);
    vertical-align: middle;
    line-height: var(--sp-navigation-item-line-height);
    display: flex;
}

.x-navigation-item .icon, .x-navigation-group .icon {
    width: 26px;
    height: inherit;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 100% !important;
    margin-right: 10px;
}

.x-navigation-group .icon_selected {
    background-color: #ff9e3f;
}

.x-navigation-item .icon img {
    border: 0px;
}

.x-navigation-item.single {
    margin-left: 0;
    line-height: 40px;
    font-size: var(--sp-navigation-font-size);
    font-weight: normal;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
    color: var(--sp-navigation-left-color-active);
    outline: none;
    cursor: pointer;
    background-color: inherit;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.x-navigation-group,
.x-navigation-group-hover {
    padding-left: 10px;
    line-height: 40px;
    margin-left: 0;
    font-size: var(--sp-navigation-font-size);
    font-weight: normal;
    cursor: pointer;
    color: var(--sp-navigation-left-color-active);
    outline: none;
    background-color: inherit;
    opacity: 1;
}

.x-navigation .x-item-selected {
    font-weight: bold;
    color: var(--sp-navigation-left-color-active);
    background-color: var(--sp-navigation-left-background-color-selected);
}

.x-navigation .x-item-selected-transparent {
    background-color: transparent;
}

.x-navigation .x-view-item-focused {
    outline: none!important;
}

.x-navigation-item-hover, .x-navigation-item-hover.single {
    background-color: var(--sp-navigation-left-background-color);
    opacity: .8;
}


.x-navigation-item-simple {
    padding-left: 40px !important;
}


/*
  Content
*/

.x-sp-content {
    background-color: var(--sp-content-background-color);
}

/*
==============================
    Customization
==============================
*/

div.x-dynamicmenu.x-menu {
    position: absolute !important;
    background-color: var(--sp-navigation-left-background-color);
    border: 0;
}

.x-dynamicmenu .x-menu-icon-separator-default {
    display: none;
}

.x-dynamicmenu .x-menu-item-text-default.x-menu-item-indent {
    margin-left: 0px;
}

.x-navigation-toolbar .x-btn-icon-el {
    width: 25px;
    height: 25px;
    color: var(--sp-navigation-left-color-active);
    font-size: 25px;
}

.x-navigation-toolbar .x-btn-icon-el.smaller-font {
    font-size: 23px;
}

.version-small {
    width: 300px;
    height: 9px;
    line-height: 9px;
    text-align: right;
    font-size: 9px;
    color: var(--sp-branding-font-color);
    position: absolute;
    top: 42px;
}

.powered-by-vw {
    position: relative;
    float: right;
    top: 65%;
    color: var(--sp-branding-font-color);
    font-size: var(--sp-font-small-size);
}
.powered-by-vw a, .powered-by-vw a:hover {
    font-weight: bold;
    color: var(--sp-branding-font-color);
    padding:0 3px 0 0;
    font-size: var(--sp-font-small-size);
}

.powered-by-small {
    width: 300px;
    height: 14px;
    line-height:12px;
    text-align: right;
    position: absolute;
    color: var(--sp-branding-font-color);
    font-size: var(--sp-font-small-size)
}
.powered-by-small a, .powered-by-small a:hover {
    font-weight: bold;
    color: var(--sp-branding-font-color);
    padding:0 0 0 1px;
    font-size: var(--sp-font-small-size)
}

.logoSpacer {
    top: 5px !important;
    left: 30px !important;
    position: fixed;
}

.logoSpacer .x-mask {
    visibility: hidden;
}

.spirentLogoImage {
    height: 28px;
    background-position: -7px -12px;
    background-repeat: no-repeat;
}
.visionworksLogoImage {
    background-position: 15px center;
    background-repeat: no-repeat;
    background-size: 80%;
}
.partnerLogoImage {
    height: 60px;
    position: absolute;
    background-position: 4px 2px;
    background-repeat: no-repeat;
    width: 88px;
}

.partnerLogoSpacer {
    left: 0px;
    height: 60px;
    top: 2px!important;
}

.visionworksLogoSpacer {
    left: 5px;
    height: 60px;
    top: 5px;
}

.partner-powered-by-small {
    top: 29px;
    left: 95px;
    position: relative;
    width: 175px;
    height: 14px;
    line-height: 12px;
    text-align: left;
    color: var(--sp-branding-font-color);
    font-size: var(--sp-font-small-size);
}
.partner-powered-by-small a, .partner-powered-by-small a:hover {
    font-weight: bold;
    color: var(--sp-branding-font-color);
    padding:0 0 0 1px;
    font-size: var(--sp-font-small-size);
}
.app-home-body .partner-powered-by-small {
    top: 18px;
    left: 95px;
    position: relative;
    width: 250px;
}
.partner-version-small {
    top: 13px;
    left: 161px;
    position: relative;
    width: 310px;
    height: 9px;
    line-height: 9px;
    text-align: right;
    font-size: 9px;
    color: var(--sp-branding-font-color);
}
.partnerText {
    font-size: 18px;
    font-weight: 400;
    padding-left: 10px;
    color: var(--sp-branding-font-color);
    position: relative;
    top: 14px;
    left: 85px;
}
.x-navigation .x-tool-collapse-top {
    color : var(--sp-navigation-left-color-active);
}

.x-navigation .x-tool-expand-bottom {
    color : var(--sp-navigation-left-color-active);
}

.x-navigation .x-treelist-toolstrip {
    background-color: transparent;
}

.x-navigation .x-treelist-item-tool {
    width: 60px;
    height: 60px;
    background-repeat: no-repeat !important;
    background-position: 50% 50% !important;
    background-size: 45%;
    font-size: 26px;
    display: block;
}

.x-navigation .x-panel-header-title {
    width: 1px !important;
}

.x-navigation .x-panel-header {
    padding: 10px;
    border:0px;
}
.x-navigation .x-collapsed .x-panel-header-default-horizontal .x-tool-after-title {
    left: 17px !important;
}

.x-navigation .x-treelist-row {
    vertical-align: middle;
    margin-left: 0;
    font-size: var(--sp-navigation-font-size);
    font-weight: normal;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 10px;
    outline: none;
    cursor: pointer;
    background-color: inherit;
}


.x-navigation .x-treelist {
    border: none;
}
.x-navigation .x-treelist-item {
    border: none;
}

.x-navigation .x-treelist-item-text {
    font-size: var(--sp-navigation-font-size);
    font-weight: normal;
    cursor: pointer;
    color: var(--sp-navigation-left-color);
    vertical-align: middle;
    line-height: var(--sp-navigation-item-line-height);
    margin-left: 34px;
}

.x-navigation li.x-treelist-item.x-treelistitem .x-treelist-item-selected-parent .x-treelist-item-text {
    font-weight: bold;
    color: var(--sp-navigation-left-color-active);
}

.x-navigation .x-treelist-item-icon {
    width: 26px;
    height: 26px;
    font-size: 26px;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 100% !important;
    color: var(--sp-navigation-left-color);
}

.x-navigation .x-treelist-root-container > .x-treelist-item.x-treelist-item-with-icon > .x-treelist-row {
    border-top: var(--sp-navigation-left-group-item-border);
    border-bottom: var(--sp-navigation-left-group-item-border);
}

.x-navigation, .x-navigation .x-treelist-item {
    margin-left: 0;
    font-size: var(--sp-navigation-font-size);
    font-weight: normal;
    cursor: pointer;
    outline: none;
    opacity: 1;
}

.x-navigation, .x-treelist-item .x-treelist-item-leaf {
    margin-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.x-navigation .x-treelist-item-leaf .x-treelist-row {
    padding-top: 0px;
    padding-bottom: 0px;
    border: none;
}

.x-navigation .x-treelist-item-leaf {
    border: none;
}

.x-navigation .x-item-selected {
    background-color: var(--sp-navigation-left-background-color-selected);
    font-weight: bold;
    color: var(--sp-navigation-left-color-active);
}

.x-navigation .x-item-selected-parent {
    font-weight: bold;
    color: var(--sp-navigation-left-color-active);
}

.x-navigation .x-treelist-item-leaf .x-treelist-item-text,
.x-dynamicmenu .x-menu-item .x-menu-item-text {
    margin-left: 20px;
}
.x-treelist-floater .x-treelist-item-text {
    margin-left: 0;
}

.x-navigation .x-treelist-container .x-treelist-item-leaf .x-treelist-item-text {
    padding-left: 8px;
    text-indent: -8px;
    white-space: normal;
    word-break: break-all;
    word-wrap: normal;
    margin-right: 0px;
}

.x-navigation .x-treelist-container .x-treelist-item-leaf .x-treelist-item-text {
    padding-left: 8px;
    text-indent: -8px;
    white-space: normal;
    word-break: break-all;
    word-wrap: normal;
    margin-right: 0px;
}

.x-navigation .x-treelist-item-text.x-treelist-item-selected,
.x-navigation .x-treelist-item-leaf.x-treelist-item-text.x-treelist-item-selected,
.x-navigation .x-treelist-item-leaf.x-treelist-item.x-treelist-item-text.x-treelist-item-selected {
    font-weight: bold;
    color: var(--sp-navigation-left-color-active);
}
.x-treelistitem.x-treelist-item-selected > .x-treelist-row {
    background-color: var(--sp-navigation-left-background-color-selected) !important;
}

.x-treelistitem > .x-treelist-row-over {
    background-color: var(--sp-navigation-left-background-color-selected)!important;
    opacity: .8;
}

.x-treelistitem.x-treelist-item-selected > .x-treelist-row > * > .x-treelist-item-text,
.x-treelistitem.x-treelist-item-selected > .x-treelist-row > * > * > .x-treelist-item-text {
    font-weight: var(--sp-font-weight-bold);
    color: var(--sp-navigation-left-color-active);
}

.x-treelistitem.x-treelist-item-selected-parent > .x-treelist-row > * > .x-treelist-item-text,
.x-treelistitem.x-treelist-item-selected-parent > .x-treelist-row > * > * > .x-treelist-item-text {
    font-weight: var(--sp-font-weight-bold);
    color: var(--sp-navigation-left-color-active);
    background-color: var(--sp-navigation-left-background-color-selected) !important;
}

.x-treelist-item-selected {
    font-weight: var(--sp-font-weight-bold);
    color: var(--sp-navigation-left-color-active);
}

.x-menu .x-dynamicmenu {
    font-size: var(--sp-navigation-font-size);
}

.x-dynamicmenu .x-menu-item {
    cursor: pointer;
    background-color: var(--sp-navigation-left-background-color) !important;
    vertical-align: middle;
}
.x-dynamicmenu .x-menu-default,
.x-dynamicmenu .x-menu-body-default {
    border-color: var(--sp-navigation-left-background-color);
    background-color: var(--sp-navigation-left-background-color) !important;
}
.x-dynamicmenu .x-menu-body-default {
    background-color: var(--sp-navigation-left-background-color) !important;
    padding: var(--sp-navigation-left-floated-item-padding);
}
.x-dynamicmenu .x-menu-item.x-menu-item-over {
    background-color: var(--sp-navigation-left-background-color-selected) !important;
    opacity: .8;
}
.x-dynamicmenu .x-menu-item.x-menu-item-active {
    background-color: var(--sp-navigation-left-background-color-selected) !important;
    opacity: 1;
    font-weight: bold;
    color: var(--sp-navigation-left-color-active);
}
.x-dynamicmenu .x-menu-item-text {
    color: var(--sp-navigation-left-color);
    font-size: var(--sp-navigation-font-size);
    line-height: var(--sp-navigation-item-line-height);
}
.x-dynamicmenu .x-menu-no-icon a.x-menu-item-link .x-menu-item-text {margin-left: 5px;}
.x-dynamicmenu .x-menu-item-icon a.x-menu-item-link .x-menu-item-text {width: 0px; display: none;}

.x-treelistitem.x-treelist-item-selected-parent > .x-treelist-row > * > .x-treelist-item-icon,
.x-treelistitem.x-treelist-item-selected > .x-treelist-row > * > .x-treelist-item-icon {
    color: var(--sp-navigation-left-color-active);
}

.x-navigation .x-treelist-item-tool.x-treelist-item-selected ,
.x-navigation .x-treelist-item-tool.x-treelist-item-selected-parent {
    background-color: var(--sp-navigation-left-background-color-selected) !important;
    color: var(--sp-navigation-left-color-active);
}

.x-treelistitem.x-treelist-item-selected-parent > .x-treelist-row {
    background-color: var(--sp-navigation-left-background-color-selected) !important;
    color: var(--sp-navigation-left-color-active);
}

.x-navigation .x-treelist-item-tool.x-treelist-item-over,
.x-navigation .x-treelist-item-tool.x-treelist-row-over {
    background-color: var(--sp-navigation-left-background-color-selected) !important;
    opacity: .8;
    font-size: 32px;
    background-size: 55px;
    color: var(--sp-navigation-left-color-active);
}

.x-navigation .x-treelist-item-tool:before {
    line-height: 60px;
}

.x-navigation.x-treelist-item-floated > .x-treelist-row {
    font-size: var(--sp-navigation-font-size);
    color: var(--sp-navigation-left-color) !important;
    background-color: var(--sp-navigation-left-background-color) !important;
    padding: var(--sp-navigation-left-floated-item-padding);
}

.x-navigation .x-treelist-item-floated > .x-treelist-row > .x-treelist-item-text {
    font-size: var(--sp-navigation-font-size);
    font-weight: normal;
    color: var(--sp-navigation-left-color);
    line-height: var(--sp-navigation-left-line-height);
}

.x-treelist-floater .x-treelist-item .x-treelist-item-text {
    font-size: var(--sp-navigation-font-size);
}

.x-navigation  .x-treelist-item-floated, .x-navigation .x-treelist,
.x-treelist-floater, .x-navigation.x-treelist-item-floated > .x-treelist-row,
.x-navigation  .x-treelist-item.x-treelist-item-floated {
    background-color: var(--sp-navigation-left-background-color) !important;
    font-size: var(--sp-navigation-font-size);
    padding: var(--sp-navigation-left-floated-item-padding);
    color: var(--sp-navigation-left-color);
    display: table;
    white-space: normal;
    word-break: break-all;
    word-wrap: normal;
    min-width: 250px;
}

.x-navigation .x-treelist-item-floated .treelist-container {
    background-color: var(--sp-navigation-left-background-color) !important;
    padding: var(--sp-navigation-left-floated-item-padding);
    color: var(--sp-navigation-left-color);
}

.x-treelist-floater .x-treelist-container .x-treelist-item-text {
    margin-left: 18px;
}

.x-navigation .x-treelist-item-floated > * > * > .x-treelist-item-text,
.x-navigation .x-treelist-item-floated > * > * > * > .x-treelist-item-text {
    color: var(--sp-navigation-left-color);
}

.x-navigation .x-treelist-item-icon, .x-treelist-item-tool {
    color: var(--sp-navigation-left-color);
}

.x-treelistitem.x-treelist-item-selected-parent > .x-treelist-row > * > .x-treelist-item-icon,
.x-treelistitem.x-treelist-item-selected > .x-treelist-row > * > .x-treelist-item-icon {
    color: var(--sp-navigation-left-color-active);
}
.x-treelistitem.x-treelist-item > .x-treelist-row {
    color: var(--sp-navigation-left-color);
    background-color: var(--sp-navigation-left-background-color);
}

.x-treelist-item-floated {
    margin: 5px 5px 5px 5px;
}
.x-treelist-row-over > * > .x-treelist-item-text, .x-treelist-row > * > .x-treelist-item-text,
.x-treelist-row-over .x-treelist-item-text, .x-treelist-row .x-treelist-item-text {
    color: var(--sp-navigation-left-color);
}

.treelist-item-tool-over {
    color: var(--sp-navigation-left-color);
    background-color: var(--sp-navigation-left-background-color-selected) !important;
    opacity: .8;
    font-size: 32px;
    background-size: 55px;
}

.x-navigation.x-treelist-item-floated {
    width: 100% !important;
    font-size: var(--sp-navigation-font-size);
}

.x-navigation .x-treelist-floater .x-treelist-row.submenu .x-treelist-item-expander,
.x-treelist-item-floated > .x-treelist-row.submenu > * > .x-treelist-item-expander,
.x-treelist-row.submenu > * > .x-treelist-item-expander
{
    display: block;
    background-position: 0 -178px !important;
    background-repeat: no-repeat;
}

.x-navigation-toolbar .x-btn-icon-el {
    background-image: none;
    color: var(--sp-navigation-left-color-active);
}

.x-navigation-toolbar .x-btn-icon-el.font-small {
    font-size: 19px;
    height: 16px;
}

.custom-slide .x-splitter-horizontal {
    background-color: transparent;
}

.custom-slide.x-splitter-focus, .custom-slide.x-splitter-focus:after {
    outline: none;
    border: 0;
}

.custom-slide .x-collapse-el .x-layout-split-top, .custom-slide .x-layout-split-bottom {
    background-color: #e9e9e9!important;
    height: 15px!important;
    width: 48px!important;
    opacity: .65;
}

.x-css-shadow {
    display: none;
}

.x-splitter .custom-slide .x-splitter-horizontal .bottom,
.custom-slide .bottom, .custom-slide.x-collapse-el .bottom,
.x-splitter .custom-slide .x-layer .x-splitter-horizontal .top
{
    top: 60px!important;
}

.gloss {
    opacity: .75;
}

.custom-slide.x-layout-split-top,
.custom-slide.x-layout-split-bottom,
.custom-slide.x-collapse-el,
.custom-slide.x-splitter-horizontal {
    height: 15px!important;
}

.x-btn.fullscreentoggle.x-btn-default-toolbar-small,
.x-navigation-toolbar .fullscreentoggle.x-btn.x-btn-menu-active.x-btn-default-toolbar-small,
.x-navigation-toolbar .fullscreentoggle.x-btn.x-btn-pressed.x-btn-default-toolbar-small,
.x-navigation-toolbar .fullscreentoggle.x-btn-over.x-btn-default-toolbar-small,
.x-navigation-toolbar .fullscreentoggle.x-btn-focus.x-btn-default-toolbar-small {
    padding: 0px 8px 0px 2px!important;
}

.custom-slide.x-splitter-collapsed .x-layout-split-top {
    background-color: #e9e9e9!important;
    background-image: url(/image/extjs/spirent/arrow-204-8.png) !important;
    background-position: center center;
    background-repeat: no-repeat;
    height: 15px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top: none;
    border-bottom: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    opacity: .9;
}

.custom-menu-btn.x-btn-disabled {
    opacity: 1 !important;
    pointer-events: none;
}

/* extjs 7.7 styles for the left side menu */
.x-navigation .x-treelist-item-floated > .x-treelist-row-over > * > .x-treelist-item-text {
    color: var(--sp-navigation-left-color-active);
}
.x-navigation .x-treelist-highlight-path .x-treelist-item-over > * > * > .x-treelist-item-icon {
    color: var(--sp-navigation-left-color-active);
}
.x-navigation .x-treelist-highlight-path .x-treelist-item-over > * > * > .x-treelist-item-text {
    color: var(--sp-navigation-left-color);
}
.x-navigation .x-treelist-highlight-path .x-treelist-item-over > * > * > .x-treelist-item-expander {
    color: var(--sp-navigation-left-color);
}
.x-navigation .x-tool-expand-bottom:before {
    content: '\f0da';
}
.x-navigation .x-tool-collapse-top:before {
    content: '\f0d9';
}
.x-treelist-item-expander {
    color: var(--sp-navigation-left-color);
}


/* app/component/view.css */

.x-sp-view {
    -webkit-box-shadow: 1px 1px 4px 1px rgba(212, 212, 212, 0.49);
    -moz-box-shadow: 1px 1px 4px 1px rgba(212, 212, 212, 0.49);
    box-shadow: 1px 1px 4px 1px rgba(212, 212, 212, 0.49);
}

.x-sp-view .x-panel-header-title-default-framed,
.x-sp-view .x-panel-header-title-default {
    margin: 8px 15px;
    color: #3d474b;
    font-size: 17px;
    border-radius: 2px;
    padding: 2px;
    border-width: 1px !important;
    border-color: #bfbfbf;
    background-image: none;
}

.x-sp-view .x-panel-header-default,
.x-sp-view .x-panel-header-default-framed {
    background-color: #fafafa;
    border-color: #e9e9e9;
}

.x-sp-view .x-panel-header-default-horizontal .x-tool-after-title {
    left: 1055px !important;
}

.x-sp-view .x-panel-body-default {
    border-top: 1px solid #e9e9e9 !important;
}

.x-sp-view .x-panel-body-default {
    background-color: #ffffff;
}

.x-sp-view .x-panel-header-title-default {
    font-weight: 600;
}

.x-sp-view .x-panel-header-default-top,
.x-sp-view .x-panel-header-default-framed-top {
    padding: 0;
    background-color: #fafafa !important;
    border-top-color: transparent;
    border-left-color: transparent;
    border-bottom-color: #e9e9e9;
    border-right-color: transparent;
}

.x-panel .x-sp-view {
    border: #e9e9e9 1px solid;
    margin-bottom: 20px;
    margin-left: 30px;
    margin-right: 30px;
}

.x-sp-view .x-panel-body-default {
    border: 0px;
}

.x-sp-view .x-panel-header-title-default > .x-title-text-default {
    padding: 0;
}


/* app/component/grid.css */

.x-column-boolean-renderer-on {
    height: 14px;
    padding-top: -1px;
    width: 100%;
    background: transparent url(/image/extjs/gray/grid/checked.gif) no-repeat center center;
}

.x-column-boolean-renderer-off {
    height: 14px;
    padding-top: -1px;
    width: 100%;
    background: transparent url(/image/extjs/gray/grid/unchecked.gif) no-repeat center center;
}

.x-column-header-flags {
    font-size: 11px;
    float:right;
    margin-bottom: -30px;
    margin-left: 2px;
    margin-right: 0px;
    vertical-align: top;
    color : #c5c5c5;
}

.x-column-header-flags i {
    margin-left: 2px;
}

.x-column-header-over .x-column-header-flags {
    display:none
}

.x-column-header-glyph-p1.x-column-header-align-center .x-column-header-text {
    padding-right: 4px;
}

.x-column-header-glyph-p2.x-column-header-align-center .x-column-header-text {
    padding-right: 8px;
}

.x-column-header-glyph-p3.x-column-header-align-center .x-column-header-text {
    padding-right: 12px;
}

.x-column-header-glyph-p4.x-column-header-align-center .x-column-header-text {
    padding-right: 16px;
}

.x-column-header-glyph-p1.x-column-header-align-right .x-column-header-text {
    padding-right: 5px;
}

.x-column-header-glyph-p2.x-column-header-align-right .x-column-header-text {
    padding-right: 10px;
}

.x-column-header-glyph-p3.x-column-header-align-right .x-column-header-text {
    padding-right: 15px;
}

.x-column-header-glyph-p4.x-column-header-align-right .x-column-header-text {
    padding-right: 20px;
}

.x-column-link {
    color: var(--sp-branding-color-432c) !important;
}

.x-column-link:hover {
    color: var(--sp-branding-color-431c) !important;
}


/* app/component/fields.css */

/* Disable items are to gray in extjs */

/*.x-item-disabled .x-form-item-label,*/
/*.x-item-disabled .x-form-field,*/
/*.x-item-disabled .x-form-cb-label,*/
/*.x-item-disabled .x-form-trigger {*/
/*    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80);*/
/*    opacity: 0.8;*/
/*}*/

.x-form-item-default.x-item-disabled {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50) !important;
    opacity: 0.6 !important;
}

/* Marks a field as required */

.x-label-required {
    margin: -6px 0 0 0px;
    color: red;
    font-size: larger;
    font-weight: bold
}

.x-label-value-changed {
    font-weight: bold
}

/* Hide the "required" label dynamically by adding this style */

.x-label-required-hidden .x-label-required  {
    display: none;
}

.x-label-help {
}

.x-label-help-icon {
    margin: -3px 0 0 0px;
    padding: 0;
    vertical-align: top;
    font-size: 9px;
    color: #3892d3
}

.x-action-label {
    cursor: pointer !important;
}

.x-searchable {
    font-weight: bold;
}

.x-form-cb-null .x-form-checkbox-default:before {
    font: 14px / 1 "Font Awesome 6 Pro";
    content: "\f00c";
}

.x-form-spinner-default {
    width: 16px;
}

.x-form-icon-text:before {
    position: absolute;
    height: 100%;
    z-index: 9999;
    left: 5px;
    font-size: 12px;
    top: 25%;
}

.x-form-icon-text .x-form-text {
    padding-left: 20px;
}

.x-form-validation-invalid {
    border: 1px solid #cf4c35 !important;
}


/* app/component/resource-panel.css */

/*
    First Resource Panel inside content area
*/

.x-sp-content > .x-sp-panel-resource > .x-panel-bodyWrap > .x-panel-body-default {
    background: transparent !important;
}

.x-sp-content > .x-sp-panel-resource > .x-panel-bodyWrap > .x-panel-body-default > .x-sp-dataset {
    margin: 1px 5px 5px 5px !important;
}

/*
    Resource Panel
 */

/*.x-sp-panel-resource {*/
/*    background: rgb(246, 244, 241);*/
/*}*/

.x-sp-panel-resource > .x-panel-header {
    background-color: #ffffff;
    margin-top: 5px;
    margin-bottom: 5px;
}

.x-sp-panel-resource > .x-panel-header .x-tool-tool-el {
    background-color: #ffffff !important;
    color: #3d474b;
    width: 24px !important;
    height: 24px !important;
    font-size: 18px !important;
}

.x-sp-panel-resource > .x-panel-header .x-tool-over .x-tool-tool-el {
    opacity: 0.5;
}

.x-sp-panel-resource .x-panel-header-default-horizontal {
    padding: 15px 5px 15px 5px;
}

.x-sp-panel-resource .x-panel-header-title-default {
    padding-right: 10px;
    font-size: 18px !important;
    font-weight: 500;
    color: #3d474b;
    line-height: 22px;
}

/*.x-sp-panel-resource > .x-panel-bodyWrap > .x-panel-body {*/
/*    background: rgb(246, 244, 241);*/
/*    border-color: rgb(246, 244, 241);*/
/*}*/

/*
    Resource Panel Tabs
 */

.x-sp-panel-resource .x-tab-bar-default-top > .x-tab-bar-body-default {
    padding-left: 4px;
}

.x-sp-panel-resource .x-tab-inner-default {
    color: #3d474b;
    font: 300 11px MS Reference Sans Serif, Geneva, sans-serif;
}

.x-sp-panel-resource .x-tab-bar {
    background-color: transparent;
    margin: 0 0;
}

.x-sp-panel-resource .x-tab.x-tab-default {
    border: 1px solid #e9e9e9;
    border-bottom: none;
    background-color: #f5f5f5;
    font-weight: normal;
}

.x-sp-panel-resource .x-tab.x-tab-active.x-tab-default {
    border-color: #e9e9e9;
    border-bottom: none;
    background-color: #ffffff;
    font-weight: bold;
}

.x-sp-panel-resource .x-tab-active .x-tab-inner-default {
    font-weight: bold;
    background-color: #ffffff;
}

.x-sp-panel-resource .x-tab-over .x-tab-inner-default {
    /*background-color: #eef6f6;*/
}

.x-sp-panel-resource .x-tab-over.x-tab-default .x-tab-inner-default {
    color: #666666;
    /*font-weight: bold;*/
    background-color: #eef6f6;
}

.x-sp-panel-resource .x-tab-over.x-tab-default {
    background-color: #eef6f6;
}

.x-sp-panel-resource .x-tab.x-tab-active.x-tab-default .x-tab-inner-default {
    color: #666666;
}

.x-sp-panel-resource .x-tab.x-tab-over.x-tab-active.x-tab-default .x-tab-inner-default {
    background-color: transparent;
}

.x-sp-panel-resource .x-tabpanel-child .x-panel-body-default {
    border: 1px solid #e9e9e9;
    background-color: #ffffff;
    padding: 0px;
}

.x-sp-panel-resource.x-toolbar-default, .x-reportoptions .x-toolbar-default {
    background-color: #ffffff;
}

.x-sp-panel-resource .x-tab.x-tab-active.x-tab-default .x-tab-icon-el {
    color: black;
}

.x-sp-panel-resource .x-tab-default-top.x-tab-focus,
.x-sp-panel-resource .x-tab.x-tab-focus,
.x-sp-panel-resource .x-tab.x-tab-focus.x-tab-default,
.x-sp-panel-resource .x-grid-item-focused,
.x-sp-panel-resource .x-column-header.x-column-header-focus {
    box-shadow: none;
}



/* app/component/dataset.css */

/*
    Data Set Panel
 */

.x-sp-dataset {
    background: #ffffff;
}

.x-sp-dataset.x-panel-default .x-grid {
    border: 1px solid var(--sp-grid-panel-border-color);
}

.x-sp-dataset.x-panel-default .x-grid.x-grid-locked {
    border: none;
}


.data-set-filter-full {
    color: #3892d3 !important;
}

.data-set-filter-empty {
}

/*
    Data Set Grid
 */


/**
    Data Set Toolbar
 */

.x-sp-dataset .x-toolbar-default {
    --sp-toolbar-padding: 3px 3px 3px 3px;
}

.x-sp-dataset .btn-icon-font-grow {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.x-sp-dataset .x-btn-button:hover .btn-icon-font-grow, .x-sp-dataset .x-btn-button:focus .btn-icon-font-grow, .x-sp-dataset .x-btn-button:active .btn-icon-font-grow:active {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

.x-sp-dataset .x-item-disabled:hover .btn-icon-font-grow, .x-sp-dataset .x-item-disabled:focus .btn-icon-font-grow, .x-sp-dataset .x-item-disabled:active .btn-icon-font-grow:active {
    -webkit-transform: scale(1);
    transform: scale(1);
    color: #666666;
}

/**
    Data Set Tab
 */


/**
    Data Set Form
 */

/*
    Grid Row Expander
 */

.x-sp-dataset .expanded-row-details {
    margin-left: 0px;
    margin-bottom: 0.5em;
    padding-left: 1em;
    height: 100%;
}

.x-sp-dataset .expanded-row-status {
    padding: 5px;
    font-size: larger;
    position: relative;
    color: white;
}

.x-sp-dataset .expanded-row-status-ok {
    background-color: #48974f;
}

.x-sp-dataset .expanded-row-status-stale {
    background-color: #c6bc07;
}

.x-sp-dataset .expanded-row-status-missing {
    background-color: #c90000;
}

.x-sp-dataset .expanded-row-details .section {
    float: left;
    text-align: center;

    padding: 3px;
    margin-right: 5px;
    white-space: nowrap;

    font-size: larger;
    font-weight: bold;
}

.x-sp-dataset .expanded-row-details .left-header {
    float: left;
    text-align: center;

    padding: 3px;
    margin-top: 18px;
    width: 25px;
    white-space: nowrap;

    font-size: larger;
    font-weight: bold;

    -webkit-transform: rotate(270deg);
    -webkit-transform-origin: right top;
    -moz-transform: rotate(270deg);
    -moz-transform-origin: right top;
    -ms-transform: rotate(270deg);
    -ms-transform-origin: right top;
    -o-transform: rotate(270deg);
    -o-transform-origin: right top;
    transform: rotate(270deg);
    transform-origin: right top;
}

.x-sp-dataset .expanded-row-details p.parameter {
    margin-bottom: 0.1em;
    margin-left: 2em;
    margin-top: 0.1em;
}

.x-sp-dataset .expanded-row-details p.parameter span.name {
    font-weight: bold;
    font-style: italic;
}

.x-sp-dataset .expanded-row-details p.parameter span.value {
    margin-left: 0.3em;
}

.x-sp-dataset .expanded-row-details p.section {
    margin-bottom: 0.3em;
    font-size: larger;
    font-weight: bold;
}

.x-sp-dataset .expanded-row-details p.title {
    font-size: 13px;
    margin-bottom: 0.1em;
    font-weight: bold;
}

.x-sp-dataset .expanded-row-details p.value {
    margin-left: 1em;
    margin-bottom: 0.3em;
    text-wrap: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.x-sp-dataset .expanded-row-details p.title span {
    font-weight: normal;
}

.x-sp-dataset .expanded-row-details p.value-small {
    font-size: small;
}

.x-sp-dataset .expanded-row-details p.footnote {
    font-weight: small;
    font-style: italic;
}

.x-sp-dataset .expanded-row-details p.value-mono {
    font-family: Consolas, "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    margin-left: 1em;
    margin-bottom: 0.3em;
}

.x-sp-dataset .expanded-row-details p.value-pre {
    margin-left: 1em;
    white-space: pre-wrap;
}

.x-sp-dataset .expanded-row-details span.value-bold {
    font-weight: bold !important;
}

.x-sp-dataset .expanded-row-details span.value-centered {
    display: inline-block;
    text-align: center;
    margin:0 auto;
}

.x-sp-dataset .expanded-row-details table {
    border-spacing: 3px;
    border-collapse: separate;
    margin: 0px;
    font-size: 10px;
    line-height: 13px;
}

.x-sp-dataset .expanded-row-details td {
    font-size: 11px !important;
}

.x-sp-dataset .expanded-row-details td.center {
    text-align: center !important;
}

.x-sp-dataset .expanded-row-details td.right {
    text-align: right !important;
}

.x-sp-dataset .expanded-row-details table tr.odd {
    background-color: #ffffff;
}

.x-sp-dataset .expanded-row-details table tr.even {
    background-color: #f9f9f9;
}

.x-sp-dataset .expanded-row-details td img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.x-sp-dataset .expanded-row-details table th {
    font-size: 12px !important;
    font-weight: bold !important;
}

.x-sp-dataset .expanded-row-details table th, .x-sp-dataset .expanded-row-details table td {
    text-align: left !important;
    vertical-align: top !important;
    padding: 2px !important;
    font-size: 11px !important;
    border : none !important;
}

.x-sp-dataset .expanded-row-column-details {
}

.x-sp-dataset .expanded-row-column-details span.name {
    font-weight: bold;
    font-style: italic;
}

.x-sp-dataset .expanded-row-column-details span.value {
}


/* app/component/form/timezone.css */

.x-sp-timezone-field {

}

.x-sp-timezone-field-list {

}

.x-sp-timezone-field-list .x-sp-timezone-item {
    display: flex;
    flex-direction: row;
}

.x-sp-timezone-field-list .x-sp-timezone-separator {
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #d1d1d1;
    margin: 4px 0;
    padding: 1px 1px;
    cursor: pointer;
}

.x-sp-timezone-field-list .x-sp-timezone-item .x-sp-timezone-text {
    padding: 2px 1px;
    flex-grow: 1;
}

.x-sp-timezone-field-list .x-sp-timezone-item .x-sp-timezone-offset {
    display: inline-block;
    color: rgb(36, 41, 46);
    background: rgb(244, 245, 245);
    line-height: 18px;
    margin: 1px 5px;
    padding: 0 5px;
    border-radius: 2px;
    font-size: xx-small;
}


/* app/component/form/datetime.css */

:root {
    --sp-datetime-picker-font-size: 12px;
    --sp-datetime-picker-fieldset-background-color: #ffffff;
}

/**
    Date, Time and Date/Time fields
 */

.x-sp-date-field .x-form-date-trigger {
    font-size: 14px;
    font-family: 'Font Awesome 6 Pro';
}

.x-sp-date-field .x-form-date-trigger:before {
    content: '\f073';
}

.x-sp-time-field .x-form-time-trigger {
    font-size: 14px;
    font-family: 'Font Awesome 6 Pro';
    font-weight: 400;
}

.x-sp-time-field .x-form-time-trigger:before {
    content: '\f017';
}

/**
    Date/Time Range
 */

.x-sp-datetime-range-field .x-form-datetime-range-trigger {
    font-size: 14px;
    font-family: 'Font Awesome 6 Pro';
}

.x-sp-datetime-range-field .x-form-datetime-range-trigger:before {
    content: '\f073';
}

.x-sp-datetime-range-picker .x-form-item-label-text {
    font-size: var(--sp-datetime-picker-font-size);
}

.x-sp-datetime-range-picker .x-fieldset {
    background-color: var(--sp-datetime-picker-fieldset-background-color);
    padding: 5px 5px 5px 5px;
}

.x-sp-datetime-range-picker .x-grid-item-over .x-grid-td {
   cursor : pointer !important;
}