/*USAGE Example

:root {
  --dk-blue: #224e76;
}

attribute: var(--dk-blue); 
*/

:root {
  --black: #000000;
  --white: #ffffff;
  --dk-blue: #224e76;
  --gray: #dde6e8;
  --orange: #de8828;
  --header: #90c2f3;
  --purple: #933bbc;
  --green: #06650c;
  --blue: #246fba;
  --footer-blue: #468ec5;
  /*#e09613;*/
  --grc-red: #993300;
  --grc-grey: #737378;
  --opra-dark: #002A29;
  --dark-blue-new: #0D113E;
}

body {
  overflow-x: hidden;
}

#opra a.btn {
  user-select: auto;
}

.step-theme {
  border: solid 1px var(--orange);
  border-radius: 4px;
  overflow: hidden;
}

.step-theme>.sectionTitle {
  background-color: var(--gray);
  padding: 0.5em;
  color: (--dk-blu);
}

.step-theme>div {
  padding: 0.5rem;
}

.carousel-control-next,
.carousel-control-prev {
  opacity: 1 !important;
  z-index: 1000;
}

.carousel-control-next:hover,
.carousel-control-next:focus,
.carousel-control-prev:hover,
.carousel-control-prev:focus {
  transform: scale(150%);
  /*Revetert back CS 11/9/21*/
}

.carousel.sonj .carousel-control-next-icon,
.carousel.sonj .carousel-control-prev-icon {
  background-color: rgb(0, 0, 0) !important;
  border: 2px solid white;
}

.carousel-indicators li {
  opacity: 1 !important;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.carousel.sonj .carousel-indicators li.active {
  margin-top: 3px;
  margin-bottom: 3px;
}

.carousel-indicators li.togglePauseCarousel {
  border-radius: 5px !important;
  height: 20px !important;
  width: 20px !important;
  border-top: 0px !important;
  border-bottom: 0px !important;
  text-indent: 3px !important;
}

.carousel-indicators li.togglePauseCarousel svg {
  padding: 0 0 1px 0;
}

#opra .border-orange {
  border-color: var(--orange) !important;
}

#opra .step-title {
  background-color: var(--gray) !important;
  color: var(--dk-blue) !important;
  font-weight: bold;
}

/*IE11 Image Bug Fix*/
#opra img.img-fluid {
  flex-shrink: 0;
}

#opra .navbar-brand {
  max-width: 75%;
  margin-right: 0px;
  white-space: normal;
  color: var(--opra-dark);
}

.grc-nav .nav-link.active, 
.grc-nav .nj-nav .show>.nav-link, 
.grc-nav a.nav-link:hover {
  background-color: #ffffff !important;
  color: #000 !important;
  border-radius: .25rem;
}

.grc-nav .nav-item .nav-link {
  padding-left: 0.5rem !important;
}

/*XS*/
/*Sets caption to below carousel on smallest devices*/
@media screen and (max-width: 575px) {

  #opra .carousel.sonj .carousel-caption,
  #opra .carousel.sonj .carousel-caption.default,
  #opra .carousel.sonj .carousel-caption.left,
  #opra .carousel.sonj .carousel-caption.right {
    background: rgba(0, 0, 0, 0.4);
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    align-items: center;
    padding-bottom: 2rem;
    top: unset;
    transform: unset;
    box-sizing: content-box;
  }
}

/*Light gray Bar*/
.lt-gray-bar {
  background-color: #e8e8e8;
}

/* GRC Navigation */
.grc-nav {
  background-color: var(--grc-grey);
}

.grc-nav nav h4 a {
  color: white !important;
}

.grc-nav nav h4 a:hover,
.grc-nav nav .nav-item.dropdown>a:hover {
  text-decoration: underline !important;
}

.grc-nav .nav-item .nav-link:hover,
.grc-nav nav .nav-item.dropdown>a:hover {
  text-decoration: none !important;
}

.grc-nav nav .dropdown-item:hover {
  background-color: #000000 !important;
  color: #ffffff !important
}

.sonj-nav .dropdown-item:focus, .sonj-nav .dropdown-item:hover,
.grc-nav nav .dropdown-item:hover {
  background-color: var(--dark-blue-new) !important;
}

.grc-nav .navbar-dark .navbar-toggler {
  border: none !important;
}

