@charset "utf-8";

@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');

:root {
  /*=============================================================

                            C O L O R S

=============================================================*/
  --lightest: #ffffff;
  --gray-off-white: #f2f2f2;
  --gray-lt: #bbb;
  --gray-med: #777;
  --gray-dark: #333;
  --darkest: #000000;
  --admin: #B32DEB;
  --admin-lt: #D18EEE;
  --admin-med: #8320AC;
  --admin-dark: #651587;
  --business: #01DE9A;
  --business-lt: #A8E6D3;
  --business-med: #01A875;
  --business-dark: #01704E;
  --government: #00c1f0;
  --government-lt: #80e6FF;
  --government-med: #009ABF;
  --government-dark: #006780;
  --government-darkest: #1D3749;
  --government-highlight: rgba(0, 193, 240, .12);
  --resident: #E44A05;
  --resident-lt: #FFA780;
  --resident-med: #A83704;
  --resident-dark: #702402;
  --visitor: #EEB600;
  --visitor-lt: #FFE180;
  --visitor-med: #BF9200;
  --visitor-dark: #755A00;
  --go: #01DE26;
  --stop: #E40505;
  /*=============================================================

                H I G H L I G H T S  &   S H A D O W S 

=============================================================*/

  --shadow: rgba(35, 35, 35, .36);
  --shadow-lt: rgba(35, 35, 35, .18);
  --highlight: rgba(255, 255, 255, .89);
  --float: -1rem 1rem 1rem 0px var(--shadow);
  --float-close: 0 0 .25rem 0px var(--shadow);
  --dropshadow-sm: 0 1px 3px 0px var(--shadow-lt);
  --concave-sm: inset 0px 2px 2px var(--shadow), inset 0px -2px 2px var(--highlight);
  --convex-sm: inset 0px -2px 2px var(--shadow), inset 0px 2px 2px var(--highlight);
  /*=============================================================

                        S H A P E S

=============================================================*/

  --circle: 1000px;
  --arrow: polygon(0 0, 80% 0, 80% 15%, 25% 15%, 100% 90%, 90% 100%, 15% 25%, 15% 80%, 0 80%);
  --plus: polygon( 40% 0, 60% 0, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0 60%, 0 40%, 40% 40% );
  --x-mark: polygon( 45% 0, 55% 0, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0 55%, 0 45%, 45% 45% );
  --checkmark: polygon(0 25%, 10% 25%, 10% 65%, 100% 65%, 100% 75%, 0 75%);
  --triangle: polygon(100% 0%, 0% 0%, 50% 100%);
  --caret: polygon( 100% 25%, 85% 25%, 50% 65%, 15% 25%, 0% 25%, 50% 85%, 100% 25% );
  /*=============================================================

                 M E A S U R E M E N T S

=============================================================*/
  --vertical-center: calc((var(--height-of-container) - var(--height-of-object))/2); /* solved for relationship changed */
  --max-web: 1280px;
}


body, body * {
  font-family: 'Poppins', Arial, sans-serif;
  box-sizing: border-box;
}

header,
header *,
#menu,
#menu * {
  display: flex;
}

a:visited {
  color: purple;
}

/*=================================================
  H E A D E R
===================================================*/
header {
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 3rem;
  background: white;
  justify-content: space-between;
  color: #333;
}

header * {
    align-items: center;
  }

.logo {
   height: 100%;
   align-items: center;
   width: 48px;
}

.logo img {
  padding: .5rem;
  height:100%;
}


header h1 {
  font-size: 1.3em;
  font-weight: 400;
  margin: 0;
  padding: 0;
  width: fit-content;
}

header h1 span {
  margin-right: .25rem;
  width: fit-content;
}

header h1 strong {
  width: fit-content;
  white-space: nowrap;
}

header a {
  color: #333;
  text-decoration: none;
  align-items: center;
  justify-content: center;

}

header nav a {
  padding: .5rem;
}


header .hamburger {
  height: 44px;
  width: 44px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 1000px;
  
  &:focus {
    outline: 1px dotted #333;
  }

  &:hover {
    background: var(--blue-4);
    color: white;
  }
}

