div[data-theme='securitypage'] {
  --headerHeight: 54px;
  --pageleftnavwidth: 0px;
}

div[data-theme='login'] {
  --pageleftnavwidth: 500px;
  --headerHeight: 54px;
}

div[data-theme='footer-large'] {
  --footerheight: 200px;
}

div[data-theme='footer-small'] {
  --footerheight: 90px;
}

div[data-theme='shadesofgray'] {
  --sitetextcolor: #212121;
  --sitebackgroundcolor: #ffffff;
  --headerbg: #FFFFFF;
  --headertext: #212121;
  --employeenavbg: #ffffff;
  /* Menu  */
  --menutopborderhover: var(--primary);
  --menubg: #E0E0E0;
  --menuhoverbg: #CBCBCB;
  --menutext: #212121;
  --descriptiontext: #007585;
  /* Dropdown Popup  */
  --dropdownpopupbg: #F5F5F5;
  --dropdownpopuphoverbg: #E0E0E0;
  --dropdownpopuptext: #212121;
  /* Page  */
  --pagebodybg: #FFFFFF;
  --pageleftnav: #EFEFEF;
  --pagedesctextcolor: #212121;
  --pagebodytextcolor: #212121;
  --pageSubTitletext: #007585;
  /* Button background */
  --primarybuttonbg: var(--primary);
  --roundbuttonbg: #F8F8F8;
  --buttoncirclebg: var(--primary);
  /* PDF Header Border */
  --pdfcardtopborder: var(--primary);
  /* Popup Modal  */
  --popupmodalbg: #F5F5F5;
  --popupmodaltext: #212121;
  --processpanelbg: #F5F5F5;
  --modalBorderTopColor: #000000;
}


:root {
  /* Font   */
  --primary: #00874E;
  --fontfamily: Helvetica Now Text, sans-serif !important;
  --sitetextcolor: #212121;
  --sitebackgroundcolor: #ffffff;
  --headerbg: #F5F5F5;
  --headertext: #212121;
  --headerutilityheight: 44px;
  --headermenuheight: 54px;
  --employeenavbg: #ffffff;
  /* Menu  */
  --menutopborderhover: var(--primary);
  --menubg: #E0E0E0;
  --menuhoverbg: #CBCBCB;
  --menutext: #212121;
  --descriptiontext: #007585;
  /* Dropdown Popup  */
  --dropdownpopupbg: #F5F5F5;
  --dropdownpopuphoverbg: #E0E0E0;
  --dropdownpopuptext: #212121;
  /* Page  */
  --pagebodybg: #FAFAFA;
  --pageleftnav: #EFEFEF;
  --pageleftnavwidth: 0px;
  --headerHeight: 55px;
  --pageTitletext: black;
  --pageSubTitletext: #007585;
  /* Button background */
  --primarybuttonbg: var(--primary);
  --roundbuttonbg: #F8F8F8;
  --buttoncirclebg: var(--primary);
  /* PDF Header Border */
  --pdfcardtopborder: var(--primary);
  /* Popup Modal  */
  --popupmodalbg: #FAFAFA;
  --popupmodaltext: #212121;
  /*tooltip icon*/
  --tooltipicon: url(../Images/icons/24px/tooltip.png);
  /*tooltip dark theme*/
  --tooltipdarkthemebg: #393939;
  --tooltipdarkthemetext: #FFFFFF;
  /*tooltip light theme*/
  --tooltiplightthemebg: #F6F7F8;
  --tooltiplightthemetext: #212121;
  /* Input Field  */
  --inputdefaultbordercolor: #ACC0C4;
  --inputdisabledbordercolor: lightgray;
  --inputselectedbordercolor: #42a5f5;
  /*Revocable/Irrvocable*/
  --irrevocabletext: #212121;
  --irrevocablebg: #EBF7FC;
  --revocabletext: #007585;
  --revocablebg: #EEF6F7;
  /* Message Box   */
  --notecolor: #82939A;
  /* #F2F5F6 */
  --notebg: #F2F5F6;
  --errorcolor: #EA2238;
  --holdcolor: #808080;
  --erroricon: url(../Images/icons/24px/msg-error.png);
  --errorbg: #FCDCDC;
  --cautioncolor: #FFA600;
  --cautionicon: url(../Images/icons/24px/msg-caution.png);
  --cautionbg: #FFEDCC;
  --successcolor: #12A88A;
  --successicon: url(../Images/icons/24px/msg-success.png);
  --successbg: #CEF3EC;
  /* #FFEDCC  */
  --notificationcolor: #007585;
  --notificationicon: url(../Images/icons/24px/msg-notification.png);
  --notificationbg: #E5EFF0;
  --messagetextcolor: #46535E;
  --externalicon: url(../Imagesicons/24px//externallaunch.png);
  /* Footer Light Theme, reverse colors for Dark */
  --footerlogo: url(../Images/aonlogodark.png);
  /*footer dark theme*/
  --footerdarkthemebg: #212121;
  --footerdarkthemetext: #FFFFFF;
  /*footer light theme*/
  --footerlightthemebg: #FFFFFF;
  --footerlightthemetext: #212121;
  --footerlightlinecolor: #FFFFFF;
  --footerdarklinecolor: #212121;
  /*Message Center*/
  --deleteicon: url(../Images/icons/32px/delete.png);
  --personicon: url(../Images/icons/24px/person.png);
  --attachfileicon: url(../Images/icons/24px/attachfile.png);
  --favoriteicon: url(../Images/star.svg);
  --favoriteiconactive: url(../Images/star-fill.svg);
  /*Tab Link*/
  --tabbgcolor: #F5F5F5;
  --tabbgcolorhover: #F5F5F5;
  --tablinktextcolor: #000000;
  --tablinktextcolorhover: #000000;
  --tabbottombordercolor: #C8C8C8;
  --tabbottombordercolorhover: #000000;
  /*page-info*/
  --pageinfobg: #eef6f7;
  /*spinner-loading*/
  --spinnercolor: #181ec1;
  --spinnnerbgcolor: white;
  /* Process Panel for Home Page */
  --processpanelbg: #F5F5F5;
  --toolbar-bg-color: #46535E;
  --toolbar-box-shadow: 0 1px 0 var(--toolbar-border-color);
  --toolbar-border-bottom: none;
  --inline-start: left;
  --toolbar-label-color: white;
  --pagerightnav: #FAFAFA;
  --pagerightnavwidth: 300px;
}

@media screen and (min-width: 1650px) {
  :root {
    --pageleftnavwidth: 0px;
  }
}

.row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: var(--fontfamily);
  background: var(--pagebodybg);
  font-size: 16px;
}

* {
  box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 5px;
  opacity: 0;
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 1s;
}

::-webkit-scrollbar:membertal {
  height: 5px;
}

:hover::-webkit-scrollbar {
  opacity: 1;
}

::-webkit-scrollbar-track {
  background-color: transparent;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}

:hover::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 20px;
  border-radius: 20px;
  background-color: #82939A;
}

:hover::-webkit-scrollbar-thumb {
  background-color: #82939A;
}

header {
  background: var(--headerbg);
}

#header {
  min-height: 10px;
  line-height: 10px;
  color: var(--headertext);
  font-size: 10px;
}

img {
  vertical-align: top;
}

.site-container {
  min-height: 100vh;
  margin: 0;
  position: relative;
}

.site-top-margin {
  padding-top: 20px !important;
}

.site-left-margin {
  padding-left: 20px !important;
}

.site-right-margin {
  padding-right: 20px !important;
}

@media only screen and (max-width: 600px) {
  .site-left-margin {
    padding-left: 10px !important;
  }

  .site-right-margin {
    padding-right: 5px !important;
  }
}

@media only screen and (min-width: 601px) and (max-width: 992px) {
  .site-left-margin {
    padding-left: 20px !important;
  }

  .site-right-margin {
    padding-right: 10px !important;
  }
}

.page-header-container {
  width: 100%;
  position: fixed;
  z-index: 99;
}

.page-header-shadow {
  box-shadow: 0px 2px 4px #C6C8C8;
}

.page-header {
  height: var(--headermenuheight);
  font-size: 16px;
  font-weight: normal;
  color: var(--headertext);
  background: var(--headerbg);
}

.page-header-title {
  color: var(--pageTitletext);
  font-size: 20px;
  font-weight: 500;
}

.page-headermenu {
  display: flex;
  justify-content: right;
  height: 100%;
  font-size: 18px;
  font-weight: normal;
  background: transparent;
  color: var(--headertext);
  list-style: none;
  /*gap: 40px;*/
}

.page-headermenu-item {
  height: 100%;
  position: static;
}

.page-headermenu-mailicon {
  color: var(--sitetextcolor) !important;
}

.page-headermenu .menu-item {
  background: transparent;
  text-decoration: none;
  padding: 0px 20px 0px 20px;
  color: var(--menutext);
  height: 100%;
  align-items: center;
  display: flex;
}

.menu-item-toggle.show::after,
.popup-dropdown .toggle.show::after,
.dropdown-icon .toggle.show::after,
.dropdown-icon .toggle-before.show::before {
  background: url(../Images/icons/24px/chevron-up.png) no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  content: '';
  border: none !important;
}

.menu-item-toggle::after,
.popup-dropdown .toggle::after,
.dropdown-icon .toggle::after,
.dropdown-icon .toggle-before::before {
  background: url(../Images/icons/24px/chevron-down.png) no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  content: '';
  border: none !important;
}


/* Change the color of links on hover */
.page-headermenuhover,
.page-headermenu .menu-item:hover,
.page-headermenu .menu-item.show {
  border-top: 4px solid var(--menutopborderhover);
  background: var(--menubg) !important;
  color: var(--menutext) !important;
  cursor: pointer;
  height: 100%;
}


.page-headermenu-dropdown {
  background: transparent;
  padding: 0px !important;
  display: none;
  overflow-y: auto;
  position: absolute;
  will-change: width, height;
  color: var(--menutext);
  text-align: left;
  border: 0px;
  border-radius: 0px;
  margin-top: 0px !important;
  width: 100% !important;
  top: -2px !important;
}

.page-headermenu-dropdown-small {
  width: unset !important;
  top: -2px !important;
  max-width: 300px;
}

.page-headermenu-dropdown .container-small {
  width: unset !important;
}

.dropdown-popup {
  background: transparent;
  padding: 0px !important;
  display: none;
  position: absolute;
  will-change: width, height;
  color: var(--dropdownpopuptext);
  text-align: left;
  border: 0px;
  border-radius: 0px;
  margin-top: 0px !important;
  width: fit-content;
}

.dropdown-popup-header {
  font-size: 16px !important;
  font-weight: normal;
  color: var(--dropdownpopuptext);
  text-decoration: none;
}

.dropdown-popup-body {
  overflow-y: auto !important;
  max-height: 200px !important;
  cursor: pointer;
  font-size: 16px !important;
  font-weight: normal;
  color: var(--dropdownpopuptext);
  text-decoration: none;
  background-color: var(--dropdownpopupbg) !important;
}

.dropdown-popup-body .row {
  margin: 3px 0px 3px 0px !important;
}

.dropdown-menu .row {
  margin: 0px 0px 0px 0px !important;
}

.dropdown-popup-body .row:hover {
  cursor: pointer;
  background: var(--dropdownpopuphoverbg) !important;
}

.dropdown-popup-body .selected {
  cursor: pointer;
  background: var(--dropdownpopuphoverbg) !important;
}

