/* scrollbar style */
* {
  scrollbar-width: 8px;
  scrollbar-color: #D9D9D9;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #D9D9D9;
}

*::-webkit-scrollbar-track {
  width: 8px;
  height: 100%;
}

@font-face {
  font-family: 'Inter';
  src: local('Inter Black'), local('Inter-Black'),
      url('/font/Inter/static/Inter-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: local('Inter ExtraBold'), local('Inter-ExtraBold'),
      url('/font/Inter/static/Inter-ExtraBold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: local('Inter Bold'), local('Inter-Bold'),
      url('/font/Inter/static/Inter-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: local('Inter ExtraLight'), local('Inter-ExtraLight'),
      url('/font/Inter/static/Inter-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: local('Inter Light'), local('Inter-Light'),
      url('/font/Inter/static/Inter-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: local('Inter Medium'), local('Inter-Medium'),
      url('/font/Inter/static/Inter-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: local('Inter SemiBold'), local('Inter-SemiBold'),
      url('/font/Inter/static/Inter-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: local('Inter Regular'), local('Inter-Regular'),
      url('/font/Inter/static/Inter-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: local('Inter Thin'), local('Inter-Thin'),
      url('/font/Inter/static/Inter-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

:root {
  /*DEFAULT*/
  --default-input-pointer: all;
  --default-font-size: 14px;
  --default-backgroud-image-url: url("img/Home.jpg");
  --default-background-appcontent-color: #EAECF0;
  --default-background-color: #EAECF0;
  --default-background-color-invert: #0f0f0f;
  --default-icon-image-url: url("img/bnge-full.png");
  --default-banner-image-url: url("img/bosnetmainlogo.png");
  --default-color: #fff;
  --default-disable-color: #898989;
  --default-disable-background-color: #ededed;
  --default-primary-color: #1570EF;
  --default-primary-dark-color: #175CD3;
  --default-primary-red-color: #A82525;
  --default-primary-black-color: #0e0e0e;
  --default-primary-white-color: #fff;
  --default-primary-green-color: #21725E;
  --default-primary-blue-color: #5393E9;
  --default-primary-purple-color: #7F56D9;
  --default-primary-gray-color: #70798C;
  --default-accent-color: #2970FF;
  --default-hyperlink-color: #1570EF;
  --default-hyperlink-color-hover: #175CD3;
  --default-combobox-selected-color: #D1E9FF;
  --default-hover-background-color: #fff5d7;
  --default-text-color: #0e0e0e;
  --default-text-color-invert: #fff;
  
  /*FORM INPUT*/
  --form-input-font-color: #0e0e0e;
  --form-placeholder-font-color: rgb(82, 82, 82);
  --form-input-background-color: #fff;
  --form-input-background-color-focus: #EFF8FF;
  --form-input-border-radius: 3px;
  --form-input-border-color: #1570EF;
  --form-input-border: 1px solid #deebf7;
  --form-input-border-disable: 1px solid silver;
  --form-input-background-color-disable: whitesmoke;
  --form-min-width: 1024px;
  --from-min-height: 768px;
  --form-input-font-size: 14px;
  --form-input-line-height: 20px;

  /*BUTTON DEFAULT*/
  --default-button-text-color: #FFFFFF;
  --default-button-background-color: #1570EF;
  --default-button-background-color-invert: #f1f1f1;
  --default-button-background-color-hover: #175CD3;
  --default-button-background-color-hover-invert: #D1E9FF;
  --default-button-height: 30px;
  --default-button-min-width: 100px;
  --button-padding: 10px 14px;
  --button-padding-dialog: 11px 15px;
  --button-font-size: 14px;
  --button-font-size-dialog: 14px;
  --button-border-radius: 8px;

  /* TABLE */
  --default-table-background-hover: #d1e9ff80;
  --default-table-header-bgcolor: #F2F4F7;
  --default-table-header-txtcolor: #101828;
  --default-table-border-color: #D0D5DD;

  /* TYPOGRAPHY */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-display-xs: 24px;
  --text-display-sm: 30px;
  --text-display-md: 36px;
  --text-display-lg: 48px;
  --text-display-xl: 60px;
  --text-display-2xl: 72px;

  /* FONT WEIGHT */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* LINE HEIGHT */
  --line-height-xs: 18px;
  --line-height-sm: 20px;
  --line-height-md: 24px;
  --line-height-lg: 28px;
  --line-height-xl: 30px;
  --line-height-display-xs: 32px;
  --line-height-display-sm: 38px;
  --line-height-display-md: 44px;
  --line-height-display-lg: 60px;
  --line-height-display-xl: 72px;
  --line-height-display-2xl: 90px;

  /* SPACING */
  --spacing-none: 0;
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  --spacing-2xl: 20px;
  --spacing-3xl: 24px;
  --spacing-4xl: 32px;
  --spacing-5xl: 40px;
  --spacing-6xl: 48px;
  --spacing-7xl: 64px;
  --spacing-8xl: 80px;
  --spacing-9xl: 96px;
  --spacing-10xl: 128px;
  --spacing-11xl: 160px;

  /* WIDTH */
  --width-xxs: 320px;
  --width-xs: 384px;
  --width-md: 480px;
  --width-lg: 640px;
  --width-xl: 768px;
  --width-2xl: 1024px;
  --width-3xl: 1280px;
  --width-4xl: 1440px;
  --width-5xl: 1600px;
  --width-6xl: 1920px;

  /* BORDER-RADIUS */
  --border-radius-none: 0;
  --border-radius-xxs: 2px;
  --border-radius-xs: 4px;
  --border-radius-sm: 6px;
  --border-radius-md: 8px;
  --border-radius-lg: 10px;
  --border-radius-xl: 12px;
  --border-radius-2xl: 16px;
  --border-radius-3xl: 20px;
  --border-radius-4xl: 24px;
  --border-radius-full: 9999px;
}

html {
  pointer-events: fill;
  font-family: 'Inter';
  font-size: var(--default-font-size);
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  margin: 0;
  box-sizing: border-box;
}

body {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  box-sizing: border-box;
  margin: 0px;
  font-family: 'Inter';
  font-style: normal;
  font-size: var(--default-font-size);
  font-weight: 400;
  background-color: #fff;
  color: #0e0e0e;
  text-align: left;
  transition: all 1s;
}

  body > * {
      width: auto;
      margin: auto;
  }

div {
  box-sizing: border-box;
}

footer {
  color: var(--default-background-color-invert);
  text-align: center;
  opacity: 0.8;
  font-size: var(--default-font-size);
  padding: 5px 10px 10px 10px;
  display: none;
}

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-fill {
  pointer-events: fill;
}

button, input, select, textarea {
  pointer-events: var(--default-input-pointer);
}

a {
  color: var(--default-hyperlink-color);

  span {
    pointer-events: fill;
  }
}

/* TYPOGRAPHY */
p, .p {
  line-height: normal;
  font-size: var(--default-font-size);
}

span {
  line-height: normal;
  color: var(--default-text-color);
  pointer-events: none;
  font-size: var(--default-font-size);

  a{
    pointer-events: fill;
  }
}

code span {
  color: inherit;
}

/* BUTTON */
button {
  display: flex;
  align-items: center;
  width: fit-content;
  gap: var(--spacing-xs);
  font-size: var(--text-sm);
  line-height: var(--line-height-sm);
  font-weight: 600;
  border-radius: var(--border-radius-md);
  padding: var(--button-padding);
  cursor: pointer;
  justify-content: center;
  font-family: inherit;
  transition: 0.3s;

  span {
    color: inherit;
    font-weight: inherit;
  }
}

button:focus {
  outline-offset: 1px;
}

button:hover {
  transition: 0.3s;
}

.text-hover-white:hover {
  color: #fff;
}

button:disabled,
button:disabled:hover {
  transition: 0;
  transform: scale(1);
  cursor: default;
  border: 1px solid #a8a8a8;
  > i {
    background-color: var(--default-disable-color);
  }

  &:hover {
    > i {
      background-color: var(--default-disable-color);
    }
  }
}

button:disabled img {
  filter: grayscale(1) contrast(0);
}

button::before {
  font-size: var(--default-font-size);
}

img {
  /* max-width: 100%; */
  width: auto;
  /* height: auto; */
}

/* FORM */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */

input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
  -webkit-appearance: textfield;
}

input {
  box-sizing: border-box;
  color: #0e0e0e;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #FFF;
  border: 1px solid #D0D5DD;
  font-size: var(--form-input-font-size);
  font-family: inherit;
  line-height: var(--form-input-line-height);
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  width: 100%;
  height: 36px;
  box-shadow: 0px 1px 2px 0px #1018280D;
}

input:focus {
  border: 1px solid var(--form-input-border-color);
  background: var(--form-input-background-color-focus);
  outline: none;
}

input[type="password"] {
  padding: 0 28px 0 10px;
}

input[type="checkbox"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
  width: 15px;
  height: 15px;
  accent-color: var(--default-accent-color);
  cursor: pointer;
}

input[type="radio"] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
  appearance: radio;
  width: 15px;
  height: 15px;
  margin: 0 3px;
  accent-color: var(--default-accent-color);
  cursor: pointer;
}

input[type="date"] {
  cursor: pointer;
}

input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: none;
  padding: 0;
  border: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

::-webkit-color-swatch{
  border: 1;
  border-radius: 8px;
}

/* CUSTOM */

input.combobox-filter {
  background-image: url("/svg/searchIcon.svg");
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: 10px;
  padding-left: 32px;
}

input[type="button"].combobox-button {
  background-image: url("/svg/arrowDown.svg");
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: calc(100% - 14px) center;
  margin-bottom: 0;
}

input[type="button"].combobox-button.active {
  background-image: url("/svg/arrowDown.svg");
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: calc(100% - 14px) center;
  margin-bottom: 0;
}

input:disabled, textarea:disabled {
  background-color: var(--default-disable-background-color);
  cursor: text;
}

textarea {
  color: #0e0e0e;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid #D0D5DD;
  border-radius: 8px;
  width: auto;
  max-width: calc(100% - 20px);
  height: 50px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  font-size: var(--form-input-font-size);
  line-height: var(--form-input-line-height);
  resize: vertical;
}

textarea:focus {
  border: 1px solid var(--form-input-border-color);
  background: var(--form-input-background-color-focus);
  outline: none;
}


label {
  color: #344054;
  font-size: var(--form-input-font-size);
  line-height: var(--form-input-line-height);
  font-weight: 500;
}

input::placeholder,
input::-moz-placeholder,
input::-webkit-input-placeholder textarea::placeholder,
textarea::-moz-placeholder,
textarea::-webkit-input-placeholder select::placeholder,
select::-moz-placeholder,
select::-webkit-input-placeholder {
  color: #70798C;
}


/* #region LIST CSS */
ul {
  list-style-type: none;
  padding-inline-start: 0px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: var(--default-font-size);
}

ul.bullet-list {
  list-style-type: disc;
  padding-inline-start: 20px;  
  padding-top: 16px;
  padding-bottom: 16px;
}

li {
  line-height: 20px;
  box-sizing: border-box;
  color: var(--default-text-color);
}

ol {
  padding-inline-start: 20px;
  line-height: 20px;
  box-sizing: border-box;
  font-size: var(--default-font-size);
}

li ul, li ul.bullet-list, li ol {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* #endregion */

/* #region TABLE */

table.u-hub-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--default-font-size);
  line-height: 18px;
  min-width: max-content;
}

.u-hub-table thead,.u-hub-table tbody {
  /* display: block; */
}

.u-hub-table th,.u-hub-table td {
  text-align: center;
  color: #667085;
  font-weight: bold;

  span {
    display: block;
    box-sizing: border-box;
    pointer-events: fill;
  }
}

.u-hub-table thead tr:first-child th:first-child { border-top-left-radius: 8px; }

.u-hub-table thead tr:first-child th:last-child { border-top-right-radius: 8px; }

.u-hub-table tbody tr {
  border-top: 2px solid #f5f5f5;
  color: #667085;
  background-color: #fff;
}

.u-hub-table tbody tr:hover { background-color: var(--default-table-background-hover); }
.u-hub-table td[rowspan] { background-color: #fff; }

.u-hub-table tr tr {
  background-color: #b7b7b7;
  padding: 13px 23px;
}

.u-hub-table th {
  font-weight: 700;
  padding: 0 12px;
}

.u-hub-table th > * {
  padding: 12px 0;
}

.u-hub-table tr {
  border-bottom: 1px solid transparent;
}

.u-hub-table tbody tr:last-child td:first-child {
  border-radius: 0 0 0 8px;
}

.u-hub-table tbody tr:last-child td:last-child {
  border-radius: 0 0 8px 0;
}

.u-hub-table td {
  display: table-cell;
  width: auto;
  font-weight: 500;
  padding: 12px;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

/* #endregion */