/* @import url('https://fonts.googleapis.com/css?family=Open+Sans'); */
@import url("./variable.css");
@import url("/assets/global/plugins/ico-avanza/style.css");

@font-face {
  font-family: "GeneralSans";
  src: url("/assets/fonts/GeneralSans-Regular.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "GeneralSansMedium";
  src: url("/assets/fonts/GeneralSans-Medium.ttf") format("truetype");
  font-weight: 500;
}

@font-face {
  font-family: "GeneralSansSemiBold";
  src: url("/assets/fonts/GeneralSans-Semibold.ttf") format("truetype");
  font-weight: 600;
}

@font-face {
  font-family: "GeneralSansBold";
  src: url("/assets/fonts/GeneralSans-Bold.ttf") format("truetype");
  font-weight: 700;
}

html {
  overflow-y: hidden;
}

body {
  overflow-x: hidden;
  overflow-y: hidden;
  font-family: "GeneralSans";
  background: var(--haifin-Primary-Color) !important;
}

.pl-15 {
  padding-left: 15px;
}

a {
  text-shadow: none;
  color: var(--haifin-Primary-Color);
}

.dashdate .btn.btn-outline.green,
.page-sidebar,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover,
.btn.btn-outline.green:focus {
  background: var(--Theme-Secondary-Color) !important;
}

.dashdate .btn.btn-outline.green:hover {}

.dsh_blued1:hover .dashboard-stat2 .progress,
.dsh_blued2:hover .dashboard-stat2 .progress,
.dsh_blued3:hover .dashboard-stat2 .progress,
.dsh_blued4:hover .dashboard-stat2 .progress {
  background: #b5b5b5 !important;
}

.login #arbAnchor li {
  color: #333 !important;
}

.logo-default {
  width: 111px !important;
}

.login h2 {
  color: #fff;
  font-size: 64px;
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
  line-height: 82px;
  /* 128.125% */
  margin: 0;
}

.login .logo {
  /* background: var(--login-Logo) top center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 70px;
  height: 70px; */
  padding: 0 !important;
  margin: 0 auto !important;
  /* height: 170px; */
}

.login .loginHifinLogo {
  height: 98px;
  margin-bottom: 45px;
}


.login .login-text {
    color: var(--Grey);
    font-size: 30px;
    font-weight: 600;
    line-height: normal;
    text-align: center;
}

.env-label {
    padding: 6px;
    border-radius: 7px;
    background: #fff8f8;
}

.env-label h3 {
    font-weight: bold;
    font-size: 14px;
    /* text-transform: uppercase; */
    margin: 0;
}

body .login {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background: #fff var(--Login-Background) no-repeat !important;
  background-position: center center;
  background-size: cover !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login .content .form-title {
  color: #333 !important;
}

.login .content h4 a {
  color: #333 !important;
}

.page-sidebar.navbar-collapse.collapse {
  background: var(--Theme-Secondary-Color);
  height: calc(100% - 60px) !important;
}

.page-header.navbar .page-top {
  height: auto !important;
  background: #fff;
  width: 85.5%;
}

.page-header.navbar {
  height: 60px !important;
  min-height: 60px !important;
}

a:hover {
  cursor: pointer;
  color: #333 !important;
}

.login .lng li.actv {
  padding: 4px;
  background: #333 !important;
  -webkit-border-radius: 4px !important;
  -moz-border-radius: 4px !important;
  -ms-border-radius: 4px !important;
  -o-border-radius: 4px !important;
  border-radius: 4px !important;
}

.login .copyright {
  margin-top: 434px !important;
  color: #a7a7a7 !important;
}

@media (min-width: 992px) {
  .login .lng li.actv {
    padding: 2px 8px !important;
    background: #333 !important;
  }
}

/* .sdg_tbl thead {
    border-bottom: 2px solid var(--Theme-Primary-Color);
    background: #f9fdf2;
} */

.page-header.navbar .top-menu .navbar-nav>li.dropdown .dropdown-toggle .badge.badge-default {
  background: rgba(239, 89, 89, 1) !important;
}

.page-header.navbar.navbar-fixed-top,
.page-header.navbar.navbar-static-top {
  border-top: none;
}

.font-blued1-sharp,
.font-blued1-sharp+small,
.font-blued2-sharp,
.font-blued2-sharp+small,
.font-blued3-sharp,
.font-blued3-sharp+small,
.font-blued4-sharp,
.font-blued4-sharp+small {
  color: var(--Theme-Primary-Color) !important;
}

.dsh_blued1:hover .dashboard-stat2,
.dsh_blued2:hover .dashboard-stat2,
.dsh_blued3:hover .dashboard-stat2,
.dsh_blued4:hover .dashboard-stat2,
.overDueBlk:hover {
  background: var(--Theme-Secondary-Color) !important;
}

.progress-bar.blued1-sharp,
.progress-bar.blued2-sharp,
.progress-bar.blued3-sharp,
.progress-bar.blued4-sharp {
  background: var(--Theme-Primary-Color) !important;
}

.daterange_con,
.page-sidebar .page-sidebar-menu>li.active.open>a,
.page-sidebar .page-sidebar-menu>li.active>a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li.active.open>a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li.active>a {
  background: var(--Theme-Secondary-Color);
}

.daterange_con {
  border: 1px solid var(--Theme-Secondary-Color);
}

.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li>a {
  border-bottom: 1px solid #40423e;
}

.pagination {
  margin: 0;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
  color: #fff !important;
  font-size: 12px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
  border-radius: 20px;
  background-color: var(--haifin-Primary-Color) !important;
  border: 0;
  width: 24px;
  height: 24px;
}

.pagination>li>a,
.pagination>li>span {
  padding: 0;
  color: var(--haifin-gray-Color) !important;
  background: transparent !important;
  border: 0;
  margin-left: 0;
  font-size: 12px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal !important;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-sidebar .page-sidebar-menu>li.active.open>a,
.page-sidebar .page-sidebar-menu>li.active>a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li.active.open>a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li.active>a {
  color: #fff;
}

.page-sidebar .page-sidebar-menu>li.open>a,
.page-sidebar .page-sidebar-menu>li:hover>a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li.open>a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li:hover>a,
.page-sidebar .page-sidebar-menu li.active a,
.page-sidebar .page-sidebar-menu>li.active>a:hover {
  border-radius: 4px;
  background: var(--haifin-Primary-Gradient);
  color: var(--haifin-Primary-Color);
}

.page-sidebar-menu-hover-submenu li:hover>.sub-menu {
  background: #2a2b28 !important;
}

.page-sidebar-menu-hover-submenu li:hover a>.arrow {
  border-right: 8px solid #323550;
}

.page-sidebar-menu.page-sidebar-menu-hover-submenu>li:hover>.sub-menu:before,
.page-sidebar-menu.page-sidebar-menu-hover-submenu>li:hover>.sub-menu.upward:after {
  color: var(--Theme-Primary-Color);
}

.page-sidebar .page-sidebar-menu .sub-menu>li.active>a,
.page-sidebar .page-sidebar-menu .sub-menu>li.open>a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu>li.active>a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu>li.open>a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu>li:hover>a {
  background: var(--Theme-Primary-Color) !important;
}

.text-success {
  color: var(--Theme-Primary-Color) !important;
}

.overDueBlk .days {
  color: var(--Theme-Primary-Color);
}

.overDueBlk:hover p,
.overDueBlk:hover h3,
.overDueBlk:hover a,
.overDueBlk:hover i {
  color: #fff !important;
}

.btn.green:not(.btn-outline),
.btn-success {
  background-color: var(--Theme-Primary-Color) !important;
  border-color: var(--Theme-Primary-Color) !important;
  -webkit-border-radius: 4px !important;
  -moz-border-radius: 4px !important;
  border-radius: 4px !important;
}

.btn.green:not(.btn-outline):hover,
.btn-success.active,
.btn-success:active,
.btn-success:hover,
.open>.btn-success.dropdown-toggle {
  background-color: #555 !important;
  border-color: #666 !important;
}

.btn.green:not(.btn-outline):focus,
.btn.green:not(.btn-outline):active {
  background-color: var(--Theme-Primary-Color) !important;
  border-color: var(--Theme-Primary-Color) !important;
}

.btn.btn-outline.red.active,
.btn.btn-outline.red:active,
.btn.btn-outline.red:active:focus,
.btn.btn-outline.red:active:hover,
.btn.btn-outline.red:focus,
.btn.btn-outline.red:hover {
  border-color: var(--Theme-Primary-Color);
  color: #fff;
  background-color: var(--Theme-Primary-Color);
}

.btn.btn-outline.red {
  border-color: var(--Theme-Primary-Color) !important;
  color: var(--Theme-Primary-Color) !important;
  background: 0 0;
}

.btn.btn-outline.red.active,
.btn.btn-outline.red:active,
.btn.btn-outline.red:active:focus,
.btn.btn-outline.red:active:hover,
.btn.btn-outline.red:focus,
.btn.btn-outline.red:hover {
  border-color: var(--Theme-Primary-Color) !important;
  color: #fff !important;
  background-color: var(--Theme-Primary-Color) !important;
}

.btn.btn-outline.green.active,
.btn.btn-outline.green:active,
.btn.btn-outline.green:active:focus,
.btn.btn-outline.green:active:hover,
.btn.btn-outline.green:focus,
.btn.btn-outline.green:hover {
  border-color: var(--Theme-Primary-Color);
  color: #fff;
  background-color: var(--Theme-Primary-Color);
}

.dashdate .btn.btn-outline.green:hover {
  border-color: #40496a;
}

.dsh_blued1:hover .dashboard-stat2 .progress,
.dsh_blued2:hover .dashboard-stat2 .progress,
.dsh_blued3:hover .dashboard-stat2 .progress,
.dsh_blued4:hover .dashboard-stat2 .progress {
  background: #b5b5b5 !important;
}

.logo-default {
  width: 111px !important;
}

a:hover {
  cursor: pointer;
  color: var(--Theme-Secondary-Color) !important;
}

.login .lng li.actv {
  padding: 4px;
  background: #333 !important;
  -webkit-border-radius: 4px !important;
  -moz-border-radius: 4px !important;
  -ms-border-radius: 4px !important;
  -o-border-radius: 4px !important;
  border-radius: 4px !important;
}

.login .copyright {
  margin-top: 434px !important;
  color: #a7a7a7 !important;
}

@media (min-width: 992px) {
  .login .lng li.actv {
    padding: 2px 8px !important;
    background: #333 !important;
  }
}

.sdg_tbl thead {
  /* border-bottom: 2px solid var(--Theme-Secondary-Color); */
  background: var(--haifin-Primary-Gradient);
}

.page-header.navbar .top-menu .navbar-nav>li.dropdown .dropdown-toggle .badge.badge-default {
  background: rgba(239, 89, 89, 1) !important;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
  font-size: 9px;
  top: 10px;
}

.page-header.navbar.navbar-fixed-top,
.page-header.navbar.navbar-static-top {
  border-top: none;
}

.font-blued1-sharp,
.font-blued1-sharp+small,
.font-blued2-sharp,
.font-blued2-sharp+small,
.font-blued3-sharp,
.font-blued3-sharp+small,
.font-blued4-sharp,
.font-blued4-sharp+small {
  color: var(--Theme-Primary-Color) !important;
}

.dsh_blued1:hover .dashboard-stat2,
.dsh_blued2:hover .dashboard-stat2,
.dsh_blued3:hover .dashboard-stat2,
.dsh_blued4:hover .dashboard-stat2,
.overDueBlk:hover {
  background: var(--Theme-Primary-Color);
}

.progress-bar.blued1-sharp,
.progress-bar.blued2-sharp,
.progress-bar.blued3-sharp,
.progress-bar.blued4-sharp {
  background: var(--Theme-Primary-Color) !important;
}

.dashdate .btn.btn-outline.green,
.btn.btn-outline.green:focus {
  border-color: var(--Theme-Primary-Color) !important;
  color: #fff !important;
  background-color: var(--Theme-Primary-Color) !important;
}

.portlet.light.sdg_portlet,
.dashdate .modal-content {
  border-top: 4px solid var(--Theme-Secondary-Color) !important;
  /* min-width: fit-content; */
}

.portlet_fullscreen {
  display: block;
  z-index: 9998;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: auto;
}

.sdg_tbl thead tr th {
  padding: 5px;
  /* padding: 10px; */
  color: #fff;
  /* font-size: 75%; */
  font-size: 10px;
  font-family: "GeneralSansMedium";
  font-weight: 500;
  line-height: normal;
  border: 0 !important;
  vertical-align: middle;
  text-align: center;
}

.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li>a {
  border-bottom: 1px solid #40423e;
}

.page-sidebar .page-sidebar-menu>li.active.open>a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li.active.open>a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li.active>a {
  color: #fff;
}

/* .page-sidebar .page-sidebar-menu > li:hover .chevron-right,
.page-sidebar .page-sidebar-menu > li:hover .chevron-down,
.page-sidebar .page-sidebar-menu > li.active .chevron-down,
.page-sidebar .page-sidebar-menu > li.active .chevron-right {
  filter: brightness(0) saturate(100%) invert(0%) sepia(97%) saturate(12%)
    hue-rotate(207deg) brightness(102%) contrast(103%);
} */

.page-sidebar .page-sidebar-menu>li {
  margin-bottom: 10px;
}

.page-sidebar .page-sidebar-menu>li:last-child {
  margin-bottom: 0;
}

.page-sidebar .page-sidebar-menu>li.open>a,
.page-sidebar .page-sidebar-menu>li:hover>a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li.open>a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li:hover>a,
.page-sidebar .page-sidebar-menu>li.active>a:hover {
  border-radius: 4px;
  background: var(--haifin-Primary-Gradient);
  color: var(--haifin-Primary-Color);
}

.page-sidebar-menu-hover-submenu li:hover>.sub-menu {
  background: #f1f1f1 !important;
  color: #333 !important;
}

.page-sidebar-menu-hover-submenu li:hover a>.arrow {
  border-right: 8px solid #323550;
}

.page-sidebar-menu.page-sidebar-menu-hover-submenu>li:hover>.sub-menu:before,
.page-sidebar-menu.page-sidebar-menu-hover-submenu>li:hover>.sub-menu.upward:after {
  color: var(--Theme-Primary-Color);
}

.page-sidebar .page-sidebar-menu .sub-menu>li.active>a,
.page-sidebar .page-sidebar-menu .sub-menu>li.open>a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu>li.active>a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu>li.open>a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu>li:hover>a {
  background: var(--Theme-Primary-Color) !important;
  color: #fff !important;
}

.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li>a>i {
  color: var(--Theme-Primary-Color) !important;
}

.page-sidebar .page-sidebar-menu>li>a>i {
  color: var(--haifin-Primary-Color) !important;
}

.page-sidebar .page-sidebar-menu>li.active>a>.title,
.page-sidebar .page-sidebar-menu>li.active>a>i,
.page-sidebar .page-sidebar-menu>li:hover>a>.title,
.page-sidebar .page-sidebar-menu>li:hover>a>i {
  color: #fff !important;
}

.text-success {
  color: var(--Theme-Primary-Color) !important;
}

.overDueBlk .days {
  color: var(--Theme-Primary-Color);
}

.overDueBlk:hover p,
.overDueBlk:hover h3,
.overDueBlk:hover a,
.overDueBlk:hover i {
  color: #fff !important;
}

.btn.green:not(.btn-outline),
.btn-success {
  background-color: var(--Theme-Primary-Color) !important;
  border-color: var(--Theme-Primary-Color) !important;
  -webkit-border-radius: 2px !important;
  -moz-border-radius: 2px !important;
  border-radius: 2px !important;
}

.btn.green:not(.btn-outline):hover,
.btn-success.active,
.btn-success:active,
.btn-success:hover,
.open>.btn-success.dropdown-toggle {
  background-color: var(--Theme-Secondary-Color) !important;
  border-color: var(--Theme-Secondary-Color) !important;
  color: #fff !important;
}

.btn.green:not(.btn-outline):focus,
.btn.green:not(.btn-outline):active {
  background-color: var(--Theme-Primary-Color) !important;
  border-color: var(--Theme-Primary-Color) !important;
}

.btn.btn-outline.red.active,
.btn.btn-outline.red:active,
.btn.btn-outline.red:active:focus,
.btn.btn-outline.red:active:hover,
.btn.btn-outline.red:focus,
.btn.btn-outline.red:hover {
  border-color: var(--Theme-Primary-Color);
  color: #fff;
  background-color: var(--Theme-Primary-Color);
}

.btn.btn-outline.red {
  border-color: var(--Theme-Primary-Color) !important;
  color: var(--Theme-Primary-Color) !important;
  background: 0 0;
}

.btn.btn-outline.red.active,
.btn.btn-outline.red:active,
.btn.btn-outline.red:active:focus,
.btn.btn-outline.red:active:hover,
.btn.btn-outline.red:focus,
.btn.btn-outline.red:hover {
  border-color: var(--Theme-Primary-Color) !important;
  color: #fff !important;
  background-color: var(--Theme-Primary-Color) !important;
}

.btn.btn-outline.green.active,
.btn.btn-outline.green:active,
.btn.btn-outline.green:active:focus,
.btn.btn-outline.green:active:hover,
.btn.btn-outline.green:focus,
.btn.btn-outline.green:hover {
  border-color: var(--Theme-Primary-Color);
  color: #fff;
  background-color: var(--Theme-Primary-Color);
}

.dashdate .btn.btn-outline.green:hover {
  border-color: #40496a;
}

.page-header.navbar .page-header-inner {
  display: flex;
  background: #fff;
  box-shadow: 0px 4px 18.1px 0px rgba(0, 0, 0, 0.08);
  height: 60px;
  align-items: center;
}

.page-header.navbar .page-logo {
  background: var(--topbar-logo);
  background-repeat: no-repeat;
  /* width: 225px !important; */
  /* width: 14.5% !important; */
  height: 31px;
  margin: 0;
  padding: 0;
  background-position: center;
  background-size: contain;
}

.menu-toggler.sidebar-toggler:hover {
  background: none;
}

.page-header-fixed .page-container {
  /* margin-top: 45px; */
  margin-top: 0;
}

.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu>li>a {
  background: var(--Theme-Secondary-Color) !important;
  color: #fff !important;
}

.page-sidebar-closed .page-header.navbar .page-logo {
  /* background: var(--Main-logo) no-repeat; */
  margin-left: 0.2% !important;
  /* background-size: cover; */
  width: 3.5% !important;
}

.page-sidebar-closed .page-header.navbar .page-top {
  width: 96.5%;
}

.margin-zero {
  margin-bottom: 0px;
  margin-top: 0px;
}

.textareacipher {
  white-space: pre;
}

.daterange_con_tabs {
  display: flex;
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0;
}

.tab_active {
  background-color: var(--Theme-Primary-Color);
  padding: 6px 12px;
  border-radius: 10px !important;
  -webkit-box-shadow: inset 0px 0px 41px -9px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: inset 0px 0px 41px -9px rgba(0, 0, 0, 0.7);
  box-shadow: inset 0px 0px 41px -9px rgba(0, 0, 0, 0.4);
  margin-right: 15px;
  border: 2px solid var(--Theme-Primary-Color-dark);
  height: fit-content;
}

.tab_notactive {
  background-color: var(--Theme-Primary-Color);
  padding: 6px 12px;
  border-radius: 10px !important;
  -webkit-box-shadow: inset 0px 0px 41px -9px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: inset 0px 0px 41px -9px rgba(0, 0, 0, 0.7);
  box-shadow: inset 0px 0px 41px -9px rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 0px 0px 48px 3px rgba(0, 0, 0, 0.29);
  -moz-box-shadow: 0px 0px 48px 3px rgba(0, 0, 0, 0.29);
  box-shadow: 0px 0px 48px 3px rgba(0, 0, 0, 0.29);
  border: 2px solid var(--Theme-Primary-Color-dark);
  margin-right: 15px;
  height: fit-content;
}

.tablogo {
  display: -webkit-box;
  margin: auto;
  height: 28px;
}

.tab_dropdown {
  height: 16px;
  margin-top: 22px;
  padding-left: 12px;
}

.dropbtn {
  background-color: #4caf50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  /* display: inline-block; */
}

/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--Theme-Primary-Color-dark);
  min-width: 180px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  left: -135px;
  top: 36px;
}

/* Links inside the dropdown */

.dropdown-content a {
  color: #fff !important;
  padding: 10px 28px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: var(--Theme-Primary-Color-dark);
  color: #fff !important;
  text-decoration: none;
}

/* Show the dropdown menu on hover */

li:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

.tab_dropdownnav:hover {
  padding: 17px 10px 25px;
  cursor: pointer;
  background: var(--Theme-Primary-Color-dark);
  border-radius: 4px !important;
}

.tab_dropdownnav {
  padding: 17px 10px 25px;
  cursor: pointer;
}

.tab_notactive:hover {
  background-color: var(--Theme-Primary-Color);
  padding: 6px 12px;
  border-radius: 10px !important;
  -webkit-box-shadow: inset 0px 0px 41px -9px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: inset 0px 0px 41px -9px rgba(0, 0, 0, 0.7);
  box-shadow: inset 0px 0px 41px -9px rgba(0, 0, 0, 0.4);
  margin-right: 15px;
  border: 2px solid var(--Theme-Primary-Color-dark);
  height: fit-content;
}

.dashboard-stat2 {
  /* border: 1px dashed grey !important; */
  box-shadow: 0px 0px 8px #8080807a;
}

.note.note-documentation {
  background-color: #70708533;
  border-color: var(--tabs-color);
  color: #000;
}

/* Please don't change the global styles as many other people are using in thier applications. :) */
.control-label {
  /* padding-Top: 8px;  */
  font-family: "GeneralSans";
  font-weight: 400;
}

.tabbable-line2>.nav-tabs>li.open,
.tabbable-line>.nav-tabs>li:hover {
  background: 0 0;
  border-bottom: 4px solid var(--Tabs-color-hover);
}

.tabbable-line2>.nav-tabs>li.active {
  background: 0 0;
  border-bottom: 4px solid #99da58;
  position: relative;
}

.page-container-bg-solid .tabbable-line>.tab-content {
  border-top: 0px !important;
}

.tab-content2 {
  margin-top: 0;
  border: 0;
  border-top: 1px solid #eef1f5;
  padding: 0px !important;
}

.tabbable-line>.nav-tabs>li.active {
  background: 0 0;
  border-bottom: 4px solid var(--tabs-color) !important;
  position: relative;
}

pre {
  white-space: pre-wrap;
  /* Since CSS 2.1 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  /* Internet Explorer 5.5+ */
}

.scroll {
  display: block;
  height: 200px;
  overflow: auto;
}

.scroll ::-webkit-scrollbar {
  display: none;
}

.scroll-div {
  white-space: nowrap;
}

.box {
  display: inline-block;
  width: 250px;
  height: 150px;
  background-color: #004489;
  margin: 10px;
  color: white;
}

.template-title {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.template-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
}

.addEditLab .row {
  margin-top: 15px;
  margin-bottom: 15px;
}

/* dendrogram */

/* 
.link {
    fill: none;
    stroke: #00854B;
    stroke-opacity: 0.7;
    stroke-width: 1.7px;
    stroke-dasharray: 5;
    animation: dash 10s linear infinite;

}

.link2 {
    fill: none;
    stroke: red;
    stroke-opacity: 1;
    stroke-width: 1.2px;
    stroke-dasharray: none;
    animation: none;
}

.link3 {
    fill: none;
    stroke: #00854B;
    stroke-opacity: 1;
    stroke-width: 1.2px;
    stroke-dasharray: none;
    animation: none;
}

.CheckboxList{
    display: flex;
    flex-direction: column;
}

.checkboxInput {
    margin: 5px !important;
}

.text1 {
    fill: #00854B !important;
}
.text2 {
    fill: red !important;
}
@keyframes dash {
    to {
        stroke-dashoffset: 100;
    }
} */

/* 
.GraphPlaceholder{
    background-image: url('../../../images/graphplaceholder.jpg'); */

/* background-position: 'center'; */

/* background-size: 'cover'; */

/* background-repeat: 'no-repeat';
    background-size: 100%;
    opacity: 0.5;
  } */

