/* MODELS UI UPDATE 2023-12 (Sanjay Tickoo + Gershon Koral) */
/* Version 7 */
/* VARIABLES */
:root {
    --primary: #3366FF;
    --body-text: #222b45;
    --primary-100: #F2F6FF;
    --primary-200: #D9E4FF;
    --primary-300: #A6C1FF;
    --primary-400: #598BFF;
    --primary-500: #3366FF;
    --primary-700: #1A34B8;
    --primary-900: #091C7A;
    --dark: #0d284f;
    --basic-200: #F7F9FC;
    --basic-300: #EDF1F7;
    --boxshadow: #0000000d 0 3px 4px;
    --borderColor: #dde;
    --green: #439D44;
    --green-100: #439D4410;
    --green-300: #439D4430;
    --orange: #FF8C02;
    --orange-100: #FF8C0210;
    --orange-300: #FF8C0230;
    --red: #FF5775;
    --red-100: #FF577515;
    --red-300: #FF577535;
    --secondary: #8F9BB3;
}

/* Global */
body, #detailContainer {
    background-color: var(--primary-100);
}

.container.nav-media {
    max-width: 100%;
    margin: 0 auto;
}

#detailContainer {
    max-width: 100%;
    padding: 0 30px 72px !important;
}

.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand, a#linkLogo.navbar-brand img {
    margin-left: 0 !important;
}

.page-header {
    border: 0;
    margin: 0 auto;
    padding: 16px 0px 16px 0px;
}

    .page-header h2 {
        font-weight: 600;
        margin-right: 8px;
    }

a {
    color: var(--primary);
}

.slide-icon {
    color: var(--primary) !important;
}

.btn-run-test {
    background: var(--primary) !important;
    color: white !important;
}

.btn-submit, .btn-table-submit {
    background-color: var(--primary);
    border-radius: 4px !important;
    color: white;
    font-weight: 500;
    margin: 0;
}


    .btn-submit:hover, .btn-submit:focus, .btn-submit:active, .btn-submit.focus {
        color: white !important;
        background-color: var(--primary-700) !important;
    }

.btn-primary, #btnSendRequest, a#filterResults, a#adjustFilters {
    background-color: var(--primary-100) !important;
    border-radius: 4px !important;
    color: var(--primary) !important;
    font-weight: 500;
    border: 1px solid var(--primary) !important;
}

a#filterResults, a#adjustFilters {
    background-color: white !important;
}

.btn-primary:hover, #btnSendRequest:hover, .btn-primary:focus, #btnSendRequest:focus, .btn-primary:active, #btnSendRequest:active {
    background-color: var(--primary-200) !important;
}

.btn-table-submit:hover, .btn-table-submit:focus, .btn-table-submit.focus {
    background: var(--primary-700) !important;
    color: white !important;
}

.alert {
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap;
}

.alert-success {
    background: var(--green) !important;
    color: white !important;
    border-color: var(--green);
}

.alert-warning {
    background: var(--orange) !important;
    color: white !important;
    border-color: var(--orange);
}

.alert-danger {
    background: var(--red) !important;
    color: white !important;
    border-color: var(--red);
}

.excel-tag, .composite-tag, .web-service-tag, .python-tag, .sql-tag {
    font-size: 12px !important;
    text-transform: uppercase !important;
    padding: 3px 6px !important;
    font-weight: 700 !important;
}

.label-info {
    background: var(--secondary) !important;
    color: white !important;
}

pre {
    background: white !important;
    border-color: var(--primary-300)
}

.btn-close-filter {
    padding: 6px 12px !important;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}

/* Tables */
table.table.datatable {
    margin-bottom: 12px !important;
    min-height: auto !important;
    background: white !important;
    box-shadow: var(--boxshadow);
    border: 1px solid white;
}

    table.table.datatable th, table th {
        text-transform: uppercase !important;
        font-size: 13px !important;
    }

    table.table.datatable td {
        font-size: 14px;
    }

table.table > thead {
    background: var(--basic-300);
}

.table-striped > tbody > tr:hover {
    background: var(--primary-100) !important;
}

    .table-striped > tbody > tr:hover td {
        border-color: white !important;
    }

        .table-striped > tbody > tr:hover td a.tr-link {
            color: var(--primary) !important;
        }

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

.pagination > li > a, .pagination > li > span {
    color: var(--primary) !important;
}

    .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
        background: var(--basic-200) !important;
    }

/* Modals */
.modal-header, .modal-header h6 {
    font-size: 13px !important;
    font-weight: 600;
    color: var(--body-text) !important;
    text-transform: uppercase;
}

.modal-content {
    border-radius: 6px !important;
}

/* Create New Model */
.model-type-section {
    background: var(--basic-200) !important;
    box-shadow: var(--boxshadow) !important;
    border: 1px solid var(--borderColor);
    text-transform: uppercase;
    font-weight: 700 !important;
}

.model-type-sub-section {
    background: white !important;
}

    .model-type-sub-section:hover {
        background: var(--basic-200) !important;
        box-shadow: var(--boxshadow);
    }

    .model-type-sub-section span {
        font-size: 16px;
        font-weight: 500;
        color: var(--body-text);
    }

    .model-type-sub-section:hover span {
        color: var(--primary);
    }

    .model-type-sub-section span.pull-left {
        padding: 4px 8px !important;
        font-size: 13px !important;
        font-weight: 700;
    }

.checkboxCreateApi input ~ .checkmark {
    background: white;
    border-radius: 90px;
    border: 1px solid var(--borderColor);
}

    .checkboxCreateApi input ~ .checkmark:after {
        border-color: var(--secondary);
    }

