/* Minification failed. Returning unminified contents.
(4,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(44,15): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(45,26): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(50,26): run-time error CSS1039: Token not allowed after unary operator: '-light-gray'
(92,35): run-time error CSS1046: Expect comma, found '0'
(92,39): run-time error CSS1046: Expect comma, found '/'
(123,26): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(128,26): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(136,15): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(141,15): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(142,26): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(182,25): run-time error CSS1039: Token not allowed after unary operator: '-default-gray'
(193,25): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(194,36): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(218,36): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(231,36): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(254,17): run-time error CSS1039: Token not allowed after unary operator: '-default-black'
(265,21): run-time error CSS1039: Token not allowed after unary operator: '-default-black'
(294,17): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(295,28): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(305,17): run-time error CSS1039: Token not allowed after unary operator: '-default-gray'
(322,28): run-time error CSS1039: Token not allowed after unary operator: '-light-gray'
(345,22): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(346,24): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(347,17): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(353,28): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(407,26): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(416,20): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(417,26): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(462,20): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(479,30): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(638,15): run-time error CSS1039: Token not allowed after unary operator: '-default-gray'
(682,26): run-time error CSS1039: Token not allowed after unary operator: '-light-gray'
(694,20): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(704,15): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(734,26): run-time error CSS1039: Token not allowed after unary operator: '-light-gray'
(743,31): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(763,15): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(840,22): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(841,20): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(845,26): run-time error CSS1039: Token not allowed after unary operator: '-light-gray'
(846,30): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(851,26): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(859,26): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(864,15): run-time error CSS1039: Token not allowed after unary operator: '-default-gray'
(907,33): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(971,15): run-time error CSS1039: Token not allowed after unary operator: '-default-gray'
(972,31): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(1012,15): run-time error CSS1039: Token not allowed after unary operator: '-default-gray'
(1027,15): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(1099,15): run-time error CSS1039: Token not allowed after unary operator: '-default-gray'
(1107,15): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(1115,15): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(1124,15): run-time error CSS1039: Token not allowed after unary operator: '-label-color'
(1132,15): run-time error CSS1039: Token not allowed after unary operator: '-label-color'
(1140,15): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(1150,15): run-time error CSS1039: Token not allowed after unary operator: '-label-color'
(1210,15): run-time error CSS1039: Token not allowed after unary operator: '-default-gray'
(1218,15): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(1227,26): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(1228,15): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(1237,15): run-time error CSS1039: Token not allowed after unary operator: '-label-color'
(1243,15): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(1258,27): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(1291,19): run-time error CSS1039: Token not allowed after unary operator: '-arrow-position'
(1345,20): run-time error CSS1039: Token not allowed after unary operator: '-light-blue'
(1361,27): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(1382,15): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(1401,15): run-time error CSS1039: Token not allowed after unary operator: '-label-color'
(1415,15): run-time error CSS1039: Token not allowed after unary operator: '-label-color'
(1428,15): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(1441,20): run-time error CSS1039: Token not allowed after unary operator: '-label-color'
(1445,20): run-time error CSS1039: Token not allowed after unary operator: '-label-color'
(1446,22): run-time error CSS1039: Token not allowed after unary operator: '-label-color'
(1520,15): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(1572,15): run-time error CSS1039: Token not allowed after unary operator: '-default-black'
(1580,15): run-time error CSS1039: Token not allowed after unary operator: '-default-gray'
(1594,26): run-time error CSS1039: Token not allowed after unary operator: '-light-gray'
(1614,15): run-time error CSS1039: Token not allowed after unary operator: '-label-color'
(1630,15): run-time error CSS1039: Token not allowed after unary operator: '-default-black'
(1636,26): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(1637,32): run-time error CSS1039: Token not allowed after unary operator: '-input-shadow'
(1648,15): run-time error CSS1039: Token not allowed after unary operator: '-label-color'
(1689,15): run-time error CSS1039: Token not allowed after unary operator: '-default-black'
(1697,15): run-time error CSS1039: Token not allowed after unary operator: '-default-gray'
(1735,26): run-time error CSS1039: Token not allowed after unary operator: '-default-gray'
(1745,26): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(1750,22): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(1770,15): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(1771,33): run-time error CSS1039: Token not allowed after unary operator: '-default-blue'
(1784,15): run-time error CSS1039: Token not allowed after unary operator: '-default-black'
(1794,15): run-time error CSS1039: Token not allowed after unary operator: '-default-black'
 */
/* Colors
========================*/
:root {
  --border-color: rgba(222, 226, 230, 0.87);
  --input-shadow: rgba(73, 80, 87, 0.1);
  --label-color: #495057;
  --default-blue: #3D6BEA;
  --light-blue: #ECF0FD;
  --default-black: #343A40;
  --default-gray: #6C757D;
  --light-gray: #F8F9FA;
}


#appSidebar {
  left: 0;
  width: 75px;
  z-index: 1;
  position: absolute;
  min-height: calc(100vh - 75px);
  padding-top: 24px;
  background-color: #fff;
}

.sidebar-menu-icon {
  margin-bottom: 24px;
  position: relative;
}

.sidebar-menu-icon > span {
  cursor: pointer;
  width: 44px;
  height: 44px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  transition: all 0.3s;
}

.sidebar-menu-icon > span:hover,
.sidebar-menu-icon.active > span {
  color: var(--default-blue);
  background-color: var(--light-blue);
}

#right-pane {
  height: 100%;
  background-color: var(--light-gray);
}

#right-pane + .jqx-splitter-splitbar-vertical,
#left-pane + .jqx-splitter-splitbar-vertical {
  margin-top: -76px;
  height: 100vh !important;
}

.jqx-splitter-splitbar-horizontal.jqx-splitter-splitbar-invalid,
.jqx-splitter-splitbar-vertical.jqx-splitter-splitbar-invalid {
  background-color: #E9ECEF !important;
}

#schema-content {
  padding: 20px 24px;
  height: calc(100vh - 76px);
}