/* .GraphPlaceholderText {
    position: absolute;
    font-family: "Lucida Grande", Tahoma;
    font-size: 12px;
    font-weight: lighter;
    text-align: center;
    color:#000;
    vertical-align: middle;
    padding:0px;
}


text {
    font-family: "Arial Black", Gadget, sans-serif;
    fill: black;
    font-weight: bold;
    font-size: 14px
}

.xAxis .tick text {
    fill: black;
}

.grid .tick line {
    stroke: grey;
    stroke-dasharray: 5, 10;
    opacity: 0.7;
}

.grid path {
    stroke-width: 0;
}

.node circle {
    fill: #999;
}

.node--internal circle {
    fill: #555;
}

.node--internal text {
    font-size: 16px;
    text-shadow: 0 2px 0 #fff, 0 -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff;
}

.node--leaf text {
    fill: black;
}

.ballG text {
    fill: black;
}

.shadow {
    -webkit-filter: drop-shadow(-1.5px -1.5px 1.5px #000);
    filter: drop-shadow(-1.5px -1.5px 1.5px #000);
}*/

/* dendogram-end */

.help-block {
  max-width: 600px !important;
}

/* graph preview container starts */

.pdf-preview {
  width: 275px;
  height: 0px;
  /* border: 1px solid lightgray; */
  /* box-shadow: 5px 9px 7px 2px lightgrey; */
}

.graph-img-preview {
  width: 180px;
  height: 140px;
  border: 1px solid lightgray;
  /* box-shadow: 5px 9px 7px 2px lightgrey; */
}

.graph-title {
  display: none;
}

.graph-select {
  display: none;
}

.graph-titles {
  display: block;
  position: absolute;
  /* left: 100px; */
  font-size: 12px;
  bottom: 75px;
  font-family: "GeneralSansBold";
  font-weight: 700;
  width: 100%;
  text-align: center;
}

.graph-selected {
  display: block;
  position: absolute;
  /* left: 100px; */
  font-size: 25px;
  bottom: 30px;
  font-family: "GeneralSansBold";
  font-weight: 700;
  left: 30px;
  text-align: center;
  z-index: 99;
}

.scroll-container .item:hover .graph-select {
  display: block;
  position: absolute;
  /* left: 100px; */
  font-size: 25px;
  bottom: 30px;
  font-family: "GeneralSansBold";
  font-weight: 700;
  left: 30px;
  text-align: center;
  z-index: 99;
}

.graph-select:hover+.graph-img-preview {
  opacity: 0.2;
}

.scroll-container {
  display: flex;
  width: 100%;
  overflow-x: hidden;
  align-items: center;
  scroll-behavior: smooth;
}

.scroll-container .item {
  margin: 5px;
  contain: content;
  /* box-shadow: 0px 0px 8px lightgrey; */
  border-radius: 2px !important;
}

#pdf .scroll-container .item {
  margin: 5px;
  contain: content;
  width: 200px;
  box-shadow: 0px 0px 8px lightgrey;
}

.scroll-container img:hover {
  opacity: 0.2;
}

.scroll-container .item:hover .graph-title {
  display: block;
  position: absolute;
  /* left: 100px; */
  font-size: 12px;
  bottom: 75px;
  font-family: "GeneralSansBold";
  font-weight: 700;
  width: 100%;
  text-align: center;
}

.scroll-container-pdf {
  display: flex;
  width: 100%;
  overflow-x: hidden;
  align-items: center;
  scroll-behavior: smooth;
}

.scroll-container-pdf .item-pdf {
  margin: 5px;
  contain: content;
  box-shadow: 0px 0px 8px lightgrey;
  width: 278px !important;
  max-width: 278px !important;
  height: 50px !important;
  display: flex;
  align-items: center;
}

.scroll-container-pdf img:hover {
  opacity: 0.2;
}

.scroll-container-pdf .item-pdf:hover .graph-title-pdf {
  display: block;
  position: absolute;
  /* left: 100px; */
  font-size: 12px;
  bottom: 75px;
  font-family: "GeneralSansBold";
  font-weight: 700;
  width: 100%;
  text-align: center;
}

/* .scroll-icons {
    display: flex;
    width: 100%;
    position: absolute;
    align-items: center;
    justify-content: space-between;
} */

.refresh-img-div {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  left: 20px;
  top: 6px;
  right: 30px;
}

.portlet.light>.portlet-title {
  padding: 0;
  min-height: 35px !important;
}

.refresh-img {
  height: 25px;
  width: 25px;
  padding: 4px;
}

.refresh-img-full-div {
  position: relative;
  /* left: 0px; */
  right: 90px;
  /* top: 0px; */
  /* bottom: 20px; */
  float: right;
  left: 20px;
  bottom: 65px;
  color: #9a9aa6;
}

.refresh-img-full {
  width: 22px;
  height: 22px;
  /* background: orange; */
  color: #9a9aa6;
  padding: 4px;
}

.content-toggle {
  position: relative;
  bottom: 10px;
  right: 15px;
  display: flex;
  align-items: center;
  font-size: 9px;
}

.portlet.light>.portlet-title>.caption {
  color: #666;
  padding: 4px 0;
  width: 60%;
}

.content-toggle {
  position: relative;
  bottom: 10px;
  right: 15px;
  display: flex;
  align-items: center;
  font-size: 9px;
}

.content-toggle .switch {
  position: relative;
  display: inline-block;
  width: 55px;
  height: 40px;
}

.content-toggle .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* .switch {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 45px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
} */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--Theme-Secondary-Color);
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 3px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
}

/* .slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
} */

input:checked+.slider {
  background-color: var(--Theme-Secondary-Color);
}

input:focus+.slider {
  box-shadow: 0 0 0 4px rgba(21, 156, 228, 0.7);
  outline: none;
}

input:checked+.slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px !important;
}

.slider.round:before {
  border-radius: 50%;
}

.d3-tip {
  /* line-height: 1; */
  font-weight: bold;
  z-index: 9999;
  padding: 6px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 4px;
}

/* Creates a small triangle extender for the tooltip */

.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  z-index: 9999;
  font-size: 10px;
  width: 100%;
  /* line-height: 1; */
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}




/* Style northward tooltips differently */

.d3-tip.n:after {
  margin: -1px 0 0 0;
  z-index: 9999;
  top: 100%;
  left: 0;
}




.tooltip {
  /* line-height: 1; */
  font-weight: bold;
  z-index: 9999;
  padding: 6px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 4px;
}


path.slice {
  stroke-width: 2px;
}

polyline {
  opacity: 0.3;
  stroke: black;
  stroke-width: 2px;
  fill: none;
}

.sankeylink:hover {
  stroke-opacity: 0.2;
}

.bg-blue-period {
  background-color: var(--Theme-Secondary-Color);
  text-align: center;
  color: white;
  /* padding: 6.5rem 0; */
  border: 3px solid var(--Theme-Secondary-Color);
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
  height: 155px;
  display: flex;
  justify-content: center;
  align-items: center;
  writing-mode: vertical-rl;
  width: 80px;
}

.bg-blue-year {
  background-color: var(--Theme-Secondary-Color);
  text-align: center;
  color: white;
  padding: 0.75rem;
  border-top-left-radius: 6px !important;
  border-bottom-left-radius: 6px !important;
}

.zone {
  padding: 4.2rem;
}

.bg-grey {
  background-color: #e5e5e5;
  text-align: center;
  color: black;
  padding: 0.75rem;
}

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

.pt-0 {
  padding-top: 0 !important;
}

.pt-1 {
  padding-top: 5px !important;
}

.pt-2 {
  padding-top: 10px !important;
}

.pt-3 {
  padding-top: 15px !important;
}

.pt-4 {
  padding-top: 20px !important;
}

.pt-5 {
  padding-top: 25px !important;
}

.m-0 {
  margin: 0 !important;
}

.mx-1 {
  margin-left: 5px !important;
  margin-right: 5px !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

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

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

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

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

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

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

.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 5px !important;
}

.mt-2 {
  margin-top: 10px !important;
}

.mt-3 {
  margin-top: 15px !important;
}

.mt-4 {
  margin-top: 20px !important;
}

.mt-5 {
  margin-top: 25px !important;
}

.ml-1 {
  margin-left: 5px !important;
}

.ml-2 {
  margin-left: 10px !important;
}

.ml-3 {
  margin-left: 15px !important;
}

.ml-4 {
  margin-left: 20px !important;
}

.ml-5 {
  margin-left: 25px !important;
}

.mr-1 {
  margin-right: 5px !important;
}

.mr-2 {
  margin-right: 10px !important;
}

.mr-3 {
  margin-right: 15px !important;
}

.mr-4 {
  margin-right: 20px !important;
}

.mr-5 {
  margin-right: 25px !important;
}

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

.p-1 {
  padding: 5px !important;
}

.p-2 {
  padding: 10px !important;
}

.p-3 {
  padding: 15px !important;
}

.p-4 {
  padding: 20px !important;
}

.p-5 {
  padding: 25px !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.pl-1 {
  padding-left: 5px !important;
}

.pl-2 {
  padding-left: 10px !important;
}

.pl-3 {
  padding-left: 15px !important;
}

.pl-4 {
  padding-left: 20px !important;
}

.pl-5 {
  padding-left: 25px !important;
}

.pr-0 {
  padding-right: 0 !important;
}

.pr-1 {
  padding-right: 5px !important;
}

.pr-2 {
  padding-right: 10px !important;
}

.pr-3 {
  padding-right: 15px !important;
}

.pr-4 {
  padding-right: 20px !important;
}

.pr-5 {
  padding-right: 25px !important;
}

.grid {
  display: grid !important;
}

.radio-input {
  width: 100%;
  position: absolute;
  z-index: 9999;
  background: red;
  left: 0px;
  height: 100%;
  bottom: 0px;
  opacity: 0;
  cursor: pointer;
}

.radio-input:hover .open>.btn-primary.dropdown-toggle {
  color: white !important;
  background-color: #0576b2 !important;
  border-color: white !important;
}

.radio-selected {
  color: white !important;
  background-color: #0576b2 !important;
  border-color: white !important;
}

.button-row {
  display: flex;
  justify-content: flex-end;
  /* padding: 10px; */
  margin-top: 10px;
  margin-bottom: 10px;
}

.search-button {
  width: 150px;
  height: 50px;
}

.graphLoader,
.graphLoader:before,
.graphLoader:after {
  background: #40496a;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}

.graphLoader {
  height: 40px;
  max-height: 40px;
  color: #40496a;
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

.DraftEditor-editorContainer,
.RichTextEditor__editor___1QqIU .public-DraftEditor-content {
  min-height: 250px;
  height: 250px;
}

.graphLoader:before,
.graphLoader:after {
  position: absolute;
  top: 0;
  content: "";
}

.graphLoader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.graphLoader:after {
  left: 1.5em;
}

#progressbar li {
  list-style-type: none;
  color: rgb(51, 51, 51);
  text-transform: uppercase;
  font-size: 11px;
  /* width: 25%; */
  float: left;
  position: relative;
  font-weight: 800;
}

#progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 35px;
  line-height: 32px;
  display: block;
  font-size: 16px;
  color: #fff;
  background: #555;
  border-radius: 3px;
  margin: 0 auto 4px auto;
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
  position: relative;
  z-index: 1;
}

#progressbar li:after {
  content: "";
  width: 100%;
  height: 3px;
  background: #ffcc00;
  position: absolute;
  left: -50%;
  top: 15px;
  z-index: 0;
}

#progressbar {
  margin: 10px 0 30;
  overflow: hidden;
  counter-reset: step;
  width: 100%;
  text-align: center;
  padding-left: 0;
}

#progressbar li:first-child:after {
  content: none;
}

#progressbar li.notPassed:before {
  background: #a5a6af;
  color: white;
}

#progressbar li.active:before {
  background: #00ae4f;
  color: white;
}

#progressbar li.warning:before {
  background: #e80202;
  color: white;
}

#progressbar li.danger:before {
  background: #fb7425;
  color: white;
}

/* SELECT/UNSELECT ALL SAFF LOGS*/

.notification-hit-grid table thead tr th a {
  color: white !important;
  text-decoration: none !important;
}

/* multiselect */

span.multiselect-native-select {
  position: relative;
}

span.multiselect-native-select select {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px -1px -1px -3px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  left: 50%;
  top: 30px;
}

.multiselect-container {
  position: absolute;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.multiselect-container .input-group {
  margin: 5px;
}

.multiselect-container>li {
  padding: 0;
}

.multiselect-container>li>a.multiselect-all label {
  font-family: "GeneralSansBold";
  font-weight: 700;
}

.multiselect-container>li.multiselect-group label {
  margin: 0;
  padding: 3px 20px 3px 20px;
  height: 100%;
  font-family: "GeneralSansBold";
  font-weight: 700;
}

.multiselect-container>li.multiselect-group-clickable label {
  cursor: pointer;
}

.multiselect-container>li>a {
  padding: 0;
}

.multiselect-container>li>a>label {
  margin: 0;
  height: 100%;
  cursor: pointer;
  font-family: "GeneralSans";
  font-weight: 400;
  padding: 3px 10px 3px 30px;
}

.multiselect-container>li>a>label.radio,
.multiselect-container>li>a>label.checkbox {
  margin: 0;
}

.multiselect-container>li>a>label>input[type="checkbox"] {
  margin-bottom: 5px;
}

.btn-group>.btn-group:nth-child(2)>.multiselect.btn {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.form-inline .multiselect-container label.checkbox,
.form-inline .multiselect-container label.radio {
  padding: 3px 20px 3px 40px;
}

.form-inline .multiselect-container li a label.checkbox input[type="checkbox"],
.form-inline .multiselect-container li a label.radio input[type="radio"] {
  margin-left: -20px;
  margin-right: 0;
}

nav>div a.nav-item.nav-link,
nav>div a.nav-item.nav-link.active {
  border: none;
  padding: 8px 25px;
  color: #000;
  background: #e5e5e5;
  border-radius: 0;
}

nav>div a.nav-item.nav-link:hover,
nav>div a.nav-item.nav-link:focus {
  border: none;
  background: #081a48;
  color: white !important;
  border-radius: 0;
  text-decoration: none;
}

.tab-content {
  background: #fff;
  line-height: 25px;
  border: 1px solid #ddd;
  padding: 10px 15px;
  min-height: 54px;
}

label>b {
  display: none;
}

/* multiselect ends */

/* Login Screen CSS -- bilal */

.login-panel {
    /* height: 100vh; */
    /* margin-top: 10px; */
    justify-content: center;
    align-self: center;
    background-color: white;
    /* padding: 75px; */
    display: flex;
    align-items: center;
    border-radius: 26px !important;
    padding: 30px;
    max-width: 480px;
}

.login-panel h3 {
  color: var(--haifin-gray-Color);
  font-size: 22px;
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
  line-height: normal;
  text-align: center;
  margin: 0;
}

.btn.btn-login.btn-block:hover {
  color: white !important;
  background: var(--haifin-Primary-Gradient);
  box-shadow: 0px 4px 10px 0px rgb(149 0 0 / 30%) !important;
}

#engAnchor.actv a:hover {
  color: white !important;
  text-decoration: none;
}

#arbAnchor.actv a:hover {
  color: white !important;
  text-decoration: none;
}

.login-panel .login-form {
    width: 100%;
    min-height: 350px;
}

.carousel-inner {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  width: 100%;
  height: 59%;
}

.carousel-inner .form-group {
  margin-bottom: 12px !important;
  /* padding: 5px 10px; */
}

.login .form-control,
.locked .lock-form .form-group .form-control {
  height: 38px !important;
  padding: 10px 33px 10px 10px;
  border-radius: 4px !important;
  border: 1px solid var(--Field-Border) !important;
}

.login .eye {
  right: 10px;
  cursor: pointer;
  top: 50%;
  position: absolute;
  transform: translateY(-50%);
}

.input-icon>i {
  color: var(--Theme-Secondary-Color);
  position: absolute;
  margin: 14px 2px 7px 10px;
  z-index: 3;
  width: 16px;
  font-size: 16px;
  text-align: center;
  left: 0;
}

.forget-password {
  display: flex;
  justify-content: center;
}

.forget-password h4 {
  margin: 0;
}

.forget-password h4 a {
  margin-top: 20px;
  color: var(--haifin-gray-Color);
  font-size: 12px;
  font-family: "GeneralSansMedium";
  font-weight: 500;
  line-height: normal;
  text-align: center;
  display: block;
  text-decoration: none;
}

.forget-password h4 a:hover {
  color: var(--haifin-gray-Color);
}

.copy-right {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0px;
  width: 80%;
  border-top: 1px solid rgba(255, 255, 255, 0.23);
  margin: 0 auto;
  padding-top: 10px;
  display: flex;
  justify-content: center;
}

.copy-right span {
  color: #fff;
  font-family: "GeneralSansMedium";
  font-size: 12px;
  line-height: normal;
  text-align: center;
}

.side-menu-container .copy-right {
  width: 90%;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.side-menu-container .copy-right span {
  color: rgba(255, 255, 255, 0.25);
  font-size: 10px;
}

.btn-login {
  height: 38px;
  background: var(--haifin-Primary-Gradient);
  border: 0 !important;
  color: white !important;
  border-radius: 4px !important;
}

.login .lng {
  position: relative;
  /* left: -28px; */
  bottom: 0 !important;
  top: 15px !important;
}

.login .lng li.actv {
  padding: 2px 8px !important;
  background: var(--Theme-Secondary-Color) !important;
}

.form-actions a:hover {
  color: white !important;
  text-decoration: none;
}

.poweredBy {
  display: flex;
  justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.poweredBy img {
    border-left: 1px solid #d9d9d9;
    margin-left: 15px;
    padding-left: 15px;
      height: 21px;
}

.poweredBy span {
    color: var(--haifin-gray-Color);
    font-size: 12px;
    font-family: "GeneralSansMedium";
    font-weight: 500;
    line-height: normal;
}

/* Lockscreen */

@media (min-width: 992px) {
  .lock-body-icon {
    font-size: 30px;
    color: #fff;
    text-align: center;
    position: absolute;
    border-radius: 30px;
    padding: 20px 18px;
    background: var(--Theme-Primary-Color);
    left: -27px;
    transform: scale(1.5);
    right: initial !important;
    top: initial !important;
    /* top: -20px; */
  }
}

.lock-form .form-group {
  margin-bottom: 30px !important;
}

@media (min-width: 992px) {
  .lock-form {
    padding-left: 0px !important;
    margin-top: 15px;
    width: 100%;
  }
}

.lock-body {
  overflow: visible !important;
}

.heading-box {
  font-size: 16px;
  font-family: "GeneralSansBold";
  font-weight: 700;
  /* text-transform: uppercase; */
  display: inline-block;
  width: 60%;
  padding: 12px 15px 0 0px;
}

.captionn {
  font-size: 16px;
  font-family: "GeneralSansBold";
  font-weight: 700;
  /* text-transform: uppercase; */
  display: inline-block;
  width: 60%;
  padding: 10px 0;
}

.sideSearchBar {
  z-index: 5;
  position: absolute;
  top: 0px;
  background-color: white;
  width: 25%;
  bottom: 0px;
  transition: -webkit-transform 0.3s ease-out 0s;
  will-change: transform;
  transform: scaleX(0);
  transform-origin: right;
  overflow-y: auto;
  padding: 0px 16px 3px 4px !important;
  border-top: 1px solid #cccccca8;
}

.customs-toolbar {
  /* position: absolute; */
  right: 38px;
  top: -37px;
}

ul.toptoolbar {
  list-style: none;
  padding-left: 0;
  display: flex;
}

ul.toptoolbar li {
  display: inline-block;
  margin-left: 5px;
}

.toptoolbar a i {
  background: var(--Theme-Primary-Color);
  padding: 8px 8px !important;
  border-radius: 5px;
  color: white;
}

.actionBar {
  /* color: var(--Theme-Primary-Color); */
  padding: 0 30px;
  /* height: 40px;  */
}

.page-sidebar-closed .actionBar {
  background: transparent;
  color: var(--Theme-Primary-Color);
  padding: 0 0 0 25px;
}

.toptoolbar li [class*=" fa-"] {
  width: 2.2em !important;
}

.searchSliderBtns {
  margin-top: 10px;
}

.y-scroll {
  margin-bottom: 0px;
  overflow-y: scroll;
  height: calc(100vh - 56px);
  /* min-height: 600px; */
}

.actionBar .page-title {
  color: var(--haifin-Primary-Color) !important;
  font-size: 14px;
  font-family: "GeneralSansMedium";
  font-weight: 500;
  line-height: normal;
  margin: 0;
  display: flex;
  align-items: center;
}

.actionBar .page-title svg {
  margin-right: 6px;
}

#global-page-title {
  color: var(--haifin-gray-Color);
  font-size: 14px;
  font-family: "GeneralSansMedium";
  font-weight: 500;
  line-height: normal;
}

.hrstyle {
  margin: 5px 0px 10px 0;
}

.pleft {
  padding-left: 15px;
}

.avanza-bg {
  background-color: var(--Theme-Primary-Color) !important;
  border: 1px solid var(--Theme-Primary-Color) !important;
  color: #fff !important;
}

.avanzacolor {
  color: var(--Theme-Primary-Color) !important;
}

.incoming-field-label {
  background-color: var(--Theme-Secondary-Color);
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  border: 1px solid #e5e5e5;
  margin: 0 15px 15px 15px;
  padding: 10;
}

/* /-------Revamp CSS-----------/ */

.form-group {
  margin-bottom: 5px;
}

hr {
  margin: 5px 0 20;
}

.headingM {
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
  font-size: 12px;
}

/* scroll sytle */

.scroll-style::-webkit-scrollbar,
.sc-EHOje::-webkit-scrollbar {
  width: 5px !important;
}

/* Track */

.scroll-style::-webkit-scrollbar-track,
.sc-EHOje::-webkit-scrollbar-track {
  background: #d0cccc38 !important;
  border: 1px solid #dedede !important;
}

/* Handle */

.scroll-style::-webkit-scrollbar-thumb,
.sc-EHOje::-webkit-scrollbar-thumb {
  background: #c5c5c5 !important;
  border-radius: 50px !important;
}

/* scroll sytle end */

/* SIDE BAR CSS */

.menu-toggler.sidebar-toggler .fa-bars,
.menu-toggler.sidebar-toggler .expandImg {
  position: relative;
  top: 15px;
  left: 0px;
}

.menu-toggler.sidebar-toggler .arrow svg,
.menu-toggler.sidebar-toggler .expandImg.arrow {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}

.page-sidebar-closed .menu-toggler.sidebar-toggler {
  background: transparent;
  box-shadow: none;
}

.page-sidebar-closed .menu-toggler.sidebar-toggler:hover {
  background: transparent;
  box-shadow: none;
}

.page-sidebar-closed .menu-toggler.sidebar-toggler {
  right: 0;
  width: 100% !important;
}

/* .page-sidebar .page-sidebar-menu .sub-menu > li > a {
  background: #212121 !important;
  color: #adadad !important;
  border-left: 3px solid #212121;
  font-weight: 400 !important;
} */

.page-sidebar .page-sidebar-menu .sub-menu>li:hover>a {
  color: white;
  background: transparent !important;
}

.page-sidebar .page-sidebar-menu .sub-menu li>a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu li>a {
  padding: 10px 15px;
}

@media (min-width: 992px) {

  .page-sidebar .page-sidebar-menu>li>a,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li>a {
    display: inline-flex;
    position: relative;
    margin: 0;
    border: 0;
    padding: 12px 7px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 300;
    text-align: left !important;
    min-height: unset;
    /* border-bottom: 1px solid #444; */
    width: 100%;
  }
}

@media (min-width: 992px) {
  .page-sidebar .page-sidebar-menu>li>a>.title {
    margin: 0px 10px !important;
    color: #BCC5C9;
    font-size: 14px;
    font-family: "GeneralSansMedium";
    font-weight: 500;
    line-height: normal;
  }
}

.page-sidebar .page-sidebar-menu>li>a>[class^="icon-"],
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li>a>[class^="icon-"] {
  top: 2px;
  margin-left: 1px;
  margin-right: 4px;
}

.page-sidebar .page-sidebar-menu>li>a>i {
  color: #fff !important;
  position: relative !important;
  top: 2px;
  font-size: 13px;
}

@media (min-width: 992px) {
  .page-sidebar-menu.page-sidebar-menu-hover-submenu li.active .sub-menu {
    display: block !important;
  }

  .page-sidebar-menu.page-sidebar-menu-hover-submenu li .sub-menu {
    position: relative;
  }

  .page-sidebar-closed .page-sidebar .sidebar-menu-closed>li>a>.title {
    margin: 0px 10px !important;
    font-size: 13px;
    text-align: left;
    /* display: none; */
  }

  .page-sidebar-closed .page-sidebar .sidebar-menu-closed>li>a {
    min-height: 54px;
  }

  .page-sidebar-closed .page-sidebar .sidebar-menu-closed {
    width: 54px !important;
  }
}

.page-sidebar .page-sidebar-menu .sub-menu>li>a {
  background: transparent;
  color: #BCC5C9 !important;
  font-size: 14px;
  font-family: "GeneralSansMedium";
  font-weight: 500;
  line-height: normal;
  padding: 0 0 15px;
}

.page-sidebar .page-sidebar-menu .sub-menu li:last-child a {
  padding: 0;
}

/* .page-sidebar .page-sidebar-menu .sub-menu > li:hover > a {
  background: var(--Theme-Primary-Color) !important;
  color: white !important;
  border-left: 3px solid var(--Theme-Secondary-Color);
  font-weight: 500 !important;
} */

.chevron-right {
  background: url("/assets/layouts/layout2/img/chevron-right.png") no-repeat;
  height: 18px;
  width: 10px;
  transform: rotate(0deg) scale(0.6);
  display: block;
  transition: ease-out 0.3s;
}

.chevron-down {
  background: url("/assets/layouts/layout2/img/chevron-right.png") no-repeat;
  height: 18px;
  width: 10px;
  transform: rotate(90deg) scale(0.6);
  display: block;
  transition: ease-out 0.3s;
}

.page-sidebar-closed .page-sidebar-menu .chevron-right {
  display: none;
}

.page-sidebar-closed .page-sidebar-menu .chevron-down {
  display: none;
}

li.sidemenufirstli {
  color: white;
  height: 41px;
  /* border-bottom: 1px solid #40423e !important; */
}

li.sidemenufirstli h3 {
  margin-top: 0px;
  position: relative;
  left: 8px;
  top: 4px;
  font-size: 20;
}

.page-sidebar .page-sidebar-menu .sub-menu {
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 15px;
}

.a-white:hover,
.a-white {
  color: white !important;
}

#someHeight {
  display: block;
  transition: all 0.2s ease-in;
  animation-delay: 100ms;
  transform-origin: top;
  /* overflow-y: scroll; */
  transform: scaleY(0);
  /* height: 0px; */
  /* max-height: 160px; */
  margin: 12px 0 !important;
  color: #c6d1e2;
  padding-left: 30px;
  list-style: disc;
}

