/*This stylesheet is WordPress ready*/
/* ============================= */
/*         Customize Styles      */
/* ============================= */
:root{
  /*          Color Setup       */
  --nb_primary: #ffffff;
  --nb_primary-container: #ffffff;
  --nb_primary-header: #ffffff;
  --nb_primary-text: #000000;
  --nb_primary-border: #000000;
  --nb_btn-primary: #E72929; /* Updated button color */
  --nb_transparent: transparent;
  /*           Font Setup        */
  --nb-font-screen-800: 1em;
  --nb_h1-header-size: 1.7em;
  --nb_header-font-size: 20px;
  --nb_mobile_header-font-size: 14px;
  --nb-button-font-size: 14px;
  --nb_font: 'Open Sans', sans-serif;
  /*        Margin/Padding/Width  */
  --nb_full-width: 100%;
  --nb_half-width: 65%;
  --nb-main-border-margins: 20;
  /*          Border Setup        */
  --nb_cell-radius: 5px;
  --nb_general-border-radius: 0; /* Remove rounded corners */
  --nb_general-border-radius-full: 0; /* Remove rounded corners */
  --nb_border-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.2);
}
/* ============================= */
/* Layout Of the Date Widget     */
/* ============================= */
.nb_container{
  margin:var(--nb-main-border-margins);
}
.nb_grid-container{
  display: grid;
  margin: 0 auto;
  box-shadow: none; /* Removed the shadow */
  background-color: transparent; /* Set background to transparent */
  border-radius: var(--nb_general-border-radius);
  width: var(--nb_half-width);
}
.nb_grid-row {
  display: flex;
  justify-content: space-between; /* Distribute space evenly */
  align-items: center; /* Align items vertically in the center */
  flex-direction: row; /* Default to row for larger screens */
  gap: 10px; /* Add space between date pickers and button */
}
.nb_grid-cell-1,
.nb_grid-cell-2,
.nb_grid-cell-3 {
  width: 30%; /* Ensure equal width for all cells */
  display: flex;
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  margin: 0; /* Reset margins */
  padding: 0; /* Reset padding */
}
.nb_datePicker,
.nb_btn {
  width: 100% !important; /* Force full width */
  display: flex;
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  margin: 0; /* Reset any margins */
  padding: 0 10px; /* Add padding to center the text */
  box-sizing: border-box; /* Ensure padding is included in the width */
}

/* ============================= */
/*         Label Styles          */
/* ============================= */
.nb_header{
  background: transparent; /* Set background to transparent */
  font-weight: bold;
  color: var(--nb_primary-text);
  text-align: center;
  font-size: var(--nb_header-font-size);
  font-family: var(--nb_font) !important;
  justify-content: center;
  display: flex;
  width: 100%;
}

