@charset "UTF-8";
/**
 * Summary:
 *
 *  0. ELEMENT
 *      - 0.1. Body / Typography
 *      - 0.2. Type Elements
        - 0.3. Header
        - 0.4. Sidebar
        - 0.5. Container
        - 0.6. Pageheader
        - 0.7. Footer

   -------------------------

 *  1. Dashboard

 *      - 1.1. TYPE ELEMENT
 *      - 1.2. TYPE ELEMENT

   --------------------------

2. UI Elements

    - 2.1.  Alerts
    - 2.2.  Buttons
    - 2.3.  Cards
    - 2.4.  General
    - 2.5.  Modals
    - 2.6.  Notifications
    - 2.7.  Icon
    - 2.8.  Tabs
    - 2.9.  Accordions
    - 2.10. Typography
    - 2.11. Listgroup
    - 2.12. Multiselect
    - 2.13. Badge
    - 2.14. Pagination
    - 2.15. Switch Toogle
    - 2.16. Spinner


    ----------------------------

3. Charts

    - 3.1.  Chartist js
    - 3.2.  Sparklines
    - 3.3.  Chart.js
    - 3.4.  Morris.js
    - 3.5.  C3 Charts.js

     ----------------------------

4. Forms

    - 4.1.  Elements
    - 4.2.  Validations
    - 4.3.  Multiselect
    - 4.4.  Wizard
    - 4.5.  Input Mask
    - 4.6.  Summar Note text editor
    - 4.7.  Multi Upload


     ----------------------------


5. Tables

    - 5.1.  General
    - 5.2.  Data Tables
    - 5.3.  Table Filters



         ----------------------------


6. Pages

    - 6.1.   Blank Page
    - 6.2.   Blank Page Header
    - 6.3.   Login
    - 6.4.   Sign up
    - 6.5.   Forgot Password
    - 6.6.   Profile
    - 6.7.   Pricing
    - 6.8.   Timline
    - 6.9.   Calendar
    - 6.10.  Metrics
    - 6.11.  Media Object
    - 6.12.  Shortable / Nestable
    - 6.13.  404 Error






         ----------------------------

7. Email

    - 7.1.  Inbox
    - 7.2.  Email Detail
    - 7.3.  Email Compose
    - 7.4.  Message Chat

       ----------------------------


8. Layouts

    - 8.1. Primary Header
    - 8.2. Success Header
    - 8.3. Warning Header
    - 8.4. Danger Header
    - 8.5. Search Input
    - 8.6. Off Canvas Menu
    - 8.7. Without Left Sidebar
    - 8.8. Without Right Sidebar
    - 8.9. Without Both Sidebars
    - 8.10. Fixed Left Sidebar
    - 8.11. Boxed Layout
    - 8.12. Page Aside
    - 8.13. Collapsible Sidebar
    - 8.14. Sub Navigation



       ----------------------------


9. Maps

    - 9.1.  Google Map
    - 9.2.  Vector Map

       ----------------------------


10. Menu Level

    - 10.1.  Level 1
    - 10.2.  Level 2
   */

/* ==========================================================================
   0. ELEMENT
   ========================================================================== */

/* 0.1. Body / Typography
   ========================================================================== */

/* 
 * Modal styling
 * Ref: https://vuejs.org/examples/#modal
 */
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  transition: opacity 0.3s ease;
}

.modal-container {
  width: 500px;
  margin: 20px auto;
  padding: 20px 30px;
  background-color: var(--forced-contrast-font-color-on-dark, #ffffff) !important;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;

  /* CRITICAL FIX: This locks the absolute close button inside the white modal box */
  position: relative;
  max-height: 90vh; /* Prevents the modal from exceeding 90% of the viewport height */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Hide overflow here so the body takes over scrolling */
}

/* User-friendly, modern close button */
.modal-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 1.25rem;
  color: var(--ucd-aggie-blue);
  cursor: pointer;

  /* UX Improvement: Creates a larger, consistent clickable area */
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%; /* Makes the hover background circular */
  padding: 0;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.modal-close-btn:hover {
  color: var(--ucdh-secondary-red);
  /* Adds a very faint red circle behind the X on hover for clear visual feedback */
  background-color: rgba(193, 2, 48, 0.08);
}

.modal-header h3 {
  margin-top: 0;
  /* color: #42b983; */
  color: var(--ucd-aggie-blue);
}

.modal-body {
  margin: 20px 0;
  overflow-y: auto; /* Makes only the body scrollable */
  flex-grow: 1; /* Tells the body to fill the remaining space */
  padding-right: 5px; /* Optional: Gives the scrollbar a tiny bit of breathing room */
}
.labelInputPair,
.modal-body {
  padding: 4px; /* Gives the box-shadow just enough room to exist without clipping */
}

.modal-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-around !important;
}

.modal-default-button {
  float: right;
}

/*
 * The following styles are auto-applied to elements with
 * transition="modal" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the modal transition by editing
 * these styles.
 */

.modal-enter-from {
  opacity: 0;
}

.modal-leave-to {
  opacity: 0;
}

.modal-enter-from .modal-container,
.modal-leave-to .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/* Participant Actions */
.participantActions {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  margin: 0px !important;
  padding: 0px !important;
}

/* Styling for disabled input */
.labelInputPair.success input:disabled,
input:disabled {
  background-color: #ccc;
  color: grey;
  opacity: 1;
}

/* Input formatting for "other" fields. */
.otherInput {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.otherInput > label {
  flex: 30%;
}
.otherInput > input {
  flex: 70%;
  margin: 0;
  padding: 10px;
}

/* Formats the other input/ label for smaller screens */
@media only screen and (max-width: 968px) {
  .otherInput {
    align-items: flex-start;
    flex-direction: column;
  }
  .otherInput > input {
    width: 90%;
  }
}

/* Error/ Success message styling */

.errorSection {
  text-align: start;
}

.labelInputPair input,
.labelInputPair select {
  border: 1px #ccc solid;
}

.labelInputPair.has-error input:focus,
.labelInputPair.has-error select:focus,
.table-selections.has-error input:focus {
  border-color: var(--error-color) !important;
}

.labelInputPair.has-error {
  color: var(--error-color) !important;
}

.labelInputPair.success input,
.labelInputPair.success select,
.table-selections.success input,
td.success {
  background-color: var(--success-bg-color) !important;
  color: var(--success-color) !important;
}

.labelInputPair.success input:focus,
.labelInputPair.success select:focus,
.table-selections.success input:focus {
  border-color: var(--success-color) !important;
}

.labelInputPair.has-error input,
.labelInputPair.has-error select,
.table-selections.has-error input,
td.has-error {
  background-color: var(--error-bg-color) !important;
  color: var(--error-color) !important;
}

/* Table styling for horizontal scroll on smaller screens. */
.tableInputPair {
  overflow-x: auto !important; /* 'auto' is generally preferred over 'scroll' */
}

body {
  font-family: 'Nunito', serif !important;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  color: #71748d;
  background-color: #efeff6 !important;
}

span {
  font-family: 'Nunito', serif;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  color: #71748d !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #3d405c !important;
  margin: 0px 0px 15px 0px;
  font-family: 'Nunito', serif;
  font-weight: 700 !important;
}

h1 {
  font-size: 34px;
}

h2 {
  font-size: 28px;
  line-height: 30px;
}

h3 {
  font-size: 20px;
}

h4 {
  font-size: 16px;
  line-height: 26px;
}

h5 {
  font-size: 15px;
  line-height: 26px;
}

h6 {
  font-size: 12px;
}

p {
  margin: 0px 0px 20px 0px;
}

p:last-child {
  margin: 0px;
}

a {
  color: #71748d;
}

a:hover {
  color: #ff407b;
  text-decoration: none;
}

a:active,
a:hover {
  outline: 0;
  text-decoration: none;
}

ol,
ul {
}

ol li,
ul li {
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
  color: #3d3f5d;
}

/*--------------------
 Form
---------------------*/

label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-size: 15px;
  color: #71748d;
}

div.form-control {
  display: block;
  width: 100%;
  font-size: 14px;
  line-height: 1.42857143;
  color: #71748d;
  background-color: var(--forced-contrast-font-color-on-dark) !important;
  background-image: none;
  border: 1px solid #d2d2e4;
  border-radius: 2px;
}