.checkboxCreateApi input:checked ~ .checkmark {
    background: var(--green);
    color: white;
    border-radius: 90px;
    border: 1px solid var(--green);
}

    .checkboxCreateApi input:checked ~ .checkmark:after {
        border-color: white !important;
    }

/* Model Editor */
#tabModel1 label {
    margin-bottom: 16px !important;
}

#tabModel1 .input-section-content-text {
    text-transform: uppercase;
    color: var(--secondary) !important;
}

#tabModel1 #tbInputs .property-dialog-element {
    background: var(--primary-100) !important;
    border: 1px solid var(--primary-300) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#tabModel1 #tbOutputs .property-dialog-element {
    background: var(--orange-100) !important;
    border: 1px solid var(--orange-300) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#modelSection .slick-item {
    background: white !important;
    font-size: 12px !important;
    padding: 15px !important;
    border: 1px solid var(--borderColor) !important;
    box-shadow: var(--boxshadow) !important;
    border-radius: 6px;
    cursor: grab !important;
}

#modelSection #modelSectionButton.slick-button, #modelSection #controlSectionButton.slick-button {
    background-color: var(--primary) !important;
    color: white !important;
}

#modelSection .slick-item p, #modelSection .slick-item .version-label {
    text-transform: none !important;
    font-size: 13px !important;
    width: 95%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#inputSection, #outputSection {
    border: 1px solid var(--borderColor);
}

.input-section-content-text, .output-section-content-text, .drop-section-content-text {
    font-size: 13px;
    color: var(--secondary) !important;
}

/*  Model Tabs > TEST, TEST SETS */
.test-row {
    background: var(--basic-200) !important;
    border-radius: 4px;
    border-color: var(--borderColor) !important;
}

.test-th {
    color: var(--secondary) !important;
    text-transform: uppercase;
    font-size: 13px;
}

.test-row .test-td {
    color: var(--body-text);
    font-size: 13px;
}
/* Json Editor */
.jsoneditor-menu {
    background: var(--primary) !important;
    border-color: white !important;
}

.ace-jsoneditor .ace_gutter, .jsoneditor-statusbar {
    background: var(--basic-300) !important;
}

#historyLink {
    color: var(--secondary);
    text-transform: uppercase;
    margin-right: 16px;
    text-decoration: none !important;
}

    #historyLink a {
        font-size: 12px !important;
        line-height: 24px;
        font-weight: 600 !important;
        border: 1px solid var(--primary);
        padding: 2px 6px;
        border-radius: 4px;
    }

        #historyLink a:hover {
            background: var(--primary);
            color: white;
            text-decoration: none !important;
        }

/* Model Tab > INTEGRATE */
/* Badges */

.doc-holder:has(.exponation) {
    margin-bottom: 20px !important;
}

.badge {
    padding: 6px 12px !important;
    border-radius: 6px !important;
    background: var(--primary);
}

.integration .exponation {
    background: var(--basic-200);
    border: 1px solid var(--borderColor);
    margin-top: 8px;
}

h5[style="font-weight:bold"] {
    text-transform: uppercase;
    margin-top: 20px;
}

h5[style="font-weight:bold;color:#1AAAE2;"] {
    color: var(--primary) !important;
}

/* Model Tab > MONITOR */
.doc-holder[style="text-align: right;background-color:#E9ECF1;"] {
    background: var(--basic-200) !important;
}

a#filterResults {
}

label[style="color: #1AAAE2;font-weight: bold;"] {
    color: var(--secondary) !important;
}

.btn-close-filter {
    background: var(--primary) !important;
}

.box-tools {
    background: var(--basic-200);
}

.form-group-sm .bootstrap-select.btn-group.form-control .dropdown-toggle, input[name="RequestContent"], input[name="Name"], input[name="SessionIdentifier"], input[type="datetime-local"] {
    border: 1px solid var(--secondary) !important;
    border-radius: 6px !important;
    color: var(--body-text) !important;
}

    .form-group-sm .bootstrap-select.btn-group.form-control .dropdown-toggle:hover {
        border-color: var(--primary) !important;
        background: white !important;
    }

.form-group-sm .form-control [aria-label="Search"] {
    border: 1px solid var(--borderColor) !important;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    background: var(--primary);
}

.dropdown-submenu:hover .dropdown-menu {
    display: block;
    position: absolute;
    right: 100%; /* Position to the right of the parent menu */
    top: 0;
    left: auto;
    transform: translateX(5);
}

.btn-applyfilter {
    background: var(--primary);
    border-radius: 6px;
    max-width: 100%;
    text-align: center !important;
    font-weight: bold;
    text-transform: uppercase !important;
    white-space: nowrap;
    height: 40px;
    margin-top: 15px !important;
}

.btn-resetfilter {
    background: var(--secondary);
    border-radius: 6px;
    margin-top: 15px !important;
    text-transform: uppercase;
    text-align: center !important;
    font-weight: 800;
}

/* Modal > Version Selection */
#versionSelection.modal.left .modal-dialog {
    width: 90% !important;
    max-width: 1500px;
    left: 0 !important;
    margin: 0 auto !important;
    min-width: 1200px !important;
}

    #versionSelection.modal.left .modal-dialog .slimScrollDiv, #versionSelection.modal.left .modal-dialog #selectVersionDiv {
        height: 600px !important;
    }

#versionSelection .modal-content {
    border-radius: 6px !important;
}

