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

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 40vw;
}

@media (max-width: 768px) {
    input,
    select,
    textarea {
        max-width: 100%;
    }
}

#logo-nav {
    position: relative;
    top: -14px;
    min-width: 20rem;
}

.bg-light {
    border: none;
}

.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
    color: #29ABE2;
}

a {
    text-decoration: none;
}
    a:hover {
        color: #29ABE2;
        text-decoration: none;
    }

.site-section {
    padding: 2.5em 0;
}

@media (min-width: 768px) {
    .site-section {
        padding: 1em 0;
    }
}

.bg-image {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

    .bg-image.overlay {
        position: relative;
    }

        .bg-image.overlay:after {
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 0;
            width: 100%;
            /*background: rgba(16, 137, 255, 0.8);*/
            /*background: rgba(1, 168, 71, 0.2);*/
            background: rgba(0, 160, 57, 0.2);
        }

    .bg-image > .container {
        position: relative;
        z-index: 1;
    }

.drop-shadow {
    /*opacity: 0.9;*/
    -webkit-filter: drop-shadow(12px 12px 25px rgb(255, 255, 255));
    filter: url("data:image/svg+xml;utf8,<svg height='0' xmlns='http://www.w3.org/2000/svg'><filter id='drop-shadow'><feGaussianBlur in='SourceAlpha' stdDeviation='4'/><feOffset dx='12' dy='12' result='offsetblur'/><feFlood flood-color='rgba(255,255,255,0.05)'/><feComposite in2='offsetblur' operator='in'/><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge></filter></svg>#drop-shadow");
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#fff')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#fff')";
}

.shadowedwhite {
    -webkit-filter: drop-shadow(12px 12px 25px rgb(0, 0, 0));
    filter: url("data:image/svg+xml;utf8,<svg height='0' xmlns='http://www.w3.org/2000/svg'><filter id='drop-shadow'><feGaussianBlur in='SourceAlpha' stdDeviation='4'/><feOffset dx='12' dy='12' result='offsetblur'/><feFlood flood-color='rgba(0,0,0,0.05)'/><feComposite in2='offsetblur' operator='in'/><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge></filter></svg>#drop-shadow");
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#000')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#000')";
}

.shadowedblack {
    -webkit-filter: drop-shadow(12px 12px 25px rgb(255, 255, 255));
    filter: url("data:image/svg+xml;utf8,<svg height='0' xmlns='http://www.w3.org/2000/svg'><filter id='drop-shadow'><feGaussianBlur in='SourceAlpha' stdDeviation='4'/><feOffset dx='12' dy='12' result='offsetblur'/><feFlood flood-color='rgba(255,255,255,0.05)'/><feComposite in2='offsetblur' operator='in'/><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge></filter></svg>#drop-shadow");
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#fff')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#fff')";
}

.transparency-frame {
    padding: 2em;
    background: rgb(0,0,0,0.4);
}

.overlay-img {
    background-image: url('/Img/green-tree-2-1177489.jpg');
}

.text-white-75 {
    --bs-text-opacity: 1;
    color: rgba(255, 255, 255, 0.75) !important;
}

.text-white-25 {
    --bs-text-opacity: 1;
    color: rgba(255, 255, 255, 0.25) !important;
}

/*ul.pagination li.page-item.active a {
    z-index: 3;
    color: #fff;
    background-color: #1a1a1a;
    border-color: #1a1a1a;
*/

.fs-table1 {
    font-size: 0.8rem !important;
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
}

.fs-table2 {
    font-size: 1rem !important;
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
}

.fs-table3 {
    font-size: 1.2rem !important;
}

.unosStanja {
    width: 160px;
    font-size: 1rem !important;
}

@media (max-width: 768px) {
    .unosStanja {
        width: 160px;
        font-size: 1rem !important;
    }
}

.dropdown-menu[data-bs-popper] {
    top: 100%;
    right: 0;
    margin-top: 0.125rem;
}

.form-control.is-payattention {
    border-color: #d9bd4f;
    padding-right: calc(1.5em + 1.5rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23e6e600'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e6e600' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.375rem) center;
    background-size: calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
}

.text-normal {
    text-transform: none;
}

.rounded-bottom-right {
    border-bottom-right-radius: 1.5rem !important;
    border-bottom-left-radius: 1.5rem !important;
    border-top-left-radius: 1.5rem !important;
    /*border-bottom-left-radius: 0.5rem !important;*/
}
.rounded-bottom-left {
    /*border-bottom-right-radius: 0.5rem !important;*/
    border-bottom-left-radius: 1.5rem !important;
    border-bottom-right-radius: 1.5rem !important;
    border-top-right-radius: 1.5rem !important;
}
.w-90 {
    width: 90% !important;
}
.select2-container--default .select2-selection--single {
    background-color: #f7f7f9;
    border: none;
}
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 3.5;
    }

.select2-container .select2-selection--single {
     height: auto; 
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
}
li.page-item.active {
    color: aliceblue;
    border-bottom: none !important;
}
.hr-dashed {
    color: #fff;
    border-top: 2px dashed blue;
}
.color-primary {
    color: #29ABE2;
}

/*input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}
*/
.unosStanja::-webkit-outer-spin-button,
.unosStanja::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.unosStanja {
    -moz-appearance: textfield;
}

.citat {
    border-left: .25rem solid #29abe2;
}

.bg-opacity-2 {
    --bs-bg-opacity: 0.02;
}

.text-dangerdark {
    color: maroon;
}

.field-validation-error:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    content: "\f071";
    padding-right: 4px;
}