#schema-content::-webkit-scrollbar-track {
  background: transparent;
}

#schema-content::-webkit-scrollbar-corner {
  background: transparent;
}

#schema-content > form {
  min-width: 100%;
}
.custom-tooltip {
  position: absolute;
  top: 50%;
  left: 48px;
  color: #fff;
  z-index: 99999;
  font-size: 12px;
  line-height: 18px;
  padding: 5px 8px;
  border-radius: 4px;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.7);
  box-shadow: 3px 3px 6px 0 rgb(0 0 0 / 45%);
}
.custom-tooltip::before {
  content: "";
  top: 50%;
  left: -5px;
  display: block;
  position: absolute;
  transform: translateY(-50%);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid rgba(0, 0, 0, 0.7);
}
/* Buttons
========================*/
.btn.btn-primary,
.btn.btn-secondary,
.btn.btn-primary-outlined {
  border: 0;
  max-width: 100%;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  min-height: 40px;
  max-height: 40px;
  align-items: center;
  padding: 10px 26px !important;
  border-radius: 5px !important;
}

.btn.btn-primary-outlined {
  border: 1px solid var(--default-blue);
}

.btn.btn-primary {
  color: #fff !important;
  background-color: var(--default-blue) !important;
}

.btn.btn-primary:not([disabled]):hover {
  background-color: #2c54c2 !important;
}

.btn.btn-primary-outlined {
  color: var(--default-blue) !important;
  background-color: #fff !important;
}

.btn.btn-primary-outlined:not([disabled]):hover {
  color: var(--default-blue) !important;
  background-color: var(--light-blue) !important;
}

.btn.btn-primary.btn-small,
.btn.btn-secondary.btn-small,
.btn.btn-primary-outlined.btn-small {
  padding: 5px 10px !important;
  min-height: 30px;
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  opacity: 1 !important;
}
.chat-messages {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .chat-messages li {
        position: relative;
        margin-bottom: 24px;
        padding-right: 120px;
    }

        .chat-messages li:last-child {
            margin-bottom: 0;
        }

        .chat-messages li time {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            white-space: nowrap;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 20px;
            color: var(--default-gray);
        }

        .chat-messages li span {
            display: inline-block;
            padding: 6px 12px;
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
            border-radius: 16px;
            word-break: break-word;
            color: var(--default-blue);
            background-color: var(--light-blue);
        }

        .chat-messages li.loading-bot-log span {
            display: inline;
        }

#runHistoryUl {
    top: inherit;
    overflow-y: auto;
    max-height: calc(100vh - 150px);
    left: inherit;
    width: 100%;
    bottom: 40px;
    border: 0;
    margin: 0;
}

    #runHistoryUl li a.run-history-header {
        font-weight: bold;
        font-size: 14px;
    }

        #runHistoryUl li a.run-history-header:hover {
            background-color: var(--light-blue);
        }

    #runHistoryUl li a i {
        margin-right: 10px;
    }

    #runHistoryUl .submenu li {
        padding: 5px 10px 5px 35px;
    }

        #runHistoryUl .submenu li:hover,
        #runHistoryUl .submenu li:hover > a {
            background-color: var(--light-blue);
        }

    #runHistoryUl li ul li a span {
        font-size: 14px;
        line-height: 20px;
    }

    #runHistoryUl .run-status {
        position: absolute;
        right: 20px;
        top: 6px;
        height: 16px;
    }

.history-items h4 {
    margin: 0;
    padding: 12px 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    color: var(--default-black);
    width: 100% ;
}

    .history-items h4::after {
        content: "\f107";
        position: absolute;
        right: 0;
        font-size: 18px;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        color: var(--default-black);
    }

    .history-items h4.active::after {
        content: "\f106";
    }

.history-items ul {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.history-items li {
    margin-bottom: 24px;
    display: flex;
    gap: 16px;
    align-items: center;
}

.history-items .history-task {
    flex-grow: 1;
    display: inline-block;
    padding: 6px 12px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    border-radius: 16px;
    word-break: break-word;
    color: var(--default-blue) !important;
    background-color: var(--light-blue);
}

.history-items .history-time {
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--default-gray);
}

.history-icon {
    min-width: 20px;
    min-height: 20px;
    background: url(./Images/icon_circle_check.svg) no-repeat center center;
}

/* Custom Tabs */
#customTabs {
    padding: 6px;
    gap: 6px;
    display: flex;
    list-style: none;
    align-items: center;
    border-radius: 30px;
    background-color: var(--light-gray);
}

#customTabs li {
    flex-grow: 1;
}

#customTabs li a {
font-size: 14px;
line-height: 20px;
display: block;
cursor: pointer;
color: #495057 !important;
padding: 8px 10px;
text-align: center;
border-radius: 30px;
background-color: #fff;
text-decoration: none;
transition: all 0.3s;
}

#customTabs li a:hover {
    font-weight: 500;
    background: var(--light-blue);
    border-color: var(--default-blue);
    color: var(--default-blue) !important;
}

#customTabs li a.active {
    font-weight: 500;
    color: #fff !important;
    background-color: var(--default-blue);
}

.tab-container {
    display: none;
}

.tab-container.active {
    display: block;
}

.custom-checkbox {
  position: absolute;
  opacity: 0;
  left: 0;
  display: none;
}

.custom-checkbox + input[type="hidden"] + label,
.custom-checkbox + label,
.custom-checkbox + .labelSpan {
  position: relative;
  cursor: pointer;
  padding: 0;
  margin: 0;
  height: 20px;
  font-weight: normal;
}

.custom-checkbox[type="radio"] + label,
.custom-checkbox[type="radio"] + .labelSpan {
  display: inline-flex;
  align-items: center;
}
.custom-checkbox + input[type="hidden"] + label::before,
.custom-checkbox + label:before,
.custom-checkbox + .labelSpan:before {
  content: '';
  margin: 0 10px 0 0;
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 4px;
  border: 1px solid #8BA7F2;
}

