/* Variable declarations */

html {
    /* primary colors (used for title bar etc.) */
    --color-primary-text: white;
    --color-primary-bg: #155765;
    /* background color */
    --color-primary-border: var(--color-primary-bg);
    --color-primary-dark: #134955;
    /* active colors (used for enabled buttons etc.) */
    --color-active-text: white;
    --color-active-bg: var(--color-primary-dark);
    --color-active-border: var(--color-accent-bg);
    /* accent colors (used for links, buttons etc.) */
    --color-accent-text: var(--color-primary-dark);
    --color-accent-bg: var(--color-primary-dark);
    --color-accent-border: var(--color-primary-dark);
    /* grey shades */
    --color-grey-highlight: #ebebeb;
    --color-grey-body: #f2f2f2;
    --color-timeline-highlight: #7f7f7f;
    /* category colors */
    /* inPlan */
    --color-category-0: var(--color-primary-bg);
    --color-category-0-dark: var(--color-primary-dark);
    /* inScience */
    --color-category-2: #57652a;
    --color-category-2-dark: rgb(75, 87, 36);
    /* inBuilding */
    --color-category-4: rgb(190, 155, 56);
    --color-category-4-dark: rgb(163, 132, 47);
    /* inSchool */
    --color-category-1: #4d2c3d;
    --color-category-1-dark: rgb(68, 39, 54);
    /* inHistory */
    --color-category-3: rgb(134, 37, 37);
    --color-category-3-dark: rgb(109, 36, 36);
    --message-cat-0-background: linear-gradient(45deg, #4444df, #3c7ddf);
    --message-cat-1-background: linear-gradient(45deg, #6c4787, #a64da8);
    --message-cat-2-background: linear-gradient(45deg, #217d35, #33b47a);
    --message-cat-3-background: linear-gradient(45deg, #e68939, #e6b15f);
    --message-cat-4-background: linear-gradient(45deg, #933d4d, #d54f7a);
}

body,
.backgroundColor {
    background-color: var(--color-grey-body);
}

.bg-primary-color {
    background-color: var(--color-primary-bg);
    color: var(--color-primary-text);
}

.headerFooterColor,
.headerFooterColor .navbar-nav > li > a,
.headerFooterColor .navbar-nav > li > a:hover,
.headerFooterColor .navbar-nav > li > a:focus,
.headerFooterColor .navbar-nav > .active > a,
.headerFooterColor .navbar-nav > .active > a:hover,
.headerFooterColor .navbar-nav > .active > a:focus,
.headerFooterColor .navbar-nav > .open > a,
.headerFooterColor .navbar-nav > .open > a:hover,
.headerFooterColor .navbar-nav > .open > a:focus,
.headerFooterColor.navbar-default .navbar-nav .open .dropdown-menu > li > a,
.footerStyle,
.footerSubStyle > * > * > *,
.footerSubStyle a,
.ui-widget-header,
.search-box {
    background-color: var(--color-primary-bg);
    color: var(--color-primary-text);
    border-color: var(--color-primary-border);
}

.footerSeperator {
    border: 3px solid var(--color-category-0-dark);
}

.navbar-default .logo-xs-pubinplan {
    color: #f0f5f9;
}

.navbar-default .logo-xs-pubinplan:hover {
    color: #f0f5f9;
}

.navbar-default .logo-pubinplan {
    color: #f0f5f9;
}

.navbar-default .logo-pubinplan:hover {
    color: #f0f5f9;
}

.headerOverlay,
.secondaryHeaderOverlay {
    background-color: rgba(0, 0, 0, 0.1);
    color: white;
}

.userDropdownLi:hover,
.userDropdownLi:hover > a {
    background-color: var(--color-primary-dark) !important;
}

.btn.btn-pubinplan,
.btn.btn-search-box {
    background-color: var(--color-primary-bg);
    color: var(--color-primary-text);
    border-color: var(--color-primary-border);
}

.btn.btn-pubinplan:hover,
.btn.btn-search-box:hover {
    background-color: var(--color-primary-bg);
    color: var(--color-primary-text);
}

.typeButton.active,
.categoryButton.active,
.statusButton.active,
.userFilterButton.active {
    background-color: var(--color-primary-dark);
    color: var(--color-primary-text);
    border-color: var(--color-primary-dark);
}

.section-separator,
hr {
    border-top: 1px solid lightgray;
}

.section .text-lide {
    color: #7f7f7f;
}

.symbol {
    background-color: #f8f8f8;
}

.symbol-large {
    background-color: #f8f8f8;
}

.backgroundColor.clickable:hover {
    background-color: #e6e6e6;
}

.ol-geocoder ul.gcd-gl-result > li:nth-child(odd) {
    border-color: grey;
}

.background-highlight {
    background-color: var(--color-grey-highlight);
}

.background-white {
    background: white;
}

.spinner {
    border: 16px solid var(--color-grey-body);
    border-top: 16px solid var(--color-primary-border);
}

.mobileNavButton.navbar-toggle .icon-bar {
    background-color: white;
}

.text-black {
    color: black;
}

.errorColor {
    background-color: red !important;
}

.ongoingErrorColor {
    background-color: lightcoral !important;
}

.errorColorBorder {
    border: 1px solid red !important;
}

.ongoingErrorColorBorder {
    border: 1pc solid lightcoral !important;
}

.pagination > li > a,
.pagination > li > span {
    color: var(--color-accent-text) !important;
}

.pagination > .active > a {
    background-color: var(--color-accent-bg) !important;
    border-color: var(--color-accent-border) !important;
    color: white !important;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    color: #fff;
    background-color: var(--color-primary-dark);
}

input:checked + .toggleSlider,
.footerBar {
    background-color: var(--color-primary-dark);
}

input:focus + .toggleSlider {
    box-shadow: 0 0 1px var(--color-primary-dark);
}

.toggleSlider {
    background-color: #ccc;
}

.ol-control > button,
.ol-control > button:hover,
.ol-control > button:focus {
    background-color: var(--color-primary-bg);
    filter: opacity(100%);
}

/* begin map colors */

.mapBaselayerToggle,
.mapBaselayerToggleXs {
    border-color: var(--color-primary-dark);
}

.mapSymbolsOverlay {
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(255, 255, 255, 0.72);
}

.map-bg {
    background-color: #eee;
}

/* end map colors */

.imagePopupInfo {
    color: white;
}

.card {
    border: none;
    /*1px solid rgba(0, 0.1, 0, 0.12);*/
    background-color: white;
    box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132),
        0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
}

.card-hover:hover {
    border: none;
    background-color: #eee;
    box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132),
        0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
    cursor: pointer;
}

.card.section h1 {
    border-bottom: 1px solid rgba(0, 0.1, 0, 0.2);
}

[data-project-category] .btn.apply-cat-bg {
    border: none !important;
}

[data-project-category="0"] .apply-cat-bg,
[data-project-category="0"] .ui-widget-header,
[data-project-category="0"] .apply-cat-bg-active.active,
[data-project-category="0"] .ol-control > button,
[data-project-category="0"] .nav-pills > li.active > a,
[data-project-category="0"] .nav-pills > li.active > a:hover,
[data-project-category="0"] .nav-pills > li.active > a:focus,
[data-project-category="0"]
    .pagination
    > .active
    > a
    [data-project-category="0"]
    .typeButton.active,
[data-project-category="0"] input:checked + .toggleSlider {
    background-color: var(--color-category-0) !important;
}

[data-project-category="0"] .apply-cat-color,
[data-project-category="0"] .ui-state-default,
[data-project-category="0"] .pagination > li:not(.active) > a,
[data-project-category="0"] .pagination > li:not(.active) > span {
    color: var(--color-category-0) !important;
}

[data-project-category="0"] .apply-cat-bg.cat-dark,
[data-project-category="0"] .userDropdownLi:hover,
[data-project-category="0"] .userDropdownLi:hover > a {
    background-color: var(--color-category-0-dark) !important;
}

[data-project-category="0"] .apply-cat-color.cat-light {
    color: var(--color-category-1-light) !important;
}

[data-project-category="0"] .ui-state-active,
[data-project-category="0"] .ui-widget-content .ui-state-active {
    border-color: var(--color-category-0-dark);
    background: var(--color-category-0);
    color: white !important;
}

[data-project-category="0"] .ui-state-hover,
[data-project-category="0"] .ui-widget-content .ui-state-hover,
[data-project-category="0"] .ui-widget-header .ui-state-hover {
    border: 1px solid var(--color-category-0);
    color: var(--color-category-0-dark);
    background: none;
}

[data-project-category="0"] .footerSeperator {
    border: 3px solid var(--color-category-0-dark);
}

[data-project-category="0"] .slider-selection {
    background: var(--color-category-0);
    background-image: none !important;
}
[data-project-category="0"] .slider-handle,
[data-project-category="0"] .slider-tick {
    background: var(--color-category-0-dark);
    background-image: none !important;
}

[data-project-category="1"] .apply-cat-bg,
[data-project-category="1"] .ui-widget-header,
[data-project-category="1"] .apply-cat-bg-active.active,
[data-project-category="1"] .ol-control > button,
[data-project-category="1"] .nav-pills > li.active > a,
[data-project-category="1"] .nav-pills > li.active > a:hover,
[data-project-category="1"] .nav-pills > li.active > a:focus,
[data-project-category="1"] .pagination > .active > a,
[data-project-category="1"] .typeButton .active,
[data-project-category="1"] input:checked + .toggleSlider {
    background-color: var(--color-category-1) !important;
}

[data-project-category="1"] .apply-cat-color,
[data-project-category="1"] .ui-state-default,
[data-project-category="1"] .pagination > li:not(.active) > a,
[data-project-category="1"] .pagination > li:not(.active) > span {
    color: var(--color-category-1) !important;
}

[data-project-category="1"] .apply-cat-bg.cat-dark,
[data-project-category="1"] .userDropdownLi:hover,
[data-project-category="1"] .userDropdownLi:hover > a {
    background-color: var(--color-category-1-dark) !important;
}

[data-project-category="1"] .apply-cat-color.cat-light {
    color: var(--color-category-1-light) !important;
}

[data-project-category="1"] .ui-state-active,
[data-project-category="1"] .ui-widget-content .ui-state-active {
    border-color: var(--color-category-1-dark);
    background: var(--color-category-1);
    color: white !important;
}

[data-project-category="1"] .ui-state-hover,
[data-project-category="1"] .ui-widget-content .ui-state-hover,
[data-project-category="1"] .ui-widget-header .ui-state-hover {
    border: 1px solid var(--color-category-1);
    color: var(--color-category-1-dark);
    background: none !important;
}

[data-project-category="1"] .footerSeperator {
    border: 3px solid var(--color-category-1-dark);
}

[data-project-category="1"] .slider-selection {
    background: var(--color-category-1);
    background-image: none !important;
}
[data-project-category="1"] .slider-handle,
[data-project-category="1"] .slider-tick {
    background: var(--color-category-1-dark);
    background-image: none !important;
}

[data-project-category="2"] .apply-cat-bg,
[data-project-category="2"] .ui-widget-header,
[data-project-category="2"] .apply-cat-bg-active.active,
[data-project-category="2"] .ol-control > button,
[data-project-category="2"] .nav-pills > li.active > a,
[data-project-category="2"] .nav-pills > li.active > a:hover,
[data-project-category="2"] .nav-pills > li.active > a:focus,
[data-project-category="2"] .pagination > .active > a,
[data-project-category="2"] .typeButton.active,
[data-project-category="2"] input:checked + .toggleSlider {
    background-color: var(--color-category-2) !important;
}

[data-project-category="2"] .apply-cat-color,
[data-project-category="2"] .ui-state-default,
[data-project-category="2"] .pagination > li:not(.active) > a,
[data-project-category="2"] .pagination > li:not(.active) > span {
    color: var(--color-category-2) !important;
}

[data-project-category="2"] .apply-cat-bg.cat-dark,
[data-project-category="2"] .userDropdownLi:hover,
[data-project-category="2"] .userDropdownLi:hover > a {
    background-color: var(--color-category-2-dark) !important;
}

[data-project-category="2"] .apply-cat-color.cat-light {
    color: var(--color-category-2-light) !important;
}

[data-project-category="2"] .ui-state-active,
[data-project-category="2"] .ui-widget-content .ui-state-active {
    border-color: var(--color-category-2-dark);
    background: var(--color-category-2);
    color: white !important;
}

[data-project-category="2"] .ui-state-hover,
[data-project-category="2"] .ui-widget-content .ui-state-hover,
[data-project-category="2"] .ui-widget-header .ui-state-hover {
    border: 1px solid var(--color-category-2);
    color: var(--color-category-2-dark);
    background: none;
}

[data-project-category="2"] .footerSeperator {
    border: 3px solid var(--color-category-2-dark);
}

[data-project-category="2"] .slider-selection {
    background: var(--color-category-2);
    background-image: none !important;
}
[data-project-category="2"] .slider-handle,
[data-project-category="2"] .slider-tick {
    background: var(--color-category-2-dark);
    background-image: none !important;
}

[data-project-category="3"] .apply-cat-bg,
[data-project-category="3"] .ui-widget-header,
[data-project-category="3"] .apply-cat-bg-active.active,
[data-project-category="3"] .ol-control > button,
[data-project-category="3"] .nav-pills > li.active > a,
[data-project-category="3"] .nav-pills > li.active > a:hover,
[data-project-category="3"] .nav-pills > li.active > a:focus,
[data-project-category="3"] .pagination > .active > a,
[data-project-category="3"] .typeButton.active,
[data-project-category="3"] input:checked + .toggleSlider {
    background-color: var(--color-category-3) !important;
}

[data-project-category="3"] .apply-cat-color,
[data-project-category="3"] .ui-state-default,
[data-project-category="3"] .pagination > li:not(.active) > a,
[data-project-category="3"] .pagination > li:not(.active) > span {
    color: var(--color-category-3) !important;
}

[data-project-category="3"] .apply-cat-bg.cat-dark,
[data-project-category="3"] .userDropdownLi:hover,
[data-project-category="3"] .userDropdownLi:hover > a {
    background-color: var(--color-category-3-dark) !important;
}

[data-project-category="3"] .apply-cat-color.cat-light {
    color: var(--color-category-3-light) !important;
}

[data-project-category="3"] .ui-state-active,
[data-project-category="3"] .ui-widget-content .ui-state-active {
    border-color: var(--color-category-3-dark);
    background: var(--color-category-3);
    color: white !important;
}

[data-project-category="3"] .ui-state-hover,
[data-project-category="3"] .ui-widget-content .ui-state-hover,
[data-project-category="3"] .ui-widget-header .ui-state-hover {
    border: 1px solid var(--color-category-3);
    color: var(--color-category-3-dark);
    background: none;
}

[data-project-category="3"] .footerSeperator {
    border: 3px solid var(--color-category-3-dark);
}

[data-project-category="3"] .slider-selection {
    background: var(--color-category-3);
    background-image: none !important;
}
[data-project-category="3"] .slider-handle,
[data-project-category="3"] .slider-tick {
    background: var(--color-category-3-dark);
    background-image: none !important;
}

[data-project-category="4"] .apply-cat-bg,
[data-project-category="4"] .ui-widget-header,
[data-project-category="4"] .apply-cat-bg-active.active,
[data-project-category="4"] .ol-control > button,
[data-project-category="4"] .nav-pills > li.active > a,
[data-project-category="4"] .nav-pills > li.active > a:hover,
[data-project-category="4"] .nav-pills > li.active > a:focus,
[data-project-category="4"] .pagination > .active > a,
[data-project-category="4"] .typeButton.active,
[data-project-category="4"] input:checked + .toggleSlider {
    background-color: var(--color-category-4) !important;
}

[data-project-category="4"] .apply-cat-color,
[data-project-category="4"] .ui-state-default,
[data-project-category="4"] .pagination > li:not(.active) > a,
[data-project-category="4"] .pagination > li:not(.active) > span {
    color: var(--color-category-4) !important;
}

[data-project-category="4"] .apply-cat-bg.cat-dark,
[data-project-category="4"] .userDropdownLi:hover,
[data-project-category="4"] .userDropdownLi:hover > a {
    background-color: var(--color-category-4-dark) !important;
}

[data-project-category="4"] .apply-cat-color.cat-light {
    color: var(--color-category-4-light) !important;
}

[data-project-category="4"] .ui-state-active,
[data-project-category="4"] .ui-widget-content .ui-state-active {
    border-color: var(--color-category-4-dark);
    background: var(--color-category-4);
    color: white !important;
}

[data-project-category="4"] .ui-state-hover,
[data-project-category="4"] .ui-widget-content .ui-state-hover,
[data-project-category="4"] .ui-widget-header .ui-state-hover {
    border: 1px solid var(--color-category-4);
    color: var(--color-category-4-dark);
    background: none;
}

[data-project-category="4"] .footerSeperator {
    border: 3px solid var(--color-category-4-dark);
}

[data-project-category="4"] .slider-selection {
    background: var(--color-category-4);
    background-image: none !important;
}
[data-project-category="4"] .slider-handle,
[data-project-category="4"] .slider-tick {
    background: var(--color-category-4-dark);
    background-image: none !important;
}

input:checked:disabled + .toggleSlider {
    background-color: #eeeeee !important;
}

/* @Media para SM, MD e LG */

@media (min-width: 768px) {
    .form-control.search-box-input {
        background: white;
        color: rgb(85, 85, 85);
    }
    .form-control.search-box-input:valid {
        background: white;
    }
    .form-control.search-box-input:focus {
        background: white;
    }
    .form-control.search-box-input::placeholder {
        /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: rgb(85, 85, 85);
        opacity: 1;
        /* Firefox */
    }
    .form-control.search-box-input:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: rgb(85, 85, 85);
    }
    .form-control.search-box-input::-ms-input-placeholder {
        /* Microsoft Edge */
        color: rgb(85, 85, 85);
    }
    .form-control.search-box-input:focus::placeholder {
        /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: rgb(85, 85, 85);
        opacity: 1;
        /* Firefox */
    }
    .form-control.search-box-input:focus:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: rgb(85, 85, 85);
    }
    .form-control.search-box-input:focus::-ms-input-placeholder {
        /* Microsoft Edge */
        color: rgb(85, 85, 85);
    }
}

.elevation-4 {
    box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132),
        0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
}

.elevation-8 {
    box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132),
        0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
}

.elevation-16 {
    box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132),
        0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
}

.elevation-64 {
    box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22),
        0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18);
}

.notification-container > ul > li > a {
    background-color: var(--color-primary-bg);
    color: var(--color-primary-text);
    border-color: var(--color-primary-border);
}

.notification-container > ul > li > a:hover {
    background-color: transparent !important;
}

.notification-container > ul > li > a:active {
    background-color: transparent !important;
}

.notification-new-indicator {
    color: var(--color-primary-bg);
}