#versionSelection .modal-header {
    padding: 20px 15px 15px !important;
    border-radius: 6px 6px 0 0;
    background: var(--primary-100) !important;
}

    #versionSelection .modal-header button.close {
        position: absolute;
        right: 15px;
        background: var(--secondary);
        padding: 0 !important;
        border-radius: 80px;
        width: 28px;
        height: 28px;
        display: block !important;
        color: white !important;
        margin-top: -3px !important;
        z-index: 2;
        opacity: .75;
    }

        #versionSelection .modal-header button.close:hover {
            opacity: 1;
        }

    #versionSelection .modal-header div {
        margin: 0 24px 0 0 !important;
        z-index: 1;
    }

    #versionSelection .modal-header h3 {
        font-size: 15px !important;
        margin: 0 !important;
        text-transform: uppercase !important;
        opacity: .9 !important;
        font-weight: 600 !important;
    }

    #versionSelection .modal-header label[for="version-filter"] {
        margin: 0 !important;
        font-size: 13px !important;
        opacity: .7;
        margin-right: 12px !important;
    }

#versionSelection #tb-version-selector th {
    font-size: 12px !important;
    text-transform: uppercase;
    color: var(--secondary) !important;
    font-weight: 600 !important;
    white-space: nowrap;
}

#versionSelection #tb-version-selector td, #versionSelection #tb-version-selector label.enable-api {
    font-size: 13px !important;
}

    #versionSelection #tb-version-selector td:has(.success-calls), #versionSelection #tb-version-selector td:has(.enable-api) {
        white-space: nowrap;
    }

        #versionSelection #tb-version-selector td:has(.enable-api) .toggle {
            margin: 0 4px 0 0 !important;
        }

    #versionSelection #tb-version-selector td.edit-tag i {
        background: var(--basic-200) !important;
        color: var(--green) !important;
    }

#versionSelection .plan-tag {
    line-height: 1.8 !important;
}

.div-version-selection-control > div {
    box-shadow: var(--boxshadow);
    border-radius: 6px;
}

.bootstrap-tagsinput {
    background: var(--basic-200) !important;
    border: 1px solid var(--primary-300) !important;
    border-radius: 6px;
    margin-bottom: 12px !important;
}

    .bootstrap-tagsinput .tag, .endpoint-tag {
        background: var(--primary);
        padding: 3px 8px 6px;
    }

.close-version-selection-control {
    background: var(--red);
    height: auto;
    padding: 4px 8px 6px;
    font-size: 13px;
}

/* Header/Navbar */
.navbar-inverse {
    box-shadow: var(--boxshadow);
    border-bottom: 1px solid var(--borderColor);
    height: auto;
    padding-top: 10px;
}

a.navbar-brand {
    padding: 15px 40px 0 30px !important;
}

.navbar-inverse .navbar-nav > li > a {
    text-transform: uppercase;
}

    .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > li > a:hover {
        color: var(--primary) !important;
        border-color: var(--primary);
        text-transform: uppercase;
    }

li.dropdown {
    margin: 0 !important;
}

    li.dropdown:has(ul.divider) {
        padding-top: 6px !important;
    }

a.dropdown-toggle {
    font-size: 13px;
    font-weight: 700 !important;
    line-height: 1.5;
}

div:has(.tenant-select-button) {
    margin-top: 0 !important;
}

a.tenant-select-button {
    color: var(--primary-500) !important;
    text-transform: uppercase;
}

.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover {
    background: var(--primary-100);
    color: var(--primary);
}

#tenantSelectInput {
    color: var(--body-text);
}

/* Footer */
nav.navbar-fixed-bottom {
    background: var(--dark) !important;
    font-size: 12px;
    border: 0 !important;
}

.footer-info {
    color: white !important;
    opacity: .5;
}

.footer-links a {
    color: white !important;
    opacity: .5;
}

    .footer-links a:hover {
        text-decoration: none;
        opacity: .95;
    }

/* DASHBOARD */
.dashboardMetrics, #dashboardSection1 {
    box-shadow: var(--boxshadow);
    border: 1px solid var(--borderColor);
    border-radius: 4px;
}

.dashboardCallsCount div {
    font-size: 48px;
    color: var(--body-text) !important;
    padding-top: 10px;
}

.dashboardCallsLabel {
    opacity: .8;
    font-size: 13px;
    text-transform: uppercase;
}

#dashboardSection1, #dashboardSection2 {
    margin-top: 30px !important;
}

.dashboardChartHeader {
    text-transform: uppercase;
    font-size: 13px;
    opacity: .7
}

a:has(.dashboardChartHeader) {
    text-decoration: none;
}

.graph-box .dashboardChartHeader {
    border-bottom: 1px solid #e4e9f2;
    text-decoration: none;
    padding-bottom: 12px;
    margin-bottom: 15px;
}
/*Dashboard > Recent Requests > Hover State */
#dashboardSection2 .col-md-12.dashboardMetrics div:nth-child(2) div:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

    #dashboardSection2 .col-md-12.dashboardMetrics div:nth-child(2) div:hover div {
        color: var(--primary) !important;
    }
/*Dashboard > Recent Requests > View All Requests Button */
#dashboardSection2 a.btn.btn-submit.pull-right[onclick="viewAllRequests();"] {
    background: var(--primary) !important;
    color: white !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    text-transform: uppercase;
    font-weight: 700 !important;
    margin-top: -5px !important;
}

    #dashboardSection2 a.btn.btn-submit.pull-right[onclick="viewAllRequests();"]:hover {
        background: var(--primary-700) !important;
    }

/*Dashboard > Recent Models */
.dashboardMetrics {
    font-size: 14px;
}

    .dashboardMetrics:has(.model-card) {
        background: var(--primary-100) !important;
        padding: 15px !important;
        border-color: var(--primary-300);
    }