/* ============================= */
/*    Screen Size Scaling        */
/* ============================= */
@media(max-width:400px){
  .nb_grid-row{
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  input{
    background-color: var(--nb_transparent);
  }
  input:focus{
    box-shadow: none;
  }
  .nb_datePicker{
    margin-left: 24px !important;
    width: 60% !important;
  }
  .nb_calendar{
    margin: 10px 10px 10px -10px !important;
  }
  .nb_header{
    font-size: var(--nb_mobile_header-font-size);
  }
}
@media(max-width: 800px){
  .nb_grid-container{
    background: transparent !important; /* Ensure background is transparent */
    grid-row-gap: 2rem !important;
    box-shadow: none !important; /* Ensure shadow is removed */
    width: 65% !important;
  }
  .nb_grid-row{
    flex-direction: column !important; /* Stack items vertically on smaller screens */
    margin-right: 10px;
    grid-template-columns: 3fr 3fr 2fr 2fr;
    background: transparent !important; /* Ensure background is transparent */
    box-shadow: none !important; /* Ensure shadow is removed */
    border-radius: 0.5rem !important;
    display: inline-block;
  }
  .nb_grid-cell-1,
  .nb_grid-cell-2,
  .nb_grid-cell-3{
    width: 100% !important; /* Set all grid cells to 100% width */
  }
  .nb_datePicker,
  input {
    width: 100% !important; /* Ensure date pickers take full width */
    max-width: 100% !important; /* Ensure they don’t overflow */
  }
  .nb_btn {
    width: 100% !important; /* Ensure button also takes full width */
  }
  .nb_grid-row:first-child{
    display: none !important;
  }

  .nb_header{
    display: none !important;
  }

  .far{
    display: none !important;
  }
  label{
    height: fit-content !important;
  }
  input{
    background-color: var(--nb_transparent) !important;
  }
  input:focus{
    box-shadow: none !important;
  }
  .nb_buttonText{
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: normal !important;
  }
}

/* For widths 417px and below */
@media(max-width: 417px) {
  .nb_grid-row {
    display: flex !important;
    flex-direction: column !important; /* Stack items vertically */
    justify-content: center !important; /* Center items horizontally */
    align-items: center !important; /* Center items vertically */
    width: 100% !important;
    margin: 0 auto !important;
  }

  .nb_datePicker,
  .nb_btn {
    width: 100% !important; /* Force full width */
    max-width: 100% !important; /* Prevent overflow */
    display: flex !important;
    justify-content: center !important; /* Center content horizontally */
    align-items: center !important; /* Center content vertically */
    box-sizing: border-box !important; /* Include padding in width */
    margin: 0 !important;
    padding: 0 10px !important; /* Padding to center text */
  }

  .nb_grid-cell-1,
  .nb_grid-cell-2,
  .nb_grid-cell-3 {
    width: 100% !important; /* Force full width */
    display: flex !important;
    justify-content: center !important; /* Center content horizontally */
    align-items: center !important; /* Center content vertically */
    margin: 0 !important;
    padding: 0 !important;
  }

  input {
    width: 100% !important; /* Force input to take full width */
    text-align: center !important; /* Center placeholder text */
    margin: 0 !important;
    padding: 0 10px !important;
  }
}

/* ============================= */
/*    Input Fields Styling       */
/* ============================= */
input::placeholder {
  color: #ffffff !important; /* Set placeholder font color to white */
  opacity: 1 !important; /* Ensure the color is fully applied */
}
.nb_btn{
  float: right !important;
  margin: 10px 10px 6px !important;
  background-color: var(--nb_btn-primary) !important;
  padding: 12px 10px !important;
  border: none !important;
  cursor: pointer !important;
  border-radius: var(--nb_general-border-radius-full) !important;
  font-weight: 400 !important; /* Updated font weight to reduce thickness */
  font-size: var(--nb-button-font-size) !important;
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: normal !important;
  width: 90% !important;
}
input {
  border: none !important;
  color: var(--nb_primary-text) !important;
  text-align: center !important;
  border-radius: var(--nb_general-border-radius-full) !important;
  font-size: 18px !important;
  padding: 10px 10px 5px 5px !important;
  display: block !important;
  width: 90% !important;
  /*Update the location of the calendar icon*/
  background: url(nb_calendar.svg) no-repeat right center !important;
  background-size: 16px !important; /* Adjust size as needed */
  filter: invert(1) !important; /* Inverts the color of the SVG to white */
  margin-right: 5px !important;
  height: 40px !important;
}
input:focus-visible{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.nb_datePicker{
  border: 1px solid #ffffff !important; /* Set the border color to white */
  border-radius: var(--nb_general-border-radius-full) !important;
  display: flex !important;
  min-height: fit-content !important;
  height: 44px !important;
  font-family: var(--nb_font) !important;
  margin: 10px !important;
  width: 90% !important;
}
.nb_grid_header {
  margin: 0.625em 0 0.75em 0 !important;
}

.nb_calendar{
  height: 24px !important;
  margin: 10px !important;
  color: #ffffff !important; /* Set calendar icon color to white */
}
.far {
  padding: 5px !important;
  position: absolute !important;
}
.nb_buttonText{
  text-align: center !important;
  font-family: var(--nb_font) !important;
  color: #ffffff !important; /* Set font color to white */
  text-transform: uppercase !important; /* Make text all caps */
}
body {
  color: #424242 !important;
}
input:focus {
  outline: none !important;
}
.bar {
  position: relative !important;
  display: block !important;
  width: 315px !important;
}
.bar:before,
.bar:after {
  background: #0288D1 !important;
  content: '' !important;
  height: 2px !important;
  width: 0 !important;
  bottom: 1px !important;
  position: absolute !important;
  transition: 0.2s ease all !important;
  -moz-transition: 0.2s ease all !important;
  -webkit-transition: 0.2s ease all !important;
}
.bar:before {
  left: 50% !important;
}
.bar:after {
  right: 50% !important;
}
input:focus ~ .bar:before,
input:focus ~ .bar:after {
  width: 50% !important;
}

.group {
  position: relative !important;
  margin: 30px 20px 50px !important;
}

/* ============================= */
/* FlatPicker ~ Calendar styles  */
/* ============================= */
.flatpickr-current-month .flatpickr-monthDropdown-months{
  /*background:#979797;*/
  /*set background for top container here*/
}
.flatpickr-months .flatpickr-month{
  /*set background for top container here*/
  font-family: var(--nb_font) !important;
}
.flatpickr-input.flatpickr-mobile{
  /*background-color: var(--nb_transparent);*/
}
.flatpickr-input[readonly]{
  height: 40px !important;
}
.dayContainer {
  font-family: var(--nb_font) !important;
}
span.flatpickr-weekday{
  font-family: var(--nb_font) !important;
}
.flatpickr-current-month{
  padding: 0.16px 0 0 0 !important;
}