/* Global Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

body {
  font-family: Lato, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
}


/* Scrollbar
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box;
}

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0;
  }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 80%;
  }

  .column,
  .columns {
    margin-left: 4%;
  }

  .column:first-child,
  .columns:first-child {
    margin-left: 0;
  }

  .one.column,
  .one.columns {
    width: 4.66666666667%;
  }

  .two.columns {
    width: 13.3333333333%;
  }

  .three.columns {
    width: 22%;
  }

  .four.columns {
    width: 30.6666666667%;
  }

  .five.columns {
    width: 39.3333333333%;
  }

  .six.columns {
    width: 48%;
  }

  .seven.columns {
    width: 56.6666666667%;
  }

  .eight.columns {
    width: 65.3333333333%;
  }

  .nine.columns {
    width: 74.0%;
  }

  .ten.columns {
    width: 82.6666666667%;
  }

  .eleven.columns {
    width: 91.3333333333%;
  }

  .twelve.columns {
    width: 100%;
    margin-left: 0;
  }

  .one-third.column {
    width: 30.6666666667%;
  }

  .two-thirds.column {
    width: 65.3333333333%;
  }

  .one-half.column {
    width: 48%;
  }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns {
    margin-left: 8.66666666667%;
  }

  .offset-by-two.column,
  .offset-by-two.columns {
    margin-left: 17.3333333333%;
  }

  .offset-by-three.column,
  .offset-by-three.columns {
    margin-left: 26%;
  }

  .offset-by-four.column,
  .offset-by-four.columns {
    margin-left: 34.6666666667%;
  }

  .offset-by-five.column,
  .offset-by-five.columns {
    margin-left: 43.3333333333%;
  }

  .offset-by-six.column,
  .offset-by-six.columns {
    margin-left: 52%;
  }

  .offset-by-seven.column,
  .offset-by-seven.columns {
    margin-left: 60.6666666667%;
  }

  .offset-by-eight.column,
  .offset-by-eight.columns {
    margin-left: 69.3333333333%;
  }

  .offset-by-nine.column,
  .offset-by-nine.columns {
    margin-left: 78.0%;
  }

  .offset-by-ten.column,
  .offset-by-ten.columns {
    margin-left: 86.6666666667%;
  }

  .offset-by-eleven.column,
  .offset-by-eleven.columns {
    margin-left: 95.3333333333%;
  }

  .offset-by-one-third.column,
  .offset-by-one-third.columns {
    margin-left: 34.6666666667%;
  }

  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns {
    margin-left: 69.3333333333%;
  }

  .offset-by-one-half.column,
  .offset-by-one-half.columns {
    margin-left: 52%;
  }

}



/* Typography
  –––––––––––––––––––––––––––––––––––––––––––––––––– */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
}

/* Minor Third Design */
h1 {
  font-size: 2.488rem;
  line-height: 1.2;
  letter-spacing: -.1rem;
  margin-bottom: 2rem;
}

h2 {
  font-size: 2.074rem;
  line-height: 1.25;
  letter-spacing: -.1rem;
  margin-bottom: 1.8rem;
  margin-top: 1.8rem;
}

h3 {
  font-size: 1.728rem;
  line-height: 1.3;
  letter-spacing: -.1rem;
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
}

h4 {
  font-size: 1.44rem;
  line-height: 1.35;
  letter-spacing: -.08rem;
  margin-bottom: 1.2rem;
  margin-top: 1.2rem;
}

h5 {
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: -.05rem;
  margin-bottom: 0.6rem;
  margin-top: 0.6rem;
}

h6 {
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0;
  margin-bottom: 0.75rem;
  margin-top: 0.75rem;
}

p {
  margin-top: 0;
}



/* Header Colors
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #FFFFFF
}



/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both;
}


/* Grid Container
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Set-up grid layout for tables */
.grid-container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-rows: auto;
  grid-template-areas: "header";
  justify-content: auto;
}


/* Table Styling
–––––––––––––––––––––––––––––––––––––––––––––––––– */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


table {
  border-collapse: collapse;
  border: 0.5px solid #4E5D6C;
  border-radius: 4px;
  background-color: #0D2031;
  text-align: left;
  overflow: visible;
  display: block;
  justify-content: center;
  align-items: left;
  /* Table Scroll */
  /* overflow: hidden; */
  /* overflow-y:scroll;
  overflow-x:scroll; */
  height: auto;
  width: auto;
  /* Cleans up Whitespace from Scroll */
  max-width: fit-content;
  /* Fits data within Cells */
  /* max-height: 500px; */
}