/* #someHeight {
  display: block;
  transition: all 0.2s ease-in;
  animation-delay: 100ms;
  transform-origin: top;
  transform: scaleY(0);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  padding: 10px; 
} */

/* Sidebar Menu Streched */

@media (min-width: 992px) {
  .page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed>li:hover {
    width: 285px !important;
    position: relative !important;
    z-index: 0;
    display: block !important;
  }

  .page-sidebar .page-sidebar-menu {
    width: auto !important;
    margin: 50px 10px 0;
  }

  .side-menu-container::-webkit-scrollbar {
    width: 12px;
    background: #f1f1f1;
  }

  .side-menu-container ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: red;
  }

  .side-menu-container ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  }

  .page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed>li:hover>.sub-menu {
    width: 231px !important;
    position: absolute;
    z-index: 2000;
    left: 54px;
    margin-top: 0;
    top: 78%;
    display: block !important;
    background: var(--haifin-Primary-Color);
    border-radius: 0;
    padding: 6px 0 0 0;
    list-style: none !important;
  }

  .page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed>li:hover>a>.title {
    display: inline !important;
    padding-left: 10px;
    font-family: "GeneralSansBold";
    font-weight: 700;
    font-size: 13px;
    padding-top: 5px;
  }
}

/* .page-contents {
	overflow-y: scroll;
    height: 80vh !important;
    min-height: 700px !important;
} */

.sideSearchBar.qrsidebar.qrapplied {
  z-index: 5;
  position: absolute;
  top: 0px;
  background-color: white;
  width: 25% !important;
  bottom: 0px;
  transition: -webkit-transform 0.3s ease-out 0s;
  will-change: transform;
  overflow-y: auto;
  padding: 0px 16px 3px 4px !important;
}

.modal-footer {
  padding: 10px !important;
}

.modal-content .modal-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  padding-left: 5px;
}

.modal-content .modal-header {
  padding: 10px 8 !important;
}

.mpopup {
  overflow-y: auto;
  max-height: 550px;
}

/* .mpopup::-webkit-scrollbar{
    width: 5px !important;
}

.mpopup::-webkit-scrollbar-track {
    background: transparent;
    border: 1px solid #dedede;
  }
  

.mpopup::-webkit-scrollbar-thumb {
    background: #c5c5c5;
    border-radius: 50px!important;
  } */

.scroll-style::-webkit-scrollbar {
  width: 5px !important;
}

/* Track */

.scroll-style::-webkit-scrollbar-track {
  background: #d0cccc38 !important;
  border: 1px solid #dedede !important;
}

/* Handle */

.scroll-style::-webkit-scrollbar-thumb {
  background: #c5c5c5 !important;
  border-radius: 50px !important;
}

.page-sidebar-menu-hover-submenu li:hover>.sub-menu {
  background: #2a2b28 !important;
}

.page-sidebar-menu .sub-menu::-webkit-scrollbar,
.modal-body::-webkit-scrollbar {
  width: 5px;
}

/* Track */

.page-sidebar-menu .sub-menu::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track {
  background: #d0c6c6;
  border: 1px solid dimgrey;
}

/* Handle */

.page-sidebar-menu .sub-menu::-webkit-scrollbar-thumb,
.modal-body::-webkit-thumb {
  background: #888;
  border-radius: 50px !important;
}

.lastLoginBox {
  text-align: left;
  margin-left: 13px;
  color: darkgrey;
  font-size: 12px;
}

.side-menu-container {
  height: 100%;
  /* display: flex;
  flex-direction: column;
  justify-content: space-between; */
}

.top-menu {
  margin-inline-start: auto !important;
  /*Breadcumb removal*/
}

.page-header.navbar .top-menu .navbar-nav>li.dropdown {
  height: 45px !important;
}

.page-header.navbar .top-menu .navbar-nav>li a:hover,
.page-header.navbar .top-menu .navbar-nav>li:hover {
  background-color: transparent;
}

.page-sidebar-menu-closed li.sidemenufirstli h3 {
  display: none;
}

.page-sidebar-closed .menu-toggler.sidebar-toggler {
  right: 0;
  width: 100% !important;
}

.page-sidebar-closed .menu-toggler.sidebar-toggler .thumbIcon,
.page-sidebar-closed .menu-toggler.sidebar-toggler .expandImg,
.page-sidebar-closed .side-menu-container .copy-right {
  display: none;
}

.page-sidebar-closed .expandImg.right {
  display: block !important;
}

.expandImg.right {
  display: none;
}

.page-sidebar-closed .fa.fa-angle-right.expandImg.right {
  display: block !important;
  cursor: pointer;
}

.fa.fa-angle-right.expandImg.right {
  display: none;
}

.page-sidebar-closed .menu-toggler.sidebar-toggler .expandImg {
  top: 0;
  position: relative;
  left: 0;
}

.page-sidebar-closed .page-sidebar .page-sidebar-menu>li>a>i {
  top: 7px;
  left: 9px;
}

.page-header.navbar .top-menu .navbar-nav>li.dropdown>.dropdown-toggle {
  margin: 0 !important;
  padding: 15px 11px 16px !important;
}

.page-header.navbar .top-menu .navbar-nav>li.dropdown-user .dropdown-toggle {
  padding: 12px 12px !important;
  background: transparent !important;
}

.page-header.navbar .top-menu .navbar-nav>li.dropdown-user .dropdown-toggle>.username {
  color: var(--haifin-Primary-Color);
}

.page-sidebar-closed .lastLoginBox {
  display: none;
}

.fa-angle-right {
  color: #fff !important;
}

.menu-toggler.sidebar-toggler:hover .expandImg {
  color: #fff;
}

.validstar {
  color: red;
}

/* Tabs */
.ui-regulartabs .nav-tabs>li {
  cursor: pointer;
  margin-right: 15px;
}

.ui-regulartabs .nav-tabs>li:last-child {
  margin-right: 0;
}

.ui-regulartabs ul.nav.nav-tabs {
  border: 0;
}

.ui-regulartabs .nav-tabs li>a {
  color: var(--haifin-gray-Color);
  font-size: 14px;
  font-family: "GeneralSansSemiBold";
  line-height: normal;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 2px solid #adadad;
  margin: 0;
  border-radius: 0;
}

.ui-regulartabs .nav-tabs li.active>a {
  /* background: var(--haifin-Primary-Gradient);
  color: #fff; */
  background: var(--haifin-Primary-Gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 14px;
  line-height: normal;
  border: 0;
  border-bottom: 2px solid #b12548;
  border-radius: 0;
}

/* .ui-regulartabs .nav-tabs li:first-child > a {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.ui-regulartabs .nav-tabs li:last-child > a {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
} */

.ui-regulartabs .nav-tabs li>a:hover {
  color: var(--haifin-gray-Color) !important;
  background: transparent;
}

.ui-regulartabs .nav-tabs li.active>a:hover {
  background: var(--haifin-Primary-Gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ui-regulartabs .panel {
  -webkit-border-radius: 0px;
  border-radius: 0px;
  margin-bottom: 0px;
}

.ui-regulartabs .ui-tabborder {
  border: 1px solid #dddddd;
  margin-top: -2px;
}

.ui-regulartabs .nav li a i {
  width: 15px;
  font-family: "GeneralSans";
  font-weight: 400;
  font-size: 17px;
  position: relative;
  top: 2px;
}

.tabbable-line>.tab-content {
  padding: 15px 0px !important;
}

.b-radius {
  border-radius: 50% !important;
}

.b-radius-5 {
  border-radius: 5px !important;
}

.b-radius-10 {
  border-radius: 4px !important;
}

.searchtitle h3 {
  color: var(--Theme-Secondary-Color) !important;
}

.input-icon.right .icon-magnifier {
  margin: 9px 2px 7px 10px;
}

.mt-checkbox {
  /* margin-bottom: 21px !important; */
}

.mt-checkbox.mt-checkbox-outline {
  /* margin-bottom: 0 !important; */
}

/* .col-md-4.p-0 .form-control {
    -webkit-border-radius: 2px !important;
    -moz-border-radius: 2px !important;
    border-radius: 2px !important;
    padding: 4px 12px 6px;
    height: 34px !important;

} */

label.mt-radiobutton.mt-radiobutton-single.mt-radiobutton-outline {
  margin-bottom: 21px !important;
}

.mt-radiobutton {
  margin-bottom: 21px !important;
}

.mt-radiobutton.mt-radiobutton-outline {
  margin-bottom: 0 !important;
}

/* .col-md-4.p-0 .form-control {
    -webkit-border-radius: 2px !important;
    -moz-border-radius: 2px !important;
    border-radius: 2px !important;
    padding: 4px 12px 6px;
    height: 34px !important;

} */

label.mt-radiobutton.mt-radiobutton-single.mt-radiobutton-outline {
  margin-bottom: 21px !important;
}

.px-0 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

#apilist .col-md-2 {
  width: 11.1%;
}

#apilist .col-md-10 {
  width: 88.9%;
}

.alert-warning {
  color: #8a6d3b !important;
  background-color: #fcf8e3 !important;
  border-color: #faebcc !important;
}

.alert-warning b {
  color: #333 !important;
}

.toptoolbar li [class*=" fa-share"],
.toptoolbar li [class*=" fa-angle-down"],
.toptoolbar li [class*=" fa-refresh"] {
  padding: 6px 8px !important;
}

.btn.avanza-bg.b-radius-5:hover {
  color: #fff !important;
}

.fa-download {
  color: var(--Theme-Secondary-Color) !important;
}

.mandatory-style {
  color: red !important;
}

.sp-class {
  color: grey;
}

.container-styyle {
  padding: 20px !important;
  border: 1px solid var(--Theme-Secondary-Color) !important;
  margin-bottom: 20px !important;
}

.avatar-div-style {
  padding: 30px 0;
}

.avatar-div-style1 {
  padding-left: 30px;
  padding-right: 30px;
}

.f-12 {
  font-size: 12px !important;
}

.f-13 {
    font-size: 13px !important;
}

.f-14 {
    font-size: 14px !important;
}

.f-16 {
    font-size: 16px !important;
}

.f-18 {
    font-size: 18px !important;
}


.sidebar-title-border {
  padding: 0px 12px;
  margin: 1px;
  border-bottom: 1px solid #dedede;
}

.sidebar-title {
  margin: 1px 0 9px;
  font-size: 16px;
  text-transform: uppercase;
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
}

.border-right {
  border-right: 1px solid #e5e5e5;
}

.ua-padding {
  padding-left: 22px;
  padding-right: 22px;
}

.custom-control.custom-checkbox.scroll {
  height: 200px;
  overflow-y: scroll;
}

.custom-control.custom-checkbox.scroll::-webkit-scrollbar {
  width: 5px !important;
}

/* Track */

.custom-control.custom-checkbox.scroll::-webkit-scrollbar-track {
  background: #fff !important;
  border: 1px solid #fff !important;
}

/* Handle */

.custom-control.custom-checkbox.scroll::-webkit-scrollbar-thumb {
  background: #666 !important;
  border-radius: 50px !important;
}

.hyperledgerbox {
  border: 2px solid #e6e6e6;
  padding: 10px;
  border-radius: 4px !important;
}

.entity-1 {
  width: 50%;
  height: 90px;
  float: left;
  background-image: url(/assets/imgs/circle-hyper.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.entity-2 {
  width: 50%;
  height: 90px;
  float: left;
  background-image: url("/assets/imgs/circle-ethereum.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* -webkit-clip-path: ellipse(90% 70% at 0% 50%);
    clip-path: ellipse(90% 70% at 0% 50%);
    -webkit-shape-outside: ellipse(90% 70% at 0% 50%);
    shape-outside: ellipse(90% 70% at 0% 50%);
    -webkit-shape-margin: 2em;
    shape-margin: 2em; */
}

.entity-3 {
  width: 50%;
  height: 90px;
  float: left;
  background-image: url("/assets/imgs/circle-quorom.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* -webkit-clip-path: ellipse(90% 70% at 0% 50%);
    clip-path: ellipse(90% 70% at 0% 50%);
    -webkit-shape-outside: ellipse(90% 70% at 0% 50%);
    shape-outside: ellipse(90% 70% at 0% 50%);
    -webkit-shape-margin: 2em;
    shape-margin: 2em; */
}

.b-shadow {
  box-shadow: 0px 0px 3.37px 0.63px rgb(0 0 0 / 26%) !important;
  transition: 0.3s all;
}

.bx-margin {
  margin: 0 8px;
}

.st-sp {
  display: flex;
  justify-content: center;
}

.ht {
  height: 90px;
  min-height: 90px;
}

.st-ss {
  display: flex;
  /* justify-content: center; */
  align-self: center;
}

.core-heading {
  position: relative;
}

.core-heading span {
  position: absolute;
  font-size: 1.7rem;
  font-weight: 900;
  top: 35;
  /* text-transform: uppercase; */
}

.bg-gr-cipher {
  background: rgb(242, 110, 78);
}

.img-thumbnail {
  overflow: hidden;
}

.entityname {
  margin: 18px 0;
}

span.trnsID {
  font-style: italic;
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
  font-size: 16px;
}

.dash-box-style {
  box-shadow: 0px 0px 7.68px 0.32px rgb(0 0 0 / 23%);
  padding: 12px 10px 11px;
  position: relative;
  margin-top: 22px;
  min-height: 110px;
}

.dash-icon-style {
  border-radius: 6px;
  background-image: -moz-radial-gradient(50% 50%,
      circle closest-side,
      rgb(248, 69, 53) 0%,
      rgb(224, 8, 0) 100%);
  background-image: -webkit-radial-gradient(50% 50%,
      circle closest-side,
      rgb(248, 69, 53) 0%,
      rgb(224, 8, 0) 100%);
  background-image: -ms-radial-gradient(50% 50%,
      circle closest-side,
      rgb(248, 69, 53) 0%,
      rgb(224, 8, 0) 100%);
  box-shadow: 4px 6px 8px 0px rgba(0, 0, 0, 0.19);
  color: white;
  width: 110px;
  min-width: 110px;
  font-size: 5rem;
  padding: 25px 10px;
  top: -35px;
  position: absolute;
  transition: 0.2s all;
}

.dash-box-style i {
  font-size: 5rem;
  transition: 0.2s all;
}

.dash-box-style:hover i {
  font-size: 6rem;
  transition: 0.2s all;
}

.flip-content tr th:first-child {
  border-left: 1px solid #444 !important;
}

#att .flip-content tr th:last-child {
  border-right: 1px #444 !important;
}

.sdg_tbl {
  border-radius: 4px;
  border: 0 !important;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.06);
  margin-top: 0 !important;
  background: #fff;
  /* table-layout: fixed; */
  /* overflow: hidden; */
}

.sdg_tbl thead {
  border: 0 !important;
}

.sdg_tbl.table-bordered>thead>tr>th {
  border: 0 !important;
}

.sdg_tbl thead tr th:first-child {
  border-top-left-radius: 4px;
  border: 0 !important;
}

.sdg_tbl thead tr th:last-child {
  border-top-right-radius: 4px;
  border: 0 !important;
}

/* .flip-content tr th:first-child {
  border-left: 1px solid var(--Theme-Secondary-Color) !important;
} */

/* .flip-content tr th:last-child {
  border-right: 1px var(--Theme-Secondary-Color) !important;
} */
.processedListing .sdg_tbl tbody tr td .dropdown-menu.pull-right,
.pendingListing .sdg_tbl tbody tr td .dropdown-menu.pull-right {
  right: -10px;
  min-width: 125px;
}

.processedListing .sdg_tbl tbody tr td .dropdown-menu.pull-right li a,
.pendingListing .sdg_tbl tbody tr td .dropdown-menu.pull-right li a {
  padding: 0 0 8px;
  margin: 0px 0 8px;
}

.processedListing .sdg_tbl thead tr th:first-child,
.pendingListing .sdg_tbl thead tr th:first-child,
.pendingListing .sdg_tbl tbody tr td:first-child {
  text-align: center;
}

.timelinetable .sdg_tbl tbody tr td:nth-child(6) {
  width: 200px;
}

.processedListing .sdg_tbl tbody tr td:first-child span {
  justify-content: center;
}

.processedListing .sdg_tbl tbody tr td.loaderTD,
.pendingListing .sdg_tbl tbody tr td.loaderTD {
  height: 404.15px;
}

/* .processedListing .sdg_tbl tbody td:nth-child(7),
.pendingListing .sdg_tbl tbody td:nth-child(7) {
  text-align: right;
  width: 116px;
} */
.detailModalWrp .sdg_tbl tbody td:nth-child(2) {
  width: 120px;
}

.detailModalWrp .sdg_tbl tbody td:nth-child(6),
.detailModalWrp .sdg_tbl tbody td:nth-child(5),
.detailModalWrp .sdg_tbl tbody td:last-child {
  width: 150px;
}

/*
.processedListing .sdg_tbl tbody td:nth-child(3),
.processedListing .sdg_tbl tbody td:nth-child(4),
.pendingListing .sdg_tbl tbody td:nth-child(3),
.pendingListing .sdg_tbl tbody td:nth-child(4) {
  width: 120px;
}
*/
.processedListing .sdg_tbl tbody td:nth-child(5) {
  width: 163px;
}

.processedListing .sdg_tbl tbody td:nth-child(6) {
  width: 157px;
}

.processedListing .sdg_tbl tbody td {
  text-align: center;
}

.pendingListing .sdg_tbl tbody td:nth-child(5) {
  width: 170px;
}

.pendingListing .sdg_tbl tbody td:nth-child(6) {
  width: 160px;
}



.sdg_tbl tbody td {
  padding: 5px !important;
  /* padding: 10px !important; */
  color: var(--haifin-Primary-Color);
  font-size: 75%;
  /* font-size: 12px; */
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
  border: 0 !important;
  border-bottom: 1px solid #eff0f2 !important;
  text-align: center;
}

.sdg_tbl tbody td b {
  color: var(--haifin-Primary-Color);
  font-family: "GeneralSansMedium";
  font-weight: 500;
}

.h-16 {
  font-size: 16px;
}

#widgetbutton .toptoolbar a i {
  background: var(--Theme-Secondary-Color);
  padding: 7px 4px 7px 8px !important;
  border-radius: 5px;
  color: white;
}

#widgetbutton {
  position: absolute;
  right: 38px;
  top: -38px;
}

.border-cipher {
  border: 1px solid var(--Theme-Secondary-Color);
}

.page-footer {
  background-color: #333;
}

.rct-node-icon {
  color: #f26e4c;
}

.table-bordered>thead>tr>th {
  border-top: 1px solid var(--Theme-Secondary-Color) !important;
}

#att .table-bordered>thead>tr>th {
  border-top: 1px solid #333 !important;
}

.menu-toggler.sidebar-toggler .fa-arrow-left {
  background: #eee;
  position: absolute;
  right: -240px;
  width: 35px !important;
  z-index: 9;
  top: 0px;
  font-size: 17px;
  height: 35px;
  bottom: 0px;
  padding: 10px;
  /* cursor: pointer; */
  border-radius: 5px !important;
  box-shadow: 1px 1px 2px #8080809e;
}

.page-sidebar-closed .menu-toggler.sidebar-toggler .fa-arrow-left {
  background: #eee;
  position: absolute;
  right: -45px;
  width: 35px !important;
  z-index: 9;
  top: 0px;
  font-size: 17px;
  height: 35px;
  bottom: 0px;
  padding: 10px;
  /* cursor: pointer; */
  border-radius: 5px !important;
  box-shadow: 1px 1px 2px #8080809e;
}

.menu-toggler.sidebar-toggler .arrow {
  width: 24px !important;
  height: 24px;
  background: #fff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.18);
  border-radius: 100% !important;
  position: absolute;
  right: -13px;
  top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  left: auto;
}

#blockchain .portlet.light.sdg_portlet,
.dashdate .modal-content {
  border-top: none !important;
}

#blockchain .portlet.light {
  /* padding: 12px 20px 15px; */
  padding: 0;
  background-color: #fff;
}

#blockchain .portlet-title {
  /* padding: 12px 20px 15px; */
  background-color: #f5f5f5;
  padding: 5px 10px;
}

#blockchain .portlet-title .caption {
  padding-left: 10px;
}

.refresh-img-div .refresh-img-full:hover {
  background-color: #fff;
}

.refresh-img-div button:hover {
  background-color: #fff !important;
}

div.refresh-img-div+div {
  padding: 10px 12px;
}

.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: 2px;
  left: -100px;
  /* transform: translate(-100px,190px);
    transform-origin: top; */
}

#changepassword .input-icon>i {
  color: var(--Theme-Secondary-Color);
  position: absolute;
  margin: 6px 2px 7px 10px;
  z-index: 3;
  width: 16px;
  font-size: 16px;
  text-align: center;
  left: 0;
}

/* Modal style */

.close {
  opacity: 0.5;
  margin-right: 6px;
}

.modal .modal-header .close {
  margin-top: 0 !important;
  position: relative;
  top: 7px;
}

/* PROGRESS BAR CSS */

.invoiceprogress {
  margin: 30px 0;
}

.invoiceprogress .progress {
  margin-top: 2px;
  border: 1px solid rgb(211, 211, 211);
  border-radius: 9px !important;
  padding: 3px;
  height: 20px;
}

.invoiceprogress .progress-bar {
  padding: 5px;
  border-radius: 6px !important;
  background-color: var(--Theme-Secondary-Color);
}

.barpercentage {
  position: absolute;
  top: 2px;
  right: -20px;
  font-family: "GeneralSansBold";
  font-weight: 700;
}

.notify {
  padding: 10px 15px 5px;
  font-size: 16px;
  border-radius: 4px !important;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.themesetting input.palatecolor {
  position: absolute;
  top: 0.5px;
  float: left;
  right: 15px;
  border: 0px;
  margin: 1;
}

/* =============================================================================== */

/* Mobile Side Bar */

#sidebar-mobile a,
#sidebar-mobile a:hover,
#sidebar-mobile a:focus {
  text-decoration: none;
  transition: all 0.3s;
}

.sidebar-mobile-navbar-btn {
  box-shadow: none;
  background: transparent;
  outline: none !important;
  border: none;
  position: fixed;
  height: 35px;
  width: 50px;
  top: 5px;
  left: 5px;
  z-index: 10002;
  display: none;
}

.sidebar-mobile-navbar-btn i {
  color: #9a9a9a;
  font-size: 24px;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

#sidebar-mobile {
  max-width: 300px;
  min-width: 300px;
  height: 100vh;
  background: #333;
  color: #fff;
  transition: all 0.3s;
  position: fixed;
  margin-left: -300px;
  z-index: 10000;
  top: 0px;
}

