/*******************************/
/* LIST OF ELEMENTS WITH STYLE */
/*******************************/

/*  BODY
/*  BUTTONS
/*  DATE PICKER
/*  DOCUMENTATION MODAL
/*  DROP DOWNS
/*  FIGURE APPENDICES
/*  FIGURE ROWS
/*  HEADER
/*  LINKS
/*  ROW CONTAINERS
/*  RADIO BUTTONS
/*  SCANNERS OFFLINE FIGURE
/*  SPIDER PLOT
/*  TABLES
/*  TITLES

/************************************/
/**************  BODY   *************/
/************************************/

.page {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #12284c;
  font-size: 14px;
  line-height: 1.3;
  font-family: 'Lato', sans-serif;
  color: #ffffff;
}

.sub_page {
  padding: 40px;
  min-height: 1100px;
}

/************************************/
/***********   BUTTONS   ************/
/************************************/

.volumental-button {
  /* Positioning */
  display: flex;
  /* Box Model */
  box-sizing: border-box;
  min-width: 170px;
  height: 51px;
  margin: 0;
  padding: 12px 32px;
  /* Typography */
  font-family: 'Lato', sans-serif;
  font-size: 21px;
  text-transform: none;
  /* Visual */
  appearance: auto;
  color: #ffffff;
  background-color: transparent;
  /* Border */
  border-width: 2px;
  border-style: solid;
  border-color: #ffffff;
  border-radius: 55px;
  border-image: initial;
  /* Centering text */
  justify-content: center;
  align-items: center;
  /* Misc */
  cursor: default;
}

/* Button hovering */
.volumental-button:hover {
  background-color: #ed6861;
  border-color: #ed6861;
  cursor: pointer;
}
.export-button {
  /* Positioning */
  display: flex;
  /* Box Model */
  box-sizing: border-box;
  min-width: 80px;
  height: 31px;
  margin: 0;
  padding: 12px 32px;
  /* Typography */
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  text-transform: none;
  /* Visual */
  appearance: auto;
  color: #ffffff;
  background-color: transparent;
  /* Border */
  border-width: 1px;
  border-style: solid;
  border-color: #ffffff;
  border-radius: 55px;
  border-image: initial;
  /* Centering text */
  justify-content: center;
  align-items: center;
  /* Misc */
  cursor: default;
}
.export-button:hover {
  background-color: #ed6861;
  border-color: #ed6861;
  cursor: pointer;
}

/* Buttons from index page */
.index-button {
    margin-right: 10px;
    padding: 5px 15px;
    background-color: #12284c;
    color:white;
    border-radius: 55px;
    cursor: pointer;
}

.index-button-container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

/************************************/
/***********  DATE PICKER   *********/
/************************************/

.DateRangePickerInput  {
    background-color: #12284c;
}
.DateRangePickerInput_arrow_svg {
    vertical-align: middle;
    fill: #ffffff;
    height: 50px;
    width: 50px;
    padding-right: 10px;
    padding-left: 10px;
}

.DateRangePickerInput {
    background-color: #12284c;
}
.DateRangePickerInput__withBorder {
    border-radius: 0px;
    border: 1px solid #12284c;
}
.DateInput_input {
  text-align: center;
  background-color: #12284c;
  border-width: 2px;
  border-style: solid;
  border-color: #ffffff;
  border-radius: 55px;
  color: var(--volumental-white);
}

.DateInput_input:hover {
  background-color: #ed6861;
  border-color: #ed6861;
  cursor: pointer;
}

.DateInput_input::placeholder {
    color: var(--volumental-white);
}

.DateInput {
    text-align: center;
    box-sizing: border-box;
    border-radius: 55px;
}

.DateRangePickerInput_clearDates_svg {
    fill: #ed6861;
    height: 10px;
    width: 15px;
    vertical-align: middle;

}