.col-md-12.dashboardMetrics {
    background: white !important;
    padding: 15px !important;
    min-height: 160px !important;
    border-color: #dde;
}

.dashboardMetrics:has(.dashboardCallsCount) {
    min-height: 160px !important;
}

.model-card {
    padding: 4px 8px !important;
    font-size: 12px;
    font-weight: 700;
}

.dashboardMetrics:has(.model-card) p {
    text-transform: none !important;
    font-size: 13px !important;
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboardMetrics:has(.model-card) .dashboardMetrics:has(.model-card):hover p {
    color: var(--primary);
}

.dashboardMetrics:has(i.fa-angle-right) {
    background: white !important;
}

    .dashboardMetrics:has(i.fa-angle-right) i, .dashboardMetrics:has(i.fa-angle-right) .dashboardMetrics:has(i.fa-angle-right) p {
        color: var(--primary);
    }

/* MODELLING */
/* Modelling > Model View */
.page-header div:nth-child(3) {
}

button[name=btnEditModelDescription] i, button[name=btnCancelModelDescription] i, button[name=btnSaveModelDescription] i {
    background: white !important;
    color: var(--primary) !important;
}

input[name=txtModelDescription] {
    border-bottom: 1px solid var(--primary) !important;
    padding: 6px 0 !important;
    font-size: 15px !important;
}

a.dropdown-toggle i.fa.fa-ellipsis-v {
    opacity: .5 !important;
    /*transform: translateY(5px);*/
}

a.dropdown-toggle:hover i.fa.fa-ellipsis-v {
    opacity: 1 !important;
}

h4#lblModelDescription {
    color: var(--secondary) !important;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: inherit;
    text-transform: none;
    min-width: 100px;
}

    h4#lblModelDescription:empty::before {
        content: "Model description";
        color: #222b45;
    }

    input[name="txtModelDescription"] {
        height: 1px !important;
    }

.page-buttons:has(.success-calls) {
    padding: 0 !important;
}

    .page-buttons:has(.success-calls) div:first-child {
        display: none;
    }

    .page-buttons:has(.success-calls) div:nth-child(2) {
        margin: 0 !important;
        display: flex !important;
        padding: 10px !important;
    }

span.vseparator {
    margin: 0 !important;
    opacity: .5
}

span.success-calls, span.failure-calls, span.error-calls {
    background: var(--primary);
    font-size: 12px;
    color: white;
    padding: 5px 10px;
    font-weight: 600;
    border-radius: 80px;
}

span.success-calls {
    background: var(--green);
}

span.failure-calls {
    background: var(--orange);
}

span.error-calls {
    background: var(--red);
}

#btnVersion {
    background: white !important;
    border-color: var(--secondary) !important;
    line-height: 1.7;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600 !important;
}

#exec-action {
    margin-top: 10px !important;
}

#exec-action li a {
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700 !important;
}

#exec-action li.active {     
    color: var(--primary) !important;
    background: white !important;
    border: 1px solid var(--primary-300) !important;
}

#exec-action li.active a {
    color: var(--primary) !important;
}

#exec-action i.fa {
    display: none;
}

.col-md-10:has(.doc-holder) {
    padding-top: 0 !important;
}

.doc-holder {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: 1px solid var(--borderColor);
    line-height: 1.5;
    padding: 10px 15px !important;
    margin: 0 !important;
}

.doc-holder {
    box-shadow: var(--boxshadow) !important;
}

.modelling-screen .doc-holder {
    justify-content: flex-end;
    border: none;
    box-shadow: none !important;
}

.api-metric-data {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: right;
    width: 30%;
}

.modelling-screen {
    background-color: white;
    padding: 5px;
}

.doc-holder .date-created-label {
}

.doc-holder:has(#dropSection) {
    padding: 1px !important;
}

.doc-holder label {
    color: var(--secondary);
    text-transform: uppercase;
    font-size: 13px;
    line-height: 24px;
    font-weight: 600 !important;
}

label.enable-api {
    font-size: 12px;
    margin-left: 4px;
    color: var(--body-text) !important;
    opacity: .8;
}

/* Overview Tab (Inputs/Outputs)*/
.doc-holder #inputSection, .doc-holder #outputSection {
    border: 0;
}

.input-section-header, .output-section-header {
    color: var(--secondary);
    text-transform: uppercase;
    font-size: 13px;
    padding-bottom: 4px;
}

.doc-holder .input-section-element, .doc-holder .output-section-element, .schemas-container .input-section-element, .schemas-container .output-section-element {
    padding: 6px 8px 3px;
    margin: 5px;
}

.input-section-element, .output-section-element, ul.inl li, ul.oul li {
    background: var(--primary-100) !important;
    border: 1px solid var(--primary-200) !important;
}

.output-section-element, ul.oul li {
    background: var(--orange-100) !important;
    border: 1px solid var(--orange-300) !important;
}

.input-section-element .input-section-element-label {
    width: 80%;
    text-align: left;
    display: inline-block !important;
    font-weight: 400;
    font-size: 13px;
}

.input-section-element-label, .output-section-element-label, ul.inl li, ul.oul li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    color: var(--body-text);
    font-size: 12px !important;
    font-weight: 600 !important;
    opacity: .8;
    cursor: pointer;
}

.input-section-element-badge, .output-section-element-badge {
    border: 1px solid var(--primary-300);
    color: var(--primary) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    cursor: pointer;
    float: right !important;
    padding: 2px 4px !important;
    display: inline-block;
    width: 30px;
    position: relative !important;
    right: 5px;
    text-align: center;
    background-color: white;
    border-radius: 3px;
    line-height: 1.5 !important;
}