#sidebar-mobile .sidebar-mobile-container {
  margin-top: 50px;
}

#sidebar-mobile .sidebar-mobile-container p {
  margin-top: auto;
  margin-bottom: 0px;
  padding: 10px;
  color: #727272;
  font-size: 12px;
}

#sidebar-mobile a,
#sidebar-mobile a:hover,
#sidebar-mobile a:focus {
  color: inherit;
}

#sidebar-mobile.active {
  margin-left: 0px;
}

#sidebar-mobile ul.components {
  border-bottom: 0.1px solid #ccc;
}

#sidebar-mobile ul p {
  color: #fff;
}

#sidebar-mobile ul li a {
  padding: 5px 10px;
  font-size: 1.5rem;
  display: block;
  text-decoration: none;
}

#sidebar-mobile ul li a i {
  margin-right: 10px;
}

#sidebar-mobile ul li a:hover {
  color: #fff !important;
  background: var(--Theme-Secondary-Color);
}

#sidebar-mobile ul li.active>a,
a[aria-expanded="true"] {
  color: #fff !important;
  background: var(--Theme-Secondary-Color);
}

#sidebar-mobile a[data-toggle="collapse"] {
  position: relative;
}

#sidebar-mobile a[aria-expanded="false"]::before,
#sidebar-mobile a[aria-expanded="true"]::before {
  content: "\e080";
  display: block;
  position: absolute;
  right: 20px;
  font-family: "Glyphicons Halflings";
  font-size: 0.6em;
  top: 18px;
  color: #7d7d7d;
}

#sidebar-mobile a[aria-expanded="true"]::before {
  content: "\e114";
}

#sidebar-mobile ul a {
  font-size: 1.1em !important;
}

#sidebar-mobile ul ul a {
  font-size: 0.9em !important;
  color: #ccc;
  border-bottom: 0.5px solid rgb(71 71 71);
  padding-left: 30px !important;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 992px) {
  .Mobdate {
    display: none;
  }

  #sidebar-mobile {
    margin-left: -300px;
  }

  #sidebar-mobile.active {
    margin-left: 0px;
  }

  .sidebar-mobile-navbar-btn {
    display: block;
  }

  .page-header.navbar .page-logo {
    display: none;
  }
}

@media (max-width: 767px) {
  .sideSearchBar {
    width: 65%;
  }

  #sidebarCollapse.active {
    top: 5px;
  }

  .page-header.navbar .page-top {
    clear: none !important;
  }
}

/* #sidebarCollapse.active{
    left: 210px;
} */

#sidebar-mobile .collapsing {
  height: 85px;
  overflow-y: scroll;
}

#sidebar-mobile .collapse {
  height: 85px;
  overflow-y: scroll;
}

#sidebar-mobile .collapse .in {
  height: 85px;
  overflow-y: scroll;
}

/* Mobile Side Bar */

/* =============================================================================== */

.fillertool #fromDate input,
.fillertool #toDate input {
  height: 35px;
}

.lock-body {
  text-align: center;
}

@media (max-width: 768px) {
  .lock-body .fa.fa-lock {
    display: none;
  }

  .blockchainexpbox {
    height: 91px;
    border: 1px solid #80808061;
    margin: 15px 15px 0px;
  }

  .statsbox {
    margin: 15px;
  }
}

@media (max-width: 768px) {
  .lock-body .fa.fa-lock {
    display: none;
  }
}

.sidebar-mobile-container ul.list-unstyled.components li:first-child a {
  padding: 12px 10px !important;
}

.sidebar-mobile-container ul.list-unstyled.components {
  margin-bottom: 0px;
}

.dashboadlist .portlet.light>.portlet-title>.caption>.caption-subject {
  font-size: 12px !important;
}

.toptoolbar li [class*=" fa-th-large"] {
  width: 10em !important;
  color: #fff;
  line-height: 1.2;
}

.topbuttonbar ul {
  list-style: none;
  padding-left: 0px;
}

.topbuttonbar ul li {
  display: inline-block;
  margin-right: 5px;
  background-color: var(--Theme-Secondary-Color);
  width: auto;
  border-radius: 4px !important;
  padding: 7px 9px;
}

.topbuttonbar ul li a,
.topbuttonbar ul li a:hover {
  color: white !important;
}

.topbuttonbar {
  position: absolute;
  right: 47px;
  top: -39px;
}

.palette .input-hidden {
  position: absolute;
  /* left: -9999px; */
  opacity: 0;
}

.palette input[type="radio"]:checked+label>img {
  border: 2px solid var(--Theme-Secondary-Color);
  box-shadow: 0 0 5px #4a494966;
  padding: 1px;
}

/* Stuff after this is only to make things more pretty */

.palette input[type="radio"]+label>img {
  border: 1px solid #444;
  /* width: 284px; */
  /* height: 32px; */
  width: 100% !important;
  transition: 500ms all;
}

.palette {
  margin: 10 0;
}

.conditions {
  padding: 12px;
  /* border: 1px solid #bababa; */
  border-radius: 3px !important;
  height: 100px;
  margin-bottom: 10px;
  box-shadow: 0px 0px 3px #808080a6;
}

.xyvaluebox {
  border: 1px solid #cecece;
  border-radius: 5px !important;
  padding: 20px;
  background-color: #f2f2f2;
  margin: 20px 0;
}

.DSpheading {
  margin: 1px 0 9;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--Theme-Secondary-Color);
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
}

.progress {
  margin-top: 2px;
  border: 1px solid rgb(211, 211, 211);
  border-radius: 9px !important;
  padding: 3px;
  height: 20px;
}

.progress-bar {
  padding: 5px;
  border-radius: 6px !important;
  background-color: var(--Theme-Secondary-Color);
}

.barpercentage {
  position: absolute;
  top: 2px;
  right: -20px;
  font-family: "GeneralSansBold";
  font-weight: 700;
}

.disabled {
  pointer-events: none;
  opacity: 0.8;
}

/* Transaction Explorer Styles */
.transaction-explorer-container {
  padding: 1em;
  border: 1px solid #c5c5c5;
}

.border-grey {
  border: 1px solid #c5c5c5;
}

.bolder {
  font-weight: bolder;
}

.badge-document-success {
  background-color: #4caf50;
  font-size: 1em;
  padding: 0.5em 1em;
  width: fit-content;
  color: #fff;
  border-radius: 4px !important;
}

.tx-attr {
  background-color: rgb(43, 43, 43);
  padding: 1em;
  border-radius: 10px !important;
}

.tx-attr .atr-img {
  width: 100%;
  height: 150px;
  background-size: cover;
  border-radius: 10px !important;
}

.owner-ship-container {
  padding: 2em;
  border: 1px solid #c5c5c5;
}

.ownership-tile {
  height: 90px;
  margin-right: 1em;
  display: flex;
  align-items: center;
  border-radius: 5px !important;
}

.ownership-tile .icon-col {
  background-color: var(--Theme-Secondary-Color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  height: 100%;
}

.documnet-badge {
  width: fit-content;
  padding: 0.7em 1em;
  color: #fff;
  background-color: var(--Theme-Secondary-Color);
  margin: 0.1em 0.3em;
  font-size: 0.8em;
  border-radius: 4px !important;
}

.documnet-badge i {
  margin-right: 5px;
}

.custom-select {
  position: relative;
}

.custom-select input {
  height: 40px;
}

.custom-select .search-bar {
  position: relative;
}

.custom-select span {
  top: 6px;
  right: 10px;
  font-size: 1.3em;
  color: #ccc;
  position: absolute;
  cursor: pointer;
}

.custom-select span:hover {
  color: #111;
}

.custom-select .list-container {
  top: 40px;
  max-height: 270px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: scroll;
  z-index: 10000;
  width: 100%;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  list-style: none;
  padding: 0.6em;
}

.custom-select .list-container::-webkit-scrollbar {
  width: 10px;
}

.custom-select .list-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.custom-select .list-container::-webkit-scrollbar-thumb {
  background: #888;
}

.custom-select .list-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.custom-select .property-container {
  min-height: 70px;
  display: flex;
  align-items: center;
  padding: 5px;
}

.custom-select .property-container:hover {
  cursor: pointer;
  background-color: #ccc;
}

.custom-select .property-container .list-image {
  width: 200px;
  height: 100px;
  background-size: cover;
  border-radius: 5px !important;
}

.custom-select .information {
  margin-left: 1em;
}

.custom-select .information .row .control-label {
  padding-top: 0px;
}

.Attrbox {
  border: 1px solid #00b9c4;
  border-radius: 10px !important;
  box-shadow: 0px 0px 4px #0000006e;
  height: 460px;
}

.heaidngsmartcrowd h3 {
  font-size: 18;
  margin: 0;
  font-weight: 800;
  color: #364255;
}

.heaidngsmartcrowd p {
  font-size: 12px;
  margin: 0;
  color: #7b7b7b;
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
}

.heaidngsmartcrowd {
  margin-bottom: 12px;
}

/* Transaction Explorer Styles */

/* overflow is added on table responvie class from bootrap which is affecting our table */
.table-responsive {
  min-height: 20% !important;
  overflow-x: visible !important;
}

.clock {
  display: inline;
  margin: 10px;
}

.App-title {
  font-size: 12px;
  margin-top: 60px;
}

/* Rule Audit */

.box-container {
  margin-bottom: 20px;
  padding: 20px;
  /* box-shadow: rgb(50 50 50 / 20%) 0px 1px 10px 0px; */
  box-shadow: rgb(50 50 50 / 20%) 0px 0px 0px 2px;
}

.hashcode {
  font-size: 14px;
  color: #1b365d;
  font-weight: 400 !important;
  /* font-family: "GeneralSansBold";font-weight: 700; */
}

.rules-set {
  display: flex;
  flex-flow: wrap;
  flex-direction: column;
  flex-wrap: wrap;
  min-height: 57%;
  height: auto;
  overflow: hidden;
  /* overflow-y: scroll; */
}

.rules-set-container {
  height: auto;
  contain: content;
  display: flex;
  /* flex-direction: column; */
  flex-wrap: wrap;
  justify-content: space-between;
}

.rules-set-container .rule-section img {
  display: block;
}

.rules-set-container .rule-section:nth-child(10) img {
  display: block;
  position: absolute;
  transform: translateX(61px);
}

.rule-section {
  display: flex;
  width: 50%;
  justify-content: space-between;
  padding: 10px 0px;
}

.rule-text {
  font-weight: 800;
  font-style: italic;
}

.rule-notification {
  display: flex;
  width: 20%;
  justify-content: flex-start;
  transform: translateX(-35px);
}

.rule-number {
  width: 25px;
  background: #1b365d;
  color: white;
  height: 25px;
  border-radius: 20px !important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 6px;
  padding: 14px;
}

.mis-match-panel-title {
  font-size: 15px;
  font-weight: bold;
  /* font-style: italic; */
}

#invoicesteps::-webkit-scrollbar {
  height: 8px;
}

#invoicesteps::-webkit-scrollbar-track {
  background: #f1f1f1;
}

#invoicesteps::-webkit-scrollbar-thumb {
  background: #888;
}

#invoicesteps::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Breadcrups CSS */

.arrow-steps .step {
  font-size: 10px;
  text-align: center;
  color: #666;
  cursor: default;
  /* margin: 0 3px; */
  /* padding: 8px 10px 8px 30px; */
  box-sizing: border-box;
  padding: 8px 8px;
  /* min-width: 180px; */
  min-width: 100px;
  float: left;
  position: relative;
  background-color: #d9e3f7;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow-steps .step2 {
  font-size: 12px;
  text-align: center;
  color: #222;
  cursor: default;
  /* margin: 0 3px; */
  /* padding: 8px 10px 8px 30px; */
  padding: 8px 8px;
  /* min-width: 180px; */
  min-width: 100px;
  float: left;
  position: relative;
  background-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: background-color 0.2s ease;
}

.arrow-steps .step:after,
.arrow-steps .step:before {
  content: " ";
  position: absolute;
  top: 0;
  /* right: -17px; */
  width: 0;
  height: 0;
  /* border-top: 19px solid transparent; */
  /* border-bottom: 17px solid transparent; */
  /* border-left: 17px solid #d9e3f7;	 */
  z-index: 2;
  transition: border-color 0.2s ease;
}

.arrow-steps .step:last-child::after {
  content: " ";
  position: absolute;
  top: 0;
  /* right: -17px; */
  width: 0;
  height: 0;
  border-top: 19px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 17px solid transparent;
  z-index: 2;
  transition: border-color 0.2s ease;
}

.arrow-steps .step:before {
  right: auto;
  left: 0;
  border-left: 17px solid #fff;
  z-index: 0;
}

.arrow-steps .step:first-child:before {
  border: none;
}

.arrow-steps .step-parent:first-child>.step {
  border-top-left-radius: 20px !important;
  border-bottom-left-radius: 20px !important;
}

.arrow-steps .step-parent:last-child>.step {
  border-top-right-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
}

.arrow-steps .step span {
  position: relative;
}

.nc-status-div-sequence-validation {
  background-color: #e0e0e0;
  line-height: 1.5;
  padding: 0.5em;
}

.arrow-steps .step.done span:before {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease 0.5s;
  -moz-transition: opacity 0.3s ease 0.5s;
  -ms-transition: opacity 0.3s ease 0.5s;
  transition: opacity 0.3s ease 0.5s;
}

.arrow-steps .step.current {
  color: #fff;
  background-color: #ff982b;
}

.arrow-steps .step.current1 {
  color: #fff;
  background-color: #fe8402;
}

.arrow-steps .step.current2 {
  color: #fff;
  background-color: #fdd200;
}

.arrow-steps .step.current3 {
  color: #fff;
  background-color: #f02602;
}

.arrow-steps .step.current:after {
  border-left: 17px solid #fecb85;
}

.arrow-steps .step.current1:after {
  border-left: 17px solid #fe8402;
}

.arrow-steps .step.current2:after {
  /* border-left: 17px solid #fdd200;	 */
  border-left: 17px solid #ff9300;
}

.arrow-steps .step.current3:after {
  border-left: 17px solid #fdd200;
}

.arrow-steps .step.current4:after {
  border-left: 17px solid #f02602;
}

.popup-accordion {
  box-sizing: border-box;
  padding: 8px 8px;
  text-align: left;
  background-color: #f4f3f3;
}

#invoicesteps::-webkit-scrollbar {
  height: 8px;
}

#invoicesteps::-webkit-scrollbar-track {
  background: #f1f1f1;
}

#invoicesteps::-webkit-scrollbar-thumb {
  background: #888;
}

#invoicesteps::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.circl {
  /* border-radius: 50% !important; */
  /* border: 1px solid #000; */
  /* padding: 3px 6px; */
  /* color: red; */
  padding-top: 2px;
  display: flex;
  flex-flow: column;
  align-items: center;
}

.circl:before {
  /* content: "";
	position: absolute;
	top: -10;
	left: 50%;
	height: 15px;
	border: 1px solid #222; */
}

.circl2 {
  border-radius: 50% !important;
  border: 1px solid #000;
  padding: 3px 6px;
  color: red;
}

/* Modal Table */

#invoicetable table {
  width: 100%;
}

#invoicetable table thead {
  background: #1b365d;
  /* background: var(--haifin-Primary-Gradient); */
  color: #fff;
  font-weight: bold;
  font-size: 13px;
  text-align: center;
}

#invoicetable table thead td {
  border-right: 1px solid #e5e5e5;
}

#invoicetable table tbody td {
  border: 1px solid #d5d5d5;
  font-size: 13px;
  text-align: center;
}

#invoicetable .fa-check-circle-o {
  color: #666;
}

#invoicetable .red {
  background-color: red;
  color: white;
}

/* Score Steps Modal */

.clearfix:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
}

.wrapper {
  display: table-cell;
  height: 400px;
  vertical-align: middle;
}

.pull-right {
  float: right;
}

/* Price Check Modal CSS */

/*progressbar*/

#progressbar {
  margin: 10px 0 30;
  overflow: hidden;
  counter-reset: step;
  width: 100%;
  text-align: center;
  padding-left: 0;
}

#progressbar li {
  list-style-type: none;
  color: rgb(51, 51, 51);
  text-transform: uppercase;
  font-size: 12px;
  /* width: 25%; */
  float: left;
  position: relative;
  font-weight: 800;
}

#progressbar li:after {
  content: "";
  width: 100%;
  height: 3px;
  background: #d1e1bd;
  position: absolute;
  left: -50%;
  top: 15px;
  z-index: 0;
}

#progressbar li:first-child:after {
  content: none;
}

#progressbar li.notPassed:before {
  background: #a5a6af;
  color: white;
}

#progressbar li.active:before {
  background: #00ae4f;
  color: white;
}

#progressbar li.warning:before {
  background: #e80202;
  color: white;
}

#progressbar li::before {
  content: counter(step);
  counter-increment: step;
  width: 35px;
  line-height: 32px;
  display: block;
  font-size: 16px;
  color: #fff;
  background: #3528cd;
  border-radius: 3px;
  margin: 0 auto 4px auto;
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
  position: relative;
  z-index: 99;
}

#progressbar.test1 li:nth-child(2):before {
  content: "\f056";
  font: normal normal normal 14px/1 FontAwesome;
  padding: 9px;
}

#progressbar.test1 li:nth-child(3):before {
  content: "\f055";
  font: normal normal normal 14px/1 FontAwesome;
  padding: 9px;
}

#progressbar.test2 li:nth-child(1):before {
  content: "\f056";
  font: normal normal normal 14px/1 FontAwesome;
  padding: 9px;
}

#progressbar.test2 li:nth-child(3):before {
  content: "\f055";
  font: normal normal normal 14px/1 FontAwesome;
  padding: 9px;
}

#progressbar.test3 li:nth-child(1):before {
  content: "\f056";
  font: normal normal normal 14px/1 FontAwesome;
  padding: 9px;
}

#progressbar.test3 li:nth-child(2):before {
  content: "\f055";
  font: normal normal normal 14px/1 FontAwesome;
  padding: 9px;
}

#progressbar li.currentbadge::before {
  content: "current price" !important;
  width: 120px !important;
  line-height: 32px !important;
  display: block !important;
  font-size: 12px !important;
  color: #fff !important;
  background: #1b365d !important;
  border-radius: 20px !important;
  margin: 0 auto 4px auto !important;
  font-weight: normal !important;
  position: relative !important;
  z-index: 99 !important;
}

#progressbar li.currentbadge2::before {
  content: "current price" !important;
  width: 120px !important;
  line-height: 32px !important;
  display: block !important;
  font-size: 12px !important;
  color: #fff !important;
  background: #ff2005 !important;
  border-radius: 20px !important;
  margin: 0 auto 4px auto !important;
  font-weight: normal !important;
  position: relative !important;
  z-index: 99 !important;
}

.sidedetailspenal {
  padding: 15px;
  border: 1px solid #80808040;
  border-radius: 5px !important;
  box-shadow: 0px 0px 7px #80808082;
}

.sidedetailspenal-heading hr {
  margin-top: 0px;
  margin-bottom: 10px;
}

.sidedetailspenal-heading h3 {
  margin-top: 0;
}

.sidedetailspenal-heading .badge {
  padding: 7px !important;
  height: 25px;
  box-shadow: 0px 1px 5px grey;
}

.noti-col-div-invoice {
  display: flex;
}

.left-toggle-button-ntofi {
  display: flex;
  width: 50px;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
  /* background: #1B365D; */
  height: 26px;
  border-radius: 5px 0px 0px 5px !important;
  color: black;
  border: 1px solid #a0a0a070;
}

.ntofi-count {
  display: flex;
  width: 180px;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
  background: white;
  height: 26px;
  color: grey;
  /* border: 1px solid #a0a0a070; */
  border-left: 0px;
  border-right: 0px;
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
}

.right-toggle-button-ntofi {
  display: flex;
  width: 50px;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
  /* background:#1B365D; */
  height: 26px;
  border-radius: 0px 5px 5px 0px !important;
  color: black;
  border: 1px solid #a0a0a070;
}

.pricerange #progressbar li:after {
  content: "";
  width: 100%;
  height: 3px;
  background: #d1e1bd;
  position: absolute;
  left: -5%;
  top: 15px;
  z-index: 0;
}

.pricerange #progressbar li:first-child:after {
  content: "";
  width: 100%;
  height: 3px;
  background: #d1e1bd;
  position: absolute;
  left: 5%;
  top: 15px;
  z-index: 0;
}

.pricerange #progressbar li {
  text-transform: inherit;
}

#progressbar li:first-child:after {
  content: none;
}

#progressbar li.notPassed:before {
  background: #a5a6af;
  color: white;
}

#progressbar li.active:before {
  background: #00ae4f;
  color: white;
}

#progressbar li.warning:before {
  background: #e80202;
  color: white;
}

.badge-success {
  background: #56a93c;
}

.nc-status-div {
  background-color: #e0e0e0;
  line-height: 5;
  padding: 1rem;
}

.image-crop-display {
  width: 200px;
  height: 205px;
  min-width: 200px;
  border: 1px solid;
  text-align: center;
  border-color: #eae9e9;
  /* box-shadow: 0px 0px 7px #80808040; */
  border-radius: 5px !important;
  padding-bottom: 10px;
  padding: 5px;
}

.btn.btn-default.dark {
  background-color: var(--Theme-Secondary-Color) !important;
  color: #fff !important;
  border: 1px solid var(--Theme-Secondary-Color);
}

.btn-toolbar {
  background-color: transparent !important;
  color: #fff !important;
  border: 1px solid transparent;
}

.btn-default {
  background-color: var(--Theme-Secondary-Color) !important;
  color: #fff !important;
  border: 1px solid var(--Theme-Secondary-Color);
}

.btn-default:hover {
  background-color: var(--Theme-Secondary-Color) !important;
  color: #fff !important;
  border: 1px solid var(--Theme-Secondary-Color);
}

.btn.red.btn-outline.btn-circle {
  background-color: var(--Theme-Secondary-Color) !important;
  color: #fff !important;
  border: 1px solid var(--Theme-Secondary-Color);
}

.btn.red.btn-outline.btn-circle:hover {
  background-color: var(--Theme-Secondary-Color) !important;
  color: #fff !important;
  border: 1px solid var(--Theme-Secondary-Color) !important;
}

.btn-primary {
  background: var(--haifin-Primary-Gradient) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}

.Pdfinovicelistuploader .dz-default {
  font-size: 16px;
}

.Pdfinovicelistuploader .dropzone {
  min-height: 130px;
}

.tick-box-sm {
  font-size: 16px;
  color: #1b365d;
  padding: 5px;
  margin: 0 auto;
  border: 1px solid #1b365d;
  border-radius: 5px !important;
  background-color: #fbfef5;
}

.tick-box-sm-logo {
  font-size: 16px;
  color: #1b365d;
  padding: 10px 8px;
  margin: 0 auto;
  border: 1px solid #1b365d;
  border-radius: 20px !important;
  background-color: #fbfef5;
  width: 35px;
  height: 35px;
}

.quest-box-sm {
  color: orange;
  font-size: 16px;
  padding: 5px;
  margin: 0 auto;
  border: 1px solid orange;
  border-radius: 5px !important;
  background-color: #ffa50014;
}

.cross-box-sm {
  cursor: pointer;
  color: red;
  font-size: 16px;
  padding: 5px;
  margin: 0 auto;
  border: 1px solid red;
  border-radius: 5px !important;
  background-color: #ff000008;
}

.cross-box-sm-logo {
  cursor: pointer;
  color: #df5b6d;
  font-size: 16px;
  padding: 10px 9px;
  margin: 0 auto;
  border: 1px solid #df5b6d;
  border-radius: 20px !important;
  background-color: #ff000008;
  height: 35px;
  width: 35px;
}

.caption-subject {
  font-size: 16px;
  font-family: "GeneralSansBold";
  font-weight: 700;
  text-transform: uppercase;
  color: #303640;
}

.masterButtong {
  background-color: #00854b;
  background-image: none;
}

.lfCon {
  height: 300px;
  background: darkgrey;
  display: flex;
  align-items: center;
  color: black;
}

.content-zone {
  display: flex;
}

.rule-modal-title {
  display: flex;
  justify-content: space-between;
  border: 1px solid;
}

.border-full {
  border: 1px solid black;
}

.left-sec {
  text-align: center;
}

.right-sec {
  border-left: 1px solid;
  text-align: center;
}

.canvasjs-chart-credit {
  outline: none;
  margin: 0px;
  position: absolute;
  right: 0px;
  left: 0px;
  top: 378px !important;
  color: dimgrey;
  text-decoration: none;
  font-size: 11px;
  font-family: Calibri, Lucida Grande, Lucida Sans Unicode, Arial, sans-serif;
  width: 15%;
  background: white;
  color: white !important;
  height: 30px;
}

