/* Colors */
:root {
  --navy-main: #051229;
  --border-bluegrey: #ced7e0;
  --border-dark: #a7bace;
  --main-card-color: #ffffff;
  --timeline-collapsible-text: #051229;
  --timeline-collapsible-content: #ffffff;
  --timeline-field-bg: #ffffff;
  --timeline-row: #d7eaff;
  --timeline-row-alt: #eaf4ff;
  --table-head: #051229;
  --table-row: #d7eaff;
  --table-row-alt: #eaf4ff;
}

/* Cards */
.main-card,
.modal-content {
  border-radius: 4px;
  border: 2px solid var(--border-bluegrey) !important;
  background-color: var(--main-card-color) !important;
  padding: 12px;
}


.over-card {
  border-radius: 4px;
  border: 2px solid var(--border-dark);
  background-color: var(--border-bluegrey);
  padding: 20px;
}

/* Global Input Styling */
input,
select,
textarea {
  border: 2px solid var(--border-bluegrey) !important;
}

input:disabled,
select:disabled,
textarea.readonly {
  color: rgb(87, 87, 87);
}

/* Global Button Styling */
.evilbutton {
  background-color: var(--portalThemeColor3) !important;
  color: var(--portalThemeColor6) !important;
  border-color: var(--portalThemeColor5) !important;
}

.evilbutton:hover {
  background-color: var(--portalThemeColor6) !important;
  color: var(--portalThemeColor3) !important;
}

.goodbutton {
  background-color: var(--portalThemeColor10) !important;
  color: var(--portalThemeColor12) !important;
  border-color: var(--portalThemeColor11) !important;
}

.goodbutton:hover {
  background-color: var(--portalThemeColor12) !important;
  color: var(--portalThemeColor10) !important;
}

.nav-tabs > li > a,
.goodbutton,
.evilbutton,
.btn-primary,
.button1,
.button2,
.btn {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Layout Styles */
.margin-side-60 {
  margin-left: 60px !important;
  margin-right: 60px !important;
}

.margin-side-30 {
  margin-left: 30px !important;
  margin-right: 30px !important;
}

.margin-ends-60 {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
}

.margin-ends-30 {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
}

/* Sign in page styling */
#content-container > #content {
  border-radius: 4px;
  border: 2px solid var(--border-bluegrey);
  background-color: var(--main-card-color);
  margin: 60px !important;
  padding: 12px;
}