input.form-control {
  display: block;
  width: 100%;
  font-size: 14px;
  line-height: 1.42857143;
  color: #71748d;
  background-color: var(--forced-contrast-font-color-on-dark) !important;
  background-image: none;
  border: 1px solid #d2d2e4;
  border-radius: 2px;
}

div.form-control:focus {
  color: #71748d;
  background-color: var(--forced-contrast-font-color-on-dark) !important;
  border-color: #a7a7f0;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(214, 214, 255, 0.75);
}

input[type='file'] {
  color: #71748d;
  background-color: var(--forced-contrast-font-color-on-dark) !important;
  border-color: #a7a7f0;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(214, 214, 255, 0.75);
}

.col-form-label {
  font-size: 15px;
}

input {
}

button {
}

button:focus {
  outline: 0;
}

select.form-control {
  color: #71748d;
  /* Overwrites bootstrap CSS which removes the dropdown arrow. */
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
  background-position: 99% 52%;
  background-size: auto;
  background-repeat: no-repeat;
  padding-right: 15px;
  border: 1px solid #d2d2e4;
  border-radius: 2px;
}

textarea.form-control {
  height: auto;
  color: #71748d;
  background-color: var(--forced-contrast-font-color-on-dark) !important;
  background-image: none;
  border: 1px solid #d2d2e4;
  border-radius: 2px;
  padding: 12px 16px;
}

input::-webkit-input-placeholder {
  color: #71748d !important;
}

input:focus::-webkit-input-placeholder {
  color: #3743ae !important;
}

textarea::-webkit-input-placeholder {
  color: #71748d !important;
}

textarea:focus::-webkit-input-placeholder {
  color: #3743ae !important;
}

/* Forgot Password */
a#forgot-password-link {
  font-size: 14px;
  padding: 9px 16px;
  border-radius: 2px;
  width: 100%;
}

button.btn {
}

button.btn-default {
}

button.btn-primary {
}

address {
}

.form-group {
  margin-bottom: 12px;
}

div.form-control-lg {
  padding: 12px;
}

input.form-control-lg {
  padding: 12px;
}

/* Custom-Chekbox
-------------------------------------------------------------- */

.custom-control {
  position: relative;
  min-height: 1.5rem;
  padding-left: 1.5rem;
  cursor: pointer;
}

.custom-control-input:checked ~ input[type='checkbox'] {
  background: #3d404e;
  border: #7f83a2 1px solid;
}

.custom-control-input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.custom-control-label {
  margin-bottom: 0;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #3743ae;
  border-color: #3743ae;
}

.custom-control-input:checked ~ .custom-control-label::before {
  color: var(--forced-contrast-font-color-on-dark) !important;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
}

.custom-control-label::after {
  position: absolute;
  top: 5px;
  left: 0;
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  content: '';
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
}

.custom-control-label::before {
  position: absolute;
  top: 5px;
  left: 0;
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  /* pointer-events: none; */
  content: '';
  /* -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; */
  background-color: #ffffff;
  border: 2px solid #d2d2e4;
  border-radius: 100%;
}

/* Styles radio button after ADC website */
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
  border: 5px solid var(--ucd-aggie-blue);
  border-radius: 100%;
}

.custom-control-input:disabled ~ .custom-control-label::before {
  background-color: #efeff6;
}

.custom-select-font-size {
  font-size: 14px;
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem var(--ucd-blue-40);
}

/* Custom Radio Validation */
.custom-valid.custom-control-input.is-valid:checked ~ .custom-control-label::before,
.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before {
  background-color: var(--success-bg-color);
  border: 2px solid var(--success-color);
}

.custom-control-input.is-invalid ~ .custom-control-label::before,
.was-validated .custom-control-input:invalid ~ .custom-control-label::before {
  background-color: var(--error-bg-color);
  border-color: var(--error-color);
}

.custom-control-input:disabled ~ .custom-control-label::before {
  background-color: var(--ucd-black-10);
}

.custom-control-input:disabled ~ .custom-control-label {
  color: var(--ucd-black-50);
}

.custom-control-input.is-valid ~ .custom-control-label::before,
.was-validated .custom-control-input:valid ~ .custom-control-label::before {
  background-color: var(--success-bg-color);
  border: 2px solid var(--success-color);
}

.input-group-text {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: 10px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #75748d;
  text-align: center;
  white-space: nowrap;
  background-color: #efeff6;
  border: 1px solid #d2d2e4;
  border-radius: 4px;
}

.section-block {
  margin: 16px 0px;
}

.section-title {
  font-weight: 500;
  margin-bottom: 5px;
}

/*--------------------
 Padding / Margin
---------------------*/

.nopadding {
  padding: 0px;
}

.p-r-0 {
  padding-right: 0px;
}

.p-r-10 {
  padding-right: 10px;
}

.p-r-15 {
  padding-right: 15px;
}

.p-r-20 {
  padding-right: 20px;
}

.p-r-25 {
  padding-right: 25px;
}

.p-l-0 {
  padding-left: 0px;
}

.p-l-10 {
  padding-left: 10px;
}

.p-l-15 {
  padding-left: 15px;
}

.p-l-20 {
  padding-left: 20px;
}

.p-l-25 {
  padding-left: 25px;
}

.p-l-40 {
  padding-left: 40px;
}

.p-t-0 {
  padding-top: 0px;
}

.p-t-10 {
  padding-top: 10px;
}

.p-t-20 {
  padding-top: 20px;
}

.p-t-30 {
  padding-top: 30px;
}

.p-t-40 {
  padding-top: 40px;
}

.p-t-60 {
  padding-top: 60px;
}

.p-t-80 {
  padding-top: 80px;
}

.p-t-100 {
  padding-top: 100px;
}

.p-t-120 {
  padding-top: 120px;
}

.p-t-140 {
  padding-top: 140px;
}

.p-b-0 {
  padding-bottom: 0px;
}

.p-b-10 {
  padding-bottom: 10px;
}

.p-b-20 {
  padding-bottom: 20px;
}

.p-b-30 {
  padding-bottom: 30px;
}

.p-b-40 {
  padding-bottom: 40px;
}

.p-b-60 {
  padding-bottom: 60px;
}

.p-b-80 {
  padding-bottom: 80px;
}

.p-b-100 {
  padding-bottom: 100px;
}

.p-b-120 {
  padding-bottom: 120px;
}

.p-b-140 {
  padding-bottom: 140px;
}

.m-r-0 {
  margin-right: 0px;
}

.m-r-10 {
  margin-right: 10px;
}

.m-r-15 {
  margin-right: 15px;
}

.m-r-20 {
  margin-right: 20px;
}

.m-r-25 {
  margin-right: 25px;
}

.m-l-0 {
  margin-left: 0px;
}

.m-l-10 {
  margin-left: 10px;
}

.m-l-15 {
  margin-left: 15px;
}

.m-l-20 {
  margin-left: 20px;
}

.m-l-25 {
  margin-left: 25px;
}

.m-t-0 {
  margin-top: 0px;
}

.m-t-10 {
  margin-top: 10px;
}

.m-t-20 {
  margin-top: 20px;
}

.m-t-30 {
  margin-top: 30px;
}

.m-t-40 {
  margin-top: 40px;
}

.m-t-60 {
  margin-top: 60px;
}

.m-t-80 {
  margin-top: 80px;
}

.m-t-100 {
  margin-top: 100px;
}

.m-t-120 {
  margin-top: 120px;
}

.m-b-0 {
  margin-bottom: 0px;
}

.m-b-10 {
  margin-bottom: 10px;
}

.m-b-20 {
  margin-bottom: 20px;
}

.m-b-30 {
  margin-bottom: 30px;
}

.m-b-40 {
  margin-bottom: 40px;
}

.m-b-60 {
  margin-bottom: 60px;
}

.m-b-80 {
  margin-bottom: 80px;
}

.m-b-100 {
  margin-bottom: 100px;
}

.m-b-120 {
  margin-bottom: 120px;
}

/*--------------------
 Font Weight
---------------------*/

html body .font-bold {
  font-weight: 800;
}

html body .font-normal {
  font-weight: 400;
}

html body .font-light {
  font-weight: 300;
}

html body .font-medium {
  font-weight: 600;
}

html body .font-16 {
  font-size: 16px;
}

