/*   This file should not contain anything but @import and comments.  */


@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800&display=swap");


/*
.myphx-logo__subtitle {

}*/

.form-control:disabled:not(select#serviceAddresses), .form-control[readonly]
{
  background:none !important;
  color:white!important;
  border: 1px solid darkgray !important;
  padding: 4px;
}


ul {
  margin-bottom: initial !important;
  margin-top: initial !important;
}

.msos-input{
  color:white;
}

.bb-purple-accent {
  border-bottom: 1px solid hsl(240deg, 88%, 65%);
}


.user-settings__content>.list-group-item {
  background-color: #161627 !important;
  color: #FAFAFA !important;
}

#serviceAddresses{
  color: black !important;
}

/* C O L O R   C L A S S E S */
.title-text {
  color: #fafafa !important;
}

.subtitle-text {
  color: #cbcbcf !important;
}

.faded-text {
  color: #767689 !important;
}

.footer-text {
  color: #acacb2 !important;
}

.link-text {
  color: #94b9f4 !important;
}

.site-bg {
  background-color: #09091b !important;
}

.card-bg {
  background-color: #161627 !important;
}

.banner-bg {
  background-color: #212529 !important;
}

/* T Y P O G R A P H Y   -   L O G O */
.font-stack-01 {
  font-family: "Montserrat", sans-serif !important;
}

/* ======================================= */
/*            COLORS 
/* ======================================= */
/*crystalblue*/
/*rhythm*/
/*gold*/
/*flirt*/
/*purple*/
/*gray*/
/*orange*/
/*darkblue*/
/*lightblue*/
/*red*/
/*crystalblue*/
/* rhythm */
/* gold */
/* maroon */
/* purple */
/* gray */
/* darkblue */
/* orange */
/* lightblue */
/* red */
/*crystalblue*/
.crystalblue {
  background: hsl(203deg, 50%, 38%);
}

.crystalblue-10 {
  background: hsl(203, 50%, calc(38% + 5%));
}

.crystalblue-20 {
  background: hsl(203, 50%, calc(38% + 10%));
}

.crystalblue-30 {
  background: hsl(203, 50%, calc(38% + 15%));
}

.crystalblue-40 {
  background: hsl(203, 50%, calc(38% + 20%));
}

.crystalblue-50 {
  background: hsl(203, 50%, calc(38% + 25%));
}

.crystalblue-60 {
  background: hsl(203, 50%, calc(38% + 30%));
}

.crystalblue-70 {
  background: hsl(203, 50%, calc(38% + 35%));
}

.crystalblue-80 {
  background: hsl(203, 50%, calc(38% + 40%));
}

/* rhythm */
.rhythm {
  background: hsl(234deg, 21%, 55%);
}

.rhythm-10 {
  background: hsl(234, 21%, calc(55% + 5%));
}

.rhythm-20 {
  background: hsl(234, 21%, calc(55% + 10%));
}

.rhythm-30 {
  background: hsl(234, 21%, calc(55% + 15%));
}

.rhythm-40 {
  background: hsl(234, 21%, calc(55% + 20%));
}

.rhythm-50 {
  background: hsl(234, 21%, calc(55% + 25%));
}

.rhythm-60 {
  background: hsl(234, 21%, calc(55% + 30%));
}

.rhythm-70 {
  background: hsl(234, 21%, calc(55% + 35%));
}

.rhythm-80 {
  background: hsl(234, 21%, calc(55% + 40%));
}

/* gold */
.gold {
  background: hsl(45deg, 100%, 40%);
}

.gold-10 {
  background: hsl(45, 100%, calc(40% + 5%));
}

.gold-20 {
  background: hsl(45, 100%, calc(40% + 10%));
}

.gold-30 {
  background: hsl(45, 100%, calc(40% + 15%));
}

.gold-40 {
  background: hsl(45, 100%, calc(40% + 20%));
}

.gold-50 {
  background: hsl(45, 100%, calc(40% + 25%));
}

.gold-60 {
  background: hsl(45, 100%, calc(40% + 30%));
}

.gold-70 {
  background: hsl(45, 100%, calc(40% + 35%));
}

.gold-80 {
  background: hsl(45, 100%, calc(40% + 40%));
}

/* maroon */
.maroon {
  background: hsl(325deg, 65%, 36%);
}

.maroon-10 {
  background: hsl(325, 65%, calc(36% + 5%));
}

.maroon-20 {
  background: hsl(325, 65%, calc(36% + 10%));
}

.maroon-30 {
  background: hsl(325, 65%, calc(36% + 15%));
}

.maroon-40 {
  background: hsl(325, 65%, calc(36% + 20%));
}

.maroon-50 {
  background: hsl(325, 65%, calc(36% + 25%));
}

.maroon-60 {
  background: hsl(325, 65%, calc(36% + 30%));
}

.maroon-70 {
  background: hsl(325, 65%, calc(36% + 35%));
}

.maroon-80 {
  background: hsl(325, 65%, calc(36% + 40%));
}

/* purple */
.purple {
  background: hsl(269deg, 62%, 38%);
}

.purple-10 {
  background: hsl(269, 62%, calc(38% + 5%));
}

.purple-20 {
  background: hsl(269, 62%, calc(38% + 10%));
}

.purple-30 {
  background: hsl(269, 62%, calc(38% + 15%));
}

.purple-40 {
  background: hsl(269, 62%, calc(38% + 20%));
}

.purple-50 {
  background: hsl(269, 62%, calc(38% + 25%));
}

.purple-60 {
  background: hsl(269, 62%, calc(38% + 30%));
}

.purple-70 {
  background: hsl(269, 62%, calc(38% + 35%));
}

.purple-80 {
  background: hsl(269, 62%, calc(38% + 40%));
}

/* gray */
.gray {
  background: hsl(240deg, 4%, 48%);
}

.gray-10 {
  background: hsl(240, 4%, calc(48% + 5%));
}

.gray-20 {
  background: hsl(240, 4%, calc(48% + 10%));
}

.gray-30 {
  background: hsl(240, 4%, calc(48% + 15%));
}

.gray-40 {
  background: hsl(240, 4%, calc(48% + 20%));
}

.gray-50 {
  background: hsl(240, 4%, calc(48% + 25%));
}

.gray-60 {
  background: hsl(240, 4%, calc(48% + 30%));
}

.gray-70 {
  background: hsl(240, 4%, calc(48% + 35%));
}

.gray-80 {
  background: hsl(240, 4%, calc(48% + 40%));
}

/* darkblue */
.darkblue {
  background: hsl(222deg, 30%, 39%);
}

.darkblue-10 {
  background: hsl(222, 30%, calc(39% + 5%));
}

.darkblue-20 {
  background: hsl(222, 30%, calc(39% + 10%));
}

.darkblue-30 {
  background: hsl(222, 30%, calc(39% + 15%));
}

.darkblue-40 {
  background: hsl(222, 30%, calc(39% + 20%));
}