.canvasjs-chart-credit:hover {
  color: white !important;
}

.tile-title {
  width: 130px;
  font-size: 16px;
  text-align: right;
  /* font-weight: 200; */
}

.tile-title-blur {
  width: 130px;
  font-size: 16px;
  text-align: right;
  /* font-weight: 200; */
}

.tile-value {
  font-size: 20px;
}

.tile-data {
  /* border: 3px solid black; */
  padding: 15px;
  margin: 18px;
  color: #1b365d;
  /* text-align: center; */
  width: 25%;
  font-family: "GeneralSansBold";
  font-weight: 700;
  max-height: 117px;
  border: 3px solid #1b365d;
  border-radius: 12px !important;
}

.tile-data:hover {
  background: #1b365d;
  color: white;
}

.tile-data-blur {
  height: 125px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: 15px;
  margin: 18px;
  color: #1b365d;
  /* text-align: center; */
  width: 25%;
  font-family: "GeneralSansBold";
  font-weight: 700;
  max-height: 117px;
  border: 3px solid #1b365d;
  border-radius: 12px !important;
}

.tile-data-blur:hover {
  /* filter: blur(2px); */
  background: var(--Theme-Secondary-Color);
  border: 3px solid var(--Theme-Secondary-Color);
}

.tile-data-blur:hover .tile-data-formula {
  display: flex;
  color: white;
  font-size: 18px;
  text-align: center;
}

.first:hover .tile-title-blur {
  display: none;
}

.first:hover .blur-title {
  display: none;
}

.second:hover .blur-title {
  display: none;
}

.second:hover .tile-title-blur {
  display: none;
}

.tile-data-formula {
  display: none;
}

.tile-row {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
}

/* React Modal Overlay */
.ReactModal__Overlay {
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}

.ReactModal__Overlay--after-open {
  opacity: 1;
}

.ReactModal__Overlay--before-close {
  opacity: 0;
}

.user-id-email {
  padding: 5px;
  background: #f1f1f1;
  border-radius: 5px;
  margin: 5px;
  text-align: left;
  overflow-x: hidden;
}

select.option-select-blue option:checked {
  background: #1e90ff;
  color: #fff;
}

.popover.bottom {
  max-width: 100%;
  width: 100%;
}

.popover.bottom td,
.th1 {
  padding: 7px;
  max-width: 2;
  word-wrap: break-word;
}

.popover-content>div {
  width: 100% !important;
  max-width: 100%;
}

.popover-content table {
  width: 100% !important;
}

.border-none {
  border: none !important;
}

#UserProfilePic {
  height: inherit;
  width: inherit;
  object-fit: cover;
}

.userProfilePicContainer {
  overflow: hidden;
  height: 120px;
  width: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  border: 4px solid white;
  outline: 1px solid #dfdfdf;
}

.preserve-spaces {
  white-space: pre;
}

.radio-label {
  margin: 0px 10px;
  margin-bottom: 0;
}

.justify-end {
  display: flex;
  justify-content: end;
  column-gap: 10px;
}

.side-menu-container.sub-menu {
  width: 100%;
  /* overflow-y: scroll; */
  background: var(--Theme-Secondary-Color);
}

.workload-tile-unit {
  text-align: right;
  color: #000;
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
}

.workload-tile-number {
  text-align: right;
  color: #000;
  font-size: 5rem;
}

.chevron-icon-sidebar {
  margin-left: auto;
}

.bsEyeFill {
  font-size: 19px;
  color: #ee1109;
  position: absolute;
  right: 45px;
  top: 5px;
}

.green-btn {
  margin-right: 5px;
}

.bold {
  font-weight: bold;
}

.grid {
  display: grid;
}

.grid-cols-2 {
  grid-template-columns: 1fr 4fr;
  column-gap: 1rem;
}

.row-gap-1 {
  row-gap: 1rem;
}

.image-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-box>img {
  position: absolute;
}

.details-box {
  display: grid;
  grid-template-columns: 6fr 1fr;
  column-gap: 4rem;
  border-radius: 6px !important;
  border: 1px solid #e5e5e5;
  background: #fff;
  padding: 2rem;
}

.details-box p,
.block-num-container>p {
  margin: 0px !important;
}

.details-box .text-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  column-gap: 2rem;
}

.text-navy {
  color: #1f345b;
}

.font-w-500 {
  font-family: "GeneralSansMedium";
  font-weight: 500;
}

.font-w-400 {
  font-family: "GeneralSans";
  font-weight: 400;
}

.text-gray {
  color: #797979;
}

.label-button {
  border-radius: 4px !important;
  padding: 0.2rem;
  text-align: center;
}

.w-20 {
  width: 20%;
}

.label-button>p {
  font-family: "GeneralSansMedium";
  font-weight: 500;
  text-transform: capitalize;
}

.blue {
  border: 1px solid #6196f4;
  background: #e9f1ff;
  color: #6196f4;
}

.orange {
  border: 1px solid #dfa436;
  background: #fff4d8;
  color: #dfa436;
}

.green {
  border: 1px solid #2da64e;
  background: #ecfbf2;
  color: #2da64e;
}

.block-num-container {
  border-radius: 11px !important;
  background: #fff;
  position: absolute;
  padding: 0.1rem 0.4rem;
  top: 55%;
}

.block-num-container>p {
  font-family: "GeneralSansBold";
  font-weight: 700;
  font-size: 10px;
}

.not-found-msg {
  text-align: center;
  font-size: 12px;
  font-family: "GeneralSansMedium";
  font-weight: 500;
  color: red;
}

.uppercase {
  text-transform: uppercase;
}

.seperator-vertical {
  position: relative;
}

.seperator-vertical::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  height: 2rem;
  width: 1px;
  background: #e5e5e5;
}

.step-parent {
  display: flex;
  flex-direction: column;
}

.d-flex {
  display: flex;
}

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

.align-items-start {
  align-items: self-start;
}

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

.justify-content-end {
  justify-content: flex-end;
}

/* input style */
.input-block {
  position: relative;
  width: 100%;
}
.d-flex > .input-block {
  flex: 1 1 auto;
  min-width: 0;
}

.country-selector {
  position: relative;
  width: 100%;
}

.overflow-hidden {
  overflow: hidden;
}

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

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

.pr-15 {
  padding-right: 15px !important;
}

.input-block .readOnlyFieldBox {
  background: #fff;
  display: block;
}
.input-block .country-select-dropdown .dropdown-header,
.input-block input,
.input-block select,
.input-block .readOnlyFieldBox {
  font-family: "GeneralSansMedium";
  font-weight: 500;
  font-size: 14px;
  color: var(--haifin-gray-Color);
  width: 100%;
  padding: 9px 52px 9px 10px;
  border-radius: 4px !important;
  border: 1px solid var(--Field-Border);
  outline: none;
  height: 38px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.input-block textarea {
  font-family: "GeneralSansMedium";
  font-weight: 500;
  font-size: 14px;
  color: #071e3d;
  width: 100%;
  padding: 12px 52px 12px 12px;
  border-radius: 4px !important;
  border: 1px solid var(--Field-Border);
  outline: none;
  resize: vertical !important;
  min-height: 60px;
}

.bgEntry .card textarea {
  font-size: 14px;
  color: #071e3d;
  width: 100%;
  padding: 12px 52px 12px 12px;
  border-radius: 4px !important;
  border: 1px solid var(--Field-Border);
  outline: none;
  resize: none;
  overflow: hidden;
}

.input-block span.placeholder {
  position: absolute;
  margin: 15px 0;
  padding: 0 4px;
  color: #000;
  /* color: var(--Input-label); */
  display: flex;
  align-items: center;
  font-size: 11px;
  top: -22px;
  left: 9px;
  transition: all 0.2s;
  transform-origin: 0% 0%;
  background: none;
  pointer-events: none;
  font-family: "GeneralSans";
  text-transform: capitalize;
  background: #fff;
}

.input-block span.placeholder.placeholder-bilingual {
  right: 9px;
  justify-content: space-between;
  background: none !important;
  padding: 0;
}
.placeholder-bilingual .placeholder-en,
.placeholder-bilingual .placeholder-ar {
  background: #fff;
  padding: 0 4px;
  white-space: nowrap;
}
.placeholder-bilingual .placeholder-ar {
  text-transform: none;
  direction: rtl;
  font-family: "GeneralSans";
}
.input-block textarea:disabled+span.placeholder.placeholder-bilingual .placeholder-en,
.input-block textarea:disabled+span.placeholder.placeholder-bilingual .placeholder-ar,
.input-block input:disabled+span.placeholder.placeholder-bilingual .placeholder-en,
.input-block input:disabled+span.placeholder.placeholder-bilingual .placeholder-ar,
.input-block select:disabled+span.placeholder.placeholder-bilingual .placeholder-en,
.input-block select:disabled+span.placeholder.placeholder-bilingual .placeholder-ar {
  background: #fafafa;
}

.input-block textarea:valid+span.placeholder,
.input-block textarea:focus+span.placeholder,
.input-block select:valid+span.placeholder,
.input-block select:focus+span.placeholder,
.input-block input:valid+span.placeholder,
.input-block input:focus+span.placeholder {
  transform: scale(1) translateY(0px);
  background: #fff;
}

.input-block textarea:disabled+span.placeholder,
.input-block input:disabled+span.placeholder,
.input-block select:disabled+span.placeholder {
  transform: scale(1) translateY(0px);
  background: #fafafa;
  border-radius: 4px;
}

.input-block select:disabled {
  transform: scale(1) translateY(0px);
  background: #fafafa;
  border-radius: 4px;
  color: #000;
}

.input-block .country-select-dropdown .dropdown-header+span.placeholder {
  transform: scale(1) translateY(0px);
  background: #fff;
}

.presentationMethodSelect {
  width: 100%;
}
.inputIcon {
  position: absolute;
  top: 13px;
  right: 12px;
  cursor: pointer;
}

.inputTick {
  position: absolute;
  top: 13px;
  right: 30px;
  cursor: pointer;
}

.OCRBadge {
  position: absolute;
  top: 7px;
  right: 30px;
  cursor: pointer;
}

.checkbox-wrapper input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  margin: 0 0.5em 0 0;
  border: 1px solid var(--Theme-Secondary-Color);
  outline: none;
  cursor: pointer;
}

input:checked {
  background-color: var(--Theme-Secondary-Color);
  position: relative;
}

.checkbox-wrapper label {
  display: flex;
  align-items: center;
  margin: 0;
}

.checkbox-wrapper label span {
  color: var(--haifin-Primary-Color);
  font-size: 16px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
  text-transform: capitalize;
}

.hyperlink-wrapper {
  margin-bottom: 15px;
}

.hyperlink-wrapper a {
  color: var(--haifin-Primary-Color);
  font-size: 14px;
  font-family: "GeneralSansMedium";
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
}

.hyperlink-wrapper span a {
  text-decoration: none !important;
}

.multipleApplicantTable table,
.applicantPopulate table,
.multipleApplicantTable table thead tr th:first-child,
.applicantPopulate table thead tr th:first-child,
.multipleApplicantTable table thead tr th:last-child,
.applicantPopulate table thead tr th:last-child {
  border: 0 !important;
  box-shadow: none !important;
}

.multipleApplicantTable table thead,
.applicantPopulate table thead {
  /* border-bottom: 0 !important; */
  background: transparent !important;
}

.multipleApplicantTable table thead th,
.applicantPopulate table thead th {
  color: #000;
  border: 0 !important;
}

input:checked::before {
  content: "";
  background: url("/assets/skins/default/check.svg") no-repeat;
  color: #fff;
  position: absolute;
  right: 2.5px;
  top: 5px;
  width: 12px;
  height: 8px;
}

.checkbox-wrapper input[type="checkbox"]:disabled {
  border-color: #c0c0c0;
  background-color: #c0c0c0;
}

.checkbox-wrapper input[type="checkbox"]:disabled+span {
  color: #c0c0c0;
}

.custom-button {
  padding: 10px 20px;
  /* background-color: #3498db; */
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  outline: none;
  /* Curved upper edges, sharp lower edges */
  border-radius: 50%;
  /* border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; */
}

/* .input-block input:focus {
  color: #284b63;
  border-color: #284b63;
}

.input-block input:focus + span.placeholder {
  color: #284b63;
} */

/*  */
.portlet.light {
  padding: 15px 25px;
  background-color: #f6f6f6;
}

/* BG multiple entry */
.multipleBGEntry h2,
.bgEntry h2,
.BGlisting h2 {
  color: rgba(23, 23, 23, 0.98);
  font-size: 28px;
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
  line-height: normal;
  margin-top: 0;
}

.multipleBGEntry .downloadSample {
  color: var(--haifin-gray-Color);
  font-size: 16px;
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
  line-height: normal;
  margin-right: 8px;
}

.multipleBGEntry .csv {
  margin-right: 10px;
  display: flex;
  align-items: center;
  color: var(--haifin-Primary-Color);
  font-size: 14px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
}

.multipleBGEntry .xlsx {
  display: flex;
  align-items: center;
  color: var(--haifin-Primary-Color);
  font-size: 14px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
}

.multipleBGEntry .csv svg,
.multipleBGEntry .xlsx svg {
  margin-right: 4px;
}

.BGDoc.portlet.light .portlet-body .dropzone,
.UploadMultiBG.portlet.light .portlet-body .dropzone,
.BGFormWrp .dropzone,
.multipleBGEntry .dropzone {
  border-radius: 4px !important;
  border: 1px dashed #d4d5da;
  background: #f9fafc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.UploadMultiBG.portlet.light .portlet-body .dropzone {
  height: 150px;
}

.chart-portlet {
  border-radius: 4px !important;
  border: 1px solid #eff0f2;
  background: #ffffff;
  padding: 25px;
}

.chart-portlet-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.chart-title {
  font-family: "GeneralSansSemiBold";
  font-size: 18px;
  color: rgba(23, 23, 23, 0.98) !important;
  line-height: normal;
  /* text-align: left; */
  margin: 0 auto !important;
}

.header-title {
  font-family: "GeneralSansSemiBold";
  font-size: 18px;
  color: rgba(23, 23, 23, 0.98) !important;
  line-height: normal;
}

.chart-icon {
  cursor: pointer;
}

.UploadMultiBG.portlet.light .portlet-body .dropzone .dropTitle,
.BGDoc.portlet.light .portlet-body .dropzone .dropTitle,
.BGFormWrp .dropzone .dropTitle,
.multipleBGEntry .dropzone .dz-message .dropTitle {
  color: var(--haifin-Primary-Color);
  font-size: 14px;
  font-weight: 600 !important;
  line-height: normal;
  margin: 6px 0 3px;
}

.UploadMultiBG.portlet.light .portlet-body .dropzone .dropFile,
.UploadMultiBG.portlet.light .portlet-body .dropzone .dropFileSize,
.BGDoc.portlet.light .portlet-body .dropzone .dropFile,
.BGFormWrp .dropzone .dropFile,
.BGFormWrp .dropzone .dropFileSize,
.multipleBGEntry .dropzone .dz-message .dropFile {
  color: var(--haifin-gray-Color);
  font-size: 12px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
}

.justify-content-between {
  justify-content: space-between;
}

button.btn {
  padding: 8px 16px;
  color: #fff;
  border-radius: 4px !important;
  text-align: center;
  font-size: 14px !important;
  font-family: "GeneralSansMedium";
  font-weight: 500;
  line-height: normal;
  min-width: 120px;
  height: 38px;
  border: 0 !important;
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  opacity: 0.85;
}

button.btn-light {
  background: #f1f1f1;
  color: #7f7f7f;
}

.bgEntry .btns .btn.disabled,
.bgEntry .btns .btn-light,
.multipleBGEntry .btns .btn.disabled,
.multipleBGEntry .btns .btn-light {
  margin-right: 10px;
}

.bgEntry .table {
  margin-bottom: 0 !important;
}

.selectedFileWrp {
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #d4d5da;
  background: #f9fafc;
  margin: 24px 0 10px;
}

.selectedFileWrp h5 {
  color: var(--haifin-Primary-Color);
  font-size: 14px;
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
  line-height: normal;
  margin: 0;
}

.selectedFileWrp h5 .imgBG {
  width: 22px;
  height: 22px;
  border-radius: 14px;
  background: var(--Theme-Secondary-Color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  border-radius: 100%;
}

.selectedFileWrp .replace {
  color: #b62319;
  font-size: 14px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
}

.selectedFileWrp .replace svg {
  margin-right: 4px;
}

.previewWrp h3 {
  color: var(--haifin-Primary-Color);
  font-size: 14px;
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
  line-height: normal;
  margin: 0;
  text-transform: uppercase;
}

.previewWrp .searchWrp {
  margin: 15px 0 25px;
}

.searchInptWrp {
  position: relative;
  /* inline-flex with a block input: an inline input leaves a baseline gap
     beneath it, which made this wrapper taller than the 38px add button
     sitting next to it. */
  display: inline-flex;
  align-items: center;
}

.searchInptWrp input {
  display: block;
  box-sizing: border-box;
  margin: 0;
  width: 228px;
  height: 38px;
  border-radius: 4px;
  border: 1px solid var(--Field-Border);
  padding: 10px 15px 10px 30px;
  font-size: 14px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
}

.searchInptWrp .searchBtn {
  position: absolute;
  left: 12;
  top: 15;
  border: 0;
  background: transparent;
  padding: 0;
}

.searchInptWrp input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #d4d5da;
  font-size: 16px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
}

.searchInptWrp input::-moz-placeholder {
  /* Firefox 19+ */
  color: #d4d5da;
  font-size: 16px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
}

.searchInptWrp input:-ms-input-placeholder {
  /* IE 10+ */
  color: #d4d5da;
  font-size: 16px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
}

.searchInptWrp input:-moz-placeholder {
  /* Firefox 18- */
  color: #d4d5da;
  font-size: 16px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
}

*:focus-visible {
  outline: none;
}

.filterBtn {
  width: 38px;
  height: 38px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0px 0px 8.1px 0px rgba(0, 0, 0, 0.1);
  margin-left: 10px;
  border: 0;
}

.addBtn {
  width: 38px;
  height: 38px;
  border-radius: 4px;
  background: var(--haifin-Primary-Gradient);
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
}

.downloadBtn {
  width: 38px;
  background-color: transparent;
  height: 38px;
  border-radius: 4px;
  /* background: rgb(199, 199, 199); */
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
}