html body .font-12 {
  font-size: 12px;
}

html body .font-14 {
  font-size: 14px;
}

html body .font-10 {
  font-size: 10px;
}

html body .font-18 {
  font-size: 18px;
}

html body .font-20 {
  font-size: 20px;
}

html body .font-22 {
  font-size: 22px;
}

html body .font-24 {
  font-size: 24px;
}

html body .display-5 {
  font-size: 3rem;
}

html body .display-6 {
  font-size: 2.5rem;
}

html body .display-7 {
  font-size: 2rem;
}

/*-----------------------
Background Color / Color Utilities
-------------------------*/
.bg-primary {
  background-color: var(--ucd-aggie-blue) !important;
  color: var(--forced-contrast-font-color-on-dark) !important;
}

.bg-brand {
  background-color: var(--ucd-aggie-gold) !important;
  color: var(--ucd-aggie-blue) !important; /* Forced dark text */
}

.bg-secondary {
  background-color: var(--ucd-black-70) !important;
  color: var(--forced-contrast-font-color-on-dark) !important;
}

.bg-success {
  background-color: var(--success-color) !important;
  color: var(--forced-contrast-font-color-on-dark) !important;
}

.bg-danger {
  background-color: var(--error-color) !important;
  color: var(--forced-contrast-font-color-on-dark) !important;
}

.bg-warning {
  background-color: var(--ucd-aggie-gold) !important;
  color: var(--ucd-aggie-blue) !important; /* Forced dark text */
}

.bg-info {
  background-color: var(--secondary-gunrock) !important;
  color: var(--forced-contrast-font-color-on-dark) !important;
}

.bg-light {
  background-color: var(--ucd-black-10) !important;
  color: var(--ucd-black-90) !important;
}

.bg-dark {
  background-color: var(--ucd-black-90) !important;
  color: var(--forced-contrast-font-color-on-dark) !important;
}

/* Light background variants utilizing 10% shading or background variables */
.bg-primary-light {
  background-color: var(--ucd-blue-10) !important;
  color: var(--ucd-aggie-blue) !important; /* Dark text needed on light bg */
}

.bg-info-light {
  background-color: #dffaff !important; /* Kept hex if no direct brand mapping exists, but changed text to dark */
  color: var(--ucd-aggie-blue) !important;
}

.bg-success-light {
  background-color: var(--success-bg-color) !important;
  color: var(--success-color-darker) !important;
}

.bg-danger-light {
  background-color: var(--error-bg-color) !important;
  color: var(--error-color-dark) !important;
}

.bg-brand-light,
.bg-secondary-light {
  background-color: var(--ucd-gold-10) !important;
  color: var(--ucd-aggie-blue) !important;
}

/*-----------------------
Borders
-------------------------*/

.border-boxes span {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  margin: 0.25rem;
  background-color: #fbfbfd;
}

.border {
  border: 1px solid #e6e6f2 !important;
}

.border-top {
  border-top: 1px solid #e6e6f2 !important;
}

.border-bottom {
  border-bottom: 1px solid #e6e6f2 !important;
}

.border-left {
  border-left: 1px solid #e6e6f2 !important;
}

.border-right {
  border-right: 1px solid #e6e6f2 !important;
}

/*-----------------------
 Color
-------------------------*/
.text-primary {
  color: var(--ucd-aggie-blue) !important;
}
.text-brand {
  color: var(--ucd-aggie-gold) !important; /* Warning: Fails contrast on white */
}
.text-secondary {
  color: var(--ucd-black-70) !important;
}
.text-success {
  color: var(--success-color) !important;
}
.text-danger {
  color: var(--error-color) !important;
}
.text-warning {
  color: var(--ucd-aggie-gold) !important; /* Warning: Fails contrast on white */
}
.text-info {
  color: var(--secondary-bodega) !important; /* Darker blue for better contrast */
}
.text-light {
  color: var(--ucd-black-20) !important;
}
.text-dark {
  color: var(--ucd-black-80) !important;
}
.text-gray {
  color: var(--ucd-black-50) !important;
}
.text-muted {
  color: var(--ucd-black-60) !important;
}
.rating-color {
  color: var(--ucd-aggie-gold); /* Used for stars, usually acceptable */
}

/*-----------------------
 Borders
-------------------------*/
.border-top-primary {
  border-top-color: var(--ucd-aggie-blue) !important;
}
.border-3 {
  border-width: 3px !important;
}
.border-secondary {
  border-color: var(--ucd-black-70) !important;
}
.border-brand {
  border-color: var(--ucd-aggie-gold) !important;
}
.border-info {
  border-color: var(--secondary-gunrock) !important;
}

/*-----------------------
Fontawesome size
-------------------------*/

.fa-xl {
}

.fa-lg {
}

.fa-md {
}

.fa-sm {
  font-size: 24px !important;
}

.fa-xs {
  font-size: 11px !important;
}

/*-----------------------
Social Color
-------------------------*/

.facebook-color {
  color: #3c73df;
}

.twitter-color {
  color: #1ea2f2;
}

.instagram-color {
  color: #9361fa;
}

.rss-color {
  color: #ee802f;
}

.pinterest-color {
  color: #c8232c;
}

.youtube-color {
  color: #ff0000;
}

.medium-color {
  color: #00ab6c;
}

.googleplus-color {
  color: #d34836;
}

.snapchat-color {
  color: #fffb00;
}

/*-----------------------
Social bg Color
-------------------------*/

.facebook-bgcolor {
  background-color: #3b5898;
  color: var(--forced-contrast-font-color-on-dark) !important;
}

.twitter-bgcolor {
  background-color: #1ea2f2;
  color: var(--forced-contrast-font-color-on-dark) !important;
}

.instagram-bgcolor {
  background-color: #9361fa;
  color: var(--forced-contrast-font-color-on-dark) !important;
}

.rss-bgcolor {
  background-color: #ee802f;
  color: var(--forced-contrast-font-color-on-dark) !important;
}

.pinterest-bgcolor {
  background-color: #c8232c;
  color: var(--forced-contrast-font-color-on-dark) !important;
}

.youtube-bgcolor {
  background-color: #ff0000;
  color: var(--forced-contrast-font-color-on-dark) !important;
}

.googleplus-bgcolor {
  background-color: #d34836;
  color: var(--forced-contrast-font-color-on-dark) !important;
}

/*-----------------------
Progress bar
-------------------------*/

.progress-bar {
  background-color: #3743ae;
}

.primary-progress-bar {
  background-color: #3743ae;
}