.dropdown-popup .dropdown-popup-header {
  margin: 20px 0px 0px 0px !important;
}

.dropdown-popup .container {
  background: var(--dropdownpopupbg) !important;
  padding: 20px 20px 20px 20px;
}


.page-headermenu-dropdown .container {
  width: 90%;
  margin: auto !important;
  background: var(--menubg) !important;
  border: 0px;
  border-radius: 0px;
  box-shadow: 0 .5rem 1rem #0000001A !important;
  margin-bottom: 20px !important;
  padding: 15px 15px 15px 15px;
}

.page-headermenu-dropdown .container-full {
  padding: 20px 20px 20px 20px;
  width: 100% !important;
}

.page-headermenu-dropdown .title {
  color: var(--menutext);
  text-decoration: none;
  font-size: 21px;
  font-weight: 500;
  border-bottom: 1px solid #ACC0C4 !important;
  padding: 10px;
  margin-bottom: 10px;
}

.page-headermenu-dropdown .text {
  font-size: 16px !important;
  font-weight: normal;
  color: var(--menutext);
  text-decoration: none;
}



.page-headermenu-dropdown .desc {
  font-size: 14px !important;
  text-align: left;
  color: var(--descriptiontext);
}

.page-headermenu-dropdown a,
.page-headermenu-dropdown .page-headermenu-dropdown-item {
  clear: both;
  cursor: pointer;
  min-height: 30px;
  /* line-height: 1.5rem; */
  width: 100%;
  text-align: left;
  text-transform: none;
  padding: 5px;
  background: transparent;
}

.page-headermenu-dropdown a:hover,
.page-headermenu-dropdown .page-headermenu-dropdown-item:hover {
  background: var(--menuhoverbg) !important;
  color: var(--menutext) !important;
  border-bottom: none !important;
}


.page-headermenu-dropdown+.leftcorner {
  border-top-left-radius: 5px 5px;
}

.page-headermenu-dropdown+.rightcorner {
  border-top-right-radius: 5px 5px;
}

.page-headermenu-dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1rem;
  clear: both;
  font-weight: 400;
  color: var(--nav-text-color);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

.page-headermenu-dropdown-item:hover,
.page-headermenu-dropdown-item:focus {
  color: var(--menutext);
  background-color: var(--nav-bg-color);
}

.user-profile {
  background-position: center !important;
  width: 24px;
  height: 24px;
  background-size: cover !important;
  margin: 0px 15px 0px 0px;
}

.signout-icon {
  background: url(../Images/icons/24px/logout.png) no-repeat;
}

.culture-icon {
  background-position: center !important;
  width: 22px;
  height: 14px;
  background-size: cover !important;
  margin: 0px 15px 0px 0px;
}

.site-container .row {
  margin-left: 0px;
  margin-right: 0px;
}

.site-container .main {
  min-height: calc(100% - var(--footerheight));
  height: auto !important;
  height: 100%;
  margin: 0 auto;
}

.login-container {
  flex: 1;
  /* resize in container */
  /* overflow: auto;  IMPORTANT for FireFox */
  width: 100%;
  padding-left: var(--pageleftnavwidth);
  color: var(--pagebodytextcolor);
  font-weight: normal;
  position: relative;
  padding-top: var(--headerHeight);
}

.page-container {
  flex: 1;
  /* resize in container */
  /* overflow: auto;  IMPORTANT for FireFox */
  width: 100%;
  padding-left: var(--pageleftnavwidth);
  color: var(--pagebodytextcolor);
  background: var(--pagebodybg);
  font-weight: normal;
  position: relative;
  padding-top: var(--headerHeight);
}

.page-container-with-top-nav {
  padding-top: 150px !important;
}



.page-left-navigation {
  z-index: 1;
  width: var(--pageleftnavwidth);
  background-color: var(--pageleftnav);
  height: 100vh;
  /*border-right: 1px solid #acc0c4;*/
  transition: all .2s;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  overflow: auto;
  padding-top: var(--headerHeight);
}

.page-left-navigation .title {
  box-shadow: 0px 2px 4px #C6C8C8;
  position: relative;
}

.page-left-navigation .container {
  padding-left: 15px;
}

.page-left-navigation .left-nav {
  padding-top: 15px;
}

.page-left-navigation .left-nav-link {
  font-size: 16px;
  color:#007585;
}

.page-left-navigation .left-nav-link.selected {
  font-weight: bold;
  border-left: 4px solid #003C55;
}

.page-top-navigation {
  background: var(--primary);
  color: #CCD7DA;
  font-size: 20px;
  height: var(--headerutilityheight);
}

.employee-nav {
  background: var(--employeenavbg);
  height: var(--headerutilityheight);
}


.page-content {
  /*overflow: auto;  IMPORTANT for FireFox */
  width: 100%;
  
}

.page-title {
  /* width: 100%; */
  color: var(--pageTitletext);
  font-size: 21px;
  font-weight: 500;
  /*background-color: var(--pageTilebg);*/
}

.page-sub-title {
  /* width: 100%; */
  color: var(--pageSubTitletext);
  font-size: 20px;
  font-weight: 500;
  /*background-color: var(--pageTilebg);*/
}

.page-desc {
  color: var(--pagedesctextcolor);
  font-size: 12px;
  /* margin-bottom: 32px; */
  font-weight: normal;
}

.page-desc li:before {
  content: '\2022';
  font-size: x-large;
  vertical-align: middle;
  padding-right: 5px;
}

.page-desc ol li:before {
  content: none !important;
}

.page-nav-desc {
  color: var(--pagedesctextcolor);
  font-size: 16px;
}

.page-nav-desc li:before {
  content: '\2022';
  font-size: x-large;
  vertical-align: middle;
  padding-right: 5px;
}

.page-nav-desc ol li:before {
  content: none !important;
}

.page-process-title {
  width: 100%;
  color: var(--sitetextcolor);
  font-size: 32px;
  font-weight: normal;
}

.page-process-desc {
  margin-bottom: 32px;
  color: var(--pagedesctextcolor);
  font-size: 18px;
  font-weight: normal;
}

.page-process-desc li:before {
  content: '\2022';
  font-size: x-large;
  vertical-align: middle;
  padding-right: 5px;
}

.page-process-desc ol li:before {
  content: none !important;
}

.borderless .messagebox {
  border: 0px !important;
}

.content-toolbar {
  cursor: pointer;
}