.output-section-element-badge, ul.oul .input-section-element-badge {
    border: 1px solid var(--orange-300) !important;
    color: var(--orange) !important;
    background: white !important;
}

.input-section-element .glyphicon, .output-section-element .glyphicon {
    color: var(--secondary);
    font-size: 12px !important;
}

.foundl li {
    background: var(--green-100) !important;
    border: 1px solid var(--green-300) !important;
    white-space: nowrap !important;
}

    .foundl li .input-section-element-badge {
        border: 1px solid var(--green) !important;
        color: var(--green) !important;
        background: white !important;
    }

.missingl li {
    background: var(--red-100) !important;
    border: 1px solid var(--red-300) !important;
    white-space: nowrap !important;
}

    .missingl li .input-section-element-badge {
        border: 1px solid var(--red) !important;
        color: var(--red) !important;
        background: white !important;
    }

.foundl li, .missingl li {
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* Overview Tab (Drop Section)*/
#dropSection.drop-section {
    background: var(--basic-200) !important;
    border: 1px dotted var(--primary-300) !important;
}

.drop-section .slick-item {
    border: 1px solid var(--borderColor);
    box-shadow: var(--boxshadow);
}

.drop-section .in-ou-list {
    position: relative !important;
    width: 80%;
    bottom: auto !important;
    top: 25% !important;
    left: 22% !important;
    margin-bottom: 0 !important;
    padding: 15px;
    box-shadow: 0px 0px 20px -8px rgba(0, 0, 0, 0.50) !important;
    border-radius: 6px;
    max-height: 300px;
    overflow: scroll !important;
    border: 1px solid var(--secondary);
    min-width: 50% !important;
}

    .drop-section .in-ou-list button.close {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        margin: 5px !important;
        width: 24px !important;
        height: 24px !important;
        background: var(--body-text);
        border-radius: 30px;
        color: white;
        opacity: .45;
        z-index: 1200 !important;
        overflow: visible !important;
        font-size: 18px;
        line-height: 1;
    }

        .drop-section .in-ou-list button.close:hover {
            opacity: .85;
        }

/* Composite Model Editor */
.slick-element-section .bootstrap-tagsinput {
    background: white !important;
    padding: 15px !important;
    margin: 0;
}

.slide-icon {
    color: var(--primary) !important;
}

input.slick-button[value="Models"], input.slick-button[value="Controls"] {
    background: var(--primary) !important;
    color: white !important;
}

/* Slick Item */
.slick-item, #modelSection .slick-item, .drop-section .slick-item {
    background: white !important;
    font-size: 12px !important;
    padding: 15px !important;
    border: 1px solid var(--borderColor);
    box-shadow: rgba(0, 0, 0, 0.18) 0px 1px 5px !important;
    border-radius: 6px;
    cursor: pointer !important;
    font-weight: 600 !important;
    text-align: center !important;
}

#modelSection .slick-item {
    cursor: grab !important;
    margin: 8px 4px;
}

#controlSection .slick-item {
    cursor: grab !important;
    margin: 8px 4px;
    min-height: 100px
}

.slick-item:hover, .drop-section .slick-item:hover {
    border-color: var(--secondary) !important;
}

#modelSection .slick-item:hover {
    border-color: var(--primary) !important;
}

.slick-item-icon, #modelSection .slick-item-icon, .drop-section .slick-item-icon {
    margin: 0 0 10px 35% !important;
    display: flex !important;
}

.slick-item-text, #modelSection .slick-item-text, .drop-section .slick-item-text {
    text-transform: none !important;
    font-size: 13px !important;
    width: 95%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
}

.slick-item:hover .slick-item-text, #modelSection .slick-item:hover .slick-item-text, .drop-section .slick-item:hover .slick-item-text {
    color: var(--primary) !important;
}

#controlSection .slick-item-text {
    width: 100% !important;
    text-decoration: none;
    font-size: 21px !important;
    line-height: 1;
    padding-top: 80%;
}

.slick-item .version-label, #modelSection .slick-item .version-label, .drop-section .slick-item .version-label {
    background: white;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid var(--borderColor);
    margin-bottom: 8px !important;
}

    .slick-item .version-label label, #modelSection .slick-item .version-label label, .drop-section .slick-item .version-label label {
        font-size: 10px !important;
        margin-right: 1px;
        color: var(--body-text);
        font-weight: 600;
    }

    .slick-item .version-label span.lblVersion, #modelSection .slick-item .version-label span.lblVersion, .drop-section .slick-item .version-label span.lblVersion {
        font-size: 13px !important;
        color: var(--body-text);
        font-weight: 600;
    }

.slick-item .connectors {
    position: absolute !important;
    right: 12px !important;
    bottom: 10px !important;
    margin: 0 !important;
}

    .slick-item .connectors div {
        margin-bottom: 0 !important;
        margin-top: 5px !important;
    }

.slick-item .connector-failure {
    padding-left: 0 !important;
}

.slick-item .node-menu-item i {
    font-size: 20px !important;
    color: var(--secondary) !important;
    position: absolute !important;
    left: 12px !important;
    bottom: 10px !important;
}

.slick-item:hover .node-menu-item i {
    color: var(--body-text) !important;
}

.slick-item .node-menu-item select {
    width: 40px !important;
    background: white;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid var(--body-text) !important;
    margin-bottom: 8px !important;
    color: var(--body-text) !important;
    font-weight: 700 !important;
}

.slick-item .node-menu-item span {
    font-size: 12px !important;
    margin-right: 4px !important;
}

