@charset "UTF-8";

@font-face {
  font-family: "benelizericons";
   src: url("../fonts/benelizericons.woff") format("woff"),
    url("../fonts/benelizericons.ttf") format("truetype"),
    url("../fonts/benelizericons.svg#benelizericons") format("svg");
  font-weight: normal;
  font-style: normal;
}


[data-icon]:before {
  font-family: "benelizericons" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 23px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "benelizericons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 23px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


div:focus {
  outline: none;
  box-shadow: none;
}

.maxWidth300 {
 max-width:300px;
}

.hi58 {
  height: 58px; 
}

.hi34 {
  height: 34px; 
}

.hi32 {
  height: 32px; 
}

.icon-add-circle-outline:before {
  content: "\61";
}
.icon-arow-drop-down:before {
  content: "\62";
}
.icon-arow-drop-up:before {
  content: "\63";
}
.icon-assignment-late:before {
  content: "\64";
}
.icon-cancel:before {
  content: "\65";
}
.icon-chat-gpt:before {
  content: "\66";
}
.icon-check:before {
  content: "\67";
}
.icon-check-box:before {
  content: "\68";
}
.icon-check-box-outline-blank:before {
  content: "\69";
}
.icon-check-circle:before {
  content: "\6a";
}
.icon-clear:before {
  content: "\6b";
}
.icon-clear-all:before {
  content: "\6c";
}
.icon-dashboard:before {
  content: "\6d";
}
.icon-keyboard-arrow-left:before {
  content: "\6e";
}
.icon-indeterminate-check-box:before {
  content: "\6f";
}
.icon-edit:before {
  content: "\70";
}
.icon-history:before {
  content: "\71";
}
.icon-delete:before {
  content: "\72";
}
.icon-display-settings:before {
  content: "\73";
}
.icon-download:before {
  content: "\74";
}
.icon-error:before {
  content: "\75";
}
.icon-expand-less:before {
  content: "\76";
}
.icon-expand-more:before {
  content: "\77";
}
.icon-filter-alt:before {
  content: "\78";
}
.icon-first-page:before {
  content: "\79";
}
.icon-help:before {
  content: "\7a";
}
.icon-keyboard-arrow-right:before {
  content: "\41";
}
.icon-last-page:before {
  content: "\42";
}
.icon-live-help:before {
  content: "\43";
}
.icon-logout:before {
  content: "\44";
}
.icon-people-alt:before {
  content: "\45";
}
.icon-radio-button-checked:before {
  content: "\46";
}
.icon-radio-button-unchecked:before {
  content: "\47";
}
.icon-refresh:before {
  content: "\48";
}
.icon-search:before {
  content: "\49";
}
.icon-select-all:before {
  content: "\4a";
}
.icon-sim-card-download:before {
  content: "\4b";
}
.icon-sort-ascending:before {
  content: "\4c";
}
.icon-sort-decending:before {
  content: "\4d";
}
.icon-sort-default:before {
  content: "\4e";
}
.icon-tune:before {
  content: "\4f";
}
.icon-warning:before {
  content: "\50";
}
.icon-123:before {
  content: "\51";
}
.icon-calendar-month:before {
  content: "\52";
}
.icon-calendar-today:before {
  content: "\53";
}
.icon-description:before {
  content: "\54";
}
.icon-edit-off:before {
  content: "\55";
}
.icon-email:before {
  content: "\56";
}
.icon-emergency:before {
  content: "\57";
}
.icon-http:before {
  content: "\58";
}
.icon-image:before {
  content: "\59";
}
.icon-palette:before {
  content: "\5a";
}
.icon-password:before {
  content: "\30";
}
.icon-phone:before {
  content: "\31";
}
.icon-schedule:before {
  content: "\32";
}
.icon-font-download:before {
  content: "\33";
}
.icon-account-box:before {
  content: "\34";
}
.icon-account-circle:before {
  content: "\35";
}
.icon-ads-click:before {
  content: "\36";
}
.icon-analytics:before {
  content: "\37";
}
.icon-archive:before {
  content: "\38";
}
.icon-bar-chart:before {
  content: "\39";
}
.icon-bookmark:before {
  content: "\21";
}
.icon-bookmark-border:before {
  content: "\22";
}
.icon-chat-bubble:before {
  content: "\23";
}
.icon-chat-bubble-outline:before {
  content: "\24";
}
.icon-circle-notifications:before {
  content: "\25";
}
.icon-comment:before {
  content: "\26";
}
.icon-content-copy:before {
  content: "\27";
}
.icon-folder-copy:before {
  content: "\28";
}
.icon-folder:before {
  content: "\29";
}
.icon-flag-circle:before {
  content: "\2a";
}
.icon-file-upload:before {
  content: "\2b";
}
.icon-file-download:before {
  content: "\2c";
}
.icon-file-copy:before {
  content: "\2d";
}
.icon-error-outline:before {
  content: "\2e";
}
.icon-emergency-recording:before {
  content: "\2f";
}
.icon-donut-large:before {
  content: "\3a";
}
.icon-data-usage:before {
  content: "\3b";
}
.icon-data-saver-off:before {
  content: "\3c";
}
.icon-data-exploration:before {
  content: "\3d";
}
.icon-copy-all:before {
  content: "\3e";
}
.icon-folder-open:before {
  content: "\3f";
}
.icon-format-list-bulleted:before {
  content: "\40";
}
.icon-format-list-numbered:before {
  content: "\5b";
}
.icon-group:before {
  content: "\5d";
}
.icon-groups:before {
  content: "\5e";
}
.icon-inventory:before {
  content: "\5f";
}
.icon-list:before {
  content: "\60";
}
.icon-manage-accounts:before {
  content: "\7b";
}
.icon-message:before {
  content: "\7c";
}
.icon-notification-important:before {
  content: "\7d";
}
.icon-notifications:before {
  content: "\7e";
}
.icon-notifications-none:before {
  content: "\5c";
}
.icon-people:before {
  content: "\e000";
}
.icon-trending-up:before {
  content: "\e001";
}
.icon-show-chart:before {
  content: "\e002";
}
.icon-settings-power:before {
  content: "\e003";
}
.icon-settings:before {
  content: "\e004";
}
.icon-save:before {
  content: "\e005";
}
.icon-radar:before {
  content: "\e006";
}
.icon-question-answer:before {
  content: "\e007";
}
.icon-query-stats:before {
  content: "\e008";
}
.icon-power-settings-new:before {
  content: "\e009";
}
.icon-pie-chart-outline:before {
  content: "\e00a";
}
.icon-pie-chart:before {
  content: "\e00b";
}
.icon-person-outline:before {
  content: "\e00c";
}
.icon-person:before {
  content: "\e00d";
}
.icon-troubleshoot-1:before {
  content: "\e00e";
}
.icon-troubleshoot:before {
  content: "\e00f";
}
.icon-upload-file:before {
  content: "\e010";
}
.icon-view-quilt:before {
  content: "\e011";
}
.icon-warning-amber:before {
  content: "\e012";
}
.icon-web-stories:before {
  content: "\e013";
}


.icon-home:before {
  content: "\e900";
}
.icon-file-empty:before {
  content: "\e924";
}
.icon-files-empty:before {
  content: "\e925";
}
.icon-file-text2:before {
  content: "\e926";
}
.icon-copy:before {
  content: "\e92c";
}
.icon-stack:before {
  content: "\e92e";
}
.icon-compass:before {
  content: "\e949";
}
.icon-printer:before {
  content: "\e954";
}
.icon-box-add:before {
  content: "\e95e";
}
.icon-box-remove:before {
  content: "\e95f";
}
.icon-bubble:before {
  content: "\e96b";
}
.icon-bubbles:before {
  content: "\e96c";
}
.icon-bubbles2:before {
  content: "\e96d";
}
.icon-bubble2:before {
  content: "\e96e";
}
.icon-bubbles3:before {
  content: "\e96f";
}
.icon-bubbles4:before {
  content: "\e970";
}
.icon-user-plus:before {
  content: "\e973";
}
.icon-user-minus:before {
  content: "\e974";
}
.icon-user-check:before {
  content: "\e975";
}
.icon-enlarge:before {
  content: "\e989";
}
.icon-enlarge2:before {
  content: "\e98b";
}
.icon-shrink2:before {
  content: "\e98c";
}
.icon-lock:before {
  content: "\e98f";
}
.icon-cog:before {
  content: "\e994";
}
.icon-cogs:before {
  content: "\e995";
}
.icon-stats-bars:before {
  content: "\e99c";
}
.icon-stats-bars2:before {
  content: "\e99d";
}
.icon-rocket:before {
  content: "\e9a5";
}
.icon-target:before {
  content: "\e9b3";
}
.icon-switch:before {
  content: "\e9b6";
}
.icon-cloud-download:before {
  content: "\e9c2";
}
.icon-cloud-upload:before {
  content: "\e9c3";
}
.icon-sphere:before {
  content: "\e9c9";
}
.icon-earth:before {
  content: "\e9ca";
}
.icon-link:before {
  content: "\e9cb";
}
.icon-flag:before {
  content: "\e9cc";
}
.icon-attachment:before {
  content: "\e9cd";
}
.icon-happy:before {
  content: "\e9df";
}
.icon-sad:before {
  content: "\e9e5";
}
.icon-neutral:before {
  content: "\e9f7";
}
.icon-cross:before {
  content: "\ea0f";
}
.icon-play2:before {
  content: "\ea15";
}
.icon-pause:before {
  content: "\ea16";
}
.icon-stop:before {
  content: "\ea17";
}
.icon-previous:before {
  content: "\ea18";
}
.icon-next:before {
  content: "\ea19";
}
.icon-backward:before {
  content: "\ea1a";
}
.icon-forward2:before {
  content: "\ea1b";
}
.icon-play3:before {
  content: "\ea1c";
}
.icon-pause2:before {
  content: "\ea1d";
}
.icon-stop2:before {
  content: "\ea1e";
}
.icon-backward2:before {
  content: "\ea1f";
}
.icon-forward3:before {
  content: "\ea20";
}
.icon-first:before {
  content: "\ea21";
}
.icon-last:before {
  content: "\ea22";
}
.icon-previous2:before {
  content: "\ea23";
}
.icon-next2:before {
  content: "\ea24";
}
.icon-arrow-up:before {
  content: "\ea32";
}
.icon-arrow-right:before {
  content: "\ea34";
}
.icon-arrow-down:before {
  content: "\ea36";
}
.icon-arrow-left:before {
  content: "\ea38";
}
.icon-arrow-right2:before {
  content: "\ea3c";
}
.icon-arrow-left2:before {
  content: "\ea40";
}
.icon-circle-up:before {
  content: "\ea41";
}
.icon-circle-right:before {
  content: "\ea42";
}
.icon-circle-down:before {
  content: "\ea43";
}
.icon-circle-left:before {
  content: "\ea44";
}
.icon-sort-alpha-asc:before {
  content: "\ea48";
}
.icon-sort-alpha-desc:before {
  content: "\ea49";
}
.icon-filter:before {
  content: "\ea5b";
}
.icon-table:before {
  content: "\ea70";
}
.icon-table2:before {
  content: "\ea71";
}
.icon-hangouts:before {
  content: "\ea8e";
}
.icon-compas:before {
  content: "\eadd";
}
.icon-file-pdf:before {
  content: "\eadf";
}
.icon-file-excel:before {
  content: "\eae2";
}


i.iconBig {
  font-size: 28px;
  line-height: 28px;
  height: 28px;
}

i.icon {
  font-size: 24px;
  line-height: 23px;
  height: 24px;
}

i.iconSmal {
  font-size: 20px;
  line-height: 19px;
  height: 20px;
}

i.iconSmal2 {
  font-size: 18px;
  line-height: 17px;
  height: 18px;
}

i.iconSmal3 {
  font-size: 16px;
  line-height: 15px;
  height: 16px;
}

.iconSmall20 { margin-top:4px; height:28px; width:28px; }

i.icon:not(i.icon.loader){
  background: unset ;
}

i.iconSmall:not(i.iconSmall.loader){
  background: unset ;
}

h1,h2,h3,h4,h5,h6,p{
  background: none !important;
}

.logo {
  background-image: url(../simg/misc/logo.svg);
  height: 48px;
  width: 173px;
}

.logo-white {
  background-image: url(../simg/misc/logoWhite.svg);
  height: 48px;
  width: 173px;
}

.logo-white-text {
  background-image: url(../simg/misc/logoWhiteText.svg);
  height: 48px;
  width: 173px;
}

@font-face {
  font-family: 'playbold';
  src: url('../fonts/play-bold-webfont.woff2') format('woff2'),
    url('../fonts/play-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'playregular';
  src: url('../fonts/play-regular-webfont.woff2') format('woff2'),
    url('../fonts/play-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}


@font-face {
  font-family: 'noto_sansregular';
  src: url('../fonts/notosans-regular-webfont.woff2') format('woff2'),
    url('../fonts/notosans-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'noto_sansregular-mono';
  src: url('../fonts/notosans-mono-regular-webfont.woff2') format('woff2'),
    url('../fonts/notosans-mono-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


body {
  display: flex;
  margin:0;
  flex-direction: column;
  font-family: 'noto_sansregular';
  font-size: 0.85rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
ol,ul,
label,
small {
  font-family: 'noto_sansregular';
  color: #111111;
  margin: 0;
}


b,
em {
  font-family: 'noto_sansregular';
  color: #000000;
  font-weight: 600;
}

h1 {
  font-size: 36px;
  line-height: 44px;
}

h2 {
  font-size: 32px;
  line-height: 40px;
}

h3 {
  font-size: 28px;
  line-height: 36px;
}

h4 {
  font-size: 24px;
  line-height: 32px;
}

h5 {
  font-size: 16px;
  line-height: 28px;
}

h6 {
  font-size: 14px;
  line-height: 24px;
}

p,
span,
label,th {
  font-size: 16px;
  line-height: 24px;
}


ol,
ul {
  font-size: 100%;
  line-height: 140%;
}

p.small,
span.small,
.card p,
.dialog p.content,
.dialog .content p,
.dialog .content ul,
.dialog .content ol,
.dialog ul.content,
.dialog ol.content,
.sidebar 
{
  font-size: 13px;
  line-height: 19px;
}

ol,ul,
ol.content,ul.content,
.dialog .container ol.content,.dialog .container ul.content,
.card ol.content,.card ul.content,.sidebar {
  flex-direction: column;
  padding-left: 36px;
  margin: 0;
}
.title {
  font-family: 'playregular';
  color: #0F4155;
}

.content {
  padding: 0px 16px;
  flex-grow: 1;
  display: flex;
}
.row ,.column{
  flex-grow: 1;
  display: flex;
  gap: 16px;
  width: 100%;
  overflow: hidden;
}
.row {
  flex-flow: row;
}

.column {
  flex-flow: column;
}

.width-500,
.width-475,
.width-450,
.width-425,
.width-400,
.width-390,
.width-375,
.width-350,
.width-325,
.width-300,
.width-375,
.width-350,
.width-325,
.width-300,
.width-275,
.width-250,
.width-225,
.width-200,
.width-175,
.width-150 {
  flex-grow: 0;
  flex-shrink: 0;
}
.width-full{
  width: 100%!important;
}
.width-500{
  width: 500px!important;
}
.width-475{
  width: 475px!important;
}
.width-450{
  width: 450px!important;
}
.width-425{
  width: 425px!important;
}
.width-400{
  width: 400px!important;
}
.width-390{
  width: 389px!important;
}
.width-375{
  width: 375px!important;
}
.width-350{
  width: 350px!important;
}
.width-325{
  width: 325px!important;
}
.width-300{
  width: 300px!important;
}
.width-275{
  width: 275px!important;
}
.width-250{
  width: 250px!important;
}
.width-225{
  width: 225px!important;
}

.width-200{
  width: 200px!important;
}

.width-175{
  width: 175px!important;
}

.width-150{
  width: 150px!important;
}

.height-full{
  height: 100%;
  height: auto;
  flex-grow: 1;
}

.height-500{
  height: 500px!important;
}

.height-475{
  height: 475px!important;
}

.height-450{
  height: 450px!important;
}
.height-425{
  height: 425px!important;
}
.height-400{
  height: 400px!important;
}
.height-375{
  height: 375px!important;
}
.height-350{
  height: 350px!important;
}
.height-325{
  height: 325px!important;
}
.height-300{
  height: 300px!important;
}
.height-275{
  height: 275px!important;
}
.height-250{
  height: 250px!important;
}
.height-225{
  height: 225px!important;
}

.height-200{
  height: 200px!important;
}

.height-175{
  height: 175px!important;
}

.height-150{
  height: 150px!important;
}

.util.title {
  display: flex;
  gap: 8px;
  align-items:center;
}

.util.title .nav.nav-pills li a {
  padding:6px;
}

.topNav h1.util.title{
  color:#ffffff;
}

.util-swatch {
  display: flex;
  align-items: center;
  gap: 4px;
  width: auto;
  flex-grow: 0;
  flex-shrink: 1;
}

.box {
  display: flex;
}

hr {
  height: 1px;
  width: 100%;
  background-color: #E3E3E3;
  border-radius: 1px;
  border: 0;
}

.size-4 {
  width: 4px;
  height: 4px;
}

.size-8 {
  width: 8px;
  height: 8px;
}

.size-16 {
  width: 16px;
  height: 16px;
}

.size-32 {
  width: 32px;
  height: 32px;
}

.size-64 {
  width: 64px;
  height: 64px;
}

.surface-1, .muaColor {
  background: #f0f4f9;   /* #fdfdfe; */
}

.surface-2 {
  background: #f6f8f8;  /* #ffffff; */
}

.surface-3 {
  background: rgba(15, 65, 85, 0.25);
  background-color: #F1F4F5;
}

.surface-content,.card,.dialog .container {
  background: #FFFFFF;
}


.pointer {
cursor:pointer;	
}

.white,
.chip.white button{
  color: #FFFFFF;
  background: #FFFFFF;
  border-color: #FFFFFF;
}

.black,
.chip.black button {
  color: #333333;
  background: #333333;
  border-color: #333333;
}

.blue,
.chip.blue button,
.nav.nav-tabs li a,
.nav.nav-pills li a,
.sidebar-body button{
  color: #0F4155;
  background: #0F4155;
  border-color: #0F4155;
}


.cyanb,
.chip.cyanb button {
  color: #ffffff !important;
  background: #6f8d99;
  border-color: #6f8d99;
}


.cyan,
.chip.cyan button {
  color: #288791;
  background: #288791;
  border-color: #288791;
}

.green,
.chip.green button {
  color: #257C5F;
  background: #257C5F;
  border-color: #257C5F;
}

.red,
.chip.red button {
  color: #CF2E2B;
  background: #CF2E2B;
  border-color: #CF2E2B;
}

.red2,
.chip.red button {
  color: #ff4E3B;
}

.red3,
.chip.red button {
  color: #ff7E6B;
  padding: 0px !important;
  margin: 0px !important;
}


.yellow,
.chip.yellow button {
  color: #FCB123;
  background: #FCB123;
  border-color: #FCB123;
}

.lightGrey,
.chip.yellow button {
  color: #d1d1d1;
  background: #d1d1d1;
  border-color: #d1d1d1;
}

.next {
  background: #8B8B8B;
}

.elevation-1,
.card.elevated,
.elevated,
.sidebar,
.main-content-container   {
  box-shadow: 1px 1px 8px -4px rgba(0,0,0,0.55);    /* 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); */
  border: 0px solid #b3b3b3 !important;
}


.card.shadow{
  border: 1px solid #b3b3b3 !important;
  box-shadow: 1px 1px 8px -4px rgba(0,0,0,0.55);
  /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); */
}


.elevation-2,
.dropdown-menu {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); */
}


option {
  background-color: #0f4155;  /* 3f6770; */
  color: #ffffff;
}

.select select:focus > option:checked{
  background-color: #0f4155;
  color: #ffffff;
  font-weight: bold;
}


.elevation-3 {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.elevation-4 {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.elevation-5,
.dialog .container {
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
}

.elevation-6 {
  box-shadow: 0 29px 52px rgba(0, 0, 0, 0.40), 0 25px 16px rgba(0, 0, 0, 0.20);
}

.elevation-7 {
  box-shadow: 0 45px 65px rgba(0, 0, 0, 0.50), 0 35px 22px rgba(0, 0, 0, 0.16);
}

.elevation-8 {
  box-shadow: 0 60px 80px rgba(0, 0, 0, 0.60), 0 45px 26px rgba(0, 0, 0, 0.14);
}

button.contained.white,
.chip.white,
.chip.white button,
button.contained.yellow,
.chip.yellow,
.chip.yellow button,
span.badge.white,
.badge.white,
span.badge.yellow,
.badge.yellow {
  color: #111111;
}

button.contained.black,
.chip.black,
.chip.black button,
button.contained.blue,
.chip.blue,
.chip.blue button,
button.contained.cyan,
.chip.cyan,
.chip.cyan button,
button.contained.cyanb,
.chip.cyanb,
.chip.cyanb button,
button.contained.green,
.chip.green,
.chip.green button,
button.contained.red,
.chip.red,
.chip.red button,
span.badge.black,
.badge.black,
span.badge.blue,
.badge.blue,
span.badge.cyan,
.badge.cyan,
span.badge.cyanb,
.badge.cyanb,
span.badge.green,
.badge.green,
span.badge.red,
.badge.red,.badge.black b,
span.badge.blue b,
.badge.blue b,
span.badge.cyan b,
.badge.cyan b,
span.badge.cyanb b,
.badge.cyanb b,
span.badge.green b,
.badge.green b,
span.badge.red b,
.badge.red b {
  color: #ffffff;
}


button,
.button,
.chip,
.input input {
  font-size: 14px;
  line-height: 24px;
  font-family: 'noto_sansregular';
  display: flex;
  padding: 7px 6px 5px 6px;
  border-radius: 4px;
  gap: 1px;
  align-items: center;
  width: fit-content;
  justify-content: center;
  border: none;
  transition-duration: .1s;
  transition-timing-function: ease-in-out;
}

.select select,
select,
.input input {
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  font-family: 'noto_sansregular';
  display: flex;
  padding: 6px 26px 6px 6px;
  border-radius: 4px;
  gap: 1px;
  align-items: center;
  width: fit-content;
  justify-content: center;
  border: none;
  transition-duration: .1s;
  transition-timing-function: ease-in-out;
}


button.icon,
.button.icon {
  /* height:unset; */
  padding: 6px;
  border-radius: 100%;
}

button.icon.outline,
.button.icon.outline {
  padding: 4px;
}

button,
.button {
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 23px;
  height:36px;
  flex-shrink: 0;
}

button.contained.white:hover,
.button.contained.white:hover,
button.contained.white:focus,
.button.contained.white:focus,
button.contained.yellow:hover,
.button.contained.yellow:hover,
button.contained.yellow:focus,
.button.contained.yellow:focus {
  color: #333333;
}

button.contained.black:hover,
.button.contained.black:hover,
button.contained.black:focus,
.button.contained.black:focus,
button.contained.blue:hover,
.button.contained.blue:hover,
button.contained.blue:focus,
.button.contained.blue:focus,
button.contained.cyan:hover,
.button.contained.cyan:hover,
button.contained.cyan:focus,
.button.contained.cyan:focus,
button.contained.green:hover,
.button.contained.green:hover,
button.contained.green:focus,
.button.contained.green:focus,
button.contained.red:hover,
.button.contained.red:hover,
button.contained.red:focus,
.button.contained.red:focus {
  color: #ffffff;
}

button.white:hover,
.button.white:hover {
  background-color: rgba(250, 252, 255, 0.8);
}

button.white:focus,
.button.white:focus {
  background-color: rgba(255, 255, 255, 0.8);
}

button.white:active,
.button.white:active {
  background-color: rgba(255, 255, 255, 0.9);
}

button.contained.white:disabled,
.button.contained.white:disabled {
  color: #333333;
  background-color: #949494;
}

button.text.white:hover,
.button.text.white:hover,
button.outline.white:hover,
.button.outline.white:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

button.text.white:focus,
.button.text.white:focus,
button.outline.white:focus,
.button.outline.white:focus {
  background-color: rgba(255, 255, 255, 0.2);
}

button.text.white:active,
.button.text.white:active,
button.outline.white:active,
.button.outline.white:active {
  background-color: rgba(255, 255, 255, 0.3);
}


button.black:hover,
.button.black:hover {
  background-color: rgba(51, 51, 51, 0.7);
}

button.black:focus,
.button.black:focus {
  background-color: rgba(51, 51, 51, 0.8);
}

button.black:active,
.button.black:active {
  background-color: rgba(51, 51, 51, 0.9);
}

button.black:disabled,
.button.black:disabled,
.chip.black button:disabled {
  background-color: #949494;
}

button.text.black:hover,
.button.text.black:hover,
button.outline.black:hover,
.button.outline.black:hover {
  background-color: rgba(51, 51, 51, 0.1);
}

button.text.black:focus,
.button.text.black:focus,
button.outline.black:focus,
.button.outline.black:focus {
  background-color: rgba(51, 51, 51, 0.2);
}

button.text.black:active,
.button.text.black:active,
button.outline.black:active,
.button.outline.black:active {
  background-color: rgba(51, 51, 51, 0.3);
}

button.blue:hover,
.button.blue:hover{
  background-color: #2D6880;

}

button.blue:focus,
.button.blue:focus{
  background-color: #578AA4;
  
}

button.blue:active,
.button.blue:active {
  background-color: #719FB7;
}

button.contained.blue:disabled,
.button.contained.blue:disabled,
.dropdown-menu a:disabled {
  background-color: #516A74;
}

button.outline.blue { background-color: #ffffff; }


button.text.blue:hover,
.button.text.blue:hover,
button.outline.blue:hover,
.button.outline.blue:hover,
.nav.nav-tabs li:hover,
.nav.nav-pills li a:hover,
.dropdown-menu a:hover,
.sidebar-body button:hover {
  background-color: #e3f7ff;    /* rgba(15, 65, 85, 0.1) */
}

button.text.blue:focus,
.button.text.blue:focus,
button.outline.blue:focus,
.button.outline.blue:focus,
.nav.nav-tabs li:focus,
.nav.nav-pills li a:focus,
.dropdown-menu a:focus,
.sidebar-body button:focus  {
  background-color: rgba(15, 65, 85, 0.2);
}


button.text.blue:active,
.button.text.blue:active,
button.outline.blue:active,
.button.outline.blue:active,
.nav.nav-tabs li:active,
.dropdown-menu a:active,
.sidebar-body button:active {
  background-color: rgba(15, 65, 85, 0.3); 
}


button.cyan:hover,
.button.cyan:hover {
  background-color: #2C9BA9;
}

button.cyan:focus,
.button.cyan:focus {
  background-color: #31B0C3;
}

button.cyan:active,
.button.cyan:active {
  background-color: #35C0D6;
}

button.contained.cyan:disabled,
.button.contained.cyan:disabled {
  background-color: #516A74;
}

button.text.cyan:hover,
.button.text.cyan:hover,
button.outline.cyan:hover,
.button.outline.cyan:hover {
  background-color: rgba(40, 135, 145, 0.1);
}

button.text.cyan:focus,
.button.text.cyan:focus,
button.outline.cyan:focus,
.button.outline.cyan:focus {
  background-color: rgba(40, 135, 145, 0.2);
}

button.text.cyan:active,
.button.text.cyan:active,
button.outline.cyan:active,
.button.outline.cyan:active {
  background-color: rgba(40, 135, 145, 0.3);
}

button.green:hover,
.button.green:hover {
  background-color: #2B8C6D;
}

button.green:focus,
.button.green:focus {
  background-color: #2F9979;
}

button.green:active,
.button.green:active {
  background-color: #3FA98B;
}

button.contained.green:disabled,
.button.contained.green:disabled {
  background-color: #788E87;
}

button.text.green:hover,
.button.text.green:hover,
button.outline.green:hover,
.button.outline.green:hover {
  background-color: rgba(37, 124, 95, 0.1);
}

button.text.green:focus,
.button.text.green:focus,
button.outline.green:focus,
.button.outline.green:focus {
  background-color: rgba(37, 124, 95, 0.2);
}

button.text.green:active,
.button.text.green:active,
button.outline.green:active,
.button.outline.green:active {
  background-color: rgba(37, 124, 95, 0.3);
}

button.red:hover,
.button.red:hover {
  background-color: #E13831;
}

button.red:focus,
.button.red:focus {
  background-color: #F04132;
}

button.red:active,
.button.red:active {
  background-color: #EC524D;
}

button.contained.red:disabled,
.button.contained.red:disabled {
  background-color: #A37A7A;
}

button.text.red:hover,
.button.text.red:hover,
button.outline.red:hover,
.button.outline.red:hover {
  background-color: rgba(207, 46, 43, 0.1);
}

button.text.red:focus,
.button.text.red:focus,
button.outline.red:focus,
.button.outline.red:focus {
  background-color: rgba(207, 46, 43, 0.2);
}

button.text.red:active,
.button.text.red:active,
button.outline.red:active,
.button.outline.red:active {
  background-color: rgba(207, 46, 43, 0.3);
}

button.yellow:hover,
.button.yellow:hover {
  background-color: #FDBE27;
}

button.yellow:focus,
.button.yellow:focus {
  background-color: #FEC738;
}

button.yellow:active,
.button.yellow:active {
  background-color: #FED257;
}

button.contained.yellow:disabled,
.button.contained.yellow:disabled {
  background-color: #A69679;
}

button.text.yellow:hover,
.button.text.yellow:hover,
button.outline.yellow:hover,
.button.outline.yellow:hover {
  background-color: rgba(252, 177, 35, 0.1);
}

button.text.yellow:focus,
.button.text.yellow:focus,
button.outline.yellow:focus,
.button.outline.red:focus {
  background-color: rgba(252, 177, 35, 0.2);
}

button.text.yellow:active,
.button.text.yellow:active,
button.outline.yellow:active,
.button.outline.yellow:active {
  background-color: rgba(252, 177, 35, 0.3);
}

button:disabled,
.button:disabled {
  opacity: 0.5;
  /* pointer-events: none; */
  cursor: not-allowed;
}

button.outline {
  padding: 6px 4px 3px 5px;
  border-width: 2px;
  border-style: solid;
}

button.outline,
button.text,
button.icon.outline,
button.icon.text,
.nav.nav-tabs li,
.sidebar-body button{
  background: none;
}

span.badge,
.badge {
  font-size: 11px;
  line-height: 16px;
  border-radius: 8px;
  padding: 2px 4px;
  width: fit-content;
  height: fit-content;
  min-width: 8px;
  text-align: center;
}

span.badge.small,
.badge.small {
  font-size: 0;
  line-height: 6px;
  height: 6px;
  padding: 1px 3px;
  min-width: 0px;
}

.card,
.sidebar,
.main-content-container  {
  display: flex;
  flex-direction: column;
  border: 2px solid #d7d9dC;
}

.card,
.dialog .container,
.main-content-container, .sidebar 
{
  border-radius: 12px;
  padding: 12px 0;
  width: 250px;
}

.card.large {
  width: 500px;
}

.card-head,
.sidebar-head,
.card-body,
.dialog h5,
.dialog .actions,
.dialog .content {
  padding: 0 15px 0px 15px;
}

.sidebar-body{
  padding:0 6px;
}
.dialog .content{
  overflow-y: auto;
    flex-direction: column;
    column-gap: 8px;
}

.card-head,
.sidebar-head,
.dialog h5 {
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
}

.card-body {
  padding-top: 1px;
  display: flex;
  flex-direction: column;
  row-gap: 0px;             /*  we space vertically manually */
}

.sidebar-body{
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  row-gap: 0px;           /*  we space vertically manually */
}
.sidebar-body button{
  align-items: center;
  gap: 4px;
  display: flex;
  flex-grow: 1;
  width: auto;
  justify-content: flex-start;
}

.label-group{
  display: grid;
}

.label-group label{
  font-size: 12px;
  line-height: 14px;
  color:inherit;
  text-align: justify;
  width: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.label-group small{
  line-height: 10px;
  font-size: 10px;
  color: inherit;
  gap: 4px;
  align-items: center;
  flex-grow: 1;
  flex-shrink: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
}


.sidebar-body i.icon{
  color:inherit;
}

.card-head .heading-group,
.sidebar-head .heading-group,
.main-content-container .heading-group {
  flex-grow: 1;
  flex-shrink: 0;
  margin-bottom:8px;
}


.sidebar-head .heading-group{
  flex-grow: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}


.card h5,
.sidebar h5,
.main-content-container h5,
.dialog h5 {
  font-size: 16px;
  line-height: 24px;
}

.card h6,
.sidebar h6,
.main-content-container h6 {
  font-size: 14px;
  line-height: 20px;
}

.actions {
  flex-direction: row;
  display: inline-flex;
  margin-left: auto;
  column-gap: 16px;
  width: -webkit-fill-available;
  justify-content: flex-end;
  align-items: center;
}

.card-media {
  height: 128px;
  background-position: center;
  background-size: cover;
}


.dialog {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog .container {
  display: flex;
  flex-direction: column;
  row-gap: 1px;
  position: absolute;
  margin: auto;
  max-height: 375px;
}

.dialog.confirmation .container .content{
  border:2px solid #E3E3E3;
  padding-top :12px;
  padding-bottom :12px;
}
.dialog.confirmation .container h5{
  padding-bottom :0px;
}

.stacked{
  flex-direction: column;
}


.actions.stacked{
  align-items: flex-end;
}

.actions .row{
  align-items: center;
}
.scrim {
  background-color: rgba(0, 0, 0, .33);
  height: 100%;
  width: 100%;
}

.single-centered{
  padding-top: calc( 7vh - 1px);
  align-items: anchor-center;
}

.card.brand-focus{
  padding-top:0;
}

.brand-focus .card-head{
  background-color: #0F4155;
  padding: 12px;
  border-radius: 10px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.brand-focus .card-body{
  padding:32px 12px;
}
.brand-focus p{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
nav.top-nav,
footer{
 display:flex;
 flex-direction: column;
}

footer{
  height:85px;
  background: rgb(15,65,85);
  background: linear-gradient(180deg, rgba(15,65,85,1) 0%, rgba(0,45,62,1) 100%);
  color:#ffffff;
  font-size: 14px;
  line-height: 24px;
}

footer p{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0px;
}

footer p,
footer span{
  color:inherit;
  font-size: inherit;
  line-height: inherit;
}




nav .container,
.main-content,
footer .container{
 display: flex;
 flex-direction: row;
 flex-grow: 1;
 max-width: 1600px;
 align-self: anchor-center;
 align-items:center;
 justify-content: space-between;
 width:100%;
}

.main-content{
  padding-top: 32px;
  min-height: calc(100vh - 231px);
  padding-bottom:16px;
  align-items:flex-start;
  gap: 4px;
  }


nav .ui-group,
nav .nav-group,
nav .nav-contain,
footer{
  display: flex;
  flex-grow: 1;
  padding: 0 16px;
  align-items: center;
  justify-content: center;
}

footer .logo-white{
  opacity: 0.75;
}

nav .ui-group{
 height:80px;
 background-color: #0F4155;
}
nav .nav-group{
  height:40px;
  background-color: #002D3E;
}



nav .logo{
  height:64px;
  width: 210px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

nav.pagination.button-group,
nav.pagination.button-group .button-group,
nav.top-nav .ui-group .button-group,
nav.top-nav .nav-group .menu-group,
.nav-group .menu-group{
    display: flex;
    flex-direction: row;
    column-gap: 16px;
    align-items: center;
}

.pagination{
  height:56px;
}

.pagination p{
  display: flex;
    flex-shrink: 0;
    flex-grow: 0;
    align-items: center;
    gap: 8px;
}
.pagination .button-group button{
  padding:8px 8px;
  border-radius:100%;
}

.pagination .button-group button span{
  width:24px;
  height: 24px;
  color:inherit;
}

.benelizer-gradient {
  background: linear-gradient(-45deg, #2073A6, #0F4155);
  background-size: 400% 400%;
  animation: gradient 7s ease infinite;
  height: 100%;
}

nav.top-nav .menu-group a,
footer .menu-group a{
 display:inline-flex;
 color:#ffffff;
 border-radius: 0;
 padding-bottom: 2px;
 border-bottom: 2px solid rgba(0, 0, 0, 0.0) ;
 text-decoration: none;

}

nav.top-nav .menu-group a.active,
nav.top-nav .menu.group a.active:hover,
nav.top-nav .menu.group a.active:focus,
footer .menu-group a.active,
footer .menu.group a.active:hover,
footer .menu.group a.active:focus{
  border-color: rgba(255, 255, 255, 1) !important;
}


nav.top-nav .menu-group a:hover,
footer .menu-group a:hover{
 border-color: rgba(255, 255, 255, 0.75) !important;
}

nav.top-nav .menu-group a:active{
  border-color: rgba(255, 255, 255, 0.75) !important;
}

nav.top-nav .menu-group a:focus{
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.nav{
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  width:fit-content;
}



.nav.width-full li,
.nav.width-500 li,
.nav.width-475 li,
.nav.width-450 li,
.nav.width-425 li,
.nav.width-400 li,
.nav.width-375 li,
.nav.width-350 li,
.nav.width-325 li,
.nav.width-300 li,
.nav.width-275 li,
.nav.width-250 li,
.nav.width-225 li,
.nav.width-200 li,
.nav.width-175 li,
.nav.width-150 li,
.nav.width-full a,
.nav.width-500 a,
.nav.width-475 a,
.nav.width-450 a,
.nav.width-425 a,
.nav.width-400 a,
.nav.width-375 a,
.nav.width-350 a,
.nav.width-325 a,
.nav.width-300 a,
.nav.width-275 a,
.nav.width-250 a,
.nav.width-225 a,
.nav.width-200 a,
.nav.width-175 a,
.nav.width-150 a{
  width:auto;
  flex-grow:1;
  flex-shrink:0;
}

.nav li{
  list-style: none;
}
.nav a{
  text-decoration: none;
}

.nav.nav-tabs,
.nav.nav-pills li a{
  background:none;
}

.nav.nav-tabs li a .badge{
  margin-bottom: -1px;
}


.nav.nav-pills{
  gap:12px;
}

.nav.nav-tabs li a,
.nav.nav-pills li a{
  padding: 6px 16px;
  line-height: 15px;
}

.nav.nav-tabs li a{
  background: none;
  border-bottom: 1px solid #94BCD0;
  border-radius: 4px 4px 0 0;
  padding-bottom: 5px;
  padding-top: 6px;
}

.nav.nav-tabs li.active a{
  border-bottom: 2px solid;
  padding-bottom: 4px;
}

.nav.nav-pills li a{
  border-radius: 36px;
}

.nav.nav-pills li.active a,
.dropdown-menu a.active{
  background: #0F4155;
  color: #ffffff;
}

.checkbox-container,
.radio-container{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  cursor: pointer;
}

.xxcheckbox-input,
.xxradio-input {
  display: none;
}

.checkbox-custom i:before,
.radio-custom i:before
{
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: .1s;
  transition-timing-function: ease-in-out;
  color:#0F4155;
  line-height: 23px;
}

.checkbox-custom i:before{
  content:"\69";
}

.radio-custom i:before{
  content:"\47";
}

.xxxcheckbox-input:checked + .checkbox-custom i:before {
  content:"\68";
}

.xxxxradio-input:checked + .radio-custom i:before{
  content:"\46";
}

.checkbox-container:active  .checkbox-custom i:before,
.radio-container:active  .radio-custom i:before{
  color:#719FB7;
}

.checkbox-container:hover  .checkbox-custom i:before,
.radio-container:active  .radio-custom i:before{
  color:#2D6880;
}

.checkbox-container:focus  .checkbox-custom i:before,
.radio-container:active  .radio-custom i:before{
  color:#578AA4;
}

.slider-container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
}

.slider {
  -webkit-appearance: none;
  height: 8px;
  background: rgba(15, 65, 85, .5);
  border-radius: 4px;
  outline: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0F4155;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.switch-container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
}

.switch-input {
  display: none;
}

.switch-track {
  width: 52px;
  height: 28px;
  background: #718795;
  border-radius: 16px;
  position: relative;
  cursor: pointer;
  transition-duration: .1s;
  transition-timing-function: ease-in-out;  
  border: 2px solid #0F4155;
}

.switch-thumb {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-radius: 50%;
  border: 6px solid #758696;
  top: 0px;
  left: 0;
  transition-duration: .1s;
  transition-timing-function: ease-in-out;
}

.switch-input:checked + .switch-track {
  background: #0F4155;
}

.switch-input:checked + .switch-track .switch-thumb {
  left: 24px;
  background: #ffffff;
  border-color:#ffffff;
}

.switch-input:active + .switch-track .switch-thumb {
  background-color: #f1f3f5;
}

.switch-input:hover + .switch-track .switch-thumb {
  background-color: #bac3cb;
}

.switch-input:focus + .switch-track .switch-thumb {
  background-color: #d6dbe0;
}

.switch-input:checked:active + .switch-track .switch-thumb {
  border-color: #f1f3f5;
}

.switch-input:checked:hover + .switch-track .switch-thumb {
  border-color: #bac3cb;
}

.switch-input:checked:focus + .switch-track .switch-thumb {
  border-color: #d6dbe0;
}


.chip{
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 2px;
  border-radius: 32px;
  padding: 0;
}

.chip .button,
.chip button{
 padding:4px;
}

.chip span{
  font-size: 14px;
  line-height: 24px;
  color:inherit;
}

.chip:has(+.chip span:first-child){
  background: pink;
}

.chip span:first-child{
  padding-left:8px; 
}

.chip.white button:active{
  background-color: #c1c1c1;
}

.chip.white button:hover{
  background-color: #aaacaf;
}

.chip.white button:focus{
background-color:#d6d6d6
}

.chip.black button:active{
  background-color: #474747;
}

.chip.black button:hover{
  background-color: #707070;
}

.chip.black button:focus{
background-color:#474747;
}

.chip.blue button:active{
  background-color: #719FB7;
}

.chip.blue button:hover{
  background-color: #2D6880;
}

.chip.blue button:focus{
background-color:#578AA4;
}

.chip.cyan button:active{
  background-color: #35C0D6;
}

.chip.cyan button:hover{
  background-color: #2C9BA9;
}

.chip.cyan button:focus{
background-color:#31B0C3;
}

.chip.green button:active{
  background-color: #3FA98B;
}

.chip.green button:hover{
  background-color: #2B8C6D;
}

.chip.green button:focus{
background-color:#2F9979;
}

.chip.red button:active{
  background-color: #EC524D;
}

.chip.red button:hover{
  background-color: #E13831;
}

.chip.red button:focus{
background-color:#F04132;
}

.chip.yellow button:active{
  background-color: #FED257;
}

.chip.yellow button:hover{
  background-color: #FDBE27;
}

.chip.yellow button:focus{
background-color:#FEC738;
}

.dropdown-menu{
  background: #ffffff;
  border-radius: 8px;
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 0;
}

.dropdown-menu a{
  padding: 0 8px;
  text-decoration: none;
  width: auto;
  border-radius: 0;
  justify-content: flex-start;
  color:#0F4155;
}

.dropdown-menu hr{
  margin:0;
}


/* Area for Select Input and Text area because they share the same visual design and css */

.select,
.input,
.textarea{
  position: relative;
  display: flex;
  width: 125px;
  flex-direction: column;
  padding-top: 4px;
}


.select.width-150,
.input.width-150,
.textarea.width-150 {
  width: 150px;
}

.select.width-175,
.input.width-175,
.textarea.width-175 {
  width: 175px;
}

.select.width-200,
.input.width-200,
.textarea.width-200{
  width: 200px;
}

.select.width-225,
.input.width-225,
.textarea.width-225{
  width: 225px;
}

.select.width-250,
.input.width-250,
.textarea.width-250{
  width: 250px;
}

.select.block,
.input.block,
.textarea.block{
  width: auto;
}

.input input{
  caret-color: #397691;
}

.select::after {
  content: "\62";
    position: absolute;
    right: 0px;
    margin-right: 4px;
    top: 15px;
    pointer-events: none;
    height: 34px;
    width: 34px;
    font-family: "benelizericons" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 33px;
    -webkit-font-smoothing: antialiased;
    font-size: 34px;
    color: #1f4056;
    background: none!important;
    background-color: none!important;
}


.select:focus-within::after {
  transform: rotate(180deg); /* Rotate when select is focused */
  transition-duration: .25s;
  transition-timing-function: ease-in-out;  
}




.select:hover > select,
.input:hover > input,
.input:focus-within > input:focus{
  border:0;
  border-bottom: 2px solid #397691;
  background-color: #EBF8FF;
  padding-bottom:5px;
}

.select:focus-within > select:focus-visible{
  border:0;
  border-bottom: 1px solid #397691;
  background-color: #0f4155; /* #EBF8FF; */
  padding-bottom:6px;

}

.select label,
.input label,
.select small,
.input small,
.textarea small
{
  border-radius:4px;
  font-size: 12px;
  line-height: 16px;
  padding-left: 12px;
  color: #1f4056;
}

.select label,
.input label{
  position: absolute;
  top:6px;
}

.textarea label{
  position: absolute;
  top:-4px;
  left:8px;
  background-color: #ffffff;
  padding: 0px 3px 0px 3px;
  font-size: 12px;
  line-height: 16px;
  color: #1f4056;
}


.select select,
.input input{
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  cursor: pointer;
  outline:none;
  color: #1f4056;
  padding-left:12px;
  border-radius: 4px 4px 0 0;
  border-bottom: 1px solid #1f4056;
  padding-top: 27px;
  transition-duration: .01s;
}

.input.outline input{
  padding: 14px 0px 14px 12px;
  border: 1px solid #1f4056;
  border-radius: 4px;
  background-color: #ffffff !important;
}

.select.outline select {
  padding: 14px 32px 14px 12px;
  border: 1px solid #1f4056;
  border-radius: 4px;
}

.input.outline:hover > input,
.input.outline:focus-within > input:focus-visible{
  border: 2px solid #397691;
  padding: 13px 0px 12.5px 11px;
}

.select.outline:hover > select {
  border: 2px solid #397691;
  padding: 13px 32px 12.5px 11px;
}


.select.outline:focus-within > select:focus-visible{
  border: 1px solid #397691;
  padding: 16px 30px 16px 12px;
}


.textarea textarea{
 appearance: none;
 font-size: 14px;
 font-weight: normal;
 line-height: 19px;
 font-family: 'noto_sansregular', Arial;
 color: #111111;
 margin: 0;
 height:100%;
 border:none;
 background-color: #ffffff;
 padding: 15px 14px 15px 12px;
 border: 1px solid #1f4056;
 border-radius: 4px;
 outline: none;
 resize: vertical;
}


.textarea:hover > textarea, .textarea:hover > textarea, .textarea:focus-within > textarea,textarea:focus-visible {
  border: 2px solid #397691;
  padding: 13px 12px 14.5px 11px;
}

.textarea small{
padding-top:4px;
}

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


.textarea textarea:disabled, 
.textarea textarea:has(+ textarea:disabled), 
.textarea textarea:disabled ~ small, 
.textarea textarea:read-only, 
.textarea label:has(+ textarea:read-only), 
.textarea textarea:read-only ~ small{
  color: #111111;
  border-color: #333333;
  cursor: not-allowed;
}

.textarea label:has(+ textarea:disabled),
.textarea textarea:disabled, 
.textarea textarea:disabled:hover, 
.textarea textarea:disabled:focus {
  background-color: #ACACAC;
  cursor: not-allowed;
}

.textarea label:has(+ textarea.invalid),
.textarea textarea.invalid, 
.textarea label:has(+ textarea:invalid),
.textarea textarea:invalid {
  border-color: #CF2E2B;
  color: #CF2E2B;
  caret-color:#CF2E2B;
}

.textarea label:has(+ textarea.invalid:hover),
.textarea label:has(+ textarea.invalid:focus),
.textarea textarea.invalid:hover, 
.textarea textarea.invalid:focus,
.textarea label:has(+ textarea:invalid:hover),
.textarea label:has(+ textarea:invalid:focus),
.textarea textarea:invalid:hover, 
.textarea textarea:invalid:focus{
  background-color: #fffafa;

}

.textarea textarea.invalid ~ small,
.textarea textarea:invalid ~ small{
  color: #CF2E2B;
}

.surface-1 .select.outline label,
.surface-1 .input.outline label,
.surface-1 .select.outline select,
.surface-1 .input.outline input,

.sidebar.surface-1 .select.outline label,
.sidebar.surface-1 .input.outline label,
.sidebar.surface-1 .select.outline select,
.sidebar.surface-1 .input.outline input{
  background-color: #fdfdfd;
}

.sidebar.surface-1 .select.outline.width-full{
  margin: 4px 0px;
}
.surface-2 .select.outline label,
.surface-2 .input.outline label,
.surface-2 .select.outline select,
.surface-2 .input.outline input{
  background-color: #ffffff;  /* #F6F8F8; */
}

.surface-3 .select.outline label,
.surface-3 .input.outline label,
.surface-3 .select.outline select,
.surface-3 .input.outline input{
  background-color: #f1f4f5;
}

nav .ui-group .select.outline label,
nav .ui-group .select.outline select,
nav .ui-group .select.outline:after,
nav .ui-group .select.outline:focus-within > select:focus-visible{
  background-color: #0f4155;
  border-color:#ffffff;
  color:#ffffff;
}

nav .nav-group .select.outline label,
nav .nav-group .select.outline select,
nav .nav-group .select.outline:after,
nav .nav-group .select.outline:focus-within > select:focus-visible{
  background-color: #002d3e;
  border-color:#ffffff;
  color:#ffffff;
}

.main-content-container .actions .row .select.outline label,.card .select.outline label,.dialog .container .select.outline label,
.main-content-container .actions .row .input.outline label,.card .input.outline label,.dialog .container .input.outline label,
.main-content-container .actions .row .select.outline select,.card .select.outline select,.dialog .container .select.outline select,
.main-content-container .actions .row .input.outline input,.card .input.outline input,.dialog .container .input.outline input{
  background-color: hsl(210deg 25% 99.25%);
}

.surface-content .select.outline label,.card .select.outline label,.dialog .container .select.outline label,
.surface-content .input.outline label,.card .input.outline label,.dialog .container .input.outline label,
.surface-content .select.outline select,.card .select.outline select,.dialog .container .select.outline select,
.surface-content .input.outline input,.card .input.outline input,.dialog .container .input.outline input {
  background-color: #FFFFFF;
}


.select.outline label,
.input.outline label{
    top: -4px;
    width: fit-content;
    display: inline-block;
    position: absolute;
    padding: 0 4px;
    margin-left: 8px;
}

.input input.invalid,
.input input.invalid:focus,
.input label:has(+ input.invalid),
.input input.invalid ~ small,
.input input:invalid,
.input input:invalid:focus,
.input label:has(+ input:invalid),
.input input:invalid ~ small{
  color:#CF2E2B;
  border-color:#CF2E2B;
  caret-color:#CF2E2B;
}

.input:hover > input.invalid,
.input input.invalid:hover,
.input input:invalid:hover,
.input input.invalid:focus,
.input input:invalid:focus{
  background-color:#FFFAFA;
} 
.input.outline:hover > input.invalid,
.input.outline input:invalid,
.input.outline input.invalid:hover,
.input.outline input:invalid:hover,
.input.outline input.invalid:focus,
.input.outline input:invalid:focus{
  background-color: unset;
  border-color:#CF2E2B ;
} 

.input input:disabled,
.input label:has(+ input:disabled),
.input input:disabled ~ small,
.input input:read-only,
.input label:has(+ input:read-only),
.input input:read-only ~ small{
  color:#333333;
  border-color:#333333;
}

.input input:read-only,
.input input:read-only:hover,
.input input:read-only:focus,
.input input:not(:disabled){
  background:#ffffff;
}

.input input[readonly] {
  cursor: not-allowed !important; /* or pointer, default, text, etc. */
  color: #535353 !important;
}


.input input:disabled,
.input input:disabled:hover,
.input input:disabled:focus{
  background-color:#ACACAC ;
  cursor: not-allowed;
}

.input.outline input:read-only,
.input.outline label:has(+ input:read-only),
.input.outline input:read-only ~ small
{
  border-color:#333333!important;
  color:#333333;
}

.input.outline input:disabled,
.input.outline input:disabled:hover,
.input.outline input:disabled:focus,
.input.outline input:disabled,
.input.outline label:has(+ input:disabled),
.input.outline input:disabled ~ small{
  border-color:#8B8B8B;
  color:#8B8B8B;
}

.input.outline input:disabled,
.input.outline input:disabled:hover,
.input.outline input:disabled:focus,
.input.outline input:read-only,
.input.outline input:read-only:hover,
.input.outline input:read-only:focus,
.input.outline input:not(:disabled){
  background:unset;
}

.input:has(> input.invalid)::after,
.input:has(> input:invalid)::after,
.input:has(> input:read-only)::after,
.input:has(> input:required)::after,
.input:has(> input[type="email"])::after,
.input:has(> input[type="password"])::after,
.input:has(> input[type="tel"])::after,
.input:has(> input[type="text"])::after,
.input:has(> input[type="url"])::after,
.input:has(> input[type="date"])::after,
.input:has(> input[type="datetime"])::after,
.input:has(> input[type="datetime-local"])::after {
  position: absolute;
  top: 22px;
  right: 0;
  margin-right: 6px;
  height: 24px;
  width: 24px;
  content: "  ";
  pointer-events: none;
  font-family: "benelizericons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  font-size: 0px;  /* supress red dot */
  line-height: 23px;
  -webkit-font-smoothing: antialiased;
  background: none ;
  background-color: none;
}



.select.outline select:disabled,
.input.outline input:disabled:hover,
.input.outline input:disabled:focus,
.input.outline input:disabled,
.input.outline label:has(+ input:disabled) {
  color:#111111 !important;
  border-color:#111111;
  cursor:not-allowed;
}


.textarea:has(> textarea.invalid)::after,
.textarea:has(> textarea:invalid)::after,
.textarea:has(> textarea:read-only)::after,
.textarea:has(> textarea:required)::after {
  position: absolute;
  top: 8px;
  right: 8px;
  height: 24px;
  width: 24px;
  content: "  ";
  pointer-events: none;
  font-family: "benelizericons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  font-size: 24px;
  line-height: 23px;
  -webkit-font-smoothing: antialiased;
  background: none ;
  background-color: none;
}

.input.outline:has(> input.invalid)::after,
.input.outline:has(> input:invalid)::after,
.input.outline:has(> input:read-only)::after,
.input.outline:has(> input:required)::after {
  margin-right: 6px;
}

.input:has(> input.invalid)::after,
.textarea:has(> textarea.invalid)::after,
.textarea:has(> textarea:invalid)::after,
.input-icon:has(> input:invalid[type="email"])::after,
.input-icon:has(> input:invalid[type="password"])::after,
.input-icon:has(> input:invalid[type="tel"])::after,
.input-icon:has(> input:invalid[type="text"])::after,
.input-icon:has(> input:invalid[type="url"])::after,
.input:has(> input:invalid[type="date"])::after,
.input:has(> input:invalid[type="datetime"])::after,
.input:has(> input:invalid[type="datetime-local"])::after{
  content: "\75"!important;
  color:#CF2E2B!important;
}

.input:has(> input:disabled)::after,
.textarea:has(> textarea:disabled)::after{
  content: " "!important;
}

.input:has(> input:read-only)::after,
.textarea:has(> textarea:read-only)::after{
  color:#333333;
}

.input:has(> input:required)::after,
.textarea:has(> textarea:required)::after{
  content: "\57";
  color:#1f4056;
}

.input-icon::after,
.input:has(> input[type="date"])::after,
.input:has(> input[type="datetime"])::after,
.input:has(> input[type="datetime-local"])::after{
  color:#1f4056;
}
.input-icon:has(> input[type="email"])::after{
  content: "\56";
}
.input-icon:has(> input[type="password"])::after{
  content: "\30";
}
.input-icon:has(> input[type="tel"])::after{
  content: "\31";
}
.input-icon:has(> input[type="text"])::after{
  content: "\33";
}
.input-icon:has(> input[type="url"])::after{
  content: "\58";
}

.input input[type="date"],
.input input[type="datetime-local"]{
  justify-content: left;
  height:24px;
}
.input:has(> input[type="date"]){
  width: 140px;
}

.input:has(> input[type="datetime-local"]){
  width: 168px;
}

.input:has(> input[type="date"])::after,
.input:has(> input[type="datetime-local"])::after{
  content: "\53";
}

.input:has(> input[type="date"]:hover)::after,
.input:has(> input[type="date"]:focus)::after,
.input:has(> input[type="datetime-local"]:hover)::after,
.input:has(> input[type="datetime-local"]:focus)::after{
  color:#397691;
}



.loader {
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(farthest-side, #ffffff 94%, rgb(1 1 1 / 0%)) top / 2px 2px no-repeat, conic-gradient(rgb(1 1 1 / 0%) 30%, #ffffff);
  -webkit-mask: radial-gradient(farthest-side, rgb(1 1 1 / 0%) calc(100% - 2px), rgb(1 1 1) 0);
  animation: spin 1s infinite linear;
}

.stepper{
  width: auto;
  height: 24px;
  font-weight: 600;
  font-family: 'noto_sansregular';
  display: flex;
}

.step{
  font-size: 12px;
  line-height: 24px;
}

.step .badge,
.step label{
  font-size: inherit;
  line-height: inherit;
  color: #516A74;
  opacity: 0.5;
  pointer-events: none;
  flex-grow: 0;
  flex-shrink: 0;
}


.step.complete .badge,
.step.complete label,
.step.complete::before,
.step.current .badge,
.step.current label,
.step.current::before{
  opacity: 1;
}

.step.complete label,
.step.current label{
  color: #0F4155;
}

.step.complete .badge,
.step.current .badge,
.step.complete::before,
.step.current::before{
  background-color: #0F4155;
}

.step.complete .badge{
  font-size: 0;
}
.step.complete .badge::after{
  content: "\67";
  color:#ffffff;
  font-family: "benelizericons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  line-height: 26px;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}


.stepper .step:first-child {
  flex-grow:0;
}

.stepper .step:last-child {
  padding-right:0;
}
.stepper .step:first-child::before {
  content:none;
  width: 0;
}

.stepper .step{
  flex-grow: 1;
    flex-direction: row;
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding-right:4px;
}

.step::before{
  content:"";
  height:2px;
  background-color: #516A74;
  opacity: 0.5;
  pointer-events: none;
  width: 100%;
}

.step .badge{
  padding: 0;
  height: 24px;
  width: 24px;
  text-align: center;
  border-radius: 12px;
  font-weight: 400;
  color: #ffffff;
  background-color: #516A74;
}

.icon.loader{
  width: 16px;
  height: 16px;
  margin: 4px;
} 

.text.black .loader,
.outline.black .loader,
.contained.white .loader,
.contained.yellow .loader{
  background: radial-gradient(farthest-side, #333333 94%, rgb(1 1 1 / 0%)) top / 2px 2px no-repeat, conic-gradient(rgb(1 1 1 / 0%) 30%, #333333);
}

.text.blue .loader,
.outline.blue .loader{
  background: radial-gradient(farthest-side, #0F4155 94%, rgb(1 1 1 / 0%)) top / 2px 2px no-repeat, conic-gradient(rgb(1 1 1 / 0%) 30%, #0F4155);
}

.text.cyan .loader,
.outline.cyan .loader{
  background: radial-gradient(farthest-side, #288791 94%, rgb(1 1 1 / 0%)) top / 2px 2px no-repeat, conic-gradient(rgb(1 1 1 / 0%) 30%, #288791);
}

.text.green .loader,
.outline.green .loader{
  background: radial-gradient(farthest-side, #257C5F 94%, rgb(1 1 1 / 0%)) top / 2px 2px no-repeat, conic-gradient(rgb(1 1 1 / 0%) 30%, #257C5F);
}

.text.red .loader,
.outline.red .loader{
  background: radial-gradient(farthest-side, #CF2E2B 94%, rgb(1 1 1 / 0%)) top / 2px 2px no-repeat, conic-gradient(rgb(1 1 1 / 0%) 30%, #CF2E2B);
}

.text.yellow .loader,
.outline.yellow .loader{
  background: radial-gradient(farthest-side, #FCB123 94%, rgb(1 1 1 / 0%)) top / 2px 2px no-repeat, conic-gradient(rgb(1 1 1 / 0%) 30%, #FCB123);
}

.main.loader{
  width: 36px;
  height: 36px;
  margin: auto;
  -webkit-mask: radial-gradient(farthest-side, rgb(1 1 1 / 0%) calc(100% - 6px), rgb(1 1 1) 0);
  background: radial-gradient(farthest-side, #0F4155 94%, rgb(1 1 1 / 0%)) top / 6px 6px no-repeat, conic-gradient(rgb(1 1 1 / 0%) 30%, #0F4155);
}


.main-content-container,
.sidebar{
  margin: 4px;
  width:280px;
  overflow: hidden;
}

.sidebar .sidebar-actions{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar .sidebar-actions .nav.nav-tabs {
  margin-top :-12px;
  margin-bottom :12px;
}

.sidebar .sidebar-actions .nav.nav-tabs li a {
  padding-top:9px;
}

/* .sidebar .sidebar-actions .nav.nav-pills{
  gap: 16px;
  justify-content: center;
  width: 100%;
} */

.main-content-container{
  width:auto;
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
  padding-top: 0;
  overflow: hidden;
  background: #fdfdfe;  /* hsl(210deg 25% 99.25%) */
}

.main-content-container .nav.nav-tabs li a {
  padding-top:18px;
}

.content-container-head{
  display: flex;
  flex-direction: row;
  padding: 6px 12px;
  align-items: center;
}

.main-content-container .actions{
  padding: 6px 12px;
  justify-content: space-between;
}

.main-content-container .card-body .actions {
  padding: unset;
}

.main-content-container .row{
  flex-grow: 0;
  width: auto;
}

.content-container-body{
  padding: 12px;
    gap: 12px;
    display: inline-flex;
}

.content-container-body .card{
  height:max-content;
}


.content-container-body .card-body{
  row-gap: 16px;
}



.dashboard{
  flex-direction: column;
    height: 150vh;
    align-items: flex-start;
    overflow: auto;
    flex-wrap: wrap;
}


.dashboard .card .card-body .checkbox-container,
.dashboard .card .card-body .radio-container{
  padding: unset;
}

.content-container-body.column{
  width: unset;
}

th.chk{
  width:48px;
}


.txt{
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 250px;
}
.num{
  min-width:84px;
}
.pct{
  min-width:26px;
}

.pct, .num{
  text-align: right;
}


@keyframes spin{ 
  100%{transform: rotate(1turn)}
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}


.dropBorderRO,
.dropBorder {
border-radius: 4px; 
border: 1px solid #111111;
color: #111111 !important;
font-size:13px !important;
padding:2px;
}
.dropBorder:hover { padding:1px;  border: 2px solid #397691;  } 
.dropBorderRO:hover { padding:1px;  border: 2px solid #111111;  } 

.droplist {
cursor: pointer;
color: #ffffff !important;
font-family: 'noto_sansregular';
font-size: 13px;
padding:9px 14px;
width: 280px;
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
border-right: 1px solid #f0f4f9;
border-left: 1px solid #f0f4f9;
border-bottom: 1px solid #f0f4f9;
background-color: #315F77 !important;
z-index:9999999;
}
.droplist:hover {background-color: #cfe7f3 !important; color: #000000 !important; }

.dropSelect {
color: #ffffff !important;;	
background-color: #618faf !important;
}

.droplistSel {
color: #ffffff !important;
font-family: 'noto_sansregular';
font-size: 13px;
padding:9px 14px;
width: 280px;
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
background-color: #618faf !important;
z-index:99999;
}


.droplistTxt {
font-size: 14px;
font-family: 'noto_sansregular';
padding:9px 16px;
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
border-right: 1px solid #f0f4f9;
border-left: 1px solid #f0f4f9;
border-bottom: 1px solid #f0f4f9;
background-color: #91bFd7 !important;
z-index:99999;
}


.dropFrame {
color: #ffffff;
position: relative;
float:left;
}

.dropFrame2 {
position: relative;
float:left;
}

.dropAbsolute {
display:none;
position:absolute;
top: 44px;
right: -50px;
border-top: 1px solid #f0f4f9;
border-bottom: 1px solid #f0f4f9;
color: #ffffff;
z-index:99999999;
}

.dropAbsolute2 {
display:none;
position:absolute;
top: 50px;
right: -5px;
border-top:1px solid #f0f4f9;
border-bottom: 1px solid #f0f4f9;
color: #ffffff;
z-index:99999;
}

.dropAbsolute3 {
display:none;
position:absolute;
top: 34px;
left: 12x;
border-top:1px solid #f0f4f9;
border-bottom: 1px solid #f0f4f9;
color: #ffffff;
z-index:99999;
max-height:500px;
overflow-y:auto;
}

.divnav {
  position:relative;
  float:left;
}

.divnav2 {
  cursor:pointer;
  float:left;
  color: #0f4155;
  padding: 0px 15px 0px 15px;
  border-bottom: 1px solid #94bcd0;
}
.divnav2Sel {
  float:left;
  color: #0f4155;
  padding: 0px 15px 0px 15px;
  border-bottom: 3px solid #0f4155;
  margin-top: -2px;
}
.divnavSel:hover, .divnav:hover {  border-radius: 4px 4px 0px 0px; background-color: rgba(15, 65, 85, 0.1); }

.divnav2Txta {
  cursor:pointer;
  float:left;
  font-size:14px;
  color: #0f4155;
  padding: 4px 0px 0px 0px;
}
.divnav2Txtb {
  cursor:pointer;
  float:left;
  font-size:14px;
  color: #0f4155;
  padding: 6px 0px 0px 3px;
}

.divnav3 {
  cursor:pointer;
  float:left;
  color: #0f4155;
  padding: 0px 15px 2px 15px;
  border-bottom: 1px solid #94bcd0;
}
.divnav3Sel {
  float:left;
  color: #0f4155;
  padding: 0px 15px 2px 15px;
  border-bottom: 3px solid #0f4155;
  margin-top: -1px;
}
.divnav3Sel:hover, .divnav3:hover {  border-radius: 4px 4px 0px 0px; background-color: rgba(15, 65, 85, 0.1); }

.divnav3Txt {
  cursor:pointer;
  float:left;
  font-size:14px;
  color: #0f4155;
  padding: 6px 0px 3px 3px;
}

.divnav3gTxt {
  float:left;
  font-size:14px;
  color: #aeaeae;
  padding: 6px 0px 3px 3px;
}

.divnav3g {
  float:left;
  color: #0f4155;
  padding: 0px 15px 2px 15px;
  border-bottom: 1px solid #94bcd0;
}

.infoBox { border:1px solid #1f4056; border-radius:4px; background-color:#f6f8f8; padding:15px; display:block; overflow:auto;  }
.infoBox2 { border:1px solid #1f4056; border-radius:4px; padding:12px; display:block; overflow:auto; }
.infoBox3 { border-top:1px solid #1f4056; padding:12px 12px 12px 30px; display:block; overflow:auto;  }