.navbar {
	padding-top: 1rem;
	padding-bottom: 0.6rem;
}

body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
footer{
    margin-top: auto;
}

.site-section {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 200px);
  overflow-y: auto;
}

.shadow2 {
	box-shadow: 0px 2px 4px rgba(0,0,0,0.11),0px 1px 1px rgba(0,0,0,0.04);
}

.search-form-control {
    height: 2.5rem !important;
    padding: 0.5rem;
}

.dropdown-toggle {
    white-space: unset;
}

@media (min-width: 768px) {
    .input-group-col-md-10 {
        width: 83.333333%;
    }
}

@media (max-width: 768px) {
    .transparency-frame {
        padding: 1em;
        background: rgb(0,0,0,0.3);
    }

    #logo-nav {
        position: relative;
        top: -2px;
        min-width: calc(100% - 1.5em);
    }
}

.input-group-text {
    background-color: #f7f7f9;
}

a:hover {
    text-decoration: underline;
}

.a-underline {
    text-decoration: underline;
}

/*input[type="checkbox"] {*/
    /* Double-sized Checkboxes */
    /*-ms-transform: scale(2);*/ /* IE */
    /*-moz-transform: scale(2);*/ /* FF */
    /*-webkit-transform: scale(2);*/ /* Safari and Chrome */
    /*-o-transform: scale(2);*/ /* Opera */
    /*transform: scale(2);
    padding: 10px;
}*/

.skip-to-main-content-link {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 1em;
    /*background-color: black;*/
    color: white;
    opacity: 0;
    top: 100px;
}

    .skip-to-main-content-link:focus {
        left: 50%;
        transform: translateX(-50%);
        opacity: 1;
    }

.appZaSve-box3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 66px;
    background-color: #2f2f5b;
}
    .appZaSve-box3 a img {
        /*height: calc(100% - 30px);*/
        height: 32px;
        margin: 3px;
    }

@media print {
    header, footer, aside, form, nav {
        display: none;
    }
    .transparency-frame, .container {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background-color: white;
        max-width: unset;
    }
}
@page {
    margin: 2cm;
}

.navbar-light .navbar-nav .nav-link {
    color: rgba(0, 0, 0, 0.9);
}

.active {
    border-bottom: 3px solid #29ABE2; /*#1767a5*/
}

.floating-menu {
    background: none;
    padding: 5px;
    width: auto;
    height: auto;
    z-index: 100;
    position: fixed;
    top: 100px;
    right: 0px;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

.floating-menu-display {
    background: white;
    width: auto;
    height: auto;
    z-index: 100;
    position: fixed;
    top: 60px;
    right: 0px;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

/*#main > div {
    background-image: none;
    background-color: black;
}*/

.blog_item_img {
    position: relative
}

    .blog_item_img .blog_item_date {
        /*position: absolute;
        bottom: -10px;
        left: 10px;*/
        display: block;
        color: #fff;
        background-color: #0c3fb6;
        padding: 4px 8px; /*8px 15px;*/
        border-radius: 5px
    }

@media (min-width: 768px) {
    .blog_item_img .blog_item_date {
        /*bottom: -20px;
        left: 40px;*/
        /*padding: 3px 3px*/
    }
}

.blog_item_img .blog_item_date h3 {
    font-size: 12px; /*22px*/
    font-weight: 600;
    color: #fff;
    margin-bottom: 0;
    line-height: 1.2
}

@media (min-width: 768px) {
    .blog_item_img .blog_item_date h3 {
        font-size: 16px /*30px*/
    }
}

.blog_item_img .blog_item_date p {
    font-size: 18px;
    margin-bottom: 0;
    color: #fff
}

@media (min-width: 768px) {
    .blog_item_img .blog_item_date p {
        font-size: 18px
    }
}
.text-desc {
    color: #808080 !important;
    font-size: smaller;
    font-style: italic;
    display: block;
}

.btn-libu {
    color: #000;
    background-color: #7cc759;
    border-color: #fff;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
}

    .btn-libu:hover {
        color: #000;
        background-color: #7cd759;
        border-color: white;
    }

    .btn-check:focus + .btn-libu, .btn-libu:focus {
        color: #000;
        background-color: #7cd759;
        border-color: white;
        box-shadow: 0 0 0 0.25rem rgba(217, 217, 217, 0.5);
    }

    .btn-check:checked + .btn-libu,
    .btn-check:active + .btn-libu, .btn-libu:active, .btn-libu.active,
    .show > .btn-libu.dropdown-toggle {
        color: #000;
        background-color: #7cd759;
        border-color: white;
    }

        .btn-check:checked + .btn-libu:focus,
        .btn-check:active + .btn-libu:focus, .btn-libu:active:focus, .btn-libu.active:focus,
        .show > .btn-libu.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.25rem rgba(217, 217, 217, 0.5);
        }

    .btn-libu:disabled, .btn-libu.disabled {
        color: #000;
        background-color: #eee;
        border-color: #fff;
    }

#ukupno {
    border-bottom: none;
}

#ukupno-tab.nav-link.active {
    color: black;
    background-color: gold;
}

#voda {
    border-bottom: none;
}

#voda-tab.nav-link.active {
    color: white;
    background-color: deepskyblue;
}

#otpad {
    border-bottom: none;
}

#otpad-tab.nav-link.active {
    color: white;
    background-color: forestgreen;
}

.chart-container {
    position: relative;
    margin: auto;
    height: 56vh;
    width: 56vw;
}
@media (max-width: 768px) {
    .chart-xs-container {
        position: relative;
        margin: auto;
        height: 80vh;
        width: 180vw;
    }
}