.grc-nav .navbar-dark .navbar-toggler .navbar-toggler-icon {
  background-image: none !important;
}

.grc-nav .navbar-dark svg:hover .st0 {
  stroke: var(--opra-dark) !important;
}

.grc-nav nav>.navbar-collapse>ul>li>a {
  color: white !important;
}

/*Site Name*/
#opra #site-name.department {
  margin: 2px 0px;
}

#opra #site-name h2 {
  margin: 0px;
}

#opra #site-name h2>.department {
  position: relative;
  color: var(--dark-blue-new);
  font-size: 2.5rem;
  font-weight: 700;
}

#opra #site-name h2>.department>.alt-color {
  color: var(--purple);
}

/*Navigation*/
#opra .opra.department-level {
  background-color: #ffffff;
  color: var(--dark-blue-new);
  border-bottom: 6px solid var(--dark-blue-new);
}

#opra button.navbar-toggler:focus,
#opra button.navbar-toggler:hover {
  color: #000000;
}

#opra .sonj-nav.opra.department-level nav.navbar button.navbar-toggler {
  color: #000000 !important;
}


#opra .opra.department-level span.navbar-toggler-icon {
  background-image: none !important;
}

#opra .opra.department-level span.navbar-toggler-icon svg:hover .st2 {
  stroke: var(--grc-red) !important;
}

#opra .opra.department-level ul.navbar-nav>li.nav-item>a.nav-link {
  color: black;
  border-radius: 0px;
}

#opra .sonj-nav .nav-link:hover,
#opra .sonj-nav .nav-link:focus {
  border-bottom: 8px solid var(--opra-dark);
  text-decoration: none !important;
}

#opra .sonj-nav .dropdown-menu li a:hover {
  text-decoration: none !important;
}

#opra .sonj-nav .nav-link {
  border-bottom: 8px solid #ffffff;
}

#opra .sonj-nav .nav-link.active {
  background: #ffffff;
  border-bottom: 8px solid var(--dark-blue-new);
}

#opra .sonj-nav .show>.nav-link {
  background: #ffffff;
  border-bottom: 8px solid var(--dark-blue-new);
}

@media screen and (max-width: 991px) {
  #opra .sonj-nav .nav-link {
    border-bottom: 2px solid #ffffff;
  }

  #opra .sonj-nav .nav-link:hover,
  #opra .sonj-nav .nav-link:focus {
    border-bottom: 2px solid var(--opra-dark);
    text-decoration: none !important;
  }

  #opra .sonj-nav .nav-link.active {
    background: #ffffff;
    border-bottom: 2px solid var(--opra-dark);
  }

  #opra .sonj-nav .show>.nav-link {
    background: #ffffff;
    border-bottom: 2px solid var(--opra-dark);
  }
}

/*Full Width Image*/
#opra img.full-width {
  width: 100%;
  height: auto;
}

/*Page Title*/
#opra .pageTitle {
  /* color: var(--purple); */
  font-size: 2.5rem !important;
}

#opra .sectionTitle {
  color: var(--blue);
  font-size: 1.35rem;
}

/*Carousel Custom Button Color*/
.btn-blue {
  background-color: var(--dk-blue);
  border-color: var(--dk-blue);
}

/*Blue Card*/
#opra .card.card-blue {
  background-color: #1e57a4;
  color: #ffffff;
}

#opra .card.card-blue a {
  color: #ffffff;
}

#opra .card.card-blue.with-icon>.icon {
  left: 1.875rem;
  transform: translate(-50%, 0px);
  top: 1.5rem;
}

/*Row Header header-blue */
#opra .header-blue {
  color: #1e57a4;
}

/*List Icons*/
#opra .icon {
  color: var(--dk-blue);
}

#opra .icon.green {
  color: #008546;
}

#opra .icon.blue {
  color: var(--dk-blue);
}

#opra .icon.white {
  color: #ffffff;
}

#opra .list-group-item.with-icon {
  position: relative;
  padding-left: 3.25em;
}

#opra .list-group-item.with-icon .icon {
  position: absolute;
  left: 1em;
  top: initial;
}

#opra .list-group-item>*:last-child {
  margin-bottom: 0px;
  padding-bottom: 0px;
}

/*Related Column*/
#opra .related-info .related-title {
  color: #ffffff;
  background-color: #1e57a4;
}