th {
  font-size: 14px;
  grid-area: header;
  padding: .5rem 2rem;
  line-height: 15px;
  letter-spacing: 0.1rem;
  font-weight: bold;
  color: white;
  background-color: #0D2031;
  width: auto;
  font-size: 11px;
  text-transform: uppercase;
  position: sticky;
  /* Fixed header */
  top: 0px;
  vertical-align: baseline;
  z-index: 10;
}


tr {
  background-color: #2C4155;
  border-radius: 5px;
  padding: 0 10px 0 0;
  align-items: center;
  text-align: center;
  vertical-align: baseline;
}

td {
  font-size: 14px;
  line-height: 25px;
}

table:hover {
  box-shadow: 0 2.5px 5px #4E5D6C;
}

th:hover {
  color: #63A4CE;
}

tr:hover {
  box-shadow: inset 0px -9px 5px -10px #0F2437;
  background-color: rgba(43, 65, 85, 0.90);
  border-radius: 0;
}




/* Table Scrollbar
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Width */
table::-webkit-scrollbar {
  width: 10px;
}

/* Track */
table::-webkit-scrollbar-track {
  background: #1C3041;
  border-radius: 5px;
}

/* Handle */
table::-webkit-scrollbar-thumb {
  background: #686868;
  border-radius: 5px;
}


/* Handle on hover */
table::-webkit-scrollbar-thumb:hover {
  background: #63A4CE;
}

/* Horizontal scroll (need to revisit) */
table::-webkit-scrollbar:horizontal {
  /* background: #1C3041;
  border-radius: 5px; */
  width: 2px;
}




/* Table Globals
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.remove_th_scroll th {
  position: inherit !important;
}



/* APP GLOBALS
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Add Margin Above Element */
.add_top_margin {
  margin-top: 2.5rem;
}




/* UI COMPONENTS
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Global Elements
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Flexbox Styling */
.flex_items_column {
  flex-direction: column;
  display: flex !important;
}


/* Removes Margins */
.remove_margins {
  margin: 0 !important;
}

