body {
    background-color: #8286ad;
    overflow-x: hidden;
}
.body {
    background: url(../images/pocasi_mainpage.jpg) no-repeat fixed center 0 #8286ad;
    background-size: auto 100%;
}

.small-logo {
    background: url(../images/netpocasi_logo.png) no-repeat scroll 0 0 transparent;
    width: 154px;
    height: 30px;
    display: block;
}

.section {
    max-width: 1433px;
    margin: auto;
    padding: 15px 10px;
}

#search-field {
    background: url(../images/search_field.png) no-repeat scroll 0 0 transparent;
    width: 275px;
    height: 65px;
    padding: 0;
    margin: 30px 0;
}
#search-field input[type=submit] {
    background: url(../images/search_field.png) no-repeat scroll right -14px transparent;
    width: 53px;
    height: 53px;
    border: none;
    top: 4px;
    z-index: 9999;
    position: relative;
}
#search-field input[type=submit]:hover {
    background-position-y: -77px;
}
.search-input {
    width: 221px;
    margin: 24px 0 24px 0;
}

.search-submit {
    width: 53px;
    height: 60px;
}

#cities, #cities::placeholder {
    background: none;
    border: none;
    font-family: 'Inter', sans-serif;
    color: #b7c5f9;
}

#cities {
    color: #fefefe;
    width: 227px;
    border: 2px solid #a8a9cf;
    border-radius: 30px;
    padding: 13px;
    position: relative;
    height: 31px;
    left: 4px;
    border-right: none;
    top: -1px;
    z-index: 99;
}



#cities:focus {
    outline: none;
    border-color: #c9cdf5;
}
h1, h2 {
    color: #fefefe;
    font-family: 'Inter', sans-serif;
    font-size: 41px;
    text-shadow: 3px 3px 1px rgb(65 66 93);
    margin: 23px 0;
    display: inline-block;
}

.search-box {
    display: inline-block;
    width: auto;
    min-width: 841px;
}

.forecast-table-bg {
    background-color: #8286ad;
    opacity: 0.4;
    height: 720px;
    position: absolute;
    z-index: 9;
    top: 0;
}
.forecast-table {
    color: #fefefe;
}

.forecast-body {
    background-color: #8286ad;
    clear: both;
}

.ui-menu .ui-menu-item {
    padding: 4px;
    border-bottom: 1px solid #aaa;
}
.ui-menu .ui-menu-item-wrapper {
    position: relative;
    padding: 3px 1em 3px 0;
}
.ui-menu .ui-menu-item:hover {
    background: #989ac1;
    color: #ffffff;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    border: none;
    background: none;
    font-weight: bold;
    color: #000;
}

#forecastminipannel {
    background-color: rgba(130,134,173,0.8);
    border: 1px solid rgba(118,141,232,0.84);
    border-radius: 45px;
    box-shadow: 15px 14px 18px rgb(61 61 61 / 46%);
    width: 98%;
    padding: 17px 40px;
    position: relative;
}
#loadingDiv {
    margin: auto;
    font-size: 20px;
    color: #fefefe;
    font-family: 'Inter', sans-serif;
    height: 350px;
    line-height: 350px;
    text-align: center;
}
.singleforecast {
    border-right: 2px solid #a1acd5;
    float: left;
    flex-grow: 1;
    position: relative;
}
.singleforecast:last-child {
    border-right: 0;
}
.singleforecast h3 {
    color: #fefefe;
    font-family: 'Inter', sans-serif;
    font-size: 27px;
    width: 100%;
}
.singleforecast div {
    color: #fefefe;
    font-family: 'Inter', sans-serif;
    padding: 0;
    text-align: left;
    font-size: 19px;
}
.singleforecast div:first-child {
    padding: 0 15px;
}
.singleforecast div span {
    font-size: 19px;
}

.singleforecast div span.tempbig {
    font-family: 'Heebo', sans-serif;
    font-size: 65px;
    color: white;
}

.singleforecast div span.tempnight {
    position: relative;
}

