/* Custom CSS Classes */

html {
  font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”;
  font-size: .9em; 
  font-weight: 400;
  line-height: 1.5;
  position: relative;
  min-height: 100%;
}

/* Fix for custom-select having two dropdown icons */
.custom-select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Increase all font sizes on mobile */
@media (max-width: 768px) { 
  html {
    font-size: 1em;
  }
  
  .documentCard > .card {
    width: 100% !important;
  }

  .modal-xl {
    width: 90%;
    max-width: 1200px;
  }
}

body {
  padding-bottom: 60px;
  background-color: #dedede;
  height: 100%;
}

small {
  font-size: .9em;
}

.col, .col-auto {
  padding: 0 7px 0 7px;
}

.underbar {
  background-color:#DF5E5E;
  border-top:4px solid #BB2626;
  border-bottom:1px solid #BB2626;
  background:-webkit-gradient( linear,left bottom,left top,color-stop(0.2,rgb(220,80,80)),color-stop(0.8,rgb(226,107,107)) );
  background:-moz-linear-gradient( center bottom,rgb(220,80,80) 20%,rgb(226,107,107) 80% );
}

/* Top Nav Bar  */
#topnav .tab-content {
  border-top-color: #BB2626;
  border-top-width: 3px;
  border-top-style: solid;
}

#topnav .tab-pane {
  margin-top: .25em;
}

#topnav .tab-pane > .container-fluid {
  padding-left: 0;
  padding-right: 0;
}

#topnav .navbar {
  padding: 0 0 0 0;
}

#topnav .nav-item {
  margin-left: 1px;
  margin-right: 1px;
}

#topnav .nav-link {
  font-weight: 600;
}

#topnav .nav-tabs {
  border-bottom-width: 0px;
}

#topnav .nav-tabs .nav-item.show .nav-link, 
#topnav .nav-tabs .nav-link.active {
  color: #FFFFFF;
  background-color: #BB2626;
  border-color: #BB2626;
}

#topnav .nav-tabs .nav-link {
  border: 1px solid transparent;
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
  color: #FFFFFF;
  background-color: #444444;
  border-color: #444444;
}

#topnav .nav-tabs .nav-link:hover {
  background-color: #808080;
  border-color: #808080;
}

#topnav .nav-tabs .nav-item.show .nav-link, 
#topnav .nav-tabs .nav-link.active {
  background-color: #BB2626;
}

/* Make bootstrap labels have smaller bottom margin so they are closer 
   to their inputs */
.form-group label, .form-row label, .input-group label {
  margin-bottom: 1px !important;
}

/* Required labels should have an asterisk next to them. */
label.required:before {
  content:"* ";
  color:red;
}

/* Override bootstrap font-weight-bold to be a bit less obstrusive */
.font-weight-bold {
  font-weight: 600 !important;
}

/* Create a form-control extra small */
.form-control-xs {
  height: calc(1.0em + .5rem + 2px) !important;
}

/* Button styling */
.btn, .btn-sm {
  font-weight: 600;
}

/* mx-auto doesn't center on IE11 for some reason. */
.mx-auto {
  text-align: center !important;
}

.btn-outline-secondary {
  background-color: #FFFFFF;
  border-color: #006894;
  color: #006894;
}

.dropdown-item:focus, .dropdown-item:hover {
  background-color: #BB2626 !important;
  color: #FFFFFF !important;
  font-weight: 600;
}

/* Add new extra small button */
.btn-group-xs > .btn, .btn-xs {
  padding: .3rem .3rem;
  font-size: .875rem;
  line-height: .5;
  border-radius: .2rem;
  vertical-align: bottom;
  margin-bottom: .25rem;
}

.thin-divider {
  margin: .25em 0 .25em 0;
  border-top-style: dashed;
}

form label {
  text-align: left;
}

.modal-header {
  background-color: #BB2626;
  color: #FFFFFF;
  font-weight: 600;
}

.modal-body {
  max-height: calc(90vh - 50px);
  overflow-y: auto;
}

div.alert > br {
  display: none;
}

div.alert .box ul {
  margin: 0 0 0 0;
}

div.alert-warning .box-warning ul,
div.alert-danger .box-error ul,
div.alert-info .box-info ul {
  padding: 0 0 0 1em;
}

div.alert-info .box-info ul {
  list-style: none !important;
}

.tooltip {
  border: 2px solid #000000; 
}

.tooltip, .tooltip-inner {
  background-color: #FFF5CC;
  color: #000000;
  text-align: left;
  opacity: 1 !important;
  filter: alpha(opacity=100) !important;
}

.badge {
  font-size: .9em;
  font-weight: 600;
}

a[data-toggle=modal] {
  cursor: pointer;
}

a.text-secondary {
  font-weight: 600;
}

a.text-secondary:hover {
  color: inherit;
}

.ro-card.card > table {
  margin-bottom: 0px;
}

.ro-card.card-title {
  border-bottom: 2px solid #BB2626;
}

.modal-body {
  text-align: left !important;
}

#redoak-sub-tabs .nav-link, 
#redoak-sub-tabs .nav-link.active {
  color: #000000;
  font-size: 1.1em;
  border: none;
  margin-bottom: 0px;
  border-radius: 0;
  border: 1px solid #C5C5C5;  
  font-weight: 600;
  white-space: nowrap;
  background-color: #E6E6E6;
}

#redoak-sub-tabs .nav-link:hover:not(.active) {
  background-color: #444444;
  color: #FFFFFF;
}

#redoak-sub-tabs .nav-link.active {
  border-color: #BB2626;  
  background-color: #BB2626;
  color: #FFFFFF;
}

.cursor-pointer {
  cursor: pointer;
}

