@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import 'nsw-theme.css';

/* #### GENERAL #### */

.hidden {
  display: none;
}

.inline {
  display: inline-block;
}

.centered-with-margins {
  display: block;
  margin: 0 auto;
}

/* Max Width Container */
.max-width-container {
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 576px) {
  .max-width-container {
      max-width: 540px;
  }
}

@media (min-width: 768px) {
  .max-width-container {
      max-width: 720px;
  }
}

@media (min-width: 992px) {
  .max-width-container {
      max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .max-width-container {
      max-width: 1140px;
  }
}


/* #### DASH CORE COMPONENTS #### */

/* DropDown */
.VirtualizedSelectOption {
  align-items: flex-start !important;
  overflow-y: auto;
  line-height: 16.5px;
  padding-top: 10px;
}

/* #### DASH BOOTSTRAP COMPONENTS #### */

/* Alert */
.alert {
  margin: 0px;
  margin-top: 5px;
}

/* RadioItems as ButtonGroup (https://dash-bootstrap-components.opensource.faculty.ai/docs/components/button_group/) */
.radio-group .form-check {
  padding-left: 0;
}
.radio-group .btn-group > .form-check:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.radio-group .btn-group > .form-check:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}
/* inactive buttons in button group */
.radio-group .btn-group > .form-check > .btn {
  background-color: white;
  border: 1px solid black;
  border-color: #002664;
  color: #002664;
}
/* active button in button group */
.radio-group .btn-group > .form-check > .btn.active {
  background-color: #002664;
  color: white;
  box-shadow: none;
}

/* buttons */
.btn-link {
  text-align: left;
  color: var(--nsw-brand-dark) !important;
}

.btn-primary, .export {
  background-color: #002664;
  color: white;
  border: none;
  border-radius: 5px;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 12px;
  padding-right: 12px;
  font-weight: bold;
}
.btn-primary:focus, .export:focus {
  background-color: #002664;
  box-shadow: none !important;
  outline-style: solid !important;
  outline-width: 3px !important;
  outline-color: #0085B3 !important;
  outline-offset: 3px;
}
.btn-primary:hover, .export:hover {
  background-color: #26467b;
}

/* slider when active */
.form-check-input:checked {
  background-color: #002664;
}

/* tabs */
.nav-tabs {
  background-color: #F2F2F2;
  border-bottom: none;
}
.nav-link {
  color: black !important;
  font-weight: bold;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0px !important;
}
.active-tab-label {
  border-bottom: 2px solid #D7153A !important;
  background-color: #F2F2F2 !important;
}
.tab-label:hover {
  background-color: rgba(0, 133, 179, 0.2) !important;
}
.tab-label:hover:not(.active-tab-label) {
  border-bottom: 2px solid rgba(0, 133, 179, 0.2) !important;
}

/* alert when large connected component is detected */
.alert {
  border-radius: 0px;
}

.alert-light .btn-close {
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  /* background-color: var(--nsw-text-dark); */
  /* mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; */
  /* color: var(--nsw-text-dark); */
}

/* #### DASH DATA TABLE #### */

.first-page, .previous-page, .next-page, .last-page {
  color: #002664;
}
.first-page:hover, .previous-page:hover, .next-page:hover, .last-page:hover {
  color: #26467b !important;
}

.dash-table-tooltip {
  color: white;
  font-size: 0.85em;
  background-color: black !important;
  position: absolute; 
  bottom: 3px ; 
}
 
.dash-tooltip[data-attr-anchor='top']:before {
  border-width: 9px;
  margin-left: -9px;
} 

.dash-tooltip[data-attr-anchor='top']:after {
  border-color: transparent;
  border-bottom-color: black !important;
  border-width: 8px;
  margin-left: -8px;
}

.dash-spreadsheet-inner table {
  --accent: white !important;
}
input.dash-filter--case.dash-filter--case--sensitive, input.dash-filter--case.dash-filter--case--insensitive {
  color: #002664 !important;
  border-color: #002664 !important;
}


/* #### MAIN HEADER #### */

.main-header-inner-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 1.25rem 1rem;
}

.main-header-logo {
  height: 4em;
  display: inline;
}

.main-header-title-container {
  padding: 0.75rem 0;
  color: var(--nsw-brand-dark);
}

@media (min-width: 62rem) {
  .main-header-title-container {
    padding: 0;
    margin-left: 2.5rem;
  }
}

.main-header-title {
  font-size: var(--nsw-font-size-lg-desktop);
  font-weight: var(--nsw-font-bold);
  color: var(--nsw-brand-dark);
  align-items: center;
}

.main-header-description {
  font-size: var(--nsw-font-size-xs-desktop);
  line-height: var(--nsw-line-height-xs-desktop);
  color: var(--nsw-brand-dark);
}


/* #### CROSS REF TAB #### */

.info-box-container {
  background-color: var(--nsw-off-white);
  padding-top: calc(var(--bs-gutter-x) * .5);
}

.info-box-prop-list-container {
  padding-top: 1rem;
}

.info-box-prop-list-container .info-box-prop-list-item-container {
  margin-bottom: 1rem;
}

.info-box-prop-label {
  font-weight: var(--nsw-font-bold);
}

.info-box-container .expand-node-btn {
  margin: 5px;
}

.text-container {
  margin-left: 0;
  margin-right: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.cross-ref-container .filter-panel-inner-container > .row {
  margin-left: 0;
  margin-right: 0;
  padding-top: 1rem;
}

.cross-ref-container .filter-panel-inner-container > .row:first-child {
  padding-top: 0;
}

.cross-ref-container .filter-panel-inner-container > .row > .col {
  padding-left: 1rem;
  padding-right: 1rem;
}

.cross-ref-container .sections-table-item {
  display: flex;
  flex-direction: column;
}

.cross-ref-container .sections-table-item-show-modal-btn {
  align-self: flex-end;
}

.cross-ref-container .sections-table-item-header {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.cross-ref-container .sections-table-item-text {
  line-height: 1.5rem;
}

.cross-ref-container .net-viz-gestures-info-container {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
}

.info-box-section-text-modal-body {
  white-space: pre-wrap;
}

.top-header {
  font-size: 1.25rem;
  font-weight: var(--nsw-font-bold);
}