/*File Manifest List*/
.fileList li button.collapsed::after {
  content: "+";
}

.fileList li button {}

.fileList li button::after {
  content: "\2012";
}

/*Footer*/
.footer.site, .footer.site-footer {
  background: var(--dark-blue-new);
  padding: 15px 0;
  color: #fff;
  font-size: 1rem;
  margin-top: 30px;
  font-weight: 300;
}

.footer.sonj, .footer.sonj-footer {
  background: #363636;
  padding: 15px 0;
  color: #fff;
  font-size: 1rem;
  font-weight: 300;
}

#opra footer .site-footer {
  background: rgb(71, 142, 196);
  background: linear-gradient(90deg,
      rgba(71, 142, 196, 1) 0%,
      rgba(70, 143, 198, 1) 100%);
  background: var(--dark-blue-new);
}

#opra footer .site-footer img.digital-nj {
  max-height: 100px;
}

#opra footer a.social:focus {
  outline: 1px dashed white;
}

#opra footer a.snav {
  font-size: 0.875rem;
}

/* Social Boxes */

#opra .social-box {
  margin: 0em 0em 2em 0em;
  /*max-width: 530px; Facebook widget will only dislpay at max 500px width so to avoid deadspace we stop these from exceeding 500px*/
  /*float: none;
	display: inline-block;
	*/
}

#opra .social-box>h4 {
  color: white;
  margin: 0;
  padding: 0.25em 1em;
  font-weight: bold;
  text-align: left;
}

#opra .news-box>h4 {
  background-color: #253341;
}

#opra .facebook-box>h4 {
  background-color: #17548d;
}

#opra .facebook-box .wrapper {
  text-align: center;
}

#opra .twitter-box>h4 {
  background-color: #479ae8;
}

#opra .social-box>.wrapper {
  border: 1px solid #9c9c9c;
  max-height: 500px;
  height: 500px;
  overflow: hidden;
}

#opra .social-box.news-box>.wrapper {
  overflow-y: scroll;
}

/* Site Name */
#site-name .site-logo {
  width: 5rem;
}

a[aria-expanded=true] .fa-chevron-circle-down {
  display: none;
}

a[aria-expanded=false] .fa-chevron-circle-up {
  display: none;
}

#accordionTab .dddacc .accordianDDDAnc {
  border-left: 12px solid var(--dark-blue-new);
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--opra-dark)
}

#accordionTab .dddacc .card-header {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

#accordionTab .dddacc .accordianDDDAnc:hover {
  text-decoration: underline;
}

#accordionTab .card .accordianDDDAnc>.card-header {
  background-color: #ffffff;
}

#accordionTab .card .accordianDDDAnc .card-header svg {
  color: var(--dark-blue-new);
}

/* ************** Department Alert Include File ************** */
.dept-alert {
  margin-top: -1rem !important;
  margin-bottom: 1rem !important;
}

/* ************************* HOME PAGE *********************** */

/* Important Notice */
.alert-message {
  background-color: #e9ecef;
  background-color: #ffffff;
  margin-top: -1rem;
}

.alert-message svg {
  width: 2rem !important;
  height: 2rem !important;
}

.alert-message .alert-message-text p {
  font-size: 0.875rem;
  font-weight: 500;
}

.alert-message .alert-message-text .alert-message-description p:last-child {
  margin-bottom: 0 !important;
}

/* Cards Row */
.home-page-cards .card .card-body .card-text {
  font-size: 0.875rem !important;
}

.home-page-cards a {
  text-decoration: underline !important;
}

.home-page-cards a:hover {
  /* color: #0056b3 !important; */
  text-shadow: rgb(0, 86, 179) 0px 0px 0.05px, rgb(0, 86, 179) 0px 0px 0.05px;
}

/* Icon Cards Row */
.home-page-icon-cards .card-text {
  font-size: 0.875rem !important;
}

.home-page-icon-cards img {
  height: 6rem;
}

/* ************************* SUBPAGE *********************** */

#sections .cards-row .card .card-header {
  background-color: var(--dark-blue-new) !important;
  color: white !important;
}

#sections .cards-row .card .card-footer-custom {
  bottom: 0.75rem;
  right: 1rem;
}

.bg-breadcrumbs {
  background-color: #e9ecef;
}

main.subpage-template a,
.alert-message a {
  text-decoration: underline;
}