.icons-main {
    background: url(../images/pocasi_mainicons.png) no-repeat scroll -8px 0 transparent;
    height: 38px;
    display: inline-block;
    padding: 8px 0 0 45px;
    width: 100%;
}
.icon-humidity {
    background-position-y: 0;
}
.icon-wind {
    background-position-y: -45px;
}
.icon-sunrise {
    background-position-y: -92px;
}
.icon-sunset {
    background-position-y: -127px;
}
.icons-temp {
    height: 48px;
}
.icon-maxtemp {
    background-position-y: -175px;
}
.icon-mintemp {
    background-position-y: -227px;
}

.singleforecast div span.small-description {
    font-size: 12px;
}
#forecasttype, #forecastdetaillink {
    background-color: rgba(130,134,173,0.8);
    border: 1px solid rgba(118,141,232,0.84);
    padding: 8px;
    text-align: center;
    position: relative;
    left: 45px;
}
#forecasttype ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#forecasttype ul li {
    float: left;
    padding: 0 15px;
}
#forecasttype a:link, #forecasttype a:visited, #forecastdetaillink a:link, #forecastdetaillink a:visited {
    font-family: 'Zilla Slab', serif;
    font-size: 18px;
    color: #fefefe;
    text-decoration: underline;
}
#forecastdetaillink a:link, #forecastdetaillink a:visited {
    font-size: 18px;
    font-family: 'Inter', sans-serif;
}
#forecasttype a:hover, #forecastdetaillink a:hover {
    text-decoration: none;
}
#forecastdetaillink {
    left: -45px;
}
    #forecastnavbox {
    width: 100%;
    justify-content: space-between;
}
@media (max-width: 991px) {
    .singleforecast {
        border-right: 0;
    }
    #forecastdetaillink {
        left: 45px;
    }
}


.hourlyforecastblock {
    width: 160px;
    min-width: 160px;
}
.dailyforecastblock {
    width: 190px;
}
.hourlyforecastblock div, .dailyforecastblock div {
    text-align: center;
    margin: auto;
}
.singleforecast div.forecasthour {
    background-color: #445180;
    font-size: 27px;
    width: 100%;
    color: #fefefe;
}

.singleforecast div.imagediv {
    max-width: 160px;
    max-height: 82px;
    min-width: 120px;
    min-height: 82px;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
div.dailyforecastblock span.tempbig, div.hourlyforecastblock span.tempbig {
    font-size: 44px;
    padding: 20px 0 0;
    display: block;
}
div.dailyforecastblock span.tempbig img {
    vertical-align: middle;
    display: inline-block;
}
.search-table {
    margin: 0;
}
.chooselocation {
    color: #b7c5f9;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    position: absolute;
    top: 31px;
    left: 30px;
    text-shadow: 1px 1px 3px black;
}
#forecasttype {
    max-width: 100%;
}
#mapablock img {
    position: absolute;
    z-index: 99;
}
#mapablock img#blankmap {
    z-index: 999;
    display: none;
    width: 100%;
    height: 100%;
}
#mapablock, #image-map, #mapablock img#mapofcz {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
}
@media (max-width: 1411px) {
    .krajeinnerblock {
        left: 0;
    }
    #forecastmapblock {
        display: none;
    }
}

#krajeblock {
    background-color: #e0d9f0;
    border-radius: 10px;
    min-height: 243px;
    height: auto;
    padding: 14px;
}
#krajeblock ul {
    list-style-type: none;
    float: left;
    padding: 10px;
    width: 206px;
}
#krajeblock ul li a:link, #krajeblock ul li a:visited, #krajeblock ul li a:hover {
    color: #4f5ea7;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
}
#krajeblock ul li a.active {
    background-color: #8286ad;
    color: #fefeff;
    padding: 0 6px;
    border-radius: 10px;
}
h3 {
    font-family: 'Inter', sans-serif;
    font-size: 21px;
    color: #fefefe;
    padding: 0 20px;
}
.innerbox {
    padding: 20px;
}
.krajeinnerblock {
    left: -95px;
    z-index:9999;
}
@media (max-width: 991px) {
    .krajeinnerblock {
        left: 0;
    }
}