.slick-item .delete-node {
    color: var(--red);
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
}

.slick-item i.fa-external-link {
    color: var(--primary);
    position: absolute !important;
    top: 5px !important;
    left: 8px !important;
}

.drop-section .slick-item button.btn-expand-inputs {
    display: none !important;
}

.drop-section .slick-item.jtk-connected:hover .slick-item-text {
    color: var(--green) !important;
}

.drop-section .slick-item:hover {
    border-color: var(--secondary);
}

.drop-section .slick-item.jtk-connected:hover {
    border-color: var(--green) !important;
}

/* WEB FORMS */
body:has(model-form) {
    padding: 2rem 0;
    background: var(--primary-100);
}

body:has(.doc-holder model-form) {
    padding: 5rem 0 2rem !important;
}

model-form .container {
    width: 90%;
}

.doc-holder model-form .container {
    width: 99%;
    max-width: 100%;
    margin-top: 12px;
}

model-form fieldset legend {
    font-size: 16px !important;
    line-height: 20px;
    padding: 24px 0 0 !important;
    color: var(--body-text) !important;
    margin: 0 !important;
}

model-form .model-input-form-container legend.fieldset-label:first-of-type, model-form .model-output-form-container legend.fieldset-label:first-of-type {
    background: var(--primary);
    color: white !important;
    text-transform: uppercase;
    font-size: 12px !important;
    margin: 0 0 0 12px !important;
    font-weight: 700;
    padding: 0 10px !important;
}

model-form .object-group-section .object-group-section {
    border: 0 !important;
    padding: 10px 0 10px 20px !important;
}

model-form .object-group-section .list-item .object-group .object-group .object-legend {
    font-weight: bold !important;
    font-size: 85% !important;
}

model-form .form-group {
    display: block;
}

    model-form label, model-form .form-group label {
        width: 100% !important;
        font-size: 13px;
        padding: 0;
    }

    model-form .form-group .form-control {
        border-radius: 4px !important;
        color: var(--body-text) !important;
        font-size: 13px !important;
        margin-bottom: 16px;
        min-height: 40px;
        outline: 4px !important;
    }

model-form formly-field-date .input-group-text {
    height: 40px !important;
    width: 40px !important;
    padding: 0 !important;
}

model-form .datagrid-field {
    margin-top: 14px;
}

    model-form .datagrid-field .form-label {
        font-size: 12px;
    }

model-form revogr-header .rgHeaderCell .header-content {
    text-transform: uppercase;
    font-size: 12px;
    color: var(--secondary);
}

model-form .action-buttons {
    text-align: right;
    padding: 0 1.5rem;
}

model-form button.btn-primary, model-form .btn-primary {
    border-radius: 4px !important;
    text-transform: uppercase;
    font-weight: 700;
    background: var(--primary) !important;
    color: white !important;
}

    model-form button.btn-primary:hover, model-form .btn-primary:hover, model-form button.btn-primary:focus, model-form .btn-primary:focus, model-form button.btn-primary:active, model-form .btn-primary:active {
        background: var(--primary-700) !important;
        color: white !important;
    }

model-form .model-input-form-container {
    margin-right: 2rem;
}

.web-form-element input,
.web-form-element select {
    border-radius: 4px !important;
    background-color: white !important;
    color: #272b30 !important;
    padding: 8px 12px !important;
}

.doc-holder:nth-child(3) div:first-child label, #butCodePreview {
    padding-top: 10px !important;
}

#btnTemplateUrl, #btnTemplateEmbedCode, #butCodePreview {
    padding: 9px !important;
    border-radius: 4px !important;
}

#butCodePreview {
    display: inline-block;
}

@layer theme2 {
    .theme2 .top-bar {
        background-color: white;
        background-image: url('data:image/png;base64,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');
        background-size: 300px;
        background-repeat: no-repeat;
        width: 100%;
        background-position: left;
        background-position-x: calc(0% + 5px);
        border-bottom: solid 2px white;
        border-spacing: 15px;
    }
}

model-form .fa {
    color: var(--primary) !important;
}

model-form .formly-date-field button img {
    opacity: .5 !important;
}

model-form .formly-date-field button:hover img {
    opacity: 1 !important;
}

model-form .form-group {
    display: flex;
    width: 100% !important;
    margin: 0;
    position: relative;
    flex-direction: column;
}

model-json-form .object-group {
    margin-bottom: 0px !important;
}

model-form label, model-form .form-group label, model-form revogr-header .rgHeaderCell .header-content {
    text-transform: none !important;
}

model-form revogr-header .rgHeaderCell .header-content {
    color: grey;
}

.tr-link::before {
    content: "";
    display: block;
    height: 30px;
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 0;
}

.tr-link {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    color: #222b45;
    position: relative !important;
}

    .tr-link::after {
        content: "";
        display: block;
        height: 10px; 
        position: absolute; 
        left: 0; 
        right: 0; 
    }
    .tr-link:link, .tr-link:visited, .tr-link:hover, .tr-link:active {
        text-decoration: none;
        color: #222b45;
    }

/* MODELS UI UPDATE 2024-01 (Sanjay Tickoo + Gershon Koral) */

/* New Auto Discoverable Model Page */

/* Version 2 */

/* Form */