.f-icon,
.if-icon,
.m-icon,
.sl-icon,
.t-icon,
.w-icon {
  cursor: pointer;
  padding: 13px 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-icon {
  width: 33%;
  display: inline-block;
}

.f-icon:hover,
.if-icon:hover,
.m-icon:hover,
.sl-icon:hover,
.t-icon:hover,
.w-icon:hover {
  background-color: #f8f9fa;
}

/*-----------------------
Legends
-------------------------*/

/* ==========================================================================
   0.2. Type Elements
   ========================================================================== */

/* ==========================================================================
   0.3.  Header
   ========================================================================== */

/*-----------------------
Top Header
-------------------------*/

.dashboard-header {
}

.dashboard-header .navbar {
  padding: 0px;
  border-bottom: 1px solid #e6e6f2;
  -webkit-box-shadow: 0px 0px 28px 0px rgba(82, 63, 105, 0.13);
  box-shadow: 0px 0px 28px 0px rgba(82, 63, 105, 0.13);
  -webkit-transition: all 0.3s ease;
  min-height: 60px;
}

.navbar-brand {
  display: inline-block;
  margin-right: 1rem;
  line-height: inherit;
  white-space: nowrap;
  padding: 11px 20px;
  font-size: 30px;
  text-transform: uppercase;
  font-weight: 700;
  color: #007bff;
}
.navbar-brand:hover {
  color: #007bff;
}
.navbar-right-top {
}

.navbar-right-top .nav-item {
  border-right: 1px solid #e6e6f2;
}

.navbar-right-top .nav-item:last-child {
  border: none;
}

.navbar-right-top .nav-item .nav-link {
  padding: 13px 20px;
  font-size: 25px;
  line-height: 2;
  color: #82849f;
}

/* ------  Connection --------  */

.connection {
}

.connection-dropdown {
}

.connection-list {
  width: 300px;
  padding: 20px;
}

.connection-item {
  border-radius: 3px;
  line-height: 32px;
  text-align: center;
  padding: 12px 7px 4px;
  display: block;
  border: 1px solid transparent;
  color: #3d405c;
  font-size: 12px;
}

.connection-item img {
  width: 32px;
}

.connection-item:hover {
  background-color: var(--forced-contrast-font-color-on-dark) !important;
  border: 1px solid #e6e6f2;
}

.connection-item span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----- User Nav Dropdown -----*/

.nav-user {
}

.nav-user-dropdown {
  padding: 0px;
  min-width: 230px;
  margin: 0px;
}

.nav-user-name {
}

.nav-user-info {
  background-color: var(--secondary-tahoe, #006aa6);
  line-height: 1.4;
  padding: 12px;
  color: var(--forced-contrast-font-color-on-dark) !important;
  font-size: 13px;
  border-radius: 2px 2px 0 0;
}

.nav-user-info .status {
  float: left;
  top: 7px;
  left: 0px;
}

/* Overwrite default navbar-expand-lg padding reduction */
#navbarDropdownMenuLink2 {
  padding: 13px 20px;
}

.nav-user-dropdown {
}

/* Overwrite default navbar-expand-lg 'flex-start' */
nav.navbar.navbar-expand-lg {
  justify-content: space-between;
}

.nav-user-dropdown .dropdown-item {
  display: block;
  width: 100%;
  padding: 12px 22px 15px;
  clear: both;
  font-weight: 400;
  color: #686972;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  font-size: 13px;
  line-height: 0.4;
}

.nav-user-dropdown .dropdown-item:hover {
  /* FIX: Changed the background from the generic gray (#f7f7fb) to a soft UCD light blue */
  background-color: var(--ucd-blue-10, #e6f3f9);
  /* FIX: Ensure the text turns Aggie Blue on hover for crisp readability */
  color: var(--ucd-aggie-blue, #022851);
}

/* ------  Top Header User Info --------  */

/* -------------------- 0.4. Sidebar ----------------------- */

/* -----------------------
Left Navigation Sidebar
------------------------- */
.navbar-toggler {
  padding: 0.25rem 0.5rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.nav-user-img {
  padding: 0.25rem 0.5rem;
  font-size: 25px;
  line-height: 1;
}

/*--- Bootstrap Dropdown ----*/

div.dropdown-menu {
  background: var(--forced-contrast-font-color-on-dark) !important;
  font-size: 14px;
  color: #3d405c;
  border: 1px solid #e6e6f2;
  padding: 0;
}

div.dropdown-menu.dropdown-menu-right.nav-user-dropdown {
  position: absolute !important;
  right: 0;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #3d405c;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

.dropdown-item:hover {
  /* FIX: Swapped indigo for Aggie Blue text on hover */
  color: var(--ucd-aggie-blue, #022851);
  /* FIX: Using a very soft, light UCD blue for the hover background */
  background: var(--ucd-blue-10, #e6f3f9);
}

.page-section {
}

.dropdown-item.active,
.dropdown-item:active {
  color: var(--forced-contrast-font-color-on-dark) !important;
  text-decoration: none;
  /* FIX: Swapped indigo for Tahoe Blue to match your primary buttons */
  background-color: var(--secondary-tahoe, #006aa6);
}

/* JUST IN CASE: If 'jsmith' is actually using a header class instead of .active, 
   this will catch it and force it to match Tahoe Blue */
.dropdown-menu .nav-user-info,
.dropdown-menu .dropdown-header {
  background-color: var(--secondary-tahoe, #006aa6);
  color: var(--forced-contrast-font-color-on-dark) !important;
  padding: 10px 1.5rem; /* Ensure it has some breathing room */
}

/* -------------------- 0.5.Container / Wrapper ----------------------- */

/*-----------------------
Container / Wrapper
-------------------------*/

.dashboard-main-wrapper {
  min-height: 100%;
  padding-top: 60px;
  position: relative;
}

.dashboard-wrapper {
  position: relative;
  left: 0;
  margin-left: 264px;
  min-height: 870px !important;
}

main.dashboard-content.container-fluid {
  padding: 30px 30px 60px 30px !important;
}

/*-----------------------
Splash Container / Wrapper
-------------------------*/

.splash-container {
  width: 100%;
  max-width: 375px;
  padding: 15px;
  margin: auto;
}

#splash-page {
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  height: 90vh;
}

.splash-container .card-header {
  padding: 20px;
}

.splash-description {
  text-align: center;
  display: block;
  line-height: 20px;
  font-size: 1rem;
  margin-top: 5px;
  padding-bottom: 10px;
}

.splash-title {
  text-align: center;
  display: block;
  font-size: 14px;
  font-weight: 300;
}

.splash-container .card-footer-item {
  padding: 12px 28px;
}

/* -------------------- 0.6.Pageheader ----------------------- */

/* -------------------- 0.7.Footer ----------------------- */

/*-----------------------
 Footer
-------------------------*/

.footer {
  border-top: 1px solid rgba(152, 166, 173, 0.2);
  padding: 14px 30px 14px;
  color: var(--forced-contrast-font-color-on-dark);
  background-color: var(--ucdh-footer-dark);
  width: 100%;
  /*position: absolute; bottom: 0;*/
}

.footer-links {
  color: var(--forced-contrast-font-color-on-light);
  background-color: var(--ucdh-footer-light);
}

.footer .footer-links a {
  color: #71748d;
  margin-left: 1.5rem;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

/* ==========================================================================
  2. UI Elements
  ========================================================================== */

/* -----------------------
2.1  Alerts
-------------------------*/

/* -----------------------
2.2  Buttons
-------------------------*/

.adc-btn {
  font-size: 14px;
  padding: 9px 16px;
  border-radius: 2px;
}

/*--- btn default --*/

/*--- btn primary (Aggie Blue) --*/
.btn-primary {
  color: var(--forced-contrast-font-color-on-dark) !important;
  background-color: var(--secondary-tahoe, #006aa6) !important;
  border-color: var(--secondary-tahoe, #006aa6) !important;
  transition: all 0.2s ease-in-out;
}
.btn-primary:hover,
.btn-primary:focus {
  color: var(--forced-contrast-font-color-on-dark) !important;
  /* Mathematically darkens the color by 15% to guarantee a hover state */
  filter: brightness(85%);
}
.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem var(--ucd-blue-40) !important;
}

/*--- btn primary (Aggie Blue) active/dropdown --*/
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem var(--ucd-blue-40) !important;
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  color: var(--forced-contrast-font-color-on-dark) !important;
  background-color: var(--ucd-blue-80) !important;
  border-color: var(--ucd-blue-80) !important;
}

/*--- btn secondary (Neutral Dark Gray) --*/
.btn-secondary {
  color: var(--forced-contrast-font-color-on-dark) !important;
  background-color: var(--ucd-black-70) !important;
  border-color: var(--ucd-black-70) !important;
}
.btn-secondary:hover,
.btn-secondary:focus {
  color: var(--forced-contrast-font-color-on-dark) !important;
  background-color: var(--ucd-black-90) !important;
  border-color: var(--ucd-black-90) !important;
}
.btn-secondary:focus {
  box-shadow: 0 0 0 0.2rem var(--ucd-black-30) !important;
}

/*--- btn secondary (Neutral Dark Gray) active/dropdown --*/
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem var(--ucd-black-30) !important;
}
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.show > .btn-secondary.dropdown-toggle {
  color: var(--forced-contrast-font-color-on-dark) !important;
  background-color: var(--ucd-black-90) !important;
  border-color: var(--ucd-black-90) !important;
}

/*--- btn success (Accessible Green) --*/
.btn-success {
  color: var(--forced-contrast-font-color-on-dark) !important;
  background-color: var(--success-color) !important;
  border-color: var(--success-color) !important;
  transition: all 0.2s ease-in-out;
}
.btn-success:hover,
.btn-success:focus {
  color: var(--forced-contrast-font-color-on-dark) !important;
  /* Mathematically darkens the green to ensure it is visible */
  filter: brightness(85%);
}
.btn-success:focus {
  box-shadow: 0 0 0 0.2rem var(--secondary-sage) !important;
}

/*--- btn success (Accessible Green) active/dropdown --*/
.btn-success:not(:disabled):not(.disabled).active:focus,
.btn-success:not(:disabled):not(.disabled):active:focus,
.show > .btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem var(--secondary-sage) !important;
}
.btn-success:not(:disabled):not(.disabled).active,
.btn-success:not(:disabled):not(.disabled):active,
.show > .btn-success.dropdown-toggle {
  color: var(--forced-contrast-font-color-on-dark) !important;
  background-color: var(--secondary-redwood) !important;
  border-color: var(--secondary-redwood) !important;
}

/*--- btn danger (Accessible Red) --*/
.btn-danger {
  color: var(--forced-contrast-font-color-on-dark) !important;
  background-color: var(--error-color) !important;
  border-color: var(--error-color) !important;
}
.btn-danger:hover,
.btn-danger:focus {
  color: var(--forced-contrast-font-color-on-dark) !important;
  background-color: var(--secondary-double-decker) !important; /* Deeper red */
  border-color: var(--secondary-double-decker) !important;
}
.btn-danger:focus {
  box-shadow: 0 0 0 0.2rem var(--error-bg-color) !important;
}

/*--- btn danger (Accessible Red) active/dropdown --*/
.btn-danger:not(:disabled):not(.disabled).active:focus,
.btn-danger:not(:disabled):not(.disabled):active:focus,
.show > .btn-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem var(--error-bg-color) !important;
}
.btn-danger:not(:disabled):not(.disabled).active,
.btn-danger:not(:disabled):not(.disabled):active,
.show > .btn-danger.dropdown-toggle {
  color: var(--forced-contrast-font-color-on-dark) !important;
  background-color: var(--secondary-double-decker) !important;
  border-color: var(--secondary-double-decker) !important;
}

/*--- btn warning (Aggie Gold - REQUIRES DARK TEXT) --*/
.btn-warning {
  color: var(
    --forced-contrast-font-color-on-dark
  ) !important; /* Dark text is required for contrast on gold */
  background-color: var(--ucd-aggie-gold) !important;
  border-color: var(--ucd-aggie-gold) !important;
}
.btn-warning:hover,
.btn-warning:focus {
  color: var(--ucd-aggie-blue) !important;
  background-color: var(--ucd-gold-80) !important;
  border-color: var(--ucd-gold-80) !important;
}
.btn-warning:focus {
  box-shadow: 0 0 0 0.2rem var(--ucd-gold-40) !important;
}

/*--- btn warning (Aggie Gold) active/dropdown --*/
.btn-warning:not(:disabled):not(.disabled).active:focus,
.btn-warning:not(:disabled):not(.disabled):active:focus,
.show > .btn-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem var(--ucd-gold-40) !important;
}
.btn-warning:not(:disabled):not(.disabled).active,
.btn-warning:not(:disabled):not(.disabled):active,
.show > .btn-warning.dropdown-toggle {
  color: var(--ucd-aggie-blue) !important; /* Forced dark text for contrast on gold */
  background-color: var(--ucd-gold-80) !important;
  border-color: var(--ucd-gold-80) !important;
}

/*--- btn info (Gunrock Blue) --*/
.btn-info {
  color: var(--forced-contrast-font-color-on-dark) !important;
  background-color: var(--secondary-gunrock) !important;
  border-color: var(--secondary-gunrock) !important;
}
.btn-info:hover,
.btn-info:focus {
  color: var(--forced-contrast-font-color-on-dark) !important;
  background-color: var(--secondary-bodega) !important;
  border-color: var(--secondary-bodega) !important;
}
.btn-info:focus {
  box-shadow: 0 0 0 0.2rem var(--secondary-tahoe) !important; /* Using lighter blue for ring */
}

/*--- btn info (Gunrock Blue) active/dropdown --*/
.btn-info:not(:disabled):not(.disabled).active:focus,
.btn-info:not(:disabled):not(.disabled):active:focus,
.show > .btn-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem var(--secondary-tahoe) !important;
}
.btn-info:not(:disabled):not(.disabled).active,
.btn-info:not(:disabled):not(.disabled):active,
.show > .btn-info.dropdown-toggle {
  color: var(--forced-contrast-font-color-on-dark) !important;
  background-color: var(--secondary-bodega) !important;
  border-color: var(--secondary-bodega) !important;
}

/*--- btn light --*/
.btn-light {
  color: var(--ucd-black-90) !important;
  background-color: var(--ucd-black-10) !important;
  border-color: var(--ucd-black-10) !important;
}
.btn-light:hover,
.btn-light:focus {
  color: var(--ucd-black-90) !important;
  background-color: var(--ucd-black-20) !important;
  border-color: var(--ucd-black-20) !important;
}
.btn-light:focus {
  box-shadow: 0 0 0 0.2rem var(--ucd-black-30) !important;
}

/*--- btn dark --*/
.btn-dark {
  color: var(--forced-contrast-font-color-on-dark) !important;
  background-color: var(--ucd-black-90) !important;
  border-color: var(--ucd-black-90) !important;
}
.btn-dark:hover,
.btn-dark:focus {
  color: var(--forced-contrast-font-color-on-dark) !important;
  background-color: var(--ucd-black-70) !important;
  border-color: var(--ucd-black-70) !important;
}
.btn-dark:focus {
  box-shadow: 0 0 0 0.2rem var(--ucd-black-50) !important;
}

/*--- btn outline brand --*/

.btn-outline-brand {
  color: #2e2f39;
  background-color: transparent;
  border-color: #ffc750;
}

.btn-outline-brand:hover {
  color: #2e2f39;
  background-color: #ffc750;
  border-color: #ffc750;
}

.btn-outline-brand.focus,
.btn-outline-brand:focus {
  color: #2e2f39;
  background-color: transparent;
  border-color: #ffc750;
  box-shadow: 0 0 0 1px rgb(255, 195, 89);
}

/*--- btn outline primary --*/

/*--- btn outline primary --*/
.btn-outline-primary {
  color: var(--ucd-aggie-blue);
  background-color: transparent;
  border-color: var(--ucd-aggie-blue);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: var(--forced-contrast-font-color-on-dark);
  background-color: var(--ucd-aggie-blue);
  border-color: var(--ucd-aggie-blue);
}
.btn-outline-primary:focus {
  box-shadow: 0 0 0 0.2rem var(--ucd-blue-40);
}

/*--- btn outline primary active/dropdown --*/
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem var(--ucd-blue-40);
}
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle {
  color: var(--forced-contrast-font-color-on-dark);
  background-color: var(--ucd-aggie-blue);
  border-color: var(--ucd-aggie-blue);
}

/*--- btn outline secondary --*/

/*--- btn outline warning --*/
.btn-outline-warning {
  color: var(--ucd-aggie-blue); /* Must be dark text to be read on light backgrounds */
  background-color: transparent;
  border-color: var(--ucd-aggie-gold);
  border-width: 2px; /* Thicker border helps contrast for light UI elements */
}
.btn-outline-warning:hover,
.btn-outline-warning:focus {
  color: var(--ucd-aggie-blue);
  background-color: var(--ucd-aggie-gold);
  border-color: var(--ucd-aggie-gold);
}
.btn-outline-warning:focus {
  box-shadow: 0 0 0 0.2rem var(--ucd-gold-40);
}

/*--- btn outline secondary active/dropdown --*/
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
.show > .btn-outline-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem var(--ucd-black-30);
}
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.show > .btn-outline-secondary.dropdown-toggle {
  color: var(--forced-contrast-font-color-on-dark);
  background-color: var(--ucd-black-70);
  border-color: var(--ucd-black-70);
}

/*--- btn outline success --*/
.btn-outline-success {
  color: var(--success-color);
  background-color: transparent;
  border-color: var(--success-color);
}
.btn-outline-success:hover,
.btn-outline-success:focus {
  color: var(--forced-contrast-font-color-on-dark);
  background-color: var(--success-color);
  border-color: var(--success-color);
}
.btn-outline-success:focus {
  box-shadow: 0 0 0 0.2rem var(--secondary-sage);
}

/*--- btn outline success active/dropdown --*/
.btn-outline-success:not(:disabled):not(.disabled).active:focus,
.btn-outline-success:not(:disabled):not(.disabled):active:focus,
.show > .btn-outline-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem var(--secondary-sage);
}
.btn-outline-success:not(:disabled):not(.disabled).active,
.btn-outline-success:not(:disabled):not(.disabled):active,
.show > .btn-outline-success.dropdown-toggle {
  color: var(--forced-contrast-font-color-on-dark);
  background-color: var(--success-color);
  border-color: var(--success-color);
}

/*--- btn outline danger --*/
.btn-outline-danger {
  color: var(--error-color);
  background-color: transparent;
  border-color: var(--error-color);
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
  color: var(--forced-contrast-font-color-on-dark);
  background-color: var(--error-color);
  border-color: var(--error-color);
}
.btn-outline-danger:focus {
  box-shadow: 0 0 0 0.2rem var(--error-bg-color);
}

/*--- btn outline danger active/dropdown --*/
.btn-outline-danger:not(:disabled):not(.disabled).active:focus,
.btn-outline-danger:not(:disabled):not(.disabled):active:focus,
.show > .btn-outline-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem var(--error-bg-color);
}
.btn-outline-danger:not(:disabled):not(.disabled).active,
.btn-outline-danger:not(:disabled):not(.disabled):active,
.show > .btn-outline-danger.dropdown-toggle {
  color: var(--forced-contrast-font-color-on-dark);
  background-color: var(--error-color);
  border-color: var(--error-color);
}

