* {box-sizing: border-box;}
html{overflow-x: hidden; max-width: 100%;}
body {overflow-x: hidden; max-width: 100%; margin: 0; padding: 0; background-color: #ecf0f1; font-family: 'Open Sans', sans-serif; font-size: 13px; color: #4c4c4c;}
h1 {padding: 0; margin: 0 0 15px 0; font-size:22px;}
h2 {margin:0 0 10px 0; font-size:17px; font-weight:400}
h3 {margin:0 0 12px 0; font-size:14px; font-weight:900}
input {font-family:Arial}
input:focus, textarea:focus {outline: 1.5px solid #27ae6096;}
table {width:100%; padding:0; margin:10px 0; border:none}
tr {line-height:150%}
td {margin:0; font-weight: 600;border-bottom:1px solid #EDEDED; font-size:13px; padding:6px 3px}
img {border:none}
hr {border: none; width:100%; background: #EDEDED; height:1px; margin: 18px 0; padding:0}
a {font-size: 13px;color: #4c4c4c}
[class*="column"] {width: 100%; padding: 10px;}
.wrapper {margin: 0 auto; padding: 0 3%; width: 100%; display: flex; flex-wrap: wrap;}
.left {float:left}
.right {float:right}
.reset {float: none;}
.alignleft {text-align:left}
.alignright {text-align:right}
.clear {clear:both}
.button {transition: background-color 0.2s; padding:10px;border-radius:6px; text-decoration:none;font-weight:600;font-size:14px;background:#27ae60;color:#FFFFFF}
.button:hover {background:#1a8a49}
.grey {color:#999999}
.small {font-size: 11px}
/* HEADER */
#header .wrapper {display: flex; flex-wrap: wrap; padding: 0;}
#header {background-color: #FFFFFF;margin: 0; padding: 0;}
#navbar-menu {width: 100%; display: flex; position: -webkit-fixed; position: static; top: 0; background-color: #FFF; box-shadow: 0 0 5px rgb(117, 117, 117); margin-bottom: 15px; z-index: 2;}
#headerleft {height: 95px; margin:0; padding:0;}
#headerright {margin: 0px; flex-grow: 1; position: relative;}
#login {margin:35px 0 0 0; float: right; display: none;}
#login ul {float:right;list-style-type: none; margin: 0; padding: 0}
#login ul li {float:left; margin-left:10px; padding: 0}
#login ul li a {color: #a0a4a2; padding: 0 4px; text-decoration: underline; font-size:12px; font-weight: 600}
#login ul li a:hover {color: #e10a19; text-decoration: none}
#mainmenu {height: 41px; margin:6px 0 0 0; width:100%; background:#ECF0F1; border-radius: 0px; display: flex; justify-content: end; position: absolute; flex-direction: row;}
#mainmenu ul {list-style-type:none; float:left; margin:0; padding:0; display: none; flex-grow: 1;}
#mainmenu ul li {float:left; white-space: nowrap;}
#mainmenu ul li a {text-align: center; display:block; font-weight:900; font-size:14px; color: #4c4c4c; padding: 23px 10px; text-decoration: none;}
#mainmenu ul li a:hover {text-decoration:underline}
#mobile-cont {display: initial; position: relative;}
#mobile-menu {--headersize: 95px; z-index: 999; position: absolute; width: 205px; right: -230px; top: var(--headersize); transition: right 0.6s ease; background: #eff3f5; height: calc(100vh - var(--headersize)); box-shadow: 0 0 18px #555; border-left: 1px solid #27ae60;}
#mobile-menu.open {right: 0px;}
#mobile-menu ul {padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; flex-grow: initial; border-top: 3px solid #27ae60}
#mobile-menu ul li a {display: block; font-weight: 600; font-size: 14px; background: none; text-decoration: none; text-align: center; padding: 20px 10px;}
#mobile-menu ul li {border-bottom: 1px solid #c1d5b5;}
#mobile-menu #mobile-login a {font-weight: 600; font-size: 13px; padding: 17px 10px;}
#search {width: 100%; height:36px; padding: 0 5px; display: block; align-self: center;}
#search input {width:100%; color:#999999; font-size: 14px; padding:9px 12px; border:1px solid #EDEDED; border-radius: 6px; background: #FFFFFF;float:left}
#search a {transition: background-color 0.2s; border-radius: 6px; display:block; min-width:37px; height: 36px; border:none; background:url('../img/search-button.svg') center center no-repeat; background-color: #27ae60; background-size: 70%; float:right; margin-left: 5px;}
#search a:hover {background-color: #1a8a49}
#search form {display: flex; justify-content: end;}
#header_hp {width: 100%; margin: 0 auto; text-align:center; padding:0}
#header_complaint {background:#ECF0F1; margin:15px auto 0 auto; width: 90%; border-radius: 6px; display: flex; padding: 18px;}
#header_complaint form {width: 100%; display: flex; justify-content: space-between; flex-direction: column;}
#header_complaint input {text-align: center; float:left; color:#a0a4a2; padding:13px; font-size: 14px; border-radius:6px; min-width: 100%; border:none;}
#header_complaint a {transition: background-color 0.2s; min-width: 184px; margin: 10px auto 0; width: 75%; float:right; color:#FFFFFF; font-weight:600; background: #27ae60; padding:13px 20px; font-size: 16px; border-radius:6px; border:none; text-decoration:none; white-space: nowrap;}
#header_complaint a:hover {background: #1a8a49}
#main {padding: 30px 0; min-height: 550px}
#main .wrapper, #footer .wrapper {padding:0 3%; width: 100%; display: flex; flex-wrap: wrap}
/*#main .wrapper{gap: 15px;}*/
.container {width: 100%; padding:20px;border-radius:6px; background:#FFFFFF;}
.container.dark {background:#CECECE;}
.height300 {height:auto}
/* LOGOS */
#logoD-img {max-height: 100%; height: auto;}
#logo-img {max-height: 100%; height: 37px; margin: 7px 0 0 10px;}
#footer #logofooter {border: 0px;}
#footer #logofooter img{max-width: 100%; height: 37px;}
#menu-icon {transition: background-color 0.2s; height: 36px; min-width: 37px; background:url('../img/menu-icon.png') center center no-repeat; background-color: #27ae60; display: block; border-radius: 6px; align-self: center; margin-right: 2px; background-size: cover;}
#menu-icon:hover {background-color:#1a8a49}
.social-container {display: flex; justify-content: center; gap: 8px; margin-top: 13px;}
.social-logo {width: 33px; height: 33px;}
.article_img {width:100%; height: 110px; overflow:hidden; float:left; border-radius: 6px 6px 6px 6px; background:url('../img/vasestiznosti_inverse.svg') center center no-repeat #28a040; background-size: 70%;}
.cont-form {width:100%; float:left}
table.progressbar {height:15px; width:100%; border-radius:6px;background:#27ae60; padding:0; overflow:hidden}
table.progressbar td {color:#FFFFFF; margin:0; font-weight:600; height:15px; padding: 0}
table.progressbar td.red {background:#b61a25; text-align:right}
ul.tag {list-style-type:none; margin:0; padding:0}
ul.tag li {float:left; padding:0; margin:0 6px 6px 0}
ul.tag li a {display: block; padding:3px 6px; border-radius:6px; background: #999999; color:#FFFFFF; text-decoration:none}
ul.tag li a:hover {background: #27ae60}
.status {border-radius:6px; width:100%; border: 1px solid #EDEDED}
.status span {display:block; padding: 6px 12px; font-weight: 900}
table.blank td {font-weight: normal;border:none; padding:0}
tr:last-child td {border-bottom:none}
.table-container {overflow-x: auto; margin-top:20px; border: 1px solid #e1e1e1; border-radius: 6px;}
table.complains {width:100%; background-color: #27ae60;}
table.complains thead {color:#FFFFFF; margin-bottom:20px; box-shadow: inset 0px 3px 0px -1px #1a8a49;}
/* table.complains th {} */
table.complains thead th {text-align: center; box-shadow: inset 0px 3px 0px -1px #1a8a49; background:#888; color:#FFFFFF; font-size: 11px; white-space: nowrap;}
table.complains thead th:first-child {border-radius:6px 0 0 0}
table.complains thead th:last-child {border-radius: 0 6px 0 0}
table.complains thead th.up {background: url('up.png') right center no-repeat}
table.complains thead th.down {background: url('down.png') right center no-repeat}
table.complains thead th.active {transition: background-color 0.2s; transform: scaleX(1.03); position: relative; top: 2px; background-color: #27ae60; box-shadow: 0px 3px 8px 0.8px #2e2e2e4a;}
table.complains thead th.active:hover {background-color: #1a8a49;}
table.complains thead th.active a {font-size: 12px; margin-right: 10px;}
table.complains thead th a {padding: 12px 9px; display:block; color:#FFF; font-size: 11px; text-decoration: none}
table.complains thead th a:hover {text-decoration: underline;}
table.complains thead th.active a:hover {text-decoration: none}
table.complains tbody tr {height: 55px; margin-bottom: 10px; }
table.complains tbody td {background:#ecf0f1; padding: 8px 9px; border-left: 1px solid #D7D7D7; border-bottom:none; text-align:center}
table.complains tbody tr:nth-child(odd) td {background-color:#FFFFFF; border-left: 1px solid #F3F3F3}
table.complains tbody tr td:first-child {border: none;}
table.complains tbody tr:first-child td {padding-top: 12px;}
table.complains td {font-size: 11px;}
table.complains td h3 {margin:0; padding:0; font-weight:700; font-size:13px}
table.complains td.light {color:#999999}
table.complains td.center {text-align:center}
table.complains td.alignleft {text-align:left}
table.complains tbody tr td.colspanleft {border-left: none; padding-left: 0px}
table.complains .user {display: flex; flex-direction: column;}
table.complains .user img {width: fit-content; margin: 0 auto;}
#footer {background:#4b4e4d; padding:40px 0; color:#FFFFFF; font-size: 12px;}
#footer a {color:#FFFFFF}
#footer table, #footer table td {padding:0; margin:0; border:0; font-weight:normal;}
#footer .column6 {padding: 9px 0px 10px; border-top: 1px solid #FFFFFF;}
input.details {height: 40px; width: 100%; color:#4C4C4C; font-size: 13px; padding:9px 12px; border:1px solid #EDEDED; border-radius: 6px; background: #FFFFFF;}
input.watermark {color: #999999}
textarea.details {width: 100%; color:#4C4C4C; font-size: 13px; padding:9px 12px; border:1px solid #EDEDED; border-radius: 6px; background: #FFFFFF; float:left}
.note {float:right; width: 100%; margin-left: 5px; margin-top: 5px;}
#form_status, #form_subjectfilter {
color:#A0A4A2; padding: 10px 45px 10px 12px; border:1px solid #D7D7D7; border-radius:6px; font-weight:600
}
.mobile-flex {display: flex; flex-direction: column;}
.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 3px 8px; white-space: nowrap; overflow: hidden; font-size: 15px; }
.autocomplete-suggestion img {vertical-align: middle; margin-right: 4px;}
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #C00; }
input.submit {
margin: 0;
padding: 11px 13px;
border: none;
border-radius: 5px;
color: #fff;
font-size: 14px;
cursor: pointer;
background-color: #27ae60;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
}
input.submit:hover {
background-color: #1a8a49;
}
.error, .msg-error {
color: #900;
}
.msg-info {
color: #090;
}
.homepagebox {height:auto; margin-bottom: 10px;}
table.homepagelist {margin:0; padding:0}
table.homepagelist tr {height:40px}
table.homepagelist td a {width: 100%; white-space: nowrap; text-overflow: ellipsis; display: block; height:20px; overflow:hidden; text-decoration:none}
table.homepagelist td{max-width: 100px;}
table.homepagelist span {display: initial;}
table.homepagelist td.grey.small {display: none;}
.live {clear: both; color: #c00}
.infobox {display: block;}
.infobox-text {width: 100%; display: flex; align-self: center; justify-content: center;}
.infobox-banner-marketingtext {
margin-top: 0px;
font-family: oswald;
font-weight: 500;
font-size: clamp(1rem, 6vw, 2rem);
text-align: center;
color: #5b7b8b;
margin-bottom: 0;
}
.infobox-banner-marketingtext-smaller {
max-width: 85%;
margin: 0px;
font-family: oswald;
font-weight: 500;
font-size: 19px;
line-height: 1.5;
text-align: left;
color: #4c4c4c;
}
.infobox-maintext {min-height: 80px; background-size: auto 100%; margin-bottom: 10px;}
.infobox-banner-wrapper {
display: flex;
flex-direction: column;
height: auto;
padding: 10px 20px;
}
.infobox-banner-wrapper-blue {
padding: 10px 20px;
}
.height-auto {height: auto;}
/*#claim, #postup {width: 100%;}*/
#postup-container {
display: flex;
margin: 0 auto;
width: 217px;
}
#postup-container li {
display: flex;
align-items: center;
padding: 7px 12px;
justify-content: start;
counter-increment: my-counter
}
#postup-container li::before {
content: counter(my-counter);
color: #27ae60;
font-weight: bold;
border: 1.5px solid #919191;
border-radius: 50%;
--size: 20px;
line-height: var(--size);
min-width: var(--size);
min-height: var(--size);
margin-right: 10px;
}
#postup-container ol {
display: flex;
flex-wrap: wrap;
color: #a0a4a2;
font: 14px 'Open Sans', sans-serif;
font-weight: 500;
white-space: nowrap;
padding: 0;
width: 100%;
counter-reset: my-counter;
justify-content: center;
flex-direction: column;
list-style-type: none
}
#compl-form{
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 20px;
gap: 12px;
}
#claim {
margin-top: 15px;
color: #a0a4a2;
text-align: center;
font: 25px 'Open Sans', sans-serif;
font-weight: 500;
}
.page-list {margin-top:20px; width: 100%;}
.page-list div{display: flex; justify-content: center; flex-wrap: wrap;}
.page-list a {margin: 2px;}
.page-list span {align-self: center;}
.case-detail {flex-direction: column;}
.case-detail-firm {background: #cecece; border-radius: 0 0 6px 6px;}
.case-detail-consumer {width: auto; margin-right:0; float:left; text-align:center; font-weight: 300; font-size: 14px;}
@media only screen and (min-width: 320px) {
.infobox-banner-wrapper {flex-direction: row;}
.infobox-text {width: 70%;}
}
@media only screen and (min-width: 768px) {
.case-detail {flex-direction: row;}
.case-detail-firm {background: #cecece; border-radius: 0 6px 6px 0;}
.case-detail-consumer {width:min-content; margin-right:20px; float:left; text-align:center}
.article_img {height: 150px; background-size: 80%;}
#login {display: block;}
.wrapper {padding: 0 5%;}
#main .wrapper, #footer .wrapper {padding: 0 5%;}
#main {padding:40px 0;}
h1 {padding: 0; margin: 0 0 20px 0; font-size: 26px;}
h2 {margin:0 0 20px 0; font-size:20px; font-weight:400}
table.complains td h3 {font-size:16px; font-weight: 600;}
table.complains td {font-size: 13px;}
.note {float:right; width: 300px; margin-left: 20px; margin-top: 0;}
.cont-form {width:50%; float:left}
.mobile-flex {display: flex; flex-direction: row;}
.column1 {width: 8.33%;}
.column2 {width: 16.66%;}
.column3 {width: 25%;}
.column4 {width: 33.33%;}
.column5 {width: 41.66%;}
.column6 {width: 50%;}
.column7 {width: 58.33%;}
.column8 {width: 66.66%;}
.column9 {width: 75%;}
.column10 {width: 83.33%;}
.column11 {width: 91.66%;}
.column12 {width: 100%;}
#footer .column6 {height: 95px; padding: 0 11px 0 24px; border-left: 1px solid #FFFFFF; border-top: 0px;}
#footer #logofooter {border: 0px; padding: 0 24px 0 0;}
#footer #logofooter img{height: 42px;}
.left-s {float: left;}
.right-s {float: right;}
.reset-s {float: none;}
.height-auto-s {height: auto;}
.homepagebox {height:250px; margin-bottom: 10px;}
.infobox {display: block;}
.infobox-text {height: 100%; width: 100%;}
.infobox-banner-marketingtext {font-size: 34px; font-weight: 600;}
.infobox-banner-marketingtext-smaller {font-family: oswald; font-weight: 600; font-size: 23px; max-width: 70%;}
.infobox-maintext {height: 100px; background-size: auto 100%; margin-bottom: 0;}
.infobox-banner-wrapper {
display: flex;
flex-direction: row;
height: auto;
padding: 10px 20px;
}
.infobox-banner-wrapper-blue {
padding: 10px 20px;
}
#header_complaint {margin: 25px auto 20px auto; width: 85%; padding: 15px;}
#header_complaint input {min-width: auto; font-size: 16px; text-align: initial; flex-grow: 1; margin-right: 20px;}
#header_complaint a {width: auto; font-size:18px; margin: 0;}
#header_complaint form {width: 100%; display: flex; justify-content: space-between; flex-direction: row;}
#navbar-menu {position: static; border: 0; box-shadow: 0 0 0;}
#header .wrapper {display: flex; flex-wrap: wrap; padding: 0 5%; position: static;}
#headerright {margin-left: 18px; overflow: hidden; flex-grow: 1; position: static;}
#headerleft {width:49px; height:124px; padding:0;}
#header {position: static }
#header_hp {padding: 0 0 20px 0}
#logo-img {margin: 20px 0 0 0; max-height: none; height: 42px;}
#postup-container > div {
/*width: 50%;*/
padding: 10px 12px;
}
#postup-container {
display: flex;
margin: 0 auto;
width: 100%;
}
#postup-container li {
display: flex;
align-items: center;
padding: 7px 4px;
justify-content: start;
counter-increment: my-counter;
width: auto;
}
#postup-container li::before {
content: counter(my-counter);
color: #27ae60;
font-weight: bold;
border: 1.5px solid #919191;
border-radius: 50%;
--size: 24px;
line-height: var(--size);
min-width: var(--size);
min-height: var(--size);
margin-right: 10px;
}
#postup-container ol {
display: flex;
flex-wrap: wrap;
color: #a0a4a2;
font: 14px 'Open Sans', sans-serif;
font-weight: 500;
white-space: nowrap;
padding: 0;
width: 100%;
counter-reset: my-counter;
justify-content: center;
margin: 0;
justify-content: space-evenly;
flex-wrap: nowrap;
flex-direction: row;
}
#claim {font: 36px 'Open Sans', sans-serif; font-weight: 300;}
#headerright nav {
display: block;
}
#mainmenu {border: 0; justify-content: space-between; position: static; border-radius: 6px; height: 50px; flex-direction: row;}
#mainmenu ul {display: flex;}
#mainmenu ul li a {font-size:13px; padding: 17px 8px;}
#menu-icon {display: none;}
#mobile-cont {display: none;}
#search {
width: auto;
display: block;
height: auto;
padding:7px 9px 7px 0;
align-self: auto;
}
table.homepagelist span {display: none;}
table.homepagelist td.grey.small {display: table-cell;}
}
@media only screen and (min-width: 992px) {
.wrapper {padding: 0 10%;}
#main .wrapper, #footer .wrapper {padding: 0 10%;}
#header .wrapper {display: flex; padding: 0 10%;}
.height300 {height:340px}
.column1-l {width: 8.33%;}
.column2-l {width: 16.66%;}
.column3-l {width: 25%;}
.column4-l {width: 33.33%;}
.column5-l {width: 41.66%;}
.column6-l {width: 50%;}
.column7-l {width: 58.33%;}
.column8-l {width: 66.66%;}
.column9-l {width: 75%;}
.column10-l {width: 83.33%;}
.column11-l {width: 91.66%;}
.column12-l {width: 100%;}
#footer .column6 {height: 95px; padding: 0 11px 0 12px; border-left: 1px solid #FFFFFF; border-top: 0px;}
.left-l {float: left;}
.right-l {float: right;}
.reset-l {float: none;}
.height-auto-l {height: auto;}
.infobox {display: block;}
.infobox-banner-marketingtext {font-size: 22px; font-weight: 600;}
.infobox-banner-marketingtext-smaller {font-family: oswald; font-weight: 600; font-size: 19px;}
.infobox-maintext {height: 184px; background-size: auto 54%; margin-bottom: 0;}
.infobox-banner-wrapper {
display: flex;
flex-direction: column;
height: 340px;
padding: 30px 20px 30px 20px;
}
.infobox-banner-wrapper-blue {
height: 340px;
padding: 30px 20px 30px 20px;
}
#postup-container > div {
/*width: auto;*/
padding: 10px 12px;
}
#mainmenu ul li a {font-size: 14px; padding: 17px 10px;}
#claim {font: 40px 'Open Sans', sans-serif; font-weight: 300;}
#header_complaint {margin:35px auto 20px auto; width: 85%; padding: 18px;}
#header_complaint input {min-width: auto; font-size:20px; text-align: initial; flex-grow: 1; margin-right: 20px;}
#header_complaint a {width: auto; font-size:20px; margin: 0;}
#header_complaint form {width: 100%; display: flex; justify-content: space-between; flex-direction: row;}
}
.box {
padding: 10px;
}