.darkblue-50 {
  background: hsl(222, 30%, calc(39% + 25%));
}

.darkblue-60 {
  background: hsl(222, 30%, calc(39% + 30%));
}

.darkblue-70 {
  background: hsl(222, 30%, calc(39% + 35%));
}

.darkblue-80 {
  background: hsl(222, 30%, calc(39% + 40%));
}

/* orange */
.orange {
  background: hsl(19deg, 100%, 50%);
}

.orange-10 {
  background: hsl(19, 100%, calc(50% + 5%));
}

.orange-20 {
  background: hsl(19, 100%, calc(50% + 10%));
}

.orange-30 {
  background: hsl(19, 100%, calc(50% + 15%));
}

.orange-40 {
  background: hsl(19, 100%, calc(50% + 20%));
}

.orange-50 {
  background: hsl(19, 100%, calc(50% + 25%));
}

.orange-60 {
  background: hsl(19, 100%, calc(50% + 30%));
}

.orange-70 {
  background: hsl(19, 100%, calc(50% + 35%));
}

.orange-80 {
  background: hsl(19, 100%, calc(50% + 40%));
}

/* lightblue */
.lightblue {
  background: hsl(206deg, 100%, 64%);
}

.lightblue-10 {
  background: hsl(206, 100%, calc(64% + 5%));
}

.lightblue-20 {
  background: hsl(206, 100%, calc(64% + 10%));
}

.lightblue-30 {
  background: hsl(206, 100%, calc(64% + 15%));
}

.lightblue-40 {
  background: hsl(206, 100%, calc(64% + 20%));
}

.lightblue-50 {
  background: hsl(206, 100%, calc(64% + 25%));
}

.lightblue-60 {
  background: hsl(206, 100%, calc(64% + 30%));
}

.lightblue-70 {
  background: hsl(206, 100%, calc(64% + 35%));
}

.lightblue-80 {
  background: hsl(206, 100%, calc(64% + 40%));
}

/* red */
.red {
  background: hsl(356deg, 85%, 57%);
}

.red-10 {
  background: hsl(356, 85%, calc(57% + 5%));
}

.red-20 {
  background: hsl(356, 85%, calc(57% + 10%));
}

.red-30 {
  background: hsl(356, 85%, calc(57% + 15%));
}

.red-40 {
  background: hsl(356, 85%, calc(57% + 20%));
}

.red-50 {
  background: hsl(356, 85%, calc(57% + 25%));
}

.red-60 {
  background: hsl(356, 85%, calc(57% + 30%));
}

.red-70 {
  background: hsl(356, 85%, calc(57% + 35%));
}

.red-80 {
  background: hsl(356, 85%, calc(57% + 40%));
}


/* * ----------------------------------------
 * animation fade-out (showAlert())
 * ----------------------------------------
 */
.fade-out {
  -webkit-animation: fade-out 2s ease-out 1.5s both;
  animation: fade-out 2s ease-out 1.5s both;
}

@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.scale-in-ver-center {
  -webkit-animation: scale-in-ver-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.9s both;
  animation: scale-in-ver-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.9s both;
}

@-webkit-keyframes scale-in-ver-center {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    opacity: 1;
  }

  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes scale-in-ver-center {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    opacity: 1;
  }

  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    opacity: 1;
  }
}




.slide-in-top {
  -webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
    transform: translateY(-1000px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
    transform: translateY(-1000px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}




.slide-in-bottom {
  -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}



/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
.slide-in-left {
  -webkit-animation: focus-in-expand 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
  animation: focus-in-expand 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
}

@-webkit-keyframes slide-in-left {
  0% {
    transform: translateX(-1000px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-left {
  0% {
    transform: translateX(-1000px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/*************************************************/
.scale-in-left2 {
  -webkit-animation: scale-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
  animation: scale-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
}

.scale-in-left {
  -webkit-animation: scale-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
  animation: scale-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
}

/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
.tracking-in-expand {
  -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) both;
  animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }

  40% {
    opacity: 0.6;
  }

  100% {
    opacity: 1;
  }
}

@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }

  40% {
    opacity: 0.6;
  }

  100% {
    opacity: 1;
  }
}


/* ======================================= */
/*    ANIMATION: SWIRL-IN-FWD
/* ======================================= */
.swirl-in-fwd {
  -webkit-animation: swirl-in-fwd 0.4s ease-out 0.1s both;
  animation: swirl-in-fwd 0.4s ease-out 0.1s both;
}

@-webkit-keyframes swirl-in-fwd {
  0% {
    transform: rotate(-540deg) scale(0);
    opacity: 0;
  }

  100% {
    transform: rotate(0) scale(1);
    opacity: 1;
  }
}

@keyframes swirl-in-fwd {
  0% {
    transform: rotate(-540deg) scale(0);
    opacity: 0;
  }

  100% {
    transform: rotate(0) scale(1);
    opacity: 1;
  }
}


/* ======================================= */
/*      SLIDE-IN-RIGHT Combinations
/* ======================================= */
@-webkit-keyframes slide-in-right {
  0% {
    transform: translateX(1000px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    transform: translateX(1000px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}


.slide-in-right {
  -webkit-animation: slide-in-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
  animation: slide-in-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
}


.slide-in-right--logo {
  -webkit-animation: slide-in-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s both;
  animation: slide-in-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s both;
}

/******************************************/


.sir1 {
  -webkit-animation: slide-in-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
  animation: slide-in-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
}

.sir2 {
  -webkit-animation: slide-in-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both;
  animation: slide-in-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both;
}

.sir3 {
  -webkit-animation: slide-in-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s both;
  animation: slide-in-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s both;
}

.sir4 {
  -webkit-animation: slide-in-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
  animation: slide-in-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
}

/* ----------------------------------------
 * animation slide-in-right (Bullet point 1)
 * ----------------------------------------
 */
.slide-in-right1 {
  -webkit-animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
  animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
}

/* ----------------------------------------
 * animation slide-in-right (Bullet point 2)
 * ----------------------------------------
 */
.slide-in-right2 {
  -webkit-animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s both;
  animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s both;
}

/* ----------------------------------------
 * animation slide-in-right (Bullet point 3)
 * ----------------------------------------
 */
.slide-in-right3 {
  -webkit-animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.5s both;
  animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.5s both;
}


/***********************************************/
.fade-in {
  -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) 0.7s both;
  animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) 0.7s both;
}

/***********************************************/
.fade-in-1 {
  -webkit-animation: focus-in-expand 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s both;
  animation: focus-in-expand 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s both;
}

.fade-in-2 {
  -webkit-animation: focus-in-expand 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s both;
  animation: focus-in-expand 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s both;
}

.fade-in-3 {
  -webkit-animation: focus-in-expand 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s both;
  animation: focus-in-expand 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s both;
}

.fade-in-4 {
  -webkit-animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.5s both;
  animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.5s both;
}

.fade-in-fwd {
  -webkit-animation: fade-in-fwd 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in-fwd 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}


/* B A S E */
/* EMPTY STYLES */
.card {
  font-family: "Source Sans Pro", "Roboto", Arial, sans-serif;
}

.list-group-item {
  font-family: "Source Sans Pro", "Roboto", Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  background-color: #09091b !important;
}

#root {
  height: calc(100% - 92px);
}

#root::-webkit-scrollbar {
  width: 0;
}

.header {
  position: absolute;
  min-height: 50px;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
}

.footer {
  position: absolute;
  background-color: #333335;
  min-height: 30px;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 0;
}

#header__desktop {
  display: none;
}

.nav-b {
  flex-grow: 1;
  /* border-top: 2px solid #212529; */
}

.mobile-nav__button {
  padding-top: 0 !important;
}

.mobile-nav__button>svg {
  padding-top: 18px !important;
}

.mobile-nav__button>span {
  color: #cbcbcf;
}

.mobile-nav__button>svg {
  color: #cbcbcf;
}

/*#mobile__fav-count-badge {
  margin-top: 31px;
  margin-left: -40px;
  background-color: transparent;
  color: hsl(240, 88%, 65%);
  z-index: 999999;
}*/

#mobile__fav-count-badge {
  margin-top: 18px;
  margin-left: -26px;

  background-color: #F04C57;
}

#name__311>svg>path {
  fill: hsl(240deg, 88%, 65%);
}