.custom-checkbox[type="radio"] + label:before,
.custom-checkbox[type="radio"] + .labelSpan:before {
  border-radius: 50%;
}
.custom-checkbox:hover + input[type="hidden"] + label::before,
.custom-checkbox:hover + label:before {
  border: 1px solid var(--default-blue);
}

.custom-checkbox:focus + label:before {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.custom-checkbox:checked + input[type="hidden"] + label::before,
.custom-checkbox:checked + label:before,
.custom-checkbox:checked + .labelSpan:before {
  background: var(--default-blue);
  border: 1px solid var(--default-blue);
}

.custom-checkbox:disabled + label {
  color: #b8b8b8;
  cursor: auto;
}

.custom-checkbox:disabled + label:before {
  box-shadow: none;
  background: #ddd;
  border: 1px solid #aaa;
}

.customRoleModal .custom-checkbox + label:before {
  margin-right: 0;
}
.custom-checkbox:checked + input[type="hidden"] + label::after,
.custom-checkbox:checked + label:after {
  content: '';
  position: absolute;
  left: 8px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: 1px solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.custom-checkbox[type="radio"] + label:after {
  display: none;
}

.custom-checkbox[type="radio"]:checked + label::before {
  background-color: #fff;
}

.custom-checkbox[type="radio"]:checked + label:after {
  display: block;
  width: 10px;
  height: 10px;
  content: "";
  background: var(--default-blue);
  position: absolute;
  border-radius: 10px;
  left: 5px;
  top: 5px;
  transform: none;
  border: 0;
}

#ExecutPermission.custom-checkbox:disabled + label:empty::before,
#ReadPermission.custom-checkbox:disabled + label:empty::before {
  margin-right: 0;
}
/* Footer - Component 
========================*/
footer {
  background: #fff;
  border-top: 1px solid var(--border-color);
  padding: 4px 10px;
  font-size: 10px;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 25px;
  font-weight: bold;
  z-index: 1001;
}

footer p {
  margin: 0;
}

footer .inner {
  position: relative;
}

footer .copyrightText {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

footer #divScriptStatus {
  float: right;
  width: 30%;
  text-align: right;
}

footer #divRunByText {
  float: left;
}
/* Margins */
.m-0 {
  margin: 0;
}

.mt-10 {
  margin-top: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-24 {
  margin-top: 24px;
}

.mt-48 {
  margin-top: 48px;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-48 {
  margin-bottom: 48px;
}

.mr-20 {
  margin-right: 20px;
}

.w-full {
  width: 100%;
}

.p-0 {
  padding: 0 !important;
}

/* Flexbox */
.flex {
  display: flex;
}

.flex-inline {
  display: inline-flex;
}

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

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}
.row-reverse {
  flex-direction: row-reverse;
}

.flex-1 {
  flex-grow: 1;
}

/* GAPS */
.gap-5 {
  gap: 5px;
}

.gap-8 {
  gap: 8px;
}

.gap-12 {
  gap: 12px;
}

.gap-20 {
  gap: 20px;
}

.gap-24 {
  gap: 24px;
}

.gap-48 {
  gap: 48px;
}

/* Font Weight */
.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.bg-white {
  background-color: #fff;
}

.text-muted {
  color: var(--default-gray);
}

.rounded {
  border-radius: 10px;
}

.transition {
  transition: all 0.3s;
}

.clearfix {
  clear: both;
}

.border-top-0 {
  border-top: 0 !important;
}

.relative {
  position: relative;
}

@media(min-width: 992px) {
  .lg\:p-48 {
    padding: 48px;
  }

  .lg\:gap-48 {
    gap: 48px;
  }
}

@media(max-width: 991px) {
  .md\:p-24 {
    padding: 24px;
  }

  .md\:gap-24 {
    gap: 24px;
  }
}

#tasks-pane {
  background-color: var(--light-gray);
  margin-left: -2px;
}

#tasks-pane.minimized .tasks-header, 
#tasks-pane.minimized .tasks-list-category {
  display: none;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background: var(--border-color);
}

/* DataGrid */
.dx-datagrid-headers .dx-datagrid-content {
  margin: 0 !important;
}

.dx-datagrid-content .dx-datagrid-table .dx-row:not(.dx-freespace-row) > td a {
  font-weight: 500;
  color: var(--default-blue) !important;
}

.dx-datagrid.dx-filter-menu .dx-menu-item-content .dx-icon.dx-icon-filter-operation-default {
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: #ADB5BD;
  line-height: 20px;
  padding: 0;
  margin: 0;
  opacity: 1;
}

.dx-datagrid-headers .dx-datagrid-content .dx-datagrid-table .dx-datagrid-filter-row .dx-texteditor {
  border: 0 !important;
}

.dx-datagrid-rowsview .dx-datagrid-content .dx-datagrid-table .dx-row:first-child {
  border-top: 0 !important;
}

.dx-datagrid-headers .dx-datagrid-content .dx-datagrid-table .dx-row.dx-header-row,
.dx-datagrid-headers .dx-datagrid-content .dx-datagrid-table .dx-row.dx-header-row > td {
  font-size: 14px;
  font-weight: 500;
  height: 56px;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 0 !important;
  background-color: var(--light-gray);
}
.dx-datagrid-headers .dx-datagrid-content .dx-datagrid-table .dx-row.dx-header-row > td::before {
  width: 1px;
  height: 48px;
  top: 4px;
  left: 0;
  content: "";
  position: absolute;
  border-left: 1px solid var(--border-color);
}

.dx-datagrid-headers .dx-datagrid-content .dx-datagrid-table .dx-row.dx-header-row > td:first-child::before {
  display: none;
}

.dx-datagrid-content .dx-datagrid-table .dx-row:not(.dx-freespace-row) > td:after {
  display: none;
}

.dx-datagrid .dx-row > td {
  font-size: 12px;
  font-weight: 500;
  padding: 16px 14px;
}