/*--- btn outline warning --*/
.btn-outline-warning {
  color: var(--ucd-aggie-blue); /* Forced dark text for legibility */
  background-color: transparent;
  border-color: var(--ucd-aggie-gold);
  border-width: 2px; /* Thicker border for contrast against white */
}
.btn-outline-warning:hover,
.btn-outline-warning:focus {
  color: var(--ucd-aggie-blue);
  background-color: var(--ucd-aggie-gold);
  border-color: var(--ucd-aggie-gold);
}
.btn-outline-warning:focus {
  box-shadow: 0 0 0 0.2rem var(--ucd-gold-40);
}

/*--- btn outline warning active/dropdown --*/
.btn-outline-warning:not(:disabled):not(.disabled).active:focus,
.btn-outline-warning:not(:disabled):not(.disabled):active:focus,
.show > .btn-outline-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem var(--ucd-gold-40);
}
.btn-outline-warning:not(:disabled):not(.disabled).active,
.btn-outline-warning:not(:disabled):not(.disabled):active,
.show > .btn-outline-warning.dropdown-toggle {
  color: var(--ucd-aggie-blue); /* Forced dark text */
  background-color: var(--ucd-aggie-gold);
  border-color: var(--ucd-aggie-gold);
}

/*--- btn outline info --*/
.btn-outline-info {
  color: var(--secondary-bodega); /* Darker blue for text contrast */
  background-color: transparent;
  border-color: var(--secondary-gunrock);
}
.btn-outline-info:hover,
.btn-outline-info:focus {
  color: var(--forced-contrast-font-color-on-dark);
  background-color: var(--secondary-gunrock);
  border-color: var(--secondary-gunrock);
}
.btn-outline-info:focus {
  box-shadow: 0 0 0 0.2rem var(--secondary-tahoe);
}