/* Removes Left and Right Margins */
.remove_left_and_right_margins {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.remove_top_and_bottom_margins {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Set width */
.full_width {
  width: 100% !important;
}

/* Adds Bold Emphasis */
.bold_font_weight {
  font-weight: bold;
}

/* Inputs
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Style for text and number inputs when selected */
input[type="text"]:focus,
input[type="number"]:focus {
    border: 1px solid #3B5BDB; 
    outline: none; /* Remove default focus outline */
}

/* Styles the div containers for various components */
.component_div {
  margin: 12px;
}

/* Component Label */
.component_label_container {
  margin-bottom: -12px;
  margin-top: 12px;
  margin-left: 12px;
}

/* Component Label Option #2 - Handles the margins on the component e.g. c.add_date */
.component_label_container_2 {
  margin-bottom: -12px;
  margin-top: 12px;
  margin-left: 12px;
}


/* Comment Cards
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Card Styling */
.comment_card {
  border: 1px solid rgba(235, 235, 238, 0.20) !important;
  background: none;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 0;
}

/* User Icon Image Styling */
.comment_card_user_icon {
  height: 32px;
  width: 32px;
  display: inline-block;
  margin-left: 15px;
  margin-top: 29px
}

/* Username Styling */
.comment_card_subtitle {
  font-weight: bold;
  font-size: 14px;
}

/* Comments Text Body Styling */
.comment_card_body {
  font-style: italic;
}

/* Keep! Overrides underlying class */
.border-info {
  border: none;
}


/* Cards - Workflow Type 2 Procedures
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.procedure_card {
  min-width: 25rem;
  max-width: fit-content;
  border-radius: 5px;
  margin-top: 15px;
  margin-bottom: 10px;
  padding: 0;
  border: none;
}

.procedure_card_header {
  background-color: #314659;
  font-weight: bold;
  color: white;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, .125);
  border-radius: 5px 5px 0px 0px !important;
}

.procedure_card_body {
  background-color: #20374C;
  padding: 0rem 1rem !important;
}

.procedure_last_card_body {
  background-color: #20374C;
  border-radius: 0px 0px 5px 5px;
  padding: 0rem 1rem !important;
}


/* Card Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* button inside of the card body */
.card_button {
  background-color: #4C9BE8;
  color: #0F2537;
  border: none;
  padding: 2.5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  margin: 6px 4px;
  margin-top: 15px;
  margin-bottom: 15px;
  cursor: pointer;
  border-radius: 6px;
  letter-spacing: -0.02em;
  font-weight: 400;
  font-style: normal;
  transition-duration: 0.4s ease;
}

.card_button:hover {
  background-color: #4C9BE8;
  color: white;
  padding: 2.5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  margin: 6px 4px;
  margin-top: 15px;
  margin-bottom: 15px;
  cursor: pointer;
  letter-spacing: -0.02em;
  font-weight: 400;
  font-style: normal;
}


/* Badge
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Step Status Indicators in Procedure Files */

.badge_completed {
  /* text styling */
  color: #145B1E;
  font-weight: bold;
  text-align: left;
  font-size: 12px;
  /* element styling */
  width: 80px;
  height: 21px;
  padding-left: 20px;
  /* background icon styling */
  background-image: url("icons/check-mark-completed.svg");
  background-position: left;
  background-repeat: no-repeat;
}

.badge_not_started {
  /* text styling */
  color: #4E5D6C;
  font-weight: bold;
  text-align: left;
  font-size: 12px;
  /* element styling */
  width: 90px;
  height: 21px;
  padding-left: 20px;
  /* background icon styling */
  background-image: url("icons/check-mark-not-started.svg");
  background-position: left;
  background-repeat: no-repeat;
}

.badge_in_progress_notification {
  /* text styling */
  color: #B12328;
  font-weight: bold;
  text-align: left;
  font-size: 12px;
  padding-left: 20px;
  /* element styling */
  height: fit-content;
  /* background icon styling */
  background-image: url("icons/check-mark-alert.svg");
  background-position: left;
  background-repeat: no-repeat;
}


/* Alerts (dbc.Alert)
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* global overrides */
.notification_alerts {
  border-radius: 10px;
}

/* Alerts Pane */

/* red/critical alert */
.alerts_critical {
  background-color: #D9534F;
}

/* blue/info alert */
.alerts_non_critical {
  background-color: rgba(207, 244, 252, 0.1)
}





/* Offcanvas
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.offcanvas {
  background-color: #0D2437;
}

.offcanvas-header {
  color: white;
}

.offcanvas-title {
  font-weight: bold;
}



/* Right Pane Component
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* need to investigate why 'right_pane' class isn't getting applied */
.offcanvas {
  border-radius: 6px 0px 0px 6px;
}


/* Search Component
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.search_input {
  border-radius: 4px;
  width: auto;
  max-width: 250px;
  appearance: none;
  border: none;
  background: none;
  color: white;
  height: 30px;
  border: 0.25px solid #797E93;
  margin-bottom: 10px;
}

.search_input:hover {
  border: 0.25px solid #D5D8DF;
}



/* Progress Bar
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.progress_bar {
  border-radius: 6px;
  width: 300px;
  margin-left: 10px;
  margin-top: 12px;
  align-content: center;
  justify-content: flex-start;
}




/* Tabs styling
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.custom-tabs-container {
  width: 30%;
  height: 40px;
  /* align-self: flex-start; */
  padding: 12px !important;
  /* border-bottom: 1px solid #4E5D6C; */
  margin-bottom: 50px;
}

.custom-tab-left {
  border-top: 1.5px solid #4E5D6C !important;
  border-bottom: 1.5px solid #4E5D6C !important;
  padding: 12px !important;
  border-top-left-radius: 4px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 40px;
}

.custom-tab-right {
  border-top: 1.5px solid #4E5D6C !important;
  border-bottom: 1.5px solid #4E5D6C !important;
  padding: 12px !important;
  border-top-right-radius: 4px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 40px;
}

.selected-tab-left {
  border-top: 3px solid #63A4CE !important;
  background-color: #1C3041 !important;
  color: white !important;
}

.selected-tab-right {
  border-top: 3px solid #63A4CE !important;
  background-color: #1C3041 !important;
  color: white !important;
}

.custom-tab-left:hover {
  border-top: 3px solid #63A4CE !important;
  background-color: #1C3041 !important;
  color: white !important;
}

.custom-tab-right:hover {
  border-top: 3px solid #63A4CE !important;
  background-color: #1C3041 !important;
  color: white !important;
}

/* Datatable Component
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* need to revisit... */
/* Allows the dropdown list to appear within Dash datatables.  */

/* .Select-menu-outer {
  display: block !important;
} */

/* header */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th {
  background-color: #20374c;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th {
  background-clip: padding-box;
  padding: 2px;
  overflow-x: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  text-align: center;
}

/* data */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
  background-color: #0D2031;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td:hover {
  background-color: #467cab;
  border-color: #467cab;
}

