/*** General Styles ***/

/*** Links on white/light background ***/
a:not(.md-button) {
    color: #145ba4;
    font-weight: 500;
    text-decoration: none;
}

/* .mailto {
    text-decoration: underline !important;
} */

.field-name-field-links .md-list-item-inner>p,
.field-name-field-related-projects .md-list-item-inner>p,
.field-name-field-neighborhoods .md-list-item-inner>p {
    color: #145ba4;
    font-weight: 500;
    font-size: 16px;
}

a:not(.md-button):hover {
    color: #103e88;
    text-decoration: underline;
}

/*** Links on a colored/dark background ***/
.view-system-messages-alerts- a,
.view-city-news-announcements a:not(.md-button),
.view-happening-now a,
.view-group-slideshow a {
    color: inherit;
    text-decoration: underline;
}

.view-system-messages-alerts- a:hover,
.view-city-news-announcements a:hover,
.view-happening-now a:hover,
.view-group-slideshow a:hover {
    color: rgba(255, 255, 255, 0.7);
}

.layout-row>.flex-12-5 {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
    max-width: 12.5%;
    max-height: 100%;
    box-sizing: border-box;
}

p {
    margin: 0 0 14px 0;
}

.breadcrumb {
    padding: 0;
}

.fit-height {
    height: 100%;
}

.nowrap {
    white-space: nowrap;
}

.text-center {
    text-align: center;
}

.form-text {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

iframe {
    border: none;
}

.media.media-element-container.media-default video {
    width: 100%;
    height: auto;
}

.file-icon {
    display: none;
}

.field-group .field {
    margin-left: 16px;
}

/*calendar-md .calendar {
    width: auto;
}*/

material-calendar .calendar {
    display: block;
}

.field-item img {
    /*width: 100%;
    height: auto;*/
}

img.fill-width-image {
    max-width: 100%;
    height: auto;
}

::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #fff;
    opacity: 0.7;
}

:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #fff;
    opacity: 0.7;
}

::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #fff;
    opacity: 0.7;
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #fff;
    opacity: 0.7;
}

::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #fff;
    opacity: 0.7;
}

.text-shadow {
    text-shadow: 0 0 8px black;
}

#navbar-administration.navbar-oriented .navbar-bar {
    z-index: 10;
}

#navbar-administration .navbar-tray {
    z-index: 9;
}

.primary-image-header {
    border-radius: 2px;
    height: auto;
    margin: 8px 0;
    width: 100%;
}

.material-icons {
    color: inherit;
}

.material-icons.md-18 {
    font-size: 18px;
    height: 18px;
    width: 18px;
}

.material-icons.md-24 {
    font-size: 24px;
    height: 24px;
    width: 24px;
}

.material-icons.md-36 {
    font-size: 36px;
    height: 36px;
    width: 36px;
}

.material-icons.md-48 {
    font-size: 48px;
    height: 48px;
    width: 48px;
}

md-input-container .md-errors-spacer {
    min-height: 0;
}

md-input-container.form-item-search-block-form {
    margin: 0;
}

/*.md-whiteframe-1dp {
    position: relative;
    z-index: 1;
}

.md-whiteframe-2dp {
    position: relative;
    z-index: 2;
}

.md-whiteframe-3dp {
    position: relative;
    z-index: 3;
}

.md-whiteframe-4dp {
    position: relative;
    z-index: 4;
}*/

div.messages {
    margin: 0;
}

div.date-display-range {
    display: inline-block;
}

md-card {
    position: relative;
}

md-card .md-card-image {
    display: block;
    width: 100%;
    height: auto;
}

md-card-title h1,
md-card-title h2,
md-card-title h3 {
    margin: 0;
}

.view-system-messages-alerts- md-list md-list-item.md-2-line .md-list-item-text p {
    color: inherit;
}

md-menu-item>a.md-button {
    padding-top: 0;
}

.md-dense :not(.md-dense-disabled) .md-button:not(.md-dense-disabled).menu-heading {
    font-size: 16px;
    font-weight: bold;
}

/*** Header Styles ***/

.masthead {
    z-index: 29;
}

.logo-bg {
    width: 100px;
}

.logo-sm {
    width: 60px;
}

md-menu-bar .md-button {
    height: auto;
    padding: 8px;
}

.menu-heading {
    font-size: 16px;
    font-weight: bold;
    line-height: 32px;
    padding: 0 16px;
}

/*** Mega Menu ***/
.mega-menu {
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 29;
}

.mega-menu .nav-item {
    display: inline-block;
    /*float: left;*/
    vertical-align: middle;
}

.mega-menu .nav-item .md-button {
    height: auto;
    padding: 8px;
}