/*--- btn outline info active/dropdown --*/
.btn-outline-info:not(:disabled):not(.disabled).active:focus,
.btn-outline-info:not(:disabled):not(.disabled):active:focus,
.show > .btn-outline-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem var(--secondary-tahoe);
}
.btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active,
.show > .btn-outline-info.dropdown-toggle {
  color: var(--forced-contrast-font-color-on-dark);
  background-color: var(--secondary-gunrock);
  border-color: var(--secondary-gunrock);
}

/*--- btn outline light --*/
.btn-outline-light {
  color: var(--ucd-black-60);
  background-color: transparent;
  border-color: var(--ucd-black-20);
}
.btn-outline-light:hover,
.btn-outline-light:focus {
  color: var(--ucd-black-90);
  background-color: var(--ucd-black-10);
  border-color: var(--ucd-black-30);
}
.btn-outline-light:focus {
  box-shadow: 0 0 0 0.2rem var(--ucd-black-20);
}

/*--- btn outline-dark --*/
.btn-outline-dark {
  color: var(--ucd-black-90);
  background-color: transparent;
  border-color: var(--ucd-black-90);
}
.btn-outline-dark:hover,
.btn-outline-dark:focus {
  color: var(--forced-contrast-font-color-on-dark);
  background-color: var(--ucd-black-90);
  border-color: var(--ucd-black-90);
}
.btn-outline-dark:focus {
  box-shadow: 0 0 0 0.2rem var(--ucd-black-50);
}

/*--- btn size --*/

.btn-xs {
  padding: 4px 10px;
  font-size: 12px;
}

.btn-sm {
  padding: 5px 12px;
  font-size: 14px;
}

button.btn-lg {
  padding: 11px 20px;
  font-size: 15px;
}

button.btn-block {
  display: block;
  width: 100%;
}

/*--- btn social --*/

.btn-facebook {
  color: var(--forced-contrast-font-color-on-dark) !important;
  background-color: #3c73df;
  border-color: #3c73df;
}

.btn-google-plus {
  color: var(--forced-contrast-font-color-on-dark) !important;
  background-color: #eb5e4c;
  border-color: #eb5e4c;
}

.btn-twitter {
  color: var(--forced-contrast-font-color-on-dark) !important;
  background-color: #2caeff;
  border-color: #2caeff;
}

.btn-instagram {
  color: var(--forced-contrast-font-color-on-dark) !important;
  background-color: #9361fa;
  border-color: #9361fa;
}

.btn-pinterest {
  color: var(--forced-contrast-font-color-on-dark) !important;
  background-color: #c8232c;
  border-color: #c8232c;
}

/*--- cropper document btn --*/

.btn-rounded {
  border-radius: 100px;
}

/*--- cropper document btn --*/

.docs-buttons .btn,
.docs-data .input-group {
  margin-bottom: 5px;
}

/*-----------------------
btn-link
-------------------------*/
.btn-link {
  color: var(--ucd-aggie-blue);
  text-decoration: underline; /* Links should have underlines for a11y */
}

.btn-link:hover,
.btn-link:focus {
  color: var(--ucd-blue-80);
  text-decoration: none; /* Removing underline on hover is a standard pattern */
  outline: 2px solid var(--ucd-aggie-blue); /* Focus ring for keyboard users */
  outline-offset: 2px;
  border-radius: 4px;
}

.btn-primary-link {
  color: var(--ucd-aggie-blue) !important;
}

.btn-brand-link {
  color: var(--ucd-aggie-gold) !important; /* WARNING: Only use on dark backgrounds! */
}

.btn-secondary-link {
  color: var(--ucd-black-70) !important; /* Mapped to your neutral secondary tone */
}

/* -----------------------
2.3  Cards
-------------------------*/

div.card {
  margin-bottom: 30px;
  border: none;
  -webkit-box-shadow: 0px 1px 2px 1px rgba(154, 154, 204, 0.22);
  -moz-box-shadow: 0px 1px 2px 1px rgba(154, 154, 204, 0.22);
  box-shadow: 0px 1px 2px 1px rgba(154, 154, 204, 0.22);
  background-color: var(--forced-contrast-font-color-on-dark) !important;
}

div.card-header {
  background-color: var(--forced-contrast-font-color-on-dark) !important;
  border-bottom: 1px solid #e6e6f2;
}

.card-title {
}

.card-subtitle {
  font-size: 14px;
}

.card-body {
}

.card-text {
}

.card-footer {
  border-top: 1px solid #e6e6f2;
  background: #f6f6ff;
}

.card-link {
}

.toolbar {
  font-size: 18px;
}

.pill {
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 25px;
  border-style: solid;
  border-width: 1px;
}
.pill-green {
  background-color: var(--secondary-farmers-market);
  color: var(--secondary-redwood) !important;
  border-color: var(--secondary-redwood) !important;
}
.pill-yellow {
  background-color: var(--secondary-golden-state);
  color: var(--secondary-california) !important;
  border-color: var(--secondary-california) !important;
}
.pill-orange {
  background-color: var(--ucdh-secondary-orange);
  color: var(--secondary-cabernet) !important;
  border-color: var(--secondary-cabernet) !important;
}
.pill-red {
  background-color: var(--secondary-thiebaud-icing);
  color: var(--secondary-cabernet) !important;
  border-color: var(--secondary-cabernet) !important;
}
.pill-blue {
  background-color: var(--secondary-rec-pool);
  color: var(--secondary-gunrock) !important;
  border-color: var(--secondary-gunrock) !important;
}
.pill-gray {
  background-color: var(--ucd-black-20);
  color: var(--ucd-black) !important;
  border-color: var(--ucd-black) !important;
}

