body {
  min-width: 350px;
  background: var(--_mainBgColor) !important;
  font-family: var(--_fontFamily) !important;
  color: var(--_fontColor);
}



.modal-header, .modal-footer, .modal-body{
  background-color: var(--_mainBgColor) !important;
  border: 2px solid !important;
  border-color: var(--_fontColor)!important;
}

#modalInputRowsMilk {
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  height:200px;
}


.modalTextArea{
  overflow-x: hidden;
  overflow-y: scroll;
  height: 225px;
}



.buttonActive{
  background-color: var(--_buttonActive) !important;
    color:var(--_fontColor) !important;
    font-weight: bolder !important  ;
}
  
.buttonInactive{
  background-color: var(--_buttonInactive) !important;
  color:var(--_fontColor) !important;
}

.buttonGeneral{
  background-color: var(--_buttonGeneral) !important;
  color:var(--_buttonGeneralText) !important;
}

.dropdown-menu .dropdown-item:hover{
background-color: var(--_mainBgColor);
color:var(--_fontColor);
font-weight: bolder;
}

.nav-link:hover, .dropdown-toggle:hover{
  color:var(--_fontColor);
  font-weight: bolder;
}

#recentTimeframeSelect, #historyTimeframeSelect {
  width:230px;

  
}

#graphToReplaceDiv{
  position: relative;
  height: 300px;
  overflow: hidden;
}

.smallerGraphs{
  height:300px;

}


table tr td{
  background-color: transparent !important;
  color:white !important;
  font-weight: bold !important;
}


.tableFooterData{
  background-color: white !important;
  color:green !important;
  font-weight: bold !important;
}


#loginImage{
  width:500px;
  height: auto;
}

.valueOnInput{
  width: 30%!important;
}

input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* Custom CSS to change background color of switch */

.form-check-input[type="checkbox"].custom-switch-input-edit:checked{
  background-color: var(--_buttonInactive)!important;
  border:none !important;
  box-shadow: none !important;
}

.form-check-input[type="checkbox"].custom-switch-input-edit{
  background-color: var(--_switchEdit) !important; 
  border:none !important;   
  box-shadow: none !important;
}


.form-check-input[type="checkbox"].custom-switch-input-delete:checked{
  background-color: var(--_buttonInactive)  !important; 
  border:none !important;   
  box-shadow: none !important;
}

.form-check-input[type="checkbox"].custom-switch-input-delete{
  background-color: var(--_switchDelete) !important; 
  border:none !important;   box-shadow: none !important;
}

.form-check-input[type="checkbox"].custom-switch-input-delete-overall:checked{
  background-color: var(--_buttonInactive)  !important; 
  border:none !important;
  border-radius: 0.15em !important;   box-shadow: none !important;
}

.form-check-input[type="checkbox"].custom-switch-input-delete-overall{
  background-color: var(--_switchDelete) !important; 
  border:none !important;
  border-radius: 0.15em !important;   box-shadow: none !important;
}

@media screen and (max-width: 575px) {
  label {
    font-size: 1.2rem !important; /* Adjust font size for smaller screens */
  }

  #timeFrameSelector{
      margin-left:4px !important ;
  }
}