.mega-menu .nav-item>.md-button.active {
    background-color: rgba(100, 100, 100, 0.3);
}

.mega-menu .mega-panel {
    height: 580px;
    /*max-height: 580px; Doesn't work in IE */
    /*min-width: 800px;*/
    padding: 16px 0;
    position: absolute;
    transition: 0.3s ease all;
    z-index: 29;
    left: -200px;
    right: 0;
}

.mega-menu .mega-panel h3 {
    color: #739749;
    font-size: 16px;
    font-weight: bold;
    padding: 0 16px;
    margin: 8px 0 4px 0;
}

.mega-menu .mega-panel ul {
    list-style: none;
    padding: 0;
}

.mega-menu .mega-panel .md-button {
    font-weight: normal;
    width: 100%;
    text-transform: none;
    text-align: left;
    min-height: 32px;
    line-height: 32px;
    padding: 0;
    margin: 0;
    padding: 0 16px;
}

.mega-menu .mega-panel.ng-hide {
    opacity: 0;
}

.mega-backdrop {
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 28;
}

/*** Left Sidebar Menus ***/

.region-sidebar-first .menu {
    margin: 0;
    padding: 0;
}

.region-sidebar-first .menu li {
    list-style: none;
    margin: 0;
    min-height: 48px;
    padding: 0;
}

.region-sidebar-first .menu li>a {
    align-items: center;
    color: inherit;
    display: flex;
    font-size: 14px;
    min-height: inherit;
    line-height: 14px;
    padding: 0 42px 0 16px;
    position: relative;
    text-decoration: none;
    height: 48px;
}

.region-sidebar-first .menu li>a:hover,
.region-sidebar-first .menu li>a.active {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.region-sidebar-first .menu li.expanded .menu li>a {
    padding-left: 32px;
    background-color: rgba(0, 0, 0, 0.1);
}

.region-sidebar-first .menu li.expanded .menu li.expanded .menu li>a {
    padding-left: 48px;
    background-color: rgba(0, 0, 0, 0.2);
}

.region-sidebar-first .menu li.collapsed>a:after {
    content: "";
    font-family: "Material Icons";
    font-size: 24px;
    line-height: 14px;
    position: absolute;
    right: 16px;
}

.region-sidebar-first .menu li.expanded>a:after {
    content: "";
    font-family: "Material Icons";
    font-size: 24px;
    line-height: 14px;
    position: absolute;
    right: 16px;
}

.region-sidebar-first .menu li>a[target="_blank"]:after {
    content: "";
    font-family: "Material Icons";
    font-size: 24px;
    line-height: 14px;
    position: absolute;
    right: 16px;
}

/*** Front Page ***/

.view {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-image: none;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}

.view .image-overlay {
    min-height: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
}

.view .image-overlay.dark {
    background-color: rgba(0, 0, 0, 0.5);
}

.main-search {
    width: 300px;
}

.main-search.search-form input {
    background-color: rgba(32, 32, 32, 0.7);
    border: 2px solid #739749;
    border-radius: 4px;
    box-sizing: border-box;
    color: white;
    font-size: 27px;
    padding: 8px;
    text-align: center;
    width: 100%;
}

.main-search.search-form input:hover,
.main-search.search-form input:focus {
    border-color: #adc88e;
}

md-grid-list md-grid-tile .views-field.views-field-field-destination a {
    background: rgba(0, 0, 0, 0.68);
    bottom: 0;
    box-sizing: border-box;
    color: white;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.01em;
    left: 0;
    line-height: 24px;
    padding: 8px 16px;
    position: absolute;
    width: 100%;
}

/*md-grid-list md-grid-tile .views-field.views-field-field-destination a {
    
}*/

md-grid-list md-grid-tile img {
    width: 100%;
    height: auto;
}

.views-slideshow-cycle-processed {
    position: relative;
}

#views_slideshow_cycle_main_happening_now-panel_pane_1 {
    height: 460px;
}

#views_slideshow_cycle_main_group_slideshow-panel_pane_1_1 {
    height: 340px;
    margin: 8px;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
        0 3px 1px -2px rgba(0, 0, 0, 0.12);
}

.views-slideshow-cycle-main-frame {
    position: relative;
    width: 100%;
    height: 100%;
}

.views-slideshow-cycle-main-frame-row {
    height: 100%;
    width: 100%;
}

.views-slideshow-cycle-main-frame-row-item {
    color: #fff;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 0 32px;
}

.views-slideshow-cycle-main-frame-row-item .views-field {
    width: 100%;
}

.views-slideshow-cycle-main-frame-row-item .views-field-field-primary-image {
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: -1;
    width: 100%;
    border-radius: 2px;
}