main.subpage-template a:hover,
.alert-message a:hover {
  text-shadow: rgb(0, 86, 179) 0px 0px 0.65px, rgb(0, 86, 179) 0px 0px 0.65px;
}

.alert-message .container-fluid .row>div {
    border: 3px solid #0D113E;
    border-radius: 0.25rem;
    padding: 1.25rem !important;
}

.alert-message .container-fluid .row {
  margin: 0 15px !important
}

.alert-message .container-fluid .row .alert-message-text h3 {
  margin-bottom: 1rem!important;
}

#sections .links-row .card .card-header a {
  color: var(--opra-dark)
}

#sections .links-row .card {
  border-left: 12px solid var(--dark-blue-new);
  border-radius: 0.5rem !important;
}

.form-group {
  width: 100%;
  min-width: 100%;
}

.short-border {
  width: 10rem;
  border-top: 0.5rem solid var(--dark-blue-new);
}

.row {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.right-0 {
  right: 0;
}

.required-label {
  font-size: 0.875rem;
}

.form-border-bottom {
  border-bottom: 0.5rem solid var(--dark-blue-new);
}

.bg-opra-dark {
  background-color: var(--dark-blue-new);
}

.bg-opra-dark:hover {
  background-color: #343a40e0 !important;
}

.form-control:disabled, .form-control[readonly] {
  background-color: #ffffff !important;
}

main p,
main a,
table tr {
  font-size: 1rem;
}

table tr th,
table tr td {
  vertical-align: middle !important;
}

table thead .thead-dark th {
  background-color: var(--dark-blue-new) !important;
}

@media (max-width: 575px) {
  #opra .pageTitle {
    font-size: 1.5rem !important;
  }

  main p,
  main a,
  table tr {
    font-size: 1rem;
  }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
  #opra .pageTitle {
    font-size: 2rem !important;
  }

  main p,
  main a,
  table tr {
    font-size: 1rem;
  }
}

@media (min-width: 576px) {
  .subpage-template .modal-dialog {
    max-width: 700px;
  }

  .subpage-template .modal {
    padding: 1rem !important;
  }
}

@media (min-width: 2000px) {
  .subpage-template .modal-dialog {
    max-width: 1200px;
  }
}

@media screen and (min-width: 576px) and (max-width: 767px) {

  #sections .cards-row .col-2-card:nth-child(2n),
  #sections .cards-row .col-3-card:nth-child(2n),
  #sections .cards-row .col-4-card:nth-child(2n),
  #sections .links-row .col-3-link:nth-child(2n) {
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {

  #sections .cards-row .col-2-card:nth-child(2n),
  #sections .cards-row .col-3-card:nth-child(2n),
  #sections .cards-row .col-4-card:nth-child(2n),
  #sections .links-row .col-3-link:nth-child(2n) {
    padding-right: 0 !important;
  }
}

@media screen and (min-width: 992px) {

  #sections .cards-row .col-2-card:nth-child(2n),
  #sections .cards-row .col-3-card:nth-child(3n),
  #sections .cards-row .col-4-card:nth-child(4n),
  #sections .links-row .col-3-link:nth-child(3n) {
    padding-right: 0 !important;
  }
}

@media (max-width: 991px) {
  .alert-message {
    margin-top: 0;
  }
}

#slider4 .carousel-control-next,
#slider4 .carousel-control-prev {
  opacity: .6 !important;
}

#slider4 .carousel-control-next:focus, 
#slider4 .carousel-control-next:hover, 
#slider4 .carousel-control-prev:focus, 
#slider4 .carousel-control-prev:hover {
  color: #fff !important;
  text-decoration: none !important;
  outline: 0 !important;
  opacity: 1 !important;
}

#slider4 .carousel-control-prev:focus, #slider4 .carousel-control-next:focus {
  background-color: rgba(103, 122, 67, .5);
  border: 3px solid var(--bs-green);
}

.slider-cards img {
  width: 6rem;
}

.slider-cards .row>div {
  border-bottom: 3px solid #BBBCBE;
  padding-bottom: .5rem !important;
  margin-bottom: 1.5rem !important;
}
.slider-cards .row>div:nth-last-child(1) {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 1rem !important;
}

@media (max-width: 991px) {
  .slider-cards .row>div {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .slider-cards .row>div:nth-last-child(1) {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}