.dx-datagrid .dx-link:not([class*="fas"]) {
  border-bottom: 0;
  padding-bottom: 0;
  color: var(--default-blue) !important;
}
.dx-pager .dx-pages, .dx-pager .dx-pages .dx-page-indexes {
  display: flex;
  align-items: center;
}
.dx-pager .dx-pages .dx-next-button,
.dx-pager .dx-pages .dx-prev-button {
  font-size: 14px;
  line-height: 20px;
  height: auto;
  padding: 0 5px;
}
.dx-pager .dx-pages .dx-next-button::before,
.dx-pager .dx-pages .dx-prev-button::before {
  position: relative;
  top: inherit;
  margin: 0;
  left: inherit;
  width: 20px;
}

.dx-pager .dx-pages .dx-page {
  padding: 2px 4px;
}

.dx-pager .dx-pages .dx-light-pages {
  display: flex;
  align-items: center;
}
.dx-pager .dx-pages .dx-page-index {
  margin-left: 10px;
}
.dx-pager .dx-pages .dx-info {
  margin: 0;
  padding: 0 5px;
}

.dx-pager .dx-pages .dx-pages-count {
  padding: 0;
}

.dx-pages .dx-texteditor-input-container input {
  min-height: 22px;
  text-align: center;
  padding: 0;
}

.dx-pager .dx-texteditor-input-container .dx-texteditor-input {
  padding: 5px 10px;
  min-height: 22px;
  font-size: 12px;
}

.dx-checkbox-icon {
  border-radius: 4px;
}

.dx-datagrid-checkbox-size .dx-checkbox-icon {
  width: 20px;
  height: 20px;
}

.dx-datagrid-checkbox-size.dx-checkbox-indeterminate .dx-checkbox-icon::before {
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-top: -6px;
}

.dx-checkbox .dx-checkbox-icon,
.dx-checkbox.dx-state-readonly .dx-checkbox-icon {
  border-color: #8BA7F2;
}

.dx-checkbox.dx-checkbox-checked .dx-checkbox-icon {
  color: #fff;
  border-color: var(--default-blue);
  background: var(--default-blue);
}

.dx-datagrid.dx-datagrid-borders > .dx-datagrid-pager {
  background-color: var(--light-gray);
  border-top: 1px solid var(--border-color);
}

.dx-checkbox.dx-state-hover .dx-checkbox-icon,
.dx-checkbox.dx-state-focused .dx-checkbox-icon {
  border: 1px solid var(--default-blue);
}

.dx-checkbox.dx-state-active .dx-checkbox-icon {
  border-color: #ccc;
}

.dx-checkbox-indeterminate .dx-checkbox-icon::before {
  background-color: var(--default-blue);
}

.dx-pager .dx-pages .dx-selection {
  font-weight: 500;
  color: var(--default-gray);
  background-color: rgba(222, 226, 230, 0.87);
}

.dx-datagrid-borders > .dx-datagrid-pager {
  padding: 10px;
}

.dx-datagrid-content .dx-datagrid-table .dx-row > td:first-child {
  padding-left: 14px !important;
  text-align: left !important;
}

.dx-datagrid .dx-datagrid-table .dx-row.bgRed > td {
  color: #F76E6E !important;
  background-color: #FDE2E2 !important;
}

.dx-datagrid .dx-datagrid-table .dx-row.bgYellow > td {
  color: #2E2925 !important;
  background-color: #FEF7ED !important;
}

.dx-datagrid .dx-datagrid-table .dx-row.bgBlue > td {
  background-color: #ECF0FD !important;
  color: #1238A0 !important;
}

.dx-datagrid .dx-datagrid-table .dx-row.bgGreen > td {
  background-color: #E5F7F3 !important;
  color: #2F8641 !important;
}

.dx-datagrid .dx-datagrid-table .dx-row.bgGreen > td {
  background-color: #E5F7F3 !important;
  color: #2F8641 !important;
}
/* Header - Component
========================*/
#appHeader {
  position: relative;
  background: #fff;
  padding-right: 24px;
  border-bottom: 1px solid var(--border-color);
}

#appHeader .menubar {
  background-color: #fff;
}

#appHeader .menu-pop {
  width: 75px;
  height: 75px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#appHeader .menu-pop i {
  margin: 0;
}

#appHeader #tileBar {
  flex: auto;
  font-size: 24px;
  line-height: 20px;
  color: #2E2925;
  font-weight: 600;
}
@media(max-width: 1030px) {
  #appHeader #tileBar {
    font-size: 18px;
  }
}

.app-logged-user ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-logged-user .dropdown-menu {
  padding: 10px;
  border: 0;
  border-radius: 8px;
  z-index: 1111;
}

.app-logged-user .dropdown-menu > li > a {
  padding: 4px 10px;
  font-family: "Roboto", sans-serif;
}

.app-logged-user button#dLabel {
  border: 0;
  padding: 0;
  background: none;
}

.app-logged-user #userName {
  font-size: 12px;
  line-height: 16px;
  text-align: left;
  margin-left: 0;              /* 24px rhythm: the gap to the separator comes from the icon margin */
  padding-right: 24px;
  padding-left: 24px;
  color: var(--default-gray);
  border-left: 1px solid var(--border-color);
}

.app-logged-user #userName .displayname {
  display: block;
  font-weight: 500;
  color: #343A40;
}

.app-logged-user .userPhoto {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 32px;
  background-color: #E9ECEF;
}

.tenant-management-header-label {
    padding-left: 10px;
}
/* Cross-product (READI Platform) icon - sits beside the help icon in the top bar.
   Rendered by _Layout.cshtml only when the ReadiPlatformUri appSetting is configured.

   The header <ul> is ul.flexboxHorizontal: display:flex with NO gap, relying on #tileBar's
   flex:auto to push items apart. Everything after #tileBar therefore sits flush against its
   neighbour, so this needs its own margin or it collides with the "?" icon.
   Sized 18x18 to match Content/Images/icon-help.svg exactly.
   .sr-only comes from Bootstrap and gives the icon an accessible name. */
