* {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; }