/*** Place the image in front of text for Library slideshow ***/
.page-node-13 .views-slideshow-cycle-main-frame-row-item .views-field-field-primary-image,
.page-node-14 .views-slideshow-cycle-main-frame-row-item .views-field-field-primary-image,
.page-node-15 .views-slideshow-cycle-main-frame-row-item .views-field-field-primary-image,
.page-node-16 .views-slideshow-cycle-main-frame-row-item .views-field-field-primary-image,
.page-node-30425 .views-slideshow-cycle-main-frame-row-item .views-field-field-primary-image {
    z-index: 1;
}

.views-slideshow-cycle-main-frame-row-item .views-field-field-primary-image .field-content {
    height: 100%;
    width: 100%;
}

.views-slideshow-cycle-main-frame-row-item .views-field-field-primary-image img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.field-content.md-button.md-raised.md-accent a {
    color: white;
    text-decoration: none !important;
}

.views-slideshow-controls-bottom {
    left: 0;
    position: absolute;
    top: 0;
    z-index: 12;
    /* This needs to accomodate the number of slides. */
    height: 100%;
    pointer-events: none;
    width: 100%;
}

.views-slideshow-simple-pager {
    position: absolute;
    bottom: 10%;
    pointer-events: auto;
    width: 100%;
    text-align: center;
}

.views-slideshow-simple-pager .views-slideshow-pager-field-item a {
    width: 12px;
    height: 12px;
    text-indent: -100px;
    background-color: rgba(255, 255, 255, 0.5);
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
}

.views-slideshow-simple-pager .views-slideshow-pager-field-item a:hover,
.views-slideshow-simple-pager .views-slideshow-pager-field-item.active a {
    background-color: rgba(255, 255, 255, 0.9);
}

.views-slideshow-controls-text {
    pointer-events: auto;
}

.views-slideshow-controls-text span:hover {
    background-color: rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.views-slideshow-controls-text-next {
    position: absolute;
    top: 50%;
    right: 4%;
}

.views-slideshow-controls-text-previous {
    position: absolute;
    top: 50%;
    left: 4%;
}

.views-slideshow-controls-text-next a,
.views-slideshow-controls-text-previous a {
    font-size: 0;
    text-decoration: none;
}

.views-slideshow-controls-text-next a:after {
    color: #eeeeee;
    content: "";
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    font-size: 36px;
    text-decoration: none !important;
    text-shadow: 0 0 8px black;
}

.views-slideshow-controls-text-previous a:after {
    color: #eeeeee;
    content: "";
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    font-size: 36px;
    text-decoration: none !important;
    text-shadow: 0 0 8px black;
}

.views-slideshow-controls-text-next a:hover,
.views-slideshow-controls-text-previous a:hover {
    text-decoration: none;
}

.views-slideshow-controls-text-pause {
    display: none;
}

/*** Divider Heading ***/
.divider-new::before {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 0 0.45em 0 0;
}

.divider-new::after {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 0 0 0 0.45em;
}

.divider-new::after,
.divider-new::before {
    content: "";
    display: inline-block;
    height: 1px;
    background: #ccc;
}

/*** Footer ***/
footer#footer-wrapper {
    background-color: #546e7a;
    color: #ffffff;
}

#footer-wrapper ul.menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

#footer-wrapper ul.menu li {
    list-style: none;
    margin: 0;
}

#footer-wrapper a {
    color: inherit;
    font-weight: normal;
    text-decoration: none;
}

#footer-wrapper a:hover {
    text-decoration: underline;
}

#footer {
    text-align: center;
}

#footer-columns .media-wysiwyg-align-left,
.media-float-left {
    margin-right: 10px;
}

/*** Field Additional Text ***/
.field-name-field-additional-text .field-item {
    overflow: hidden;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #ddd;
}

/*** Gmap in sidebar on project page ***/
#panels-ipe-regionid-right .field-type-location .gmap-map {
    height: 220px !important;
}

table.views-table,
table.views-view-grid {
    width: 100%;
}

/*** Library Booklist Views **/
.view.view-library-booklists .views-field {
    text-align: center;
}

/*** Additional Images Field ***/
.field-name-field-additional-images .field-item {
    display: inline-block;
    margin-right: 4px;
}

/*** Text and Images field ***/
.field-text-images .text-images-image {
    margin-right: 16px;
}

.field-text-images .layout-gt-xs-row {
    padding-top: 8px;
}

.field-text-images table {
    width: 100%;
}

.field-text-images tbody {
    border: none;
}