#appHeader #liReadiPlatform {
  display: flex;
  align-items: center;
  margin-right: 24px;
}

#appHeader #liReadiPlatform > a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--default-gray);
  text-decoration: none;
  transition: color 0.2s;
}

#appHeader #liReadiPlatform > a > svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;      /* filled icon - see the SVG in _Layout.cshtml */
  stroke: none;
}

#appHeader #liReadiPlatform > a:hover,
#appHeader #liReadiPlatform > a:focus {
  color: var(--default-blue);
}

/* the help icon is flush against the separator for the same reason - give it breathing room too */
#appHeader #liKnowledgeBase {
  display: flex;
  align-items: center;
  margin-right: 24px;
  cursor: pointer;         /* clickable - commonUtils.js binds a click handler to this <li> */
}

/* The help icon's <img> sits inside a plain <span>, which is an inline box, so the image
   rests on the text baseline and the line-box reserves a few pixels of descender space
   beneath it. That pushes the image visibly higher than the READI Platform <svg> next to
   it, which is display:block inside a flex <a> and has no baseline to sit on.
   Making the span a flex container takes the image out of baseline layout entirely, so
   both icons are centred by the same rule and line up. */
#appHeader #liKnowledgeBase > span {
  display: flex;
  align-items: center;
}

#appHeader #liKnowledgeBase > span > img {
  display: block;
  width: 18px;
  height: 18px;
}

.jqx-fill-state-normal {
  border: 0;
  background-color: #E9ECEF;
}

.jstree-anchor > .jstree-themeicon {
  margin: 0;
}

.jstree {
  margin-bottom: 12px;
  font-family: 'Roboto', sans-serif;
}

.jstree:last-child {
  margin-bottom: 0;
}

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

.jstree .jstree-icon {
  min-width: 24px;
}

.jstree .jstree-container-ul .jstree-node {
  position: relative;
}

.jstree-default .jstree-initial-node.jstree-loading {
  display: flex;
  gap: 4px;
}