/* pagination */
.dash-table-container .previous-next-container button.previous-page:hover,
.dash-table-container .previous-next-container button.next-page:hover,
.dash-table-container .previous-next-container button.first-page:hover,
.dash-table-container .previous-next-container button.last-page:hover {
  color: #467cab;
}

.dash-table-container .previous-next-container {
  text-align: left;
  padding: 5px 0px;
}



/* Internal Link Button
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.button_internal_link {
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  display: inline-block;
  font-size: 15px;
  margin: 6px 4px;
  margin-top: 0px;
  margin-bottom: 0px;
  cursor: pointer;
  letter-spacing: -0.02em;
  font-weight: 400;
  font-style: normal;
  transition-duration: 0.4s ease;
}

.button_internal_link:hover {
  font-weight: 600;
  background: none;
  border: none;
}






/* Date Component Styling
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Universal dash date component styling   */

.CalendarMonth_table {
  max-width: max-content;
  background: none;
  border: none;
  /* border-collapse: collapse; */
  border-radius: 4px;
  /* text-align: left; */
  /* hides scrollbar */
  overflow: hidden;
  display: block;
  justify-content: center;
  /* align-items: left; */
  /* Table Scroll */
  /* overflow-y:scroll;
  overflow-x:scroll; */
  /* height: auto;
  width: auto; */
}

.CalendarMonth_table:hover {
  /* background: none; */
  box-shadow: none;
  border: none;
}

.CalendarDay__default:hover {
  background: lightblue;
  color: black;
}

.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover {
  background: #4C9BE8;
  border: 1px double #4C9BE8;
  color: #fff
}



/* Generic Shaded Background Styling
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Example -- 
http://127.0.0.1:8050/chemex_executive/hub/cash_flow_forecast */

.generic_shaded_background {
  background-color: #20374C;
  border-radius: 10px;
  margin: 15px;
}






/* Graphing Components
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Indicator
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Adjust width of all js-plotly containers */
/* .user-select-none .svg-container {
  height: 250px;
} */







/*
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */






/* Dash Overrides
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* input box */
.Select-control {
  border-radius: 6px;
}




/* HTML Component Styling */

/* html.Hr
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* html.P */
.html_muted_text {
  color: #808080;
}


/* Label styling: Instructions string
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* .label-instructions {
  display: block;
  appearance: none;
  margin-bottom: 15px;
  color: #63A4CE;
  border-spacing: 0;
  text-align: left;

  font-weight: bold } */



/* Need to Clean Up
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Below styling for the calendar (date_range) UI Component.   */
/* .DateInput {
font-size: inherit;
} */


/* Don't remember what this was for
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* table {
    border-collapse: collapse;
  }
  th:not(.CalendarDay),
  td:not(.CalendarDay) {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #E1E1E1; }
  th:first-child:not(.CalendarDay),
  td:first-child:not(.CalendarDay) {
    padding-left: 0; }
  th:last-child:not(.CalendarDay),
  td:last-child:not(.CalendarDay) {
    padding-right: 0; } */



/* Nav Bar Base
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* .nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 16rem;
  padding: 2rem 1rem;
  /* Client specific styling */
/* background-color: #1B2350;
  margin-left: 18rem;
  margin-right: 2rem;
} */


/* Content Frame
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* .content-frame {
  margin-left: 18rem;
  margin-right: 2rem;
  padding: 2rem 1rem;
} */


/* Invalid Input
–––––––––––––––––––––––––––––––––––––––––––––––––– */

input:invalid {
  outline: none;
  border: .5px solid red
}