.forecastmap {
    width: 76px;
    height: 35px;
    background-color: #474e8f;
    border-radius: 10px;
    position: absolute;
    padding: 3px 3px 0 0;
}
.tempsmall {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #fefefe;
    display: inline-block;
}
#mapablock img.smallforecasticon {
    position: relative;
}
#forecastmapblock {
    list-style-type: none;
    position: absolute;
    z-index: 998;
}

.footerouterbox {
    background-color: #616381;
    color: #fefefe;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
}
.emptyfooter {
    background: url(../images/footer_bg.jpg) no-repeat scroll center bottom #616381;
    background-size: auto 100%;
}
.emptyfooterinner {
    min-height: 500px;
}
.footer {
    background-color: #616381;
}
.footer ul {
    list-style-type: none;
    padding: 13px 16px;
}
.footerouterbox a:link, .footerouterbox a:visited, .footerouterbox a:hover {
    color: #fefefe;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    text-decoration: none;
}
.footerouterbox a:hover {
    text-decoration: underline;
}
.copyrightbox, .footer, .copyrightinner {
    padding: 0;
}
.copyright {
    padding: 13px 16px;
    margin-bottom: 20px;
}
.searchpage {
    width: 100%;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #search-field {
        padding-top: 17px;
    }

    #cities {
        color: black;
        padding: 0 13px;
    }

    #krajeblock, .krajeinnerblock h3 {
        width: 487px;
    }
}

.forecast-foreground {
    z-index: 999;
    position: relative;
    width: 100%;
}

.forecast-outer {
    position: relative;
    width: 100%;
    min-height: 555px;
}

.forecast-outer .forecast-table-bg {
    height: 100%;
    margin-left: -15px;
}

.current-forecast, .forecast-details, .singleday {
    background: #fefefe;
}
.current-forecast, .current-hours {
    margin-bottom: 18px;
    max-width: 828px;
}
.current-hours {
    margin-left: 45px;
}

.line-forecast-color, .line-under-city {
    background-color: #E1A226;
    z-index: 9999;
    position: absolute;
    top: 0;
}
.line-under-city {
    position: relative;
    height: 3px;
}
.line-left {
    width: 20px;
    height: 100%;
    left: 0;
}
.line-right {
    width: 28px;
    height: 100%;
    right: 0;
}
.last-update {
    color: #fefefe;
    font-family: 'Heebo', sans-serif;
    font-size: 16px;
    font-weight: bold;
    margin-left: 20px;
}
.forecast-current-inner {
    padding: 14px 20px;
}

.forecast-current-inner h2, .forecast-current-inner h3 {
    color: #000;
    font-family: 'Inter', sans-serif;
    font-size: 30px;
    font-weight: bold;
    text-shadow: none;
    margin: 0;
}
.weather-location {
    background-color: #fff;
    padding: 20px;
    text-align: center;
    width: 100%;
}

.weather-location h2 {
    color: #000;
    font-family: 'Inter', sans-serif;
    font-size: 48px;
    font-weight: bold;
    text-shadow: none;
    margin: auto;
    padding: 0;
}

.weather-location h2 span {
    font-size: 24px;
}

.forecast-current-inner h3 {
    font-size: 24px;
    margin: 10px 0;
}
.forecast-current-inner .tempbig, .forecast-current-inner .tempnight, .forecast-details .icons-temp, .singleday .tempbig, .singleday .tempnight {
    color: #384280;
    font-family: 'Heebo', sans-serif;
    font-size: 48px;
    display: block;
}
.forecast-current-inner .tempnight {
    font-size: 24px;
}
.forecast-current-inner .icons-main, .singleday .icons-main {
    font-family: 'Inter', sans-serif;
    font-size: 19px;
    color: #384280;
}
.hourtopline {
    background-color: #125FB9;
    height: 14px;
}
.hourforecast {
    height: 294px;
    float: left;
    margin-left: 8px;
    cursor: pointer;
}
.hourforecastinner {
    width: 92px;
    background-color: #fefefe;
    height: 249px;
    text-align: center;
    float: left;
}
.hourforecastinner .tempsmall {
    color: #384280;
    font-family: 'Heebo', sans-serif;
    font-size: 26px;
    font-weight: bold;
    display: block;
}
.hourforecastinner .hourimg {
    margin: 16px auto 0;
    height: 36px;
}
.hourforecastinner .hourimg img, .slick-slide img {
    margin: auto;
}
.time {
    height: 31px;
    color: #fefefe;
    font-family: 'Heebo', sans-serif;
    font-size: 16px;
    text-align: center;
}
.hourforecastinner .otherinfo {
    color: #384280;
    font-family: 'Heebo', sans-serif;
    font-size: 16px;
}