.previewWrp .recordWrp .recordIcon {
  width: 32px;
  height: 32px;
  border-radius: 28px;
  background: var(--Theme-Secondary-Color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
}

.previewWrp .recordWrp {
  color: var(--haifin-gray-Color);
  font-size: 16px;
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
  line-height: normal;
  margin: 0 0 8px;
}

.previewWrp .recordWrp b {
  color: var(--haifin-Primary-Color);
  font-size: 14px;
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
  line-height: normal;
  margin-right: 5px;
}

.btns span:last-child {
  margin: 0 !important;
}

/*  */
.BGFormWrp .card {
  border-radius: 16px;
  border: 1px solid #fff;
  background: #fff;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.04);
  padding: 20px;
  margin: 30px 0 0;
  overflow: hidden;
}

.textEditor.card {
  padding: 0;
}

.textEditorWrp {
  padding: 15px;
}

.UploadMultiBG.portlet.light .RichTextEditor__root___2QXK-,
.BGDoc.portlet.light .RichTextEditor__root___2QXK-,
.BGFormWrp .card .RichTextEditor__root___2QXK-,
.tcText,
.comments textarea {
  border: 0;
  border-radius: 8px;
  border: 1px solid #d4d5da;
  background: #f9fafc;
  resize: none;
}

.comments label {
  color: #071e3d;
  font-family: "GeneralSansSemiBold";
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
}

.bgEntry .card {
  border-radius: 4px;
  border: 1px solid #fff;
  background: #fff;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.04);
  padding: 20px;
  margin: 15px 0 0;
  overflow: inherit;
}

.bgDetail .card h3,
.BGFormWrp .card h3 {
  color: var(--haifin-Primary-Color);
  font-size: 14px;
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
  line-height: normal;
  margin: 0 0 25px;
  text-transform: uppercase;
}

.BGFormWrp .textEditor h3 {
  color: var(--haifin-gray-Color);
  font-size: 24px;
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
  line-height: normal;
  margin: 25px 0 0;
  padding: 0 15px;
}

.UploadMultiBG.portlet.light .EditorToolbar__root___3_Aqz,
.BGDoc.portlet.light .EditorToolbar__root___3_Aqz,
.BGFormWrp .EditorToolbar__root___3_Aqz,
.RichTextEditor__editor___1QqIU .public-DraftEditor-content {
  border: 0;
}

.portlet.light .portlet-body {
  padding: 0;
}

.logoText {
  border-left: 1px solid #e1e1e1;
  padding-left: 13px;
  margin-left: 13px;
}

.logoText span {
  color: var(--haifin-gray-Color);
  display: block;
  font-size: 12px;
  font-family: "GeneralSansSemiBold";
  line-height: normal;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.logoText p {
  color: var(--haifin-Primary-Color);
  font-size: 14px;
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
  line-height: normal;
  margin: 0;
}

.logoText img {
  width: 50px;
  height: 22px;
  object-fit: contain;
}

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

.bgEntry .switchWrp label {
  display: flex;
  align-items: center;
}

.bgEntry .switchWrp label span {
  color: var(--haifin-Primary-Color) !important;
  font-size: 14px !important;
  font-family: "GeneralSansMedium" !important;
  line-height: normal;
  margin-right: 8px;
}

/* Modals */
.BGDoc.portlet.light,
.UploadMultiBG.portlet.light {
  background: #fff;
  /* width: 425px; */
  /* width: 700px; */
  height: fit-content;
  max-height: 640px;
  border: 0 !important;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 0;
  overflow-y: auto;
}

.customScrollbar::-webkit-scrollbar {
  width: 10px;
}

.customScrollbar::-webkit-scrollbar-track {
  border-radius: 5px;
}

.customScrollbar::-webkit-scrollbar-thumb {
  background-color: var(--haifin-gray-Color);
  border-radius: 5px;
}

.UploadMultiBG.portlet.light .portlet-title,
.BGDoc.portlet.light .portlet-title {
  display: flex;
  align-items: center;
  min-height: auto !important;
  border-bottom: 1px solid #eff0f2 !important;
  margin-bottom: 12px;
  padding-bottom: 12px;
}

.BGDoc.portlet.light h3,
.UploadMultiBG.portlet.light h3 {
  color: var(--haifin-Primary-Color);
  font-size: 14px;
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
  line-height: normal;
  margin: 0;
  width: 100%;
  text-transform: uppercase;
}

.UploadMultiBG.portlet.light .selectedFileWrp,
.BGDoc.portlet.light .selectedFileWrp {
  margin-top: 10px;
}

.BGDoc.portlet.light .ui-regulartabs {
  margin-bottom: 25px;
}

.BGDoc.portlet.light .ui-regulartabs .nav-tabs>li {
  width: 50%;
}

.BGDoc.portlet.light .ui-regulartabs .nav-tabs>li a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}

.BGDoc.portlet.light .portlet-body .dropzone {
  height: 110px;
  min-height: auto;
}

.UploadMultiBG.portlet.light .portlet-body .dropzone {
  height: 150px;
  min-height: auto;
}

.BGDoc.portlet.light .successIcon,
.UploadMultiBG.portlet.light .successIcon {
  width: 74px;
  height: 74px;
  border-radius: 37px;
  background: #51c763;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
}

.UploadMultiBG.portlet.light .iconWrp {
  width: 74px;
  height: 74px;
  border-radius: 37px;
  background: var(--haifin-Primary-Color);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
}

.UploadMultiBG.portlet.light .iconWrp.bgRed {
  background: #b62319;
}

.UploadMultiBG.portlet.light .iconWrp img {
  width: 30px;
}

/* BG detail */
.backBtn {
  margin-bottom: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.backBtn span {
  color: var(--haifin-Primary-Color);
  font-size: 14px;
  font-family: "GeneralSansMedium";
  font-weight: 500;
  line-height: normal;
  margin-left: 5.5px;
}

.bgDetail .card {
  border-radius: 4px;
  border: 0;
  background: #fff;
  box-shadow: 0px 4px 11px 0px rgba(0, 0, 0, 0.06);
  margin-bottom: 25px;
}

.bgDetail .card .textWrp {
  padding: 15px;
}

.bgDetail .card .logoTextWrp {
  display: flex;
  align-items: center;
}

.bgEntry .card .logoWrp .bank_bg_ref_img,
.bgDetail .card .logoTextWrp .bank_bg_ref_img {
  width: 60px;
}

.bgDetail .card .logoTextWrp .logoText {
  border: 0;
  padding: 0;
}

.bgDetail .card .logoText .flagImg {
  width: 18px;
  margin-left: 5.5px;
}

.bgDetail .activeWrp {
  background: #eefff8;
  display: flex;
  align-items: center;
  padding: 25px;
  height: 94px;
}

.bgDetail .pendingWrp {
  background: #e2c94f;
  display: flex;
  align-items: center;
  padding: 25px;
  height: 94px;
}

.bgDetail .rejectedWrp {
  background: #ffebeb;
  display: flex;
  align-items: center;
  padding: 25px;
  height: 94px;
}

.bgDetail .closedWrp {
  background: #ffeded;
  display: flex;
  align-items: center;
  padding: 25px;
  height: 94px;
}

.bgDetail .blueWrp {
  background: #4f8ce2;
  display: flex;
  align-items: center;
  padding: 25px;
  height: 94px;
}

.bgDetail .blueWrp span {
  width: 14px;
  height: 14px;
  border-radius: 37px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bgDetail .blueWrp p {
  color: #ffffff;
  text-align: center;
  font-size: 16px;
  font-family: "GeneralSansMedium";
  font-weight: 500;
  line-height: normal;
  margin: 0 0 0 4px;
}

.bgDetail .greyWrp {
  background: #cfcfcf;
  display: flex;
  align-items: center;
  padding: 25px;
  height: 94px;
}

.bgDetail .greyWrp span {
  width: 14px;
  height: 14px;
  border-radius: 37px;
  background: #2c2c2c;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bgDetail .greyWrp p {
  color: #474747;
  text-align: center;
  font-size: 16px;
  font-family: "GeneralSansMedium";
  font-weight: 500;
  line-height: normal;
  margin: 0 0 0 4px;
}

.bgDetail .approvedWrp {
  background: #e8fff5;
  display: flex;
  align-items: center;
  padding: 25px;
  height: 94px;
}

.bgDetail .activeWrp span {
  width: 14px;
  height: 14px;
  border-radius: 37px;
  background: #00854b;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bgDetail .activeWrp p {
  color: #00854b;
  text-align: center;
  font-size: 16px;
  font-family: "GeneralSansMedium";
  font-weight: 500;
  line-height: normal;
  margin: 0 0 0 4px;
}

.bgDetail .pendingWrp span {
  width: 14px;
  height: 14px;
  border-radius: 37px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bgDetail .pendingWrp p {
  color: #ffffff;
  text-align: center;
  font-size: 16px;
  font-family: "GeneralSansMedium";
  font-weight: 500;
  line-height: normal;
  margin: 0 0 0 4px;
}

.bgDetail .rejectedWrp span {
  width: 14px;
  height: 14px;
  border-radius: 37px;
  background: #fb6363;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bgDetail .rejectedWrp p {
  color: #fb6363;
  text-align: center;
  font-size: 16px;
  font-family: "GeneralSansMedium";
  font-weight: 500;
  line-height: normal;
  margin: 0 0 0 4px;
}

.bgDetail .approvedWrp p {
  color: #7ee763;
  text-align: center;
  font-size: 16px;
  font-family: "GeneralSansMedium";
  font-weight: 500;
  line-height: normal;
  margin: 0 0 0 4px;
}

.bgDetail .approvedWrp span {
  width: 14px;
  height: 14px;
  border-radius: 37px;
  background: #7ee763;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bgDetail .closedWrp span {
  width: 14px;
  height: 14px;
  border-radius: 37px;
  background: #ed3333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bgDetail .closedWrp p {
  color: #ed3333;
  text-align: center;
  font-size: 16px;
  font-family: "GeneralSansMedium";
  font-weight: 500;
  line-height: normal;
  margin: 0 0 0 4px;
}

.bgDetail .detail.card {
  padding: 25px;
  margin-bottom: 15px !important;
}

.bgDetail .detail.card .bb {
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 6px;
  padding-bottom: 6px;
}

.BG-detail .bb {
  width: 50%;
}

.bgDetail .detail.card h5 {
  color: var(--haifin-Primary-Color);
  font-size: 14px;
  font-family: "GeneralSansMedium";
  font-weight: 500;
  line-height: normal;
  margin: 0;
}

.bgDetail .detail.card span {
  color: var(--haifin-gray-Color);
  font-size: 14px;
  font-family: "GeneralSans";
  line-height: normal;
}

.bgDetail .detail.card p {
  color: var(--haifin-Primary-Color);
  font-size: 14px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
}

.eventName {
  color: var(--haifin-gray-Color) !important;
  font-family: "GeneralSansMedium" !important;
  font-size: 14px;
  line-height: normal;
}

.eventValue {
  color: #696f7b !important;
  font-family: "GeneralSans";
  font-size: 14px;
  line-height: normal;
}

.approvalStatus {
  font-family: "GeneralSansMedium" !important;
  font-size: 12px !important;
  line-height: normal;
  display: flex;
}

.downloadAttachment {
  text-decoration: underline !important;
}

.approvalStatusTitle {
  margin-right: 8px;
  color: var(--haifin-Primary-Color);
  font-family: "GeneralSansMedium";
  font-size: 12px;
  line-height: normal;
  display: flex;
  align-items: center;
}

.beneficiary-sub-heading {
  font-size: 12px;
}

button.approvalStatusBtn {
  border-radius: 4px;
  min-width: 65px !important;
  width: 65px !important;
  height: 22px !important;
  color: #fff;
  text-align: center;
  font-family: "GeneralSansMedium" !important;
  font-size: 12px !important;
  line-height: normal;
  /* Card-shadow */
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
}

/* progressbar */
.StepProgress {
  position: relative;
  list-style: none;
  margin: 0;
  overflow-y: scroll;
  height: 435.69px;
  padding-right: 18px;
}

.StepProgress::-webkit-scrollbar,
.eventDetail::-webkit-scrollbar {
  border-radius: 4px;
  width: 5px;
  background: #cfcfcf;
}

.applicantListWrp::-webkit-scrollbar {
  border-radius: 4px;
  width: 7px;
  background: #cfcfcf;
}

/* .StepProgress::-webkit-scrollbar-track,
/* .eventDetail::-webkit-scrollbar-track,
/* .applicantListWrp::-webkit-scrollbar-track {
  background: #CFCFCF;

} */

.StepProgress::-webkit-scrollbar-thumb,
.eventDetail::-webkit-scrollbar-thumb,
.applicantListWrp::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #eff0f2;
}

/* .StepProgress::before {
  display: inline-block;
  content: "";
  position: absolute;
  top: 0;
  left: 15px;
  width: 10px;
  height: 100%;
} */
.StepProgress-item {
  position: relative;
  padding: 15px;
  height: 85px;
  border-radius: 4px;
  border: 1px solid #eaeaea;
  margin-top: 12px;
}

.StepProgress-item:first-child {
  margin-top: 0px;
}

.StepProgress-item::before {
  display: inline-block;
  content: "";
  position: absolute;
  left: -30px;
  height: 150%;
  width: 12px;
  top: 50px;
}

.StepProgress-item::after {
  content: "";
  display: inline-block;
  position: absolute;
  /* top: 40px; */
  left: -40px;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  background-color: #fff;
}

.StepProgress-item.active {
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.06);
  border-color: #a70b0b;
  background: #fffbfb;
  position: relative;
}

.StepProgress-item.is-done::before {
  border-left: 4px solid #00854b;
}

.StepProgress-item.is-done::after {
  content: "";
  background: url("/assets/skins/default/progress_tick.svg") no-repeat;
  background-size: 40%;
  background-position: center;
  border: 4px solid #fff;
  background-color: #00854b;
  width: 23px;
  height: 23px;
}

.StepProgress-item.active>div:after {
  content: "";
  background: url("/assets/skins/default/active-timeline-arr.svg") no-repeat;
  background-position: center;
  width: 17px;
  height: 17px;
  position: absolute;
  right: -13px;
  top: 50%;
  transform: translateY(-50%);
}

.StepProgress-item.current::before {
  border-left: 4px solid #e2e9f5;
}

.StepProgress-item.current::after {
  content: "";
  width: 23px;
  height: 23px;
  top: 40px;
  left: -40px;
  border: 4px solid #fff;
  background-color: #e2e9f5;
}

.StepProgress-item:last-child:before {
  display: none;
}

.bgDetail .StepProgress .StepProgress-item .status {
  color: var(--haifin-Primary-Color);
  font-size: 16px;
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
  line-height: normal;
  margin: 0;
}

.bgDetail .StepProgress .StepProgress-item .user {
  color: var(--haifin-Primary-Color);
  font-size: 12px;
  font-family: "GeneralSansMedium";
  font-weight: 500;
  line-height: normal;
  margin: 0;
}

.bgDetail .StepProgress .StepProgress-item .date {
  color: var(--haifin-gray-Color);
  font-size: 12px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.24px;
}

.bgDetail .StepProgress .StepProgress-item .version {
  color: var(--haifin-Primary-Color);
  font-size: 16px;
  font-family: "GeneralSansMedium";
  font-weight: 500;
  line-height: normal;
  text-decoration-line: underline;
}

.bgDetail .StepProgress .StepProgress-item .expiryDays {
  color: var(--haifin-Primary-Color);
  font-size: 16px;
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
  line-height: normal;
  margin: 0;
}

.bgDetail .StepProgress .StepProgress-item .expiryDays span {
  color: #b62319;
  font-size: 16px;
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
  line-height: normal;
}

.bgDetail .StepProgress .StepProgress-item .expiryDate {
  color: #696f7b;
  font-size: 12px;
  font-family: "GeneralSansMedium";
  font-weight: 500;
  line-height: normal;
  margin-top: 3px;
  margin-right: 10px;
}

.bgDetail .StepProgress .StepProgress-item .commentsWrp {
  border-radius: 1px;
  background: rgba(244, 244, 244, 0.33);
  padding: 14px;
}

.bgDetail .StepProgress .StepProgress-item .commentsWrp h6 {
  color: var(--haifin-Primary-Color);
  font-size: 16px;
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
  line-height: normal;
  margin: 0 0 5px;
}

.bgDetail .StepProgress .StepProgress-item .commentsWrp p {
  color: var(--haifin-Primary-Color);
  font-size: 14px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
  margin: 0;
  display: -webkit-box;
  max-width: 312px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* .bgDetail .StepProgress .StepProgress-item .timelineogo {
  width: 30px;
} */
.timelineIcon,
.bgDetail .StepProgress .StepProgress-item .iconBg {
  border-radius: 68px;
  background: var(--haifin-Primary-Gradient);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timelineIcon img,
.bgDetail .StepProgress .StepProgress-item .iconBg img {
  width: 12px;
  height: auto !important;
}

.eventDetail {
  border-radius: 4px;
  border: 1px solid #eaeaea;
  padding: 15px;
  overflow-y: scroll;
  height: 435.69px;
}

.eventDetail u {
  color: var(--haifin-Primary-Color);
  font-family: "GeneralSansMedium";
  font-size: 14px;
  line-height: normal;
}

.eventDetail table {
  margin-bottom: 0 !important;
}

.w-100 {
  width: 100% !important;
}

.bullet-red {
  background: #b62319;
  width: 7px;
  height: 7px;
  border-radius: 100px;
  margin-right: 5px;
}

.bullet-green {
  background: #00854b;
  width: 7px;
  height: 7px;
  border-radius: 100px;
  margin-right: 5px;
}

.green-rectangle {
  color: #00854b;
  font-size: 9px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
  border-radius: 4px;
  border: 0.3px solid #00854b;
  background: #eefff8;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  height: 22px;
}

.red-rectangle {
  border-radius: 4px;
  border: 0.3px solid #b62319;
  background: #ffedec;
  color: #b62319;
  font-size: 9px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 22px;
  margin: 0 auto;
}

.orange-rectangle {
     border-radius: 4px;
    border: 0.3px solid #f17a13;
    background: #ffead0;
    color: #ef8223;
    font-size: 9px;
    font-family: "GeneralSans";
    font-weight: 400;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 22px;
    margin: 0 auto;
}

span.green-activity {
  border-radius: 4px;
  background: #00854b;
  color: #fff;
  font-size: 9px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  width: 100%;
  max-width: 45px;
  padding: 0 5px;
  margin: 0 auto;
}

span.brown-activity {
  border-radius: 4px;
  background: #6c2337;
  color: #fff;
  font-size: 9px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  width: 100%;
  max-width: 45px;
  padding: 0 5px;
  margin: 0 auto;
}

span.purple-activity {
  border-radius: 4px;
  background: #3544c8;
  color: #fff;
  font-size: 9px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  width: 100%;
  padding: 0 5px;
  max-width: 45px;
  margin: 0 auto;
}

span.yellow-activity {
  border-radius: 4px;
  background: #e2c94f;
  color: #fff;
  font-size: 9px;
  font-weight: 400;
  font-family: "GeneralSans";
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  width: 100%;
  max-width: 45px;
  padding: 0 5px;
  margin: 0 auto;
}

span.red-activity {
  border-radius: 4px;
  background: #ba0b0b;
  color: #fff;
  font-size: 9px;
  font-weight: 400;
  font-family: "GeneralSans";
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  width: 100%;
  padding: 0 5px;
  margin: 0 auto;
  max-width: 45px;
}

span.pink-activity {
  border-radius: 4px;
  background: #d11a2a;
  color: #fff;
  font-size: 9px;
  font-weight: 400;
  font-family: "GeneralSans";
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  width: 100%;
  padding: 0 5px;
  margin: 0 auto;
}

span.review-activity {
  border-radius: 4px;
  background: #9575CD;
  color: #fff;
  font-size: 9px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  width: 100%;
  max-width: 45px;
  padding: 0 5px;
  margin: 0 auto;
}

span.revised-activity {
  border-radius: 4px;
  background: #0097A7;
  color: #fff;
  font-size: 9px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  width: 100%;
  max-width: 45px;
  padding: 0 5px;
  margin: 0 auto;
}

span.blue-activity {
  border-radius: 4px;
  background: #4f8ce2;
  color: #fff;
  font-size: 9px;
  font-weight: 400;
  font-family: "GeneralSans";
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  width: 100%;
  padding: 0 5px;
  margin: 0 auto;
}

span.red-activity {
  border-radius: 4px;
  background: #6c2337;
  color: #fff;
  font-size: 9px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  width: 100%;
  padding: 0 5px;
  margin: 0 auto;
}

span.grey-activity {
  border-radius: 4px;
  background: #989898;
  color: #fff;
  font-size: 9px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  max-width: 85px;
  width: 100%;
  padding: 0 5px;
  margin: 0 auto;
}

.bgDetail span.grey-activity{
   max-width: 110px;
}

span.blue-activity {
  border-radius: 4px;
  background: #0059d7;
  color: #fff;
  font-size: 9px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  /* width: 100%; */
  max-width: 65px;
  padding: 0 5px;
  margin: 0 auto;
}

.BGlisting .sdg_tbl tbody img {
  width: 16px;
  height: 16px;
}

.btn.btn-blue-circle {
  background: var(--haifin-gray-Color);
  border-radius: 100% !important;
  width: 16px;
  height: 16px;
  color: #fff;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn.btn-blue-circle i {
  line-height: normal;
}

.btn.btn-blue-circle:hover {
  color: #fff !important;
}

.saveDraft {
  background: var(--haifin-gray-Color) !important;
  border: 0 !important;
}

.furtherActions {
  background: #fff !important;
  box-shadow: 0px 0px 8.1px 0px rgba(0, 0, 0, 0.1) !important;
  color: var(--haifin-Primary-Color) !important;
}

.deleteBtn {
  background: #ffdcdc !important;
  border: 0 !important;
  color: #b80a08 !important;
}

button.borderBtn {
  color: var(--haifin-gray-Color) !important;
  border: 1px solid var(--haifin-gray-Color) !important;
  background: transparent !important;
}

.btn-group>.dropdown-menu {
  filter: drop-shadow(0px 4px 13px rgba(0, 0, 0, 0.17));
  box-shadow: none;
  border: 0;
  border-radius: 6px;
}

.dropdown-menu li {
  margin: 10px;
}

.dropdown-menu>li>a {
  color: var(--haifin-gray-Color) !important;
  font-size: 12px;
  font-family: "GeneralSansMedium";
  font-weight: 500;
  line-height: normal;
  padding: 0 0 10px;
  margin: 0 0 10px;
  border-bottom: 1px solid #eff0f2;
}

.dropdown-menu li:last-child a {
  padding: 0;
  margin: 0;
  border-bottom: 0;
}

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

.dataTables_info {
  margin: 0 15px 0 0 !important;
  color: #000;
  font-size: 12px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
}

.inline-action {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  list-style: none;
}

.inline-action li {
  color: var(--haifin-gray-Color);
  font-size: 12px;
  font-family: "GeneralSans";
  line-height: normal;
  display: flex;
  align-items: center;
  margin-left: 12px;
}

.inline-action li img {
  margin-right: 6px;
}

.inline-action li:first-child {
  margin-left: 0;
}

.pageSizeSelector {
  width: 46px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid var(--haifin-gray-Color);
  text-align: center;
}

.customDropdownWrp .custom-dropdown {
  position: relative;
}

.customDropdownWrp .custom-dropdown .dropdown-toggle {
  border-radius: 4px;
  background: #fff;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
  width: 300px;
  position: absolute;
  right: 0;
  top: 20px;
  z-index: 100;
  padding: 25px 15px 15px;
}

.customDropdownWrp .custom-dropdown .dropdown-toggle::before {
  position: absolute;
  top: -8px;
  left: auto;
  right: 9px;
  display: inline-block !important;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #fff;
  border-left: 8px solid transparent;
  content: "";
  content: "";
}

.customDropdownWrp .custom-dropdown .btns .btn-light:hover,
.customDropdownWrp .custom-dropdown .btns .btn-light {
  color: #ccc;
}

.error-message {
  color: #b62319;
  font-size: 10px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
  position: absolute;
  right: 0;
}

.input-error select,
.input-error input {
  border-color: #b62319;
}

.input-error .country-select-dropdown .dropdown-header {
  border-color: #b62319;
}

.input-error .placeholder {
  color: #b62319 !important;
}

/* CustomDropdown.css */
.country-select-dropdown .dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px !important;
  /* border: 1px solid #ccc; */
  cursor: pointer;
  user-select: none;
  /* background-color: #fff; */
}

.country-select-dropdown .dropdown-content {
  display: block;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 100%;
  border: 0;
  background-color: #fff;
  z-index: 999;
  filter: drop-shadow(0px 4px 13px rgba(0, 0, 0, 0.17));
  box-shadow: none;
  border-radius: 8px;
  padding: 0;
}

.country-select-dropdown .dropdown-content input {
  margin: 10px;
  width: -webkit-fill-available !important;
}

.country-select-dropdown ul {
  list-style: none;
  padding: 12px;
  max-height: 175px;
  overflow-y: auto;
  margin: 0;
}

.country-select-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  /* border-bottom: 1px solid #eff0f2; */
  padding: 0 0 10px;
  margin: 0 0 10px;
}

.country-select-dropdown .dropdown-item:last-child {
  border-bottom: 0;
  padding: 0;
  margin: 0;
}

.country-select-dropdown .country-image {
  width: 24px;
  height: 16px;
  margin-right: 8px;
}

/* Custom Loader */

.btn-loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: relative;
  animation: rotate 1s linear infinite;
}

.btn-loader::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border: 5px solid #fff;
  animation: prixClipFix 2s linear infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes prixClipFix {
  0% {
    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
  }

  25% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
  }

  50% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
  }

  75% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  }

  100% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
}

.thumbIcon {
  position: absolute;
  left: 10px;
  top: -5px;
}

#datePicker input {
  padding: 10px;
}

.page-sidebar .page-sidebar-menu .sub-menu>li.active-item>a {
  color: #fff !important;
}

/* .public-DraftEditor-content{
  min-height: 100% !important;
} */

.tcText {
  word-break: break-all;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 200px;
  /* border-radius: 5px; */
  padding: 10px;
  /* margin-bottom: 15px !important; */
  /* display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden; */
}

.tcText p {
  margin-top: 0;
  text-align: left !important;
}

.tcText strong {
  font-family: "GeneralSansBold";
}

.confirmation-modal h2 {
  color: var(--haifin-Primary-Color);
  text-align: center;
  font-size: 16px;
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
  line-height: normal;
  margin: 0 0 10px;
}

.confirmation-modal p {
  color: var(--haifin-gray-Color);
  text-align: center;
  font-size: 14px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
  margin: 0;
}

.btn-danger {
  background-color: #b62319;
  border-color: #b62319;
}

.UploadMultiBG.portlet.light.confirmation-modal {
  padding: 25px;
}

.UploadMultiBG.portlet.light.confirmation-modal .portlet-title {
  border: 0 !important;
}

.refernceModal .wrap {
  display: flex;
  flex-flow: wrap;
  justify-content: start;
}

.refernceModal .innerWrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  /* border-bottom: 1px solid #eff0f2; */
  padding-bottom: 10px;
  margin-bottom: 10px;
  /* width: 33%; */
}

.refernceModal .innerWrap:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.refernceModal .wrap .innerWrap ul {
  padding: 0;
}

.refernceModal .innerWrap h6 {
  color: var(--haifin-Primary-Color);
  font-size: 14px;
  font-family: "GeneralSansMedium";
  font-weight: 500;
  line-height: normal;
  margin: 0 0 5px;
}

.refernceModal .innerWrap p {
  color: var(--haifin-gray-Color);
  font-size: 14px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
  margin: 0;
}

.isUploadingLoader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60%;
  margin-top: -10px;
}

.isUploadingLoader h4 {
  font-size: 16px;
  color: var(--haifin-Primary-Color);
}

.isUploadingLoader .loader1 {
  width: 48px;
  height: 48px;
  border: 5px solid #e00800;
  border-radius: 50%;
  display: block;
  box-sizing: border-box;
  position: relative;
  animation: pulse 1s linear infinite;
  margin: 0 auto;
}

.loader1:after {
  content: "";
  position: absolute;
  width: 48px;
  height: 48px;
  border: 5px solid #4b0f1e;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: scaleUp 1s linear infinite;
}