#name__311>span {
  color: hsl(240deg, 88%, 65%);
  font-weight: 700;
}

#name__311>svg {
  border-top: 3px solid hsl(240, 88%, 65%);
}

.no-favorites {
  width: 100%;
  height: 75vh;
  display: flex;
  flex-direction: column;
  margin: auto 0;
  justify-content: center;
  align-items: center;
  padding: 0 36px;
}

.no-favorites__header {
  color: #ddd;
  font-weight: 800;
  font-size: 24px;
  line-height: 36px;
  margin-bottom: 16px;
  text-align: center;
}

.no-favorites__text {
  color: #f5f5f5;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  opacity: 0.75;
  text-align: center;
  padding: 0 48px;
}

.nav-badges {
  display: none;
}

.phx311__text {
  font-family: "Montserrat", sans-serif;
}

.fav-list-item>iwantto--icon {
  border: 2px solid #cc9900;
}

.nav-tabs.iwantto {
  border-bottom: 1px solid #E6AC00 !important;
}

.nav-tabs.tellthecityabout {
  border-bottom: 1px solid #377AA4 !important;
}

.nav-tabs.newsandotherinfo {
  border-bottom: 1px solid #8488AE !important;
}

.nav-tabs.more {
  border-bottom: 1px solid #AD2574 !important;
}

/* MOBILE MENU PAGE */
/* ********************** */
.no-scrollbar {
  scrollbar-width: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.dropdown-item:focus,
.dropdown-item:hover {
  background-color: initial !important;
}

.contact-us__link {
  color: 2px solid #61BAFF !important;
  border-bottom: 2px solid #171717;
}

.covid-info__link {
  color: 2px solid #61BAFF !important;
  border-bottom: 2px solid #171717;
}

.contact-us__link:hover {
  border-bottom: 2px solid #61BAFF !important;
}

.covid-info__link:hover {
  border-bottom: 2px solid #61BAFF !important;
}

/* ======================================= */
/*          UTILS / HELPERS
/* ======================================= */
.pointer {
  cursor: pointer !important;
}

.seperator {
  margin: 0 8px;
}

.span-spacer-8 {
  width: 4px;
}

.mobile-spacer--16 {
  height: 16px;
}

.mobile-spacer--100 {
  height: 100px;
}

@media (min-width: 992px) {
  .mobile-spacer--16 {
    display: none;
  }

  .mobile-spacer--100 {
    display: none;
  }
}

/* Bootstrap 5 tooltip */
/* Use a variable */
/* Reset defaults */
/* ======================================= */
/*         ANCHOR TAG
/* ======================================= */
a,
a:hover,
a:focus,
a:active {
  text-decoration: none !important;
  color: inherit !important;
}

/* ======================================= */
/*         BS5 TABS
/* ======================================= */
.nav-tabs {
  border-bottom: initial !important;
}

.tab-content {
  background: initial !important;
  height: 100% !important;
}

.tab-pane {
  color: #333335 !important;
}

.nav-link {
  padding: initial !important;
  color: initial !important;
  font-weight: 700 !important;
  color: rgb(113, 119, 144) !important;
}

.nav-link:hover {
  color: initial !important;
  color: rgb(170, 174, 188) !important;
}

.nav-tabs .nav-link {
  margin-bottom: initial !important;
  background: initial !important;
  border: initial !important;
  border-top-left-radius: initial !important;
  border-top-right-radius: initial !important;
  padding-bottom: initial !important;
}

.nav-tabs .nav-link.active {
  color: initial !important;
  background: initial !important;
  /* border-color: initial !important; */
  color: #fafafa !important;
}

/* ======================================= */
/*             FORM TAG
/* ======================================= */
.form-control:focus {
  box-shadow: none;
  border: none;
}

/* ======================================= */
/*           UNORDERED LISTS
/* ======================================= */
ul {
  list-style-type: none;
}

ul {
  padding-left: 0;
}

/* ======================================= */
/*           BS5 BUTTONS
/* ======================================= */
.btn-check:focus+.btn-outline-light,
.btn-outline-light:focus {
  box-shadow: none;
}

.btn-check:active+.btn-outline-light:focus,
.btn-check:checked+.btn-outline-light:focus,
.btn-outline-light.active:focus,
.btn-outline-light.dropdown-toggle.show:focus,
.btn-outline-light:active:focus {
  box-shadow: none;
}

/* C O M P O N E N T S */
/* ======================================= */
/*       USER SIGNIN BUTTON  
/* ======================================= */
.user-signin__guest:hover {
  color: #E6AC00 !important;
}

.user-signin__guest:active,
.user-signin__guest:focus {
  outline: none !important;
  color: #E6AC00 !important;
  box-shadow: none !important;
}

.user-signin__signed-in:hover,
.user-signin__signed-in:active,
.user-signin__signed-in:focus {
  outline: none !important;
  color: #f7f7f7 !important;
  box-shadow: none !important;
}

/* ======================================= */
/*     PORTAL VIRTUAL ASSISTANT BUTTON 
/* ======================================= */
#portal-va__button {
  text-align: left;
  position: fixed !important;
  min-height: 42px;
  min-width: 32px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0;
  overflow: hidden;
  padding-left: 46px !important;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 16px;
  border-radius: 5px 0 0 5px;
  border: 1px solid lightgray;
  font-weight: 400;
  cursor: pointer;
  z-index: 999;
}

/* #portal-va__button:active {
  border-bottom: 3px solid #6c757d;
  transform: translateY(2px);
} */