.DateRangePickerInput_clearDates {
    background: 0 0;
    border: 0;
    color: inherit;
    font: inherit;
    line-height: normal;
    overflow: visible;
    cursor: pointer;
    position: relative;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/************************************/
/****   DOCUMENTATION MODAL   *******/
/************************************/

.modal-content {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    pointer-events: auto;
    background-color: #12284c;
    color: white;
    font-size: 16px;
    font-family: 'Lato', sans-serif;
    border: 2px solid white;
    padding: 20px 0 0 50px;
}

.modal-body {
  margin-bottom: 20px;
}


/************************************/
/*********   DROP DOWNS   ***********/
/************************************/

.has-value.Select--single>.Select-control .Select-value .Select-value-label, .has-value.is-pseudo-focused.Select--single>.Select-control .Select-value .Select-value-label {
  color: #12284c;
  font-size: 14px;
}

.Select, .Select div, .Select input, .Select {
  color: #12284c;
}


/************************************/
/*********   CHECK LIST   ***********/
/************************************/

.checklist {
  color: var(--volumental-white);
  font-size: 20px;
  margin-bottom: 10px;
}

.checklist input[type="checkbox"] {
    background-color: var(--volumental-navy-blue);
    color: var(--volumental-white);
    width: 24px;
    height: 18px;
    vertical-align: middle;
}


/************************************/
/******  FIGURE APPENDICES    *******/
/************************************/

.figure-appendices-right {
    display: flex;
    justify-content: flex-end;
}

.figure-appendices-left {
}

/************************************/
/*******    FIGURE ROWS     *********/
/************************************/

.indicators-row {
  display: flex;
  justify-content: space-between;
}

.one-figure-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}

.two-figure-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 40px;
  align-content: stretch;
}

.three-figure-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom:40px;
}

.org-tree-row {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: 40px;
   align-content: stretch;
}

.right-figures {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  flex: 0.75;
}

.dropdown-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}

.sizing-dropdown-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  margin-bottom: 50px;
}

.centered-datepicker-row {
    display: flex;
    align-items: center;
    flex-direction: column;
}

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

.header-wrapper {
  background: url("/assets/logos/banner3.webp") no-repeat;
  background-size: cover;
  background-position: bottom;
  height: auto;
  flex-direction: column;
  justify-content: space-between;
  padding: 2%;
  border-bottom: 5px solid white;
}

.row-with-logos {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1%;
}