.hourforecast .moreinfobox {
    display: none;
    width: 220px;
    float: left;
    background-color: #fefefe;
    height: 249px;
}

.hourforecast .moreinfoinner {
    background-color: #E7E8EE;
    margin: 7px 7px 7px;
    height: 238px;
    padding: 6px;
    color: #384280;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
}
.hourforecast .moreinfoinner div{
    margin: 7px 0;
}
.hourforecast .moreinfoinner span {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
}

.hourforecast .moreinfoinner .weatherdescriiption {
    color: #000;
    font-family: 'Heebo', sans-serif;
    font-size: 16px;
}

.otherinfo .wind, .otherinfo .snow, .otherinfo .rain {
    margin: 8px auto;
}

.forecast-foreground .prev, .forecast-foreground .next {
    width: 40px;
    height: 88px;
    background: url(/images/next_hour.png) no-repeat scroll center center #E1A226;
    position: absolute;
    right: -30px;
    z-index: 9999;
    top: 123px;
    cursor: pointer;
}
.forecast-foreground .prev {
    background: url(/images/prev_hour.png) no-repeat scroll center center #E1A226;
    position: absolute;
    left: -30px;
    z-index: 9999;
    top: 123px;
}
.forecast-details div {
    display: inline-block;
    float: left;
    clear: none;
    width: auto;
}
.forecast-details {
    margin-bottom: 20px;
    padding: 11px;
    width: 96%;
}
.forecast-details .icons-temp {
    font-size: 29px;
}

.emptyspace{
    width: 4%;
}

.forecast-details div.otherdetails {
    width: 81%;
    color: #384280;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    margin-left: 43px;
}
.forecast-details div.otherdetails div {
    padding: 16px;
    margin: auto 23px;
}


.forecast-chart {
    width: 100%;
}

.forecast-current-inner .small-description {
    font-size: 12px;
}
.nextdays {
    padding: 10px 0 20px 10px;
    max-width: 100%;
}
.nextdaysinfo {
    color: #fefefe;
    font-family: 'Heebo', sans-serif;
    font-size: 20px;
    padding: 0 16px;
}

.daytopline {
    height: 10px;
}
.singleday {
    padding: 0;
    max-width: 210px;
    margin-right: 22px;
}
.singleday h3, .singleday h4 {
    font-size: 22px;
    margin: 0;
    padding: 2px;
    color: #000;
}
.singleday h4 {
    font-size: 20px;
}
.singledayinner {
    padding: 10px;
}
.singledayinner img, .forecast-current-inner img, .hourforecastinner img{
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
}
.singleday .tempbig {
    font-size: 30px;
}
.singleday .tempnight {
    font-size: 16px;
}
.singleday .icons-main {
    font-size: 13px;
    background-size: 28px 143px;
    height: 21px;
    padding: 0px 0 0 17px;
}
.singleday .icon-wind {
    background-position-y: -23px !important;
}
.singleday .icon-sunrise {
    background-position-y: -46px !important;
}
.singleday .icon-sunset {
    background-position-y: -63px !important;
}
.singleday .small-description {
    font-size: 8px;
}

@media (max-width: 768px) {
    .forecast-details div.details-temps {
        width: 100%;
    }

    .singleday {
        max-width: 100%;
        width: 100%;
    }

    .current-hours {
       margin-left: 0;
    }
}

.smallmapablock, #mapablock.smallmapablock, #image-map.smallmapablock, #mapablock img#mapofcz.smallmapablock {
    max-width: 570px !important;
    max-height: 320px !important;
}