.jstree > .jstree-container-ul > .jstree-node > .jstree-icon.jstree-ocl::before {
  position: absolute;
  font-size: 14px;
  line-height: 1;
  content: "\f054";
  font-weight: 900;
  transition: all 0.1s;
  color: var(--default-gray);
  font-family: "Font Awesome 5 Free";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.jstree .jstree-container-ul > .jstree-node.jstree-open > .jstree-icon.jstree-ocl::before {
  color: var(--default-blue);
  transform: translate(-50%, -50%) rotate(90deg);
}

.jstree > .jstree-container-ul > .jstree-node:hover > .jstree-anchor,
.jstree > .jstree-container-ul > .jstree-node:hover > .jstree-anchor .jstree-icon,
.jstree > .jstree-container-ul > .jstree-node:hover > .jstree-icon.jstree-ocl::before,
.jstree .jstree-container-ul > .jstree-node.jstree-open > .jstree-anchor {
  color: var(--default-blue) !important;
}

.jstree .jstree-container-ul > .jstree-node > .jstree-anchor {
  position: relative;
  padding: 0;
  font-size: 16px;
  line-height: 40px !important;
  min-height: 40px;
  color: var(--label-color) !important;
  padding-right: 34px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.jstree .jstree-container-ul > .jstree-node > .jstree-anchor > .jstree-icon {
  color: var(--label-color) !important;
  margin: 0 10px 0 0 !important;
  width: 20px;
  height: 40px !important;
  line-height: 40px !important;
}

.jstree .jstree-container-ul > .jstree-node.jstree-open > .jstree-anchor > .jstree-icon {
  color: var(--default-blue) !important;
}

.jstree > .jstree-container-ul > .jstree-node:hover > .jstree-anchor,
.jstree .jstree-container-ul > .jstree-node.jstree-open > .jstree-anchor {
  font-weight: 600;
}

.jstree .jstree-container-ul .jstree-node .jstree-children {
  font-size: 12px;
  color: var(--label-color);
}

.jstree > .jstree-container-ul > .jstree-node > .jstree-children {
  margin-left: 32px;
  width: calc(100% - 13px);
}

.jstree .jstree-container-ul .jstree-node .jstree-children .jstree-node:not(.jstree-leaf) .jstree-children .jstree-node:not(.jstree-leaf) {
  margin-left: 20px;
}

.jstree .jstree-container-ul .jstree-node .jstree-children .jstree-node:not(.jstree-leaf) .jstree-anchor {
  padding-left: 30px;
  width: fit-content;
  min-width: 100%;
}

.jstree .jstree-container-ul .jstree-node .jstree-children .jstree-node:not(.jstree-leaf) .jstree-children .jstree-node.jstree-leaf .jstree-anchor {
  padding-left: 50px;
  width: fit-content;
  min-width: 100%;
}

.jstree .jstree-container-ul .jstree-node .jstree-children .jstree-node:not(.jstree-leaf) .jstree-children .jstree-node:not(.jstree-leaf) .jstree-node .jstree-children {
  margin-left: 10px;
}

.jstree .jstree-container-ul .jstree-node .jstree-children .jstree-node {
  background: none;
  min-height: 40px;
  line-height: 40px;
  margin: 0 0 6px;
  list-style: none;
  position: relative;
}

.jstree .jstree-container-ul .jstree-node .jstree-children .jstree-node .jstree-children .jstree-node {
  min-height: 36px;
  line-height: 36px;
  margin-bottom: 0;
}

.jstree .jstree-container-ul .jstree-node .jstree-children .jstree-node .jstree-children .jstree-node .jstree-icon.jstree-ocl {
  height: 36px !important;
}

.jstree .jstree-anchor {
  position: relative;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  outline: 0;
  padding-right: 20px;
  padding-left: 4px;
  text-decoration: none;
  background: none;
  height: auto !important;
  color: var(--default-gray) !important;
  line-height: inherit !important;
  box-shadow: none !important;
  transition: all 0.3s;
}

.jstree .jstree-children .jstree-anchor:hover > .jstree-icon,
.jstree .jstree-children .jstree-node:not(.jstree-closed) .jstree-anchor.jstree-clicked > .jstree-icon {
  color: var(--default-blue) !important;
}

.jstree .jstree-children .jstree-anchor:hover,
.jstree .jstree-children .jstree-node:not(.jstree-closed) .jstree-anchor.jstree-clicked {
  outline: 0;
  font-weight: 500;
  border-radius: 5px;
  text-decoration: none;
  background-color: var(--light-blue);
  color: var(--default-blue) !important;
}

.jstree > .jstree-container-ul > .jstree-node > .jstree-anchor {
  background: none !important;
}

.jstree .jstree-container-ul > .jstree-node > .jstree-children > .jstree-node.jstree-open > .jstree-anchor {
  font-weight: 500;
  color: var(--label-color) !important;
}

.jstree .jstree-container-ul > .jstree-node > .jstree-children > .jstree-node.jstree-open > .jstree-anchor.jstree-clicked,
.jstree .jstree-container-ul > .jstree-node > .jstree-children > .jstree-node.jstree-open > .jstree-anchor.jstree-hovered {
  font-weight: 500;
  color: var(--default-blue) !important;
}

.jstree .jstree-container-ul .jstree-node .jstree-children .jstree-node.jstree-leaf .jstree-anchor::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 1px;
  left: 30px;
  display: block;
  border-left: 1px solid #ADB5BD;
}

.jstree .jstree-container-ul .jstree-node .jstree-children .jstree-node.jstree-leaf .jstree-anchor:hover::after,
.jstree .jstree-container-ul .jstree-node .jstree-children .jstree-node.jstree-leaf .jstree-anchor.jstree-clicked::after {
  border-left-color: var(--default-blue);
}

.jstree > .jstree-container-ul > .jstree-node > .jstree-children > .jstree-node.jstree-leaf > .jstree-anchor::after {
  display: none !important;
}

.jstree > .jstree-container-ul > .jstree-node > .jstree-children > .jstree-open:not(.jstree-leaf) > .jstree-anchor::after,
.jstree > .jstree-container-ul > .jstree-node > .jstree-children > .jstree-node.jstree-open > .jstree-children > .jstree-node.jstree-open > .jstree-anchor::after {
  display: none;
}

.jstree .jstree-children .jstree-node.jstree-leaf .jstree-ocl {
  display: none !important;
}

.jstree .jstree-children .jstree-node .jstree-ocl {
  top: 0;
  left: 0;
  cursor: pointer;
  position: absolute;
  z-index: 1;
  width: 30px;
  display: block !important;
  height: 40px !important;
  background: none;
}

.jstree .jstree-children .jstree-node .jstree-children .jstree-ocl {
  width: 20px;
}

.jstree > .jstree-container-ul > .jstree-node > .jstree-ocl {
  left: calc(var(--arrow-position) - 20px);
  height: 40px !important;
  font-style: normal;
}

.jstree .jstree-children .jstree-children .jstree-node:not(.jstree-leaf).jstree-closed .jstree-ocl {
  background: url(./Images/icon_plus.svg) no-repeat center center !important;
}

.jstree .jstree-children .jstree-children .jstree-node.jstree-open .jstree-ocl {
  background: url(./Images/icon_minus.svg) no-repeat center center !important;
}

.jstree .jstree-children .jstree-node.jstree-loading .jstree-anchor .jstree-icon,
.jstree .jstree-children .jstree-node:not(.jstree-leaf).jstree-loading.jstree-closed .jstree-ocl {
  background: url(./Images/throbber.gif) no-repeat center center !important;
  background-size: 16px !important;
}

.jstree .jstree-children .jstree-node:not(.jstree-loading) .jstree-icon {
  background: none !important;
}

.jstree .jstree-children .jstree-node.jstree-loading .jstree-icon.showIcon {
  background: none !important;
}

/* Icon Hide */
.jstree .jstree-container-ul .jstree-children .jstree-icon {
  display: none;
}

/* Icon Show only #divUC */
#divEnvironmentTree.jstree .jstree-container-ul .jstree-children .jstree-node .jstree-children .jstree-icon.showIcon,
#divSharedWithMe.jstree .jstree-container-ul .jstree-children .jstree-node .jstree-children .jstree-icon.showIcon,
#divUC.jstree .jstree-container-ul .jstree-children .jstree-node .jstree-children .jstree-icon.showIcon,
#divProductionTree.jstree .jstree-container-ul .jstree-children .jstree-node .jstree-children .jstree-icon.showIcon {
  display: block;
  font-size: 14px;
}

#divSharedWithMe.jstree .jstree-container-ul .jstree-children .jstree-node .jstree-icon.showIcon {
  width: 20px;
  display: block;
  font-size: 14px;
}

#divSharedWithMe.jstree .jstree-container-ul > .jstree-node > .jstree-children > .jstree-node.jstree-leaf > .jstree-anchor {
  padding-left: 30px;
  position: relative;
}

#divSharedWithMe.jstree .jstree-container-ul > .jstree-node > .jstree-children > .jstree-node.jstree-leaf > .jstree-anchor:hover,
#divSharedWithMe.jstree .jstree-container-ul > .jstree-node > .jstree-children > .jstree-node.jstree-leaf > .jstree-anchor.jstree-clicked {
  background: var(--light-blue);
}

#divSharedWithMe.jstree .jstree-container-ul > .jstree-node > .jstree-children > .jstree-node.jstree-leaf > .jstree-anchor::before,
#divSharedWithMe.jstree .jstree-container-ul > .jstree-node > .jstree-children > .jstree-node.jstree-leaf > .jstree-anchor.jstree-clicked::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 1px;
  left: 10px;
  display: block;
  border-left: 1px solid #ADB5BD;
}

