/* 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,
[readonly="readonly"] {
  color: rgb(87, 87, 87) !important;
}

/* 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-60-r {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

@media (max-width: 1024px) {
  .margin-side-60-r {
    margin-left: 0px !important;
    margin-right: 0px !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;
}

@media (max-width: 1024px) {
  .columnBlockLayout {
    padding: 0px !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;
}

@media (max-width: 1024px) {
  #content-container > #content {
    margin: 0px !important;
  } 
}

#content-container {
  display: block !important;
}

/* PW Page Styling */
body > .page-heading > .container, body > .container > .row {
  border-radius: 4px;
  border: 2px solid var(--border-bluegrey);
  background-color: var(--main-card-color);
  padding: 12px;
}

body > .container > .row { 
  margin-top: 30px;
  margin-bottom: 60px;
  flex: 1;
}

 body > .page-heading > .container {
  margin-top: 60px;
  margin-bottom: 30px;
 }
 
 body > .container:has(.row) {
  display: flex;
  justify-content: center;
 }

/* Header Dropdown Styling */

.navbar-inverse .navbar-nav > li > a:focus, 
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu {
  background-color: var(--border-bluegrey) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}