.alert-div__bg::before {
  content: " ";
  display: block;
  position: absolute;
  opacity: 0.25;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-image: url("https://assets.codepen.io/3332731/myphx311-bird.svg");
  background-repeat: no-repeat;
  background-position: -5% 50%;
  /* -ms-background-size: cover; */
  background-size: 52px 52px;
}

@media (max-width: 992px) {

  .action__alert {
    width: 100%;
    left: 0 !important;
    top: 0 !important;

  }
}

/* .alert-div {
  font-weight: 700;
} */


#portal-va__button:before {
  content: " ";
  display: block;
  position: absolute;
  opacity: 0.75;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-image: url("https://assets.codepen.io/3332731/myphx311-bird.svg");
  background-repeat: no-repeat;
  background-position: -10% 50%;
  /* -ms-background-size: cover; */
  background-size: 52px 52px;
}

@media only screen and (max-width: 1650px) {
  .va-btn__contents {
    display: none !important;
  }

  #portal-va__button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
    border-color: #FEF1F2;
    border-width: 1px;
  }

  #portal-va__button:before {
    /* background-color: #DFDFE2; */
    background-position: 50% 50%;
    background-size: 34px 34px;
  }
}

/* ======================================= */
/*   FAVORITES DROPDOWN MENU BUTTON 
/* ======================================= */
.del-fav:hover {
  background: #F2636D !important;
}



.share-widget__list-item:hover {
  background: #F2636D !important;
}

.btn-check:active+.btn-secondary:focus,
.btn-check:checked+.btn-secondary:focus,
.btn-secondary.active:focus,
.btn-secondary:active:focus,
.show>.btn-secondary.dropdown-toggle:focus {
  box-shadow: none !important;
}

.btn-check:focus+.btn-secondary,
.btn-secondary:focus {
  box-shadow: none !important;
}

.btn-check:focus+.btn,
.btn:focus {
  box-shadow: none !important;
}

/* ======================================= */
/*         MOBILE SPECIFIC STYLES
/* ======================================= */
@media (max-width: 992px) {
  html {
    height: 100%;
  }

  html body {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  html body .container-fluid.body-content {
    position: absolute;
    padding: 0;
    top: 89px;
    bottom: 60px;
    right: 0;
    left: 0;
    overflow-y: auto;
    width: 100%;
  }
}

@media (min-width: 992px) {
  #header__desktop {
    display: flex;
    z-index: 99 !important;

    -webkit-animation: slide-in-top 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-top 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }

  #header__mobile {
    display: none;
  }

  #footer__mobile {
    display: none;
  }

  .publicdisclosure{
    color:white;
    font-weight:700;
  }
  
  .section {
    padding-bottom: 0px !important;
  }

  .dropdown-item:hover {
    padding: .25rem 1rem !important;
  }
  
}

.header__mobile-logo {
  display: flex;
}

#header__mobile {
  height: 96px;
}

#footer__mobile {
  width: 100%;
}

#m_311_favs {
  display: none;
}

#m_311_menu {
  display: none;
}

#m_311_chat {
  display: none;
}

#m_311_settings {
  display: none;
}

@media (max-width: 992px) {
  #root {
    border-top: 1px solid hsl(240deg, 88%, 65%);
  }
}

@media (min-width: 992px) {
  #m_311_main {
    display: block !important;
  }

  #m_311_favs {
    display: none !important;
  }

  #m_311_menu {
    display: none !important;
  }

  #m_311_chat {
    display: none !important;
  }

  #m_311_settings {
    display: none !important;
  }
}

/* ======================================= */
/*         MOBILE SPECIFIC  PAGES
/* ======================================= */
.section {
  height: 100%;
}

.section__favorites {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.section__content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}

.section__311 {
  /*  
  -webkit-animation: slide-in-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
  animation: slide-in-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
  */
}


@media (min-width: 992px) {
  .section__311--top {
    display: block;
  }

  .section__311 {
    display: block;
    /*
    -webkit-animation: slide-in-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    */
  }

  .section__favorites {
    display: none !important;
  }

  .section__menu {
    display: none !important;
  }

  .section__chat {
    display: none !important;
  }

  .section__settings {
    display: none !important;
  }
}

#footer__mobile-list {
  display: flex;
  justify-content: evenly;
  padding: 0;
}

@media (min-width: 992px) {
  #root {
    position: relative;
    top: 70px;
    min-height: 94vh;
  }
}

.card {
  border-radius: initial !important;
  gap: 36px !important;
  border-top: 4px solid #455781 !important;
  border-left: 2px solid #455781 !important;
  border-right: 2px solid #455781 !important;
  background-color: #161627 !important;
}

.card__main {
  background-color: #161627 !important;
}

.card__title {
  color: #fafafa !important;
}

.card__blurb {
  color: #cbcbcf !important;
}

.card {
  background-color: #161627 !important;
}

.card__blurb {
  /*font-size: 16px;
  line-height: 20px;*/
  font-weight: 500;
}

.card__footer {
  background-color: #455781 !important;
}

.card-btn__favorites {
  border: 1px solid #455781 !important;
  padding: 5px 5px !important;
  background: lightblue;
  border-radius: 50% !important;
  position: relative !important;
  top: -15px;
}

#category-total {
  line-height: 24px;
  display: flex;
  justify-content: start;
  padding: 16px 24px 16px 16px;
}

@media (max-width: 450px) {
  #category-total{
    display: block;
  }
  #sortOrderSwitchButtonContainer{
    margin-left:0px !important;
    float: left !important;
  }
}

.card-option__button{
  font-size:13px;
  color:#fafafa;
}

.card-option__button.guest{
  font-weight: 400;
}

.card-option__button.signin {
  font-weight: 600;
}

.card-option__button.view{
  font-weight:700;
}

.card-option__button:hover {
  text-decoration: underline;
}

@media only screen and (min-width: 992px) {
  .category__button {
    margin-left: 4px;
    margin-right: 4px;
  }
}

.card__title {
  font-size: 16px;
  font-weight: 600;
}

@media only screen and (max-width: 490px) {
  .card__title {
    font-size: 16px;
    font-weight: 600;
  }

  .card__blurb {
    font-size: 14px;
    font-weight: 500;
  }
}

/* Cards button row */
.card-btns__wrapper {
  display: flex !important;
}

.card-btn {
  display: flex;
  align-items: center;
  padding: 2px 4px;
  border-radius: 3px;
}

@media only screen and (min-width: 320px) {
  .card {
    width: 100% !important;
  }

  .category__button {
    width: 46%;
    margin: 2px;
  }
}

@media only screen and (min-width: 576px) {
  .category__button {
    max-width: 46%;
    display: flex;
    margin: 8px;
  }

  .card {
    width: 100% !important;
  }
}

@media only screen and (min-width: 768px) {
  .card {
    max-width: 48% !important;
  }
}