autodiscoverable-model {
    font-family: "Open Sans",open-sans,sans-serif !important;
}

    autodiscoverable-model .form-group label {
        color: #222b45 !important;
    }

    autodiscoverable-model .headers-inputs {
        height: 40px
    }

        autodiscoverable-model .headers-inputs button {
            height: 38px;
            padding: 0;
            margin: 1px;
            text-transform: uppercase;
            font-weight: 700;
            font-size: 13px;
        }

    autodiscoverable-model .added-headers table {
        background: var(--basic-300) !important;
        border: 1px solid white !important;
        font-family: "Open Sans",open-sans,sans-serif !important;
    }

    autodiscoverable-model .added-headers th {
        background: transparent !important;
        border: 1px solid white;
        color: #222b459 !important;
        font-size: 12px !important;
        font-weight: 600;
    }

    autodiscoverable-model .added-headers thead tr:hover {
        background: transparent !important;
    }

    autodiscoverable-model .added-headers td {
        background: white !important;
        color: #222b45 !important;
        font-size: 12px !important;
        font-weightx: 600;
    }

        autodiscoverable-model .added-headers td:has(button) {
            width: 80px;
            text-align: center;
        }

        autodiscoverable-model .added-headers td button {
            text-transform: uppercase;
            font-size: 10px;
            font-weight: 600;
            color: #222b45;
        }

    autodiscoverable-model .btn-discover {
        background-color: var(--primary) !important;
        text-transform: uppercase;
        font-size: 14px !important;
        font-weight: 600;
        width: auto !important;
        padding: 12px 20px !important;
    }

        autodiscoverable-model .btn-discover:hover {
            background-color: var(--primary-700) !important;
        }

    /* Schemas */
    autodiscoverable-model .schemas-container {
        padding-top: 48px;
        border-top: 1px solid white;
        max-width: 900px;
    }

        autodiscoverable-model .schemas-container .panel.inputs h3, autodiscoverable-model .schemas-container .panel.outputs h3 {
            background: #222b45 !important;
            border-radius: 6px;
            font-size: 13px;
            line-height: 2;
            margin-top: 4px;
            color: white;
            font-weight: 600;
        }

        autodiscoverable-model .schemas-container .input-section-element {
            padding: 8px;
            line-height: 1.5;
        }

        autodiscoverable-model .schemas-container .panel.outputs .input-section-element {
            background: var(--orange-100) !important;
            border-color: var(--orange-300) !important;
        }

        autodiscoverable-model .schemas-container .panel.outputs .input-section-element-badge {
            color: var(--orange) !important;
            border-color: var(--orange);
        }

/* v2 - Updates 25 Jan 2024 */

/* Global */
body, body:has(.doc-holder model-form), body:has(model-form) {
    padding-bottom: 0 !important;
}

#detailContainer {
    min-height: calc(100vh - 71px) !important;
}

footer {
    background: var(--dark) !important;
    font-size: 12px;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 16px 30px !important;
    min-height: 32px !important;
    bottom: 0 !important;
    position: relative !important;
}

/* Element Label width Fix */
.input-section-element .input-section-element-label, ul.inl li .input-section-element-label {
    max-width: calc(100% - 60px) !important;
}

.output-section-element .output-section-element-label, ul.oul li .output-section-element-label {
    max-width: calc(100% - 60px) !important;
}

.output-section-element-badge, ul.oul .input-section-element-badge {
    border: 1px solid var(--orange) !important;
}

.in-ou-list .modal-header {
    background: transparent !important;
    border: none !important;
}

.drop-section .in-ou-list .modal-header button.close {
    margin: 0 !important;
}

/* Form/Webform Labels */
model-form .form-group label {
    padding: 6px 0;
    margin-bottom: 0;
}

#titlePage {
    display: inline-block;
    color: var(--dark);
    color: var(--dark);
    font-weight: bold;
    margin: 0px !important;
    width: auto !important;
}

#titlePage[contenteditable="true"] {
    text-overflow: clip;
    padding: 0 10px;
}

.col-md-9.btn-group.pull-right.padding-0 {
    display: flex;
    flex-direction: row;
    float: left !important;
    margin-top: 25px;
    width: 50%;
}

.col-md-9.btn-group.pull-right.padding-0 .row {
    display: flex;
    width: 50%;
    gap: 0;
}

.col-md-3.pull-right {
    width: 100%;
    float: left !important;
}

#btnCancelModel {
    width: 100%;
    text-align: center;
    padding: 0 10px 0 10px;
    font-weight: bold;
    text-transform: uppercase !important;
}

#btnCancelModel {
    color: red;
    border: 1px solid #FF3D71;
    border-radius: 4px;
    background: rgba(255, 61, 113, 0.08);
    text-transform: uppercase;
}

.header-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
}

.title-subtitle {
    display: flex;
    flex-direction: row;
    gap: 32px;
    max-width: 80%;
    justify-content: space-between;
}

.page-buttons {
    display: inline-block;
    position: relative;
    max-width: 100%;
}

.api-call-summary {
    width: 40%;
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    font-size: 15px;
}

autodiscoverable-model .auto-discover-form {
    padding-top: 0 !important;
    max-width: 1200px !important;
}

    autodiscoverable-model .auto-discover-form .form-group, .auto-discover-form .added-headers {
        max-width: 580px !important;
    }

    autodiscoverable-model .auto-discover-form .headers-inputs button {
        height: 38px !important;
    }

    autodiscoverable-model .auto-discover-form .added-headers td {
        border-color: var(--primary-100) !important;
    }

autodiscoverable-model button.btn-applyfilter {
    height: 32px !important;
    margin-top: 0 !important;
    font-size: 12px;
    padding: 0 24px;
    font-weight: 700;
}

autodiscoverable-model .schema-label .selected, autodiscoverable-model .schema-label .unselected {
    font-size: 13px;
    font-weight: 700;
}