.card-header-title {
  margin: 0;
  line-height: 2;
}

.card-toolbar-tabs {
}

.card-toolbar-tabs .nav.nav-pills {
}

.card-toolbar-tabs .nav.nav-pills .nav-item {
}

.card-toolbar-tabs .nav.nav-pills .nav-item .nav-link {
  font-size: 14px;
  padding: 6px 10px;
}

.card-toolbar-tabs .nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #3743ae;
  background-color: transparent;
}

/*------------------------- Card Varience --------------------------*/

.btn-reset {
  padding: 0 2px;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background-color: transparent;
  border: 0;
  cursor: pointer;
}

/*------------------------- Card Navigation --------------------------*/
/* -----------------------
2.4  General
-------------------------*/

/*---------Tooltips----------*/

/*--------- Popovers ----------------*/

.popover {
  border: 1px solid rgb(230, 230, 242);
}

.bs-popover-auto[x-placement^='right'] .arrow::before,
.bs-popover-right .arrow::before {
  left: 0;
  border-right-color: rgb(230, 230, 242);
}

.popover-header {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  color: inherit;
  background-color: #f7f7fd;
  border-bottom: 1px solid #efeff6;
  border-top-left-radius: calc(0.3rem - 1px);
  border-top-right-radius: calc(0.3rem - 1px);
}

/* -----------------------
2.5  Modals
-------------------------*/

.bd-example-row .row > .col,
.bd-example-row .row > [class^='col-'] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  background-color: rgba(86, 61, 124, 0.15);
  border: 1px solid rgba(86, 61, 124, 0.2);
}

/* -----------------------
2.6  Notification
-------------------------*/

/* -----------------------
2.7  Icon
-------------------------*/

.icon-circle {
  border-radius: 100%;
}

.icon-circle-small {
  line-height: 1;
  padding: 4px 2px;
  text-align: center;
  font-size: 12px;
  display: inline-block;
  border-radius: 100%;
}

.icon-circle-medium {
  line-height: 1;
  padding: 22px 2px;
  text-align: center;
  font-size: 12px;
  display: inline-block;
  border-radius: 100%;
}

/* -----------------------
2.10  Typography
-------------------------*/

/* -----------------------
2.11  Listgroup
-------------------------*/

.list-group-item {
  position: relative;
  display: block;
  padding: 16px 20px;
  margin-bottom: -1px;
  border: 1px solid #e6e6f2;
}

/* -----------------------
2.12  Multiselect
-------------------------*/

.label {
  padding: 3px 10px;
  line-height: 13px;
  color: var(--forced-contrast-font-color-on-dark) !important;
  font-weight: 400;
  border-radius: 2px;
  font-size: 75%;
}

.label-rounded {
  border-radius: 60px;
}

.label-primary {
  background-color: #3743ae;
}

.label-success {
  background-color: #2ec551;
}

.label-danger {
  background-color: #ef172c;
}

/*-----------------------
2.14 Pagination
-------------------------*/

.page-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: 0px;
  margin-right: 5px;
  line-height: 1.25;
  color: #71748d;
  background-color: var(--forced-contrast-font-color-on-dark) !important;
  border: 1px solid #e6e6f2;
  border-radius: 3px;
  line-height: 1;
}

.page-link:hover {
  z-index: 2;
  color: var(--forced-contrast-font-color-on-dark) !important;
  text-decoration: none;
  background-color: #3743ae;
  border-color: #3743ae;
}

.page-item.active .page-link {
  z-index: 1;
  color: var(--forced-contrast-font-color-on-dark) !important;
  background-color: #3743ae;
  border-color: #3743ae;
}

/*-----------------------
2.15 Spinner
-------------------------*/

.spinner-xxl {
  width: 150px;
  height: 150px;
}

.spinner-xl {
  width: 120px;
  height: 120px;
}

.spinner-lg {
  width: 100px;
  height: 100px;
}

.spinner-md {
  width: 80px;
  height: 80px;
}

.spinner-sm {
  width: 60px;
  height: 60px;
}

.spinner-xs {
  width: 30px;
  height: 30px;
}

.dashboard-spinner {
  margin: 0px 8px;
  border-radius: 50%;
  background-color: transparent;
  border: 6px solid transparent;
  border-top: 6px solid #3743ae;
  border-left: 6px solid #3743ae;
  -webkit-animation: 1s spin linear infinite;
  animation: 1s spin linear infinite;
  display: inline-block;
}

.spinner-primary {
  border-top-color: #3743ae;
  border-left-color: #3743ae;
}

.spinner-secondary {
  border-top-color: #6c757d;
  border-left-color: #6c757d;
}

.spinner-success {
  border-top-color: #2ec551;
  border-left-color: #2ec551;
}

.spinner-danger {
  border-top-color: #dc3545;
  border-left-color: #dc3545;
}

.spinner-warning {
  border-top-color: #ffc107;
  border-left-color: #ffc107;
}