@media only screen and (min-width: 992px) {
  .category__button {
    max-width: 24.3%;
    margin: 2px;
  }

  .card {
    max-width: 48% !important;
  }
}

@media only screen and (min-width: 1200px) {
  .card {
    max-width: 32% !important;
  }
}

@media only screen and (min-width: 1400px) {
  .card {
    max-width: 24.3% !important;
  }
}

@media (min-width: 992px) {
  .nav-tabs #nav-iwantto-tab::after {
    content: "|" !important;
    color: #777 !important;
    padding: 0 24px !important;
  }

  .nav-tabs #nav-tellthecityabout-tab::after {
    content: "|" !important;
    color: #777 !important;
    padding: 0 24px !important;
  }

  .nav-tabs #nav-newsandotherinfo-tab::after {
    content: "|" !important;
    color: #777 !important;
    padding: 0 24px !important;
  }
}

.phx311-request-title,
.phx311-report-title,
.phx311-information-title {
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 600;
}

.phx311__title-divider {
  font-weight: 1000;
  color: #dfdfe2;
  margin: 0 8px;
  position: relative;
  bottom: 2px;
}

.phx311-request-title {
  color: #FAFAFA;
  font-family: "Montserrat", sans-serif;
}

.phx311-report-title {
  color: #FAFAFA;
  font-family: "Montserrat", sans-serif;
}

.phx311-information-title {
  color: #FAFAFA;
  font-family: "Montserrat", sans-serif;
}

.diamond {
  color: #982068;
  position: relative;
}

.request-report-container {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  left: 6rem;
  bottom: 3rem;
}

.title-logo-container {
  display: flex;
  flex-direction: column;
}

.myphx-logo__bird--hero {
  height: 104px !important;
  margin-right: 8px;
}

.myphx-logo__wrapper {
  margin-left: 8px;
}

.myphx-logo--hero {
  display: flex;
  font-family: "Montserrat", sans-serif;
  padding: "0 0 4px 0";
  align-items: center;
}

.myphx-logo--hero .myphx-logo__my--hero {
  position: relative;
  top: 5px;
  font-family: "Montserrat", sans-serif;
  color: #739bb4;
  font-weight: 600;
  font-size: 60px;
}

.myphx-logo--hero .myphx-logo__phx--hero {
  color: white;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 72px;
  color: #982068;
}

.myphx-logo--hero .myphx-logo__311--hero {
  font-family: "Montserrat", sans-serif;
  color: #757aa4;
  font-size: 72px;
  font-weight: 800;
}

.fav-list-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 4px 0;
  display: flex !important;
}

.fav-list-item__image {
  height: 45px;
  width: 45px;
  padding: 4px;
  margin-right: 0.5rem;
  border-radius: 8px;
}

.fav-list-item__name {
  margin-right: 1.5rem;
  cursor: pointer;
  color: #fafafa;
  font-weight:600;
}