autodiscoverable-model .schema-field ngx-monaco-editor {
    border: 1px solid #ccc;
    padding: 4px 0;
    background: white;
    border-radius: 4px;
}

autodiscoverable-model .modal-popup {
    padding: 0 !important;
}

autodiscoverable-model .modal-header {
    padding: 12px 24px !important;
}

autodiscoverable-model .modal-body {
    padding: 24px !important;
    border: none !important;
}

    autodiscoverable-model .modal-body ngx-monaco-editor {
        border: 1px solid #ccc;
        padding: 4px 0;
        background: white;
        border-radius: 4px;
    }

autodiscoverable-model .modal-footer {
    padding: 12px 24px !important;
}

    autodiscoverable-model .modal-footer button {
        height: 32px !important;
        margin-top: 0 !important;
        font-size: 12px;
        padding: 0 24px;
        font-weight: 700;
    }

        autodiscoverable-model .modal-footer button.btn-cancel {
            border: 1px solid #999;
        }

.final-form-controls {
    display: flex;
    flex-direction: row-reverse;
    float: left !important;
    padding-left: 10px;
    width: 20%;
    gap: 6px;
}

.editable-header-element {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    max-width: 100%;
}

.edit-header-btns {
    display: flex;
    flex-direction: row;
}

.regression-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
}

.regression-test-table {
    padding: 10px;
    margin: 5px;
    border: 1px dashed #BDBDBD;
    border-radius: 10px;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.regression-label {
    color: #1AAAE2;
    border: 1px solid #1AAAE2;
    padding: 0 5px 0 5px;
    top: -20px;
    left: 20px;
    position: relative;
    background-color: white;
}

#inputTable {
    width: 40%;
}
#outputTable {
    width: 60%;
}

.test-th-key, .test-th-value {
    padding: 10px 0;
    font-weight: bold;
    color: grey !important;
    border-bottom: 1px solid lightgrey;
}

.diffScreen {
    width: 100%;
    height: 500px;
}

.diffScreen .diffOverview {
    display: none;
}

.diffScreen .decorationsOverviewRuler {
    display: none !important;
}

.outputScreen {
    height: 200px;
    width: 100%;
}

.inputScreen {
    /*height: 100px;*/
    width: 100%;
    flex: 1;
}

    .inputScreen .minimap {
        display: none !important;
    }

    .outputScreen .minimap {
        display: none !important;
    }

.overview-header-style {
    color: #222b45;
    font-weight: 400;
}

.modelling-screen {
    display: flex;
    flex-direction: column;
}

.regression-test-screen {
    display: flex;
    flex-direction: column;
    padding: 15px;
    border: 1px solid var(--borderColor);
}

    .regression-test-screen .btn {
        align-self: end;
    }

.example-request-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

}

.enabled-form {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    line-height: 1.5;
    padding: 10px 15px !important;
}

.account-drop {
    left: 60%;
    right: 0;
}

.enable-form {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding-right: 12px;
    white-space: nowrap;
    align-items: center;
}

.json-view-options {
    position: relative;
    align-self: end;
}

    .json-view-options label {
        color: var(--secondary);
        text-transform: uppercase;
        font-size: 13px;
        line-height: 24px;
        font-weight: 600;
    }

.center-div {
    display: flex;
    justify-content: flex-start;
    padding-top: 12px;
    padding-left: 12px;
    padding-bottom: 12px;
}

.model-detail-page .header-top {
    padding-bottom: 0;
}

.model-detail-page .page-header .api-call-summary {
    padding-bottom: 8px;
}

.model-detail-page .api-metric-data .toggle.btn {
    margin-left: 0;
}

.model-detail-page #exec-action li {
    margin-bottom: 0;
}

    .model-detail-page #exec-action li:hover a {
        color: var(--primary) !important
    }

#liAdmin {
    display: flex;
}

.model-detail-page-test {
    margin-top: 48px !important
}

.test-metrics {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    justify-content: space-between;
    align-items: center;
}

.filter-btn {
    margin-top: 10px !important;
}

.btn-xs {
    padding: 1.2em 1.3em .4666em !important;
}

#toggleFailedTests {
    margin-top: 12px;
}

.pagination-btn {
    text-transform: uppercase;
    font-weight: 400;
    transform: translateX(600%);
    width: 8%;
    margin-top: 6px;
}

.account-drop li button {
    padding: 10px 20px;
    color: #222b45;
    border: none;
    background: transparent;
}

.account-drop li button :hover {
    background: grey;
}

.box-tools .closeFilterSection {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

#btnBulkDelete {
    float: left;
    margin-left: 0;
    display: none;
}

/* MODELS UI UPDATE 2024-04 (Sanjay Tickoo + Gershon Koral) */
/* Fixing spacing issues on Modelling Screens*/

/* Web Form */
model-form .container {
    width: 100%;
    padding: 24px 16px;
}

/* Integrate */
.box-body.integration {
    padding: 24px 12px;
}

/* Test, Test Sets */
.modelling-screen:has(.regression-test-screen), .modelling-screen:has(.model-form) {
    padding: 5px 12px 24px;
}

.simple-flex-row {
    display: flex;
    flex-direction: row;
}

.simple-flex-col {
    display: flex;
    flex-direction: column;
}

.reg-test-entity {
    border-bottom: 1px dashed #BDBDBD;
    padding-bottom: 16px;
    width: 100%;
}

.form-label {
    padding: 10px;
    width: 50%;
    border: none;
    background-color: transparent;
    text-align: left;
    display: flex;
    align-items: center;
    color: grey;
    margin-bottom: 5px;
    font-weight: bold;
    padding-left: 0;
}