.spinner-info {
  border-top-color: #17a2b8;
  border-left-color: #17a2b8;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*-----------------------
2.16 Switch Toggle
-------------------------*/

.ecog-toggle-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox but keep it focusable */
.ecog-toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.ecog-slider {
  position: absolute;
  top: 20%;
  left: 14px;
  right: 0;
  bottom: 0;
  cursor: pointer;
  width: 50px;
  height: 25px;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

/* Round circle */
.ecog-slider:before {
  position: absolute;
  content: '';
  height: 20px;
  width: 20px;
  left: 3.5px;
  bottom: 2.5px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

/* Checked state */
.ecog-toggle-switch input:checked + .ecog-slider {
  background-color: #2196f3;
}

/* Keyboard focus state */
.ecog-toggle-switch input:focus-visible + .ecog-slider {
  outline: 2px solid #2196f3;
  outline-offset: 2px;
}

/* Move the circle when checked */
.ecog-toggle-switch input:checked + .ecog-slider:before {
  -webkit-transform: translateX(23px);
  -ms-transform: translateX(23px);
  transform: translateX(23px);
}

/* Disabled states */
.ecog-toggle-switch input:disabled + .ecog-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

.ecog-toggle-switch input:disabled ~ .ecog-slider {
  background-color: #e0e0e0;
}

.ecog-toggle-switch input:disabled + .ecog-slider::before {
  cursor: not-allowed;
}

.locale-switcher {
  display: flex;
  align-items: center; /* Vertically centers the dropdown */
  height: 100%;
  width: 100%;
  padding: 0 4px; /* Gives it a tiny bit of breathing room from the cell edges */
}

/* Ensures the dropdown fills the available space consistently */
.grid-select {
  margin: 0;
  width: 100%;
  /* Optional: Adjusting padding slightly can make it look less bulky in narrow rows */
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* Rounded sliders */
.ecog-slider.round {
  border-radius: 34px;
}

.ecog-slider.round:before {
  border-radius: 50%;
}

.switch-button.switch-button-xs {
  height: 20px;
  line-height: 16px;
  width: 50px;
}

.switch-button {
  display: inline-block;
  border-radius: 50px;
  background-color: #9e9eaf;
  width: 60px;
  height: 27px;
  padding: 4px;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
}

.switch-button input[type='checkbox'] {
  display: none;
}

.switch-button input[type='checkbox']:checked + span label {
  float: right;
  border-color: #2a75f3;
}

.switch-button.switch-button-xs label {
  height: 12px;
  width: 12px;
}

.switch-button input[type='checkbox']:checked + span label:before {
  position: absolute;
  font-size: 12px;
  font-weight: 600;
  z-index: 0;
  content: 'ON';
  color: var(--forced-contrast-font-color-on-dark) !important;
  left: 0;
  text-align: left;
  padding-left: 10px;
}

.switch-button.switch-button-xs label:before {
  line-height: 21px;
}

.switch-button label:before {
  position: absolute;
  font-size: 12px;
  font-weight: 600;
  z-index: 0;
  content: 'OFF';
  right: 0;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 27px;
  top: 0;
  text-align: right;
  padding-right: 10px;
  color: var(--forced-contrast-font-color-on-dark) !important;
}

.switch-button input[type='checkbox']:checked + span {
  background-color: #3743ae;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 4px;
}

.switch-button.switch-button-sm label {
  height: 16px;
  width: 16px;
}

.switch-button label {
  border-radius: 50%;
  box-shadow: 0 0 1px 1px #fff inset;
  background-color: var(--forced-contrast-font-color-on-dark) !important;
  margin: 0;
  height: 19px;
  width: 19px;
  z-index: 1;
  display: inline-block;
  cursor: pointer;
  background-clip: padding-box;
}

.switch-button.switch-button-sm {
  height: 24px;
  width: 57px;
  line-height: 20px;
}

.switch-button.switch-button-lg {
  height: 30px;
  line-height: 32px;
  width: 64px;
}

.switch-button.switch-button-success input[type='checkbox']:checked + span {
  background-color: #2ec551;
}

.switch-button.switch-button-warning input[type='checkbox']:checked + span {
  background-color: #ffc750;
}

.switch-button.switch-button-danger input[type='checkbox']:checked + span {
  background-color: #ef172c;
}

/* ==========================================================================
  3. Charts
  ========================================================================== */

/*-----------------------
3.3 Charts.js
-------------------------*/

/*-----------------------
3.4 Morris.js
-------------------------*/

/*-----------------------
3.5 C3 Charts.js
-------------------------*/

/* ==========================================================================
  4. Forms
  ========================================================================== */

/*-----------------------
4.1.  Form Elements
------------------*/

/*-----------------------
4.2.  Form Validations
------------------*/

/*-----------------------
4.3.  Multiseelct
-----------------*/

/*-----------------------
4.4.  Wizard
------------------*/

/*-----------------------
4.5.  Summar Note / Text Editor
------------------*/

/*-----------------------
4.6.  Multiupload
--------------------*/

/* ==========================================================================
 5. Table
 ========================================================================== */

/*-----------------------
5.1.  General
--------------------*/

caption {
  caption-side: top;
  text-align: left;
  color: #212529; /* Standard Bootstrap body color, or whatever your label color is */
  font-weight: 700; /* If your labels were bold */
  padding-bottom: 0.5rem;
  /* Add any other margins/padding your old label class had */
}

.table {
  margin-bottom: 0px;
}

.table td,
.table th {
  padding: 10px;
  vertical-align: middle;
  border-top: 1px solid var(--ucd-black-20);
  font-weight: normal;
}

.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid var(--ucd-black-20);
}

.table thead th,
.table th {
  color: var(--ucd-black-80);
  font-family: 'Nunito', serif;
}

.table-bordered {
  border: 1px solid var(--ucd-black-20);
}

.table-bordered td,
.table-bordered th {
  border: 1px solid var(--ucd-black-20);
}

/* Using a very light UCD blue for striped/hover rows instead of rgba */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--ucd-blue-10);
}
.table-hover tbody tr:hover {
  background-color: var(--ucd-blue-10);
}

/*-----------------------
5.2.  Data Tables
--------------------*/

/*-- row group table */
tr.group,
tr.group:hover {
  background-color: var(--ucd-aggie-blue) !important;
  color: var(--forced-contrast-font-color-on-dark);
  font-family: 'Nunito', serif;
  font-size: 18px;
}

/*-----------------------
5.3. Table Filters
--------------------*/

/* ==========================================================================
 6. Pages
 ========================================================================== */

/*-----------------------
6.1 Blank Page
-------------------------*/

/*-----------------------
6.2 Blank Page Header
-------------------------*/

/*-----------------------
6.3 Login
-------------------------*/

/*-----------------------
6.4 Sign up Page
-------------------------*/

/*-----------------------
6.5 Forgot Password
-------------------------*/

/*-----------------------
6.6 Profile
-------------------------*/

/*-----------------------
6.7 Pricing
-------------------------*/

/*-----------------------
6.8 Timeline
-------------------------*/

/*-----------------------
6.9 404 error
-------------------------*/

.error-section {
  padding: 74px 0px;
}

.error-section-content {
  padding-top: 30px;
  color: #3d405c;
  padding-bottom: 30px;
}
/* ==========================================================================
7. Email Componants
========================================================================== */

.btn-space {
  margin-right: 5px;
  margin-bottom: 5px;
}

/*-----------------------
Pageheader & Breadcrumbs
-------------------------*/
.page-header {
  margin-bottom: 20px; /* Gives nice breathing room above the card */
}

.page-breadcrumb .breadcrumb {
  display: flex;
  align-items: center; /* Perfectly centers the text and the chevron vertically */
  padding: 0;
  margin: 0;
  list-style: none;
  background-color: transparent;
  font-size: 16px; /* Slightly larger since it acts as the page title now */
}

.page-breadcrumb .breadcrumb-item {
  display: flex;
  align-items: center;
  line-height: 1; /* Normalizes the height between links and plain text */
}

/* The Clickable Link (Parent Page) */
.page-breadcrumb .breadcrumb-link {
  color: #022851; /* A strong, clear link color (UC Davis Aggie Blue) */
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

.page-breadcrumb .breadcrumb-link:hover {
  color: #005085; /* Lighter blue on hover */
  text-decoration: underline;
}

/* The Separator (Chevron) */
.page-breadcrumb .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  display: flex;
  align-items: center;
  color: #8a909d; /* A neutral gray so it doesn't distract */
  content: '\f285'; /* Bootstrap Icon: chevron-right */
  font-family: 'bootstrap-icons';
  font-size: 13px; /* Scaled to match the 16px text */
  vertical-align: middle;
}

/* The Current Page (Not a link) */
.page-breadcrumb .breadcrumb-item.active {
  color: #343a40; /* A dark charcoal gray to look distinctly like plain text */
  font-weight: 600; /* Bolder to emphasize "You are here" */
}

/*-------------------
7.4  Message Chat Module
----------------------*/
/*----------------------
9.2 Vector Map
---------------------------*/

/*-------------------------------------------------------------------
Media Query
-------------------------------------------------------------------*/

/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */

@media only screen and (max-width: 1400px) {
  .product-price {
    position: initial;
  }
  .product-slider {
    background-color: var(--forced-contrast-font-color-on-dark) !important;
    border-top-left-radius: 4px;
    padding: 131px 28px;
  }

  .influencer-profile-data .user-social-media {
    padding: 16px 56px;
    text-align: center;
    border-right: 1px solid #e6e6f2;
  }
}
@media only screen and (max-width: 1200px) {
  .product-price {
    position: initial;
  }
  .product-slider {
    padding: 131px 30px;
  }
  /*--------- dashboard-influence -------- */
  .user-social-media {
    padding: 16px 45px;
    text-align: center;
    width: 100%;
    border-bottom: 1px solid #dee2e6;
    border-right: transparent !important;
  }
}

/* Medium Devices, Desktops */

@media only screen and (max-width: 992px) {
  /*--------- dashboard-influence -------- */
  .user-social-media {
    padding: 16px 45px;
    text-align: center;
    width: 100%;
    border-bottom: 1px solid #dee2e6;
    border-right: transparent !important;
  }
}

/* Small Devices, Tablets */

@media only screen and (max-width: 768px) {
  main.dashboard-content.container-fluid {
    padding: 30px 20px 60px 20px !important;
  }
  .nav-left-sidebar .navbar a {
    color: var(--forced-contrast-font-color-on-dark) !important;
    font-size: 18px;
  }
  .nav-left-sidebar .navbar {
    padding: 14px;
  }
  .nav-left-sidebar {
    width: 100%;
    position: relative;
    top: 0px;
    right: 0px;
  }
  .dashboard-wrapper {
    margin-left: 0px;
  }
  .dashboard-footer {
    margin-left: 0px;
  }
  .nav-left-sidebar .navbar-toggler {
    background-color: var(--forced-contrast-font-color-on-dark) !important;
  }
}

/* Extra Small Devices, Phones */

@media only screen and (max-width: 480px) {
  main.dashboard-content.container-fluid {
    padding: 30px 20px 60px 20px !important;
  }

  .footer {
    margin-left: 0px;
  }
}

/* Custom, iPhone Retina */
@media only screen and (max-width: 320px) {
}