.fav-list-item__blurb{
  color:#fafafa;
  font-weight:400;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.my-del-btn {
  font-weight: 500;
}

.del-btn-dropdown {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.dropdown-item:focus,
.dropdown-item:hover {
  background-color: initial !important;
}

.fav-list-item__options--icon {
  margin-right: 0.5rem;
}

.favorites-count {
  background: #982068;
  position: relative;
  top: -15px;
  left: -15px;
}

.alert-parent {
  border-bottom: 1px solid white;
  padding: 0;
  margin: 0;
}

.alert-before {
  background-color: white !important;
  align-self: start;
  position: relative;
  top: 1.5rem;
  right: 2rem;
  color: #cc9900;
}

.fav-list-item:hover {
  background-color: hsl(240deg, 88%, 65%) !important;
}

.rec-list-item:hover {
  background-color: hsl(240deg, 88%, 65%) !important;
}

.myphx311-my--favorites {
  font-family: "Montserrat", sans-serif;
  color: #739bb4;
  font-weight: 600;
  font-size: 2.8rem;
  position: relative;
}

.myphx311-phx--favorites {
  color: white;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: #982068;
}

.myphx311-311--favorites {
  font-family: "Montserrat", sans-serif;
  color: #757aa4;
  font-weight: 800;
}

.myphx311-end--favorites {
  font-family: "Montserrat", sans-serif;
  color: #cc9900;
  font-weight: 500;
}

.oc-myfavorites-title {
  font-family: "Montserrat", sans-serif;
}

@media only screen and (max-width: 600px) {
  .stripes-container {
    display: flex;
    align-items: center;
  }

  .myphx311-my--favorites {
    font-size: 1.75rem;
    position: relative;
    top: 0.25rem;
  }

  .myphx311-phx--favorites {
    font-size: 2rem;
  }

  .myphx311-311--favorites {
    font-size: 2rem;
  }

  .myphx311-end--favorites {
    font-size: 1.75rem;
    display: block;
  }
}

@media only screen and (max-width: 430px) {
  .myphx311-my--favorites {
    display: none;
  }

  .myphx311-phx--favorites {
    display: none;
  }

  .myphx311-311--favorites {
    display: none;
  }

  .myphx311-end--favorites {
    font-size: 3rem;
  }

  .oc-myfavorites-title {
    margin-left: -4.3rem;
  }
}

/* ======================================= */
/*             STRIPES                     */
/* ======================================= */
.stripes-city-bird {
  position: relative;
  color: rgba(255, 255, 255, 0.5);
  right: 42px;
}

.stripes-city-bird:hover {
  opacity: 0.6;
  color: #982068;
  transition: color 0.1s linear;
}

.stripe-wrapper {
  overflow: hidden;
  display: inline-flex;
}

.stripe-wrapper .stripes-container {
  display: inline-flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding-left: 24px;
}

.stripe-wrapper .stripes-container .stripe {
  height: 30px;
  width: 15px;
  /* Spacing */
  margin-right: 0.15rem;
  /* Skew */
  transform: skew(-20deg);
}

.stripe-wrapper .stripes-container .stripe1 {
  background: #739bb4;
}

.stripe-wrapper .stripes-container .stripe2 {
  background: #757aa4;
}

.stripe-wrapper .stripes-container .stripe3 {
  background: #cc9900;
}

.stripe-wrapper .primary-stripe {
  height: 60px;
  flex: 1;
  background: #982068;
  display: inline-flex;
  transform: skew(-20deg);
  position: relative;
  left: -5rem;
  margin-left: 1.3rem;
}

.recent {
  display: flex !important;
  margin-bottom: 8px;
  border-radius: 5px;
  cursor: pointer;
}

.recent__col-img {
  height: 50px;
  padding: 4px;
  border-radius: 5px;
}

.recent__col-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 16px;
}

.recent__col-left>img {
  height: 35px;
}

.recent__col-center {
  display: flex;
  flex-direction: column;
  max-width: 80%;
}

@media (max-width: 992px) {
  .recent__col-center {
    max-width: 70%;
  }
}

.recent__name {
  font-size: 16px;
  line-height: 16px;
  font-weight: 600;
  padding-bottom: 4px;
}

.recent__blurb {
  font-size: 13px;
  line-height: 14px;
  font-weight: 500;
  padding-bottom: 4px;
  padding-left: 4px;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent__timestamp {
  font-size: 10px;
  line-height: 10px;
  font-weight: 500;
  padding-bottom: 4px;
  padding-left: 4px;
}

.recent__col-right {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* ======================================= */
/*             CARD ICONS
/* ======================================= */
.fav-star {
  background-color: #455781;
  border: 3px solid #161627;
  padding: 5px;
  border-radius: 50%;
  bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 8;
}

.save-fav {
  cursor: pointer;
}

.fav-star--unsaved {
  stroke: #cbcbcf;
  stroke-width: 60px;
  stroke-opacity: 1;
  fill: transparent;
}

.fav-star--saved {
  stroke-width: 0;
  stroke-opacity: 0;
  fill: #ffd966;
  fill-opacity: 1;
}

/* Share button on mobile */
.share-widget--cards {
  background-color: #455781;
  border: 3px solid #161627;
  padding: 5px;
  border-radius: 50%;
  bottom: 20px;
  left: 84px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.share-widget--cards>svg>path {
  fill: #cbcbcf;
}

/* ======================================= */
/*             SVG ICONS
/* ======================================= */
.svg__wrap {
  display: flex;
  padding: 1px;
  /*border-radius: 50%;  */
  border-radius: 5%;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 3px solid lightgray;
}

.svg__wrap>svg>path {
  fill: #fafafa;
  fill-opacity: 1;
  stroke: black;
  stroke-opacity: 1;
  stroke-width: 3px;
}

.svg__wrap>svg>g>g>path {
  fill: #fafafa;
  fill-opacity: 1;
  stroke: black;
  stroke-opacity: 1;
  stroke-width: 3px;
}

svg._311svg {
  height: 40px;
  width: 40px;
  padding: 5px;
  background: transparent;
}

/* ======================================= */
/*             I WANT TO
/* ======================================= */
.svg__wrap.iwantto {
  background-color: #cc9900;
}

/* ======================================= */
/*          TELL THE CITY ABOUT
/* ======================================= */
.svg__wrap.tellthecityabout {
  background-color: #739bb4;
}

/* ======================================= */
/*             NEWS & OTHER INFO
/* ======================================= */
.svg__wrap.newsandotherinfo {
  background-color: #757aa4;
}

/* ======================================= */
/*             MORE
/* ======================================= */
.svg__wrap.more {
  background-color: #982068;
}

/* ======================================= */
/*         FONT AWESOME ICONS
/* ======================================= */
.icon-arrow {
  --fa-primary-color: gray;
  --fa-primary-opacity: 0.5;
  --fa-secondary-opacity: 0.5;
  --fa-secondary-color: $bs-bgd;
}

.icon-arrow:hover {
  --fa-primary-color: #fff;
  --fa-primary-opacity: 1;
  --fa-secondary-color: $bs-bgd;
  --fa-secondary-opacity: 1;
}

.icon-theme {
  --fa-primary-color: #333335;
  --fa-primary-opacity: 0.5;
  --fa-secondary-color: black;
  --fa-secondary-opacity: 0.5;
}

.icon-theme:hover {
  --fa-primary-color: #cc9900;
  --fa-primary-opacity: 1;
  --fa-secondary-color: #982068;
  --fa-secondary-opacity: 1;
}

/* ======================================= */
/*         VIRTUAL ASSISTANT
/* ======================================= */
#smallbotcontainer {
  height: calc(100vh - 160px);
}

.phx311__bot-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.main {
  margin: 18px;
  border-radius: 4px;
}

div[role=form] {
  /*background-color: #8c214a;*/
  color: black;
}

.header-bg {
  font-family: "Montserrat", sans-serif !important;
  display: flex;
  align-items: center;
  height: 52px;
  position: relative;
}

#webchat {
  /*position: relative;
  overflow: hidden;*/
  top: 5px;
  width: 100%;
  height: 88%;
  border-bottom: 1px solid lightgray;
}

.offcanvas-header {
  padding-top: 0;
  padding-bottom: 0;
}

.btn__control-wrapper {
  display: flex;
  margin-left: auto;
}

.btn__control-wrapper>div {
  margin: 0 36px 0 0;
  font-size: 36px;
}

.btn__control {
  color: white;
  cursor: pointer;
}

.offcanvas.show {
  width: 500px;
}

/* ======================================= */
/*          PORTAL OFFCANVAS
/* ======================================= */
.offcanvas {
  background-color: #171717 !important;
  font-family: "Montserrat", sans-serif !important;
  z-index: 999999;
}

.offcanvas-top {
  height: 40vh;
}

.offcanvas-body:before {
  background-image: url("https://assets.codepen.io/3332731/myphx311-bird.svg") !important;
  background-repeat: no-repeat !important;
  background-size: 200px 200px !important;
}

.offcanvas-title {
  line-height: 1;
}

@media only screen and (max-width: 600px) {
  .offcanvas-top {
    height: auto;
    max-height: auto;
  }
}

@media (max-width: 992px) {
  .offcanvas {
    display: none !important;
  }
}

/* ======================================= */
/*          OFFCANVAS SCROLL
/* ======================================= */
.offcanvas ::-webkit-scrollbar {
  width: 10px;
}

.offcanvas ::-webkit-scrollbar-track {
  background-color: #fff;
}

.offcanvas ::-webkit-scrollbar-thumb {
  background-color: #c7e7ff;
}

.offcanvas ::-webkit-scrollbar-thumb:hover {
  background-color: #61baff;
}

/* ======================================= */
/*       TRANSLATE WIDGET SELECT
/* ======================================= */

.goog-te-track ::-webkit-scrollbar {
  width: 10px;
}

.goog-te-track ::-webkit-scrollbar-track {
  background-color: #fff;
}

.goog-te-track ::-webkit-scrollbar-thumb {
  background-color: #c7e7ff;
}

.goog-te-track ::-webkit-scrollbar-thumb:hover {
  background-color: #61baff;
}

/* ======================================= */
/*          OFFCANVAS MENU
/* ======================================= */
.offcanvas__section-header {
  background-color: #202124 !important;
  color: #fafafa;
}

.offcanvas__section-header>span {
  font-weight: 500 !important;
  letter-spacing: 1px;
  font-family: "Source Sans Pro", "Roboto", Arial, sans-serif !important;
  font-size: 24px !important;
  line-height: 36px;
}

.offcanvas__section-paragraph {
  color: #cbcbcf;
  font-weight: 400;
  font-size: 16px;
  padding: 0 16px;
  font-family: "Source Sans Pro", "Roboto", Arial, sans-serif !important;
}

.portal__offcanvas-header {
  border-bottom: 1px solid #cbcbcf;
}

.portal__stripes-span {
  display: flex !important;
  align-items: center !important;
  margin-left: -18px !important;
}

.portal__header-text {
  background-color: #161627;
  color: #fafafa;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  margin-left: -24px;
}

/* ======================================= */
/*             PORTAL SEARCH
/* ======================================= */
/* clears the 'X' from Chrome */
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  display: none;
}

.desktop-search__input {
  box-shadow: inset 0 2px 2px hsla(0deg, 0%, 0%, 0.1) !important;
}

.desktop-search__input:focus-visible {
  outline: 1px solid hsl(240deg, 88%, 65%) !important;
}

.desktop-list-item-styles:hover {
  background-color: hsl(240deg, 88%, 65%) !important;
}

#desktop__search-wrapper {
  position: relative;
  width: 450px !important;
  margin: 0 0 0 80px;
}