.content-toolbar .preview {
  background: url(../Images/icons/32px/preview.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar .edit {
  background: url(../Images/icons/32px/edit.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar.person .edit {
  background: url(../Images/icons/32px/account-edit.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar .add {
  background: url(../Images/icons/32px/add.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar .submit {
  background: url(../Images/icons/32px/submit.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar.person .add {
  background: url(../Images/icons/32px/account-add.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar .delete {
  background: url(../Images/icons/32px/delete.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar .save {
  background: url(../Images/icons/32px/save.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar .submit {
  background: url(../Images/icons/32px/submit.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar.person .cancel {
  background: url(../Images/icons/32px/account-cancel.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar .cancel {
  background: url(../Images/icons/32px/cancel.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar .filter {
  background: url(../Images/icons/32px/filter.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar .search {
  background: url(../Images/icons/24px/search.png) no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar .price {
  background: url(../Images/icons/32px/price.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar .adddocument {
  background: url(../Images/icons/32px/adddocument.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar .close {
  background: url(../Images/icons/32px/close.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar .instruction-letter {
  background: url(../Images/icons/32px/filesend.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 0px 0px 15px;
}

.content-toolbar .withdrawal-export {
  background: url(../Images/icons/32px/fileexport.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar .withdrawal {
  background: url(../Images/icons/32px/withdrawal.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar .pagenavigation {
  background: url(../Images/icons/32px/pagenavigation.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar .refreshicon {
  background: url('../Images/icons/24px/refresh.png') no-repeat right center;
  width: 24px;
  height: 24px;
  text-align: left;
  cursor: pointer;
  float: right;
}

.content-toolbar .refresh {
  background: url('../Images/icons/32px/refresh.png') no-repeat right center;
  width: 30px;
  height: 30px;
  text-align: left;
  cursor: pointer;
  float: right;
}

.content-toolbar.grouplist {
  background: url(../Images/icons/32px/calculationlist.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
  cursor: pointer;
}

.content-toolbar .sendonline {
  background: url(../Images/icons/32px/sendonline.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar .download {
  background: url(../Images/icons/32px/download.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
}

.content-toolbar .sql {
  background: url(../Images/icons/32px/database.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar .approve {
  background: url(../Images/icons/32px/approve.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar .assign {
  background: url(../Images/icons/24px/assign.png) no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar .filter-close {
  background: url(../Images/icons/32px/filterclose.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar .validatesql {
  background: url(../Images/icons/32px/validatesql.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 1px 15px;
}

.content-toolbar .copy {
  background: url(../Images/icons/32px/copy.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 1px 15px;
}
.content-toolbar .checkin {
  background: url(../Images/icons/32px/checkin.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 1px 15px;
}
.content-toolbar .discard {
  background: url(../Images/icons/32px/discard.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 1px 15px;
}
.content-toolbar .checkout {
  background: url(../Images/icons/32px/checkout.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 1px 15px;
}
.content-toolbar .downloaddatasrc {
  background: url(../Images/icons/32px/downloaddatasrc.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 1px 15px;
}
.content-toolbar .uploadfile {
  background: url(../Images/icons/32px/uploadfile.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 1px 15px;
}
.content-toolbar .dataFields {
  background: url(../Images/icons/32px/DataFields.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 1px 15px;
}

.content-toolbar .calctrace {
  background: url(../Images/icons/32px/calctrace.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar .worksheet {
  background: url(../Images/icons/32px/Worksheet.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar .document {
  background: url(../Images/icons/32px/letters.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar .calendar {
  background: url(../Images/icons/32px/calendar.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.grid-toolbar {
  cursor: pointer;
}

.grid-expand {
  background: url(../Images/icons/keyboard_arrow_right.png) no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
  background-size: cover;
  cursor: pointer;
}

.grid-collapse {
  background: url(../Images/icons/keyboard_arrow_down.png) no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
  background-size: cover;
  cursor: pointer;
}

.grid-filter .check {
  background: url(../Images/icons/32px/check.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
  cursor: pointer;
}

.grid-filter .close {
  background: url(../Images/icons/32px/close.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
  cursor: pointer;
}

.grid-toolbar .edit {
  background: url(../Images/icons/32px/edit.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.grid-toolbar .insertbelow {
  background: url(../Images/icons/32px/table-row-plus-after.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.grid-toolbar .insertabove {
  background: url(../Images/icons/32px/table-row-plus-before.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.grid-toolbar .add {
  background: url(../Images/icons/32px/add.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.grid-toolbar .exportexcel {
  background: url(../Images/icons/32px/excel_export.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.grid-toolbar .save {
  background: url(../Images/icons/32px/save.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.grid-toolbar .cancel {
  background: url(../Images/icons/32px/cancel.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.grid-toolbar .filter {
  background: url(../Images/icons/32px/filter.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
}

.content-toolbar .search-clear {
  background: url(../Images/icons/32px/searchclear.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  margin: 0px 15px 0px 15px;
  cursor: pointer;
}
.messagebox {
  /*margin-top: 10px;*/
  border-style: solid none none none;
  border-width: 6px;
  border-radius: 5px;
  text-align: left;
  padding: 20px !important;
  color: var(--messagetextcolor);
  font-size: 16px;
  font-weight: normal;
  display: grid;
  /*align-items: center;*/
}

.messagebox a,
.page-desc a,
.page-process-desc a,
.page-nav-desc a {
  text-decoration: underline;
  color: blue;
  cursor: pointer;
}

.messagebox .title {
  border: none;
  padding-bottom: 0px !important;
  font-size: 18px;
  font-weight: bold
}

.messagebox .expand {
  background: url(../Images/icons/keyboard_arrow_up.png) no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  background-size: cover;
}

.flex-display {
  display: flex;
}

.messagebox .collapse {
  background: url(../Images/icons/keyboard_arrow_down.png) no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  background-size: cover;
}



.messagebox .body {
  padding-left: 10px;
  padding-top: 10px;
}

.messagebox ul li:before {
  content: '\2022';
  font-size: x-large;
  vertical-align: middle;
  padding-right: 5px;
}

.messagebox ol li:before {
  content: none !important;
}


.error {
  border-color: var(--errorcolor);
  background: var(--errorbg);
}

.error .icon,
.icon-error {
  background: var(--erroricon) no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  min-width: 24px;
}

.caution {
  border-color: var(--cautioncolor);
  background: var(--cautionbg);
}

.caution .icon {
  background: var(--cautionicon) no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  min-width: 24px;
}

.success {
  border-color: var(--successcolor);
  background: var(--successbg);
}

.success .icon,
.icon-success {
  background: var(--successicon) no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  min-width: 24px;
}

.notification {
  border-color: var(--notificationcolor);
  background: var(--notificationbg);
}

.notification .icon {
  background: var(--notificationicon) no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  min-width: 24px;
}

.icon-placeholder {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  min-width: 24px;
}

.footer {
  color: var(--footertext);
  font-size: 14px !important;
  width: 100%;
  background: var(--footerbg);
  border-top: 1px solid #acc0c4;
  height: var(--footerheight);
  padding-left: var(--pageleftnavwidth);
}


.footer-container {
  padding: 0 0 0 0px;
  /* this will move entire content from the left */
  display: flex;
  gap: 60px;
  padding-left: 20px;
  padding-top: 32px;
}

.footer-container-small {
  display: flex;
  gap: 20px;
  padding-bottom: 30px;
  padding-left: 20px;
  flex: 2;
}

.footer-copyright-small {
  padding-bottom: 30px;
}

@media screen and (max-width: 600px) {
  .footer-container {
    padding: 0 0 0 10px;
    /* this will move entire content from the left */
    grid-template-columns: auto auto;
    gap: 10px 60px;
  }
}

.footer-brandlogo {
  background: var(--footerlogo) no-repeat;
  background-size: cover;
  overflow: hidden;
  height: 53px;
  width: 118px;
  margin: 0px;
  vertical-align: top;
  align-content: center;
  margin-left: -15px;
  margin-right: -17px;
  margin-bottom: -5px;
}

.footer-title {
  font-size: 14px;
  font-weight: bold;
}

.footer-links {
  font-size: 14px;
  color: var(--footertext);
  border-bottom: 1px solid var(--footertext);
  text-decoration: none;
  cursor: pointer;
}

.footer-links:hover {
  font-size: 14px;
  color: var(--footertext);
  text-decoration: none;
  background-color: transparent;
  border-bottom: 1px solid var(--footertext);
  text-decoration: none;
}


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

.modal.modal-fixed-footer .modal-content {
  height: calc(100% - 196px);
}

.popup-modal {
  overflow: hidden !important;
  background-color: var(--popupmodalbg);
  color: var(--popupmodaltext);
}

.popup-modal-content {
  background-color: var(--popupmodalbg);
  color: var(--popupmodaltext) !important;
  border-top: 3px solid var(--modalBorderTopColor);
  padding: 0px !important;
  border-radius: 0px;
}

.popup-modal-content a {
  color: var(--popupmodaltext);
}

.popup-modal-header {
  line-height: 32px;
  box-sizing: border-box;
  font-size: 24px;
  font-weight: 700;
  vertical-align: top;
  padding: 12px 32px 20px 32px;
  letter-spacing: normal;
  text-decoration: inherit;
  text-transform: inherit;
  border-bottom: 0 !important;
  align-items: baseline;
}

.popup-modal-body {
  font-size: 16px;
  line-height: 24px;
  padding: 0px 32px 32px 32px;
}

.popup-modal-btn-close {
  border: 2px solid;
  background: transparent;
  font-size: larger;
  font-weight: 500;
  float: right;
  text-align: center;
  width: 35px;
  height: 35px;
  line-height: 28px;
  cursor: pointer;
}


.popup-modal-body li:before {
  content: '\2022';
  font-size: x-large;
  vertical-align: middle;
  padding-right: 5px;
  line-height: 1 !important;
}

.popup-modal-footer {
  padding: 0px 32px 32px 32px !important;
  background-color: var(--popupmodalbg) !important;
  color: var(--popupmodaltext) !important;
  text-align: left !important;
  height: 100% !important;
}

.popup-modal-fixed-footer {
  padding: 0px 10px 32px 25px !important;
  background-color: var(--popupmodalbg) !important;
  color: var(--popupmodaltext) !important;
  text-align: left !important;
  height: auto !important;
}

.modal .popup-modal-footer .btn,
.modal .popup-modal-fixed-footer .btn {
  margin: 0 !important;
  margin-right: 20px !important;
}

.popup-modal.modal-fixed-footer {
  padding: 0;
  height: 85% !important;
}

.z-depth-1,
nav,
.card-panel,
.toast,
.btn,
.card,
.btn-large,
.btn-floating,
.dropdown-content,
.side-nav {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.z-depth-1-half,
.btn-large:hover,
.btn-floating:hover {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.card {
  background: var(--cardTopbg);
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.card .card-content {
  padding: 0px 24px 24px 15px;
  border-radius: 0 0 2px 2px;
}


.formLabel {
  color: var(--sitetextcolor) !important;
  font-size: 16px;
  font-weight: bold;
}


.formValue {
  color: #212121 !important;
  font-size: 16px;
  font-weight: normal;
  min-height: 24px;
}

.viewLabel {
  min-height: 25px;
}

.label-field {
  margin-bottom: 20px;
}

.input-field {
  min-width: 87px !important;
}

input[type=text] {
  border-radius: 5px !important;
  height: 40px !important;
  margin: 0px 0px 0px 0px !important;
  padding: 0px 12px 0px 12px !important;
}

.input-field input {
  border-radius: 5px !important;
  height: 40px !important;
  margin: 0 0 20px 0 !important;
}

.input-field label {
  position: absolute;
  top: -0.3rem;
  white-space: nowrap;
  font-size: 0.9rem !important;
  color: var(--sitetextcolor) !important;
}

select,
textarea {
  max-width: 92%;
}

.input-field select {
  display: block;
  margin-bottom: 20px;
}

select {
  border: 2px solid var(--inputdefaultbordercolor);
  border-radius: 5px;
  width: 100%;
  height: 43px !important;
  padding: 0px 12px 0px 7px;
}

select:focus {
  border: 2px solid var(--inputselectedbordercolor);
  outline: none;
}



.input-form .row {
  margin-bottom: 20px;
}

.input-form p {
  margin: 0px;
}

/* Validation Sass Placeholders */
input.valid:not([type]),
input.valid:not([type]):focus,
input[type=text].valid:not(.browser-default),
input[type=text].valid:not(.browser-default):focus,
input[type=password].valid:not(.browser-default),
input[type=password].valid:not(.browser-default):focus,
input[type=email].valid:not(.browser-default),
input[type=email].valid:not(.browser-default):focus,
input[type=url].valid:not(.browser-default),
input[type=url].valid:not(.browser-default):focus,
input[type=time].valid:not(.browser-default),
input[type=time].valid:not(.browser-default):focus,
input[type=date].valid:not(.browser-default),
input[type=date].valid:not(.browser-default):focus,
input[type=datetime].valid:not(.browser-default),
input[type=datetime].valid:not(.browser-default):focus,
input[type=datetime-local].valid:not(.browser-default),
input[type=datetime-local].valid:not(.browser-default):focus,
input[type=tel].valid:not(.browser-default),
input[type=tel].valid:not(.browser-default):focus,
input[type=number].valid:not(.browser-default),
input[type=number].valid:not(.browser-default):focus,
input[type=search].valid:not(.browser-default),
input[type=search].valid:not(.browser-default):focus,
textarea.materialize-textarea.valid,
textarea.materialize-textarea.valid:focus,
.select-wrapper.valid>input.select-dropdown {
  border: 2px solid var(--inputdefaultbordercolor);
  -webkit-box-shadow: none;
  box-shadow: none;
}

input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
  -webkit-box-shadow: none;
  box-shadow: none;
}

input:not([type]),
input[type=text]:not(.browser-default),
input[type=password]:not(.browser-default),
input[type=email]:not(.browser-default),
input[type=url]:not(.browser-default),
input[type=time]:not(.browser-default),
input[type=date]:not(.browser-default),
input[type=datetime]:not(.browser-default),
input[type=datetime-local]:not(.browser-default),
input[type=tel]:not(.browser-default),
input[type=number]:not(.browser-default),
input[type=search]:not(.browser-default),
textarea.materialize-textarea {
  background-color: var(--sitebackgroundcolor);
  /*border: 2px solid var(--inputdefaultbordercolor);*/
}

input:not([type]):disabled,
input:not([type])[readonly="readonly"],
input[type=text]:not(.browser-default):disabled,
input[type=text]:not(.browser-default)[readonly="readonly"],
input[type=password]:not(.browser-default):disabled,
input[type=password]:not(.browser-default)[readonly="readonly"],
input[type=email]:not(.browser-default):disabled,
input[type=email]:not(.browser-default)[readonly="readonly"],
input[type=url]:not(.browser-default):disabled,
input[type=url]:not(.browser-default)[readonly="readonly"],
input[type=time]:not(.browser-default):disabled,
input[type=time]:not(.browser-default)[readonly="readonly"],
input[type=date]:not(.browser-default):disabled,
input[type=date]:not(.browser-default)[readonly="readonly"],
input[type=datetime]:not(.browser-default):disabled,
input[type=datetime]:not(.browser-default)[readonly="readonly"],
input[type=datetime-local]:not(.browser-default):disabled,
input[type=datetime-local]:not(.browser-default)[readonly="readonly"],
input[type=tel]:not(.browser-default):disabled,
input[type=tel]:not(.browser-default)[readonly="readonly"],
input[type=number]:not(.browser-default):disabled,
input[type=number]:not(.browser-default)[readonly="readonly"],
input[type=search]:not(.browser-default):disabled,
input[type=search]:not(.browser-default)[readonly="readonly"],
textarea.materialize-textarea:disabled,
textarea.materialize-textarea[readonly="readonly"] {
  color: rgba(0, 0, 0, 0.42);
  border: 2px solid var(--inputdisabledbordercolor);
}

input[type=text]:not(.browser-default):focus:not([readonly])+label,
input[type=password]:not(.browser-default):focus:not([readonly])+label {
  color: var(--sitetextcolor);
}

input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]) {
  border: 2px solid var(--inputselectedbordercolor);
}

/* collapsible*/

.collapsible-body {
  padding: 32px 20px 32px 32px;
  background-color: var(--sitebackgroundcolor);
  border-radius: 0px 0px 10px 10px;
  border: 1px solid #ACC0C4;
}

.collapsible li {
  border: none !important;
}


.collapsible {
  border: 0px;
  margin: 0px;
}



.collapsible-header {
  color: var(--sitetextcolor) !important;
  background: var(--sitebackgroundcolor);
  font-size: 18px;
  padding: 15px 15px 15px 32px;
  border: 1px solid #ACC0C4;
  border-radius: 10px 10px 0px 0px !important
}

.collapsible-header .collapsible-header-title {
  font-weight: bold;
}

.collapsible-header.collapsed {
  border-radius: 10px !important;
}

:not(.panelbox-collapsible)>.collapsible-header:not(.collapsed) i {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.collapsible-header .expand-more {
  background: url(../Images/icons/24px/expand_more.png) no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  margin-right: 0px !important;
  display: block;
}

.collapsible-header .expand-less {
  background: url(../Images/icons/24px/expand_less.png) no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  margin-right: 0px !important;
}

.collapsible-section {
  border-top: 0px solid !important;
  border-right: 0px solid !important;
  border-left: 0px solid !important;
  background: var(--pagebodybg);
}


.collapsible-subsection {
  border-top: 0px solid !important;
  border-right: 0px solid !important;
  border-left: 0px solid !important;
  margin: 0 0 1rem 0;
}

.collapsible-section-header {
  border-bottom: 2px solid var(--sitetextcolor) !important;
  padding: 5px !important;
}

.collapsible-section-header .title {
  font-weight: bold;
}

.collapsible-subsection-header {
  color: black;
  border-bottom: none !important;
  padding: 5px;
}

.collapsible-section-bottom-border {
  border-bottom: 1px !important;
  border-bottom-color: #ACC0C4 !important;
  border-bottom-style: solid !important;
}

.collapsible-section-body {
  border-bottom: 0px solid !important;
  padding: 1rem 0rem 0rem 0rem !important;
}

.collapsible-section-margin {
  margin-top: 5px;
}

.collapsible-subsection-body {
  padding: 5px 0rem 0rem 5px !important;
  border-bottom: none !important;
}

.collapsible>li.active {
  margin-bottom: 15px;
  margin-top: 0px;
}

.collapsible li.active i {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

a.collapsible-anchor:hover {
  text-decoration: underline;
}

.collapsible-header.active i {
  -ms-transform: rotate(180deg);
  /* IE 9 */
  -webkit-transform: rotate(180deg);
  /* Chrome, Safari, Opera */
  transform: rotate(180deg);
}

.card-panel {
  margin: 20px 0px 0px 0px;
}


.panelbar {
  background: #F5F5F5;
  border: 1px solid #ACC0C4;
  margin-bottom: 15px;
}

.panelbar .headerdark {
  background: #82939A !important;
  color: white !important;
  padding: 3px 10px 3px 25px !important;

}

.panelbar .headerdark .title {
  font-family: var(--fontfamily);
  font-size: 20px;
  margin-left: 0px !important;
}

.panelbar .body {
  padding: 10px 32px 10px 32px;
}

.panelbox-2 {
  background: var(--sitebackgroundcolor);
  border-radius: 10px;
  border: 1px solid #ACC0C4;
  margin-bottom: 15px;
}

.panelbox-2 .panel-header {
  padding: 10px 32px 10px 32px;
  border-radius: 10px 10px 0px 0px !important;

}

.panelbox-2 .panel-header .line-bottom {
  border-bottom: 1px solid #ACC0C4 !important;
  padding-bottom: 10px;
}

.panelbox-2 .panel-header:has(div.collapsed) {
  padding: 10px 32px 10px 32px !important;
  border-radius: 10px !important;
}

.panelbox-2 .panel-header:has(div.collapsed) .line-bottom {
  border-bottom: 0px !important;
  padding-bottom: 0px !important;
}


.panelbox-2 .panel-header i:not(.collapsed),
.panelbar .headerdark i:not(.collapsed) {
  -ms-transform: rotate(180deg) !important;
  -webkit-transform: rotate(180deg) !important;
  transform: rotate(180deg) !important;
}

.panelbox-2 .panel-header .expand-more,
.panelbar .headerdark .expand-more {
  background: url(../Images/icons/24px/expand_more.png) no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  margin-right: 0px !important;
  display: block;
}

.panelbox-2 .panel-header .expand-less,
.panelbar .headerdark .expand-less {
  background: url(../Images/icons/24px/expand_less.png) no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  margin-right: 0px !important;
}

.bg-dee9eb {
  background-color: #DEE9EB !important;
}

.bg-e5eff0 {
  background-color: #E5EFF0;
}


.panelbox-2 .panel-body {
  padding: 0px 32px 10px 32px;
}

.panelbox {
  background: var(--sitebackgroundcolor);
  border-radius: 10px;
  border: 1px solid #ACC0C4;
  padding: 10px 32px 10px 32px;
  margin-bottom: 15px;
}

.panelbox .header {
  padding: 0px 0px 10px 0px;
  border-bottom: 1px solid #ACC0C4 !important;
}

.panelbox .error-box,
panelbox-2 .error-box {
  padding-top: 20px;
}

.panelbox i,
.panelbox-2 i {
  margin: 0px 15px 0px 15px;
}

.panelbox-collapsible .collapsible-header,
.panelbox-collapsible .collapsible-body {
  padding: 0px !important;
  border: 0px;
  font-size: inherit !important;
}

.panelbox-collapsible .collapsible-header.collapsed .header,
.panelbox-collapsible .header:has(div.collapsed) {
  border-bottom: 0px !important;
  padding: 0px !important;
}

.panelbox-collapsible .header:has(div.collapsed) .content-toolbar {
  display: none !important
}

.panelbox-collapsible i:not(.collapsed) {
  -ms-transform: rotate(180deg) !important;
  -webkit-transform: rotate(180deg) !important;
  transform: rotate(180deg) !important;
}

.panelbox .sub-header,
.panelbox-2 .panel-sub-header {
  font-weight: bold;
}


.panelbox .bottom-border,
.panelbox-2 .bottom-border {
  border-bottom: 3px solid #ACC0C4 !important;
  padding-bottom: 32px;
  margin-bottom: 32px;
}

.panelbox .top-border,
.panelbox-2 .top-border {
  border-top: 1px solid #ACC0C4 !important;
  border-bottom: 0px !important;
}

.panelbox .title,
.panelbox-2 .panel-header .title {
  font-family: var(--fontfamily);
  font-weight: bold;
  font-size: 20px;
  margin-left: 0px !important;
  color: var(--sitetextcolor);
}

.panelbox .subtitle {
  font-size: 14px;
  font-weight: normal;
  margin-top: 8px;
  color: #69747D;
}

.panelbox-top-subtitle {
  font-family: var(--fontfamily);
  font-size: 16px;
  margin-left: 0px !important;
  color: var(--sitetextcolor);
}

.panelbox .row-title {
  font-weight: bold;
  font-size: 16px;
}

.panelbox .content-2 .row,
.panelbox-2 .panel-body .row,
.panelbox .content .row:not(:first-child),
.modal-content .row:not(:first-child),
.form-content .row:not(:first-child),
.mp-account-card .row:not(:first-child) {
  margin: 20px 0px 0px 0px;
}

.panelbox .content-wo-margin .row {
  margin: 0px !important;
}

.tooltip {
  cursor: pointer;
  position: absolute;
  margin-top: -13px;
}

.tooltip .icon {
  background: var(--tooltipicon) no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  margin-left: 5px;
}

.tooltips .icon {
  display: inline-block;
  background: var(--tooltipicon) no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  margin-left: 5px;
}


.tooltip .content {
  border-radius: 15px;
  min-width: 300px;
  max-width: 350px;
  padding: 15px 20px 15px 15px;
  z-index: 100;
  text-align: left;
  background-color: var(--tooltipbg);
  color: var(--tooltiptext);
}

.tooltip .content-small {
  background-color: var(--tooltipbg);
  color: var(--tooltiptext);
}

@media screen and (min-width:321px) and (max-width:768px) {
  .tooltip .content {
    min-width: 200px;
    max-width: 250px;
  }
}

.tooltip.show {
  opacity: 1 !important;
  z-index: 100;
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
  border-top-color: var(--tooltipbg) !important;
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
  border-bottom-color: var(--tooltipbg) !important;
}

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
  border-left-color: var(--tooltipbg) !important;
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
  border-right-color: var(--tooltipbg) !important;
}


.tooltip .content .arrow {
  position: absolute;
  bottom: 100%;
  left: 30px;
  border-width: 12px;
  border-style: solid;
  border-color: transparent transparent var(--tooltipbg) transparent;
}

.tooltip .content .close {
  float: right;
  cursor: pointer
}

.tooltip .content .title {
  font-weight: bold;
  font-size: 14px;
  line-height: 18px;
  color: var(--tooltiptext);
  margin-bottom: 10px;
}

.tooltip .content .body {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
}

.btn,
.button-class,
.secondary-button-class {
  border-radius: 5px;
}

.btn:disabled {
  opacity: 0.5;
}

.btn,
.btn-large,
.btn-flat {
  height: 40px !important;
}

.btn-outline-selected {
  --bs-btn-color: mediumpurple;
  --bs-btn-border-color: mediumpurple;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: mediumpurple;
  --bs-btn-hover-border-color: mediumpurple;
  --bs-btn-focus-shadow-rgb: 25, 135, 84;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: mediumpurple;
  --bs-btn-active-border-color: mediumpurple;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: mediumpurple;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: mediumpurple;
  --bs-gradient: none;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}


.button-class {
  text-transform: none;
  background-color: var(--primarybuttonbg) !important;
  height: 40px !important;
  min-width: 120px !important;
  border-radius: 5px !important;
  color: #ffffff !important;
  width: fit-content;
}


.launch-button-class {
  display: inline-flex;
  align-items: center;
  height: 40px !important;
  gap: 10px; 
  padding: 5px 10px;
  border: 1px solid #6d6e65;
  border-radius: 5px;
  background-color: #FFFFFF;
  color: black;
  text-decoration: none;
  cursor: pointer;  
  width: fit-content;
}

.launch-button-class:hover {
  border: 1px solid #6d6e65 !important;
   background-color: #FFFFFF !important;
  color: black !important;
}


.link-button-class {
  text-transform: none;
  min-width: 40px !important;
  height: 25px !important;
  background-color: #E0E0E0 !important;
  border-radius: 5px !important;
  color: #6d6e65;
  width: fit-content;
  display: inline-flex;
  justify-content: space-evenly;
  align-items: flex-end;
}

.button-class:hover {
  color: #ffffff;
}

.button-class-margin {
  /*margin-left: 5px;*/
  margin-right: 20px
}

.secondary-button-class {
  color: var(--sitetextcolor) !important;
  text-transform: none;
  background-color: transparent !important;
  border: 1px solid;
  border-color: var(--sitetextcolor);
  min-width: 120px !important;
}

.secondary-button-class:hover {
  border-color: var(--sitetextcolor) !important;
}

.round-button-class {
  text-transform: none;
  background-color: var(--roundbuttonbg) !important;
  border-radius: 18px;
}

.secondary-round-button-class {
  border-radius: 18px;
  color: var(--descriptiontext) !important;
  text-transform: none;
  background-color: var(--roundbuttonbg) !important;
  padding: 8px 16px;
  line-height: 0px;
  border: 1px solid;
  border-color: var(--descriptiontext);
}

.btncircle {
  background-color: var(--buttoncirclebg) !important;
  width: 50px !important;
  height: 50px !important;
}

.btncircle i {
  line-height: 50px !important;
}

.revocable {
  font-size: 14px;
  font-weight: 700;
  color: var(--revocabletext);
  background-color: var(--revocablebg);
  font-weight: bold;
  height: 20px;
  padding: 1px 4px 2px 4px;
  margin-left: 12px;
}

.irrevocable {
  font-size: 14px;
  font-weight: 700;
  color: var(--irrevocabletext);
  background-color: var(--irrevocablebg);
  height: 20px;
  padding: 1px 4px 2px 4px;
  margin-left: 12px;
}

.beneficiary-link {
  text-decoration: underline;
  color: blue;
  cursor: pointer;
  margin-right: 4px;
}

.beneficiary-remove-link {
  text-decoration: underline;
  color: blue;
  cursor: pointer;
  margin-left: 12px;
  font-size: 14px;
}

.beneficiary-allocation-total {
  background-color: var(--successbg);
  color: black;
  padding: 0px 5px 0px 10px;
  font-weight: bold;
  height: 40px;
}

.beneficiary-allocation-total .icon {
  background: var(--successicon) no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.beneficiary-allocation-total-error {
  background-color: var(--sitebackgroundcolor);
  color: black;
  padding: 0px 5px 0px 10px;
  font-weight: bold;
  height: 40px;
}

.beneficiary-allocation-total-error .icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.non-designated-item {
  background-color: #F8F8F8;
  padding: 15px;
}

.no-data-on-file {
  padding-top: 0px;
  padding-bottom: 0px;
}

.to-uppercase {
  text-transform: uppercase;
}

.input-field-allocation {
  background-color: var(--sitebackgroundcolor);
  border: 2px solid var(--inputdefaultbordercolor);
  /*width: 110px !important;*/
  border-radius: 5px !important;
  padding-right: 5px;
  padding-left: 5px;
}

.input-field-allocation input {
  margin: 0px;
  text-align: right;
  border: none;
  height: 40px !important;
  padding: 0px !important;
  max-width: calc(92% - 27px) !important;
}

.input-field-allocation input:focus {
  outline: none;
}

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

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

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

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

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

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

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

.pdf-card {
  /*min-width: 300px !important;*/
  min-height: 50px;
  border-top: 3px solid var(--pdfcardtopborder) !important;
  cursor: pointer !important;
}

.pdf-card .body {
  height: 100%;
  width: 100%;
  background-color: var(--sitebackgroundcolor);
  color: black;
  border-radius: 0;
  margin: 0px;
  padding: 10px;
}

.pdf-card .icon {
  background: url(../Images/PDF.png);
  background-position: center;
  width: 24px;
  height: 32px;
  margin-left: 15px;
  background-repeat: no-repeat;
}


.ui-datepicker-month,
.ui-datepicker-year {
  display: unset !important;
}

.datepicker {
  max-width: calc(92% - 3px);
}

.ui-datepicker {
  padding: 0px !important;
}

.ui-datepicker-month {
  margin-right: 10px !important;
}

.ui-datepicker-month,
.ui-datepicker-year {
  display: unset !important;
  padding: 0px 0px 0px 5px;
  border: 0 !important;
  background-color: var(--dropdownpopuphoverbg);
  width: 65px !important;
  height: 30px !important;
}

.ui-datepicker-month:focus .ui-datepicker-year:focus {
  border: 0px !important;
  outline: 2px #EA2238 !important;
}

.ui-datepicker-prev,
.ui-datepicker-prev-hover {
  left: 0px !important;
}

.ui-datepicker-next,
.ui-datepicker-next-hover {
  right: 0px !important;
}

.ui-datepicker-prev,
.ui-datepicker-prev-hover,
.ui-datepicker-next,
.ui-datepicker-next-hover {
  top: 5px !important;
  cursor: pointer;
  border: 0px !important;
  background-color: var(--dropdownpopuphoverbg) !important
}

.ui-datepicker td span,
.ui-datepicker td a {
  display: block;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  height: 32px;
}


@media only screen and (max-width: 1295px) {
  .hide-on-large-and-down {
    display: none !important;
  }
}

@media only screen and (min-width: 1295px) {
  .hide-on-xlarge-only {
    display: none !important;
  }
}


.selectedRow {
  background: #F5F5F5;
  border: 1px thin;
}

/* Start- Message center*/
.document-attachment-box {
  float: left;
  padding: 20px;
  background: #EEf6f7;
  /*width: 92%;*/
}

.message-title {
  color: var(--sitetextcolor);
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 24px;
}

.message-row {
  display: grid;
  grid-template-columns: calc(100% - 110px) 110px;
  /*flex-flow: wrap;*/
  font-size: 14px;
  padding-left: 10px;
  padding-top: 3px;
  cursor: pointer;
  background-color: white !important;
  border-bottom: 1px solid #b9b9b9 !important;
  color: black;
  padding: 10px;
}

.delete-icon {
  background: var(--deleteicon) no-repeat;
  width: 100%;
  height: 30px;
  width: 30px;
  background-position: right;
}

.fileupload-delete {
  cursor: pointer !important;
  width: 35% !important;
  background-position: center !important;
}

.tied-calc-icon {
  background: url(../Images/icons/tiecalc.gif) no-repeat;
  background-position: right;
}

.message-row .truncatemsg {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 75%;
}

.message-row .attachment-icon {
  display: inline-block;
  background: var(--attachfileicon) no-repeat;
  width: 20px;
  height: 22px;
}

.message-row .warningHighlight {
  font-size: 12px;
  background-color: var(--cautionbg);
  padding: 2px;
  margin-left: 10px;
}

.message-row .errorHighlight {
  font-size: 12px;
  background-color: var(--errorbg);
  padding: 2px;
  margin-left: 10px;
}

.message-row .favorite-icon {
  display: inline-block;
  background: var(--favoriteicon) no-repeat;
  width: 24px;
  height: 24px;
}

.message-row .favorite-icon-active {
  display: inline-block;
  background: var(--favoriteiconactive) no-repeat;
  width: 24px;
  height: 24px;
}

.message-row .last {
  margin-left: auto;
}

.readmsg {
  background-color: var(--revocablebg) !important;
}

.unreadmsg {
  font-weight: bold;
  color: black;
}

.msg-background {
  background: #EEF6F7 !important;
}

.pagination {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  cursor: pointer;
  margin: 32px 0px 0px 0px;
}

.pagination li a {
  color: var(--primary) !important;
  font-size: 16px;
}

.pagination li.active {
  background-color: #E0E0E0 !important;
}

.person-icon {
  display: inline-block;
  background: var(--personicon) no-repeat;
  width: 24px;
  height: 24px;
}

.attachfile-icon {
  display: inline-block;
  background: var(--attachfileicon) no-repeat;
  width: 24px;
  height: 24px;
}

.messagecenter:hover {
  border-bottom: none !important;
  cursor: pointer;
}

.messagecenter-notification-badge {
  background-color: #ff8100 !important;
  top: 0px;
  font-size: 8px !important;
  margin: 0px !important;
}

.messagecenter-fileSelect {
  width: 100%;
  height: 100%;
  text-align: center;
  margin-top: -113px;
  color: #FFF;
  font-weight: bold;
  font-size: 90px;
  opacity: 0;
  position: absolute;
}

.username-display {
  color: #007585;
}

/* End- Message center*/

/*Start--Defined Contributions*/
.fund-title {
  font-weight: 400;
  font-size: 16px !important;
  margin: 0;
  padding: 10px 0px 0px 0px;
}

.page-nav-desc-align {
  padding-left: 15px;
}

.money-purchase-title-size {
  font-size: 16px !important;
}

.tablink:visited {
  filter: saturate(100%);
}

.tablink:link {
  filter: saturate(20%);
}

.card-content-align {
  font-weight: bold;
}

.selected-account {
  background-color: #DFECE6;
}

.card-content.card-title {
  padding-bottom: 5px !important;
}

#card-header-all-align {
  font-weight: 500;
  font-size: 1.00em;
  color: black;
  padding-top: 3px !important;
}


.mp-content-row {
  padding: 10px 0px 0px 15px !important;
  width: 100% !important;
}

.rate-of-return-detail {
  font-weight: normal;
  font-size: 16px;
  color: black;
  text-align: left !important;
  padding-right: 15px !important;
}


.mp-header-text {
  font-size: 18px !important;
  font-weight: bold;
  color: var(--sitetextcolor) !important
}

.chart-width {
  width: 60% !important;
}

.chart-width-pie {
  width: 52% !important;
}

@media screen and (max-width: 768px) {
  .chart-width {
    width: 100% !important;
  }

  .chart-width-pie {
    width: 100% !important;
  }
}

.card .card-mp-content {
  padding: 0px 24px 10px 15px !important;
  border-radius: 0 0 2px 2px !important;
}

.card .card-mp-content .card-mp-title {
  display: block !important;
  line-height: 32px !important;
  margin-bottom: 20px !important;
  font-weight: normal !important;
}

/*End--Defined Contributions*/


/*Start - Login Styles*/

.login-box {
  min-height: calc(100% - var(--footerheight));
  background-color: var(--pageleftnav);
}

.login-box a {
  color: var(--sitetextcolor);
  border-bottom: 1px solid var(--sitetextcolor);
  font-weight: normal;
}


[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none !important;
}

/*End - Login Styles*/


.line-gap {
  padding: 0px 10px 10px 10px !important;
}


/* Start - Lines*/
.bottom-border {
  border-bottom: 3px solid #ACC0C4 !important;
}

.top-border {
  border-bottom: 3px solid #ACC0C4 !important;
}

.panelbox .top-border {
  margin-top: 32px !important;
  padding-top: 10px;
}

.thin-bottom-border {
  border-bottom: 1px solid #ACC0C4 !important;
}

.thin-border-right {
  border-right: 1px solid #ACC0C4 !important;
}

.thin-bottom-dotted-border {
  border-bottom: 1px dotted lightgrey
}

.thin-border-secondary {
  border: 1px solid #C8C8C8;
}

.thin-borderbottom-secondary {
  border-bottom: 1px solid #C8C8C8;
}

/* End - Lines*/


/*Start - Copied from Site.css */

.row .col {
  padding: 0rem;
}


.progress .indeterminate {
  background-color: var(--primary) !important;
}

.progress {
  background-color: #CDDBDE !important;
}


.a-tag {
  color: #212121 !important;
  font-size: 18px;
}

.w3-border-prim,
.w3-hover-border-prim:hover {
  border-color: var(--primary) !important;
}

.tab.tab-selected {
  border-bottom: 4px solid var(--primary) !important;
}

.tab.tab-selected .a-tag {
  font-weight: bold !important;
}

.plan-dropdopwn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 2px;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 100%;
}

.plan-dropdopwn-icon {
  float: left;
  margin-right: 5px;
  background-repeat: no-repeat;
  background-position: center;
  /*background-size: 100%;*/
  background-image: url(../Images/arrowddl.png);
  background-size: cover;
  width: 30px;
  height: 30px;
}

.plan-dropdown-text {
  font-size: 20px;
  color: black;
}

.plan-dropdown-body {
  overflow: auto;
  max-height: 300px;
}

.selectedplan {
  font-weight: bold;
}


/*Start ag-grid theme*/

.ag-theme-alpine {
  --ag-header-background-color: #007585;
  --ag-odd-row-background-color: #EAF2F4;
  --ag-border-color: #ACC0C4;
  --ag-selected-row-background-color: #C3C3C3;
  --ag-borders: 0px;
}

.ag-theme-alpine .grid-dropdown {
  max-width: 100% !important;
  width: 100% !important;
  height: 85% !important;
}

.ag-header-cell-text {
  overflow: visible;
  text-overflow: ellipsis;
  color: #FFFFFF;
  font-weight: 500;
  text-overflow: unset;
  white-space: normal;
  font-size: 14px !important;
}

.ag-header-cell {
  border-right: 1px solid var(--ag-border-color) !important;
  border-bottom: 1px solid var(--ag-border-color) !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.ag-cell {
  padding-left: 8px !important;
  padding-right: 8px !important;
  border-left: 1px solid var(--ag-border-color) !important;
  border-right: 1px solid var(--ag-border-color) !important;
  border-bottom: 1px solid var(--ag-border-color) !important;
  font-size: 14px;
}

.ag-theme-alpine .ag-cell-inline-editing {
  padding: 8px !important;
}

.ag-theme-alpine .ag-ltr input[class^=ag-][type=text] {
  border-radius: 0px !important;
}

.ag-theme-alpine .ag-root-wrapper .ag-row .ag-row-selected {
  background-color: #fffee0 !important;
}

.ag-picker-field-wrapper {
  border-radius: 0px !important;
  border-color: #181d1f !important;
}

.ag-theme-alpine .ag-row {
  font-size: 13px !important;
}

.ag-cell-inline-editing {
  border: none !important;
  background: none !important;
  border-radius: none !important;
  box-shadow: none !important;
  padding: var(--ag-grid-size);
  padding: 0;
  background-color: none !important;
}

.grid-page-display-option {
  height: 28px !important;
  margin-left: 7px;
  padding-right: 0px;
  width: 70px !important;
  margin-right: 20px;
  align-items: right;
}

.ag-details-row {
  padding: 0px !important;
}

.ag-details-row .ag-header {
  display: none;
}

.ag-details-row .ag-cell {
  border-right-color: transparent !important;
  background-color: #FFFFFF !important;
}

.grid-top {
  margin-top: 25px;
}

.pagination-highlight {
  color: #1E5BC0 !important;
}

.ag-theme-alpine .ag-filter-toolpanel-header {
  color: #000000;
}

.grid-pagination .previous {
  background: url(../Images/icons/page-previous.png) no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
  background-size: cover;
  margin: 2px 0px 0px 15px;
  cursor: pointer;
}

.grid-pagination .next {
  background: url(../Images/icons/page-next.png) no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
  background-size: cover;
  margin: 2px 0px 0px 15px;
  cursor: pointer;
}

.grid-pagination .first {
  background: url(../Images/icons/page-first.png) no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
  background-size: cover;
  margin: 7px 0px 0px 15px;
  cursor: pointer;
}

.grid-pagination .last {
  background: url(../Images/icons/page-last.png) no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
  background-size: cover;
  margin: 7px 0px 0px 15px;
  cursor: pointer;
}

.ag-cell-multiline {
  line-height: normal;
  margin-top: 5px;
  width: 95%;
}

.ag-row-detail {
  margin: 20px;
}

.ag-even-row {
  background-color: #ffffff;
}

.ag-odd-row {
  background-color: #EAF2F4;
}

.ag-theme-alpine .ag-row-wo-bottom-border .ag-cell {
  border-bottom: none !important;
  border-bottom-width: 0 !important;
  box-shadow: none !important;
  background: inherit !important;
  border-right: none !important;
}

.ag-cell-empty-disabled {
  background-color: #EBEBEB;
  height: 100%;
  padding: 8px;
  color: #ccc;
}

.ag-grid-no-gridlines .ag-cell {
  border-right: none !important;
  border-bottom: none !important;
}

.ag-grid-no-gridlines .ag-header-cell {
  border-right: none !important;
}

.ag-grid-miscellaneous {
  --ag-odd-row-background-color: inherit !important;
  --ag-selected-row-background-color: inherit !important;
}

.ag-grid-miscellaneous .ag-cell {
  border: none !important;
}

.ag-grid-miscellaneous .ag-row {
  border-color: #EBEBEB;
}

.grid-header-right .ag-header-cell-label {
  justify-content: flex-end;
  text-align: right;
}

.ag-cell-change-by {
  white-space: normal !important;
  line-height: 1.4 !important;
}

.ag-header-cell.multi-line-header .ag-header-cell-text {
  white-space: pre-line !important;
}

.ag-cell-grey {
  background-color: #EBEBEB;
}


/*Start Navbar styles*/

.nav-link {
  color: var(--menutext);
}

.page-link {
  color: #6d6e65;
  cursor: pointer;
  font-size: 14px;
  font-weight: normal;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--menutext);
}

.child-nav-link {
  font-size: 16px;
  color:#007585;
}

.child-nav-link.selected {
  font-weight: bold;
  border-left: 4px solid #003C55;
}

/*End Navbar styles*/

/*Start Form Control*/
.form-control {
  display: block;
  width: 100%;
  color: var(--input-text-color);
  background-color: var(--input-bg-color);
  background-clip: padding-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: none;
  height: 40px !important;
  border-radius: 5px !important;
  padding: 0px 12px 0px 12px !important;
  border: 2px solid var(--inputdefaultbordercolor);
  margin-bottom: 0px !important;
}

.form-control::placeholder,
.grid-editable-textbox::placeholder {
  color: var(--bs-secondary-color) !important;
  /* or any visible color */
  opacity: 1 !important;
  /* make sure it’s not faded to 0 */
}


.form-control:focus {
  color: var(--input-text-color);
  background-color: var(--input-bg-color);
  border-color: var(--inputselectedbordercolor);
  box-shadow: 0 0 0 0 !important;
}

.form-floating>.form-control {
  min-height: 44px !important;
  max-width: none !important;
}

/*End Form Control*/


/*Start tab style*/

.page-nav-wrapper {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
}

.page-nav-content {
  padding: 10px 0px 0px 15px !important;
  width: 100% !important;
}

.page-nav-list {
  display: flex;
  position: relative;
  flex-wrap: nowrap !important;
}


.page-nav-scroller {
  text-align: center;
  cursor: pointer;
  display: none;
  padding: 10px;
  white-space: no-wrap;
  vertical-align: middle;
  color: var(--tablinktextcolor);
  font-size: 30px;
}

.pointer {
  cursor: pointer;
}


.page-nav-item {
  text-decoration: none;
}

.top-nav.page-nav-list .tab.page-nav-item:nth-of-type(1) {
  width: var(--pageleftnavwidth);
}

.page-nav-link {
  color: var(--tablinktextcolor);
  text-decoration: none;
}

.page-nav-link:hover {
  color: var(--tablinktextcolorhover);
  text-decoration: none;
}

.tab {
  background-color: transparent;
  border-bottom: 4px solid #CDDBDE !important;
  padding-bottom: 8px;
}

.tab:hover {
  background-color: transparent;
  border-bottom: 4px solid var(--primary) !important;
}

/*end tab style*/

/*Start ngx styles*/
.ngx-bar {
  height: 0px !important;
}

.ngx-spinner {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: var(--spinnercolor);
  background-color: var(--spinnnerbgcolor);
  opacity: 0.6;
  top: auto !important;
  left: auto !important;
  pointer-events: all;
}

.ngx-spinner-icon {
  width: 34px !important;
  height: 34px !important;
  border-width: 4px !important;
  border-top-color: inherit;
  border-left-color: inherit;
  border-radius: 50%;
  -webkit-animation: loading-bar-spinner .8s linear infinite;
  animation: loading-bar-spinner .8s linear infinite;
  z-index: 200000000 !important;
}

/*End ngx styles*/

/*Start panel-box*/

.page-panel-body {
  padding: 8px;
}

/*End panel-box*/

/*Start page-info */

.page-info {
  background-color: var(--pageinfobg);
}

.breadcrumb-item+.breadcrumb-item::before {
  color: var(--tablinktextcolor);
}


.valign-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

/*End page-info*/

/*Start address*/
.selected-addr {
  font-weight: bold;
  color: #007585;
}

.effective-addr {
  color: #EA2238 !important;
}

.disabled-addr {
  pointer-events: none;
  opacity: 0.4;
}

.client-default-address-icon {
  background: url(../Images/icons/24px/client-default-address.png) no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  background-size: cover;
  cursor: pointer;
  margin-right: 10px;
}

.address-exist-icon {
  background: url(../Images/icons/24px/address-exists.png) no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  background-size: cover;
  cursor: pointer;
  margin-right: 10px;
}

/*End address*/

/*Start Modal dialog design*/

.modal-header-style {
  border-bottom: 0 none;
  padding: 32px 32px 32px 32px;
}

.modal-body-style {
  font-size: 16px;
  display: flex;
  line-height: 24px;
  padding: 0px 32px 32px 32px;
  min-height: 50px;
  font-size: 16px;
  font-weight: normal;
}

.modal-footer-style {
  border-top: 0 none;
  padding: 20px 40px 20px 40px !important;
  background-color: var(--popupmodalbg) !important;
  color: var(--popupmodaltext) !important;
  display: inline !important;
  height: 100% !important;
}

.modal-footer-style>* {
  margin-left: 0px !important;
  margin-top: 0px !important;
}

/*End Modal dialog design*/

/*Start Beneficiary Deisgnation design*/
.right-align {
  text-align: right;
}

/*End Beneficiary Deisgnation design*/

.checkbox-size {
  width: 15px;
  height: 15px;
}


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


.page-header-utility {
  background: #46535E;
  color: #CCD7DA;
  font-size: 16px;
  height: var(--headerutilityheight);
}

.page-header-utility .page-header-title {
  font-size: 20px;
  font-weight: normal;
  color: #CCD7DA !important;
  height: auto !important;

}


.dropdown-icon.white .toggle::after {
  background: url(../Images/icons/24px/chevron-down-white-trans.png) no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  content: '';
  border: none !important;
}

.dropdown-icon.white .toggle.show::after {
  background: url(../Images/icons/24px/chevron-up-white-trans.png) no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  content: '';
  border: none !important;
}

.offcanvas-backdrop{
  z-index: -99 !important;
}

.offcanvas-backdrop.show {
  opacity: 0 !important;
}

.offcanvas-sidebar.menu {
  background-color: #DEE9EB !important;
  width: 405px;
}

.offcanvas-sidebar.notifications-center {
  width: 500px;
  top: var(--headermenuheight);
  height: calc(100% - var(--headermenuheight));
}


.notifications-center .item-close {
  background: url(../Images/icons/32px/close.png) no-repeat;
  background-position: center;
  background-size: cover;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

.notifications-center .notification-section-header {
  background-color: var(--menubg);
  color: var(--sitetextcolor);
  font-weight: bold;
  font-size: 14px;
  margin: 0 -16px 0 -20px;
  padding: 10px 20px;
}

.notifications-center .notification-status-row {
  padding: 14px 0;
}

.notifications-center .notification-status-row:last-child {
  margin-bottom: 20px;
}

.notifications-center .notification-subtext {
  color: #5F6368;
  font-size: 14px;
  margin-top: 2px;
}

.notifications-center .notification-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 600;
}

.notifications-center .notification-status-badge.InProgress {
  background-color: var(--menubg);
  color: var(--sitetextcolor);
}

.notifications-center .notification-status-badge.Completed {
  background-color: #E3F2F1;
  color: var(--descriptiontext);
}

.notifications-center .notification-status-icon {
  display: inline-flex;
}

.notifications-center .notification-item {
  padding: 14px 0;
}

.notifications-center .notification-desc {
  font-size: 14px;
  margin: 6px 0 8px 0;
}

.notifications-center .notification-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--descriptiontext);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
}

.offcanvas-sidebar {
  background-color: var(--dropdownpopupbg) !important;
}

.offcanvas-sidebar .title {
  font-family: var(--fontfamily);
  font-weight: bold;
  font-size: 20px;
  margin-left: 0px !important;
  color: var(--sitetextcolor);
}

.offcanvas-sidebar .header {
  padding: 15px 20px 10px 20px !important;
}

.offcanvas-sidebar .body {
  padding-left: 20px !important;
  padding-top: 0px !important;
}

.offcanvas-body .table-body {
  max-height: calc(100% - 140px) !important;
}


.offcanvas-sidebar .body .row {
  margin-top: 20px;
}

input[type="checkbox"].switch-checkbox {
  position: relative;
  width: 36px !important;
  height: 14px !important;
  -webkit-appearance: none;
  appearance: none;
  background-color: #adb5bd;
  outline: none;
  border-radius: 15px !important;
  cursor: pointer;
}

input[type="checkbox"].switch-checkbox::before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  left: 0;
  top: -3px;
  transition: 0.5s;
}

input[type="checkbox"].switch-checkbox:checked::before {
  transform: translateX(100%);
  background: #fff;
}

input[type="checkbox"].switch-checkbox::after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #6c757d;
  left: 0;
  top: -3px;
  transition: 0.5s;
}

input[type="checkbox"].switch-checkbox:checked::after {
  transform: translateX(100%);
  background-color: #b466ce !important;
}

input[type="checkbox"].switch-checkbox:checked {
  background-color: mediumpurple;
}

/* This css has been added for user setup page toggle switch - red/green */

input[type="checkbox"].switch-checkbox.red-green {
  background-color: #EA2238;
  /* track when unchecked */
}

input[type="checkbox"].switch-checkbox.red-green::after {
  background: #EA2238;
  /* inner overlay when unchecked */
}

input[type="checkbox"].switch-checkbox.red-green:checked {
  background-color: #12A88A;
  /* track when checked */
}

input[type="checkbox"].switch-checkbox.red-green:checked::after {
  background-color: #12A88A !important;
  /* inner overlay when checked */
}

/* Custom tooltip - Start */
[data-title]:hover:after {
  opacity: 1;
  transition: all 0.1s ease 0.5s;
  visibility: visible;
}

[data-title]:after {
  content: attr(data-title);
  background-color: var(--tooltipbg);
  color: var(--tooltiptext);
  position: absolute;
  font-size: var(--bs-tooltip-font-size);
  padding: 1px 5px 2px 5px;
  bottom: -1.6em;
  left: 10;
  white-space: nowrap;
  box-shadow: 1px 1px 3px #222222;
  opacity: 0;
  border: 1px solid #111111;
  z-index: 99999;
  visibility: hidden;
}

[data-title] {
  position: relative;
}

/* Custom tooltip - End */
/* Datepicker - Start */
.date-picker {
  display: flex;
  border-radius: 5px;
  background-color: var(--sitebackgroundcolor);
  border: 2px solid var(--inputdefaultbordercolor);
}

.date-picker>input {
  border: none !important;
}

.date-picker:focus-within {
  border: 2px solid var(--inputselectedbordercolor);
  outline: none;
}

.date-picker .icon {
  background: url(../Images/icons/24px/cal.png) no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  background-size: cover;
  margin: 5px 5px 0px 5px;
  border: none;
}



.btn-link {
  --bs-btn-color: #007585 !important;
  --bs-btn-hover-color: #007585 !important;
}

.ngb-dp-weekday {
  color: #007585 !important;
}

/* Datepicker - End */
/* Okta Signin Widget - Start */
#okta-sign-in {
  overflow: unset !important;
}

#okta-signin-submit,
.okta-sign-in-header,
.o-form-head,
.js-help-link,
.email-button,
.button-wide {
  display: none !important;
}

#okta-sign-in.auth-container.main-container {
  border: 0px;
  margin: 0 !important;
  background-color: var(--pageleftnav);
  width: 100%;
  box-shadow: 0 0px 0 hsla(0, 0%, 69%, .12);
  font-family: var(--fontfamily) !important;
}

#okta-sign-in .auth-content {
  padding: 0px !important;
}

#okta-sign-in.auth-container .okta-form-input-field,
#okta-sign-in.auth-container .okta-form-input-field:hover {
  background-color: var(--sitebackgroundcolor);
  border: 2px solid var(--inputdefaultbordercolor);
}

#okta-sign-in.auth-container .okta-form-input-field.focused-input,
#okta-sign-in.auth-container .okta-form-input-field:focus-within {
  border: 2px solid var(--inputselectedbordercolor) !important;
  outline: none !important;
}

.okta-signin-username {
  color: var(--sitetextcolor) !important;
  font-size: 16px;
  font-weight: bold;
}

#okta-sign-in .o-form .o-form-label,
#okta-sign-in .o-form input,
#okta-sign-in .o-form label,
#okta-sign-in .o-form textarea {
  font-size: 16px;
}

#okta-sign-in .focused-input,
#okta-sign-in input[type=text]:focus {
  box-shadow: none !important;
}

#okta-sign-in input[type=text],
#okta-sign-in input[type=password] {
  border-radius: 5px !important;
  height: 100% !important;
  margin: 0px 0px 0px 0px !important;
  padding: 0px 12px 0px 12px !important;
}

.okta-help-message {
  color: var(--errorcolor) !important;
  background: var(--errorbg) !important;
}

#okta-sign-in .siw-main-header .beacon-container {
  display: none !important;
}

#okta-sign-in .siw-main-view .siw-main-body .identifier-container {
  margin-bottom: 0px !important;
}

#okta-sign-in .siw-main-view .siw-main-body .identifier {
  font-size: 16px !important;
  font-weight: bold !important;
}

#okta-sign-in .o-form-input .o-form-explain {
  display: none !important;
}

#okta-sign-in .siw-main-footer .auth-footer .link.js-unlock {
  display: none !important;
}

#okta-sign-in .siw-main-footer .auth-footer .link.js-help {
  display: none !important;
}

#okta-sign-in .siw-main-footer .auth-footer .link.js-custom {
  padding-bottom: 18px;
}

/* Okta Signin Widget - END */

/*Defined Contributions card start */

.mp-account-card {
  background-color: var(--sitebackgroundcolor) !important;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ACC0C4 !important;
  width: 99%;
}

.mp-account-card .title {
  text-align: center;
  font-weight: bold
}

.mp-account-card.selected {
  background-color: #E5EFF0 !important;
  border: 1px solid black !important;
}

.mp-account-summary-card {
  font-size: 14px;
  background-color: var(--sitebackgroundcolor);
  border: 1px solid #ACC0C4;
  border-left: 3px solid var(--primary) !important;
  min-height: 150px !important;
  padding: 10px 12px 10px 10px !important;
  margin-right: 20px;
  margin-bottom: 15px;
  width: 400px;
}

.mp-account-summary-card .title {
  font-size: 16px !important;
}

.withdrawal-group-card {
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #DFECE6;
  padding: 20px !important;
  margin: 0px 30px 0px 0px !important;
}

.withdrawal-group-card .title {
  font-size: 18px !important;
  font-weight: bold !important;
}

.withdrawal-amount-card {
  margin: 0px 0px 20px 0px !important;
  padding: 20px !important;
  background-color: var(--sitebackgroundcolor) !important;
  height: fit-content;
  border: 1px solid #ACC0C4 !important;
}


.withdrawal-top-border {
  border-top: 3px solid #ACC0C4 !important;
  padding-top: 20px !important;
}

.left-panel {
  background-color: var(--pageleftnav);
  overflow: auto;
  height: auto !important;
  position: relative;
  min-height: 44px;
}


.left-panel .selected {
  background-color: #E0E0E0;
  transition: height 0.3s ease;
}

.dc-rowtitle {
  cursor: pointer;
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/*End - Defined Contributions*/


.ng2-pdf-viewer-container {
  width: 93% !important;
  height: 90% !important;
  margin-left: 40px;
}

.pdfViewer .page {
  width: fit-content !important;
}

.textLayer,
.canvasWrapper {
  /* position: relative;*/
  width: 100%;
  height: auto !important;
  transform: scale(1);
  transform-origin: 0 0;
}

.toolbar {
  position: relative;
  inset-inline: 0;
  cursor: default;
  font: message-box;
  box-shadow: 0px 1px 0px 0px var(--primarybuttonbg);
  height: 30px;
  background-color: var(--primarybuttonbg);
  box-shadow: var(--toolbar-box-shadow);
  border-bottom: var(--toolbar-border-bottom);
  padding-top: 5px;
}

.toolbar-button {
  background-color: var(--primarybuttonbg);
  border: none;
  vertical-align: top;
}

.toolbar-next::after {
  content: "\003E";
  vertical-align: top;
  color: var(--toolbar-label-color);
}

.toolbar-prev::before {
  content: "\003C";
  vertical-align: top;
  color: var(--toolbar-label-color);
}

.toolbar-split::before {
  content: "\0196";
  vertical-align: top;
  color: var(--toolbar-label-color);
}

.toolbar-zoomIn::before {
  content: "\002B";
  vertical-align: top;
  color: var(--toolbar-label-color);
  font-weight: 900;
}

.toolbar-zoomOut::before {
  content: "\2212";
  vertical-align: top;
  color: var(--toolbar-label-color);
  font-weight: 900;
}


.status-success {
  color: var(--successcolor);
}

.status-caution {
  color: var(--cautioncolor);
}

.status-error {
  color: var(--errorcolor);
}

.flag-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  margin-right: 4px;
}

.flag-icon-green {
  background-image: url(../Images/icons/24px/flagfullgreen.png);
}

.flag-icon-yellow {
  background-image: url(../Images/icons/24px/flagfullyellow.png);
}

.flag-icon-red {
  background-image: url(../Images/icons/24px/flagfullred.png);
}

.flag-icon-approve {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(../Images/icons/32px/approve.png) no-repeat center;
  background-size: contain;
  vertical-align: middle;
  margin-right: 4px;
}

.content-toolbar .notes-submit {
  background: url(../Images/icons/24px/submit.png) no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  background-size: cover;
  margin: 0px 10px 0px 10px;
}



.page-container-with-right-nav {
  width: calc(100% - var(--pagerightnavwidth));
}

.page-right-navigation {
  width: var(--pagerightnavwidth);
  height: 100%;
  padding-left: 20px;
  padding-bottom: 20px;
}


.page-right-navigation .panelbox {
  background: var(--pagebodybg);
  border-radius: 0px !important;
  border: 0 !important;
  padding: 0px !important;
  margin-bottom: 15px;
}

.page-right-navigation .panelbox.transparent {
  background: transparent !important;
}

.page-right-navigation .panelbox .header {
  /*border-bottom: 1px solid #ACC0C4 !important;*/
  padding: 0px !important;
}

.page-right-navigation .panelbox .header i:after,
.accordion-toggle-icon:after {
  content: "\2212";
  vertical-align: middle;
  font-weight: bold;
}

.page-right-navigation .panelbox .header .collapsed i:after,
.collapsed .accordion-toggle-icon:after {
  content: "\002B";
}

.page-right-navigation .panelbox .header .title {
  font-family: var(--fontfamily);
  font-weight: bold;
  font-size: 16px;
  margin-left: 0px !important;
  color: var(--sitetextcolor);
}

/* Steps */
.step {
  position: relative;
  min-height: 44px;
  color: gray;
  z-index: 2;
}

.step+.step {
  margin-top: 0px;
}

.step>div:first-child {
  position: static;
  height: 0;
}

.step>div:not(:first-child) {
  margin-left: 10px;
  padding-left: 16px;
}

.step.step-active {
  font-weight: bold;
}

.step.step-active .circle {
  background-color: #4285f4;
}

.step-complete-icon {
  background: url(../Images/icons/16px/checkrnd.png) no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
  content: '';
  border: none !important;
}

.task-step-disabled {
  color: #ACC0C4;
}

.task-step-active,
.task-step-active.selected,
.task-step-active:hover {
  color: #6881A0 !important;
  font-weight: bold !important;
}

.task-step-inactive {
  color: var(--sitetextcolor);
}

.step-seq {
  font-size: 11px;
  display: flex;
  justify-content: center;
}

/* Circle */
.circle {
  background: gray;
  position: relative;
  width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 100%;
  color: #fff;
  text-align: center;
  box-shadow: 0 0 0 3px #fff;
}

.circle.completed {
  background: black !important;
  box-shadow: 0 0 0 1px black;
}

.circle.active {
  background: #6881A0 !important;
  color: #6881A0 !important;
  box-shadow: 0 0 0 1px #6881A0;
}

.circle.disabled {
  background: var(--pageleftnav) !important;
  color: #ACC0C4 !important;
  box-shadow: 0 0 0 1px #ACC0C4;
}

/* Vertical Line */
.circle:before {
  content: ' ';
  position: absolute;
  display: block;
  /*top: 1px;
  bottom: 1px;*/
  right: 50%;
  left: 50%;
  height: 100%;
  width: 1px;
  transform: scale(2, 3);
  transform-origin: 50% 100%;
  background-color: black;
  z-index: -1;
}

.circle.disabled:before {
  transform: scale(1, 3) !important;
  background-color: rgba(0, 0, 0, 0.25) !important;
}

.step:first-child .circle:before,
.step:first-child .circle.disabled:before {
  display: none
}

/* Stepper Titles */
.step-title {
  line-height: 16px;
}

.menu-item-toggle.show::after,
.popup-dropdown .toggle.show::after,
.dropdown-icon-before .toggle.show::before {
  background: url(../Images/icons/24px/chevron-up.png) no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  content: '';
  border: none !important;
}

.menu-item-toggle::after,
.popup-dropdown .toggle::after,
.dropdown-icon-before .toggle::before {
  background: url(../Images/icons/24px/chevron-down.png) no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  content: '';
  border: none !important;
}


.inactive-withdrawal-sub-title {
  margin-left: 10px;
  font-size: 14px;
}

.disabled-tags {
  color: #ffffff !important;
  background-color: var(--primarybuttonbg);
  margin-bottom: 2px !important;
  border-radius: 2px;
  margin-right: 4px;
  display: inline-block;
  padding-left: 8px;
  padding-right: 8px;
}

.right-nav-links {
  color: blue;
  cursor: pointer;
}


.checked-icon {
  background: url(../Images/icons/32px/check.png) no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  background-size: cover;
  cursor: pointer;
  margin-left: 10px;
}

.address-dropdown {
  font-size: 18px;
  font-weight: bold;
}

.address-dropdown .row {
  margin: 0px !important;
}

.check-box-grey {
  accent-color: #4A4A4A;
}

.check-box-flyout {
  accent-color: #007585;
  width: 15px;
  height: 15px;
  min-width: 15px;
  cursor: pointer;
}

.summary-panel-container {
  margin-bottom: 25px;
  margin-right: 25px;
}


.nav-card {
  border-radius: 5px;
  background-color: #FFFFFF !important;
  width: 190px;
  height: 200px;
}

.nav-card .nav-card-body {
  font-size: 14px !important;
  padding: 10px !important;
}

.nav-card .nav-card-title {
  font-size: 16px !important;
  font-weight: bold !important;
  color: var(--pageSubTitletext);
  margin-top: var(--bs-card-title-spacer-y);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

}

.nav-card .nav-card-text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* MultiSelect Dropdown - Start */
.multiselect-dropdown {
  border: 2px solid var(--inputdefaultbordercolor);
  border-radius: 5px;
  background-color: white;
  min-height: 43px !important;
}

.multiselect-dropdown:focus-within {
  border: 2px solid var(--inputselectedbordercolor) !important;
  outline: none;
}

.multi-select-disabled {
  pointer-events: none
}

.dropdown-multiselect__caret {
  top: unset !important;
  transform: none !important;
}

.multiselect-dropdown .dropdown-multiselect__caret:before {
  border-color: var(--sitetextcolor) transparent !important;
}

.multiselect-dropdown .dropdown-btn .selected-item {
  display: inline-block !important;
  max-width: 100% !important;
  margin-bottom: 2px !important;
  cursor: pointer !important;
  background-color: var(--primarybuttonbg) !important;
}

.multiselect-dropdown .dropdown-btn {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  padding-left: 12px !important;
  padding-right: 32px !important;
  border: 0px !important;
}

.multiselect-dropdown .dropdown-list {
  position: absolute;
}

/* MultiSelect Dropdown - End */
.nav-selected {
  background-color: #E0E0E0 !important;
}


/* File upload container styles */
.file-upload-container {
  flex: 1;
  background-color: #ecf4f6;
  height: 40px;
}

.file-upload-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.file-upload-name {
  margin-left: 5px;
}

.file-upload-toolbar {
  margin-right: 5px;
}

.hide-upload-button {
  margin-top: 10px;
}

/* Circle */
.circle {
  background: gray;
  position: relative;
  width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 100%;
  color: #fff;
  text-align: center;
  box-shadow: 0 0 0 3px #fff;
}

.circle.processing {
  background: black !important;
  box-shadow: 0 0 0 1px black;
}

.circle.pending {
  background: black !important;
  box-shadow: 0 0 0 1px black;
}

.circle.warning {
  background: black !important;
  box-shadow: 0 0 0 1px black;
}

.circle.complete-with-errors {
  background: black !important;
  box-shadow: 0 0 0 1px black;
}

.circle.disabled {
  color: #ACC0C4 !important;
  box-shadow: 0 0 0 1px #ACC0C4;
  opacity: 1 !important;
}

.step-complete-icon {
  background: url(../Images/icons/16px/checkrnd.png) no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
  content: '';
  border: none !important;
}

.step-warning-icon {
  background: url(../Images/icons/16px/checkrnd.png) no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
  content: '';
  border: none !important;
}

.group-step {
  padding-left: 5px !important;
}

.group-count {
  padding-left: 20px !important;
}


.close-task {
  height: 20px !important;
  width: 20px !important;
  padding: 0px 9px 0px 9px !important;
  background: url(../Images/icons/24px/close-task.png) no-repeat center;
  border: none;
}

 .launch-icon {
  background: url(../Images/icons/24px/linkinternal.png) no-repeat center;
  background-size: cover;
  width: 24px;
  height: 24px;
  display: inline-block;
  flex-shrink: 0;
}

/* Dashboard - welcome carousel */
.dashboard-welcome {
  background-color: #E5EFF0;
}

.dashboard-home-banner {
  display: flex;
  align-items: stretch;
  min-height: 320px;
}

.dashboard-home-banner-left {  
  display: flex;
  flex-direction: column;  
  padding-right: 20px;
  background-color: #FFFFFF;
}

.dashboard-home-banner-right {  
  position: relative;
}

.dashboard-home-banner-right::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 160px;
  background: linear-gradient(to right, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 1;
  pointer-events: none;
}

.dashboard-home-banner-title {
  font-weight: bold;
  font-size: 22px;
  color: var(--sitetextcolor);
}

.dashboard-home-banner-image {
  min-height: 320px;
  background-repeat: no-repeat;
  background-size: 100.3% 320px;
}

.dashboard-carousel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dashboard-carousel-caption {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding:20px;
}

.dashboard-carousel-title {
  font-weight: bold;
  font-size: 18px;
  color: var(--sitetextcolor);
}

.dashboard-carousel-description {
  font-size: 14px;
  color: var(--sitetextcolor);
}

.dashboard-carousel-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.dashboard-carousel-icon-btn {
  border: none;
  border-radius: 50%;
  background: #C1C1C1;
  color: var(--sitetextcolor);
  cursor: pointer;
}

.dashboard-carousel-nav {
  width: 40px;
  height: 40px;
  font-size: 20px;
  /* line-height: 1; */
}

.dashboard-carousel-indicators {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dashboard-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ACC0C4;
  cursor: pointer;
}

.dashboard-carousel-dot.active {
  background: var(--sitetextcolor);
}

/* Dashboard - cards grid (Bootstrap .row/.col-* for responsive layout, capped container width so cards don't stretch) */
.dashboard-cards-container {
  max-width: 1060px;
  margin: 0 auto;
  position: relative;  
}

.dashboard-cards-container .row + .row {
  margin-top: 0px;
}

.dashboard-cards-container .row {
  align-items: stretch;
}

.dashboard-cards-row-overlap {
  margin-top: -30px;
  position: relative;
  z-index: 2;
}

.dashboard-card-col {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.dashboard-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 500px;
  max-width: 480px;
  background: var(--sitebackgroundcolor);
  border: 1px solid #ACC0C4;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  padding: 12px;
}

@media only screen and (max-width: 600px) {
  .dashboard-card {
    max-width: 400px;
  } 
}


@media only screen and (min-width: 601px) and (max-width: 992px) {
  .dashboard-card {
    max-width: 450px;
  } 
}

.dashboard-card .formLabel {
  font-size: 12px !important;
  font-weight: normal !important;
  color: #5D6872 !important;
}

.dashboard-card .formValue {
  font-size: 20px !important;
  font-weight: bold !important;
  color: #212121;
}

/* Small/large cards share width + row-based equal-height stretch; min-height and any
   future visual divergence between the two card types are kept separate here. */
.dashboard-card-small {
  min-height: 150px;
}

.dashboard-card-large {
  min-height: 320px;
}

.dashboard-card-title {
  font-weight: bold;
  font-size: 16px;
  color: #212121;
}

.dashboard-card-link {
  margin-top: 8px;
  color: var(--descriptiontext);
  text-decoration: underline;
  cursor: pointer;
  width: fit-content;
  display: inline-block;
}

.dashboard-key-date-label tooltip {
  display: inline-block;
  vertical-align: middle;
}

.dashboard-key-date-value {
  font-size: 20px;
  font-weight: bold;
  color: #212121;
}



.dashboard-key-date-badge {
  background: #EFEFEF;
  color: #616161;
  font-weight: normal;
}

.dashboard-key-date-badge-reached {
  background: var(--notificationbg);
  color: var(--notificationcolor);
}


@media screen and (max-width: 768px) {
  .dashboard-home-banner {
    flex-direction: column;
  }

  .dashboard-home-banner-left,
  .dashboard-home-banner-right {
    width: 100%;
  }

  .dashboard-home-banner-left {
    padding: 16px;
  }

  .dashboard-home-banner-image {
    min-height: 200px;
  }

  .dashboard-home-banner-right::before {
    width: 100%;
    height: 80px;
    background: linear-gradient(to bottom, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
  }
}