/* Legacy "big" CSS override */
big, .big {
  font-size:120% !important;
  line-height:120%;
}

/* Panel table overrides for non-tablar data */
.table:not(.rich-table) > tbody > tr > th {
  white-space: nowrap;
}

table:not(.rich-table) > tbody > tr:first-child > td,
table:not(.rich-table) > tbody > tr:first-child > th {
  border: none;
}

.ui-widget-overlay {
  opacity: 0.5;
  filter: Alpha(Opacity=50);
  background-color: black;
}

.ui-state-active .ui-button-text {
  background-color: #BB2626;
  color: #FFFFFF;
}

/* Boldness override */
th, b, strong, dt, label, div.listBoxOption {
  font-weight: 600;
}

/* Rich-text datatable overrides */
table.rich-table {
  margin-top: 0px !important;
}

table.dataTable th, table.rich-table th {
  color: #FFFFFF;
  background-color: #BB2626;
}

table.dataTable th {
  white-space: nowrap;
}

table.dataTable td {
  vertical-align: middle;
}

.date-no-wrap {
  white-space: nowrap;
}

.pagination {
  justify-content: center !important;
  margin-bottom: 10px !important;
}

.dt-buttons.btn-group > .btn,
.dt-buttons.btn-group > .btn-group {
  margin-left: 1px;
}

.dataTables_info {
  padding-top: 0px !important;
}

.dataTables_length, .dataTables_filter {
  margin-top: 5px;
}

.dataTable tr.selected {
  background-color: #FFF5CC !important;
  color: #000000 !important;
}

.dataTables_info .select-info .select-item:first-child {
  font-weight: bold !important;
  background-color: #FFF5CC !important;
  color: #000000 !important;
  border: 1px solid #000000;
  padding: 2px;
}

/* Sorting icon overrides.  The default datatables icons are difficult to see. */
th.sorting_asc:before {
  right: .5em !important;
  content: "\25b2" !important;
  opacity: 1 !important;
}

th.sorting_asc:after, 
th.sorting_desc:after,
th.sorting:before,
th.sorting:after {
  content: "" !important;
}

th.sorting_desc:before {
  right: .5em !important;
  content: "\25bc" !important;
  opacity: 1 !important;
}

/* Select2 multi-dropdown styling */
.select2-container {
  width: 100% !important;
  padding: 0;
}

.select2-container--open{
  z-index: 9999999;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice  {
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  border:1px solid #ccc !important;
  background:#D22A2A !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #FFF !important;
}

select.select2, select.select2ajax {
  visibility: hidden;
}

/* Fix to increase bootstrap checkbox sizes */
.custom-control-lg .custom-control-label::before,
.custom-control-lg .custom-control-label::after {
  top: 0.1rem !important;
  left: -1.75rem !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
}

.custom-control-lg .custom-control-label {
  margin-left: 0.5rem !important;
  font-size: 1rem !important;
}

/* Additional font-size display classes */
.display-5 {
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-6 {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-7 {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1rem;
}

/* Read only form rows */
.readonly.form-row {
  background-color: #dedede;
  border: 1px solid #c5c5c5;
  cursor: not-allowed;
}

/* Styling for list group action selectors */
.list-group-item-action:hover {
  background-color: #BB2626;
  color: #FFFFFF;
}

/* Don't show <select> tags to be converted to listboxes by default */
select.listbox {
  display: none;
}

/* Listbox modal field style */
.listboxModalField {
  height: auto;
}

.listboxModalField .badge {
  font-size: 75% !important;
}

.listboxModalField:hover {
  color: #495057;
  background-color: #FFFFFF;
  border-color: #e47c7c;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(187,38,38,.25);
  cursor: pointer;
}

.card .card .card-header {
  background-color: #efe6dc;
}

/* New submission creation CSS styles */
div.submissionTypeRow {
  border-style: solid;
  border-color: #FFFFFF;
  border-width: 1px;
}

div.submissionTypeRow:hover {
  cursor: pointer;
  background-color: #E3CFCF;
  border-color: #B37878;
  border-style: solid;
  border-width: 1px;
}

#uploadContainer {
  border: 5px dashed #D5D5D5;
}

#uploadContainer:hover {
  background-color: #FFF5CC;
  cursor: pointer;
  color: #BB2626 !important;
  border-color: #BB2626 !important;
}

.uploadContainerHover {
  background-color: #FFF5CC;
  cursor: pointer;
  color: #BB2626 !important;
  border-color: #BB2626 !important;
}

.fileRowRemoveCell {
  cursor: pointer;
}

.radioBooleanRow {
  border-style: solid;
  border-color: transparent;
  border-width: 1px;
}
.radioBooleanRow:hover {
  background-color: #E3CFCF;
  border-color: #B37878;
}

.striped-rows > .row {
  margin-left: 0;
  margin-right: 0;
}

.striped-rows > .row > div[class*='col-'] {
  padding-left: 5px;
  padding-right: 5px;
}

.striped-rows > .row:nth-of-type(even) > div[class*='col-'] {
  background: #E6E6E6;
}

.modal-xl .modal-body {
  overflow-x: hidden;
}

.modal-xl.full-width {
  width: 95%;
  max-width: 9999px !important;
}

/* Rich text editors should initially be invisible */
.richTextEditor {
  display: none;
}

/* Idle timeout banner classes */
#idletimeout { background:#CC5100; border:3px solid #FF6500; color:#fff; font-family:arial, sans-serif; text-align:center; font-size:12px; padding:10px; position:relative; top:0px; left:0; right:0; z-index:100000; display:none; }
#idletimeout a { color:#fff; font-weight:bold }
#idletimeout span { font-weight:bold }