.desktop-search__input {
  width: inherit;
  position: relative;
  background-color: #1a2744;
  color: #cbcbcf;
  border: none;
  border-radius: 5px;
  line-height: 32px;
  padding: 0 0 0 32px;
  background-image: url("https://assets.codepen.io/3332731/magnifying-glass.png");
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: 8px center;
  border: 1px solid #aaa;
  box-shadow: none;
  -webkit-appearance: none;
  text-transform: capitalize;
}

.desktop-search__input::before {
  width: 20px;
  content: "";
}

.desktop-search__suggestions {
  display: none;
  top: 38px;
  width: inherit;
  padding: 0;
  position: absolute;
  border: 2px solid #212529;
  border-radius: 5px !important;
  background-color: #090916;
}

.desktop-search__list-item {
  padding: 0 8px;
  text-transform: capitalize;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
}

.search-item__icon {
  margin-left: auto;
}

.desktop-search__list-item:hover {
  background-color: #5f259d !important;
  border-top: 1px solid light gray !important;
  border-bottom: 1px solid light gray !important;
}

.search__list-item:last-child {
  border-radius: 0 0 5px 5px !important;
}

/* ======================================= */
/*       SUGGESTIONS BY CATEGORY 
/* ======================================= */
.search-item__text.iwantto {
  border-left: 1px solid #cc9900 !important;
  padding-left: 16px;
  margin-left: -2px;
}

.search-item__text.tellthecityabout {
  border-left: 2px solid #739bb4 !important;
  padding-left: 16px;
  margin-left: -2px;
}

.search-item__text.newsandotherinfo {
  border-left: 2px solid #757aa4 !important;
  padding-left: 16px;
  margin-left: -2px;
}

.search-item__text.more {
  border-left: 2px solid #982068 !important;
  padding-left: 16px;
  margin-left: -2px;
}

/* ======================================= */
/*             MOBILE SEARCH
/* ======================================= */
.search-item__text {
  max-width: 90% !important;
}

.outer__search-div {
  position: fixed !important;
  /*z-index: 99999;*/
  padding: 8px 8px 8px 8px;
}

.search__container {
  width: inherit;
  position: relative;
}

.mobile-search__input {
  width: inherit;
  position: relative;
  background-color: #1a2744;
  color: #cbcbcf;
  border: none;
  border-radius: 5px;
  line-height: 32px;
  padding: 0 0 0 32px;
  background-image: url("https://assets.codepen.io/3332731/magnifying-glass.png");
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: 8px center;
  border: 1px solid #aaa;
  box-shadow: none;
  -webkit-appearance: none;
  text-transform: capitalize;
}

.mobile-search__input {
  box-shadow: inset 0 2px 2px hsla(0deg, 0%, 0%, 0.1) !important;
}

.mobile-search__input:focus-visible {
  outline: 1px solid hsl(240deg, 88%, 65%) !important;
}

@media (max-width: 992px) {
  #small-nav {
    scroll-behavior: smooth;
    background-color: #09091b;
  }

  #small-card-nav {
    overflow-x: auto !important;
    white-space: nowrap !important;
    margin-block: 0 !important;
  }

  #small-card-nav::-webkit-scrollbar {
    width: 0;
  }

  #small-card-nav>a {
    margin: 0 24px !important;
  }

  .mob--iwantto.active {
    border-bottom: 2px solid #cc9900 !important;
  }

  .mob--tellthecityabout.active {
    border-bottom: 2px solid #739bb4 !important;
  }

  .mob--newsandotherinfo.active {
    border-bottom: 2px solid #757aa4 !important;
  }

  .mob--more.active {
    border-bottom: 2px solid #982068 !important;
  }
}

.search__list {
  width: inherit;
  padding: 0;
  position: absolute;
  z-index: 9999;
}

.search__list-item {
  background-color: rgb(247, 247, 247);
  padding: 0 16px;
  border-right: 1px solid black;
  border-left: 1px solid black;
  text-transform: capitalize;
  cursor: pointer;
  display: flex;
}

.search-item__name {
  font-weight: 700;
  color: #212529;
  font-size: 16px;
}

.search-item__blurb {
  font-weight: 500;
  color: #333335;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 16px;
}

.hl {
  text-decoration: underline;
  -webkit-text-decoration-color: hsl(240deg, 88%, 65%);
  text-decoration-color: hsl(240deg, 88%, 65%);
  font-weight: 500;
}

.suggestions__total {
  margin-left: auto;
  font-weight: 900;
  letter-spacing: 1px;
  font-size: 12px;
  padding-right: 36px;
  text-align: right;
}

.mobile-search__list-item {
  background-color: rgb(247, 247, 247);
  padding: 0 8px;
  text-transform: capitalize;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  margin-bottom: 4px;
}

.mobile-search__list-item:hover {
  background-color: #f2f0eb;
  border-top: 1px solid light gray;
  border-bottom: 1px solid light gray;
}

.mobile-search__list-item:first-child {
  border-top: 2px solid hsl(240deg, 88%, 65%) !important;
}

.output__panel {
  display: none;
  background-color: #09091b;
  width: 100%;
  max-width: inherit;
  position: absolute;
  height: calc(100vh - 80px);
  z-index: 99999;
  top: 73px;
}

.output__panel--empty-state {
  z-index: 999999;
}

.span__back-arrow {
  cursor: pointer;
  display: none;
}

/*# sourceMappingURL=style.css.map */



/* ======================================= */
/*         User Login Dropdown
/* ======================================= */

.login-bar.dropdown.user-signin__signed-in, .mobile-login-bar.dropdown.user-signin__signed-in
{
  padding:10px;
}

.login-bar ul.dropdown-menu, .mobile-login-bar ul.dropdown-menu
{
  padding:10px;
  background-color:#212529;
  border:1px solid #6c757d;
}

.login-bar ul.dropdown-menu li a, .mobile-login-bar ul.dropdown-menu li a
{
  color: white !important;

}

.login-bar ul.dropdown-menu li.active a, .mobile-login-bar ul.dropdown-menu li.active a
  {
    border:0px;
    padding:0px;
    text-decoration: underline !important;
  
  }

/* ======================================= */
/*         Inputs
/* ======================================= */