header .nav {
  display: none;
  flex-direction: column;
  right: 0;
  width: 250px;
  position: absolute;
  top: 100%;
  background: white;
  user-select: none;

  & > * {
    border-top: 1px solid #bbbbbb; 

  }

  & *:not(svg) {
  padding:.5rem 1rem;
  background: #f2f2f2;
  width: 100%;
  justify-content: start;
  column-gap: 1rem;
 }

 & svg {
   height: 18px;
   width: 18px;
   stroke-width: 1.5;
 }
& button {
  border: none;
  width: 100%;
  cursor: pointer;
  color: #333;
}
 & button:hover, a:hover {
   background: var(--blue-4);
   color: white;
 }

 & *:focus{
   outline: 1px dotted #333;
 }
}

header .nav.active {
  display: flex;
}

.initials {
  height: 44px;
  width: 44px;
  background: #f2f2f2;
  border-radius: 1000px;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  &:hover {
    color: white;
    background: var(--blue-4);
 }
}

header .nav .user {
  flex-direction: column;
  background-color: white;
  padding: .5rem;
  font-weight: 500;
  margin: .25rem;
}

/*=================================================
 T A B
===================================================*/
.tab li svg {
  width: 100%;
}

#menu {
  position: fixed;
  z-index: 2;
  top: 3rem;
  left: 0;
  width: 3rem;
  height: calc(100vh - 3rem);
  background: white;
  display: flex;
  padding: 0;
}
  #menu ul {
    list-style: none;
    padding: 0;
    flex-direction: column;
    width: 100%;
    margin: 0;
  }
    #menu ul li {
      cursor: pointer;
      width: 100%;
    }

#menu ul li a {
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding:.5rem;
}
#menu ul :is(li.active, li:hover ){
    background:rgba(235, 235, 235, 0.90);
    transition: .3s;
}
#menu ul li svg  {
   stroke: #333;
}

#menu ul li.disabled {
	background: white !important;
	cursor: not-allowed !important;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0;
}

#menu ul li.disabled:hover {
  background: white !important;
	cursor: not-allowed !important;
}

#menu ul li.disabled svg {
	stroke: #f2f2f2;
}

#menu ul li.active svg {
  stroke: var(--government-med);
}

#appcontainer {
  min-width: 800px;
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: url('../images/bgpattern.jpg');
  color: #333;
}

#sidebar {
    position: fixed;
    z-index: 2;
    top: 3rem;
    left: 3rem;
    height: calc(100dvh - 3rem);
    background: rgba(245,245,245, .90);
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
	  -webkit-overflow-scrolling:touch;
    width: 400px;
}
.fadeOut {
    transition: .3s;
    opacity: 0;
}

#sidebar, #sidebar section {
    transition: .3s opacity;
}

  #sidebar section h3 {
    font-size: 1rem;
    font-weight: 300;
    text-transform: uppercase;
    text-align: right;
    color: var(--lightest);
    margin: 0;
    padding: 1rem;
    /* padding-right: 4rem; */
    position: relative;
    background: var(--government-med);
    /* border-top: 2px solid; */
    box-sizing: border-box;
    letter-spacing: .2rem;
    text-shadow: 1px 1px 3px rgba(35,35,35, .35)
  }

#sidebar section h3::before {
  content: "";
  height: 100%;
  width: 4rem;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--government-highlight);
  clip-path: polygon(0 0, 100% 0, 0 100% );
  box-shadow: 5px 0px 0px var(--gray-lt);
  z-index: 1;
}

#sidebar section h3::after {
  content: "";
  height: 100%;
  width: 5rem;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--lightest);
  clip-path: polygon(0 0, 100% 0, 1rem 100%, 0 100% );
}

#sidebar section h4 {
  padding: 0.3em 1em;
  font-size: .75em;
  background: var(--gray-dark);
  text-transform: uppercase;
  margin: 0;
  font-weight: 400;
  color: var(--gray-off-white);
}
#sidebar section div.container {
    padding:1em;
    font-size:.85em;
    position: relative;
}
#sidebar section div.container-scroll {
    padding:1em;
    font-size:.85em;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 600px;
}
#sidebar section > div.no-padding {
    /*padding top and bottom but not left and right*/
    padding:1em 0;
}
#map {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100dvh;
}

#map_zoom_slider {
	top:auto;
	left:auto;
	bottom:50px;
	right:20px;
}
.top-buffer {
    margin-top: 1em;
}
.bottom-buffer {
    margin-bottom: 1em;
}

#sidebar select {
  height: 40px;
  border-radius: 0;
}