#divSharedWithMe.jstree .jstree-container-ul > .jstree-node > .jstree-children > .jstree-node.jstree-leaf > .jstree-anchor:hover::before,
#divSharedWithMe.jstree .jstree-container-ul > .jstree-node > .jstree-children > .jstree-node.jstree-leaf > .jstree-anchor.jstree-clicked::before {
  border-left-color: var(--default-blue);
}

#divSharedWithMe.jstree .jstree-container-ul .jstree-node .jstree-children .jstree-node:not(.jstree-leaf) .jstree-children .jstree-node:not(.jstree-leaf) {
  margin-left: 30px;
}

/* CSS for Portal Tab Menu */
.portals-list-container ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.portals-list-container li {
  margin-bottom: 12px;
  position: relative;
}

.portals-list-container li > i {
  display: none;
  font-size: 14px;
  color: var(--default-blue);
  background: none;
  position: absolute;
  right: 0;
  top: 50%;
  line-height: 40px;
  transform: translateY(-50%);
}

.portals-list-container li:hover > i {
  display: block;
}

.portals-list-container li a {
  white-space: nowrap;
  position: relative;
  padding: 0;
  font-size: 16px;
  min-height: 40px;
  color: var(--label-color) !important;
  padding-right: 34px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  text-decoration: none;
}

.portals-list-container li a > i {
  width: 20px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  margin-right: 10px;
  color: var(--label-color) !important;
}

.portals-list-container li a > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portals-list-container li.selected-portal a,
.portals-list-container li.selected-portal a > i,
.portals-list-container li a:hover,
.portals-list-container li a:hover > i {
  color: var(--default-blue) !important;
}

.portals-list-container li.selected-portal a,
.portals-list-container li a:hover span {
  font-weight: 500;
}

.dx-popup, .dx-popup-normal .dx-overlay-content, .dx-popup-normal .dx-popup-content {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  border-radius: 8px !important;
  background: var(--label-color) !important;
}

.dx-popup-normal .dx-popover-arrow::after {
  background: var(--label-color) !important;
  border-color: var(--label-color) !important;
}
/* --- READI Platform cross-product link on environment rows ---------------------------------
   Appended by cloudbridgeEnvironments.js, and ONLY for environments that have a counterpart in
   READI Platform. Environments without one get no icon at all, which is the intended behaviour.

   Deliberately mirrors the +/- lever (.jstree-ocl, see ~line 220): both are absolutely positioned
   children of the same <li>, both span top:0 with height:40px, and both centre their glyph inside
   that box. Matching the lever's box is what makes the two icons sit on exactly the same line -
   centring against the .jstree-anchor instead leaves this one visibly high, because the anchor's
   box is shorter than the 40px row.
   NOTE: .jstree-anchor::after is already taken by the tree guide lines - do not reuse it here.  */
#divEnvironmentTree .jstree-node > .readi-platform-link {
  position: absolute;
  /* Use the SAME box as the +/- lever on this row: top:0 with an explicit height, NOT top:0+bottom:0.
     The <li> is the containing block, and it is only as tall as the row while the node is closed -
     once the node opens, its .jstree-children <ul> lives inside that same <li>, so top:0+bottom:0
     stretches this box over the whole expanded subtree and centres the mark somewhere down in the
     children instead of on its own row.
     Matching the lever's fixed height keeps the two icons on one line by construction, whatever the
     node is doing. Safe against the "taller row" case the previous approach was guarding: these
     anchors are white-space:nowrap with ellipsis (see the rule below), so the name cannot wrap and
     the row cannot grow past its line-height. */
  top: 5px;
  height: 40px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;            /* lever uses z-index 1; keep this clickable above the row */
  line-height: 1;
  /* Matched to the "+" on the SAME row (Content/Images/icon_plus.svg): 12x12, and one step lighter
     again on the same grey ramp. The external-link mark has more strokes than a plain plus, so at
     equal colour it still reads heavier - #DEE2E6 balances them visually.
     Literals, as this grey ramp has no tokens in uplift_colors.css. */
  color: #DEE2E6;
  text-decoration: none;
  transition: color 0.2s;
}

/* NOTE: no per-depth height override is needed, and 40px is not a guess. addPlatformLink() in
   cloudbridgeEnvironments.js bails out unless node.type === 'environment', and environment rows are
   always the second tier of the tree - the 40px one (see .jstree-children .jstree-node above). The
   36px tier is everything INSIDE an environment, which never gets this icon. If that ever changes,
   mirror the lever's own 36px override rather than inventing a new number here. */

/* display:block removes the inline baseline gap, which would otherwise push the mark off-centre */
#divEnvironmentTree .jstree-node > .readi-platform-link > svg {
  display: block;
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
}

/* Environment rows: stop long names running underneath the cross-product icon.
   These anchors are width:fit-content; min-width:100% (see the rule near line 108), so with
   white-space:nowrap a long name makes the anchor wider than its row and the text slides under the
   icon, which is absolutely positioned at right:8px of the <li>. Constraining the width and
   reserving 34px on the right makes the name truncate before it reaches the icon.
   display:block mirrors what the top-level rows already do (line ~64) and is what lets
   text-overflow:ellipsis actually apply - it does not work on the anonymous flex item otherwise. */
#divEnvironmentTree .jstree-container-ul > .jstree-node > .jstree-children > .jstree-node > .jstree-anchor {
  display: block;
  width: auto;
  max-width: 100%;
  padding-right: 34px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#divEnvironmentTree .jstree-node > .readi-platform-link:hover,
#divEnvironmentTree .jstree-node > .readi-platform-link:focus {
  color: var(--default-blue);
}

#parametersModal.parametersModalBg {
  overflow: hidden;
  left: 0;
  right: 0;
  top: 76px !important;
  bottom: 0;
  padding: 48px 0 !important;
  background: url(./Images/readi-bg.jpg) no-repeat center top / cover;
}