.datetimepicker
{
  display: contents;
}

/* ======================================= */
/*         ESRI Map
/* ======================================= */
.esriSimpleSliderIncrementButton span, .esriSimpleSliderDecrementButton span
{
    color:black;
}

.esri-icon{
  color:black;
}

.map
{
    overflow: hidden !important;
    background-color: #f2f2ea !important;
}

/* ======================================= */
/*          Signature Controls             */
/* ======================================= */

canvas.drawCanvas{
  background-color: #e9ecef;
}

/* ======================================= */
/*         Progress Tabs/Forms
/* ======================================= */

html[dir=ltr] ol.progress.top li
{
    border-radius: 4px !important;
}

#denotes, #EntityFormView
{
  color:white !important;
}

.progress
{
    background:transparent !important;
    padding-top:20px !important;
    margin-bottom:20px !important;
    border-bottom:1px solid #e6ac00 !important;
    border-radius: 0 !important;
    font-weight: 700 !important;
}

.list-group{
  border-radius: 0 !important;
}

ol.progress.list-group.top{
    flex-direction:unset;
}

.desktop-search__suggestions.list-group
{    
  flex-direction:column!important;
}

.list-group-item
{
    width:100%;
    font-size: 1rem;
    background:transparent !important;
}

.list-group-item.active
{
    color:#fafafa;
    background:transparent !important;
    border-color:transparent !important;
}

.list-group-item-success span
{
    color: #6c757d !important;
}

.list-group-item.incomplete, .list-group-item.incomplete span
{
    color:rgb(113, 119, 144) !important
}

@media (max-width: 762px) {
    .list-group-item.incomplete
    {
        display: none;
    }
}

@media (max-width: 762px) {
    .list-group-item.active
    {
        text-align: center;
    }
}

#form-start.container
{
  margin-top:20px;
}

#form-start.container .h1,#form-start.container .h2,#form-start.container .h3,#form-start.container .h4,#form-start.container .h5,#form-start.container .h6,#form-start.container h1,#form-start.container h2,#form-start.container h3,#form-start.container h4,#form-start.container h5,#form-start.container h6
{
    color:#cbcbcf !important;
    margin-top:10px !important;
}

#form-start.container .crmEntityFormView .section-title
{
    color:#cbcbcf !important;
    margin-bottom:20px;
}

#form-start.container input[type=button],#form-start.container a[role=button]
{
    background-color: #455781 !important;
    border-color: #455781 !important;
    font-weight: 600 !important;
    color:#FAFAFA !important;
}

#form-start.container input[type=button]:hover,#form-start.container a[role=button]:hover
{
    background-color: #2a3a60 !important;
    border-color: #2a3a60 !important;
    color:#FAFAFA !important;
    font-weight: 600 !important;
}

#form-start.container .crmEntityFormView .actions>.col-sm-6
{
    float: right;
}

#form-start.container .crmEntityFormView .actions
{
    text-align: right;
    border:none;
    margin-bottom: 0 !important;
}

#form-start.container .crmEntityFormView .tab 
{
    border:3px solid #455781;
    padding:20px;
    background-color: #161627;
    border-radius: 7px;
}

#form-start.container .crmEntityFormView .tab-title
{
    border:none;
    margin:0;

}

#form-start.container html[dir=ltr] .crmEntityFormView .cell .field-label,#form-start.container .street-address-inputs .label
{
    color:white;
    font-weight: 600;
}

#form-start.container .crmEntityFormView .validation-summary h2
{
    color:black !important;
    font-style: italic !important;
}

#form-start.container fieldset[aria-label='Hidden Location'],#form-start.container fieldset[aria-label='Location Hidden'],#form-start.container fieldset[aria-label='Hide Location']
{
    display: none;
}

#form-start.container .alert-danger
{
    background-color:#f0b1b1;
    border-color:#f0b1b1;
    color:black !important;
}

#form-start.container .alert-warning
{
    background-color:#fff3cd !important;
    border-color:#ffecb5 !important;
    color:black !important;
}

#form-start.container .alert-danger a
{
    color:black !important;
}

#form-start.container html[dir=ltr] li a:hover,#form-start.container a:hover
{
    text-decoration: underline !important;
}

#form-start.container a[role=button]:hover
{
    text-decoration: none !important;
}

#form-start.container a[role=button]:hover
{
    text-decoration: none !important;
}

#form-start.container .grid-actions
{
    border-bottom-color: #455781;
}

#form-start.container .pull-right
{
    float:right;
}

#form-start.container .sharepoint-loading.message.text-center
{
    color:white !important;
}

#form-start.container #street-address-btn,#form-start.container #intersection-btn,#form-start.container #apn-btn,#form-start.container #geoTab
{
    color:white !important;
}

#form-start.container #street-address-btn.active,#form-start.container #intersection-btn.active,#form-start.container #apn-btn.active,#form-start.container #geoTab.active
{
    border-bottom: 1px solid #e6ac00 !important;
    border-radius: 0 !important;
}

#form-start.container #street-address-btn:hover,#form-start.container #intersection-btn:hover,#form-start.container #apn-btn:hover,#form-start.container #geoTab:hover
{
    color:#e6ac00 !important;
}

#form-start.container .intersection-inputs,#form-start.container .street-address-inputs,#form-start.container .apn-inputs
{
    margin-left:48px;
}
/*
#form-start.container div[data-name=casenumber],#form-start.container div[data-name=srnumber],#form-start.container div[data-name=success]
{
    border:none !important;
    padding:0 !important;
    background:none !important;
    border-radius: 0 !important;
}
*/
#form-start.container .modal-dialog
{
    border: 2px solid #e6ac00 !important;
    border-radius: 8px !important;
}

#form-start.container .modal-header,#form-start.container .modal-footer
{
    background-color:#161627 !important;
    color: white !important;
}

#form-start.container .modal-header
{
    border-bottom-color:#e6ac00 !important;
}

#form-start.container .modal-footer
{
    border-top-color:#e6ac00 !important;
}

#form-start.container .radio input
{
    margin-right:15px;
}

.control {
  color:white;
}
/* ======================================= */
/*             Profile
/* ======================================= */

.weblinks.list-group
{
  flex-direction: column !important;
  background:#455781;
  border-radius: 7px!important;
}

.weblinks.list-group a.list-group-item:hover
{
  color:black !important;
  background-color: lightgray !important;
}

.weblinks.list-group a.list-group-item:hover span
{
  color:black !important;

}

.success-page-link{
  border-bottom:4px solid #455781!important;
  margin-right:10px;
}

.success-page-link__info{
  padding:5px;
  flex: grow 8;max-width:280px;
}

/* ======================================= */
/*         Settings
/* ======================================= */

.hidden
{
  display: none !important;
}

/* ======================================= */
/*        Form Read Only Fields
/* ======================================= */

.crmEntityFormView .form-control.readonly
{
  border: .1em solid !important;
  padding-left: .5em;
}