.row-with-menu {
  text-align: left;
  font-size: 20px;
  color: #ffffff;
  border-color: #ffffff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* Sizes for customers logos  */
.normal-logo {
  height: 100px;
  width: auto;
}

.small-logo {
  height: 80px;
  width: auto;
}

.big-logo {
  height: 40px;
  width: auto;
}

/* Menu tabs */
.tab.first {
  border-left-style: none;
}

.tab {
  border-style: solid;
  border-color: #ffffff;
  border-bottom-style: none;
  border-top-style: none;
  border-right-style: none;
  padding: 5px 10px;
}

a.tab {
  color: #ffffff;
  font-family: 'Lato', sans-serif;
  text-decoration: none;
}

a.tab:hover {
  color: var(--volumental-red);
}

/************************************/
/***********   LINKS   ************/
/************************************/

a {
  color: #ffffff;
  font-family: 'Lato', sans-serif;
}

a:hover {
  color: var(--volumental-red);
}


/************************************/
/********  ROW CONTAINERS    ********/
/************************************/

.one-figure-row .high-figure-container{
  width: 100%;
  height: 200%;
}

.one-figure-row .scroll-figure-container{
  width: 100%;
  height: 200%;
  white-space: nowrap;
  overflow-x: auto;
}

.one-figure-row .figure-container{
  width: 100%;
}

.figure-with-dropdown-container {
  width: 100%;
}

.two-figure-row .figure-container {
  width: 48%;
}

.two-figure-row .super-narrow-figure-container {
  width: 20%;
}

.two-figure-row .narrow-figure-container {
  width: 30%;
}

.two-figure-row .wide-figure-container {
  width: 85%;
}

.two-figure-row .scroll-figure-container {
  width: 30%;
  max-height: 500px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: auto;
}


.three-figure-row .figure-container {
  width: 33%;
  height: 70%;
}

.checkbox-container {
  margin-top: 75px;
}

.dropdown-container {
  min-width: 300px;
  max-width: 300px;
}

.small-dropdown-container {
  min-width: 180px;
  max-width: 200px;
}

.dropdown-with-title-container .dash-dropdown{
  max-width: 300px;
}

.scroll {
  overflow: auto;
}

/************************************/
/*********  RADIO BUTTONS   *********/
/************************************/

.radio-button-container {
    font-size: 16px;
    color: white;
}

.radio-button-checked {
    accent-color: var(--volumental-red);
}

.radio-button-label-checked {
    color: var(--volumental-red);
}

/************************************/
/****  SCANNERS OFFLINE FIGURE   ****/
/************************************/

.js-plotly-plot .plotly, .js-plotly-plot .plotly div {
  direction: ltr;
  font-family: "Lato", sans-serif;
}
.framed{
border: 10px solid white;
}

table {
  width: 100%;
}

td {
  padding: 2px 0px;
}

tr:nth-child(even) {
  background-color: #12284c;
}
tr:nth-child(odd) {
  background-color: #12284c;
}

/************************************/
/***********  SPIDER PLOT   *********/
/************************************/

.js-plotly-plot .plotly svg a {
  font-size: 15px;
  fill: white !important;
  text-decoration: underline;
}

/************************************/
/************   TABLES   ************/
/************************************/

.ag-theme-alpine .ag-header {
    --ag-header-foreground-color: var(--volumental-white);
    --ag-header-background-color: var(--volumental-navy-blue);
    --ag-header-column-separator-height: 100%;
    --ag-header-column-separator-display: block;
    --ag-header-column-resize-handle-display: none;
    font-family: 'Lato';
    font-size: 14px;
    text-align: center;
}

.ag-theme-alpine .ag-cell{
    --ag-cell-horizontal-border: solid var(--volumental-white);
    font-family: 'Lato';
}

.ag-theme-alpine .ag-root-wrapper{
    --ag-background-color: var(--volumental-navy-blue);
    --ag-font-family: 'Lato';
    --ag-font-size: 14px;
}

.ag-theme-alpine .ag-header-cell-label {
    justify-content: center;
    font-family: 'Lato';
}
.ag-theme-alpine .ag-header-group-cell {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
}
.ag-theme-alpine .ag-icon {
    color: var(--volumental-white);
}
.ag-theme-alpine .ag-paging-panel {
    color: var(--volumental-white);
    background-color: var(--volumental-navy-blue);
    font-family: 'Lato';
}
.ag-theme-alpine .ag-picker-field-wrapper {
    color: var(--volumental-white);
    background-color: var(--volumental-navy-blue);
    font-family: 'Lato';
}

.ag-theme-alpine .ag-overlay-loading-wrapper {
    color: var(--volumental-white);
    background-color: var(--volumental-navy-blue);
    border: none;
    font-family: 'Lato';
    font-size: 20px
}
.ag-layout-auto-height .ag-center-cols-viewport {
    min-height: unset !important;
}
/************************************/
/************   TITLES   ************/
/************************************/

h1, .internal h2, .internal h3, .internal h4, .internal h5, .internal h6 {
    margin-top: 0;
    color: white;
    font-family: 'Lato', sans-serif;
}

/* Figure annotation */
.figure-annotation {
  font-size: 1.2rem;
  font-weight: 300;
  padding: 2px 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: var(--volumental-white);
}


/* Figure titles */
.figure-title {
  font-size: 25px;
  padding: 2px 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: var(--volumental-white);
  font-weight: bold;
}

/**********************************/
/************   TREE   ************/
/**********************************/
.ant-tree li span.ant-tree-switcher.ant-tree-switcher_close .anticon.anticon-caret-down.ant-tree-switcher-icon svg path{
    d : path("M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448s448-200.6 448-448S759.4 64 512 64zm192 472c0 4.4-3.6 8-8 8H544v152c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V544H328c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h152V328c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v152h152c4.4 0 8 3.6 8 8v48z");
}

.ant-tree li span.ant-tree-switcher.ant-tree-switcher_open .anticon.anticon-caret-down.ant-tree-switcher-icon svg path{
    d: path("M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8Z");

}

.anticon.anticon-caret-down.ant-tree-switcher-icon svg{
    width: 1.5rem;
    height: 1.5rem;
    color: var(--volumental-red);
}

.ant-tree-title {
    color:var(--volumental-white);
    font-family: var(--primary-font), sans-serif;
    font-size: 18px
}

.ant-tree-title:hover {
    color: var(--volumental-red);
}

.ant-tree li .ant-tree-node-content-wrapper:hover {
    background-color: unset !important;
}

.ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
    background-color: unset !important;
}

.ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected .ant-tree-title {
    color: var(--volumental-red);
}

.learn-more-modal h1, .learn-more-modal h2, .learn-more-modal h3, .learn-more-modal h4, .learn-more-modal h5, .learn-more-modal h6 {
    color: var(--volumental-white);
    font-family: 'Lato', sans-serif;
}