/*
  Generics
*/

p {
  font-size: 16px !important; /* Override portalbasictheme.css */
}

ul, ol, ul li, ol li {
  font-size: 16px !important; /* Override portalbasictheme.css */
}

h1,h2,h3 {
  border-bottom: 1px solid #e5eaec;
  padding-bottom: 0.5em;
  margin-bottom: 1em;
  color: #0A2240;
}

h1 {
  /* Override portalbasictheme.css */
  font-size: 2.5em !important;
  font-weight: inherit !important;
}

h2 {
  /* Override portalbasictheme.css */
  font-size: 2em !important;
  font-weight: inherit !important;
}

h3 {
  /* Override portalbasictheme.css */
  font-size: 1.75em !important;
  font-weight: inherit !important;
}

h4 {
  /* Override portalbasictheme.css */
  font-size: 1.5em !important;
  font-weight: inherit !important;
}

h5 {
  /* Override portalbasictheme.css */
  font-size: 1.25em !important;
  font-weight: inherit !important;
}

h6 {
  /* Override portalbasictheme.css */
  font-size: 1.15em !important;
  font-weight: 700 !important;
}


/* 
  Buttons
*/
.btn-secondary {
  background-color: #f0f0f0;
  border-color: #f0f0f0;
  color: #333;
}
.btn-secondary:hover {
  background-color: #e7e7e7;

}

/* 
  Form inputs
*/

/* 
Basic Pages theme overrides this value, but because it has priority
over custom CSS, it looks super strange. This overrides that default
behavior so that the text looks nice when in an active state.
*/
.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
.bootstrap-select > .dropdown-toggle.bs-placeholder:active {
  color: #999 !important;
}

.bootstrap-select * {
  font-weight: 400;
}

.bootstrap-select {
  width: 100% !important;
}

.bootstrap-select .dropdown-menu.open {
  min-width: inherit;
}

.bootstrap-select .dropdown-toggle.btn {
  border-color: #949494;
}

.open > .btn-default.dropdown-toggle {
  color: #2f5fef !important;
}

label {
  font-size: 1.75rem;
  font-weight: 600; /* semi-bold */
}

input::placeholder {
  opacity: 0.5; /* 'color' doesn't work on ::placeholder in Pages */
}
input::-webkit-input-placeholder { /* Chrome, Edge, Safari */
  opacity: 0.5;
}
input::-moz-placeholder { /* Firefox */
  color: #999;
  opacity: 1;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  opacity: 0.5;
}

.input-details * {
  font-size: 1em;
  color: #525a5a;
  margin-top: 5px;
  letter-spacing: -0.025rem;
}


/*
  Modal styles, adjusting existing Bootstrap
*/

/*
  This is done for position the close 'X' button on the same Y axis as the header.
  We have to do it this way because Pages Bootstrap and this Bootstrap collide with ::before 
  elements in the modal header that prevent from just doing display: flex; and
  justify-content: space-between;
*/
.modal-header .close {
  margin-top: -10px;
}


/* 
  Well styles, extending Bootstrap
*/
.well.warning {
  border: 1px solid #ffc107;
  background-color: #fff3cd;
  /* color: #684f03 !important; */
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1); /* subtle shadow for depth */
}
.well.notice {
  border: 1px solid #88bdf5;
  background-color: #e6f7ff;
  /* color: #003366 !important; */
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1); /* subtle shadow for depth */
}

.well.danger {
  border: 1px solid #dc3545; 
  background-color: #f8d7da;
  /* color: #721c24 !important; */
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1); /* subtle shadow for depth */
}