#parametersModal .modal-dialog {
  width: 100% !important;
  max-width: 804px !important;
  margin: 0 auto !important;
}

#parametersModal:not(.webui-modal) .modal-dialog {
  margin: 30px auto !important;
}

/* #parametersModal.parametersModalBg .modal-dialog {
  height: calc(100vh - 100px) !important;
} */

#parametersModal:not(.parametersModalBg) .modal-content {
  max-height: inherit;
}

#parametersModal.parametersModalBg .modal-body {
  overflow: hidden;
}

#parametersModal .webform-header {
  margin-bottom: 48px;
  border: 0 !important;
  padding: 0;
}

#parametersModal .webform-header h3 {
  padding: 0 !important;
  margin: 0;
}

#parametersModal .webform-header h3 .large {
  font-size: 20px;
  line-height: 20px;
  font-weight: 700;
  margin: 0 0 12px;
  display: block;
  color: var(--default-black);
}

#parametersModal .webform-header h3 .small {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  display: block;
  color: var(--default-gray);
}

#parametersModal.parametersModalBg .modal-dialog .modal-content {
  top: inherit !important;
  bottom: inherit !important;
  border-radius: 10px !important;
  box-shadow: 6px 12px 20px 0px rgba(229, 31, 55, 0.1) !important;
}

#parametersModal .webui-form-border {
  border: 0;
  padding: 24px;
  border-radius: 3px;
  background-color: var(--light-gray);
  height: auto;
  max-height: calc(100vh - 578px);
}

#parametersModal .modal-body table {
  margin: 0 !important;
}

#parametersModal .webui-form-border table tr:first-child th {
  padding-top: 0 !important;
}

#parametersModal .modal-body table tr:first-child th {
  padding-top: 0 !important;
}

#parametersModal .webui-form-border table th {
  padding: 24px 0 6px !important;
  font-weight: normal !important;
  color: var(--label-color) !important;
  display: block;
}

#parametersModal .modal-body table tr {
  background: none !important;
}

#parametersModal .modal-body table tbody td {
  padding: 0 !important;
}

#parametersModal .form-control {
  max-width: 100%;
  font-size: 16px;
  line-height: 20px;
  color: var(--default-black);
  width: 100%;
  padding: 10px 14px !important;
  border-radius: 5px !important;
  background: #fff;
  min-height: 40px !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 1px 2px 0 var(--input-shadow) !important;
}

#parametersModal .form-control[readonly] {
  font-size: 12px;
}

#parametersModal .form-control::placeholder,
#parametersModal input::placeholder {
  font-size: 14px;
  line-height: 20px;
  color: var(--label-color);
}

#parametersModal .exists-recored__table tr {
  padding: 10px 0 0 !important;
}

#parametersModal .exists-recored__table .form-control[readonly] {
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

#parametersModal .modal-body table th {
  padding: 24px 0 6px !important;
  font-weight: 400;
}

.modal-backdrop.hide + .modal-backdrop.in {
  z-index: 1050;
}

.startNewTaskModal {
  z-index: 1052;
}

.startNewTaskModal.in {
  display: flex !important;
  align-items: center;
}

.startNewTaskModal .modal-content {
  padding: 36px 48px;
}

.startNewTaskModal .modal-title {
  margin: 0;
  font-size: 24px;
  line-height: 20px;
  font-weight: 700;
  color: var(--default-black);
}

.startNewTaskModal .modal-subTitle {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--default-gray);
}

.startNewTaskModal .modal-footer {
  padding: 24px 0 0 !important;
  border-top: 1px solid rgba(222, 226, 230, 0.87);
}

.startNewTaskModal .modal-footer .btn {
  font-weight: 500;
}

.startNewTaskModal .modal-footer .btn + .btn {
  margin-left: 18px;
}
.custom-radio input {
  display: none;
}

.custom-radio label {
  position: relative;
  padding-left: 30px;
  margin: 0;
}

.custom-radio label::before,
.custom-radio label::after {
  content: "";
  position: absolute;
  top: 0;
}

.custom-radio label::before {
  left: 0;
  display: block;
  width: 19px;
  height: 19px;
  border-radius: 18px;
  border: 1px solid var(--default-gray);
}

.custom-radio label::after {
  display: none;
  top: 3px;
  left: 3px;
  width: 13px;
  height: 13px;
  border-radius: 13px;
  background-color: var(--default-blue);
}

.custom-radio label:hover::before,
.custom-radio input[type="radio"]:checked~label::before {
  border-color: var(--default-blue);
}

.custom-radio input[type="radio"]:checked~label::after {
  display: block;
}
.jqx-tabs-title-container .jqx-tabs-title {
  font-size: 14px;
  color: #6C757D;
  line-height: 20px;
  padding: 0 24px;
  border: 0;
  min-height: 31px;
  border-bottom: 4px solid transparent;
  transition: all 0.3s;
}

.jqx-tabs-title-container .jqx-tabs-title:hover,
.jqx-tabs-title-container .jqx-tabs-title.jqx-tabs-title-selected-top {
  font-weight: 500;
  color: var(--default-blue);
  border-bottom: 4px solid var(--default-blue);
}

.jqx-tabs-title-container .jqx-tabs-title .jqx-tabs-titleContentWrapper {
  min-height: 26px;
  display: flex;
  align-items: center;
}
/* Typography
========================*/
body {
  font-size: 14px !important;
  line-height: 20px !important;
  color: var(--default-black);
  font-family: "Roboto", sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--default-black);
  font-family: "Roboto", sans-serif !important;
}
@font-face {
  font-family: 'icomoon';
  src: url('fonts/icomoon.eot?k155af');
  src: url('fonts/icomoon.eot?k155af#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?k155af') format('truetype'),
    url('fonts/icomoon.woff?k155af') format('woff'),
    url('fonts/icomoon.svg?k155af#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-bot-studio:before {
  content: "\e900";
}

.icon-portals:before {
  content: "\e901";
}

.icon-tenants:before {
  content: "\e902";
}