/* Styles.css */

/* No border on DateRangePicker */
.SingleDatePickerInput {
  border: 0px;
  background-color: transparent;
  border-color: transparent; 
  box-shadow: transparent;
}

/* Fix box width of datepicker to be 100% of parent container*/
.DateInput, .DateInput_1 {
  width: 100%; /* replace with whatever length you prefer */
  height: 40px;
  background-color: transparent;
  border-color: transparent; 
  box-shadow: transparent;
}

.DateInput_input, .DateInput_input_1 {
  text-align: center;
  font-family: arial;
  font-size: 0.8rem;
  font-weight: 400;
  background-color: transparent;
  color: black;
  margin: 0px;
  border-color: transparent; 
  box-shadow: transparent;
}

/* Make links yellow and underlined on hover */
/* Need to use !important so that it overrides css in python code */
.nav-link:hover {
  color: yellow !important;
  text-decoration-line: underline !important;
  text-decoration-color: yellow !important;
}

/* Make inputs yellow when hovered over */
.inp:hover {
  background-color: yellow !important;
}

/* Menu options */
.Select-option,
.VirtualizedSelectOption,
.VirtualizedSelectFocusedOption {
  text-align: left !important;
}

/* Make button shade change when hovered over */
.calc_btn:hover {
  background-color: #0F6B62 !important;
  border-color: #0F6B62 !important;
}

.res_btn:hover {
  background-color: #2B71A1 !important;
  border-color: #2B71A1 !important;
}

/* Target the checkbox input on hover */
.checkbox_inp:hover {
  box-shadow: 0 0 0 2px yellow !important;
}

.inp_component {
  text-align: center;
  border: 0px;
  width: 100%;
  font-family: arial;
  font-size: 1.2rem;
  font-weight: 400;
  height: 40px;
  margin: 0px;
  color: black;
}

/* The actual rendered control inside the dropdown */
/* .inp_component .Select-control,
.inp_component .dropdown .Select-control {
  background-color: transparent !important;
  border: 0px !important;
  border-color: transparent !important;
  box-shadow: none !important;
} */

/* Focused state also needs overriding — Dash re-applies box-shadow on focus */
/* .inp_component .Select-control:hover,
.inp_component .is-focused .Select-control,
.inp_component .is-focused:not(.is-open) > .Select-control {
  box-shadow: none !important;
  border-color: transparent !important;
} */

.inp {
  text-align: center;
  border: 2px solid;
  border-radius: 20px;
}

.inp2 {
  text-align: center;
  border: 2px solid;
  border-radius: 20px;
}

.calc_btn {
  text-align: center;
  border: 2px solid;
  border-radius: 20px;
  font-family: arial;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0px;
  color: white;
}

.res_btn {
  text-align: center;
  border: 2px solid;
  border-radius: 20px;
  font-family: arial;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0px;
  color: white;
}

.button_div {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}

.out_format {
  text-align: center;
  border: 5px solid;
  border-radius: 20px;
  color: black;
  font-size: 1.2rem;
  font-weight: 400;
}

.navbar_logo {
  margin-left: 20px;
  margin-top: 5px;
  margin-bottom: 5px;
  background-color: white;
  border-radius: 20px;
  min-width: 150px;
}

.navbar_title {
  text-decoration: none;
  font-family: arial;
  font-size: 1.8rem;
  font-weight: bold;
  color: white;
}

.navbar_div {
  position: sticky;
  top: 0;
  z-index: 10000;
  border-radius: 20px;
}

.splash_pass {
  text-align: center;
  border: 2px solid;
  border-radius: 20px;
  font-family: arial;
  font-size: 1.2rem;
  font-weight: bold;
  height: 40px;
  width: 30%;
}

.splash_btn {
  text-align: center;
  border: 2px solid;
  border-radius: 20px;
  font-family: arial;
  font-size: 1.2rem;
  font-weight: bold;
  color: white;
}

.splash_inner {
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 30px;
  margin-bottom: 30px;
}

.splash_outer {
  margin-left: 15%;
  margin-right: 15%;
  margin-top: 30px;
  margin-bottom: 30px;
}

.splash_page {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  font-family: arial;
  font-size: 1.2rem;
  font-weight: 400;
  color: black;
  text-align: center;
}

.nav-link {
  text-decoration: none;
  font-family: arial;
  font-size: 1.2rem;
  font-weight: bold;
  color: white;
  margin-left: 20px;
}

.main_inner {
  font-family: arial;
  font-size: 1.2rem;
  font-weight: 400;
  color: black;
  margin-left: 20px;
  margin-right: 20px;
}

.main_outer {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.main_page {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  width: 100%;
}

.validation_msg {
  text-align: left;
  font-family: arial;
  font-size: 1.2rem;
  font-weight: bold;
}

.out_text {
  font-family: arial;
  font-size: 1.2rem;
  font-weight: 400;
  color: black;
}