/*** Appeal Documens field ***/
.appeal-documents {
    border: 2px solid #ffaaaa;
    padding: 4px;
    margin-top: 4px;
    border-radius: 4px;
}

/*** Social Icons ***/
.icon img {
    width: 100%;
}

/*** Library Logo ***/
.library-logo {
    height: auto;
    width: 100%;
    padding: 0px 28%;
    box-sizing: border-box;
}

#library-buttons .md-button,
#planning-buttons .md-button,
.custom-buttons .md-button {
    font-size: 18px;
    line-height: 45px;
}

#fire-buttons .md-button {
    font-size: 18px;
    line-height: 45px;
    color: rgba(255, 255, 255, 0.87);
    background-color: rgb(20, 91, 164);
}



/*** Old Land Use Case files ***/
.node-city-project iframe {
    width: 100%;
    min-height: 500px;
}

/*** gt-sm ***/
@media screen and (min-width: 960px) {
    #views_slideshow_cycle_main_group_slideshow-panel_pane_1_1 {
        margin: 8px -10% 0 -10%;
    }

    .primary-image-header {
        margin: 8px -10% -6em -10%;
        width: 120%;
    }

    .page-node-15953 .content .flex-gt-sm-45,
    .page-node-19281 .content .flex-gt-sm-45 {
        max-width: 100%;
    }
}

/*** gt-md ***/
@media screen and (min-width: 1280px) {}

/*** gt-lg ***/
@media screen and (min-width: 1920px) {

    .page-node-15953 .content .flex-gt-sm-45,
    .page-node-19281 .content .flex-gt-sm-45 {
        max-width: 80%;
    }
}

/*** DD EDIT Value Line Login Custom Styles ***/
#vl_auth_form {
    min-height: 220px;
}

#vl_auth_form .form-group {
    width: 300px;
    padding: 5px;
}

#vl_auth_form div {
    clear: both;
}

#vl_auth_form .form-group label {
    text-align: left;
    width: 80px;
    float: left;
    font-weight: bold;
    padding: 0.5rem 0;
}

#vl_auth_form .form-group input {
    float: right;
    padding: 0.5rem;
}

#vl_auth_form .form-group input[type="text"],
#vl_auth_form .form-group input[type="password"] {
    width: 150px;
}

.form-group.vl_error label,
.form-group #vl_error_span_el {
    color: red;
}

.form-group.vl_error input,
.form-group.vl_error input:focus {
    outline: red;
    /* border-width: 2px; */
    /* border-style: inset; */
    border-color: red;
    border-radius: 3px;
}

/*** DD EDIT ***/
#node-33965>md-card-content>div>div>div>div>div>.expandable-header {
    cursor: pointer;
}

/*** DD EDIT ***/
.bottom-cutoff {
    min-width: 30%;
    min-height: 84px;
}

/* DD EDIT */
/* helper class to force uppercase text */
.uppercase {
    text-transform: uppercase;
}

/*** DD EDIT ***/
/* responsive image flex grid */
.responsive-img-grid-container {
    display: grid;
    column-gap: 20px;
    row-gap: 20px;
}

/* use this class for narrower images that can fit in to three columns on wider displays */
.img-grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
}


/* use this class for even narrower images that can fit in to four columns on wider displays */
.img-grid-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* use this class for wider images that can only fit in to two columns on wider displays */
.img-grid-2 {
    grid-template-columns: 1fr 1fr;
}

.responsive-img-grid-content {
    justify-self: stretch;
}

.responsive-img-grid-content>a>img,
.responsive-img-grid-content>img {
    max-width: 100%;
}

/* Overwrite default max width for mismatched image formats (i.e. portrait and landscape images on the same row) */
.max-width-60 {
    max-width: 60% !important;
}

.responsive-img-grid-content>p {
    width: 85%;
}

/*  
    DD EDIT
    Custom grid styles for CAPRA group page
*/
.capra-container {
    max-width: 380px;
}

.capra-container>.row {
    display: flex;
    margin: 1rem;
    justify-content: space-between;
    line-height: 25px;
}

.capra-container>.row>div {
    box-sizing: border-box;
    padding: 0.5rem 1rem;
    border: 2px solid black;
    cursor: pointer;
    box-shadow: 5px 3px 2px 0;
}

.capra-container>.row>div:active {
    transform: translateY(2px);
    box-shadow: 3px 1px 0 0;
}

.capra-container>.row>div>a {
    text-decoration: none;
    color: black;
}

/* extra small */
@media screen and (max-width: 450px) {

    .img-grid-3,
    .img-grid-4 {
        grid-template-columns: 1fr 1fr;
    }

    .responsive-img-grid-container {
        column-gap: 10px;
    }
}