.smallkrajeinnerblock {
    left: 0;
}

.obci div h2, .obci div div {
    z-index: 9999;
}
.obci div h2, .abceda a:link, .abceda a:visited, .abceda a:hover, .letter {
    text-shadow: none;
    font-family: 'Heebo', sans-serif;
    font-size: 36px;
    font-weight: bold;
}
.letter {
    font-size: 48px;
    color: #C8D1FF;
    text-shadow: 2px 2px 1px rgba(0.1, 0.1, 0.1, 0.25);
}
.abceda, .abceda a:link, .abceda a:visited, .abceda a:hover {
    font-size: 20px;
    color: #C8D1FF;
    background-color: #686D9A;
    padding: 10px;
}
.abceda a:hover {
    text-decoration: underline;
}

ul.obcilist {
    list-style: none;
}

ul.obcilist li:nth-child(1):before {
    content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: #C8D1FF; /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 0.3em; /* Also needed for space (tweak if needed) */
    margin-left: -0.3em; /* Also needed for space (tweak if needed) */
}
ul.obcilist ul.obcisublist, ul.obcisublist li:nth-child(1)::before, ul.obcisublist li::before {
    list-style: none;
    content: "";
}
ul.obcisublist {
    overflow: hidden;
    padding: 13px;
    flex-wrap: wrap;
    display: flex;
}

ul.obcisublist li {
    float: left;
    display: block;
    padding: 13px 24px 13px 5px;
}
ul.searchobcilist li {
    float: none;
}
ul.obcisublist {
    background-color: #686D9A;
}
ul.obcisublist li a:link, ul.obcisublist li a:visited, ul.obcisublist li a:hover {
    color: #fefefe;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    text-decoration: underline;
}

ul.obcisublist li a:hover {
    text-decoration: none;
}
ul.obcisublist li a.maincity {
    font-size: 24px;
    color: yellow;
}

.btn-group, .btn-group-vertical {
    background-color: #8286ad;
}
.breadcrumb, .breadcrumb a:link, .breadcrumb a:visited, .breadcrumb a:hover {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    background: none;
    color: #cdcdcd;
}
.breadcrumb a:link, .breadcrumb a:visited, .breadcrumb a:hover {
    text-decoration: underline;
    color: #fefefe;
}
.breadcrumb a:hover {
    text-decoration: none;
}


.breadcrumb-item + .breadcrumb-item::before {
    color: #cdcdcd;
    content: ">";
}

h3.searchterm {
    font-family: 'Heebo', sans-serif;
    font-size: 36px;
    font-weight: bold;
    padding: 14px 0 0;
}

.ui-front {
    z-index: 999999;
}

.emptyfooter p, .emptyfooter .maintext {
    color: #fefefe;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.emptyfooter p span {
    background-color: rgba(97,99,129,0.5);
    padding: 20px;
}
.kontaktbox {
    padding: 19px;
}
.kontaktbox div {
    color: #fefefe;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
}
.kontaktbox div span#a {
    background: url(/images/a.png) no-repeat scroll 0 0 transparent;
    width: 30px;
    height: 28px;
    display: inline-block;
    position: relative;
    top: 8px;
}
#btn-back-to-top {
    position: fixed;
    bottom: 20px;
    display: block;
    padding: 0 10px 8px;
    border-radius: 20px;
    right: 15.4vw;
    z-index: 999;
    border: 1px solid #8286ad;
}
#btn-back-to-top {
    background-color: #686d9a;
}
#image-map {
    top: 0;
    z-index: 9;
    position: absolute;
}
@media (max-width: 991px) {
    #mapablock, #image-map, #mapablock img#mapofcz {
        width: 100vw;
        height: 100%;
        position: relative;
        display: block;
    }
    #image-map {
        top: 0;
        z-index: 9;
        position: absolute;
    }
    #btn-back-to-top {
        right: 5vw;
        bottom: 5vh;
    }
}

@media screen and (min-width: 1280px) {
    .body, .emptyfooter {
        background-size: 100% auto;
    }
}