@keyframes scaleUp {
  0% {
    transform: translate(-50%, -50%) scale(0);
  }

  60%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes pulse {

  0%,
  60%,
  100% {
    transform: scale(1);
  }

  80% {
    transform: scale(1.2);
  }
}

.isUploadingLoader .loaderDotted {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: block;
  margin: 15px auto;
  position: relative;
  background: #e00800;
  box-shadow: -24px 0 #e00800, 24px 0 #e00800;
  box-sizing: border-box;
  animation: shadowPulse 1s linear infinite;
}

@keyframes shadowPulse {
  33% {
    background: #e00800;
    box-shadow: -24px 0 #4b0f1e, 24px 0 #e00800;
  }

  66% {
    background: #4b0f1e;
    box-shadow: -24px 0 #e00800, 24px 0 #e00800;
  }

  100% {
    background: #e00800;
    box-shadow: -24px 0 #e00800, 24px 0 #4b0f1e;
  }
}

.mainLogoText {
  color: #fcfcfc !important;
  text-align: center;
  font-size: 16px !important;
  font-style: normal;
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
  line-height: 21.5px;
  /* 113.158% */
  letter-spacing: -0.475px;
}

.asterisk {
  color: red;
  margin-left: 2px;
}

/* blockchain modal */
.blockchain-wrp {
  padding: 15px;
}

.blockchain-wrp .ref {
  border-right: 1px solid #e5e5e5;
  padding-right: 20px;
  margin-right: 20px;
}

.blockchain-wrp .invoice h5,
.blockchain-wrp .ref h5 {
  color: var(--haifin-gray-Color);
  font-family: "GeneralSansMedium";
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  margin: 0 10px 0 0;
}

.blockchain-wrp .invoice p,
.blockchain-wrp .ref p {
  color: #797979;
  font-family: "GeneralSans";
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  margin: 0;
}

.blockchain-wrp .blockchain-img {
  position: relative;
}

.blockchain-wrp .blockchain-img::after {
  content: "";
  background: url("../default/blockchain-chain.png") no-repeat;
  width: 7.5px;
  height: 72px;
  position: absolute;
  bottom: -65px;
  left: -3px;
  right: 0;
  margin: 0 auto;
  background-size: contain;
}

.blockchain-wrp .row:last-child .col-md-2 .blockchain-img::after {
  display: none;
}

.blockchain-wrp .blockchain-img img {
  width: 109.609px;
  height: 126.216px;
}

.blockchain-wrp .card {
  padding: 15px;
  border-radius: 6px;
  border: 1px solid #e5e5e5;
  background: #fff;
  margin-bottom: 15px;
}

.blockchain-wrp .card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.blockchain-wrp .card ul li {
  display: flex;
  align-items: center;
}

.blockchain-wrp .card ul li .property {
  color: var(--haifin-gray-Color);
  font-family: "GeneralSansMedium";
  font-size: 14px;
  font-weight: 500;
  line-height: 25px;
  width: 30%;
}

.blockchain-wrp .card ul li .value {
  color: #797979;
  font-family: "GeneralSans";
  font-size: 14px;
  font-weight: 400;
  line-height: 25px;
  width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blockchain-wrp .card ul li .value.highlighted {
  color: #2895d3;
}

.blockchain-wrp .card ul li .action {
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 10px;
  font-family: "GeneralSansMedium";
  margin: initial;
  margin-left: auto;
}

.blockchain-wrp .block-num {
  border-radius: 11px;
  background: #fff;
  backdrop-filter: blur(2px);
  color: #1f345b;
  font-family: "GeneralSansBold";
  font-size: 10px;
  font-weight: 700;
  line-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 36px;
  left: 0;
  right: 0;
  width: 52px;
  height: 18px;
  margin: 0 auto;
}

.errorDetailModal {
  list-style: none;
  padding: 0;
  margin: 0;
}

.errorDetailModal li {
  color: #b62319;
  font-family: "GeneralSansMedium";
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  border-bottom: 1px solid #d4d5da;
  padding-bottom: 6px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
}

.errorDetailModal li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}


.status-badge{
  color: #ffffff !important;
  font-weight: "bold";
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
  min-width: 80px;
  text-align: center;
}


.detail span.noErr,
span.noErr {
  color: var(--haifin-Primary-Color) !important;
  font-size: 14px;
  font-family: "GeneralSansSemiBold" !important;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  display: block;
}

.btn_loader {
  width: 25px;
  height: 25px;
  border: 5px solid #fff;
  border-bottom-color: #ff3d00;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation1 1s linear infinite;
}

@keyframes rotation1 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.bgDetail .activeWrp,
.bgDetail .closedWrp,
.bgDetail .blueWrp,
.bgDetail .reviewWrp,
.bgDetail .revisedWrp,
.bgDetail .approvedWrp,
.bgDetail .pendingWrp,
.bgDetail .rejectedWrp,
.bgDetail .draftedWrp {
  background: #e7e7e7;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 75px;
  width: 170px;
}

.bgDetail .activeWrp p,
.bgDetail .closedWrp p,
.bgDetail .blueWrp p,
.bgDetail .reviewWrp p,
.bgDetail .revisedWrp p,
.bgDetail .approvedWrp p,
.bgDetail .pendingWrp p,
.bgDetail .rejectedWrp p,
.bgDetail .draftedWrp p {
  color: #989898;
  text-align: center;
  font-size: 16px;
  font-family: "GeneralSansMedium";
  font-weight: 500;
  line-height: normal;
  margin: 0 0 0 4px;
}

.bgDetail .closedWrp,
.bgDetail .rejectedWrp {
  background: #ffe7e6;
}

.bgDetail .reviewWrp {
  background: #ddc9ff;
}

.bgDetail .reviewWrp p {
  color: #9575CD;
}

.bgDetail .revisedWrp {
  background: #a6f0f7;
}

.bgDetail .revisedWrp p {
  color: #0097A7;
}

.bgDetail .closedWrp p,
.bgDetail .rejectedWrp p {
  color: #b62319;
}

.bgDetail .pendingWrp {
  background: #fff0db;
}

.bgDetail .pendingWrp p {
  color: #f8a224;
}

.bgDetail .activeWrp,
.bgDetail .approvedWrp {
  background: #eefff8;
}

.bgDetail .activeWrp p,
.bgDetail .approvedWrp p {
  color: #00854b;
}

.bgDetail .blueWrp {
  background: #cff3ff;
}

.bgDetail .blueWrp p {
  color: #085a75;
}

.blockchain_gif {
  width: 35px !important;
  height: 35px !important;
}

/* .timelineIconPosition {
  width: 130px;
  margin: 0 auto;
} */
.timelineIconPosition p {
  font-size: 12px !important;
  margin: 0;
}

button.downloadZip {
  min-width: auto !important;
  height: 35px;
  padding: 10px !important;
}

button.downloadZipSmall {
  min-width: 5px !important;
  min-height: 5px !important;
  margin-bottom: 5px;
}

.claimTabs .ui-regulartabs .nav-tabs>li {
  margin: 0;
  width: 50%;
  text-align: center;
}

/* .claimTabs .ui-regulartabs .nav-tabs li > a {
  border-radius: 0;
}
.claimTabs .ui-regulartabs .nav-tabs li:first-child > a {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.claimTabs .ui-regulartabs .nav-tabs li:last-child > a {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
} */

.changepasswordWrp .cardWrp {
  padding: 25px;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0px 4px 21px 0px rgba(0, 0, 0, 0.05);
}

.changepasswordWrp .control-label {
  font-family: "GeneralSansMedium";
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
}

.changepasswordWrp #global-page-title {
  color: #071e3d;
  font-family: "GeneralSansSemiBold";
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.updatePasswordBtnWrp {
  border-top: 1px solid #e8e8e8;
  padding-top: 25px;
  margin-top: 25px;
}

.changepasswordWrp .input-icon svg {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
}

.page-header.navbar .top-menu .navbar-nav>li.dropdown-user .dropdown-menu {
  border-radius: 8px;
  background: #fff;
  box-shadow: 2px 4px 27.1px 0px rgba(0, 0, 0, 0.21);
  margin-top: 0px;
}

.page-header.navbar .top-menu .navbar-nav>li.dropdown-user .dropdown-menu>li>a {
  color: #000;
  font-family: "GeneralSans";
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
}

.page-header.navbar .top-menu .navbar-nav>li.dropdown .dropdown-menu:after,
.page-header.navbar .top-menu .navbar-nav>li.dropdown .dropdown-menu:before {
  display: none !important;
}

.page-header.navbar .top-menu .navbar-nav>li.dropdown-user .dropdown-toggle>img {
  margin-right: 0;
}

.disabled-country-selector,
.disabled-country-selector-label {
  background-color: rgb(250, 250, 250);
}

.claim-modal-error {
  color: red;
  font-size: 12;
  margin: 0;
}


.gtModal .portlet-body {
  height: 300px;
}

.gtModal .tcText {
  height: 250px;
}

.gtModal p {
  font-size: 16px;
}

.claimModal {
  width: 700px;
}

.form-error-bar {
  color: var(--haifin-Primary-Color);
  background-color: #fffac6;
  width: 100%;
  padding: 5px;
  border-radius: 5px;
  display: flex;
  align-items: center;
}

.bgAmend .col-md-4 {
  display: flex;
}

.bgAmend .input-block {
  flex: 1;
}

.textEditor.card .input-block {
  flex: revert;
}

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

.flex-3 {
  flex: 3;
}

.flex-4 {
  flex: 4;
}

.flex-5 {
  flex: 5;
}

.bgAmend .applicantDetails .col-md-4:nth-child(-n + 3) {
  margin: 0;
}

.bgAmend .obligorDetails .col-md-4:nth-child(-n + 3) {
  margin: 0;
}

.bgAmend .beneficiaryDetails .col-md-3:nth-child(-n + 4),
.bgAmend .bankGuaranteeDetails .col-md-3:nth-child(-n + 4) {
  margin: 0;
}

.multipleApplicants {
  height: 247.8px;
}

.multipleApplicants h3 span {
  color: var(--haifin-Primary-Color);
  font-family: "GeneralSans";
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  text-transform: none;
}

.applicantList-button button.btn-light {
  border: 1px dashed #c7c7c7 !important;
  background: #eff0f2;
  color: var(--haifin-gray-Color);
  font-family: "GeneralSans";
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  width: 100%;
  margin-bottom: 14px;
}

.applicantList-button span {
  margin: 0;
}

.multipleApplicantTitle {
  text-decoration: underline;
  cursor: pointer;
  color: var(--haifin-Primary-Color) !important;
  text-align: center;
  font-family: "GeneralSansMedium" !important;
  font-size: 14px;
  line-height: normal;
}

.multipleApplicantTitle svg {
  margin-right: 3px;
}

.cursor-pointer {
  cursor: pointer;
}

.applicantListWrp {
  height: 110px;
  overflow-y: scroll;
  padding-right: 5px;
}

.applicantList-bgEntry {
  width: 100%;
  border-radius: 4px;
  border: 1px solid #d4d5da;
  padding: 10px;
  height: 50px;
  margin-bottom: 10px;
}

.applicantList-bgEntry:last-child {
  margin-bottom: 0px;
}

.applicantList-bgEntry h5 {
  color: #000;
  font-family: "GeneralSansMedium";
  font-size: 14px;
  line-height: normal;
  margin: 0 0 3px;
}

.applicantList-bgEntry p {
  color: var(--haifin-gray-Color);
  font-family: "GeneralSans";
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  margin: 0;
}

.stack {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.uploadClickable {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: 178px;
  border-radius: 8px;
  border: 1px solid #d4d5da;
  background-color: #f9fafc;
  cursor: pointer;
}

.uploadClickable h3 {
  margin-bottom: 0px !important;
  margin-top: 10px !important;
  text-transform: none;
}

.document-type {
  color: #7f7f7f !important;
  font-size: 10px;
  font-weight: 400;
}

.doc-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.claim-radio label {
  margin-left: 15px !important;
  margin-bottom: 0px !important;
  color: var(--haifin-Primary-Color);
}

.claim-radio input[type="radio"]:checked::before {
  background: none !important;
  /* color: var(--haifin-Primary-Color) !important; */
}

.claim-radio input[type="radio"] {
  outline: var(--haifin-Primary-Color) !important;
  background-color: var(--haifin-Primary-Color) !important;
  color: var(--haifin-Primary-Color) !important;
  accent-color: var(--haifin-Primary-Color) !important;
}



.bene-radio {
  margin-right: 20px !important;
  margin-left: 20px !important;
}

.bene-radio label {
  margin-bottom: 0px !important;
  margin-left: 5px !important;
  color: var(--haifin-Primary-Color);
}

.bene-radio input[type="radio"]:checked::before {
  background: none !important;
  /* color: var(--haifin-Primary-Color) !important; */
}


.bene-radio input[type="radio"] {
  outline: var(--haifin-Primary-Color) !important;
  background-color: var(--haifin-Primary-Color) !important;
  color: var(--haifin-Primary-Color) !important;
  accent-color: var(--haifin-Primary-Color) !important;
}



.logoText .copy-image {
  width: 13.999px;
  height: 15.4px;
  margin-left: 10px;
}

.beneficiary-pending-ic {
  width: 15px !important;
  height: 15px !important;
}

.bankRefPending {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* width: 120px; */
  text-align: center;
  display: block;
}

.deleteBtnImageText {
  display: flex;
  align-items: center;
  /* justify-content: space-around; */
}

.deleteBtnImage {
  width: 13px;
  height: 16px;
  margin-left: 10px;
  margin-right: 5px;
}

.err-sticky {
  position: sticky;
  z-index: 100;
  top: 50px;
}

.sticky {
  position: sticky;
  z-index: 20;
  top: -20px;
}

.chartLegends {
  margin: 0 0 0 20px;
  padding: 0;
}

.chartLegends li {
  color: #444;
  font-family: "GeneralSansMedium";
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.chartLegends li:last-child {
  margin: 0;
}

.chartLegends li span {
  border-radius: 3px;
  /* background: var(--Maron, #4b0f1e); */
  width: 19px;
  height: 18px;
  margin-right: 9px;
  display: block;
}

.total-count h4 {
  color: #444;
  text-align: right;
  font-family: "GeneralSansSemiBold";
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
  margin: 0;
}

.total-count span {
  color: var(--Grey, #636363);
  text-align: right;
  font-family: "GeneralSansMedium";
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  display: block;
}



.x-axis .domain {
  display: none;
}

.x-axis .domain .tick line {
  display: none;
}

.x-axis .domain .tick text {
  color: #464646;
}

.y-axis-left .domain {
  display: none;
}

.y-axis-left .tick line {
  display: none;
  color: #464646;
}

.y-axis-right .tick line {
  display: none;
  color: #464646;
}

.y-axis-right .domain {
  display: none;
}

.x-axis .domain .tick line {
  display: none;
}

.x-axis .tick line {
  display: none;
}

.grid-line {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  stroke-dasharray: 5, 5;
  /* Set the dash pattern */
}

.form-error {
  color: #b62319;
  font-size: 10px;
  font-family: "GeneralSans";
  font-weight: 400;
  line-height: normal;
  margin: 0px !important;
  margin-top: 2px !important;
}



.tcTextPending {}

.circularProgressBar svg path,
.circularProgressBar {
  width: 30px;
  height: 30px;
}

/* No nudge: the number is centred by text-anchor / dominant-baseline (declared
   further down, because the library's own stylesheet never reaches the
   document in this build). The old translate was hand-tuned for the unstyled
   text-anchor: start default and threw the figure off on both axes. */
.circularProgressBar svg text {
  transform: none;
}

.nav-linknav-toggle:hover {
  z-index: 100 !important;
}


.nav-item:hover {
  z-index: 100 !important;
}

i.fa.fa-sort-up {
  /* position: absolute; */
}

i.fa.fa-sort-desc {
  /* position: absolute; */
}

span.time-documents {
  color: var(--haifin-Primary-Color) !important;
  font-size: 14px !important;
  font-family: "GeneralSansMedium" !important;
  line-height: normal;
  margin-right: 8px;
}

span.expiry-type {
  color: var(--haifin-Primary-Color) !important;
  font-size: 16px;
  font-family: "GeneralSansSemiBold";
  font-weight: 600;
  line-height: normal;
  margin: 0;
  display: block;
}

.expiry-message {
  margin-top: 3px;
  display: block;
  width: 197px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.expiry-message .tooltiptext {
  visibility: hidden;
  background-color: white;
  color: #fff;
  text-align: center;
  text-wrap: wrap;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  left: 65px;
  text-align: left;
  box-shadow: 0 5px 6px 3px #00000029;
}

.expiry-message:hover .tooltiptext {
  visibility: visible;
}

.pendingListing table.table.table-bordered.table-condensed.flip-content.gridTable.sdg_tbl th:nth-child(4) {
  width: 20%;
}

.pendingListing table.table.table-bordered.table-condensed.flip-content.gridTable.sdg_tbl th:nth-child(5) {
  width: 20%;
}

.processedListing table.table.table-bordered.table-condensed.flip-content.gridTable.sdg_tbl th:nth-child(4) {
  width: 20%;
}

.processedListing table.table.table-bordered.table-condensed.flip-content.gridTable.sdg_tbl th:nth-child(5) {
  width: 20%;
}

.BGlisting table.table.table-bordered.table-condensed.flip-content.gridTable.sdg_tbl th:nth-child(11) {}

.further-action-dropdown span {
  margin-left: 10px !important;
  color: black !important;
}

.further-action-dropdown img {
  height: 16px !important;
  width: 16px !important;
}

.country-item:hover,
.suggestive-dropdown-item:hover {
  background-color: #F4F4F4 !important;
  transition: 0.2s ease-in-out;
}

.country-item-focused,
.dropdown-item-focused {
  background-color: #F4F4F4 !important;
}

.currency-converter select {
  background: none !important;
}

.currency-converter .placeholder {
  background-color: #f6f6f6 !important;
}

.modal-popover .popover.bottom>.arrow {
  left: 95% !important;
}

.modal-popover .popover.bottom {
  width: 300px;
  left: 25% !important;
}

.modal-popover .popover {
  max-width: 340px;
  width: 340px;
}

.modal-popover .popover-content, .signature-modal {
  padding: 10px 0 !important;
}

.modal-popover ul, .signature-modal ul {
  padding: 0 !important;
  margin: 0;
  width: 100%;
  list-style: none;
}

.modal-popover li, .signature-modal li {
  border-bottom: 1px solid #dadada;
  font-size: 11px;
  display: flex;
  align-items: center;
  padding: 8px 15px;
}

.signature-modal li {
  font-size: 13px !important;
}

.modal-popover li strong, .signature-modal li strong {
  width: 40% !important;
  flex-shrink: 0;
}

.guarantee-modal .user-wrapper {
  border-radius: 6px;
  border: 1px solid #DADADA;
  background: #FDFDFD;
  height: 106px;
  padding: 0 5px;
  overflow-y: auto;
}

.guarantee-modal .sub-head {
  font-size: 14px !important;
  margin-bottom: 5px !important;
}

.guarantee-modal .user-wrapper ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.guarantee-modal .user-wrapper ul li {
  padding: 7px 10px; 
}

.guarantee-modal .user-wrapper ul li:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.guarantee-modal .col-md-6 {
  width: 50%;
}



.multibg-table table tbody tr td:nth-child(10){
      display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.customer-logo {
    background: var(--Customer-logo);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 40px;
}

.platform-logo {
    background: var(--Main-logo);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 40px;
    margin-bottom: 25px;
}

.ocrModal { background: #fff; border-radius: 10px; padding: 24px 28px 28px; font-family: inherit; box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
.ocrModal__header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid #EAEAEA; }
.ocrModal__title { margin: 0; font-size: 18px; font-weight: 700; color: #1A1A1A; }
.ocrModal__close { border: none; background: transparent; color: #6B6B6B; cursor: pointer; display: flex; padding: 2px; border-radius: 4px; }
.ocrModal__close:hover { background: #F3F3F3; color: #1A1A1A; }

.ocrModal__stepper { display: flex; align-items: center; padding: 20px 4px 24px; }
.ocrModal__stepGroup { display: flex; align-items: center; flex: 1; }
.ocrModal__step { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ocrModal__stepCircle { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #9B9B9B; border: 1.5px solid #D4D5DA; background: #fff; }
.ocrModal__stepCircle.is-active { background: #8A1538; border-color: #8A1538; color: #fff; }
.ocrModal__stepCircle.is-done { background: #1E8E3E; border-color: #1E8E3E; color: #1E8E3E; }
.ocrModal__stepLabel { font-size: 13px; color: #9B9B9B; white-space: nowrap; }
.ocrModal__stepLabel.is-active { color: #1A1A1A; }
.ocrModal__stepLine { flex: 1; height: 1px; background: #D4D5DA; margin: 0 10px; min-width: 16px; }

.ocrModal__body { min-height: 220px; }
.ocrModal__helpText { font-size: 14px; color: #5B5B5B; margin: 0 0 14px; }

.ocrModal__dropzone { border: 1.5px dashed #D4D5DA; border-radius: 8px; background: #FAFAFC; padding: 40px 20px; display: flex; align-items: center; justify-content: center; transition: border-color .15s ease, background .15s ease; }
.ocrModal__dropzone.is-active { border-color: #8A1538; background: #FBF1F3; }
.ocrModal__dropzoneInner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ocrModal__dropzoneText { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: #1A1A1A; }
.ocrModal__or { font-size: 12px; color: #9B9B9B; margin: 6px 0; }
.ocrModal__chooseBtn { background: #8A1538; color: #fff; border: none; border-radius: 6px; padding: 9px 22px; font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 4px; }
.ocrModal__chooseBtn:hover { background: #61162A; }
.ocrModal__secondaryBtn { background: #fff; color: #1A1A1A; border: 1px solid #D4D5DA; border-radius: 6px; padding: 9px 22px; font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 4px; }
.ocrModal__caption { font-size: 12px; color: #9B9B9B; text-align: center; margin: 12px 0 0; }

.ocrModal__spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #EAD3D9; border-top-color: #8A1538; animation: ocrModalSpin .8s linear infinite; }
@keyframes ocrModalSpin { to { transform: rotate(360deg); } }

.ocrModal__error { display: flex; align-items: center; gap: 6px; color: #C0392B; font-size: 12.5px; margin-top: 12px; background: #FDEDEC; border-radius: 6px; padding: 8px 10px; }

.ocrModal__processing { display: flex; flex-direction: column; align-items: center; padding-top: 8px; }
.ocrModal__processIcon { width: 56px; height: 56px; border-radius: 50%; background: #FBF1F3; color: #8A1538; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px #FDF6F7; animation: ocrModalPulse 1.6s ease-in-out infinite; }
.ocrModal__processIcon.is-error { background: #FDEDEC; color: #C0392B; box-shadow: 0 0 0 6px #FDEDEC; animation: none; }
@keyframes ocrModalPulse { 0%, 100% { box-shadow: 0 0 0 6px #FDF6F7; } 50% { box-shadow: 0 0 0 10px #FDF6F7; } }
.ocrModal__processingTitle { font-size: 15px; font-weight: 700; color: #1A1A1A; margin: 14px 0 18px; }

.ocrModal__stageList { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.ocrModal__stageRow { display: flex; align-items: center; gap: 10px; background: #F7F7F9; border: 1px solid #EFEFF2; border-radius: 6px; padding: 10px 14px; }
.ocrModal__stageDot { width: 10px; height: 10px; border-radius: 50%; background: #D4D5DA; flex-shrink: 0; }
.ocrModal__stageDot.is-done { background: #1E8E3E; }
.ocrModal__stageDot.is-running { background: #8A1538; animation: ocrModalDotPulse 1s ease-in-out infinite; }
@keyframes ocrModalDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.ocrModal__stageName { flex: 1; font-size: 13.5px; color: #1A1A1A; }
.ocrModal__stageStatus { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 12px; }
.ocrModal__stageStatus.is-done { background: #E7F6EC; color: #1E8E3E; }
.ocrModal__stageStatus.is-running { background: #FBF1F3; color: #8A1538; }

.ocrModal__processActions { display: flex; gap: 10px; margin-top: 18px; }

.ocrReview { background: #fff; border-radius: 10px; border: 1px solid #EAEAEA; padding: 20px 24px 24px; font-family: inherit; }
.ocrReview__header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid #EAEAEA; margin-bottom: 16px; }
.ocrReview__title { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #1A1A1A; }
.ocrReview__headerActions { display: flex; align-items: center; gap: 10px; }
.ocrReview__restart { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #D4D5DA; color: #4B4B4B; border-radius: 6px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ocrReview__restart:hover { background: #F5F5F7; }
.ocrReview__chevron { border: 1px solid #D4D5DA; background: #8A1538; border-radius: 6px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; }
.ocrReview__chevron:hover { background: #C0392B; }




.logoText {
  display: flex;
  flex-direction: column;   /* label on top, icon below — was row before */
  align-items: flex-start;
  gap: 2px;
}
.logoText .issuer-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.logoText .label-en {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
}
.logoText .label-ar {
  font-size: 13px;
   font-weight: 600;
  color: #6b7280;
  direction: rtl;
}
.logoText .issuer-icon {
  width: 45px;
  height: 20px;
  border-radius: 50%;
  object-fit: contain;
}



.sectionHeader {
  display: flex;
  flex-wrap: nowrap;      /* stop the Arabic label from dropping to line 2 */
  align-items: center;
  gap: 15px;
  margin: 0 0 25px;
}
.sectionHeader h3 {
  margin: 0 !important;
  white-space: nowrap;
  flex-shrink: 0;         /* h3 was stretching full width and pushing siblings down */
}
.sectionHeader .label-ar {
  font-size: 14px;
  color: #6b7280;         /* force gray — it was probably inheriting an <a>/link blue */
  direction: rtl;
  white-space: nowrap;
}
.sectionHeader .info-icon {
  color: #6b7280;
  cursor: pointer;
  flex-shrink: 0;
}

.guaranteeTextReadOnly {
  padding: 15px 0 0;
}
/* .guaranteeTextReadOnly .col-md-6:first-child {
  border-right: 1px solid #e5e7eb;
} */
.guaranteeTextReadOnlyHeader {
  font-size: 15px;
  font-weight: 600;
  color: #18355e;
  /* margin: 0 0 12px; */
  padding: 0 20px;
}
.guaranteeTextReadOnlyBody {
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
  padding: 20px;
  max-height: 320px;
  overflow-y: auto;
}
.guaranteeTextReadOnlyBody p {
  margin: 0 0 12px;
}
.guaranteeTextReadOnlyBody-ar {
  text-align: right;
}

.guaranteeTextEditable {
  padding: 15px 0 0;
}
.guaranteeTextEditable .col-md-6 {
  padding-left: 15px;
  padding-right: 15px;
}

.presentationSummaryRow {
  display: flex;
  gap: 8px;
  padding-bottom: 12px;
  /* border-bottom: 1px solid #e5e7eb; */
  font-size: 14px;
}
.presentationSummaryRow:last-child {
  border-bottom: none;
}
.detailModalOptimized table td,
.detailModalOptimized table th {
  padding: 12px 16px !important;
  white-space: nowrap;
}
.detailModalOptimized .form-body {
  margin-bottom: 10px;
}

.presentationSummaryLabel {
  font-weight: 600;
  color: #18355e;
  white-space: nowrap;
}

.subSection {
  margin-top: 30px;
}
.subSectionHeader {
  font-size: 15px;
  font-weight: 600;
  color: #18355e;
  margin: 0 0 20px;
}

.assure-tooltip-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.field-info-icon {
  margin-left: 6px;
  color: #6b7280;
  cursor: pointer;
  flex-shrink: 0;
}
.assure-tooltip-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #18355e;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  padding: 8px 10px;
  border-radius: 6px;
  white-space: normal;
  width: max-content;
  max-width: 240px;
  z-index: 50;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  text-align: left;
}
.assure-tooltip-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #18355e transparent transparent transparent;
}
.assure-tooltip-bubble.assure-tooltip-bottom {
  bottom: auto;
  top: calc(100% + 8px);
}
.assure-tooltip-bubble.assure-tooltip-bottom::after {
  top: auto;
  bottom: 100%;
  border-color: transparent transparent #18355e transparent;
}


.logo-spec-popover {
  min-width: 220px;
  max-width: 280px;
  font-size: 13px;
}
.logo-spec-title {
  font-weight: 600;
  font-size: 14px;
  color: #111827;
  margin-bottom: 6px;
}
.logo-spec-divider {
  height: 1px;
  background: #e5e7eb;
  margin-bottom: 8px;
}
.logo-spec-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}
.logo-spec-label {
  color: #6b7280;
}
.logo-spec-value {
  color: #111827;
  font-weight: 500;
  text-align: right;
}

/* --- BG listing filter: drawer ------------------------------
   Presented as a right-hand panel at every width instead of an absolutely
   positioned dropdown. The form itself is unchanged; the rules below neutralise
   the .custom-dropdown .dropdown-toggle positioning it carries so it fills the
   drawer rather than floating inside it. */

.bgFilterScrim {
  background: rgba(16, 18, 27, 0.35);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100060;
}

.bgFilterDrawer {
  background: #fff;
  bottom: 0;
  box-shadow: -8px 0 28px rgba(16, 18, 27, 0.2);
  display: flex;
  flex-direction: column;
  position: fixed;
  right: 0;
  top: 0;
  /* Full height of the right-hand side, matching the other drawers in the app. */
  width: 440px;
  max-width: 100vw;
  z-index: 100061;
  /* Slides in from its own edge only. A transform-based entrance moves nothing
     else on the page — the panel is fixed and out of flow, so opening it
     cannot shift the toolbar or list behind it. */
  animation: bgFilterIn 220ms cubic-bezier(0.22, 0.68, 0.36, 1);
  will-change: transform;
}

/* Fills the screen where 440px would not fit. */
@media (max-width: 575px) {
  .bgFilterDrawer {
    width: 100vw;
  }
}

@keyframes bgFilterIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.bgFilterDrawerHead {
  align-items: center;
  border-bottom: 1px solid #d4d5da;
  color: #2c2c2c;
  display: flex;
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 600;
  justify-content: space-between;
  padding: 14px 18px;
}

.bgFilterClose {
  background: none;
  border: 0;
  color: #6f7275;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
}

/* The form scrolls inside the drawer. */
.bgFilterDrawer .custom-dropdown {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  position: static !important;
}

/* Undo the dropdown's floating box: inside the drawer it is just the body. */
.bgFilterDrawer .custom-dropdown .dropdown-toggle {
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 16px 18px !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  width: 100% !important;
}

/* The little arrow that pointed at the filter button has nothing to point at. */
.bgFilterDrawer .custom-dropdown .dropdown-toggle::before {
  display: none !important;
}

/* Actions sit together at the right of the drawer. The form markup has Search
   first and Reset second with justify-content: space-between; `order` puts the
   secondary action before the primary one once they are grouped, without
   touching BGListingFilterForm itself. */
.bgFilterDrawer .custom-dropdown .btns {
  gap: 8px;
  justify-content: flex-end !important;
}

.bgFilterDrawer .custom-dropdown .btns .btn-primary {
  order: 2;
}

.bgFilterDrawer .custom-dropdown .btns .btn-light {
  order: 1;
}

/* --- Chart tiles: title, totals ------------------------------
   .chart-title carries `margin: 0 auto !important`, and as a flex item inside
   .chart-portlet-header those auto margins absorb the free space and centre
   it. Overriding the margin is what left-aligns it; margin-right: auto keeps
   the switch and export icon pushed to the right. */
.chart-portlet-header .chart-title {
  margin: 0 !important;
  margin-right: auto !important;
  text-align: left;
}

/* Chart above, totals beneath — the plot gets the full width of the tile.
   The height is fixed to the plot's own, so switching to the table view does
   not resize the tile and shove the rest of the page around; a long table
   scrolls inside this box instead. */
.chart-portlet .chart-body {
  display: block;
  height: 220px;
  overflow: auto;
}

.chart-portlet .chart-body > svg {
  display: block;
  width: 100%;
}

/* Total Count and Total Amount side by side rather than stacked. */
.chart-portlet .chart-totals {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid #ececed;
}

.chart-portlet .chart-totals .total-count {
  margin-bottom: 0;
}

/* Header band: title on a soft tint, with the count/amount switch and the CSV
   export sitting to its right. */
.chart-portlet .chart-portlet-header {
  background: #f6f2f3;
  border-radius: 8px;
  gap: 12px;
  padding: 9px 12px;
}

.chart-portlet .chart-portlet-header .chart-title {
  font-size: 15px;
}

.chart-portlet .chart-view-btn,
.chart-portlet .chart-csv-btn {
  align-items: center;
  background: #fff;
  border: 1px solid #e0d7da;
  border-radius: 6px;
  color: var(--haifin-Primary-Gradient, #8a1538);
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  height: 30px;
  justify-content: center;
  padding: 0;
  width: 32px;
}

.chart-portlet .chart-view-btn:hover,
.chart-portlet .chart-csv-btn:hover {
  background: var(--haifin-Primary-Gradient, #8a1538);
  border-color: var(--haifin-Primary-Gradient, #8a1538);
  color: #fff;
}

/* The switch group keeps its own spacing; the big mr-5 pushed the export icon
   away from the edge of the band. */
.chart-portlet .chart-portlet-header .react-switch {
  margin-right: 0 !important;
}


.chart-portlet .chart-body > svg,
.chart-portlet .chart-plot {
  margin: 0;
}

/* Equal-height tiles on desktop. The row carries d-flex align-items-center,
   which sizes each column to its own content; stretching makes both tiles as
   tall as the taller one without hard-coding a height. */
@media (min-width: 992px) {
  .bgGraphSection {
    align-items: stretch !important;
  }

  .bgGraphSection > [class*="col-"] {
    display: flex;
  }

  .bgGraphSection .chart-portlet {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  /* The body takes whatever height the header and the totals line leave. */
  .bgGraphSection .chart-portlet .chart-body {
    flex: 1 1 auto;
  }
}

/* The plot owns the tile: it centres in the space and stretches to fill the
   height left over by the header and the one-line totals. */
.chart-portlet .chart-body > .chart-plot {
  height: 100%;
  justify-content: center;
  width: 100%;
}

/* Totals: one small line beneath the plot rather than a stacked block, so the
   graph keeps the height. */
.chart-portlet .chart-totals-inline {
  /* A rule separating the figures from the plot above them. */
  border-top: 1px solid #ebecf0;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 4px 22px;
  justify-content: flex-end;
  margin-top: 6px;
  padding-top: 7px;
}

.chart-portlet .chart-totals-inline .chart-total {
  color: #8a8a8a;
  font-size: 13px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.chart-portlet .chart-totals-inline .chart-total b {
  font-size: 14px;
  font-weight: 700;
  margin-left: 6px;
}

/* Whichever figure the tile's toggle is currently plotting is the one that
   carries the theme colour. */
.chart-portlet .chart-totals-inline .chart-total-on,
.chart-portlet .chart-totals-inline .chart-total-on b {
  color: var(--haifin-Primary-Gradient, #8a1538);
}

/* Very little frame — the tile is there to hold the plot. */
.chart-portlet {
  padding: 8px !important;
}

.chart-portlet .chart-portlet-header {
  margin-bottom: 6px !important;
  padding: 7px 10px;
}

/* ---- chart tile: table view ----
   The same figures the plot shows, in place of it, so the tile keeps its size
   and the body scrolls if the rows overflow. */
.chart-portlet .chart-table-wrap {
  flex: 1 1 auto;
  max-height: 100%;
  min-height: 0;
  overflow-y: auto;
  width: 100%;
}

.chart-portlet .chart-table {
  border-collapse: collapse;
  width: 100%;
}

.chart-portlet .chart-table th,
.chart-portlet .chart-table td {
  border-bottom: 1px solid #f0f1f4;
  padding: 6px 10px;
  text-align: left;
  vertical-align: middle;
}

/* The header sticks so the columns stay named while the rows scroll. */
.chart-portlet .chart-table thead th {
  background: #fff;
  color: #7c7c7c;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  position: sticky;
  text-transform: uppercase;
  top: 0;
  z-index: 1;
}

.chart-portlet .chart-table tbody td {
  color: #2c2c2c;
  font-size: 13px;
}

/* Figures line up on the right and share a width per digit. */
.chart-portlet .chart-table .num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Ties each row back to its slice. */
.chart-portlet .chart-table-swatch {
  border-radius: 3px;
  display: inline-block;
  height: 10px;
  margin-right: 8px;
  vertical-align: middle;
  width: 10px;
}

.chart-portlet .chart-table-empty {
  color: #9a9a9a;
  padding: 18px 10px !important;
  text-align: center !important;
}

/* The two header buttons read as one control group — close together, but not
   touching. The header lays its children out with a 12px gap, so this pulls
   back against it rather than adding to it. */
.chart-portlet .chart-view-btn {
  margin-right: -5px;
}

/* ---- guarantee listing grid ----
   Larger type throughout: the cells were set at 75% of the inherited size,
   which read as fine print next to the rest of the screen. */
.processedListing .sdg_tbl tbody td,
.pendingListing .sdg_tbl tbody td {
  font-size: 14px !important;
  padding: 8px 7px !important;
}

.processedListing .sdg_tbl thead tr th,
.pendingListing .sdg_tbl thead tr th {
  font-size: 13px !important;
}

/* Bank: the logo and the code were wrapping onto two lines in a column that
   was never given room for both. */
.processedListing .sdg_tbl tbody td:nth-child(3),
.processedListing .sdg_tbl thead tr th:nth-child(3) {
  min-width: 168px;
  white-space: nowrap;
}

.bankCodeCell {
  align-items: center;
  display: flex;
  gap: 7px;
  justify-content: center;
  white-space: nowrap;
}

/* Guarantee Ref No and Applicant were absorbing the free width and squeezing
   everything to their right, so they are capped and ellipsised — the full
   value stays available on the cell's title. */
.processedListing .sdg_tbl tbody td:nth-child(4),
.processedListing .sdg_tbl tbody td:nth-child(5),
.processedListing .sdg_tbl thead tr th:nth-child(4),
.processedListing .sdg_tbl thead tr th:nth-child(5) {
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 112px;
}

/* Guarantee Ref No is narrower still than Applicant — the value ellipsises and
   the full ref stays on the cell's title. */
.processedListing .sdg_tbl tbody td:nth-child(4),
.processedListing .sdg_tbl thead tr th:nth-child(4) {
  max-width: 86px;
  width: 86px;
}

/* The pre-existing width hints on these two columns were what kept them wide;
   they are overridden above but named here so the cap is not fighting them. */
.processedListing .sdg_tbl tbody td:nth-child(5) {
  width: 112px;
}

/* The table scrolls within the height the plot already occupies. */
.chart-portlet .chart-table-wrap {
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
}

/* react-circular-progressbar's own stylesheet is imported in JS, but this
   build has css-loader without style-loader, so it never reaches the document
   and the <text> falls back to text-anchor: start — which pushed the number
   right of the dial's centre. */
.CircularProgressbar .CircularProgressbar-text {
  dominant-baseline: middle;
  text-anchor: middle;
}

/* Guarantee Ref No: the value sits in a span, and a ref has no spaces to break
   on, so the cell could not shrink below it however narrow the column was set.
   Ellipsising the span itself is what actually frees the width. */
.processedListing .sdg_tbl tbody td:nth-child(4) .bankRefPending {
  display: inline-block;
  max-width: 78px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

/* Amount is a figure — it reads wrong broken across two lines. */
.processedListing .sdg_tbl tbody td:nth-child(6),
.processedListing .sdg_tbl thead tr th:nth-child(6) {
  white-space: nowrap;
}

/* Dates, types and the expiry pill on the right get whatever the two capped
   columns give back, and keep their values on one line. */
.processedListing .sdg_tbl tbody td:nth-child(n + 7),
.processedListing .sdg_tbl thead tr th:nth-child(n + 7) {
  white-space: nowrap;
}

/* Guarantee Ref No and Applicant read as text, not figures, so they align left
   in both the header and the cells — the grid centres everything by default. */
.processedListing .sdg_tbl thead tr th:nth-child(4),
.processedListing .sdg_tbl thead tr th:nth-child(5),
.processedListing .sdg_tbl tbody tr td:nth-child(4),
.processedListing .sdg_tbl tbody tr td:nth-child(5) {
  text-align: left;
}

/* The header cell lays its label and sort arrow out as a row, so the box needs
   telling too, not just the text. */
.processedListing .sdg_tbl thead tr th:nth-child(4) > *,
.processedListing .sdg_tbl thead tr th:nth-child(5) > * {
  justify-content: flex-start;
}

/* Tab label with its glyph. Desktop keeps them side by side on one line; the
   phone stacks them inside the square boxes (mobile.css). */
.ui-regulartabs .nav-tabs > li > a .tabLabel {
  align-items: center;
  display: inline-flex;
  gap: 7px;
}

.ui-regulartabs .nav-tabs > li > a .tabIcon {
  flex: 0 0 auto;
}

/* Action modals: a rule closes the form off, with the buttons beneath it on
   one line, right-aligned to the same edge the fields end at. */
.ReactModal__Content .btns {
  align-items: center;
  border-top: 1px solid #ececef;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 14px;
}

/* The heading glyph is for the phone drawer only — on desktop these modals
   already float the same icon as a circular badge above the panel, and both at
   once reads as a duplicate. */
.portletTitleIcon {
  display: none;
}

/* The record actions render in two slots on the guarantee detail screen — the
   tabs row and the first detail tile — and mobile.css swaps which one shows.
   Desktop keeps the original position. */
.bgDetail .bgRecordActionsInTile {
  display: none;
}

.bgDetail .bgRecordActionsBesideTabs .bgRecordActions {
  align-items: center;
  display: flex;
  gap: 8px;
}

/* A mark shown before a field's value — the country flag on the detail
   screen's applicant, obligor and beneficiary sections. */
img.fieldIcon {
  border: 1px solid #eceef1;
  border-radius: 2px;
  height: 12px;
  margin-right: 6px;
  object-fit: cover;
  vertical-align: baseline;
  width: 18px;
}

/* Emoji flag: no border or sizing, it is a glyph on the text line. */
.fieldIconGlyph {
  font-size: 14px;
  line-height: 1;
  margin-right: 6px;
}

/* Install-to-home-screen button on the login screen. Only rendered while the
   browser has an install prompt to offer. */
/* Sits under the login form beside the "Powered by" lockup, so it reads as
   part of the page furniture rather than a call to action competing with the
   login button itself. */
.loginFootRow {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  width: 100%;
}

.loginFootRow .poweredBy {
  flex: 0 1 auto;
  min-width: 0;
}

.pwaInstallBtn {
  align-items: center;
  background: #fff;
  border: 1px solid #dcdde1;
  border-radius: 9px;
  color: var(--haifin-Primary-Gradient, #8a1538);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  transition: background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.pwaInstallBtn:hover,
.pwaInstallBtn:focus,
.pwaInstallBtn:active {
  background: #f7f1f3;
  border-color: #e2ccd4;
  color: var(--haifin-Primary-Gradient, #8a1538);
}

/* Desktop tab strip stays on one line. The glyphs added beside each label made
   the row wider, and Bootstrap's floated list items wrapped once it no longer
   fitted beside the action buttons. Laid out as a non-wrapping flex row, the
   strip scrolls sideways in the rare case it still cannot fit. */
@media (min-width: 992px) {
  .ui-regulartabs ul.nav.nav-tabs {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .ui-regulartabs .nav-tabs > li {
    flex: 0 0 auto;
    float: none;
  }

  .ui-regulartabs .nav-tabs li > a,
  .ui-regulartabs .nav-tabs > li > a .tabLabel {
    white-space: nowrap;
  }

  /* The tabs and the action buttons share a row; neither may force the other
     to wrap. */
  .bgDetail > .d-flex > .ui-regulartabs,
  .bgDetail > .d-flex > div:first-child {
    min-width: 0;
  }

  .bgDetail .bgRecordActionsBesideTabs {
    flex: 0 0 auto;
  }
}

/* Changed-field note. The icon keeps its tooltip on desktop; clicking it opens
   the two values, which is the only way to see them on a touch screen. */
.modifiedNoteWrap {
  display: inline-block;
  margin-left: 8px;
  position: relative;
  vertical-align: middle;
}

.modifiedNoteBtn {
  color: #18355e;
  cursor: pointer;
  font-size: 16px;
}

.modifiedNote {
  background: #fff;
  border: 1px solid #e6e7ea;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(16, 18, 27, 0.14);
  display: block;
  left: 0;
  margin-top: 6px;
  min-width: 190px;
  padding: 8px 10px;
  position: absolute;
  top: 100%;
  z-index: 20;
}

.modifiedNoteRow {
  display: block;
}

.modifiedNoteRow + .modifiedNoteRow {
  border-top: 1px solid #f1f2f5;
  margin-top: 6px;
  padding-top: 6px;
}

.modifiedNote em {
  color: #8a8a8a;
  display: block;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.modifiedNote b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* The old value is struck through; the new one carries the theme colour. */
.modifiedNote .wasValue {
  color: #8a8a8a;
  text-decoration: line-through;
}

.modifiedNote .nowValue {
  color: var(--haifin-Primary-Gradient, #8a1538);
}

/* The sheet's furniture is for the phone layout only — on desktop this is a
   small panel anchored under the icon. */
.modifiedNoteGrip,
.modifiedNoteHead,
.modifiedNoteField,
.modifiedNoteScrim {
  display: none;
}

/* Desktop keeps the marker beside the value it describes; the label-side copy
   is a phone affordance. */
.modifiedNoteWrap.onLabel {
  display: none;
}

/* Tile heading: title on the left, whatever follows pinned to the right. Same
   behaviour the theme's d-flex + justify-content-between gave it, but under a
   name nothing else restyles. */
.tileHead {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.tileHead > h3 {
  flex: 1 1 0%;
  min-width: 0;
}

.tileHead > .bgRecordActionsSlot {
  flex: 0 0 auto;
  margin-left: 12px;
}

/* With nothing beside it — the app is already installed, or the browser has no
   install prompt to offer — the lockup centres as it did before. */
.loginFootRow.isAlone {
  justify-content: center;
}

.loginFootRow.isAlone .poweredBy {
  justify-content: center;
}

/* The figures for a bar the reader tapped. Shown on every width — a click
   works with a mouse too, and the hover tooltip stays for those who use it. */
.chartPick {
  background: #fbf1f4;
  border: 1px solid #f0dde4;
  border-radius: 9px;
  margin-bottom: 8px;
  padding: 8px 10px;
}

.chartPickHead {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.chartPickHead span {
  color: #1c1c1c;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chartPickHead button {
  background: transparent;
  border: 0;
  color: #8a8a8a;
  font-size: 19px;
  line-height: 1;
  padding: 0 2px;
}

.chartPickBody {
  display: flex;
  gap: 22px;
  margin-top: 4px;
}

.chartPickBody em {
  color: #8a8a8a;
  display: block;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.chartPickBody b {
  color: var(--haifin-Primary-Gradient, #8a1538);
  display: block;
  font-size: 14px;
  font-weight: 700;
}

/* Queue tile under the menu: a ring with the count inside it, sitting between
   the last menu item and the copyright line. Square rather than a menu-shaped
   bar, so it reads as a figure and not another destination. */
.sidebarQueue {
  align-items: center;
  background: #fbf1f4;
  border: 1px solid #f0dde4;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 16px 12px;
  padding: 16px 12px 14px;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.sidebarQueue:hover,
.sidebarQueue:focus,
.sidebarQueue:active {
  background: #f6e6ec;
  border-color: #e2ccd4;
}

/* The dial holds the ring and the number on top of one another. */
.sidebarQueueDial {
  display: block;
  height: 86px;
  position: relative;
  width: 86px;
}

.sidebarQueueDial svg {
  display: block;
  height: 100%;
  width: 100%;
  /* Starts the arc at twelve o'clock rather than three. */
  transform: rotate(-90deg);
}

.sidebarQueueTrack {
  fill: none;
  stroke: #f0dde4;
  stroke-width: 7;
}

.sidebarQueueArc {
  fill: none;
  stroke: var(--haifin-Primary-Gradient, #8a1538);
  stroke-linecap: round;
  stroke-width: 7;
}

/* The count sits in the hole of the ring. */
.sidebarQueueDial b {
  align-items: center;
  color: var(--haifin-Primary-Gradient, #8a1538);
  display: flex;
  font-size: 30px;
  font-weight: 700;
  inset: 0;
  justify-content: center;
  letter-spacing: -0.02em;
  line-height: 1;
  position: absolute;
}

.sidebarQueue em {
  color: #6a6a6a;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.3;
}

/* The copyright line is pinned to the bottom of the sidebar with position:
   absolute, so anything in normal flow renders straight over it. The menu
   container reserves that strip, which lets the queue tile end above the line
   rather than on top of it. */
.side-menu-container {
  padding-bottom: 44px;
  position: relative;
}

/* The signed-in header inside the organisation menu. Only meaningful on the
   phone sheet, where the menu stands alone; on desktop the same details are
   already on the bar the dropdown hangs from. */
.hdrOrgWho {
  display: none;
}

/* The queue tile needs the menu's full width — a donut cannot be read in the
   collapsed icon rail, so it stands down there, as the copyright already does. */
.page-sidebar-closed .side-menu-container .sidebarQueue {
  display: none;
}

/* Documents read as their own section on desktop too. They sit at the foot of
   the detail card, where the sections above them are separated only by their
   headings — so the block was the one part with no surface of its own. Given
   the same white card the header and the detail panels use, it matches the
   rest of the screen. */
@media (min-width: 992px) {
  /* Now a sibling of the detail card, so it needs only the same surface and a
     clear gap above it — no margin tricks to escape a parent's padding. */
  .bgDetail .bgDocsBlock {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 11px 0 rgba(0, 0, 0, 0.06);
    margin: 25px 0 25px !important;
    padding: 25px !important;
    width: 100%;
  }

  .bgDetail .bgDocsBlock h3 {
    margin-bottom: 14px;
    margin-top: 0;
  }
}

/* The tabs row holds the tab strip and the record's buttons. It carries an
   inline justify-content: space-between, but with the strip free to grow the
   two ended up adjacent instead of at opposite ends — the strip takes the free
   space now and the buttons keep the right edge. */
@media (min-width: 992px) {
  .bgDetail > .d-flex {
    align-items: center;
  }

  .bgDetail > .d-flex > .ui-regulartabs,
  .bgDetail > .d-flex > div:first-child {
    flex: 1 1 auto;
  }

  .bgDetail .bgRecordActionsBesideTabs {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .bgDetail .bgRecordActionsBesideTabs .bgRecordActions {
    justify-content: flex-end;
  }
}

/* The tile's ring eases in with the count, on every width — the animation is
   in the component, not a media query. */
.sidebarQueueArc {
  transition: stroke-dasharray 0.12s linear;
}

.sidebarQueue {
  animation: sidebarQueueIn 320ms ease-out;
}

@keyframes sidebarQueueIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The documents card is still a Bootstrap column, so it carries the grid's
   15px side padding and sits inside a .row's negative margins — which is what
   was keeping it narrower than the card above. Neutralised here so it spans
   the container like the detail card does. */
@media (min-width: 992px) {
  .bgDetail .bgDocsBlock {
    float: none;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100%;
    width: 100% !important;
  }
}