:root {
  --statlab_blue: #2D8C9B;
  --statlab_blue_light: #CAE2E6;
  --statlab_dark_grey: #64555C;
  --statlab_clay: #B7A9A6;
  --statlab_green: #9AD2AD;
  --statlab_yellow: #FCB550;
  --statlab_pink: #E05C90;
  --statlab_light_pink: #F49DA8;
}

/* define custom button style used in the log-in section */
.custom-action-button {
          background-color: transparent !important;
          border: none !important;
          color: black !important;
          font-size: small !important;
          font-style: italic !important;
          padding: 0 !important;
          cursor: pointer !important;
          outline: none !important;
          text-align: left !important;
          text-decoration: none !important; /* Remove underline by default */
        }
        .custom-action-button:hover {
          text-decoration: underline !important;
        }
}


/* define border color of active numeric input */
.shiny-input-container input[type='number']:focus {
  border-color: var(--statlab_blue) !important;
}

 /* define border color of active text input */
.form-control:focus {
  border-color: var(--statlab_blue) !important;
}

/* define border color of active select input */
.selectize-input.focus {
    border-color: var(--statlab_blue) !important
}

/* Style the selected item in the dropdown */
.selectize-dropdown-content .option.selected {
  background-color: var(--statlab_blue) !important; /* Change this color to your desired background color */
  color: white !important; /* Change this color to your desired text color */
}


/* Custom CSS to change the background color of table headers in rhandsontable */
.handsontable .ht_clone_top th,
.handsontable .ht_clone_top_left_corner th,
.handsontable .ht_clone_top_left th,
.handsontable .ht_clone_left th {
  background-color: var(--statlab_blue_light) !important; /* Change this to your desired background color */
  color: black !important; /* Optionally change the text color */
}




/* Customize the slider appearance */
.irs-single,
.irs-bar-edge,
.irs-bar {
  background: #2D8C9B !important;
  border-top: 1px solid #2D8C9B !important;
  border-bottom: 1px solid #2D8C9B !important;
}

/* Changes the color of the number tags */
.irs-from,
.irs-to,
.irs-single {
  background: #2D8C9B !important;
}


/* Custom CSS to change the row-selection color in DT::datatable */
table.dataTable tr.selected td, table.dataTable tr.selected {
  box-shadow: inset 0 0 0 9999px #CAE2E6 !important;
  color: black !important;
  border: 1px solid transparent !important; /* Set border color to transparent */
}



/* Custom CSS to change the look of tablerDash::tablerCard */
  .card-header {
    padding: 5px 20px 5px 10px !important; /* Top Right Bottom Left */
      min-height: 30px !important; /* Reduce height */
  }

.card-title {
  font-size: 14px !important; /* Adjust title font size */
    padding-right: 10px !important; /* Add extra space to the right */
}

.mini-card {
  height: 250px !important;
  overflow: hidden !important; /* prevent overflow */
    cursor: pointer; /* clearly indicates clickable element */
    transition: transform 0.2s, box-shadow 0.2s;
}
/*transform: scale(1.02); /* slightly smaller scale effect for subtlety */
  .mini-card:hover {
    box-shadow: 0 3px 8px rgba(0,0,0,0.15); /* reduced shadow size */
  }

/* Create a transparent action button */
  .btn-transparent {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 5px !important;
  }
.btn-transparent i {
  color: #2D8C9B !important;  /* Set icon color */
    font-size: 18px !important; /* Adjust size if needed */
}
.right-align {
  display: flex;
  justify-content: flex-end;
}

/* Custom status for tablerInfoCard */
  .bg-statlab_white {
    background-color: #FFFFFF !important;
  }
.bg-statlab_blue {
  background-color: #2D8C9B !important;
}
.bg-statlab_blue_light {
  background-color: #CAE2E6 !important;
}
.bg-statlab_dark_grey {
  background-color: #64555C !important;
}
.bg-statlab_clay {
  background-color: #B7A9A6 !important;
}
.bg-statlab_green {
  background-color: #9AD2AD !important;
}
.bg-statlab_yellow {
  background-color: #FCB550 !important;
}
.bg-statlab_pink {
  background-color: #E05C90 !important;
}
.bg-statlab_light_pink {
  background-color: #F49DA8 !important;
}

/* small checkboxes */
  .small-checkbox {
    font-size: 12px !important; /* smaller font */
  }

.small-checkbox .state label:before {
  transform: scale(0.7); /* scales down checkmark box */
}

.small-checkbox .state label:after {
  transform: scale(0.7); /* scales down checkmark icon */
}

/* define a custom link */
  .custom-link {
    text-decoration: underline;
    font-size: 12px;
    font-style: italic;
    color: #2D8C9B;
  }
.custom-link:hover {
  color: #1B5C6B; /* Darker color on hover */
    text-decoration: none; /* Maybe remove underline on hover */
}