body, html { margin:0; padding:0; font-family:sans-serif; color:#182a58}

.mainclass * {
  color:#182a58;
}

.navbar {
  background-color:#1f3661; color:#fff;
  display:flex; align-items:center; height:60px;
}
.navbar-left { flex:1; padding-left:20px; }
.navbar-center { flex:2; text-align:center; }
.navbar-right { flex:1; text-align:right; padding-right:20px; font-size:16px; }

.logo { height:40px; }

.navbar-center ul { list-style:none; margin:0; padding:0; display:inline-block; }
.navbar-center li { display:inline-block; margin:0 15px; position:relative; }
.navbar-center a { color:#fff; text-decoration:none; font-weight:bold; }
.dropdown-content {
  display:none; position:absolute; background:#fff; color:#000;
  min-width:160px; box-shadow:0 2px 5px rgba(0,0,0,0.3);
}
.dropdown:hover .dropdown-content { display:block; }
.dropdown-content a { display:block; padding:8px 12px; text-decoration:none; color:#000; }
.dropdown-content a:hover { background:#f1f1f1; }

.cart-icon { margin-right:8px; }

.hero {
  padding:100px 20px 40px; text-align:center;
  background:#f9f9f9;
}
.hero h1 { font-size:32px; letter-spacing:1px; }
.hero p { color:#555; margin:8px 0; }
.hero .selectize-input { margin-top:10px; }

.sections {
  display:flex; flex-wrap:wrap; justify-content:space-around;
  padding:40px 10px;
}
.section-card {
  width:23%; min-width:250px; padding:20px; border-radius:6px;
  color:#fff; margin-bottom:30px; position:relative;
}
.section-card h3 { text-transform:uppercase; font-size:18px; }
.section-card p { font-size:13px; line-height:1.4; margin-top:10px; }
.btn-section {
  margin-top:20px; background:#0003; border:none; color:#fff;
  padding:10px 16px; cursor:pointer; border-radius:4px;
}
.section-card.blue    { background:#4da6ff; }
.section-card.green   { background:#4caf50; }
.section-card.orange  { background:#e64a19; }
.section-card.pink    { background:#e91e63; }

.plotly { margin-top:15px; }


button,
button {
  all: unset;                     /* reset Bootstrap defaults */
  box-sizing: border-box;
  cursor: pointer;

  background: #f2f2f2;            /* soft grey */
  color: #182a58;                 /* deep navy text */
  border: 1px solid #c7d2e2;      /* subtle border */
  border-radius: 10px;
  width: 100%;                    /* full width in sidebar */
  padding: 8px 12px;

  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.15;
  text-align: left;

  display: flex;                  /* icon + label alignment */
  align-items: center;
  gap: 8px;

  box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(16,42,67,0.06);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.02s ease;
  margin-top: 10px;               /* spacing between the two buttons */
} 

/* Hover / active / focus states */
button:hover,
button:hover {
  background: #e4ebf6;
  border-color: #b7c6da;
}
button:active,*/
button:active {
  transform: translateY(1px);
}
button:focus,
button:focus {
  outline: 3px solid rgba(0, 78, 155, 0.25);
  outline-offset: 2px;
}
/* Strong, specific targeting for your custom buttons */
button.faba-ctl-btn,
button.btn.action-button.faba-ctl-btn,
.btn.action-button.faba-ctl-btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;

  background: #f2f2f2;
  color: #182a58;
  border: 1px solid #c7d2e2;
  border-radius: 10px;
  width: 100%;
  padding: 8px 12px;

  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.15;
  text-align: left;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(16,42,67,0.06);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.02s ease;
  margin-top: 10px;
}

button.faba-ctl-btn:hover,
.btn.action-button.faba-ctl-btn:hover { background:#e4ebf6; border-color:#b7c6da; }
button.faba-ctl-btn:active,
.btn.action-button.faba-ctl-btn:active { transform: translateY(1px); }
button.faba-ctl-btn:focus,
.btn.action-button.faba-ctl-btn:focus  { outline: 3px solid rgba(0,78,155,.25); outline-offset: 2px; }


.pend-canc-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80px;
}

.pend-canc-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: rgba(255,0,0,0.1);
}