/*
* Unlimited tema (child od Twenty-One): brend, zaglavlje, podnožje i osnovni elementi korisničke zone.
* Korpa ima svoj stil u templates/orderforms/unlimited_cart/css/custom.css.
*/
:root {
--u-ink: #142033;
--u-ink-2: #3b4a5e;
--u-muted: #66758a;
--u-meta: #536276;
--u-slate: #5a7290;
--u-line: #d9e1ea;
--u-line-2: #e8edf3;
--u-paper: #f3f6f9;
--u-blue: #1f5ad1;
--u-blue-600: #1849ad;
--u-blue-50: #eaf0fc;
--u-green: #0f8a5f;
--u-green-600: #0b6f4c;
--u-green-50: #e5f4ed;
--u-amber: #f2b63c;
--u-amber-50: #fff6e3;
--u-red: #c4382d;
--u-red-50: #fdeeec;
--u-violet: #6a43d6;
--u-violet-50: #f0ebfd;
--u-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
/* Zaobljenja i senke (jedno mesto za celu korisničku zonu) */
--u-r: 12px;
--u-r-sm: 8px;
--u-r-lg: 14px;
--u-shadow: 0 1px 2px rgba(20, 32, 51, .05);
--u-shadow-hover: 0 10px 24px -14px rgba(20, 32, 51, .28);
--u-ease: .15s ease;
}
/* Lucide ikonice (sprite u includes/u-icons.tpl) */
.u-ico {
display: inline-block;
flex: 0 0 auto;
width: 1.15em;
height: 1.15em;
vertical-align: -0.2em;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
body,
body.primary-bg-color {
font-family: var(--u-font);
color: var(--u-ink);
background-color: var(--u-paper);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--u-font);
font-weight: 800;
letter-spacing: -0.015em;
color: var(--u-ink);
}
a {
color: var(--u-blue);
}
a:hover {
color: var(--u-blue-600);
}
:focus-visible {
outline: 3px solid rgba(31, 90, 209, .4);
outline-offset: 2px;
}
/* Okvir fokusa samo kada se radi tastaturom (Tab); posle klika mišem nema isprekidanog okvira ni senke */
:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
outline: 0;
}
.btn:focus:not(:focus-visible),
.btn.focus:not(:focus-visible),
.btn:not(:disabled):not(.disabled):active:focus:not(:focus-visible),
.btn:not(:disabled):not(.disabled).active:focus:not(:focus-visible),
.show > .btn.dropdown-toggle:focus:not(:focus-visible) {
box-shadow: none;
}
/* Tamna traka: svetao okvir pri radu tastaturom */
header.header .u-utility :focus-visible {
outline: 2px solid rgba(255, 255, 255, .75);
outline-offset: 2px;
}
/* ---------- Zaglavlje ---------- */
header.header {
position: relative;
z-index: 1020;
background-color: #fff;
border-bottom: 1px solid var(--u-line);
}
.u-utility {
font-size: 13px;
color: #c4cfdc;
background: var(--u-ink);
}
.u-utility .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 40px;
}
header.header .u-utility a {
color: #e6ecf3;
text-decoration: none;
}
header.header .u-utility a:hover {
color: #fff;
text-decoration: none;
}
/* Linkovi u traci: na prelaz mišem mekana svetla podloga (bez podvlačenja); razmak je u paddingu, pa se ništa ne pomera */
header.header .u-utility .u-utility__links > a,
header.header .u-utility .u-utility__site,
header.header .u-utility .u-utility__phone {
margin: -4px -8px;
padding: 4px 8px;
border-radius: 7px;
transition: background-color var(--u-ease), color var(--u-ease);
}
header.header .u-utility .u-utility__links > a:hover,
header.header .u-utility .u-utility__site:hover,
header.header .u-utility .u-utility__phone:hover {
background: rgba(255, 255, 255, .1);
}
.u-utility__site .u-ico {
transition: transform var(--u-ease);
}
header.header .u-utility .u-utility__site:hover .u-ico {
transform: translateX(-3px);
}
@media (prefers-reduced-motion: reduce) {
header.header .u-utility .u-utility__site:hover .u-ico {
transform: none;
}
}
.u-utility__phone {
font-weight: 700;
white-space: nowrap;
}
.u-utility__phone i,
.u-utility__phone .u-ico {
margin-right: 4px;
color: var(--u-amber);
}
.u-utility__phone .u-ico {
width: 14px;
height: 14px;
vertical-align: -2px;
}
/* Van radnog vremena telefona: "Nazad na UNLIMITED.RS" ili aktivni problem sa strane statusa */
header.header .u-utility .u-utility__site {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
white-space: nowrap;
}
.u-utility__site .u-ico {
width: 15px;
height: 15px;
color: var(--u-amber);
}
header.header .u-utility .u-utility__issue {
display: inline-flex;
flex: 0 1 auto;
align-items: center;
gap: 8px;
min-width: 0;
padding: 3px 12px 3px 10px;
font-weight: 600;
color: #fff;
background: rgba(255, 255, 255, .08);
border-radius: 999px;
}
header.header .u-utility .u-utility__issue:hover {
text-decoration: none;
background: rgba(255, 255, 255, .14);
}
.u-utility__issuelabel {
flex: 0 0 auto;
font-weight: 800;
}
.u-utility__issuetext {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.u-utility__pulse {
display: inline-block;
flex: 0 0 auto;
width: 8px;
height: 8px;
vertical-align: 1px;
background: var(--u-amber);
border-radius: 50%;
animation: u-tb-pulse 2s ease-out infinite;
}
.u-utility__status .u-utility__pulse {
margin-right: 6px;
}
.u-utility__issue.is-critical .u-utility__pulse,
.u-utility__issue.is-high .u-utility__pulse {
background: #ff6b5e;
}
@keyframes u-tb-pulse {
0% { box-shadow: 0 0 0 0 rgba(255, 140, 110, .65); }
70%, 100% { box-shadow: 0 0 0 7px rgba(255, 140, 110, 0); }
}
header.header .u-utility .u-utility__login {
white-space: nowrap;
}
.u-utility__right {
flex: 0 0 auto;
}
header.header .u-utility .u-utility__login .u-ico {
width: 14px;
height: 14px;
vertical-align: -2px;
}
@media (max-width: 575px) {
.u-utility__issuelabel {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.u-utility__pulse {
animation: none;
}
}
.u-utility__hours {
margin-left: 6px;
font-weight: 500;
color: #9fb0c3;
}
.u-utility__right,
.u-utility__links {
display: flex;
align-items: center;
gap: 16px;
}
.u-utility__links {
gap: 20px;
}
header.header .u-utility .u-utility__login {
font-weight: 700;
color: #fff;
}
header.header .u-utility .u-utility__admin {
font-weight: 700;
color: var(--u-amber);
}
.u-utility__icon {
position: relative;
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
padding: 0;
color: #e6ecf3;
background: transparent;
border: 0;
border-radius: 9px;
cursor: pointer;
}
.u-utility__icon:hover,
.u-utility__icon:focus-visible,
.u-utility__icon[aria-describedby] {
color: #fff;
background: rgba(255, 255, 255, .1);
}
.u-utility__count {
position: absolute;
top: 2px;
right: 0;
min-width: 16px;
height: 16px;
padding: 0 4px;
font-size: 10px;
font-weight: 800;
line-height: 16px;
color: var(--u-ink);
background: var(--u-amber);
border-radius: 999px;
}
.u-acct__btn {
display: flex;
align-items: center;
gap: 8px;
padding: 3px 10px 3px 3px;
font-family: var(--u-font);
font-size: 13px;
font-weight: 700;
color: #fff;
background: transparent;
border: 0;
border-radius: 999px;
cursor: pointer;
}
.u-acct__btn:hover,
.u-acct__btn[aria-expanded="true"] {
background: rgba(255, 255, 255, .1);
}
.u-acct__name {
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 575px) {
.u-acct__name {
display: none;
}
.u-utility__hours {
display: none;
}
}
.u-avatar {
display: inline-grid;
flex: 0 0 auto;
place-items: center;
width: 40px;
height: 40px;
font-size: 14px;
font-weight: 800;
letter-spacing: .02em;
color: #fff;
background: var(--u-blue);
border-radius: 50%;
}
.u-avatar--sm {
width: 28px;
height: 28px;
font-size: 11px;
}
.u-avatar--lg {
width: 60px;
height: 60px;
font-size: 21px;
}
header.header .dropdown-menu,
.u-acct__menu {
padding: 6px;
border: 1px solid var(--u-line);
border-radius: 14px;
box-shadow: 0 20px 40px -20px rgba(20, 32, 51, .3);
}
.u-acct__menu {
min-width: 290px;
margin-top: 6px;
}
.u-acct__head {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 6px;
padding: 10px 10px 12px;
border-bottom: 1px solid var(--u-line-2);
}
.u-acct__head strong {
display: block;
font-size: 15px;
color: var(--u-ink);
}
.u-acct__head small {
display: block;
font-size: 12px;
color: var(--u-muted);
}
header.header .dropdown-menu li.dropdown-item {
padding: 0;
background: transparent;
}
header.header .dropdown-menu a.dropdown-item,
.u-acct__menu a.dropdown-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px !important;
font-size: 14px;
font-weight: 600;
color: var(--u-ink-2);
border-radius: 8px;
}
header.header .dropdown-menu a.dropdown-item:hover,
header.header .dropdown-menu a.dropdown-item:focus,
.u-acct__menu a.dropdown-item:hover {
color: var(--u-ink);
text-decoration: none;
background: var(--u-paper);
}
header.header .dropdown-menu a.dropdown-item .badge {
margin-left: auto;
}
.u-menu-ico {
width: 18px;
text-align: center;
color: var(--u-slate);
}
span.u-menu-ico {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
}
span.u-menu-ico .u-ico {
width: 16px;
height: 16px;
vertical-align: 0;
}
header.header .u-cart-btn__ico {
width: 20px;
height: 20px;
vertical-align: 0;
}
header.header .dropdown-divider {
margin: 6px 4px;
border-color: var(--u-line-2);
}
/* Logo je 30% veći (57 px umesto 44 px); razmak trake je za isto toliko manji, pa je zaglavlje iste visine (74 px) */
header.header .u-mainbar {
padding: 8.5px 0;
}
header.header .logo-img {
height: 57px;
max-height: none;
width: auto;
}
header.header .u-mainbar .navbar-brand {
margin-right: 24px;
padding: 0;
}
.u-toolbar {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
margin-left: auto;
}
header.header .toolbar .nav-link,
header.header .toolbar .btn.nav-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 46px;
height: 46px;
padding: 0 14px;
font-weight: 700;
color: var(--u-ink);
border: 1.5px solid var(--u-line);
border-radius: 10px;
}
header.header .toolbar .nav-link:hover {
color: var(--u-blue);
border-color: var(--u-blue);
}
header.header .toolbar .nav-link .badge {
position: static;
min-width: 22px;
padding: 4px 6px;
font-size: 12px;
font-weight: 800;
color: #fff;
background: var(--u-blue);
border-radius: 999px;
opacity: 1;
}
header.header .toolbar .fa-bars {
font-size: 18px;
}
header.header .toolbar button.nav-link[aria-expanded="true"] {
color: #fff;
background: var(--u-ink);
border-color: var(--u-ink);
}
header.header .u-mainbar .u-cta {
display: inline-flex;
align-items: center;
height: 46px;
padding: 0 20px;
font-size: 15px;
font-weight: 700;
color: #fff;
background: var(--u-blue);
border: 0;
border-radius: 10px;
}
header.header .u-mainbar .u-cta:hover,
header.header .u-mainbar .u-cta:focus {
color: #fff;
background: var(--u-blue-600);
}
/* Dugme "Prijava" sa čovečuljkom; animacija: includes/u-lang.tpl (uLoginAnim) */
header.header .u-mainbar .u-cta--login,
.u-cta--login {
position: relative;
gap: 10px;
padding: 0 20px 0 9px;
isolation: isolate;
}
.u-la__ico {
position: relative;
display: inline-grid;
flex: 0 0 auto;
place-items: center;
width: 30px;
height: 30px;
background: rgba(255, 255, 255, .18);
border-radius: 50%;
}
.u-la__ico svg {
width: 19px;
height: 19px;
overflow: visible;
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.u-la__arm {
opacity: 0;
}
.u-la__head,
.u-la__fig {
transform-box: fill-box;
transform-origin: 50% 100%;
}
/* 1. klimanje: glava blago klimne (na ~6 s i kada se pređe mišem) */
.u-la--klimanje .u-la__head {
animation: u-la-nod 6s ease-in-out 1.5s infinite;
}
.u-la--klimanje:hover .u-la__head {
animation: u-la-nod-once .9s ease-in-out;
}
@keyframes u-la-nod {
0%, 84%, 100% { transform: none; }
87% { transform: translateY(1.4px) rotate(-4deg); }
90% { transform: translateY(-.3px); }
93% { transform: translateY(1.1px) rotate(3deg); }
96% { transform: none; }
}
@keyframes u-la-nod-once {
0%, 100% { transform: none; }
25% { transform: translateY(1.4px) rotate(-4deg); }
50% { transform: translateY(-.3px); }
75% { transform: translateY(1.1px) rotate(3deg); }
}
/* 2. mahanje: podignuta ruka mahne */
.u-la--mahanje .u-la__arm {
opacity: 1;
transform-box: view-box;
transform-origin: 18.2px 15.6px;
animation: u-la-wave 7s ease-in-out 1.2s infinite;
}
.u-la--mahanje:hover .u-la__arm {
animation: u-la-wave-once 1.1s ease-in-out;
}
@keyframes u-la-wave {
0%, 80%, 100% { transform: none; }
83% { transform: rotate(-24deg); }
87% { transform: rotate(16deg); }
91% { transform: rotate(-20deg); }
95% { transform: rotate(10deg); }
}
@keyframes u-la-wave-once {
0%, 100% { transform: none; }
20% { transform: rotate(-24deg); }
40% { transform: rotate(16deg); }
60% { transform: rotate(-20deg); }
80% { transform: rotate(10deg); }
}
/* 3. puls: mekan talas oko ikonice */
.u-la--puls .u-la__ico::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
animation: u-la-ring 3.2s ease-out 1s infinite;
}
@keyframes u-la-ring {
0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
45%, 100% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
}
.u-la--puls:hover .u-la__ico {
background: rgba(255, 255, 255, .28);
}
/* 4. skok: čovečuljak poskoči */
.u-la--skok .u-la__fig {
animation: u-la-hop 5.5s ease-in-out 1.4s infinite;
}
.u-la--skok:hover .u-la__fig {
animation: u-la-hop-once .7s ease-in-out;
}
@keyframes u-la-hop {
0%, 84%, 100% { transform: none; }
88% { transform: translateY(-3.5px); }
92% { transform: translateY(0) scale(1.06, .92); }
95% { transform: translateY(-1px); }
}
@keyframes u-la-hop-once {
0%, 100% { transform: none; }
35% { transform: translateY(-3.5px); }
65% { transform: translateY(0) scale(1.06, .92); }
82% { transform: translateY(-1px); }
}
/* 5. sjaj: odsjaj pređe preko dugmeta, ikonica blago zasvetli */
.u-cta--login.u-la--sjaj {
overflow: hidden;
}
.u-la--sjaj::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .32) 50%, transparent 70%);
transform: translateX(-110%);
animation: u-la-shine 6s ease-in-out 1s infinite;
pointer-events: none;
}
.u-la--sjaj .u-la__ico {
animation: u-la-glow 6s ease-in-out 1s infinite;
}
.u-la--sjaj:hover::before {
animation: u-la-shine-once .8s ease-out;
}
@keyframes u-la-shine {
0%, 72% { transform: translateX(-110%); }
92%, 100% { transform: translateX(110%); }
}
@keyframes u-la-shine-once {
0% { transform: translateX(-110%); }
100% { transform: translateX(110%); }
}
@keyframes u-la-glow {
0%, 76%, 100% { background: rgba(255, 255, 255, .18); }
84% { background: rgba(255, 255, 255, .36); }
}
@media (prefers-reduced-motion: reduce) {
.u-cta--login *,
.u-cta--login::before,
.u-cta--login *::after {
animation: none !important;
}
}
/* */
/* Meni na širokom ekranu: u istom redu sa logotipom.
Visina stavke ostaje ispod 30px, jer Twenty-One skripta tada višak stavki prebacuje u "Više". */
@media (min-width: 1200px) {
header.header .u-mainbar .navbar-collapse {
order: 2;
justify-content: flex-end;
}
header.header .u-mainbar .u-toolbar {
order: 3;
margin-left: 18px;
}
header.header .u-nav > li > a.u-nav-link,
header.header .u-nav > li > a {
display: block;
padding: 4px 12px;
font-size: 15px;
font-weight: 600;
line-height: 20px;
color: var(--u-ink-2);
border-radius: 8px;
}
header.header .u-nav > li > a:hover,
header.header .u-nav > li.show > a {
color: var(--u-ink);
text-decoration: none;
background: var(--u-paper);
}
header.header .u-nav .dropdown-toggle::after {
margin-left: 6px;
vertical-align: 2px;
border-top-color: var(--u-slate);
}
header.header .u-nav .dropdown-menu {
min-width: 250px;
margin-top: 18px;
}
/* "Više": stavke koje ne staju u red Twenty-One skripta prebacuje ovde; izgledaju kao ostali podmeniji */
header.header .u-nav .collapsable-dropdown-menu > li {
padding: 0;
background: transparent;
}
header.header .u-nav .collapsable-dropdown-menu > li > a {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
font-size: 14px;
font-weight: 600;
line-height: 1.3;
color: var(--u-ink-2);
border-radius: 8px;
}
header.header .u-nav .collapsable-dropdown-menu > li > a:hover,
header.header .u-nav .collapsable-dropdown-menu > li > a:focus {
color: var(--u-ink);
text-decoration: none;
background: var(--u-paper);
}
header.header .u-nav .collapsable-dropdown-menu span.u-menu-ico.u-top-ico {
display: inline-flex;
}
header.header .u-nav .collapsable-dropdown-menu {
min-width: 230px;
}
}
/* Ikonica stavke glavnog menija se vidi samo u "Više" */
span.u-menu-ico.u-top-ico {
display: none;
}
/* Širok ekran 1200-1299px (kontejner 1140px): uži razmaci i korpa bez natpisa, da ceo meni stane u red bez "Više" */
@media (min-width: 1200px) and (max-width: 1299.98px) {
header.header .u-nav > li > a.u-nav-link,
header.header .u-nav > li > a {
padding: 4px 8px;
font-size: 14.5px;
}
header.header .u-mainbar .u-toolbar {
margin-left: 10px;
}
header.header .u-cart-btn .u-cart-btn__label {
display: none !important;
}
}
/* Mobilni meni (ispod 1200px): panel sa redovima umesto gole liste linkova */
@media (max-width: 1199px) {
/* Bootstrap ovde skida bočni razmak kontejnera, pa bi logo i meni dodirivali ivicu ekrana */
header.header .u-mainbar > .container {
padding-right: 15px;
padding-left: 15px;
}
header.header .u-mainbar .navbar-collapse.show,
header.header .u-mainbar .navbar-collapse.collapsing {
margin: 14px 0 0;
padding: 12px;
background: #fff;
border: 1px solid var(--u-line);
border-radius: 16px;
box-shadow: 0 18px 40px -24px rgba(20, 32, 51, .35);
}
header.header #mainNavbar a,
header.header #mainNavbar a:hover,
header.header #mainNavbar a:focus {
text-decoration: none;
}
header.header #mainNavbar .search {
width: 100%;
height: 46px;
margin: 0 0 8px !important;
background: var(--u-paper);
border: 0;
border-radius: 10px;
}
header.header #mainNavbar .search .btn,
header.header #mainNavbar .search .form-control {
height: 46px;
color: var(--u-ink-2);
background: transparent;
border: 0;
}
header.header #mainNavbar .navbar-nav {
width: 100%;
margin: 0 !important;
}
header.header #mainNavbar .navbar-nav + .navbar-nav {
margin-top: 6px !important;
padding-top: 6px;
border-top: 1px solid var(--u-line);
}
header.header #mainNavbar .navbar-nav > li {
border-bottom: 1px solid var(--u-line-2);
}
header.header #mainNavbar .navbar-nav > li:last-child {
border-bottom: 0;
}
header.header #mainNavbar .navbar-nav > li > a {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 50px;
padding: 12px 8px !important;
font-size: 16px;
font-weight: 700;
color: var(--u-ink);
border-radius: 10px;
}
header.header #mainNavbar .navbar-nav > li > a .u-menu-ico {
margin-right: auto;
}
header.header #mainNavbar .navbar-nav > li > a:hover,
header.header #mainNavbar .navbar-nav > li > a:focus {
background: var(--u-paper);
}
header.header #mainNavbar .dropdown-toggle::after {
width: 9px;
height: 9px;
margin: 0 6px 4px 0;
border: solid var(--u-slate);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
transition: transform .15s ease;
}
header.header #mainNavbar .show > .dropdown-toggle::after {
margin-bottom: -2px;
transform: rotate(-135deg);
}
/* Podmeni: svetla podloga, stavke kao redovi sa ikonicom u beloj pločici */
header.header #mainNavbar .dropdown-menu {
position: static;
float: none;
margin: 2px 0 10px;
padding: 6px;
background: var(--u-paper);
border: 0;
border-radius: 12px;
box-shadow: none;
}
header.header #mainNavbar .dropdown-menu .dropdown-divider {
margin: 4px 10px;
border-color: var(--u-line);
}
header.header #mainNavbar .dropdown-menu a.dropdown-item {
gap: 12px;
min-height: 48px;
padding: 7px 10px !important;
font-size: 15px;
font-weight: 600;
color: var(--u-ink-2);
border-radius: 10px;
}
header.header #mainNavbar .dropdown-menu a.dropdown-item:hover,
header.header #mainNavbar .dropdown-menu a.dropdown-item:focus,
header.header #mainNavbar .dropdown-menu a.dropdown-item:active {
color: var(--u-ink);
background: #fff;
}
header.header #mainNavbar .dropdown-menu span.u-menu-ico {
width: 34px;
height: 34px;
color: var(--u-blue);
background: #fff;
border: 1px solid var(--u-line-2);
border-radius: 9px;
}
header.header #mainNavbar .dropdown-menu a.dropdown-item:hover span.u-menu-ico {
border-color: #cddcf7;
background: var(--u-blue-50);
}
}
.u-acct__who {
min-width: 0;
}
/* "Promeni nalog": red na dnu menija naloga (pravila su jača od pravila za linkove u tamnoj traci) */
header.header .u-utility .u-acct__menu a.u-acct__switch {
display: flex;
align-items: center;
gap: 12px;
margin: 6px -6px -6px;
padding: 12px 14px;
color: var(--u-ink);
text-decoration: none;
background: var(--u-paper);
border-top: 1px solid var(--u-line-2);
border-radius: 0 0 14px 14px;
transition: background-color var(--u-ease);
}
header.header .u-utility .u-acct__menu a.u-acct__switch:hover,
header.header .u-utility .u-acct__menu a.u-acct__switch:focus-visible {
color: var(--u-ink);
text-decoration: none;
background: var(--u-blue-50);
}
.u-acct__switchico {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 32px;
height: 32px;
color: var(--u-blue);
background: #fff;
border: 1px solid var(--u-line);
border-radius: 9px;
transition: color var(--u-ease), background-color var(--u-ease), border-color var(--u-ease);
}
.u-acct__switchico .u-ico {
width: 16px;
height: 16px;
}
a.u-acct__switch:hover .u-acct__switchico {
color: #fff;
background: var(--u-blue);
border-color: var(--u-blue);
}
.u-acct__switchtext {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
line-height: 1.25;
}
.u-acct__switchtext strong {
font-size: 14px;
font-weight: 700;
}
.u-acct__switchtext small {
font-size: 12px;
color: var(--u-muted);
}
.u-acct__switchgo {
width: 16px;
height: 16px;
color: #a9b6c6;
transition: transform var(--u-ease), color var(--u-ease);
}
a.u-acct__switch:hover .u-acct__switchgo {
color: var(--u-blue);
transform: translateX(2px);
}
header.header .u-acct__menu a.u-acct__logout,
header.header .u-acct__menu a.u-acct__logout .u-menu-ico {
color: var(--u-red);
}
header.header .u-acct__menu a.u-acct__logout:hover {
background: var(--u-red-50);
}
/* ---------- Meni naloga: tamna "staklena" ploča ----------
Samo meni naloga (.u-acct__menu) u gornjoj traci; ostali padajući meniji ostaju kakvi su.
Providna tamnoplava podloga sa zamućenjem (backdrop-filter); bez podrške za zamućenje: puna tamna boja. */
header.header .u-acct__menu {
width: 316px;
min-width: 0;
max-width: calc(100vw - 16px);
margin-top: 8px;
padding: 8px;
color: #f4f7fc;
background: rgba(20, 35, 59, .9);
-webkit-backdrop-filter: blur(16px) saturate(140%);
backdrop-filter: blur(16px) saturate(140%);
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 16px;
box-shadow:
0 16px 48px rgba(10, 20, 40, .24),
0 4px 12px rgba(10, 20, 40, .12),
inset 0 1px 0 rgba(255, 255, 255, .08);
z-index: 1060;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
header.header .u-acct__menu {
background: #17263e;
}
}
header.header .u-acct__menu.show {
animation: u-acct-in .16s cubic-bezier(.2, .7, .3, 1);
}
/* "translate" (ne "transform"), da ne smeta položaju koji Bootstrap postavlja preko transform */
@keyframes u-acct-in {
from {
opacity: 0;
translate: 0 -5px;
}
to {
opacity: 1;
translate: 0 0;
}
}
@media (prefers-reduced-motion: reduce) {
header.header .u-acct__menu.show {
animation: none;
}
}
/* zaglavlje: inicijali, ime, firma, ID */
header.header .u-acct__menu .u-acct__head {
gap: 12px;
margin: 0 0 6px;
padding: 6px 6px 12px;
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
header.header .u-acct__menu .u-acct__head .u-avatar {
width: 40px;
height: 40px;
font-size: 14px;
box-shadow: 0 0 0 2px rgba(255, 255, 255, .12);
}
header.header .u-acct__menu .u-acct__head strong {
font-size: 15.5px;
font-weight: 700;
line-height: 1.3;
color: #f8fafc;
overflow-wrap: anywhere;
}
header.header .u-acct__menu .u-acct__head small {
margin-top: 1px;
font-size: 13px;
line-height: 1.35;
color: #afc0d8;
overflow-wrap: anywhere;
}
/* stavke */
header.header .u-acct__menu a.dropdown-item {
gap: 12px;
min-height: 40px;
padding: 9px 12px !important;
font-size: 14px;
font-weight: 600;
color: #e8eef8;
background: transparent;
border-radius: 10px;
transition: background-color .15s ease, color .15s ease;
}
header.header .u-acct__menu a.dropdown-item .u-menu-ico {
width: 18px;
font-size: 15px;
color: #8fa8cc;
transition: color .15s ease;
}
header.header .u-acct__menu a.dropdown-item:hover,
header.header .u-acct__menu a.dropdown-item:focus {
color: #fff;
text-decoration: none;
background: rgba(120, 155, 210, .16);
}
header.header .u-acct__menu a.dropdown-item:hover .u-menu-ico,
header.header .u-acct__menu a.dropdown-item:focus .u-menu-ico {
color: #cfe0fa;
}
header.header .u-acct__menu a.dropdown-item:focus-visible {
outline: 2px solid #8db4ff;
outline-offset: -2px;
}
header.header .u-acct__menu a.dropdown-item:active {
background: rgba(120, 155, 210, .24);
}
header.header .u-acct__menu a.dropdown-item .badge {
color: #fff;
background: rgba(255, 255, 255, .14);
}
header.header .u-acct__menu .dropdown-divider {
margin: 6px 6px;
border-top: 1px solid rgba(255, 255, 255, .1);
}
/* odjava: prepoznatljiva, ali ne agresivna */
header.header .u-acct__menu a.dropdown-item.u-acct__logout,
header.header .u-acct__menu a.dropdown-item.u-acct__logout .u-menu-ico {
color: #ff777d;
}
header.header .u-acct__menu a.dropdown-item.u-acct__logout:hover,
header.header .u-acct__menu a.dropdown-item.u-acct__logout:focus {
color: #ff9095;
background: rgba(255, 90, 100, .12);
}
header.header .u-acct__menu a.dropdown-item.u-acct__logout:hover .u-menu-ico,
header.header .u-acct__menu a.dropdown-item.u-acct__logout:focus .u-menu-ico {
color: #ff9095;
}
/* "Promeni nalog": svetlija staklena površina na dnu */
header.header .u-utility .u-acct__menu a.dropdown-item.u-acct__switch {
width: auto;
gap: 12px;
margin: 8px -8px -8px;
padding: 11px 14px !important;
color: #f8fafc;
background: rgba(255, 255, 255, .06);
border-top: 1px solid rgba(255, 255, 255, .1);
border-radius: 0 0 16px 16px;
}
header.header .u-utility .u-acct__menu a.dropdown-item.u-acct__switch:hover,
header.header .u-utility .u-acct__menu a.dropdown-item.u-acct__switch:focus {
color: #fff;
background: rgba(255, 255, 255, .11);
}
header.header .u-acct__menu .u-acct__switchico {
width: 32px;
height: 32px;
color: #fff;
background: var(--u-blue);
border: 0;
border-radius: 9px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
header.header .u-acct__menu a.u-acct__switch:hover .u-acct__switchico {
background: #2f6ae6;
}
header.header .u-acct__menu .u-acct__switchtext strong {
font-size: 14px;
color: #f8fafc;
}
header.header .u-acct__menu .u-acct__switchtext small {
font-size: 12.5px;
color: #afc0d8;
}
header.header .u-acct__menu .u-acct__switchgo {
color: #8fa8cc;
}
header.header .u-acct__menu a.u-acct__switch:hover .u-acct__switchgo {
color: #fff;
}
/* Obaveštenja (zvonce) */
.popover.popover-user-notifications {
min-width: 320px;
padding: 6px;
font-family: var(--u-font);
border: 1px solid var(--u-line);
border-radius: 14px;
box-shadow: 0 20px 40px -20px rgba(20, 32, 51, .3);
}
.popover-user-notifications ul li {
min-height: 0;
padding: 0;
border-bottom: 1px solid var(--u-line-2);
}
.popover-user-notifications ul li a {
display: flex;
gap: 12px;
padding: 12px;
font-size: 14px;
color: var(--u-ink-2);
border-radius: 10px;
}
.popover-user-notifications ul li a:hover {
background: var(--u-paper);
}
.popover-user-notifications ul li i.fas,
.popover-user-notifications ul li i.far {
float: none;
padding-top: 2px;
font-size: 18px;
}
.popover-user-notifications ul li i.fa-exclamation-triangle {
color: #d99a1e;
}
.popover-user-notifications ul li i.fa-info-circle {
color: var(--u-blue);
}
.popover-user-notifications ul li .message {
margin-left: 0;
}
.popover-user-notifications ul li.none {
padding: 18px 12px;
font-weight: 600;
color: var(--u-muted);
}
/* ---------- Naslov stranice i putanja ---------- */
@media (min-width: 1300px) {
.container {
max-width: 1240px;
}
}
/* Širi ekrani: više prostora za sadržaj (1360 px od 1440, 1400 px od 1600), uz iste bočne margine */
@media (min-width: 1440px) {
.container {
max-width: 1360px;
}
}
@media (min-width: 1600px) {
.container {
max-width: 1400px;
}
}
/* Bočni meni stalne širine (300 px) od 1200 px, a sadržaj dobija ostatak */
@media (min-width: 1200px) {
#main-body .row > .u-sbcol {
flex: 0 0 300px;
max-width: 300px;
}
#main-body .row > .u-maincol {
flex: 1 1 0;
max-width: calc(100% - 300px);
}
}
.master-breadcrumb {
background-color: transparent;
}
.master-breadcrumb .breadcrumb {
margin: 0;
padding: 16px 0 0;
font-size: 12px;
font-weight: 600;
background: none;
}
.master-breadcrumb .breadcrumb-item a {
color: var(--u-muted);
}
.master-breadcrumb .breadcrumb-item a:hover {
color: var(--u-blue);
}
.master-breadcrumb .breadcrumb-item.active {
color: var(--u-ink-2);
}
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
content: "/";
color: #b3bfcd;
}
.master-breadcrumb.u-has-pagehead {
background: #fff;
border-bottom: 1px solid var(--u-line);
}
.master-breadcrumb.u-has-pagehead > .container {
display: flex;
flex-direction: column;
padding-top: 22px;
padding-bottom: 24px;
}
.master-breadcrumb.u-has-pagehead .breadcrumb {
order: -1;
margin: 0 0 8px;
padding: 0;
}
.u-pagehead__title {
margin: 0;
font-size: 30px;
line-height: 1.2;
}
/* isti izgled kada naslov zaglavlja nije h1 (članak baze znanja) */
p.u-pagehead__title {
font-weight: 800;
letter-spacing: -0.015em;
}
.u-pagehead__lead {
margin: 6px 0 0;
font-size: 15px;
color: var(--u-muted);
}
.u-pagehead__stats {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
margin: 10px 0 0;
font-size: 13px;
font-weight: 700;
color: var(--u-ink-2);
}
.u-pagehead__stats span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.u-pagehead__stats span::before {
content: "";
width: 6px;
height: 6px;
background: var(--u-slate);
border-radius: 50%;
}
.u-pagehead__stats span:nth-child(2)::before {
background: var(--u-green);
}
.u-pagehead__stats span.is-warn {
color: #8a5a00;
}
.u-pagehead__stats span.is-warn::before {
background: var(--u-amber);
}
@media (max-width: 767px) {
.master-breadcrumb.u-has-pagehead > .container {
padding-top: 16px;
padding-bottom: 18px;
}
.u-pagehead__title {
font-size: 24px;
}
}
body.u-in-cart .master-breadcrumb {
display: none;
}
body.u-in-cart section#main-body {
padding-top: 24px;
}
section#main-body {
padding: 28px 0 64px;
}
/* ---------- Osnovni elementi ---------- */
.btn {
font-weight: 700;
border-radius: var(--u-r-sm);
transition: color var(--u-ease), background-color var(--u-ease), border-color var(--u-ease), box-shadow var(--u-ease);
}
.btn:focus-visible {
outline: 0;
box-shadow: 0 0 0 3px rgba(31, 90, 209, .35);
}
.btn-sm,
.btn-group-sm > .btn {
border-radius: 7px;
}
/* Jedinstvena visina glavnih kontrola (40 px) */
.btn.u-btn-40 {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 40px;
padding: 0 16px;
font-size: 14px;
line-height: 1;
white-space: nowrap;
}
.btn-primary {
background-color: var(--u-blue);
border-color: var(--u-blue);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
background-color: var(--u-blue-600);
border-color: var(--u-blue-600);
}
.btn-success {
background-color: var(--u-green);
border-color: var(--u-green);
}
.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active {
background-color: var(--u-green-600);
border-color: var(--u-green-600);
}
.btn-default {
color: var(--u-ink-2);
background-color: #fff;
border-color: var(--u-line);
}
.btn-default:hover,
.btn-default:focus {
color: var(--u-ink);
background-color: var(--u-paper);
border-color: #c5d0dc;
}
.btn-info {
color: #fff;
background-color: var(--u-blue);
border-color: var(--u-blue);
}
.btn-danger {
background-color: var(--u-red);
border-color: var(--u-red);
}
label {
font-weight: 600;
color: var(--u-ink-2);
}
.form-control,
.custom-select {
color: var(--u-ink);
border-color: var(--u-line);
border-radius: var(--u-r-sm);
}
.form-control:focus,
.custom-select:focus {
border-color: var(--u-blue);
box-shadow: 0 0 0 4px var(--u-blue-50);
}
.input-group > .form-control:not(:last-child),
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group > .form-control:not(:first-child),
.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-group-text {
color: var(--u-muted);
background: var(--u-paper);
border-color: var(--u-line);
}
.card,
.primary-content .card {
border: 1px solid var(--u-line);
border-radius: var(--u-r);
box-shadow: var(--u-shadow);
}
.card-header:first-child {
border-radius: var(--u-r) var(--u-r) 0 0;
}
.card-footer:last-child {
border-radius: 0 0 var(--u-r) var(--u-r);
}
.card-header,
.card-footer {
background-color: #fff;
border-color: var(--u-line-2);
}
.primary-content .card {
margin-bottom: 20px;
}
.primary-content .card-body {
padding: 24px;
}
.primary-content .card-title {
margin-bottom: 18px;
font-size: 20px;
font-weight: 800;
}
.list-group-item {
border-color: var(--u-line-2);
}
.list-group-item-action {
color: var(--u-ink-2);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
color: var(--u-ink);
background-color: var(--u-paper);
}
.list-group-item.active {
color: var(--u-blue-600);
background-color: var(--u-blue-50);
border-color: var(--u-line-2);
box-shadow: inset 3px 0 0 var(--u-blue);
}
.table {
color: var(--u-ink);
}
.table thead th {
border-bottom-color: var(--u-line);
}
.table td,
.table th {
border-top-color: var(--u-line-2);
}
.badge {
font-weight: 800;
border-radius: 999px;
}
.badge-info,
.badge-primary {
background-color: var(--u-blue);
}
.alert {
font-size: 14px;
border: 1px solid transparent;
border-radius: 12px;
}
.alert-info {
color: #1a3f8f;
background: var(--u-blue-50);
border-color: #cddcf7;
}
.alert-success {
color: var(--u-green-600);
background: var(--u-green-50);
border-color: #bfe3d2;
}
.alert-warning {
color: #7a5200;
background: var(--u-amber-50);
border-color: #f6dca4;
}
.alert-danger,
.alert-error {
color: #8f2219;
background: var(--u-red-50);
border-color: #f1c7c3;
}
.alert.u-alert-compact {
margin-bottom: 16px;
padding: 10px 14px;
}
.nav-tabs {
border-bottom: 1px solid var(--u-line);
}
.nav-tabs .nav-link {
font-weight: 700;
color: var(--u-muted);
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
}
.nav-tabs .nav-link:hover {
color: var(--u-ink);
border-bottom-color: var(--u-line);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
color: var(--u-blue);
background: transparent;
border-bottom-color: var(--u-blue);
}
.nav-pills .nav-link {
font-weight: 700;
color: var(--u-ink-2);
border-radius: 10px;
}
.nav-pills .nav-link.active {
color: #fff;
background: var(--u-blue);
}
.pagination .page-link {
margin: 0 2px;
font-weight: 700;
color: var(--u-ink-2);
border: 1px solid var(--u-line);
border-radius: 8px !important;
}
.pagination .page-item.active .page-link {
color: #fff;
background: var(--u-blue);
border-color: var(--u-blue);
}
.pagination .page-item.disabled .page-link {
color: #a6b2c0;
}
.text-muted {
color: var(--u-muted) !important;
}
/* Statusi: mekane oznake umesto punih boja */
.label,
.div-service-status .label {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
margin: 0;
padding: 4px 10px;
font-size: 12px;
font-weight: 700;
line-height: 1.3;
color: var(--u-ink-2);
background: var(--u-paper);
border-radius: 999px;
}
.label.status::before,
.div-service-status .label::before {
content: "";
flex: 0 0 auto;
width: 6px;
height: 6px;
background: currentColor;
border-radius: 50%;
}
.label.label-success,
.label.status-active,
.label.status-open,
.label.status-completed,
.label.status-paid,
.label.status-accepted,
.div-service-status .label.label-success {
color: var(--u-green-600);
background: var(--u-green-50);
}
.label.label-warning,
.label.status-pending,
.label.status-pending-transfer,
.label.status-pending-registration,
.label.status-suspended,
.label.status-customer-reply,
.label.status-grace,
.label.status-redemption,
.label.status-onhold,
.label.status-inprogress,
.label.status-in-progress,
.label.status-on-hold,
.label.status-draft,
.label.status-delivered,
.div-service-status .label.label-warning {
color: #8a5a00;
background: var(--u-amber-50);
}
.label.label-danger,
.label.status-expired,
.label.status-unpaid,
.label.status-overdue,
.label.status-fraud,
.label.status-dead,
.label.status-lost,
.div-service-status .label.label-danger {
color: #a3281e;
background: var(--u-red-50);
}
.label.label-info,
.label.status-answered,
.label.status-collections,
.div-service-status .label.label-info {
color: var(--u-blue-600);
background: var(--u-blue-50);
}
.label.label-default,
.label.status-terminated,
.label.status-cancelled,
.label.status-closed,
.label.status-transferred-away,
.label.status-refunded,
.label.status-payment-pending,
.div-service-status .label.label-default {
color: var(--u-muted);
background: #edf1f5;
}
.label.status-custom {
color: #fff;
}
/* ---------- Bočni meni ---------- */
.sidebar .card {
margin-bottom: 16px !important;
overflow: hidden;
}
.sidebar .card-header {
padding: 13px 16px;
background: #fff;
border-bottom: 1px solid var(--u-line-2);
}
.sidebar .card-title,
.sidebar .card-sidebar .card-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 800;
color: var(--u-ink);
}
.sidebar .card-title > i:not(.card-minimise) {
width: 16px;
color: var(--u-slate);
text-align: center;
}
.sidebar .card-title .badge {
margin-left: auto;
}
.sidebar .card-sidebar .card-minimise {
order: 9;
margin-left: auto;
padding: 4px;
font-size: 11px;
color: #9aa7b6;
}
.sidebar .card-title .badge + .card-minimise {
margin-left: 6px;
}
.sidebar .card-body {
padding: 16px;
font-size: 14px;
line-height: 1.6;
color: var(--u-ink-2);
overflow-wrap: anywhere;
}
.sidebar .list-group-item {
padding: 10px 16px;
font-size: 14px;
font-weight: 600;
border: 0;
transition: background-color var(--u-ease), color var(--u-ease);
}
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus {
color: var(--u-blue-600);
background-color: var(--u-blue-50);
border-color: transparent;
box-shadow: inset 3px 0 0 var(--u-blue);
}
.sidebar .sidebar-menu-item-wrapper {
align-items: center;
}
.sidebar .sidebar-menu-item-icon-wrapper {
width: 20px;
margin-right: 10px;
color: var(--u-slate);
text-align: center;
}
.sidebar .list-group-item.active .sidebar-menu-item-icon-wrapper {
color: var(--u-blue);
}
.sidebar .sidebar-menu-item-badge .badge,
.sidebar .list-group-item .badge {
min-width: 24px;
padding: 3px 7px;
font-size: 12px;
color: var(--u-ink-2);
background: var(--u-paper);
}
.sidebar .list-group-item.active .badge {
color: #fff;
background: var(--u-blue);
}
.sidebar .card-footer {
padding: 12px 16px;
background: #fff;
}
.sidebar .card-footer .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 36px;
font-size: 13px;
}
/* Akcija u kartici (npr. "Ažuriranje" podataka) je plava, ne zelena: zelena je za statuse */
.sidebar .card-footer .btn-success {
color: #fff;
background-color: var(--u-blue);
border-color: var(--u-blue);
}
.sidebar .card-footer .btn-success:hover,
.sidebar .card-footer .btn-success:focus {
background-color: var(--u-blue-600);
border-color: var(--u-blue-600);
}
/* Kartica "Vaši podaci": identitet, adresa u jednom redu, diskretan PIN, linkovi za nalog */
.u-sb-id {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.sidebar [menuitemname="Client Details"] .card-body {
padding: 14px 16px;
}
.u-sb-id .u-avatar--lg {
width: 40px;
height: 40px;
font-size: 15px;
}
.u-sb-id__text {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.35;
}
.u-sb-id__name {
font-size: 16px;
font-weight: 700;
color: var(--u-ink);
overflow-wrap: anywhere;
}
.u-sb-id__company {
font-size: 14px;
font-weight: 500;
color: var(--u-ink-2);
overflow-wrap: anywhere;
}
.u-sb-id__no {
font-size: 14px;
font-weight: 400;
color: var(--u-meta);
font-variant-numeric: tabular-nums;
}
.sidebar .u-sb-addr {
display: flex;
flex-direction: column;
gap: 1px;
margin: 10px 0 0;
font-size: 14px;
font-style: normal;
line-height: 1.45;
color: var(--u-meta);
}
.u-sb-addr__line {
overflow-wrap: anywhere;
}
.u-sb-body {
margin-top: 12px;
}
/* PIN za podršku: posebna kartica sa naslovom, krupnim PIN-om i uputstvom */
.u-pin {
margin-top: 16px;
padding: 14px 14px 12px;
background: linear-gradient(180deg, var(--u-blue-50) 0%, #fff 100%);
border: 1px solid #d5e1f7;
border-radius: var(--u-r);
}
.u-pin__head {
display: flex;
align-items: center;
gap: 8px;
}
.u-pin__ico {
display: inline-grid;
flex: 0 0 auto;
place-items: center;
width: 26px;
height: 26px;
color: var(--u-blue);
background: #fff;
border: 1px solid #d5e1f7;
border-radius: 7px;
}
.u-pin__ico .u-ico {
width: 14px;
height: 14px;
}
.u-pin__label {
font-size: 13px;
font-weight: 800;
line-height: 1.3;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--u-ink-2);
}
.u-pin__main {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 12px;
}
.u-pin__value {
display: inline-flex;
gap: .45em;
padding: 0;
font-family: var(--u-font);
font-size: 24px;
font-weight: 800;
line-height: 1.1;
letter-spacing: .1em;
color: var(--u-ink);
white-space: nowrap;
background: none;
font-variant-numeric: tabular-nums;
}
.u-pin__acts {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 8px;
}
.u-pin__btn {
position: relative;
display: inline-grid;
flex: 0 0 auto;
place-items: center;
width: 29px;
height: 29px;
padding: 0;
color: var(--u-slate);
background: #fff;
border: 1px solid var(--u-line);
border-radius: var(--u-r-sm);
cursor: pointer;
transition: color var(--u-ease), border-color var(--u-ease), background-color var(--u-ease);
}
.u-pin__btn .u-ico {
grid-area: 1 / 1;
width: 14px;
height: 14px;
}
/* Novi PIN: ikonica oko 25% veća od ikonice za kopiranje */
.u-pin__regen .u-ico {
width: 17px;
height: 17px;
}
/* manja dugmad, a površina za dodir prstom ostaje oko 37 px */
.u-pin__btn::after {
position: absolute;
inset: -4px;
content: "";
}
/* posle kopiranja: kvačica umesto ikonice kopiranja */
.u-pin__copy .u-pin__ok,
.u-pin__copy.is-copied .u-pin__cp {
visibility: hidden;
}
.u-pin__copy.is-copied .u-pin__ok {
visibility: visible;
}
.u-pin__btn:hover,
.u-pin__btn:focus-visible {
color: var(--u-blue);
border-color: var(--u-blue);
}
.u-pin__copy.is-copied {
color: var(--u-green);
background: var(--u-green-50);
border-color: var(--u-green);
}
.u-pin__hint {
margin: 10px 0 0;
font-size: 13.5px;
line-height: 1.45;
color: var(--u-meta);
}
.u-pin__valid,
.u-pin__expired {
display: flex;
align-items: center;
gap: 6px;
margin: 6px 0 0;
font-size: 13px;
font-weight: 600;
line-height: 1.4;
color: var(--u-slate);
}
.u-pin__valid[hidden],
.u-pin__expired[hidden] {
display: none;
}
.u-pin__valid .u-ico {
flex: 0 0 auto;
width: 14px;
height: 14px;
}
.u-pin__expired {
flex-wrap: wrap;
color: #8a5a00;
}
.u-pin__reload {
padding: 0;
font-size: 13px;
font-weight: 700;
color: var(--u-blue);
text-decoration: underline;
background: none;
border: 0;
cursor: pointer;
}
.u-pin.is-expired .u-pin__value {
color: var(--u-muted);
text-decoration: line-through;
text-decoration-thickness: 2px;
}
.u-pin.is-expired .u-pin__copy {
opacity: .5;
cursor: not-allowed;
}
.u-pin__form {
display: contents;
margin: 0;
}
.u-pin__regen:hover .u-ico,
.u-pin__regen:focus-visible .u-ico {
transform: rotate(90deg);
}
.u-pin__regen .u-ico {
transition: transform .2s ease;
}
/* Uska kolona (tablet, uzak bočni meni): PIN ostaje u jednom redu */
@media (min-width: 992px) and (max-width: 1199px) {
.u-pin__value {
font-size: 21px;
}
}
.sidebar .u-sb-links {
display: flex;
flex-direction: column;
margin: 12px -16px -14px;
padding: 4px 0;
border-top: 1px solid var(--u-line-2);
}
.sidebar a.u-sb-links__a {
display: flex;
align-items: center;
gap: 10px;
min-height: 38px;
padding: 7px 16px;
font-size: 14px;
font-weight: 600;
line-height: 1.3;
color: var(--u-ink-2);
text-decoration: none;
transition: background-color var(--u-ease), color var(--u-ease);
}
.u-sb-links__a .u-ico {
width: 17px;
height: 17px;
color: var(--u-slate);
}
.u-sb-links__a span:first-of-type {
flex: 1 1 auto;
min-width: 0;
}
.sidebar a.u-sb-links__a:hover,
.sidebar a.u-sb-links__a:focus-visible {
color: var(--u-blue);
background: #f5f8fc;
}
.sidebar a.u-sb-links__a:focus-visible {
outline: 2px solid rgba(31, 90, 209, .5);
outline-offset: -2px;
}
.sidebar a.u-sb-links__a:hover .u-ico,
.sidebar a.u-sb-links__a:focus-visible .u-ico {
color: var(--u-blue);
}
.u-sb-links__n {
min-width: 22px;
padding: 1px 7px;
font-size: 12px;
font-weight: 700;
text-align: center;
color: var(--u-ink-2);
background: var(--u-paper);
border-radius: 999px;
}
header.header .u-acct__pin b {
letter-spacing: .08em;
color: var(--u-ink);
}
/* ---------- Kontrolna tabla ----------
Jedan sistem za sve kartice: bele kartice sa tankom ivicom, isti radijus, zaglavlje 60 px, razmak 16 px.
Tekst 14–15 px (sporedni najmanje 13 px), naslovi kartica 16 px, brojevi 28 px.
Boje: plava za akcije, žuta samo za plaćanje i upozorenja, zelena za "sve u redu", crvena za prošao rok. */
.u-dwelcome {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 24px;
margin-bottom: 16px;
padding: 16px 24px;
color: #b8c4d2;
background: var(--u-ink);
border-radius: var(--u-r);
}
.u-dwelcome__text {
min-width: 0;
}
h1.u-dwelcome__title {
margin: 0;
font-size: 22px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.015em;
color: #fff;
}
.u-dwelcome__lead {
margin: 2px 0 0;
font-size: 15px;
line-height: 1.5;
}
/* Dugmad: jedna visina, primarno plavo, sekundarno neutralno, plaćanje žuto */
.btn.u-dbtn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 40px;
padding: 0 16px;
font-size: 14px;
font-weight: 700;
line-height: 1;
color: var(--u-ink);
white-space: nowrap;
background: #fff;
border: 1px solid var(--u-line);
border-radius: var(--u-r-sm);
box-shadow: none;
transition: background-color var(--u-ease), border-color var(--u-ease), color var(--u-ease);
}
.btn.u-dbtn .u-ico {
width: 16px;
height: 16px;
}
.btn.u-dbtn:hover {
color: var(--u-ink);
background: #f5f8fc;
border-color: #b9c6d6;
}
.btn.u-dbtn:focus-visible {
outline: 3px solid rgba(31, 90, 209, .35);
outline-offset: 2px;
box-shadow: none;
}
.btn.u-dbtn:active {
background: #edf2f8;
}
.btn.u-dbtn:disabled,
.btn.u-dbtn.disabled {
opacity: .55;
pointer-events: none;
}
.btn.u-dbtn--primary {
color: #fff;
background: var(--u-blue);
border-color: var(--u-blue);
}
.btn.u-dbtn--primary:hover,
.btn.u-dbtn--primary:active {
color: #fff;
background: var(--u-blue-600);
border-color: var(--u-blue-600);
}
.u-dwelcome .btn.u-dbtn--primary {
background: #2b67e6;
border-color: #2b67e6;
}
.u-dwelcome .btn.u-dbtn--primary:hover {
background: #3b76f2;
border-color: #3b76f2;
}
.btn.u-dbtn--pay {
color: var(--u-ink);
background: var(--u-amber);
border-color: var(--u-amber);
}
.btn.u-dbtn--pay:hover,
.btn.u-dbtn--pay:active {
color: var(--u-ink);
background: #e7a923;
border-color: #e7a923;
}
.btn.u-dbtn--warn {
color: #7a4f00;
background: #fff;
border-color: #ecc77a;
}
.btn.u-dbtn--warn:hover {
color: #7a4f00;
background: #fff8e8;
border-color: #e0b04f;
}
.btn.u-dbtn--sm {
height: 34px;
padding: 0 12px;
}
.btn.u-dbtn--block {
width: 100%;
}
.u-dlink {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 5px;
font-size: 14px;
font-weight: 600;
color: var(--u-blue);
white-space: nowrap;
}
.u-dlink .u-ico {
width: 15px;
height: 15px;
transition: transform var(--u-ease);
}
.u-dlink:hover {
color: var(--u-blue-600);
text-decoration: none;
}
.u-dlink:hover span {
text-decoration: underline;
text-underline-offset: 3px;
}
.u-dlink:hover .u-ico {
transform: translateX(2px);
}
/* Četiri broja: cela kartica je link */
.u-tiles {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-bottom: 16px;
}
/* Četiri u redu samo na širokom ekranu; na tabletu i telefonu dva, da natpisi ostanu u jednom redu */
@media (max-width: 1199px) {
.u-tiles {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
a.u-tile {
position: relative;
display: flex;
align-items: center;
gap: 14px;
min-height: 88px;
padding: 16px 18px;
color: var(--u-ink);
text-decoration: none;
background: #fff;
border: 1px solid var(--u-line);
border-radius: var(--u-r);
box-shadow: var(--u-shadow);
transition: box-shadow var(--u-ease), border-color var(--u-ease);
}
a.u-tile:hover {
color: var(--u-ink);
text-decoration: none;
border-color: #b9cdf5;
box-shadow: var(--u-shadow-hover);
}
a.u-tile:focus-visible {
outline: 3px solid rgba(31, 90, 209, .35);
outline-offset: 2px;
}
.u-tile__icon {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 40px;
height: 40px;
color: var(--u-blue);
background: var(--u-blue-50);
border-radius: 10px;
}
.u-tile__icon .u-ico {
width: 20px;
height: 20px;
}
.u-tile__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
}
.u-tile__stat {
font-size: 28px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.u-tile__label {
margin-top: 3px;
font-size: 14px;
font-weight: 500;
line-height: 1.3;
color: var(--u-meta);
}
a.u-tile.is-alert {
border-color: #f0cf8a;
}
a.u-tile.is-alert:hover {
border-color: #e0b04f;
}
a.u-tile.is-alert .u-tile__icon,
a.u-tile.is-warn .u-tile__icon {
color: #a86b00;
background: var(--u-amber-50);
}
a.u-tile.is-alert .u-tile__stat {
color: #a86b00;
}
.u-tile__ok {
position: absolute;
top: 12px;
right: 12px;
display: inline-grid;
place-items: center;
width: 22px;
height: 22px;
color: var(--u-green);
background: var(--u-green-50);
border-radius: 50%;
}
.u-tile__ok .u-ico {
width: 13px;
height: 13px;
}
@media (max-width: 575px) {
a.u-tile {
gap: 10px;
min-height: 76px;
padding: 12px 14px;
}
.u-tile__icon {
width: 36px;
height: 36px;
}
.u-tile__stat {
font-size: 24px;
}
.u-tile__label {
font-size: 13px;
}
.u-tile__ok {
top: 8px;
right: 8px;
}
}
.u-dash-addon {
margin-bottom: 16px;
}
/* Obaveštenja na dnu kontrolne table: poslednje 3 objave (na širokom ekranu u tri kolone) */
.u-dann {
overflow: hidden;
}
.u-dann__list {
display: grid;
grid-template-columns: minmax(0, 1fr);
margin: 0;
padding: 0;
list-style: none;
}
.u-dann__list > li + li {
border-top: 1px solid var(--u-line-2);
}
a.u-dann__item {
display: flex;
flex-direction: column;
gap: 6px;
height: 100%;
padding: 16px 20px 18px;
color: var(--u-ink);
text-decoration: none;
transition: background-color var(--u-ease);
}
a.u-dann__item:hover,
a.u-dann__item:focus-visible {
color: var(--u-ink);
text-decoration: none;
background: var(--u-paper);
}
.u-dann__date {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 700;
color: var(--u-slate);
font-variant-numeric: tabular-nums;
}
.u-dann__date .u-ico {
width: 14px;
height: 14px;
}
.u-dann__title {
display: -webkit-box;
overflow: hidden;
font-size: 15.5px;
font-weight: 800;
line-height: 1.35;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.u-dann__text {
display: -webkit-box;
overflow: hidden;
font-size: 14px;
line-height: 1.5;
color: var(--u-muted);
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.u-dann__go {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: auto;
padding-top: 2px;
font-size: 14px;
font-weight: 700;
color: var(--u-blue);
}
.u-dann__go .u-ico {
width: 15px;
height: 15px;
transition: transform var(--u-ease);
}
a.u-dann__item:hover .u-dann__go .u-ico {
transform: translateX(3px);
}
@media (min-width: 1200px) {
.u-dann__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.u-dann__list > li + li {
border-top: 0;
border-left: 1px solid var(--u-line-2);
}
}
/* Kartice */
.u-db {
display: flex;
flex-direction: column;
gap: 16px;
}
.u-dbc {
display: flex;
flex-direction: column;
min-width: 0;
font-size: 15px;
line-height: 1.5;
color: var(--u-ink-2);
background: #fff;
border: 1px solid var(--u-line);
border-radius: var(--u-r);
box-shadow: var(--u-shadow);
}
.u-dbc__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 60px;
padding: 12px 20px;
border-bottom: 1px solid var(--u-line-2);
}
h2.u-dbc__title {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
margin: 0;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--u-ink);
}
.u-dico {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 32px;
height: 32px;
color: var(--u-blue);
background: var(--u-blue-50);
border-radius: var(--u-r-sm);
}
.u-dico .u-ico {
width: 17px;
height: 17px;
}
.u-dico.is-warn {
color: #a86b00;
background: var(--u-amber-50);
}
.u-dico.is-ok {
color: var(--u-green);
background: var(--u-green-50);
}
.u-dbc__body {
padding: 16px 20px;
}
.u-dbc__foot {
margin-top: auto;
padding: 0 20px 20px;
}
.u-dbc__more {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 20px;
font-size: 14px;
font-weight: 600;
border-top: 1px solid var(--u-line-2);
}
.u-dbg {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
gap: 16px;
align-items: start;
}
.u-dbg--one {
grid-template-columns: minmax(0, 1fr);
}
/* Plaćanje i podrška: iste visine, dugmad ("Plati sada", "Novi tiket") na dnu u istoj ravni */
.u-dbg--pair {
align-items: stretch;
}
.u-dbg__cell {
display: flex;
min-width: 0;
}
.u-dbg__cell > .card {
flex: 1 1 auto;
}
.u-dbg__wide {
grid-column: 1 / -1;
}
/* Prazno stanje i "sve u redu" */
.u-dempty {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 16px;
padding: 20px;
}
.u-dempty__ico {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 44px;
height: 44px;
color: var(--u-blue);
background: var(--u-blue-50);
border-radius: 12px;
}
.u-dempty__ico .u-ico {
width: 22px;
height: 22px;
}
.u-dempty__text {
flex: 1 1 260px;
min-width: 0;
}
.u-dempty__text strong,
.u-dstate strong {
display: block;
font-size: 15px;
font-weight: 700;
color: var(--u-ink);
}
.u-dempty__text p,
.u-dstate p {
margin: 2px 0 0;
font-size: 15px;
line-height: 1.5;
color: var(--u-meta);
}
.u-dstate {
display: flex;
align-items: flex-start;
gap: 12px;
}
.u-dstate__ico {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 36px;
height: 36px;
color: var(--u-green);
background: var(--u-green-50);
border-radius: 50%;
}
.u-dstate__ico.is-neutral {
color: var(--u-blue);
background: var(--u-blue-50);
}
.u-dstate__ico .u-ico {
width: 18px;
height: 18px;
}
/* Aktivne usluge: red sa ikonicom, nazivom i domenom, statusom, datumom plaćanja i dugmadima */
.u-dsvc {
container-type: inline-size;
}
.client-home-cards .list-group.u-dsvc__list {
max-height: none;
margin: 0;
overflow: visible;
border: 0;
border-radius: 0;
}
.client-home-cards .u-dsvc__list .list-group-item.u-dsvc__row {
padding: 0;
background: #fff;
border: 0;
border-bottom: 1px solid var(--u-line-2);
border-radius: 0;
}
.client-home-cards .u-dsvc__list .list-group-item.u-dsvc__row:last-child {
border-bottom: 0;
border-radius: 0 0 var(--u-r) var(--u-r);
}
.div-service-item.u-svci {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) auto auto;
grid-template-areas: "ico name meta btns";
align-items: center;
column-gap: 16px;
row-gap: 8px;
width: 100%;
padding: 14px 20px;
cursor: pointer;
transition: background-color var(--u-ease);
}
.div-service-item.u-svci:hover {
background: #f8fafd;
}
.u-svci__ico {
grid-area: ico;
display: grid;
place-items: center;
width: 40px;
height: 40px;
color: var(--u-blue);
background: var(--u-blue-50);
border-radius: 10px;
}
.u-svci__ico .u-ico {
width: 19px;
height: 19px;
}
.u-svci__ico.is-suspended,
.u-svci__ico.is-pending {
color: #a86b00;
background: var(--u-amber-50);
}
.div-service-item.u-svci .div-service-name {
grid-area: name;
display: flex;
flex-direction: column;
min-width: 0;
margin: 0;
padding: 0;
}
.div-service-item.u-svci .div-service-name > .font-weight-bold {
overflow: hidden;
font-size: 15px;
font-weight: 600 !important;
line-height: 1.35;
color: var(--u-ink);
text-overflow: ellipsis;
white-space: nowrap;
}
.div-service-item.u-svci .div-service-name > .text-domain {
overflow: hidden;
font-size: 14px;
line-height: 1.4;
color: var(--u-meta);
text-overflow: ellipsis;
white-space: nowrap;
}
.u-svci__meta {
grid-area: meta;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
min-width: 0;
}
.div-service-item.u-svci .div-service-status {
width: auto !important;
margin: 0;
text-align: right;
}
.div-service-item.u-svci .div-service-status .label-placeholder {
display: none !important;
}
.div-service-item.u-svci .div-service-status .label:not(.label-placeholder) {
width: auto !important;
max-width: none;
padding: 3px 10px;
font-size: 13px;
font-weight: 600;
}
.u-svci__due {
font-size: 14px;
line-height: 1.4;
color: var(--u-meta);
white-space: nowrap;
}
.u-svci__due small {
font-size: 14px;
}
.u-svci__due span {
margin-left: 4px;
font-weight: 600;
color: var(--u-ink-2);
font-variant-numeric: tabular-nums;
}
.u-svci__due.is-soon span {
color: #a86b00;
}
.u-svci__due.is-past span {
color: var(--u-red);
}
.div-service-item.u-svci .div-service-buttons {
grid-area: btns;
justify-self: end;
display: flex;
align-items: center;
gap: 8px;
margin: 0;
}
.client-home-cards .u-svci .div-service-buttons .btn {
display: inline-flex;
align-items: center;
height: 34px;
padding: 0 12px;
font-size: 13px;
font-weight: 700;
border-radius: var(--u-r-sm);
}
/* Prijava u kontrolni panel (cPanel...): sekundarno dugme, uvek vidljivo */
.client-home-cards .u-svci .div-service-buttons .btn-group-secondary {
display: inline-flex !important;
}
.client-home-cards .u-svci .div-service-buttons:has(.btn-group-secondary) .btn-group-primary {
display: none !important;
}
.client-home-cards .u-svci .div-service-buttons .btn-group-secondary .btn-custom-action:first-child {
color: var(--u-blue);
background: #fff;
border: 1px solid #c9d8f6;
}
.client-home-cards .u-svci .div-service-buttons .btn-group-secondary .btn-custom-action:first-child:hover,
.client-home-cards .u-svci .div-service-buttons .btn-group-secondary .btn-custom-action:first-child:focus-visible {
color: #fff;
background: var(--u-blue);
border-color: var(--u-blue);
}
/* "Detalji": strelica (ceo red je ionako link) */
.client-home-cards .u-svci .div-service-buttons .btn-view-details {
display: inline-grid;
place-items: center;
width: 34px;
padding: 0;
color: var(--u-slate);
background: #fff;
border: 1px solid var(--u-line);
}
.client-home-cards .u-svci .div-service-buttons .btn-view-details span:not(.sr-only),
.client-home-cards .u-svci .div-service-buttons .btn-view-details i {
display: none !important;
}
.client-home-cards .u-svci .div-service-buttons .btn-view-details::after {
content: "";
width: 7px;
height: 7px;
margin-left: -3px;
border: solid currentColor;
border-width: 2px 2px 0 0;
transform: rotate(45deg);
}
.client-home-cards .u-svci:hover .div-service-buttons .btn-view-details {
color: var(--u-blue);
border-color: #b9cdf5;
}
/* Uža kartica (telefon, tablet sa bočnim menijem): naziv i dugmad u prvom redu, status levo i datum desno ispod */
@container (max-width: 620px) {
.div-service-item.u-svci {
grid-template-columns: 40px minmax(0, 1fr) auto;
grid-template-areas:
"ico name btns"
"ico meta meta";
column-gap: 12px;
padding: 14px 16px;
}
.u-svci__meta {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 6px 12px;
}
.div-service-item.u-svci .div-service-status {
text-align: left;
}
}
/* Široka kartica: kolona sa dugmadima iste širine u svim redovima, pa su status i datum poravnati */
@container (min-width: 621px) {
.u-dsvc:has(.btn-group-secondary) .div-service-item.u-svci .div-service-buttons {
justify-content: flex-end;
min-width: 172px;
}
}
/* Telefon: prijava u kontrolni panel ide u treći red (ne skriva se), naziv ostaje čitljiv */
@container (max-width: 420px) {
.div-service-item.u-svci:has(.btn-group-secondary) {
grid-template-areas:
"ico name name"
"ico meta meta"
"ico btns btns";
}
.div-service-item.u-svci:has(.btn-group-secondary) .div-service-buttons {
justify-self: stretch;
}
.div-service-item.u-svci:has(.btn-group-secondary) .div-service-buttons .btn-group-secondary {
flex: 1 1 auto;
}
.div-service-item.u-svci:has(.btn-group-secondary) .div-service-buttons .btn-group-secondary .btn {
justify-content: center;
width: 100%;
}
.u-svci__due small {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
}
/* Plaćanje */
.u-dbill__label {
margin: 0;
font-size: 14px;
font-weight: 500;
color: var(--u-meta);
}
.u-dbill__total {
margin: 2px 0 0;
font-size: 28px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--u-ink);
font-variant-numeric: tabular-nums;
}
.u-dbill.is-late .u-dbill__total {
color: var(--u-red);
}
.u-dbill__sub {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
margin: 4px 0 0;
font-size: 15px;
color: var(--u-ink-2);
}
.u-dtag {
padding: 2px 9px;
font-size: 13px;
font-weight: 600;
border-radius: 999px;
}
.u-dtag.is-late {
color: #a3281e;
background: var(--u-red-50);
}
/* Plaćanje (20261020g): jedan red "Za plaćanje" + iznos + broj računa, ispod račun sa najstarijim rokom (ceo red je link)
i "Prikaži neplaćene račune" kada ih ima više */
.u-dbill__sum {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 2px 12px;
padding: 14px 20px 12px;
}
.u-dbill__sum .u-dbill__label {
font-size: 14px;
}
.u-dbill__sum .u-dbill__total {
margin: 0;
font-size: 22px;
line-height: 1.25;
white-space: nowrap;
}
.u-dbill__sum .u-dbill__sub {
margin: 0;
font-size: 14px;
color: var(--u-meta);
}
.u-dbill__list {
margin: 0;
padding: 0;
list-style: none;
}
a.u-dbill__inv {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 20px;
font-size: 15px;
color: var(--u-ink-2);
text-decoration: none;
border-top: 1px solid var(--u-line-2);
transition: background-color var(--u-ease);
}
a.u-dbill__inv:hover {
color: var(--u-ink-2);
text-decoration: none;
background: #f8fafd;
}
a.u-dbill__inv:focus-visible {
outline: 2px solid rgba(31, 90, 209, .5);
outline-offset: -2px;
}
.u-dbill__main {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
}
.u-dbill__num {
overflow: hidden;
font-weight: 600;
line-height: 1.4;
color: var(--u-ink);
text-overflow: ellipsis;
white-space: nowrap;
}
a.u-dbill__inv:hover .u-dbill__num {
color: var(--u-blue);
}
.u-dbill__due {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2px 8px;
margin-top: 3px;
font-size: 14px;
line-height: 1.4;
color: var(--u-meta);
font-variant-numeric: tabular-nums;
}
a.u-dbill__inv.is-late .u-dbill__due {
color: var(--u-red);
}
.u-dbill__due .u-dtag {
padding: 0 8px;
font-size: 12px;
line-height: 1.6;
}
.u-dbill__amt {
flex: 0 0 auto;
font-weight: 700;
color: var(--u-ink);
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
a.u-dbill__more {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 20px;
font-size: 14px;
font-weight: 600;
border-top: 1px solid var(--u-line-2);
}
a.u-dbill__more .u-ico {
width: 15px;
height: 15px;
}
.u-dbill__text p {
margin: 0;
}
/* Podrška: poslednji tiketi */
.u-dtk {
margin: 0;
padding: 0;
list-style: none;
}
a.u-dtk__row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
text-decoration: none;
border-bottom: 1px solid var(--u-line-2);
transition: background-color var(--u-ease);
}
.u-dtk li:last-child a.u-dtk__row {
border-bottom: 0;
}
a.u-dtk__row:hover {
background: #f8fafd;
}
a.u-dtk__row:focus-visible,
a.u-dnews__item:focus-visible {
outline: 2px solid rgba(31, 90, 209, .5);
outline-offset: -2px;
}
.u-dtk__main {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
}
.u-dtk__subj {
overflow: hidden;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: var(--u-ink);
text-overflow: ellipsis;
white-space: nowrap;
}
a.u-dtk__row:hover .u-dtk__subj {
color: var(--u-blue);
}
.u-dtk__meta {
margin-top: 3px;
font-size: 14px;
line-height: 1.4;
color: var(--u-meta);
}
.u-dtk .u-tk-status {
flex: 0 0 auto;
padding: 3px 10px;
font-size: 13px;
font-weight: 600;
}
.u-dsup .u-dbc__foot,
.u-dbill .u-dbc__foot {
padding-top: 16px;
}
.client-home-cards .u-dtk-fallback .list-group-item {
padding: 12px 20px;
font-size: 14px;
border: 0;
border-bottom: 1px solid var(--u-line-2);
}
/* Moji domeni (includes/u-dash-domains.tpl): prvih 5 domena, isti red kao kod usluga */
.u-ddoms {
container-type: inline-size;
}
.u-ddl {
margin: 0;
padding: 0;
list-style: none;
}
.u-ddl__row {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) auto auto;
grid-template-areas: "ico main st act";
align-items: center;
column-gap: 16px;
row-gap: 6px;
padding: 12px 20px;
border-bottom: 1px solid var(--u-line-2);
transition: background-color var(--u-ease);
}
.u-ddl__row:last-child {
border-bottom: 0;
}
.u-ddl__row {
position: relative;
cursor: pointer;
}
.u-ddl__row:hover {
background: #f8fafd;
}
a.u-ddl__name::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
}
a.u-ddl__name:focus-visible {
outline: none;
}
a.u-ddl__name:focus-visible::after {
outline: 2px solid rgba(31, 90, 209, .5);
outline-offset: -2px;
}
.u-ddl__row:hover a.u-ddl__name {
color: var(--u-blue);
}
.u-ddl__act {
position: relative;
z-index: 1;
}
.u-ddl__ico {
grid-area: ico;
display: grid;
place-items: center;
width: 40px;
height: 40px;
color: var(--u-blue);
background: var(--u-blue-50);
border-radius: 10px;
}
.u-ddl__ico .u-ico {
width: 19px;
height: 19px;
}
.u-ddl__row.is-soon .u-ddl__ico {
color: #a86b00;
background: var(--u-amber-50);
}
.u-ddl__row.is-late .u-ddl__ico {
color: var(--u-red);
background: var(--u-red-50);
}
.u-ddl__main {
grid-area: main;
display: flex;
flex-direction: column;
min-width: 0;
}
a.u-ddl__name {
overflow: hidden;
font-size: 15px;
font-weight: 600;
line-height: 1.35;
color: var(--u-ink);
text-overflow: ellipsis;
white-space: nowrap;
}
a.u-ddl__name:hover {
color: var(--u-blue);
text-decoration: none;
}
.u-ddl__meta {
font-size: 14px;
line-height: 1.4;
color: var(--u-meta);
font-variant-numeric: tabular-nums;
}
.u-ddl__st {
grid-area: st;
justify-self: end;
padding: 3px 10px;
font-size: 13px;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
border-radius: 999px;
}
.u-ddl__st.is-ok {
color: var(--u-green-600);
background: var(--u-green-50);
}
.u-ddl__st.is-soon {
color: #8a5a00;
background: var(--u-amber-50);
}
.u-ddl__st.is-late {
color: #a3281e;
background: var(--u-red-50);
}
.u-ddl__act {
grid-area: act;
display: flex;
justify-content: flex-end;
min-width: 34px;
}
a.u-ddl__go {
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
color: var(--u-slate);
background: #fff;
border: 1px solid var(--u-line);
border-radius: var(--u-r-sm);
transition: color var(--u-ease), border-color var(--u-ease), background-color var(--u-ease);
}
a.u-ddl__go:hover {
color: var(--u-blue);
background: var(--u-blue-50);
border-color: #c9d8f6;
}
.u-ddoms__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: auto;
padding: 14px 20px 16px;
border-top: 1px solid var(--u-line-2);
}
@container (max-width: 520px) {
.u-ddl__row {
grid-template-columns: 36px minmax(0, 1fr) auto;
grid-template-areas:
"ico main act"
"ico st act";
column-gap: 12px;
padding: 12px 16px;
}
.u-ddl__ico {
width: 36px;
height: 36px;
}
.u-ddl__st {
justify-self: start;
}
.u-ddoms__actions {
padding: 14px 16px 16px;
}
.u-ddoms__actions .btn {
flex: 1 1 auto;
justify-content: center;
}
}
/* Domeni: domeni koji ističu (žuto), pa pretraga */
.u-dexp {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
margin-bottom: 16px;
padding: 12px 14px;
background: var(--u-amber-50);
border: 1px solid #f3dca8;
border-radius: 10px;
}
.u-dexp:last-child {
margin-bottom: 0;
}
.u-dexp__list {
flex: 1 1 220px;
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
}
.u-dexp__list li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 10px;
}
.u-dexp__list li + li {
margin-top: 4px;
}
a.u-dexp__name {
font-size: 15px;
font-weight: 600;
color: var(--u-ink);
overflow-wrap: anywhere;
}
a.u-dexp__name:hover {
color: var(--u-blue);
}
.u-dexp__when {
font-size: 14px;
color: #6f4800;
}
.u-dexp__when.is-late {
font-weight: 600;
color: var(--u-red);
}
.u-dexp__text {
flex: 1 1 220px;
font-size: 14px;
color: #5c4300;
}
.u-dexp__text p {
margin: 0;
}
.u-domsearch {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
}
.u-domsearch__field {
position: relative;
flex: 1 1 220px;
min-width: 0;
}
.u-domsearch__field .u-ico {
position: absolute;
top: 50%;
left: 13px;
color: var(--u-muted);
transform: translateY(-50%);
pointer-events: none;
}
.u-domsearch .form-control {
height: 40px;
padding-left: 38px;
font-size: 15px;
font-weight: 600;
color: var(--u-ink);
background: #fff;
border: 1px solid var(--u-line);
border-radius: var(--u-r-sm);
}
.u-domsearch .form-control::placeholder {
font-weight: 500;
color: #8592a3;
}
.u-domsearch .form-control:focus {
border-color: var(--u-blue);
box-shadow: 0 0 0 3px rgba(31, 90, 209, .16);
}
.u-domsearch__actions {
display: flex;
gap: 8px;
}
.u-domsearch .btn.u-dbtn {
height: 40px;
}
/* Novosti: sporedno, mirno */
.u-dnews__list {
margin: 0;
padding: 0;
list-style: none;
}
.u-dnews__item {
display: block;
padding: 12px 20px;
font-size: 15px;
font-weight: 500;
line-height: 1.45;
color: var(--u-ink-2);
border-bottom: 1px solid var(--u-line-2);
}
.u-dnews__list li:last-child .u-dnews__item {
border-bottom: 0;
}
a.u-dnews__item:hover {
color: var(--u-blue);
text-decoration: none;
background: #f8fafd;
}
.u-dnews__item small {
display: block;
margin-top: 2px;
font-size: 14px;
font-weight: 400;
color: var(--u-meta);
}
.u-dnews__item br {
display: none;
}
/* Paneli iz modula (partnerski program, fajlovi, ponude...) u istom stilu kao ostale kartice */
.u-dmore .card.u-hpanel {
margin: 0;
font-size: 15px;
overflow: hidden;
border: 1px solid var(--u-line);
border-radius: var(--u-r);
box-shadow: var(--u-shadow);
}
.u-dmore .u-hpanel .card-header.u-hpanel__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 60px;
padding: 12px 20px;
background: #fff;
border-bottom: 1px solid var(--u-line-2);
}
.u-dmore .u-hpanel .card-title.u-hpanel__title {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
margin: 0;
font-size: 16px;
font-weight: 700;
}
.u-hpanel__label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.u-hpanel__icon {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 32px;
height: 32px;
font-size: 15px;
color: var(--u-blue);
background: var(--u-blue-50);
border-radius: var(--u-r-sm);
}
.u-hpanel__badge.badge {
padding: 2px 8px;
font-size: 13px;
color: var(--u-ink-2);
background: var(--u-paper);
}
.u-dmore .u-hpanel .card-header .btn.u-hpanel__btn {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 6px;
height: 34px;
padding: 0 12px;
font-size: 14px;
font-weight: 700;
color: var(--u-ink);
white-space: nowrap;
background: #fff;
border: 1px solid var(--u-line);
border-radius: var(--u-r-sm);
}
.u-dmore .u-hpanel .card-header .btn.u-hpanel__btn:hover {
background: #f5f8fc;
border-color: #b9c6d6;
}
.u-dmore .u-hpanel .card-body.u-hpanel__body {
padding: 16px 20px;
line-height: 1.55;
}
.u-dmore .u-hpanel .card-body.u-hpanel__body p:last-child {
margin-bottom: 0;
}
.u-dmore .u-hpanel .list-group .list-group-item {
padding: 12px 20px;
font-size: 14px;
color: var(--u-ink-2);
border: 0;
border-bottom: 1px solid var(--u-line-2);
}
.u-dmore .u-hpanel .list-group .list-group-item:last-child {
border-bottom: 0;
}
.u-dmore .u-hpanel .list-group a.list-group-item:hover {
color: var(--u-ink);
background: #f8fafd;
}
.u-dmore .u-hpanel .list-group-item small {
font-size: 13px;
color: var(--u-muted);
}
.u-hpanel__li-ico {
width: 18px;
margin-right: 8px;
color: var(--u-slate);
text-align: center;
}
.u-dmore .u-hpanel .card-footer.u-hpanel__foot {
padding: 12px 20px;
font-size: 14px;
background: var(--u-paper);
border-top: 1px solid var(--u-line-2);
}
@media (max-width: 575px) {
.u-dwelcome {
padding: 18px 16px;
}
h1.u-dwelcome__title {
font-size: 20px;
}
.u-dwelcome__lead {
font-size: 14px;
}
.u-dwelcome .btn.u-dwelcome__btn {
width: 100%;
height: 44px;
}
.u-dbc__head {
padding: 12px 16px;
}
.u-dbc__body {
padding: 14px 16px;
}
.u-dbc__foot {
padding: 0 16px 16px;
}
a.u-dtk__row,
.u-dnews__item {
padding: 12px 16px;
}
/* Telefon: naslov tiketa u najviše dva reda, umesto skraćivanja posle nekoliko reči */
.u-dtk__subj {
display: -webkit-box;
white-space: normal;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.u-dbill__sum,
a.u-dbill__inv,
a.u-dbill__more {
padding-right: 16px;
padding-left: 16px;
}
.u-dempty {
padding: 16px;
}
.u-dempty .btn.u-dbtn {
width: 100%;
}
.u-domsearch__actions {
display: grid;
flex: 1 1 100%;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
.btn.u-dbtn--block,
.u-domsearch .btn.u-dbtn,
.u-domsearch .form-control {
height: 44px;
}
}
/* Na kontrolnoj tabli na telefonu prvo sadržaj, pa bočni meni */
@media (max-width: 991px) {
body.tpl-clientareahome #main-body .row > .col-lg-4 {
order: 2;
}
}
/* ---------- Tabele (usluge, domeni, računi, tiketi) ---------- */
.table-container {
margin-bottom: 20px;
}
.dataTables_wrapper .listtable {
display: flex;
flex-wrap: wrap;
align-items: center;
overflow: hidden;
background: #fff;
border: 1px solid var(--u-line);
border-radius: var(--u-r);
box-shadow: var(--u-shadow);
}
.dataTables_wrapper .listtable .dataTables_info {
flex: 1 1 auto;
order: 0;
padding: 14px 18px;
font-size: 13px;
font-weight: 600;
color: var(--u-muted);
}
.dataTables_wrapper .listtable .dataTables_filter {
float: none;
order: 1;
width: auto;
margin: 0;
padding: 10px 14px;
}
.dataTables_wrapper .listtable .dataTables_filter label {
margin: 0;
}
.dataTables_wrapper .listtable .dataTables_filter label .form-control {
width: 260px;
height: 40px;
margin: 0;
padding: 8px 12px 8px 38px !important;
font-size: 14px;
background: var(--u-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366758a' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px 50%;
border-color: transparent;
}
.dataTables_wrapper .listtable .dataTables_filter label .form-control:focus {
background-color: #fff;
border-color: var(--u-blue);
}
.dataTables_wrapper .listtable > table.table-list,
.dataTables_wrapper .listtable > .table-responsive {
flex: 0 0 100%;
order: 2;
}
.dataTables_wrapper table.table-list {
margin: 0 !important;
border: 0;
border-top: 1px solid var(--u-line);
border-radius: 0;
}
table.table-list thead th,
.dataTables_wrapper table.table-list thead th {
padding: 11px 16px;
vertical-align: middle;
font-size: 12px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--u-muted);
background: var(--u-paper);
border-bottom: 1px solid var(--u-line);
}
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
color: var(--u-ink);
background: #eaeff5;
}
#tableInvoicesList tbody td:first-child {
font-weight: 700;
}
#tableServicesList th:first-child {
width: 56px;
}
table.table-list tbody td {
padding: 14px 16px;
font-size: 14px;
border-top: 1px solid var(--u-line-2);
}
.table-list > tbody > tr > td {
background: #fff;
}
.table-list > tbody > tr:hover > td {
background: #f7f9fc;
}
table.table-list tbody td strong {
font-weight: 700;
}
table.table-list tbody td a {
font-weight: 600;
}
.dataTables_wrapper .dataTables_paginate {
padding-top: 14px;
}
.dataTables_wrapper .dataTables_length {
padding-top: 18px;
font-size: 13px;
color: var(--u-muted);
}
.dataTables_wrapper .dataTables_length select {
border-color: var(--u-line);
border-radius: 8px;
}
#tableLoading {
padding: 30px 0;
color: var(--u-muted);
}
@media (max-width: 767px) {
.dataTables_wrapper .listtable .dataTables_filter {
flex: 1 1 100%;
order: -1;
padding: 12px 12px 0;
}
.dataTables_wrapper .listtable .dataTables_filter label .form-control {
width: 100%;
}
.dataTables_wrapper .listtable .dataTables_info {
padding: 10px 14px;
}
}
/* Tiketi: broj iznad naslova, nepročitani sa plavom tačkom */
.table-list > tbody > tr > td a.border-left {
padding-left: 0;
border-left: 0 !important;
}
/* Tabele na telefonu: svaki red postaje kartica (Twenty-One ih inače seče sa strane) */
@media (max-width: 767px) {
.dataTables_wrapper table.table-list,
.dataTables_wrapper table.table-list tbody {
display: block;
width: 100% !important;
}
.dataTables_wrapper table.table-list thead {
display: none;
}
.dataTables_wrapper table.table-list tbody tr {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 14px;
padding: 14px 16px;
border-top: 1px solid var(--u-line-2);
}
.dataTables_wrapper table.table-list tbody tr:first-child {
border-top: 0;
}
.dataTables_wrapper table.table-list tbody td {
display: block;
padding: 0 !important;
font-size: 13px;
text-align: left !important;
background: transparent !important;
border: 0;
}
.dataTables_wrapper table.table-list tbody td.dataTables_empty {
flex: 1 1 100%;
padding: 10px 0 !important;
text-align: center !important;
}
.dataTables_wrapper table.table-list tbody td:last-child {
margin-left: auto;
}
.dataTables_wrapper table.table-list tbody td.ssl-info:not(.u-col-domain) {
display: none;
}
#tableInvoicesList tbody td:nth-child(2) {
display: none;
}
#tableInvoicesList tbody td:first-child {
flex: 1 1 100%;
font-size: 15px;
font-weight: 800;
}
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_length {
float: none;
text-align: center;
}
.dataTables_wrapper .dataTables_paginate .pagination {
justify-content: center;
}
}
/* Filter po statusu u bočnom meniju */
.sidebar .view-filter-btns .list-group-item i.far {
color: #a6b2c0;
}
.sidebar .view-filter-btns .list-group-item.active i.far {
color: var(--u-blue);
}
/* Detalji usluge */
.product-details .product-status {
border-radius: 16px;
overflow: hidden;
}
.product-status-active .product-icon,
.product-status .product-icon {
color: var(--u-ink);
background: var(--u-paper);
}
.product-status .product-status-text {
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
/* Prijava i registracija */
.primary-content .card.mw-540 {
border-radius: var(--u-r-lg);
box-shadow: 0 30px 60px -40px rgba(20, 32, 51, .45);
}
body.tpl-login .primary-content .card-body .h3,
body.tpl-login .primary-content .card-body h6.h3 {
font-size: 26px;
font-weight: 800;
}
/* ---------- Naslov sa akcijama (Moji domeni) ---------- */
.u-pagehead__row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 14px 24px;
}
.u-pagehead__main {
min-width: 0;
}
.u-pagehead__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
@media (max-width: 575px) {
.u-pagehead__actions {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
}
.u-pagehead__actions .btn.u-btn-40 {
height: 44px;
padding: 0 10px;
font-size: 13px;
}
}
/* ---------- Moji domeni ---------- */
/* Traka iznad tabele (filter, pretraga) i traka za izabrane domene: vizuelno deo iste kartice */
.u-dtools {
position: relative;
z-index: 5;
background: #fff;
border: 1px solid var(--u-line);
border-bottom: 0;
border-radius: var(--u-r) var(--u-r) 0 0;
}
.u-domains-ready #tableDomainsList_wrapper .listtable {
border-radius: 0 0 var(--u-r) var(--u-r);
}
.u-dtools.has-selection {
border-color: #b9cdf5;
}
.u-dtools__main {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 16px;
padding: 12px 14px;
}
.u-dtools__main[hidden],
.u-bulk[hidden] {
display: none !important;
}
.u-dtools__side {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
/* Filter po statusu kao čipovi (WHMCS stavke iz bočnog menija, isto ponašanje) */
.u-chips,
.u-chips__set {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.u-chips .u-chip,
.u-chips .list-group-item.u-chip {
display: inline-flex;
align-items: center;
gap: 6px;
width: auto;
height: 34px;
margin: 0;
padding: 0 12px;
font-size: 13px;
font-weight: 700;
line-height: 1;
color: var(--u-ink-2);
text-decoration: none;
background: #fff;
border: 1px solid var(--u-line);
border-radius: 999px;
cursor: pointer;
transition: color var(--u-ease), background-color var(--u-ease), border-color var(--u-ease);
}
.u-chips .u-chip:hover,
.u-chips .u-chip:focus-visible {
color: var(--u-ink);
background: var(--u-paper);
border-color: #c5d0dc;
}
.u-chips .u-chip.active,
.u-chips .list-group-item.u-chip.active {
z-index: auto;
color: var(--u-blue-600);
background: var(--u-blue-50);
border-color: #b9cdf5;
box-shadow: none;
}
.u-chips .u-chip .badge {
min-width: 20px;
padding: 3px 6px;
font-size: 11px;
color: var(--u-ink-2);
background: var(--u-paper);
}
.u-chips .u-chip.active .badge {
color: #fff;
background: var(--u-blue);
}
.u-chips .u-chip i {
display: none;
}
/* Pretraga (DataTables polje premešteno u traku) */
#uDomSide .dataTables_filter.u-dsearch {
float: none;
width: auto;
margin: 0;
padding: 0;
}
#uDomSide .dataTables_filter.u-dsearch label {
display: block;
margin: 0;
font-size: 0;
}
#uDomSide .dataTables_filter.u-dsearch input.form-control {
width: 260px;
height: 38px;
margin: 0;
padding: 8px 12px 8px 36px !important;
font-size: 14px;
background: var(--u-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366758a' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px 50%;
border: 1px solid transparent;
border-radius: var(--u-r-sm);
}
#uDomSide .dataTables_filter.u-dsearch input.form-control:focus {
background-color: #fff;
border-color: var(--u-blue);
}
.u-sort {
position: relative;
margin: 0;
}
.u-sort .u-ico {
position: absolute;
top: 50%;
left: 10px;
color: var(--u-muted);
transform: translateY(-50%);
pointer-events: none;
}
.u-sort .custom-select {
height: 38px;
padding-left: 32px;
font-size: 13px;
font-weight: 600;
}
/* Traka za izabrane domene */
.u-bulk {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
padding: 10px 14px;
background: var(--u-blue-50);
border-radius: var(--u-r) var(--u-r) 0 0;
}
.u-bulk__info {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 12px;
min-width: 0;
}
.u-bulk__count {
font-size: 14px;
font-weight: 800;
color: var(--u-blue-600);
white-space: nowrap;
}
.u-bulk__link {
padding: 0;
font-size: 13px;
font-weight: 700;
color: var(--u-blue);
background: none;
border: 0;
cursor: pointer;
text-decoration: underline;
}
.u-bulk__link[hidden],
.u-bulk__warn[hidden] {
display: none;
}
.u-bulk__warn {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: #8a5a00;
}
.u-bulk__actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-left: auto;
}
.u-bulk .btn.u-bbtn {
display: inline-flex;
align-items: center;
gap: 7px;
height: 38px;
padding: 0 12px;
font-size: 13px;
color: var(--u-ink);
background: #fff;
border: 1px solid #c9d8f6;
}
.u-bulk .btn.u-bbtn:hover,
.u-bulk .btn.u-bbtn:focus-visible,
.u-bulk .show > .btn.u-bbtn {
color: var(--u-blue-600);
border-color: var(--u-blue);
}
.u-bulk .btn.u-bbtn .u-ico {
color: var(--u-blue);
}
.u-bulk .dropdown-toggle::after {
margin-left: 2px;
}
.u-bulk__clear {
display: inline-flex;
align-items: center;
gap: 6px;
height: 38px;
padding: 0 10px;
font-size: 13px;
font-weight: 700;
color: var(--u-muted);
background: none;
border: 0;
border-radius: var(--u-r-sm);
cursor: pointer;
}
.u-bulk__clear:hover,
.u-bulk__clear:focus-visible {
color: var(--u-ink);
background: rgba(255, 255, 255, .7);
}
/* Meni "Više akcija" i opšti padajući meniji u sadržaju */
.primary-content .dropdown-menu {
min-width: 240px;
padding: 6px;
border: 1px solid var(--u-line);
border-radius: var(--u-r);
box-shadow: 0 20px 40px -20px rgba(20, 32, 51, .3);
}
.primary-content .dropdown-menu .dropdown-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
font-size: 14px;
font-weight: 600;
color: var(--u-ink-2);
border-radius: var(--u-r-sm);
}
.primary-content .dropdown-menu .dropdown-item:hover,
.primary-content .dropdown-menu .dropdown-item:focus {
color: var(--u-ink);
background: var(--u-paper);
}
.primary-content .dropdown-menu .dropdown-item .u-ico {
color: var(--u-slate);
}
/* "Izaberi sve" na telefonu */
.u-selall-m {
display: inline-flex;
align-items: center;
gap: 8px;
height: 38px;
padding: 0 12px;
font-size: 13px;
font-weight: 700;
color: var(--u-ink-2);
background: #fff;
border: 1px solid var(--u-line);
border-radius: var(--u-r-sm);
cursor: pointer;
}
.u-selall-m.is-checked .u-check__box,
.u-selall-m.is-mixed .u-check__box {
background: var(--u-blue) no-repeat center / 12px 12px;
border-color: var(--u-blue);
}
.u-selall-m.is-checked .u-check__box {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.u-selall-m.is-mixed .u-check__box {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
/* Checkbox (bez iCheck-a) */
.u-check {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-width: 28px;
min-height: 28px;
margin: 0;
cursor: pointer;
}
.u-check input {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.u-check__box {
display: inline-block;
width: 18px;
height: 18px;
background: #fff;
border: 1.5px solid #b3bfcd;
border-radius: 5px;
transition: background-color var(--u-ease), border-color var(--u-ease), box-shadow var(--u-ease);
}
.u-check:hover .u-check__box {
border-color: var(--u-blue);
}
.u-check input:focus-visible + .u-check__box {
box-shadow: 0 0 0 3px rgba(31, 90, 209, .3);
}
.u-check input:checked + .u-check__box,
.u-check input:indeterminate + .u-check__box {
background: var(--u-blue) no-repeat center / 12px 12px;
border-color: var(--u-blue);
}
.u-check input:checked + .u-check__box {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.u-check input:indeterminate + .u-check__box {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
/* Tabela domena */
#tableDomainsList th.u-col-check,
#tableDomainsList td.u-col-check {
width: 52px !important;
padding-right: 6px !important;
padding-left: 14px !important;
text-align: center;
}
#tableDomainsList td.u-col-check {
cursor: default;
}
#tableDomainsList td.u-col-check .u-check {
min-height: 40px;
}
#tableDomainsList thead th {
width: auto !important;
text-align: left;
}
#tableDomainsList thead th:nth-child(2) {
width: 42% !important;
}
#tableDomainsList thead th.u-col-check {
background-image: none !important;
}
#tableDomainsList td.u-col-domain {
display: table-cell;
}
#tableDomainsList td.u-col-domain > .u-dom__ssl {
float: left;
width: 20px;
height: 20px;
margin: 2px 10px 0 0;
overflow: hidden;
}
.u-dom {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.u-dom__name {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.u-dom__name strong {
font-size: 15px;
font-weight: 800 !important;
color: var(--u-ink);
word-break: break-word;
}
table.table-list tbody td .u-dom__open {
display: inline-grid;
place-items: center;
width: 24px;
height: 24px;
color: #9aa7b6;
border-radius: 6px;
opacity: 0;
transition: opacity var(--u-ease), color var(--u-ease), background-color var(--u-ease);
}
#tableDomainsList tr:hover .u-dom__open,
table.table-list tbody td .u-dom__open:focus-visible {
opacity: 1;
}
table.table-list tbody td .u-dom__open:hover {
color: var(--u-blue);
background: var(--u-blue-50);
}
.u-dom__open .u-ico {
width: 14px;
height: 14px;
}
.u-dom__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 10px;
font-size: 12px;
font-weight: 600;
color: var(--u-muted);
}
.u-dom__ar {
display: inline-flex;
align-items: center;
gap: 4px;
}
.u-dom__ar .u-ico {
width: 13px;
height: 13px;
color: #a6b2c0;
}
.u-dom__ar.is-on .u-ico {
color: var(--u-green);
}
.u-dom__soon {
padding: 1px 8px;
color: #8a5a00;
background: var(--u-amber-50);
border-radius: 999px;
}
#tableDomainsList td.u-col-date {
font-size: 13px;
font-variant-numeric: tabular-nums;
color: var(--u-ink-2);
white-space: nowrap;
}
#tableDomainsList td.u-col-actions,
#tableDomainsList th.u-col-actions {
width: 1%;
text-align: right;
white-space: nowrap;
}
.btn.u-rowbtn {
display: inline-flex;
align-items: center;
gap: 4px;
height: 34px;
padding: 0 10px 0 12px;
font-size: 13px;
color: var(--u-blue-600);
background: var(--u-blue-50);
border: 1px solid transparent;
}
.btn.u-rowbtn:hover,
.btn.u-rowbtn:focus-visible {
color: #fff;
background: var(--u-blue);
}
#tableDomainsList tr:hover .btn.u-rowbtn {
border-color: #b9cdf5;
}
#tableDomainsList tbody > tr > td {
vertical-align: middle;
}
#tableDomainsList td.u-col-date.is-past {
color: #a3281e;
font-weight: 700;
}
#tableDomainsList tbody tr.is-selected > td {
background: #f2f6fe !important;
}
#tableDomainsList td.dataTables_empty,
#tableDomainsList.is-empty tbody {
display: none;
}
/* Podnožje tabele: napomena o grupnim akcijama i broj prikazanih */
.u-dfoot {
display: flex;
flex: 0 0 100%;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 6px 16px;
order: 4;
padding: 10px 16px;
background: #fbfcfd;
border-top: 1px solid var(--u-line-2);
}
.dataTables_wrapper .listtable .u-dfoot .dataTables_info {
flex: 0 0 auto;
padding: 0;
}
.u-dtools__hint {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
font-size: 12px;
font-weight: 600;
color: var(--u-muted);
}
.u-dtools__hint .u-ico {
color: var(--u-slate);
}
#tableDomainsList_wrapper .listtable > table {
border-top: 0 !important;
}
/* Nema rezultata pretrage */
.u-noresults {
display: flex;
flex: 0 0 100%;
flex-direction: column;
align-items: center;
order: 3;
padding: 36px 20px;
text-align: center;
border-top: 1px solid var(--u-line-2);
}
.u-noresults[hidden] {
display: none;
}
.u-noresults__icon,
.u-empty__icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
margin-bottom: 12px;
font-size: 22px;
color: var(--u-blue);
background: var(--u-blue-50);
border-radius: 14px;
}
.u-noresults strong {
font-size: 16px;
color: var(--u-ink);
}
.u-noresults p {
margin: 4px 0 14px;
font-size: 14px;
color: var(--u-muted);
}
/* Prazno stanje: nema nijednog domena */
.card.u-empty .card-body {
display: flex;
flex-direction: column;
align-items: center;
padding: 56px 24px;
text-align: center;
}
.u-empty .u-empty__icon {
width: 56px;
height: 56px;
margin-bottom: 16px;
font-size: 26px;
}
h2.u-empty__title {
margin: 0 0 8px;
font-size: 20px;
}
.u-empty__text {
max-width: 460px;
margin: 0 0 20px;
font-size: 15px;
line-height: 1.6;
color: var(--u-muted);
}
.u-empty__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
/* Strana za grupnu izmenu (nameserveri, kontakti, automatska obnova, zaključavanje) */
body.tpl-bulkdomainmanagement .primary-content .list-group {
display: flex;
flex-flow: row wrap;
gap: 6px;
}
body.tpl-bulkdomainmanagement .primary-content .list-group-item {
width: auto;
margin: 0;
padding: 5px 12px;
font-size: 13px;
font-weight: 700;
color: var(--u-ink);
background: var(--u-paper);
border: 0;
border-radius: 999px;
}
/* Telefon i tablet: tabela domena kao kartice sa izborom */
@media (max-width: 767px) {
.u-dtools__main {
padding: 12px;
}
.u-dtools__side,
#uDomSide .dataTables_filter.u-dsearch,
#uDomSide .dataTables_filter.u-dsearch input.form-control {
width: 100%;
}
.u-dtools__side {
display: grid;
grid-template-columns: 1fr;
}
#uDomSide .dataTables_filter.u-dsearch {
order: -1;
}
.u-sort .custom-select {
width: 100%;
}
.u-chips {
flex-wrap: nowrap;
width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
.u-chips__set {
flex-wrap: nowrap;
}
.u-chips .u-chip {
flex: 0 0 auto;
}
.u-bulk {
padding: 10px 12px;
}
.u-bulk__actions {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
margin-left: 0;
}
.u-bulk .btn.u-bbtn {
justify-content: center;
width: 100%;
height: 42px;
}
.u-bulk__more .dropdown-menu {
width: 100%;
}
.u-bulk__clear {
position: absolute;
top: 6px;
right: 6px;
}
.u-bulk__clear span {
display: none;
}
.dataTables_wrapper #tableDomainsList tbody tr {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) auto;
grid-template-areas:
"check domain domain"
". due status"
". reg action";
gap: 6px 10px;
padding: 12px 14px 12px 6px;
}
#tableDomainsList tbody td.u-col-check {
grid-area: check;
width: auto;
margin: 0 !important;
padding: 0 !important;
}
#tableDomainsList tbody td.u-col-domain {
grid-area: domain;
}
#tableDomainsList tbody td.u-col-domain > .u-dom__ssl {
display: none;
}
#tableDomainsList tbody td:nth-child(3) {
grid-area: reg;
}
#tableDomainsList tbody td:nth-child(4) {
grid-area: due;
font-size: 13px !important;
}
#tableDomainsList tbody td:nth-child(3)::before,
#tableDomainsList tbody td:nth-child(4)::before {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
color: #8592a3;
content: attr(data-label);
}
#tableDomainsList tbody td.u-col-status {
grid-area: status;
align-self: start;
margin: 0 !important;
text-align: right !important;
}
#tableDomainsList tbody td.u-col-actions {
grid-area: action;
align-self: end;
margin: 0 !important;
}
.btn.u-rowbtn {
height: 38px;
}
.u-dtools__side {
grid-template-columns: auto 1fr;
}
#uDomSide .dataTables_filter.u-dsearch {
grid-column: 1 / -1;
}
#tableDomainsList tbody tr.is-selected {
background: #f2f6fe;
}
#tableDomainsList tbody tr.is-selected > td {
background: transparent !important;
}
.u-bulk .btn.u-bbtn {
justify-content: flex-start;
height: auto;
min-height: 44px;
padding: 8px 10px;
line-height: 1.2;
text-align: left;
white-space: normal;
}
table.table-list tbody td .u-dom__open {
opacity: 1;
}
.u-dfoot {
justify-content: center;
text-align: center;
}
}
/* ---------- Upravljanje domenom ---------- */
/* Navigacija (jedna kartica, grupe) */
.u-dnav {
overflow: hidden;
}
.u-dnav .card-header.u-dnav__head {
display: flex;
flex-direction: column;
gap: 2px;
padding: 14px 16px 12px;
}
.u-dnav__kicker {
font-size: 11px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--u-muted);
}
.u-dnav__domain {
font-size: 15px;
font-weight: 800;
color: var(--u-ink);
word-break: break-word;
}
.u-dnav .list-group.u-dnav__list {
display: flex;
flex-direction: column;
padding: 6px;
}
.u-dnav__group {
margin: 10px 10px 4px;
font-size: 11px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
color: #8592a3;
}
.sidebar .u-dnav .list-group-item.u-dnav__item {
display: flex;
align-items: center;
gap: 10px;
margin: 1px 0;
padding: 8px 10px;
font-size: 14px;
font-weight: 600;
color: var(--u-ink-2);
border: 0;
border-radius: var(--u-r-sm);
}
.sidebar .u-dnav .list-group-item.u-dnav__item:hover,
.sidebar .u-dnav .list-group-item.u-dnav__item:focus-visible {
color: var(--u-ink);
background: var(--u-paper);
}
.sidebar .u-dnav .list-group-item.u-dnav__item.active,
.sidebar .u-dnav .list-group-item.u-dnav__item.active:hover {
color: var(--u-blue-600);
background: var(--u-blue-50);
box-shadow: none;
}
.u-dnav__ico {
display: inline-grid;
flex: 0 0 auto;
place-items: center;
width: 20px;
color: var(--u-slate);
}
.u-dnav .active .u-dnav__ico {
color: var(--u-blue);
}
.u-dnav__label {
min-width: 0;
}
.u-dnav .list-group-item .badge {
margin-left: auto;
}
@media (max-width: 991px) {
/* Telefon/tablet: vodoravna traka sa stavkama iznad sadržaja */
.u-dnav-col .sidebar .card.u-dnav {
margin-bottom: 12px !important;
}
.u-dnav .card-header.u-dnav__head {
display: none;
}
.u-dnav .list-group.u-dnav__list {
flex-direction: row;
gap: 4px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.u-dnav .list-group.u-dnav__list::-webkit-scrollbar {
display: none;
}
.u-dnav__group {
display: none;
}
.sidebar .u-dnav .list-group-item.u-dnav__item {
flex: 0 0 auto;
width: auto;
min-height: 40px;
margin: 0;
white-space: nowrap;
}
}
/* Nedostupne stavke menija (neaktivan domen ili usluga, ili WHMCS stavka označena kao nedostupna):
svetlije, bez promene na prelaz mišem, katanac desno; objašnjenje u title i za čitače ekrana */
.sidebar .u-dnav .list-group-item.u-dnav__item.disabled,
.sidebar .u-dnav .list-group-item.u-dnav__item.disabled:hover,
.sidebar .list-group-item.u-sb-off,
.sidebar .list-group-item.u-sb-off:hover {
color: #8b97a6;
background: transparent;
cursor: not-allowed;
pointer-events: auto;
box-shadow: none;
}
.sidebar .u-dnav .u-dnav__item.disabled .u-dnav__ico,
.sidebar .list-group-item.u-sb-off .sidebar-menu-item-icon-wrapper {
color: #b8c1cc;
}
.sidebar .u-sb-off .sidebar-menu-item-wrapper {
display: flex;
align-items: center;
}
.u-off-lock {
flex: 0 0 auto;
width: 14px;
height: 14px;
margin-left: auto;
color: #a9b3bf;
}
.u-dnav__note {
display: block;
margin-top: 6px;
padding: 6px 9px;
font-size: 13px;
font-weight: 600;
line-height: 1.4;
color: #8a5a00;
background: var(--u-amber-50);
border-radius: 6px;
}
@media (max-width: 991px) {
/* telefon/tablet: u vodoravnoj traci se nedostupne stavke ne prikazuju */
.sidebar .u-dnav .list-group-item.u-dnav__item.disabled {
display: none;
}
}
/* Upozorenje o računu za domen */
.u-billalert {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
margin-bottom: 16px;
padding: 12px 14px;
font-size: 14px;
background: var(--u-amber-50);
border: 1px solid #f0cf8a;
border-radius: var(--u-r);
}
.u-billalert.is-overdue {
background: var(--u-red-50);
border-color: #f1c7c3;
}
.u-billalert__icon {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 34px;
height: 34px;
font-size: 16px;
color: #8a5a00;
background: #fff;
border-radius: 9px;
}
.u-billalert.is-overdue .u-billalert__icon {
color: var(--u-red);
}
.u-billalert__text {
display: flex;
flex: 1 1 260px;
flex-direction: column;
min-width: 0;
line-height: 1.4;
}
.u-billalert__text strong {
color: var(--u-ink);
}
.u-billalert__text span {
font-size: 13px;
color: var(--u-ink-2);
}
.btn.u-billalert__btn {
color: var(--u-ink);
background: var(--u-amber);
border: 0;
}
.btn.u-billalert__btn:hover {
background: #e7a923;
}
.u-billalert.is-overdue .btn.u-billalert__btn {
color: #fff;
background: var(--u-red);
}
/* Zaglavlje domena */
.card.u-dhead {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
gap: 14px 20px;
margin-bottom: 16px;
padding: 18px 20px;
}
.u-dhead__main {
display: flex;
align-items: flex-start;
gap: 14px;
min-width: 0;
}
.u-dhead__icon {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 44px;
height: 44px;
font-size: 20px;
color: var(--u-blue);
background: var(--u-blue-50);
border-radius: 11px;
}
.u-dhead__text {
min-width: 0;
}
h2.u-dhead__name {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 6px;
font-size: 22px;
line-height: 1.25;
word-break: break-word;
}
.u-dhead__open {
display: inline-grid;
flex: 0 0 auto;
place-items: center;
width: 28px;
height: 28px;
font-size: 14px;
color: #9aa7b6;
border-radius: 7px;
}
.u-dhead__open:hover,
.u-dhead__open:focus-visible {
color: var(--u-blue);
background: var(--u-blue-50);
}
.u-dhead__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
margin: 0;
font-size: 14px;
color: var(--u-ink-2);
}
.u-dhead__due strong {
color: var(--u-ink);
}
.u-dhead__due.is-past strong {
color: #a3281e;
}
.u-dhead__past {
margin-left: 6px;
padding: 1px 8px;
font-size: 12px;
font-weight: 700;
color: #a3281e;
background: var(--u-red-50);
border-radius: 999px;
}
.u-dhead__due .u-dom__soon {
margin-left: 6px;
font-size: 12px;
font-weight: 700;
}
.u-dhead__flags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 10px 0 0;
}
.u-flag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
font-size: 12px;
font-weight: 600;
color: var(--u-ink-2);
background: var(--u-paper);
border: 1px solid var(--u-line-2);
border-radius: 999px;
transition: border-color var(--u-ease), color var(--u-ease);
}
.u-flag:hover,
.u-flag:focus-visible {
color: var(--u-ink);
text-decoration: none;
border-color: var(--u-blue);
}
.u-flag .u-ico {
color: #a6b2c0;
}
.u-flag.is-on .u-ico {
color: var(--u-green);
}
.u-flag.is-warn {
color: #8a5a00;
background: var(--u-amber-50);
border-color: #f6dca4;
}
.u-flag.is-warn .u-ico {
color: #b7791f;
}
.u-dhead__actions {
display: flex;
gap: 8px;
}
@media (max-width: 575px) {
.card.u-dhead {
padding: 16px;
}
h2.u-dhead__name {
font-size: 19px;
}
.u-dhead__icon {
display: none;
}
.u-dhead__actions,
.u-dhead__actions .btn {
width: 100%;
}
.u-dhead__actions .btn {
justify-content: center;
height: 44px;
}
}
/* Podaci: dve kartice sa oznakom i vrednošću */
.u-dgrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-bottom: 16px;
}
@media (max-width: 767px) {
.u-dgrid {
grid-template-columns: 1fr;
}
}
.primary-content .card.u-dcard,
.primary-content .card.u-qa-card {
margin: 0;
padding: 16px 18px;
}
.primary-content .card.u-qa-card {
margin-bottom: 16px;
}
h3.u-dcard__title {
margin: 0 0 10px;
font-size: 13px;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--u-muted);
}
.u-kv {
margin: 0;
}
.u-kv > div {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 4px 16px;
padding: 9px 0;
border-top: 1px solid var(--u-line-2);
}
.u-kv > div:first-child {
border-top: 0;
}
.u-kv dt {
font-size: 13px;
font-weight: 600;
color: var(--u-muted);
}
.u-kv dd {
margin: 0;
font-size: 14px;
font-weight: 700;
color: var(--u-ink);
text-align: right;
word-break: break-word;
}
/* Brze akcije */
.u-qa-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 8px;
}
a.u-qa {
display: flex;
align-items: center;
gap: 12px;
min-height: 60px;
padding: 10px 12px;
color: var(--u-ink);
text-decoration: none;
background: #fff;
border: 1px solid var(--u-line);
border-radius: var(--u-r-sm);
transition: border-color var(--u-ease), background-color var(--u-ease), box-shadow var(--u-ease);
}
a.u-qa:hover,
a.u-qa:focus-visible {
color: var(--u-ink);
text-decoration: none;
background: #f7f9fc;
border-color: var(--u-blue);
}
a.u-qa:focus-visible {
outline: 3px solid rgba(31, 90, 209, .3);
outline-offset: 1px;
}
.u-qa__icon {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 36px;
height: 36px;
font-size: 17px;
color: var(--u-blue);
background: var(--u-blue-50);
border-radius: 9px;
}
a.u-qa.is-warn .u-qa__icon {
color: #b7791f;
background: var(--u-amber-50);
}
.u-qa__text {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.35;
}
.u-qa__text strong {
font-size: 14px;
font-weight: 700;
}
.u-qa__text small {
font-size: 12px;
color: var(--u-muted);
}
.primary-content .card.moduleoutput {
margin-bottom: 16px;
}
.u-dhook {
margin-bottom: 16px;
}
/* Kartice: automatska obnova, nameserveri, zaključavanje, oslobađanje, dodaci */
.card.u-pane .card-body {
padding: 20px;
}
.card.u-pane .card-title {
margin-bottom: 6px;
font-size: 18px;
}
.u-pane__lead {
max-width: 640px;
margin: 0 0 16px;
font-size: 14px;
line-height: 1.55;
color: var(--u-muted);
}
.u-statusrow {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
background: var(--u-paper);
border-radius: var(--u-r-sm);
}
.u-statusrow__state {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.u-statusrow__label {
font-size: 14px;
font-weight: 700;
color: var(--u-ink);
}
.u-choice {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.u-choice__opt {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 10px 14px;
font-size: 14px;
font-weight: 600;
background: #fff;
border: 1px solid var(--u-line);
border-radius: var(--u-r-sm);
cursor: pointer;
}
.u-choice__opt:has(input:checked) {
color: var(--u-blue-600);
background: var(--u-blue-50);
border-color: #b9cdf5;
}
.u-choice__opt input {
accent-color: var(--u-blue);
}
.u-nsgrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 14px;
max-width: 720px;
margin-bottom: 4px;
}
@media (max-width: 575px) {
.u-nsgrid {
grid-template-columns: 1fr;
}
}
.u-nsgrid .form-group {
margin-bottom: 12px;
}
.u-nsgrid label,
.u-inlineform label {
font-size: 13px;
}
.u-nsgrid .form-control,
.u-inlineform .form-control {
height: 40px;
}
.u-nsgrid .form-control:disabled {
background: var(--u-paper);
}
.u-inlineform {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 12px;
}
.u-inlineform .form-group {
flex: 0 1 280px;
margin: 0;
}
.u-addons {
display: flex;
flex-direction: column;
gap: 10px;
}
.u-addon {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 14px;
padding: 14px;
border: 1px solid var(--u-line);
border-radius: var(--u-r-sm);
}
.u-addon__icon {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 40px;
height: 40px;
font-size: 18px;
color: var(--u-blue);
background: var(--u-blue-50);
border-radius: 10px;
}
.u-addon__text {
flex: 1 1 260px;
min-width: 0;
}
.u-addon__text p {
margin: 2px 0 0;
font-size: 13px;
color: var(--u-muted);
}
.u-addon__form {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
}
/* Dugmad iz bočnog menija u zaglavlju "Moji domeni" */
@media (max-width: 575px) {
.u-pagehead__actions .btn-primary.u-btn-40 {
grid-column: 1 / -1;
order: -1;
}
}
/* ---------- Podnožje ---------- */
footer.footer.u-footer {
padding: 56px 0 28px;
font-size: 14px;
color: #b8c4d2;
background-color: var(--u-ink);
}
.u-footer__grid {
display: grid;
grid-template-columns: 1.6fr repeat(3, 1fr);
gap: 32px;
}
.u-footer__logo img {
height: 40px;
width: auto;
filter: brightness(0) invert(1);
}
.u-footer__brand p {
max-width: 340px;
margin: 16px 0;
line-height: 1.6;
}
footer.footer .u-footer__phone {
font-size: 16px;
font-weight: 800;
color: #fff;
}
.u-footer__phone i {
margin-right: 6px;
color: var(--u-amber);
}
.u-footer__phone span {
margin-left: 6px;
font-size: 13px;
font-weight: 500;
color: #9fb0c3;
}
.u-footer__col {
display: flex;
flex-direction: column;
gap: 9px;
}
footer.footer .u-footer__col h2 {
margin: 0 0 6px;
font-size: 14px;
font-weight: 800;
letter-spacing: 0;
color: #fff;
}
footer.footer .u-footer__col a {
color: #b8c4d2;
}
footer.footer .u-footer__col a:hover {
color: #fff;
}
.u-footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, .1);
}
/* Plaćanje karticama (znakovi kartica levo, banka i 3-D Secure desno) */
.u-pay {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 18px 32px;
margin-top: 40px;
padding: 20px 0 0;
border-top: 1px solid rgba(255, 255, 255, .1);
}
.u-pay + .u-footer__bottom {
margin-top: 20px;
}
.u-pay__accept {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 20px;
}
footer.footer .u-pay__title {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 13px;
font-weight: 700;
color: #fff;
}
.u-pay__title .u-ico {
width: 16px;
height: 16px;
color: #4ade80;
}
.u-pay__cards,
.u-pay__secure {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.u-pay__cards {
gap: 12px;
}
.u-pay__cards li,
.u-pay__secure li {
display: flex;
}
img.u-pay__card {
display: block;
height: 30px;
width: auto;
}
img.u-pay__card--dinacard {
height: 23px;
}
footer.footer a.u-pay__tile {
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px;
padding: 0 10px;
background: #fff;
border: 1px solid #fff;
border-radius: 8px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
transition: transform .15s ease, box-shadow .15s ease;
}
footer.footer a.u-pay__tile:hover {
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
footer.footer a.u-pay__tile:focus-visible {
outline: 2px solid #8fb3ff;
outline-offset: 3px;
}
img.u-pay__logo {
display: block;
height: 28px;
width: auto;
}
img.u-pay__logo--intesa {
height: 34px;
}
@media (max-width: 575px) {
.u-pay {
margin-top: 32px;
}
.u-pay__accept {
gap: 12px;
}
.u-pay__cards {
gap: 10px;
}
img.u-pay__card {
height: 26px;
}
img.u-pay__card--dinacard {
height: 20px;
}
footer.footer a.u-pay__tile {
height: 40px;
padding: 0 8px;
}
img.u-pay__logo {
height: 25px;
}
img.u-pay__logo--intesa {
height: 30px;
}
}
@media (prefers-reduced-motion: reduce) {
footer.footer a.u-pay__tile {
transition: none;
}
footer.footer a.u-pay__tile:hover {
transform: none;
}
}
footer.footer .u-footer__bottom .copyright {
margin: 0;
font-size: 13px;
text-align: left;
}
footer.footer .u-footer__bottom .copyright a {
margin-left: 12px;
color: #b8c4d2;
}
footer.footer .btn.u-footer__locale {
border-radius: 8px;
}
@media (max-width: 991px) {
.u-footer__grid {
grid-template-columns: repeat(3, 1fr);
}
.u-footer__brand {
grid-column: 1 / -1;
}
}
@media (max-width: 575px) {
.u-footer__grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 575px) {
header.header .u-mainbar > .container {
flex-wrap: wrap;
}
/* Telefon: logo 44 px (bio 34); dugmad desno su 46 px, pa visina trake ostaje ista */
header.header .u-mainbar {
padding: 14px 0;
}
header.header .logo-img {
height: 44px;
}
header.header .u-mainbar .navbar-brand {
margin-right: 8px;
}
header.header .toolbar .nav-link,
header.header .toolbar .btn.nav-link {
padding: 0 12px;
}
}
/* ---------- Početna ---------- */
/*
Vrh: pretraga domena levo, brze akcije za klijente desno (na telefonu ispod).
Tamnoplava podloga u slojevima: prelaz, tri meka sjaja, tačkasta mreža koja bledi (::before)
i koncentrični krugovi desno (::after). Sve je CSS, bez slika.
*/
.u-hero {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 46px 0 50px;
color: #c9d7f2;
background-color: #0c2556;
background-image:
radial-gradient(900px 440px at 90% -12%, rgba(66, 140, 255, .55), transparent 62%),
radial-gradient(720px 380px at -6% 118%, rgba(0, 186, 255, .24), transparent 60%),
radial-gradient(560px 300px at 46% 128%, rgba(124, 92, 255, .22), transparent 66%),
linear-gradient(135deg, #091a42 0%, #0e2c6e 48%, #1544a3 100%);
border-bottom: 0;
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
}
.u-hero::before,
.u-hero::after {
content: "";
position: absolute;
z-index: -1;
pointer-events: none;
}
.u-hero::before {
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, .24) 1px, transparent 1.6px);
background-size: 22px 22px;
-webkit-mask-image: linear-gradient(112deg, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .35) 38%, transparent 66%);
mask-image: linear-gradient(112deg, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .35) 38%, transparent 66%);
}
.u-hero::after {
top: -340px;
right: -230px;
width: 780px;
height: 780px;
border-radius: 50%;
background: repeating-radial-gradient(circle, rgba(255, 255, 255, .11) 0 1px, transparent 1.6px 54px);
-webkit-mask-image: radial-gradient(circle, #000 28%, transparent 70%);
mask-image: radial-gradient(circle, #000 28%, transparent 70%);
}
.u-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 22px;
}
.u-hero__grid > * {
min-width: 0;
}
@media (min-width: 992px) {
.u-hero__grid {
grid-template-columns: minmax(0, 1fr) 360px;
align-items: center;
gap: 48px;
}
}
.u-hero__title {
margin: 0 0 16px;
font-size: 36px;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
color: #fff;
text-shadow: 0 2px 18px rgba(4, 14, 40, .35);
}
.u-hero__form {
margin: 0;
}
.u-hero__search {
display: flex;
align-items: center;
height: 58px;
padding: 0 6px 0 18px;
background: #fff;
border: 1.5px solid #fff;
border-radius: 14px;
box-shadow: 0 22px 44px -20px rgba(2, 10, 32, .65);
transition: border-color var(--u-ease), box-shadow var(--u-ease);
}
.u-hero__search:focus-within {
border-color: #fff;
box-shadow: 0 0 0 4px rgba(126, 172, 255, .45), 0 22px 44px -20px rgba(2, 10, 32, .65);
}
.u-hero__searchico {
width: 20px;
height: 20px;
color: var(--u-muted);
}
.u-hero__search .form-control {
flex: 1 1 auto;
min-width: 0;
height: 100%;
padding: 0 12px;
font-size: 17px;
font-weight: 600;
color: var(--u-ink);
background: none;
border: 0;
box-shadow: none;
}
.u-hero__search .form-control:focus {
box-shadow: none;
}
.u-hero__search .btn {
flex: 0 0 auto;
height: 46px;
padding: 0 24px;
font-size: 16px;
font-weight: 700;
border-radius: 10px;
}
/* "Proveri" je prvo dugme u formi (Enter = provera), a na ekranu stoji desno od "Transfer" */
.u-hero__btns {
display: flex;
flex: 0 0 auto;
gap: 6px;
}
.u-hero__btns .u-hero__check {
order: 2;
}
.u-hero__btns .u-hero__transfer {
order: 1;
}
.u-hero__search .u-hero__transfer {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 0 16px;
color: var(--u-blue);
background: var(--u-blue-50);
border: 1px solid transparent;
}
.u-hero__search .u-hero__transfer:hover,
.u-hero__search .u-hero__transfer:focus {
color: var(--u-blue-600);
background: #dde7fb;
}
.u-hero__transfer .u-ico {
width: 17px;
height: 17px;
}
.u-hero__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 18px;
margin-top: 14px;
}
.u-hero__tlds {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.u-hero__tld {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 6px 12px;
font-size: 13px;
color: #b7c9ee;
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .13);
border-radius: 999px;
cursor: pointer;
transition: border-color var(--u-ease), background-color var(--u-ease);
}
.u-hero__tld b {
font-size: 14px;
font-weight: 800;
color: #fff;
}
.u-hero__tld span {
font-weight: 600;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.u-hero__tld:hover,
.u-hero__tld:focus-visible {
background: rgba(255, 255, 255, .16);
border-color: rgba(255, 255, 255, .5);
outline: 0;
}
.u-hero__links {
display: flex;
gap: 18px;
margin: 0;
font-size: 14px;
font-weight: 700;
}
footer.footer .u-hero__links a,
.u-hero__links a {
display: inline-flex;
align-items: center;
gap: 6px;
color: #fff;
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, .35);
text-underline-offset: 4px;
}
.u-hero__links a:hover,
.u-hero__links a:focus {
color: #fff;
text-decoration-color: #fff;
}
/* Klijenti: providna kartica preko podloge */
.u-hero__client {
padding: 20px;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 16px;
box-shadow: 0 26px 50px -26px rgba(2, 10, 32, .6), inset 0 1px 0 rgba(255, 255, 255, .08);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.u-hero__clienttitle {
margin: 0 0 12px;
font-size: 17px;
font-weight: 800;
color: #fff;
}
.u-hero .btn-primary.u-hero__login {
color: var(--u-blue-600);
background: #fff;
border-color: #fff;
box-shadow: 0 10px 24px -14px rgba(2, 10, 32, .7);
}
.u-hero .btn-primary.u-hero__login:hover,
.u-hero .btn-primary.u-hero__login:focus {
color: var(--u-blue-600);
background: #e8efff;
border-color: #e8efff;
}
.u-hero .btn-primary.u-hero__login:focus-visible {
box-shadow: 0 0 0 4px rgba(126, 172, 255, .5);
}
.u-hero__login.btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 46px;
font-size: 16px;
font-weight: 700;
border-radius: 10px;
}
.u-hero__actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 10px;
}
.u-hero__actions a {
display: flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 8px 12px;
font-size: 14px;
font-weight: 700;
line-height: 1.25;
color: #e8efff;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 10px;
transition: border-color var(--u-ease), color var(--u-ease), background-color var(--u-ease);
}
.u-hero__actions a .u-ico {
color: #8db4ff;
}
.u-hero__actions a:hover,
.u-hero__actions a:focus {
color: #fff;
text-decoration: none;
background: rgba(255, 255, 255, .14);
border-color: rgba(255, 255, 255, .4);
}
.u-hero__actions a:hover .u-ico,
.u-hero__actions a:focus .u-ico {
color: #fff;
}
/* Captcha (ako je uključena za pretragu domena) na tamnoj podlozi */
.u-hero .domainchecker-homepage-captcha {
margin-top: 14px;
color: #dbe6ff;
}
.u-hero #default-captcha-domainchecker {
padding: 12px 6px;
background: rgba(255, 255, 255, .08);
border-radius: 12px;
}
@media (max-width: 767px) {
.u-hero {
padding: 26px 0 28px;
}
.u-hero::after {
top: -260px;
right: -260px;
width: 520px;
height: 520px;
}
.u-hero__title {
margin-bottom: 14px;
font-size: 27px;
}
.u-hero__search {
height: 54px;
padding-left: 14px;
}
.u-hero__search .form-control {
padding: 0 10px;
font-size: 16px;
}
.u-hero__search .btn {
height: 42px;
padding: 0 16px;
}
/* Telefon: polje u prvom redu, "Transfer" i "Proveri" ispod, svako pola širine */
.u-hero__search {
flex-wrap: wrap;
height: auto;
padding: 0 6px 6px 14px;
}
.u-hero__search .form-control {
flex-basis: calc(100% - 20px);
height: 52px;
}
.u-hero__btns {
flex: 1 1 100%;
margin-left: -8px;
}
.u-hero__btns .btn {
flex: 1 1 0;
justify-content: center;
}
.u-hero__client {
padding: 16px;
}
/* Nastavci u jednom redu koji se pomera prstom, umesto tri reda */
.u-hero__meta {
display: block;
}
.u-hero__tlds {
flex-wrap: nowrap;
margin: 0 -15px;
padding: 0 15px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.u-hero__tlds::-webkit-scrollbar {
display: none;
}
.u-hero__tlds li {
flex: 0 0 auto;
}
.u-hero__links {
margin-top: 12px;
}
}
/* Usluge: grupe proizvoda iz WHMCS-a i domeni */
.tpl-homepage section#main-body {
padding-top: 30px;
}
.u-home__title {
margin: 0 0 14px;
font-size: 20px;
font-weight: 800;
color: var(--u-ink);
}
.u-home__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.u-svc {
display: flex;
align-items: center;
gap: 14px;
height: 100%;
padding: 16px 16px 16px 18px;
color: var(--u-ink);
background: #fff;
border: 1px solid var(--u-line);
border-radius: 14px;
box-shadow: var(--u-shadow);
transition: border-color var(--u-ease), box-shadow var(--u-ease);
}
.u-svc:hover,
.u-svc:focus {
color: var(--u-ink);
text-decoration: none;
border-color: var(--u-blue);
box-shadow: var(--u-shadow-hover);
}
.u-svc__ico {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 46px;
height: 46px;
color: var(--u-blue);
background: var(--u-blue-50);
border-radius: 12px;
}
.u-svc__ico .u-ico {
width: 22px;
height: 22px;
}
.u-svc__text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.u-svc__name {
font-size: 16px;
font-weight: 800;
line-height: 1.3;
}
.u-svc__desc {
display: -webkit-box;
overflow: hidden;
font-size: 13px;
line-height: 1.4;
color: var(--u-muted);
/* do četiri reda: ceo opis domena ("Registracija i migracija preko 100 ...") staje i u uže kartice */
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
.u-svc__go {
margin-left: auto;
color: #a9b6c6;
}
.u-svc:hover .u-svc__go {
color: var(--u-blue);
}
/* Novosti na početnoj (ispod usluga) */
.u-news {
margin-top: 32px;
}
.u-home__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.u-home__head .u-home__title {
margin: 0;
}
.u-home__more {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 14px;
font-weight: 700;
color: var(--u-blue);
white-space: nowrap;
}
.u-home__more:hover {
color: var(--u-blue-600);
}
.u-home__more .u-ico {
width: 16px;
height: 16px;
}
.u-news__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.u-news__card {
display: flex;
flex-direction: column;
gap: 8px;
height: 100%;
padding: 18px 18px 16px;
color: var(--u-ink);
background: #fff;
border: 1px solid var(--u-line);
border-radius: 14px;
box-shadow: var(--u-shadow);
transition: border-color var(--u-ease), box-shadow var(--u-ease);
}
.u-news__card:hover,
.u-news__card:focus {
color: var(--u-ink);
text-decoration: none;
border-color: var(--u-blue);
box-shadow: var(--u-shadow-hover);
}
.u-news__date {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 6px;
padding: 3px 9px;
font-size: 12px;
font-weight: 700;
color: var(--u-slate);
font-variant-numeric: tabular-nums;
background: var(--u-paper);
border-radius: 999px;
}
.u-news__date .u-ico {
width: 13px;
height: 13px;
}
.u-news__title {
display: -webkit-box;
overflow: hidden;
font-size: 16px;
font-weight: 800;
line-height: 1.35;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.u-news__text {
display: -webkit-box;
overflow: hidden;
font-size: 14px;
line-height: 1.5;
color: var(--u-muted);
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.u-news__go {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: auto;
padding-top: 4px;
font-size: 14px;
font-weight: 700;
color: var(--u-blue);
}
.u-news__go .u-ico {
width: 15px;
height: 15px;
transition: transform var(--u-ease);
}
.u-news__card:hover .u-news__go .u-ico {
transform: translateX(3px);
}
/* Natpisi polja u Twenty-One formama (col-form-label text-right): kada se polja slože jedno ispod drugog, natpis je levo */
@media (max-width: 575px) {
.col-form-label.text-right {
text-align: left !important;
}
}
/* ---------- Prijava ---------- */
.u-auth {
max-width: 440px;
margin: 8px auto 32px;
}
.u-auth__alert {
margin-bottom: 16px;
}
.u-auth__card {
margin: 0;
padding: 32px;
background: #fff;
border: 1px solid var(--u-line);
border-radius: 18px;
box-shadow: 0 24px 48px -36px rgba(20, 32, 51, .45);
}
.u-auth__head {
margin: 0 0 22px;
}
.u-auth__title {
margin: 0 0 4px;
font-size: 28px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--u-ink);
}
.u-auth__lead {
margin: 0;
font-size: 15px;
color: var(--u-muted);
}
.u-auth .form-group {
margin-bottom: 16px;
}
.u-auth__label {
display: block;
margin: 0 0 6px;
font-size: 14px;
font-weight: 700;
color: var(--u-ink);
}
.u-auth .u-auth__input.form-control {
height: 50px;
padding: 0 14px;
font-size: 16px;
color: var(--u-ink);
background: #fff;
border: 1.5px solid var(--u-line);
border-radius: 10px;
box-shadow: none;
}
.u-auth .u-auth__input.form-control:focus {
border-color: var(--u-blue);
box-shadow: 0 0 0 4px rgba(31, 90, 209, .14);
}
.u-auth__pw {
flex-wrap: nowrap;
border-radius: 10px;
}
.u-auth .u-auth__pw .u-auth__input.form-control {
border-right: 0;
border-radius: 10px 0 0 10px;
}
.u-auth .u-auth__pw .u-auth__input.form-control:focus {
box-shadow: none;
}
.u-auth__pw:focus-within {
box-shadow: 0 0 0 4px rgba(31, 90, 209, .14);
}
.u-auth .u-auth__reveal {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
padding: 0;
color: var(--u-slate);
background: #fff;
border: 1.5px solid var(--u-line);
border-left: 0;
border-radius: 0 10px 10px 0;
box-shadow: none;
}
.u-auth__pw:focus-within .u-auth__input.form-control,
.u-auth__pw:focus-within .u-auth__reveal {
border-color: var(--u-blue);
}
.u-auth .u-auth__reveal:hover {
color: var(--u-blue);
}
.u-auth .u-auth__reveal .u-ico {
width: 20px;
height: 20px;
vertical-align: 0;
}
.u-auth__row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 16px;
margin: 2px 0 20px;
font-size: 14px;
}
.u-auth__remember {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
font-weight: 600;
color: var(--u-ink-2);
cursor: pointer;
}
.u-auth__remember input {
width: 18px;
height: 18px;
margin: 0;
accent-color: var(--u-blue);
}
.u-auth__forgot {
font-weight: 700;
color: var(--u-blue);
}
.u-auth .u-auth__submit {
height: 50px;
font-size: 16px;
font-weight: 700;
border-radius: 10px;
}
.u-auth__foot {
margin: 22px 0 0;
padding: 18px 0 0;
font-size: 14px;
text-align: center;
color: var(--u-muted);
border-top: 1px solid var(--u-line-2);
}
.u-auth__foot a {
font-weight: 700;
color: var(--u-blue);
}
@media (max-width: 575px) {
.u-auth {
margin-top: 0;
}
.u-auth__card {
padding: 24px 18px;
border-radius: 16px;
}
.u-auth__title {
font-size: 26px;
}
}
/* ---------- Kontakt ---------- */
.u-contact {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 18px;
margin-bottom: 24px;
}
@media (min-width: 992px) {
.u-contact {
grid-template-columns: minmax(0, 1fr) 300px;
align-items: start;
gap: 24px;
}
}
.u-contact__card {
margin: 0;
}
.u-contact__card .card-body {
padding: 28px;
}
.u-contact__lead {
margin: 0 0 18px;
font-size: 15px;
color: var(--u-muted);
}
.u-contact__form label {
margin: 0 0 6px;
font-size: 14px;
font-weight: 700;
color: var(--u-ink);
}
.u-contact__form .form-control {
height: 48px;
padding: 0 14px;
font-size: 16px;
border: 1.5px solid var(--u-line);
border-radius: 10px;
box-shadow: none;
}
.u-contact__form textarea.form-control {
height: auto;
min-height: 160px;
padding: 12px 14px;
}
.u-contact__form .form-control:focus {
border-color: var(--u-blue);
box-shadow: 0 0 0 4px rgba(31, 90, 209, .14);
}
.u-contact__captcha {
margin: 4px 0 16px;
}
.u-contact .u-contact__send {
height: 48px;
padding: 0 28px;
font-size: 16px;
font-weight: 700;
border-radius: 10px;
}
.u-contact__side {
display: grid;
gap: 12px;
}
.u-contact__item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px;
background: #fff;
border: 1px solid var(--u-line);
border-radius: 14px;
}
.u-contact__ico {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 42px;
height: 42px;
color: var(--u-blue);
background: var(--u-blue-50);
border-radius: 11px;
}
.u-contact__ico .u-ico {
width: 20px;
height: 20px;
vertical-align: 0;
}
.u-contact__label {
display: block;
font-size: 12px;
font-weight: 700;
color: var(--u-muted);
}
.u-contact__value {
display: block;
font-size: 17px;
font-weight: 800;
color: var(--u-ink);
}
.u-contact__value:hover {
color: var(--u-blue);
text-decoration: none;
}
.u-contact__note {
display: block;
margin-top: 2px;
font-size: 13px;
line-height: 1.4;
color: var(--u-muted);
}
@media (max-width: 575px) {
.u-contact__card .card-body {
padding: 20px 16px;
}
.u-contact .u-contact__send {
width: 100%;
}
}
/* ---------- Automatska lozinka (includes/generate-password.tpl) ---------- */
.u-pwgen .modal-content {
overflow: hidden;
border: 0;
border-radius: 18px;
box-shadow: 0 30px 60px -30px rgba(20, 32, 51, .5);
}
.u-pwgen .u-pwgen__head {
display: flex;
align-items: center;
gap: 14px;
padding: 20px 22px 16px;
color: var(--u-ink);
background: #fff;
border-bottom: 1px solid var(--u-line-2);
}
.u-pwgen__ico {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 44px;
height: 44px;
color: var(--u-blue);
background: var(--u-blue-50);
border-radius: 12px;
}
.u-pwgen__ico .u-ico {
width: 22px;
height: 22px;
vertical-align: 0;
}
.u-pwgen__titles {
flex: 1 1 auto;
min-width: 0;
}
.u-pwgen .modal-title {
margin: 0;
font-size: 19px;
font-weight: 800;
color: var(--u-ink);
}
.u-pwgen__sub {
margin: 2px 0 0;
font-size: 13px;
color: var(--u-muted);
}
.u-pwgen .u-pwgen__head .close {
align-self: flex-start;
margin: -6px -8px 0 0;
padding: 6px 10px;
font-size: 26px;
color: var(--u-slate);
text-shadow: none;
opacity: 1;
}
.u-pwgen .modal-body {
padding: 20px 22px 8px;
}
.u-pwgen__label {
display: block;
margin: 0 0 6px;
font-size: 13px;
font-weight: 700;
color: var(--u-ink-2);
}
.u-pwgen__out {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 4px 4px 0;
background: var(--u-paper);
border: 1.5px solid var(--u-line);
border-radius: 12px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.u-pwgen__out:focus-within {
border-color: var(--u-blue);
box-shadow: 0 0 0 4px rgba(31, 90, 209, .14);
}
.u-pwgen .u-pwgen__field.form-control {
flex: 1 1 auto;
min-width: 0;
height: 46px;
padding: 0 14px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
font-size: 18px;
font-weight: 600;
letter-spacing: .04em;
color: var(--u-ink);
background: transparent;
border: 0;
box-shadow: none;
}
.u-pwgen__iconbtn {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 42px;
height: 42px;
padding: 0;
color: var(--u-ink-2);
background: #fff;
border: 1px solid var(--u-line);
border-radius: 9px;
cursor: pointer;
transition: color .15s ease, border-color .15s ease;
}
.u-pwgen__iconbtn:hover,
.u-pwgen__iconbtn:focus-visible {
color: var(--u-blue);
border-color: var(--u-blue);
outline: 0;
}
.u-pwgen__iconbtn .u-ico {
width: 18px;
height: 18px;
vertical-align: 0;
}
.u-pwgen__iconbtn[type="submit"]:active .u-ico {
transform: rotate(180deg);
transition: transform .3s ease;
}
.u-pwgen__len {
margin: 18px 0 0;
}
.u-pwgen__lenrow {
display: flex;
align-items: center;
gap: 14px;
}
.u-pwgen__range {
flex: 1 1 auto;
min-width: 0;
accent-color: var(--u-blue);
}
.u-pwgen__stepper {
display: flex;
flex: 0 0 auto;
align-items: stretch;
height: 40px;
border: 1.5px solid var(--u-line);
border-radius: 10px;
overflow: hidden;
}
.u-pwgen__stepper button {
width: 36px;
padding: 0;
font-size: 18px;
font-weight: 700;
line-height: 1;
color: var(--u-ink-2);
background: var(--u-paper);
border: 0;
cursor: pointer;
}
.u-pwgen__stepper button:hover {
color: var(--u-blue);
}
.u-pwgen__stepper .form-control {
width: 52px;
height: 100%;
padding: 0;
font-weight: 800;
text-align: center;
border: 0;
border-radius: 0;
box-shadow: none;
-moz-appearance: textfield;
}
.u-pwgen__stepper .form-control::-webkit-outer-spin-button,
.u-pwgen__stepper .form-control::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
.u-pwgen .u-pwgen__foot {
gap: 8px;
padding: 16px 22px 20px;
border-top: 0;
}
.u-pwgen .u-pwgen__foot .btn {
height: 44px;
margin: 0;
padding: 0 18px;
font-weight: 700;
border-radius: 10px;
}
@media (max-width: 575px) {
.u-pwgen .u-pwgen__foot {
flex-direction: column-reverse;
align-items: stretch;
}
.u-pwgen .u-pwgen__foot .btn {
width: 100%;
}
}
/* Snaga lozinke u korisničkoj zoni (Twenty-One #passwordStrengthBar): ista animacija kao u korpi */
@keyframes u-pw-stripes {
to {
background-position: 16px 0;
}
}
#passwordStrengthBar {
height: 8px;
overflow: hidden;
background: var(--u-line-2);
border-radius: 4px;
}
#passwordStrengthBar .progress-bar {
background-image: linear-gradient(45deg, rgba(255, 255, 255, .28) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, .28) 75%, transparent 75%, transparent);
background-size: 16px 16px;
border-radius: 4px;
transition: width .45s cubic-bezier(.22, .8, .3, 1), background-color .3s ease;
animation: u-pw-stripes .7s linear infinite;
}
#passwordStrengthBar .progress-bar.bg-danger {
background-color: var(--u-red) !important;
}
#passwordStrengthBar .progress-bar.bg-warning {
background-color: var(--u-amber) !important;
}
#passwordStrengthBar .progress-bar.bg-success {
background-color: var(--u-green) !important;
}
@media (prefers-reduced-motion: reduce) {
#passwordStrengthBar .progress-bar {
animation: none;
transition: none;
}
}
/* ---------- Ikonica korpe (zaglavlje i trake pri dnu) ----------
1 stavka: mali zlatni paketić; 2: i plavi iste visine; 3 i više: plavi je visok; prazna: bez paketića.
Kada se nešto doda (is-filling), novi paketić upadne ili plavi poraste, a korpa se zaljulja. */
.u-carticon {
overflow: visible;
}
.u-carticon__items rect {
opacity: 0;
transform-box: fill-box;
transform-origin: 50% 100%;
transition: opacity .2s ease;
}
.is-one .u-carticon__a,
.is-two .u-carticon__a,
.is-many .u-carticon__a,
.is-two .u-carticon__b2,
.is-many .u-carticon__b3 {
opacity: 1;
}
/* U traci je korpa plava, pa je plavi paketić tamo zelen da se vidi */
.u-cartbar__cart .u-carticon__b {
fill: var(--u-green, #0f8a5f);
}
@keyframes u-cart-drop {
0% {
opacity: 0;
transform: translateY(-10px) scale(.7);
}
55% {
opacity: 1;
transform: translateY(1.2px) scale(1.04);
}
100% {
opacity: 1;
transform: none;
}
}
@keyframes u-cart-grow {
0% {
transform: scaleY(.53);
}
60% {
transform: scaleY(1.08);
}
100% {
transform: none;
}
}
@keyframes u-cart-rock {
0%, 100% {
transform: rotate(0);
}
35% {
transform: rotate(-9deg);
}
70% {
transform: rotate(5deg);
}
}
.is-filling.is-one .u-carticon__a,
.is-filling.is-two .u-carticon__b2 {
animation: u-cart-drop .5s cubic-bezier(.3, .7, .4, 1.3) both;
}
.is-filling.is-many .u-carticon__b3 {
animation: u-cart-grow .5s cubic-bezier(.3, .7, .4, 1.3) both;
}
.is-filling .u-carticon {
transform-origin: 50% 85%;
animation: u-cart-rock .5s .3s ease;
}
@media (prefers-reduced-motion: reduce) {
.is-filling .u-carticon,
.is-filling .u-carticon__items rect {
animation: none;
}
}
/* ---------- Predračun / račun (viewinvoice.tpl) ----------
Unutar korisničke zone (zaglavlje, meni, podnožje): levo račun, desno plaćanje. Na telefonu je plaćanje prvo. */
.u-invp {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
align-items: start;
gap: 20px;
margin-bottom: 24px;
}
.u-inv {
min-width: 0;
background: #fff;
border: 1px solid var(--u-line);
border-radius: var(--u-r);
box-shadow: var(--u-shadow);
}
.u-inv--error {
max-width: 560px;
margin: 0 auto 24px;
padding: 32px 24px;
text-align: center;
}
.u-inv__erricon {
width: 40px;
height: 40px;
color: var(--u-red);
}
.u-inv__errtitle {
margin: 10px 0 6px;
font-size: 20px;
font-weight: 800;
}
.u-inv--error .btn {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 8px;
font-weight: 700;
}
.u-inv--error .btn .u-ico {
width: 17px;
height: 17px;
}
/* logo i naslov samo na štampi */
.u-inv__print {
display: none;
}
.u-inv__logo {
display: block;
max-width: 220px;
max-height: 46px;
}
.u-inv__company {
display: block;
font-size: 20px;
font-weight: 800;
}
.u-inv__title {
margin: 12px 0 0;
font-size: 22px;
font-weight: 800;
line-height: 1.25;
}
.u-inv__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 20px;
padding: 16px 22px 14px;
}
.u-inv__id {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.u-inv__num {
padding: 3px 9px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 13px;
font-weight: 700;
color: var(--u-ink-2);
background: var(--u-paper);
border: 1px solid var(--u-line-2);
border-radius: 7px;
}
.u-inv-status {
display: inline-flex;
align-items: center;
padding: 4px 11px;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
color: var(--u-ink-2);
background: #edf1f5;
border-radius: 999px;
}
.u-inv-status.is-unpaid,
.u-inv-status.is-collections {
color: var(--u-red);
background: var(--u-red-50);
}
.u-inv-status.is-paid {
color: var(--u-green-600);
background: var(--u-green-50);
}
.u-inv-status.is-payment-pending,
.u-inv-status.is-draft {
color: #8a5a00;
background: var(--u-amber-50);
}
.u-inv__tools {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.btn.u-inv-tool {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 18px;
font-size: 15px;
font-weight: 700;
color: var(--u-blue);
border-color: #c6d4ee;
}
.btn.u-inv-tool:hover,
.btn.u-inv-tool:focus {
color: #fff;
background: var(--u-blue);
border-color: var(--u-blue);
}
.u-inv-tool .u-ico {
width: 19px;
height: 19px;
}
.u-inv__meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
margin: 0;
border-top: 1px solid var(--u-line-2);
border-bottom: 1px solid var(--u-line-2);
}
.u-inv__meta > div {
min-width: 0;
padding: 11px 22px 13px;
}
.u-inv__meta > div + div {
border-left: 1px solid var(--u-line-2);
}
.u-inv__meta dt {
display: flex;
align-items: center;
gap: 6px;
margin: 0 0 3px;
font-size: 12.5px;
font-weight: 600;
color: var(--u-muted);
}
.u-inv__meta dt .u-ico {
flex: 0 0 auto;
width: 13px;
height: 13px;
}
.u-inv__meta dd {
margin: 0;
font-size: 15px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.u-inv__parties {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 20px 28px;
padding: 20px 22px 4px;
}
.u-inv__party address {
margin: 0;
font-size: 14px;
font-style: normal;
line-height: 1.65;
color: var(--u-ink-2);
overflow-wrap: anywhere;
}
.u-inv__party address strong {
color: var(--u-ink);
}
.u-inv__label {
margin: 0 0 6px;
font-size: 12px;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--u-muted);
}
/* "Promeni primaoca fakture" */
.btn.u-inv-payee {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 12px;
padding: 7px 14px;
font-size: 14px;
font-weight: 700;
color: var(--u-blue);
background: var(--u-blue-50);
border: 1px solid #d3dff6;
border-radius: 9px;
}
.btn.u-inv-payee:hover,
.btn.u-inv-payee:focus {
color: #fff;
background: var(--u-blue);
border-color: var(--u-blue);
}
.u-inv-payee .u-ico {
width: 17px;
height: 17px;
}
.u-inv-items,
.u-inv-trans {
padding: 0 22px;
}
.u-inv-trans {
padding-bottom: 20px;
}
.u-inv__section {
margin: 24px 0 6px;
font-size: 16px;
font-weight: 800;
}
.u-inv-table {
width: 100%;
border-collapse: collapse;
}
.u-inv-table th {
padding: 8px 0;
font-size: 12px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--u-muted);
text-align: left;
border-bottom: 1px solid var(--u-line);
}
.u-inv-table td {
padding: 12px 0;
font-size: 14.5px;
line-height: 1.5;
vertical-align: top;
border-bottom: 1px solid var(--u-line-2);
overflow-wrap: anywhere;
}
.u-inv-table .u-inv-table__amt {
padding-left: 16px;
text-align: right;
white-space: nowrap;
overflow-wrap: normal;
font-variant-numeric: tabular-nums;
}
.u-inv-table td.u-inv-table__amt {
font-weight: 700;
}
.u-inv-taxmark {
color: var(--u-muted);
}
.u-inv-totals {
width: min(100%, 340px);
margin: 12px 0 0 auto;
}
.u-inv-totals > div {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 5px 0;
}
.u-inv-totals dt {
font-size: 14px;
font-weight: 600;
color: var(--u-ink-2);
}
.u-inv-totals dd {
margin: 0;
font-size: 15px;
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.u-inv-totals .u-inv-totals__total {
align-items: baseline;
margin-top: 6px;
padding-top: 10px;
border-top: 2px solid var(--u-ink);
}
.u-inv-totals__total dt {
font-size: 16px;
font-weight: 800;
color: var(--u-ink);
}
.u-inv-totals__total dd {
font-size: 21px;
font-weight: 800;
}
.u-inv-note {
margin: 10px 0 0;
font-size: 13px;
color: var(--u-muted);
}
.u-inv-table--sm th,
.u-inv-table--sm td {
padding-right: 12px;
}
.u-inv-table--sm td {
padding-top: 9px;
padding-bottom: 9px;
font-size: 14px;
}
.u-inv-table--sm .u-inv-table__amt {
padding-right: 0;
}
.u-inv-table__ref {
word-break: break-all;
}
.u-inv-table__none {
color: var(--u-muted);
text-align: center;
}
.u-inv-table tfoot th {
padding: 10px 12px 0 0;
font-size: 14px;
letter-spacing: 0;
text-transform: none;
color: var(--u-ink);
text-align: right;
border: 0;
}
.u-inv-table tfoot td {
padding: 10px 0 0;
font-size: 15px;
font-weight: 800;
border: 0;
}
.u-inv-qr {
padding: 0 22px 20px;
}
.u-inv-alert {
margin: 0 0 16px;
padding: 14px 18px;
font-size: 15px;
color: var(--u-ink);
background: var(--u-blue-50);
border-radius: var(--u-r);
}
.u-inv-alert.is-success {
background: var(--u-green-50);
}
.u-inv-alert.is-danger,
.u-inv-alert.is-error {
background: var(--u-red-50);
}
/* desna kolona: plaćanje */
.u-inv-side {
display: grid;
gap: 14px;
min-width: 0;
}
.u-inv-pay,
.u-inv-credit,
.u-inv-done {
min-width: 0;
background: #fff;
border: 1px solid var(--u-line);
border-radius: var(--u-r);
box-shadow: var(--u-shadow);
}
.u-inv-pay {
padding-bottom: 20px;
overflow: hidden;
}
.u-inv-pay__sum {
display: grid;
gap: 2px;
padding: 18px 20px;
color: #fff;
background: linear-gradient(135deg, var(--u-blue) 0%, #2d6fe6 100%);
}
.u-inv-pay__label {
display: block;
margin-bottom: 4px;
font-size: 12px;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--u-slate);
}
.u-inv-pay__sum .u-inv-pay__label {
margin: 0;
color: rgba(255, 255, 255, .82);
}
.u-inv-pay__amount {
font-size: 30px;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.u-inv-pay__due {
font-size: 13.5px;
font-weight: 600;
color: rgba(255, 255, 255, .86);
}
.u-inv-pay__method {
padding: 16px 20px 0;
}
.u-inv-pay__method strong {
font-size: 15px;
}
.u-inv-pay__form {
margin: 0;
}
.u-inv-pay__form .custom-select {
width: 100%;
height: 44px;
font-weight: 700;
border-color: #c6d4ee;
border-radius: 10px;
}
/* "Plati karticom" */
.u-inv-card {
margin: 0;
padding: 10px 20px 0;
}
.btn.u-inv-card__btn {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
width: 100%;
min-height: 44px;
font-size: 15px;
font-weight: 800;
color: var(--u-blue);
background: var(--u-blue-50);
border: 1px solid #d3dff6;
border-radius: 10px;
}
.btn.u-inv-card__btn:hover,
.btn.u-inv-card__btn:focus {
color: #fff;
background: var(--u-blue);
border-color: var(--u-blue);
}
.u-inv-card__btn .u-ico {
width: 19px;
height: 19px;
}
/* Uplata na tekući račun: podaci za uplatu i NBS QR kod su u PDF-u računa */
.u-inv-pdfhint {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 0;
padding: 12px 20px 0;
font-size: 13.5px;
line-height: 1.5;
color: var(--u-ink-2);
}
.u-inv-pdfhint .u-ico {
flex: 0 0 auto;
width: 17px;
height: 17px;
margin-top: 1px;
color: var(--u-blue);
}
.u-inv-pdfhint a {
font-weight: 700;
color: var(--u-blue);
text-decoration: underline;
text-underline-offset: 2px;
}
.u-inv-pay__btn {
margin: 16px 20px 0;
padding: 14px 16px;
font-size: 14px;
line-height: 1.6;
text-align: left;
background: var(--u-paper);
border-radius: 10px;
overflow-wrap: anywhere;
}
.u-inv-pay__method + .u-inv-pay__btn,
.u-inv-card + .u-inv-pay__btn {
margin-top: 14px;
}
.u-inv-pay__btn:empty {
display: none;
}
.u-inv-pay__btn img {
max-width: 100%;
height: auto;
}
.u-inv-pay__btn[hidden] {
display: none;
}
.u-inv-pay__btn form {
margin: 0;
}
/* Dugme iz modula za plaćanje (npr. "Plati odmah" kod kartice): preko cele širine, kao ostala dugmad u koloni */
.u-inv-pay__btn .btn,
.u-inv-pay__btn input[type="submit"],
.u-inv-pay__btn button[type="submit"],
.u-inv-pay__btn button:not([type]) {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 48px;
margin: 6px 0 0;
padding: 10px 22px;
font-size: 16px;
font-weight: 800;
line-height: 1.2;
color: #fff;
text-align: center;
background: var(--u-green);
border: 0;
border-radius: 10px;
box-shadow: 0 8px 18px -12px rgba(15, 122, 77, .8);
transition: filter .15s ease, transform .15s ease;
}
.u-inv-pay__btn .btn:hover,
.u-inv-pay__btn input[type="submit"]:hover,
.u-inv-pay__btn button:hover {
color: #fff;
filter: brightness(1.06);
transform: translateY(-1px);
}
.u-inv-pay__btn .btn:first-child,
.u-inv-pay__btn form:first-child .btn:first-of-type,
.u-inv-pay__btn form:first-child button:first-of-type,
.u-inv-pay__btn form:first-child input[type="submit"]:first-of-type {
margin-top: 0;
}
/* Samo dugme, bez teksta: bez sive podloge */
.u-inv-pay__btn.is-btnonly {
padding: 0;
background: none;
}
.u-inv-credit {
padding: 18px 20px 20px;
font-size: 14px;
}
.u-inv-credit__head {
display: flex;
align-items: flex-start;
gap: 12px;
}
.u-inv-credit__ico {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 38px;
height: 38px;
color: var(--u-green-600);
background: var(--u-green-50);
border-radius: 10px;
}
.u-inv-credit__ico .u-ico {
width: 19px;
height: 19px;
}
h3.u-inv-credit__title {
margin: 0 0 2px;
font-size: 15px;
font-weight: 800;
line-height: 1.3;
}
.u-inv-credit__text {
margin: 0;
font-size: 13.5px;
line-height: 1.5;
color: var(--u-ink-2);
}
.u-inv-credit__text strong {
color: var(--u-ink);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.u-inv-credit__form {
margin: 14px 0 0;
}
.u-inv-credit__label {
display: block;
margin: 0 0 5px;
font-size: 12px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--u-muted);
}
.u-inv-credit__row {
display: flex;
gap: 8px;
}
.u-inv-credit__row .form-control {
flex: 1 1 auto;
min-width: 0;
height: 44px;
font-size: 15px;
font-weight: 700;
font-variant-numeric: tabular-nums;
border-radius: 10px;
}
.u-inv-credit__row .btn {
flex: 0 0 auto;
height: 44px;
padding: 0 16px;
font-weight: 700;
white-space: nowrap;
border-radius: 10px;
}
.u-inv-done {
display: grid;
gap: 2px;
padding: 18px 20px;
}
.u-inv-done.is-paid {
background: var(--u-green-50);
border-color: #cde9d9;
}
.u-inv-done .u-inv-pay__due {
color: var(--u-ink-2);
}
a.u-inv-all {
display: inline-flex;
align-items: center;
gap: 7px;
justify-self: start;
padding: 4px 2px;
font-size: 14px;
font-weight: 700;
color: var(--u-blue);
}
a.u-inv-all .u-ico {
width: 16px;
height: 16px;
transition: transform var(--u-ease);
}
a.u-inv-all:hover .u-ico {
transform: translateX(-3px);
}
/* Moje info: dolazak sa računa ("Promeni primaoca fakture") i pomoć ispod kontakta za plaćanje */
.u-payee-note {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
margin: 0 0 16px;
padding: 14px 18px;
background: var(--u-blue-50);
border: 1px solid #d3dff6;
border-radius: var(--u-r);
}
.u-payee-note > .u-ico {
flex: 0 0 auto;
width: 20px;
height: 20px;
color: var(--u-blue);
}
.u-payee-note p {
flex: 1 1 240px;
margin: 0;
font-size: 14.5px;
font-weight: 600;
}
.u-payee-note .btn {
display: inline-flex;
align-items: center;
gap: 7px;
font-weight: 700;
}
.u-payee-note .btn .u-ico {
width: 16px;
height: 16px;
}
.u-billcid {
scroll-margin-top: 90px;
}
.u-billcid.is-target {
margin: -8px;
padding: 8px;
border-radius: 10px;
box-shadow: 0 0 0 2px var(--u-blue);
}
.u-billcid__from {
margin: -2px 0 8px;
font-size: 13.5px;
font-weight: 600;
color: var(--u-blue);
}
.u-billcid__help {
margin: 8px 0 8px;
font-size: 13.5px;
color: var(--u-ink-2);
}
.btn.u-billcid__btn,
a.u-billcid__link {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 14px;
font-weight: 700;
}
a.u-billcid__link {
margin-top: 8px;
color: var(--u-blue);
}
.u-billcid__btn .u-ico,
.u-billcid__link .u-ico {
width: 16px;
height: 16px;
}
@media (max-width: 991.98px) {
.u-invp {
grid-template-columns: minmax(0, 1fr);
}
/* na telefonu i tabletu: iznos i plaćanje pre računa */
.u-inv-side {
order: -1;
}
}
@media (max-width: 639px) {
.u-inv__head {
padding: 14px 16px 12px;
}
.u-inv__meta {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.u-inv__meta > div {
padding: 10px 16px 11px;
}
.u-inv__meta > div + div {
border-left: 0;
}
.u-inv__meta > div:nth-child(even) {
border-left: 1px solid var(--u-line-2);
}
.u-inv__meta > div:nth-child(n+3) {
border-top: 1px solid var(--u-line-2);
}
.u-inv__parties {
grid-template-columns: minmax(0, 1fr);
padding: 16px 16px 0;
}
.u-inv-items,
.u-inv-trans,
.u-inv-qr {
padding-left: 16px;
padding-right: 16px;
}
/* Uplate: svaka uplata u dva reda (datum i iznos, pa način plaćanja i broj), bez vodoravnog pomeranja */
.u-inv-table--sm thead {
display: none;
}
.u-inv-table--sm,
.u-inv-table--sm tbody,
.u-inv-table--sm tfoot {
display: block;
width: 100%;
}
.u-inv-table--sm tbody tr {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 2px 12px;
padding: 10px 0;
border-bottom: 1px solid var(--u-line-2);
}
.u-inv-table--sm tbody td {
padding: 0;
border: 0;
}
.u-inv-table--sm tbody td:nth-child(1) {
grid-column: 1;
grid-row: 1;
font-weight: 700;
}
.u-inv-table--sm tbody td.u-inv-table__amt {
grid-column: 2;
grid-row: 1;
padding: 0;
}
.u-inv-table--sm tbody td:nth-child(2),
.u-inv-table--sm tbody td:nth-child(3) {
grid-column: 1 / -1;
font-size: 13px;
color: var(--u-muted);
}
.u-inv-table--sm tbody td.u-inv-table__none {
grid-column: 1 / -1;
font-size: 14px;
}
.u-inv-table--sm tfoot tr {
display: flex;
justify-content: space-between;
gap: 12px;
}
.u-inv-table--sm tfoot th {
text-align: left;
}
.u-inv-pay__amount {
font-size: 27px;
}
}
@media print {
body.tpl-viewinvoice {
background: #fff !important;
}
body.tpl-viewinvoice #header,
body.tpl-viewinvoice .master-breadcrumb,
body.tpl-viewinvoice #footer,
body.tpl-viewinvoice .u-topbar,
.u-inv__tools,
.btn.u-inv-payee,
a.u-inv-all,
.u-inv-pay__form,
.u-inv-card,
.u-inv-credit,
.u-inv-pay__btn .btn,
.u-inv-pay__btn button,
.u-inv-pay__btn input[type="submit"] {
display: none !important;
}
.u-inv__print {
display: block;
padding: 0 0 16px;
}
.u-invp {
display: block;
}
.u-inv,
.u-inv-pay,
.u-inv-done {
border: 0;
box-shadow: none;
}
.u-inv__head,
.u-inv__parties,
.u-inv-items,
.u-inv-trans,
.u-inv-qr {
padding-left: 0;
padding-right: 0;
}
.u-inv__meta > div:first-child {
padding-left: 0;
}
.u-inv-side {
margin-top: 12px;
}
.u-inv-pay__sum {
color: var(--u-ink);
background: none;
padding-left: 0;
}
.u-inv-pay__sum .u-inv-pay__label,
.u-inv-pay__due {
color: var(--u-ink-2);
}
.u-inv-pay__method {
padding-left: 0;
}
.u-inv-pay__btn {
margin-left: 0;
margin-right: 0;
background: none;
border: 1px solid var(--u-line);
}
}
/* ---------- Detalji usluge (clientareaproductdetails.tpl, modules/servers/cpanel/overview.tpl) ---------- */
.u-svc-page {
display: grid;
gap: 16px;
margin-bottom: 20px;
}
.u-svcd {
background: #fff;
border: 1px solid var(--u-line);
border-radius: 16px;
box-shadow: var(--u-shadow);
overflow: hidden;
}
.u-svcd__top {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 22px 22px 18px;
}
.u-svcd__ico {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 52px;
height: 52px;
color: var(--u-blue);
background: var(--u-blue-50);
border-radius: 14px;
}
.u-svcd__ico .u-ico {
width: 26px;
height: 26px;
}
.u-svcd__id {
flex: 1 1 auto;
min-width: 0;
}
.u-svcd__group {
display: block;
font-size: 12px;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--u-muted);
}
.u-svcd__name {
margin: 2px 0 6px;
font-size: 24px;
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.02em;
}
.u-svcd__name small {
font-size: 15px;
color: var(--u-muted);
}
.u-svcd__links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 16px;
font-size: 15px;
}
a.u-svcd__domain {
display: inline-flex;
align-items: center;
gap: 5px;
font-weight: 700;
color: var(--u-blue);
word-break: break-all;
}
.u-svcd__domain .u-ico {
width: 14px;
height: 14px;
}
a.u-svcd__sub {
font-size: 14px;
font-weight: 600;
color: var(--u-muted);
text-decoration: underline;
text-decoration-color: var(--u-line);
text-underline-offset: 3px;
}
a.u-svcd__sub:hover {
color: var(--u-blue);
}
.u-svcd__side {
display: flex;
flex: 0 0 auto;
flex-direction: column;
align-items: flex-end;
gap: 10px;
}
.u-svcd__status {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 12px;
font-size: 13px;
font-weight: 800;
color: var(--u-ink-2);
background: var(--u-paper);
border-radius: 999px;
}
.u-svcd__dot {
width: 8px;
height: 8px;
background: currentColor;
border-radius: 50%;
}
.u-svcd__status.is-active {
color: var(--u-green);
background: var(--u-green-50);
}
.u-svcd__status.is-pending {
color: #8a5a00;
background: var(--u-amber-50);
}
.u-svcd__status.is-pending .u-svcd__dot {
animation: u-tb-pulse 2s ease-out infinite;
}
.u-svcd__status.is-suspended,
.u-svcd__status.is-fraud {
color: var(--u-red);
background: var(--u-red-50);
}
.u-svcd__status.is-terminated,
.u-svcd__status.is-cancelled {
color: var(--u-muted);
}
a.u-svcd__login {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 42px;
padding: 0 16px;
font-size: 15px;
font-weight: 700;
color: #fff;
background: var(--u-blue);
border-radius: 10px;
}
a.u-svcd__login:hover,
a.u-svcd__login:focus {
color: #fff;
background: var(--u-blue-600);
}
.u-svcd__login .u-ico {
width: 17px;
height: 17px;
}
.u-svcd__facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0;
margin: 0;
background: #fafbfd;
border-top: 1px solid var(--u-line-2);
}
.u-svcd__facts > div {
padding: 14px 22px;
border-right: 1px solid var(--u-line-2);
}
.u-svcd__facts > div:last-child {
border-right: 0;
}
.u-svcd__facts dt {
margin: 0 0 3px;
font-size: 12px;
font-weight: 700;
color: var(--u-muted);
}
.u-svcd__facts dd {
margin: 0;
font-size: 15px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.u-svcd__facts dd small {
font-size: 13px;
font-weight: 600;
color: var(--u-muted);
}
.u-svc-notice {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 18px;
font-size: 14px;
line-height: 1.55;
color: #6b4a00;
background: var(--u-amber-50);
border: 1px solid #f6dfa8;
border-radius: 12px;
}
.u-svc-notice > .u-ico {
flex: 0 0 auto;
width: 20px;
height: 20px;
margin-top: 1px;
}
.u-svc-notice.is-suspended,
.u-svc-notice.is-terminated,
.u-svc-notice.is-fraud {
color: #7d241c;
background: var(--u-red-50);
border-color: #f3c9c4;
}
.u-svc-pay {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 16px;
padding: 14px 16px 14px 18px;
background: #fff;
border: 1px solid #f1d28c;
border-left: 4px solid var(--u-amber);
border-radius: 12px;
box-shadow: var(--u-shadow);
}
.u-svc-pay.is-overdue {
border-color: #f0beb8;
border-left-color: var(--u-red);
}
.u-svc-pay__ico {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 40px;
height: 40px;
color: #8a5a00;
background: var(--u-amber-50);
border-radius: 10px;
}
.u-svc-pay.is-overdue .u-svc-pay__ico {
color: var(--u-red);
background: var(--u-red-50);
}
.u-svc-pay__text {
flex: 1 1 auto;
margin: 0;
font-size: 15px;
font-weight: 600;
line-height: 1.45;
}
a.u-svc-pay__btn {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 6px;
min-height: 42px;
padding: 0 16px;
font-weight: 700;
color: #fff;
background: var(--u-green);
border-radius: 10px;
}
a.u-svc-pay__btn:hover,
a.u-svc-pay__btn:focus {
color: #fff;
background: var(--u-green-600);
}
.u-svc-pay__btn .u-ico {
width: 16px;
height: 16px;
}
.u-card {
padding: 20px 22px;
background: #fff;
border: 1px solid var(--u-line);
border-radius: 16px;
box-shadow: var(--u-shadow);
}
.u-card__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 6px 12px;
margin-bottom: 14px;
}
.u-card__head .u-card__title {
margin: 0;
}
h3.u-card__title {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
font-size: 17px;
font-weight: 800;
}
.u-card .u-kv + .u-card__title {
margin-top: 18px;
}
.u-card__title .u-ico {
width: 19px;
height: 19px;
color: var(--u-blue);
}
.u-card__note {
font-size: 13px;
color: var(--u-muted);
}
.u-usage__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px 28px;
}
.u-meter {
position: relative;
}
.u-meter__row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 4px 12px;
margin-bottom: 8px;
}
.u-meter__label {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 14px;
font-weight: 700;
color: var(--u-ink-2);
}
.u-meter__label .u-ico {
width: 16px;
height: 16px;
color: var(--u-slate);
}
.u-meter__value {
font-size: 14px;
color: var(--u-muted);
font-variant-numeric: tabular-nums;
}
.u-meter__value b {
color: var(--u-ink);
}
.u-meter__track {
height: 10px;
overflow: hidden;
background: var(--u-line-2);
border-radius: 999px;
}
.u-meter__fill {
display: block;
height: 100%;
min-width: 0;
background: linear-gradient(90deg, var(--u-blue), #4b80ea);
border-radius: inherit;
transition: width .6s ease;
}
.u-meter.is-near .u-meter__fill {
background: linear-gradient(90deg, #e09a12, var(--u-amber));
}
.u-meter.is-over .u-meter__fill {
background: var(--u-red);
}
/* Neograničeno: traka sa blagim prugama umesto praznog dela */
.u-meter.is-unlimited .u-meter__track {
background: repeating-linear-gradient(-45deg, var(--u-line-2) 0 6px, #f5f7fa 6px 12px);
}
.u-meter__pct {
position: absolute;
right: 0;
top: calc(100% + 4px);
font-size: 12px;
font-weight: 700;
color: var(--u-muted);
}
.u-usage__warn {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin-top: 22px;
padding: 10px 14px;
font-size: 14px;
font-weight: 600;
color: #7d241c;
background: var(--u-red-50);
border-radius: 10px;
}
.u-usage__warn .u-ico {
width: 18px;
height: 18px;
}
.u-usage__warn .btn {
margin-left: auto;
font-weight: 700;
color: #fff;
background: var(--u-red);
border-radius: 8px;
}
.u-shortcuts {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
a.u-shortcut {
display: flex;
align-items: center;
gap: 10px;
height: 100%;
min-height: 56px;
padding: 10px 12px;
font-size: 14px;
font-weight: 700;
line-height: 1.25;
color: var(--u-ink-2);
background: #fff;
border: 1px solid var(--u-line-2);
border-radius: 12px;
transition: border-color var(--u-ease), color var(--u-ease), box-shadow var(--u-ease);
}
a.u-shortcut:hover,
a.u-shortcut:focus {
color: var(--u-blue);
text-decoration: none;
border-color: var(--u-blue);
box-shadow: var(--u-shadow-hover);
}
.u-shortcut__ico {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 34px;
height: 34px;
color: var(--u-blue);
background: var(--u-blue-50);
border-radius: 9px;
}
.u-shortcut__ico .u-ico {
width: 18px;
height: 18px;
}
.u-wp__row,
.u-wp__form,
.u-addonbuy {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.u-wp__row .form-control,
.u-addonbuy .form-control {
flex: 1 1 220px;
}
.u-wp__form .form-control {
flex: 1 1 170px;
}
.u-wp__new {
margin-top: 16px;
}
.u-wp__list + .u-wp__new {
padding-top: 16px;
border-top: 1px solid var(--u-line-2);
}
.u-wp__title {
margin: 0 0 2px;
font-size: 15px;
font-weight: 800;
}
.u-wp__url {
margin: 0 0 10px;
font-size: 13px;
color: var(--u-muted);
}
.u-mailform {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
align-items: end;
gap: 12px;
}
.u-mailform__field label {
display: block;
margin-bottom: 5px;
font-size: 13px;
font-weight: 700;
color: var(--u-ink-2);
}
.u-mailform .form-control,
.u-mailform .input-group-text,
.u-mailform__btn.btn,
.u-wp__row .btn,
.u-wp__form .btn,
.u-addonbuy .btn,
.u-wp__row .form-control,
.u-wp__form .form-control,
.u-addonbuy .form-control {
min-height: 44px;
}
.u-mailform .input-group-text {
max-width: 220px;
overflow: hidden;
font-weight: 600;
text-overflow: ellipsis;
color: var(--u-muted);
}
.u-mailform__btn.btn,
.u-wp__form .btn,
.u-addonbuy .btn {
padding: 0 20px;
font-weight: 700;
}
.u-upsell-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 20px;
}
.u-upsell-row p {
margin: 0;
color: var(--u-muted);
}
/* Sitejet: jedan red (naziv, kratak opis, dugme), ispod upravljanja hostingom */
.u-sjrow__main {
display: flex;
align-items: center;
gap: 14px 16px;
}
.u-sjrow__ico {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 42px;
height: 42px;
color: #7c3aed;
background: #f1ebff;
border-radius: 12px;
}
.u-sjrow__ico .u-ico {
width: 21px;
height: 21px;
}
.u-sjrow__text {
flex: 1 1 auto;
min-width: 0;
}
h3.u-sjrow__title {
margin: 0;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
}
.u-sjrow__title b {
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.u-sjrow__desc {
margin: 2px 0 0;
font-size: 13.5px;
color: var(--u-muted);
}
.btn.u-sjrow__btn {
flex: 0 0 auto;
min-height: 42px;
padding: 0 18px;
font-weight: 700;
border-radius: 10px;
}
.u-sjrow__img[hidden] {
display: none !important;
}
.u-sjrow #sitejetPublishProgressBarWrapper {
margin-top: 12px;
}
.u-sjrow .u-sitejet__alert {
margin-top: 10px;
padding: 10px 14px;
font-size: 14px;
background: var(--u-blue-50);
border-radius: 10px;
}
@media (max-width: 575px) {
.u-sjrow__main {
flex-wrap: wrap;
}
.btn.u-sjrow__btn {
width: 100%;
}
}
.u-svc-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 14px 0 0;
}
.u-svc-actions .btn {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 42px;
padding: 0 16px;
font-weight: 700;
border-radius: 10px;
}
.u-svc-actions__cancel.btn {
margin-left: auto;
color: var(--u-red);
}
.u-svc-tabs {
margin-top: 16px;
}
.u-svc-tabs .product-details-tab-container {
padding: 20px;
border: 1px solid var(--u-line);
border-top: 0;
border-radius: 0 0 16px 16px;
}
.tpl-clientareaproductdetails .tab-content > .tab-pane > .u-svcd {
margin-bottom: 0;
}
@media (max-width: 767px) {
.u-svcd__top {
flex-wrap: wrap;
padding: 18px 16px 14px;
}
.u-svcd__ico {
width: 44px;
height: 44px;
}
.u-svcd__id {
flex-basis: calc(100% - 60px);
}
.u-svcd__name {
font-size: 20px;
}
.u-svcd__side {
flex: 1 1 100%;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.u-svcd__facts {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.u-svcd__facts > div {
padding: 12px 16px;
border-right: 0;
border-bottom: 1px solid var(--u-line-2);
}
.u-svcd__facts > div:nth-child(odd) {
border-right: 1px solid var(--u-line-2);
}
.u-card {
padding: 16px;
}
.u-mailform {
grid-template-columns: minmax(0, 1fr);
}
.u-svc-pay {
flex-wrap: wrap;
}
.u-svc-pay__text {
flex-basis: calc(100% - 60px);
}
a.u-svc-pay__btn {
flex: 1 1 100%;
justify-content: center;
}
.u-shortcuts {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.u-svc-actions__cancel.btn {
margin-left: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.u-svcd__status.is-pending .u-svcd__dot {
animation: none;
}
}
/* ---------- Moje usluge (clientareaproducts.tpl): ista traka i čipovi kao "Moji domeni" ---------- */
.u-services-ready #tableServicesList_wrapper .listtable {
border-radius: 0 0 var(--u-r) var(--u-r);
}
#tableServicesList_wrapper .listtable > table {
border-top: 0 !important;
}
#uSvcSide .dataTables_filter.u-dsearch {
float: none;
width: auto;
margin: 0;
padding: 0;
}
#uSvcSide .dataTables_filter.u-dsearch label {
display: block;
margin: 0;
font-size: 0;
}
#uSvcSide .dataTables_filter.u-dsearch input.form-control {
width: 260px;
height: 38px;
margin: 0;
padding: 8px 12px 8px 36px !important;
font-size: 14px;
background: var(--u-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366758a' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px 50%;
border: 1px solid transparent;
border-radius: var(--u-r-sm);
}
#uSvcSide .dataTables_filter.u-dsearch input.form-control:focus {
background-color: #fff;
border-color: var(--u-blue);
}
#tableServicesList thead th {
width: auto !important;
text-align: left;
}
#tableServicesList thead th:nth-child(2) {
width: 40% !important;
}
#tableServicesList th.u-col-ico,
#tableServicesList td.u-col-ico {
width: 64px !important;
padding-right: 4px !important;
padding-left: 16px !important;
background-image: none !important;
}
#tableServicesList tbody > tr > td {
vertical-align: middle;
}
.u-svcl__ico {
display: grid;
place-items: center;
width: 42px;
height: 42px;
color: var(--u-blue);
background: var(--u-blue-50);
border-radius: 12px;
}
.u-svcl__ico .u-ico {
width: 21px;
height: 21px;
}
.u-svcl__ico.is-pending {
color: #8a5a00;
background: var(--u-amber-50);
}
.u-svcl__ico.is-suspended,
.u-svcl__ico.is-fraud {
color: var(--u-red);
background: var(--u-red-50);
}
.u-svcl__ico.is-terminated,
.u-svcl__ico.is-cancelled,
.u-svcl__ico.is-completed {
color: #8592a3;
background: var(--u-paper);
}
.u-svcl__name {
font-size: 15px;
font-weight: 800 !important;
color: var(--u-ink);
word-break: break-word;
}
table.table-list tbody td a.u-svcl__domain {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 600;
color: var(--u-blue);
word-break: break-all;
}
.u-svcl__domain .u-ico {
width: 12px;
height: 12px;
opacity: .6;
}
#tableServicesList td.u-col-price {
white-space: nowrap;
}
#tableServicesList td.u-col-price strong {
display: block;
font-size: 14px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
#tableServicesList td.u-col-price small,
.u-svcl__when {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--u-muted);
}
#tableServicesList td.u-col-date {
font-size: 14px;
font-variant-numeric: tabular-nums;
color: var(--u-ink-2);
white-space: nowrap;
}
.u-svcl__due {
display: block;
font-weight: 700;
}
.u-svcl__when.is-soon {
color: #8a5a00;
}
.u-svcl__when.is-past,
#tableServicesList td.u-col-date.is-past .u-svcl__due {
color: #a3281e;
}
#tableServicesList td.u-col-actions,
#tableServicesList th.u-col-actions {
width: 1%;
text-align: right;
white-space: nowrap;
}
#tableServicesList tr:hover .btn.u-rowbtn {
border-color: #b9cdf5;
}
#tableServicesList tbody tr[data-status="terminated"] .u-svcl__name,
#tableServicesList tbody tr[data-status="cancelled"] .u-svcl__name {
color: var(--u-muted);
}
#tableServicesList td.dataTables_empty,
#tableServicesList.is-empty tbody {
display: none;
}
@media (max-width: 767px) {
#uSvcSide .dataTables_filter.u-dsearch,
#uSvcSide .dataTables_filter.u-dsearch input.form-control {
width: 100%;
}
#uSvcSide {
grid-template-columns: 1fr;
}
#uSvcSide .dataTables_filter.u-dsearch {
grid-column: 1 / -1;
order: -1;
}
.dataTables_wrapper #tableServicesList tbody tr {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
grid-template-areas:
"ico name name"
". price status"
". due action";
gap: 8px 12px;
padding: 14px;
}
.dataTables_wrapper #tableServicesList tbody td.u-col-ico {
display: block;
grid-area: ico;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
#tableServicesList tbody td.u-col-name {
grid-area: name;
align-self: center;
font-size: 14px;
}
#tableServicesList tbody td.u-col-price {
grid-area: price;
}
#tableServicesList tbody td.u-col-date {
grid-area: due;
font-size: 13px !important;
}
#tableServicesList tbody td.u-col-price::before,
#tableServicesList tbody td.u-col-date::before {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
color: #8592a3;
content: attr(data-label);
}
#tableServicesList tbody td.u-col-status {
grid-area: status;
align-self: start;
margin: 0 !important;
text-align: right !important;
}
#tableServicesList tbody td.u-col-actions {
grid-area: action;
align-self: end;
margin: 0 !important;
}
}
@media (max-width: 575px) {
/* Moje usluge: "Naruči novu uslugu" i "Dodaci" u istom redu */
.tpl-clientareaproducts .u-pagehead__actions {
grid-template-columns: minmax(0, 1fr) auto;
}
.tpl-clientareaproducts .u-pagehead__actions .btn-primary.u-btn-40 {
grid-column: auto;
}
}
/* Padajući meniji: animacija otvaranja (includes/u-lang.tpl, uMenuAnim; klasa u-ma--... na ).
Koriste se svojstva translate/scale (ne transform), jer Bootstrap (Popper) položaj menija upisuje u transform. */
.u-ma--spustanje .dropdown-menu.show {
animation: u-ma-drop .18s ease-out both;
}
@keyframes u-ma-drop {
from { opacity: 0; translate: 0 -8px; }
to { opacity: 1; translate: 0 0; }
}
.u-ma--razvijanje .dropdown-menu.show {
transform-origin: top left;
animation: u-ma-grow .17s cubic-bezier(.2, .8, .2, 1) both;
}
.u-ma--razvijanje .dropdown-menu-right.show,
.u-ma--razvijanje .u-acct__menu.show {
transform-origin: top right;
}
@keyframes u-ma-grow {
from { opacity: 0; scale: .92; }
to { opacity: 1; scale: 1; }
}
.u-ma--zavesa .dropdown-menu.show {
animation: u-ma-curtain .24s cubic-bezier(.3, .7, .2, 1) both;
}
@keyframes u-ma-curtain {
from { clip-path: inset(0 0 100% 0 round 14px); }
to { clip-path: inset(0 0 0 0 round 14px); }
}
.u-ma--redom .dropdown-menu.show {
animation: u-ma-fade .14s ease-out both;
}
.u-ma--redom .dropdown-menu.show > * {
animation: u-ma-item .22s ease-out both;
}
.u-ma--redom .dropdown-menu.show > :nth-child(2) { animation-delay: .03s; }
.u-ma--redom .dropdown-menu.show > :nth-child(3) { animation-delay: .06s; }
.u-ma--redom .dropdown-menu.show > :nth-child(4) { animation-delay: .09s; }
.u-ma--redom .dropdown-menu.show > :nth-child(5) { animation-delay: .12s; }
.u-ma--redom .dropdown-menu.show > :nth-child(6) { animation-delay: .15s; }
.u-ma--redom .dropdown-menu.show > :nth-child(7) { animation-delay: .18s; }
.u-ma--redom .dropdown-menu.show > :nth-child(8) { animation-delay: .21s; }
.u-ma--redom .dropdown-menu.show > :nth-child(n+9) { animation-delay: .24s; }
@keyframes u-ma-fade {
from { opacity: 0; translate: 0 -4px; }
to { opacity: 1; translate: 0 0; }
}
@keyframes u-ma-item {
from { opacity: 0; translate: -8px 0; }
to { opacity: 1; translate: 0 0; }
}
.u-ma--opruga .dropdown-menu.show {
transform-origin: top center;
animation: u-ma-spring .36s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes u-ma-spring {
from { opacity: 0; translate: 0 -12px; scale: .97; }
60% { opacity: 1; }
to { opacity: 1; translate: 0 0; scale: 1; }
}
/* Strelica pored naziva menija se okrene kada je meni otvoren (širok ekran; na telefonu se već okreće) */
@media (min-width: 1200px) {
body:not(.u-ma--ne) header.header .u-nav .dropdown-toggle::after {
transition: transform .18s ease;
}
body:not(.u-ma--ne) header.header .u-nav .show > .dropdown-toggle::after {
transform: rotate(180deg);
}
}
@media (prefers-reduced-motion: reduce) {
.u-theme .dropdown-menu.show,
.u-theme .dropdown-menu.show > * {
animation: none !important;
}
}
/* */
/* ---------- Tiketi: lista (supportticketslist.tpl) ---------- */
.u-tickets-ready #tableTicketsList_wrapper .listtable {
border-radius: 0 0 var(--u-r) var(--u-r);
}
#tableTicketsList_wrapper .listtable > table {
border-top: 0 !important;
}
#uTkSide .dataTables_filter.u-dsearch {
float: none;
width: auto;
margin: 0;
padding: 0;
}
#uTkSide .dataTables_filter.u-dsearch label {
display: block;
margin: 0;
font-size: 0;
}
#uTkSide .dataTables_filter.u-dsearch input.form-control {
width: 260px;
height: 38px;
margin: 0;
padding: 8px 12px 8px 36px !important;
font-size: 14px;
background: var(--u-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366758a' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px 50%;
border: 1px solid transparent;
border-radius: var(--u-r-sm);
}
#uTkSide .dataTables_filter.u-dsearch input.form-control:focus {
background-color: #fff;
border-color: var(--u-blue);
}
#tableTicketsList thead th {
width: auto !important;
text-align: left;
}
#tableTicketsList thead th:first-child {
width: 58% !important;
padding-left: 18px;
}
#tableTicketsList tbody > tr > td {
vertical-align: middle;
}
#tableTicketsList td.u-col-subject {
padding-left: 18px;
}
table.table-list tbody td a.u-tkl {
display: flex;
flex-direction: column;
gap: 3px;
padding: 0;
color: var(--u-ink);
text-decoration: none;
border: 0 !important;
}
.u-tkl__subject {
font-size: 15px;
font-weight: 700;
line-height: 1.35;
color: var(--u-ink);
}
.u-tkl__subject.unread {
font-weight: 800;
}
.u-tkl__subject.unread::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin: 0 8px 2px 0;
background: var(--u-blue);
border-radius: 50%;
}
#tableTicketsList tr:hover .u-tkl__subject {
color: var(--u-blue);
}
.u-tkl__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 10px;
font-size: 12px;
font-weight: 600;
color: var(--u-muted);
}
.u-tkl__id {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-weight: 700;
color: var(--u-slate);
}
.u-tkl__new {
padding: 1px 8px;
font-weight: 700;
color: var(--u-blue-600);
background: var(--u-blue-50);
border-radius: 999px;
}
#tableTicketsList td.u-col-date {
font-size: 13px;
font-variant-numeric: tabular-nums;
color: var(--u-ink-2);
white-space: nowrap;
}
#tableTicketsList td.u-col-actions,
#tableTicketsList th.u-col-actions {
width: 1%;
text-align: right;
white-space: nowrap;
}
#tableTicketsList tr:hover .btn.u-rowbtn {
border-color: #b9cdf5;
}
#tableTicketsList tr.is-unread > td {
background: #fbfcff;
}
#tableTicketsList td.dataTables_empty,
#tableTicketsList.is-empty tbody {
display: none;
}
@media (max-width: 767px) {
#uTkSide,
#uTkSide .dataTables_filter.u-dsearch,
#uTkSide .dataTables_filter.u-dsearch label,
#uTkSide .dataTables_filter.u-dsearch input.form-control {
width: 100%;
}
#uTkSide {
flex: 1 1 100%;
grid-template-columns: 1fr;
}
#uTkSide .dataTables_filter.u-dsearch {
flex: 1 1 100%;
grid-column: 1 / -1;
}
/* Telefon: naslov + strelica u prvom redu, status levo i datum desno u drugom */
.dataTables_wrapper #tableTicketsList tbody tr {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas:
"subject subject action"
"status date date";
align-items: center;
gap: 10px 12px;
padding: 14px;
}
#tableTicketsList tbody td.u-col-subject {
grid-area: subject;
padding-left: 0 !important;
}
#tableTicketsList tbody td.u-col-status {
grid-area: status;
margin: 0 !important;
text-align: left !important;
}
#tableTicketsList tbody td.u-col-date {
grid-area: date;
text-align: right !important;
font-size: 13px !important;
color: #6b7686;
white-space: nowrap;
}
#tableTicketsList tbody td.u-col-date::before {
content: none !important;
}
#tableTicketsList tbody td.u-col-actions {
grid-area: action;
align-self: start;
margin: 0 !important;
}
#tableTicketsList .btn.u-rowbtn {
width: 36px;
height: 36px;
padding: 0;
justify-content: center;
}
#tableTicketsList .u-rowbtn__text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
}
/* ---------- Tiket (viewticket.tpl) ----------
Zaglavlje: broj i status levo, akcije desno, ispod podaci u jednom redu.
Poruke: avatar, ime, uloga i vreme u zaglavlju poruke; podrška svetloplava, klijent bela kartica.
Ocena odgovora u dnu poruke (zvezdice bez Font Awesome-a), citirana e-pošta sklopljena (js/unl-theme.js). */
.u-tk {
display: grid;
gap: 14px;
margin-bottom: 24px;
}
.u-tk-closed {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
padding: 11px 16px;
font-size: 14px;
font-weight: 600;
color: var(--u-ink-2);
background: var(--u-paper);
border: 1px solid var(--u-line);
border-radius: var(--u-r);
}
.u-tk-closed .u-ico {
color: var(--u-muted);
}
.u-tk-head {
padding: 16px 20px 0;
background: #fff;
border: 1px solid var(--u-line);
border-radius: var(--u-r);
box-shadow: var(--u-shadow);
}
.u-tk-head__top {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 20px;
padding-bottom: 14px;
}
.u-tk-head__chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
min-width: 0;
}
.u-tk-id {
padding: 3px 9px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 13px;
font-weight: 700;
color: var(--u-ink-2);
background: var(--u-paper);
border: 1px solid var(--u-line-2);
border-radius: 7px;
}
.u-tk-status {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 4px 11px;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
color: var(--u-ink-2);
background: var(--u-paper);
border-radius: 999px;
}
.u-tk-status__dot {
width: 7px;
height: 7px;
background: currentColor;
border-radius: 50%;
}
.u-tk-status.is-open {
color: var(--u-green-600);
background: var(--u-green-50);
}
.u-tk-status.is-answered {
color: var(--u-blue-600);
background: var(--u-blue-50);
}
.u-tk-status.is-customer,
.u-tk-status.is-progress {
color: #8a5a00;
background: var(--u-amber-50);
}
.u-tk-status.is-closed {
color: var(--u-muted);
background: #edf1f5;
}
.u-tk-head__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.u-tk-head__actions .btn,
.u-tk-reply__actions .btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
}
.u-tk-head__actions .u-ico,
.u-tk-reply__actions .u-ico {
width: 17px;
height: 17px;
}
.btn.u-tk-close {
color: var(--u-red);
}
.btn.u-tk-close:hover,
.btn.u-tk-close:focus {
color: #fff;
background: var(--u-red);
border-color: var(--u-red);
}
/* podaci o tiketu: jedan red (na užem ekranu u dve kolone) */
.u-tk-meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
margin: 0 -20px;
padding: 0;
border-top: 1px solid var(--u-line-2);
}
.u-tk-meta__item {
min-width: 0;
padding: 11px 20px 13px;
}
.u-tk-meta__item + .u-tk-meta__item {
border-left: 1px solid var(--u-line-2);
}
.u-tk-meta dt {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 3px;
font-size: 12.5px;
font-weight: 600;
color: var(--u-muted);
}
.u-tk-meta dt .u-ico {
flex: 0 0 auto;
width: 13px;
height: 13px;
color: #9aa8b9;
}
.u-tk-meta dd {
margin: 0;
overflow: hidden;
font-size: 14px;
font-weight: 700;
color: var(--u-ink);
text-overflow: ellipsis;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.u-tk-prio {
display: inline-flex;
align-items: center;
gap: 7px;
}
.u-tk-prio__bar {
display: inline-block;
width: 14px;
height: 8px;
background: linear-gradient(90deg, currentColor 0 30%, transparent 30% 35%, #d5dde7 35% 65%, transparent 65% 70%, #d5dde7 70%);
border-radius: 2px;
}
.u-tk-prio.is-low {
color: var(--u-green);
}
.u-tk-prio.is-medium {
color: #c98a00;
}
.u-tk-prio.is-medium .u-tk-prio__bar {
background: linear-gradient(90deg, currentColor 0 65%, transparent 65% 70%, #d5dde7 70%);
}
.u-tk-prio.is-high {
color: var(--u-red);
}
.u-tk-prio.is-high .u-tk-prio__bar {
background: currentColor;
}
.u-tk-prio.is-low,
.u-tk-prio.is-medium,
.u-tk-prio.is-high {
font-weight: 700;
}
.u-tk-prio > :not(.u-tk-prio__bar) {
color: var(--u-ink);
}
/* prepiska */
.u-tk-thread {
display: grid;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.u-tk-msg {
display: block;
min-width: 0;
scroll-margin-top: 90px;
}
.u-tk-msg__card {
min-width: 0;
overflow: hidden;
background: #fff;
border: 1px solid var(--u-line);
border-radius: var(--u-r);
box-shadow: var(--u-shadow);
}
.u-tk-msg.is-staff .u-tk-msg__card {
background: #f6f9ff;
border-color: #cddbf5;
}
.u-tk-msg__head {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 18px;
border-bottom: 1px solid var(--u-line-2);
}
.u-tk-msg.is-staff .u-tk-msg__head {
border-bottom-color: #dfe8f8;
}
.u-tk-msg__avatar {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 36px;
height: 36px;
font-size: 13px;
font-weight: 800;
color: var(--u-ink-2);
background: #e6ebf2;
border-radius: 50%;
}
.u-tk-msg.is-staff .u-tk-msg__avatar {
color: #fff;
background: var(--u-blue);
}
.u-tk-msg__avatar .u-ico {
width: 18px;
height: 18px;
}
.u-tk-msg__who {
display: flex;
flex: 1 1 auto;
flex-wrap: wrap;
align-items: center;
gap: 2px 8px;
min-width: 0;
}
.u-tk-msg__who strong {
min-width: 0;
overflow: hidden;
font-size: 14.5px;
font-weight: 700;
color: var(--u-ink);
text-overflow: ellipsis;
white-space: nowrap;
}
.u-tk-role {
padding: 2px 8px;
font-size: 11.5px;
font-weight: 700;
line-height: 1.4;
color: var(--u-ink-2);
background: var(--u-paper);
border-radius: 999px;
}
.u-tk-role.is-staff {
color: var(--u-blue-600);
background: #e3ecfc;
}
.u-tk-msg__head time {
flex: 0 0 auto;
font-size: 13px;
color: var(--u-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* tekst poruke: tehnički sadržaj, linkovi i kod ne izlaze iz kartice */
.u-tk-msg__text {
padding: 14px 18px 16px;
font-size: 15px;
line-height: 1.65;
color: var(--u-ink);
overflow-wrap: anywhere;
}
.u-tk-msg__text > :first-child {
margin-top: 0;
}
.u-tk-msg__text > :last-child {
margin-bottom: 0;
}
.u-tk-msg__text p {
margin: 0 0 .85em;
}
.u-tk-msg__text ul,
.u-tk-msg__text ol {
margin: 0 0 .85em;
padding-left: 1.3em;
}
.u-tk-msg__text a {
color: var(--u-blue);
text-decoration: underline;
text-underline-offset: 2px;
}
.u-tk-msg__text img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
.u-tk-msg__text table {
display: block;
max-width: 100%;
overflow-x: auto;
}
.u-tk-msg__text pre,
.u-tk-msg__text code,
.markdown-content .u-tk-msg__text pre code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 13px;
color: #1f2d40;
background: var(--u-paper);
border-radius: 6px;
text-shadow: none;
}
.u-tk-msg__text code {
padding: 1px 5px;
}
.u-tk-msg__text pre {
max-height: 420px;
margin: 0 0 .85em;
padding: 10px 12px;
overflow: auto;
white-space: pre-wrap;
border: 1px solid var(--u-line-2);
}
.u-tk-msg__text pre code {
padding: 0;
white-space: pre-wrap;
word-break: break-word;
background: none;
}
.u-tk-msg__text blockquote {
margin: 0 0 .85em;
padding: 2px 0 2px 12px;
color: var(--u-ink-2);
border-left: 3px solid var(--u-line);
}
/* citirana prethodna e-pošta: sklopljena, dugme za prikaz */
.u-tk-quote__toggle {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 2px 0 0;
padding: 4px 10px;
font-size: 13px;
font-weight: 600;
color: var(--u-ink-2);
background: var(--u-paper);
border: 1px solid var(--u-line);
border-radius: 999px;
cursor: pointer;
}
.u-tk-quote__toggle:hover,
.u-tk-quote__toggle:focus-visible {
color: var(--u-blue);
border-color: var(--u-blue);
}
.u-tk-quote__toggle::before {
content: "···";
font-weight: 800;
letter-spacing: .05em;
}
.u-tk-quote {
margin-top: 10px;
color: var(--u-muted);
}
.u-tk-quote[hidden] {
display: none;
}
/* prilozi u poruci: vrsta fajla, ime skraćeno (ceo naziv u oblačiću) */
.u-tk-files {
padding: 0 18px 14px;
}
.u-tk-files__title {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
font-size: 13px;
font-weight: 700;
color: var(--u-ink-2);
}
.u-tk-files__title .u-ico {
width: 14px;
height: 14px;
}
.u-tk-files__list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.u-tk-files__list > li {
min-width: 0;
max-width: 100%;
}
.u-tk-file {
display: inline-flex;
align-items: center;
gap: 9px;
max-width: 100%;
padding: 6px 10px 6px 6px;
font-size: 13px;
font-weight: 600;
color: var(--u-ink-2);
background: #fff;
border: 1px solid var(--u-line);
border-radius: 10px;
transition: border-color var(--u-ease), color var(--u-ease);
}
a.u-tk-file:hover,
a.u-tk-file:focus-visible {
color: var(--u-blue);
text-decoration: none;
border-color: var(--u-blue);
}
.u-tk-file__ext {
display: inline-grid;
flex: 0 0 auto;
place-items: center;
min-width: 34px;
height: 26px;
padding: 0 5px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .03em;
color: var(--u-blue-600);
background: var(--u-blue-50);
border-radius: 6px;
}
.u-tk-file__ext .u-ico {
width: 14px;
height: 14px;
}
.u-tk-file__name {
min-width: 0;
max-width: 260px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.u-tk-file .u-tk-file__dl {
flex: 0 0 auto;
width: 15px;
height: 15px;
color: #a9b6c6;
}
a.u-tk-file:hover .u-tk-file__dl {
color: var(--u-blue);
}
.u-tk-file.is-removed {
color: var(--u-muted);
}
.u-tk-file.is-removed .u-tk-file__name {
text-decoration: line-through;
}
/* dno poruke: ocena (podrška) ili IP adresa (klijent) */
.u-tk-msg__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 6px 16px;
padding: 9px 18px;
font-size: 12.5px;
color: var(--u-muted);
border-top: 1px solid var(--u-line-2);
}
.u-tk-msg.is-staff .u-tk-msg__foot {
border-top-color: #dfe8f8;
}
.u-tk-rate {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 10px;
}
.u-tk-rate__label {
font-size: 13px;
font-weight: 600;
color: var(--u-ink-2);
}
.u-tk-rate .rating,
.u-tk-rate .rating-done {
display: inline-flex;
align-items: center;
float: none;
margin: 0;
}
/* data ocena: WHMCS označava zvezdice 2..5 kao "active" za ocenu 4, pa se redaju zdesna; tekst ide posle zvezdica */
.u-tk-rate .rating-done {
flex-direction: row-reverse;
justify-content: flex-end;
direction: ltr;
unicode-bidi: normal;
}
.u-tk-rate .rating-done .rated {
order: -1;
}
/* WHMCS redosled zvezdica je 5..1 (desno na levo), pa prelaz mišem boji zvezdicu i sve "posle" nje */
.u-tk-rate .rating {
direction: rtl;
unicode-bidi: bidi-override;
}
.u-tk-rate .rating span.star,
.u-tk-rate .rating-done span.star {
display: inline-block;
width: auto;
padding: 0 1px;
font-family: inherit !important;
font-size: 19px;
font-style: normal;
font-weight: 400;
line-height: 1;
cursor: pointer;
}
.u-tk-rate .rating-done span.star {
cursor: default;
}
.u-tk-rate .rating span.star::before,
.u-tk-rate .rating-done span.star::before {
content: "\2605" !important;
font-family: inherit !important;
font-weight: 400 !important;
color: #cfd8e3;
transition: color .12s ease, transform .12s ease;
}
.u-tk-rate .rating span.star,
.u-tk-rate .rating-done span.star {
float: none !important;
}
.u-tk-rate .rating span.star:hover::before,
.u-tk-rate .rating span.star:hover ~ span.star::before,
.u-tk-rate .rating-done span.star.active::before {
color: #f2b63c;
}
.u-tk-rate .rating span.star:hover::before {
display: inline-block;
transform: scale(1.15);
}
.u-tk-rate .rated {
display: inline-block;
margin-left: 8px;
font-size: 12.5px;
color: var(--u-muted);
}
.u-tk-ip {
margin-left: auto;
font-variant-numeric: tabular-nums;
}
/* odgovor */
.u-tk-reply {
padding: 20px 22px 22px;
background: #fff;
border: 1px solid var(--u-line);
border-radius: var(--u-r);
box-shadow: var(--u-shadow);
scroll-margin-top: 90px;
}
.u-tk-reply__title {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 6px;
font-size: 17px;
font-weight: 800;
}
.u-tk-reply__title .u-ico {
width: 18px;
height: 18px;
color: var(--u-blue);
}
.u-tk-as {
margin: 0 0 14px;
font-size: 13.5px;
color: var(--u-muted);
}
.u-tk-as strong {
color: var(--u-ink);
}
.u-tk-attach > label {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
font-size: 14px;
font-weight: 700;
}
.u-tk-attach > label .u-ico {
width: 15px;
height: 15px;
color: var(--u-slate);
}
.u-tk-attach .custom-file-label {
border-style: dashed;
border-color: #c5d0dc;
border-radius: 10px;
}
.u-tk-attach .custom-file,
.u-tk-attach .custom-file-input,
.u-tk-attach .custom-file-label,
.u-tk-attach .input-group-append .btn {
height: 44px;
}
.u-tk-attach .custom-file-label {
display: flex;
align-items: center;
padding-left: 14px;
font-size: 14px;
line-height: 1.4;
color: var(--u-muted);
background: #fbfcfe;
}
.u-tk-attach .custom-file-input:focus ~ .custom-file-label {
border-color: var(--u-blue);
box-shadow: 0 0 0 3px rgba(31, 90, 209, .15);
}
.u-tk-attach .custom-file-label::after {
display: flex;
align-items: center;
height: 42px;
font-weight: 600;
color: var(--u-ink-2);
background: var(--u-paper);
}
.u-tk-attach .input-group-append .btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
}
.u-tk-attach__hint {
display: block;
margin-top: 6px;
font-size: 12.5px;
color: var(--u-muted);
}
.u-tk-reply__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 6px;
}
/* markdown editor (odgovor i nov tiket): jedna zaobljena površina sa svetlom trakom alata */
.u-tk-reply .md-editor,
.u-tkform .md-editor {
overflow: hidden;
border: 1px solid var(--u-line);
border-radius: 12px;
transition: border-color var(--u-ease), box-shadow var(--u-ease);
}
.u-tk-reply .md-editor.active,
.u-tkform .md-editor.active {
border-color: var(--u-blue);
box-shadow: 0 0 0 3px rgba(31, 90, 209, .12);
}
.u-tk-reply .md-editor > .md-header,
.u-tkform .md-editor > .md-header {
padding: 6px 8px;
background: var(--u-paper);
border-bottom: 1px solid var(--u-line-2);
}
.u-tk-reply .md-editor .btn-group .btn,
.u-tkform .md-editor .btn-group .btn {
color: var(--u-ink-2);
background: transparent;
border-color: transparent;
border-radius: 6px;
}
.u-tk-reply .md-editor .btn-group .btn:hover,
.u-tkform .md-editor .btn-group .btn:hover {
color: var(--u-blue);
background: #fff;
}
.u-tk-reply .md-editor > textarea,
.u-tkform .md-editor > textarea {
padding: 12px 14px;
font-size: 15px;
line-height: 1.6;
background: #fff;
border: 0;
}
.u-tk-reply .md-editor > .md-footer,
.u-tk-reply .md-editor .markdown-editor-status,
.u-tkform .md-editor > .md-footer,
.u-tkform .md-editor .markdown-editor-status {
font-size: 12px;
color: var(--u-muted);
background: var(--u-paper);
border-top: 1px solid var(--u-line-2);
}
/* Tiket na telefonu i tabletu: prvo prepiska, pa bočni paneli (osobe u kopiji, meni podrške) */
@media (max-width: 991px) {
.tpl-viewticket #main-body .primary-content {
order: -1;
}
}
@media (max-width: 767px) {
.u-tk-meta {
grid-template-columns: 1fr 1fr;
}
.u-tk-meta__item + .u-tk-meta__item {
border-left: 0;
}
.u-tk-meta__item:nth-child(n + 3) {
border-top: 1px solid var(--u-line-2);
}
.u-tk-meta__item:nth-child(2n) {
border-left: 1px solid var(--u-line-2);
}
}
@media (max-width: 575px) {
.u-tk-head {
padding: 14px 16px 0;
}
.u-tk-meta {
margin: 0 -16px;
}
.u-tk-meta__item {
padding: 10px 16px 11px;
}
.u-tk-head__actions,
.u-tk-head__actions .btn {
width: 100%;
}
.u-tk-head__actions .btn {
flex: 1 1 0;
justify-content: center;
}
.u-tk-msg__head {
flex-wrap: wrap;
gap: 4px 10px;
padding: 11px 14px;
}
.u-tk-msg__head time {
flex-basis: 100%;
padding-left: 46px;
margin-top: -6px;
}
.u-tk-msg__text,
.u-tk-files,
.u-tk-msg__foot {
padding-right: 14px;
padding-left: 14px;
}
.u-tk-file__name {
max-width: 190px;
}
.u-tk-ip {
margin-left: 0;
}
.u-tk-reply {
padding: 16px;
}
.u-tk-reply__actions .btn {
flex: 1 1 auto;
justify-content: center;
}
}
/* ---------- Otvaranje tiketa (supportticketsubmit-*.tpl) ---------- */
.u-tkdept__lead {
margin: 0 0 16px;
font-size: 15px;
color: var(--u-ink-2);
}
.u-tkdept__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
margin: 0 0 24px;
padding: 0;
list-style: none;
}
a.u-tkdept__card {
display: flex;
align-items: center;
gap: 14px;
height: 100%;
padding: 18px;
color: var(--u-ink);
text-decoration: none;
background: #fff;
border: 1px solid var(--u-line);
border-radius: 14px;
box-shadow: var(--u-shadow);
transition: border-color var(--u-ease), box-shadow var(--u-ease);
}
a.u-tkdept__card:hover,
a.u-tkdept__card:focus {
color: var(--u-ink);
text-decoration: none;
border-color: var(--u-blue);
box-shadow: var(--u-shadow-hover);
}
.u-tkdept__ico {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 46px;
height: 46px;
color: var(--u-blue);
background: var(--u-blue-50);
border-radius: 12px;
}
.u-tkdept__ico .u-ico {
width: 22px;
height: 22px;
}
.u-tkdept__text {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.u-tkdept__text strong {
font-size: 16px;
font-weight: 800;
}
.u-tkdept__text span {
font-size: 13px;
line-height: 1.45;
color: var(--u-muted);
}
.u-tkdept__go {
color: #a9b6c6;
}
a.u-tkdept__card:hover .u-tkdept__go {
color: var(--u-blue);
}
.u-tkform__card {
padding: 22px;
background: #fff;
border: 1px solid var(--u-line);
border-radius: 16px;
box-shadow: var(--u-shadow);
}
.u-tkform label {
font-weight: 700;
}
.u-tkform .form-control {
min-height: 44px;
}
.u-tkform__subject {
font-size: 16px;
font-weight: 600;
}
.u-tkdone {
max-width: 560px;
margin: 8px auto 32px;
padding: 32px 28px;
text-align: center;
background: #fff;
border: 1px solid var(--u-line);
border-radius: 18px;
box-shadow: var(--u-shadow);
}
.u-tkdone__mark {
display: inline-grid;
place-items: center;
width: 60px;
height: 60px;
margin-bottom: 14px;
color: #fff;
background: var(--u-green);
border-radius: 50%;
box-shadow: 0 0 0 8px var(--u-green-50);
}
.u-tkdone__mark .u-ico {
width: 30px;
height: 30px;
stroke-width: 2.6;
}
.u-tkdone__title {
margin: 0 0 8px;
font-size: 21px;
font-weight: 800;
}
.u-tkdone__title a {
color: var(--u-blue);
}
.u-tkdone__text {
margin: 0 0 18px;
color: var(--u-ink-2);
}
.u-tkdone__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.u-tkdone__actions .btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
}
.client-home-cards .u-dtk-fallback .list-group-item small {
font-size: 13px;
color: var(--u-muted);
}
/* ---------- Status servisa (serverstatus.tpl) ---------- */
.u-ns-hero {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 18px;
margin-bottom: 16px;
padding: 18px 20px;
background: #fff;
border: 1px solid var(--u-line);
border-left: 4px solid var(--u-green);
border-radius: var(--u-r);
box-shadow: var(--u-shadow);
}
.u-ns-hero.is-issue {
border-left-color: #e0a116;
}
.u-ns-hero__ico {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 44px;
height: 44px;
color: var(--u-green);
background: var(--u-green-50);
border-radius: 50%;
}
.u-ns-hero.is-issue .u-ns-hero__ico {
color: #a86b00;
background: var(--u-amber-50);
}
.u-ns-hero__ico .u-ico {
width: 22px;
height: 22px;
}
.u-ns-hero__text {
flex: 1 1 280px;
min-width: 0;
}
h2.u-ns-hero__title {
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 1.35;
}
.u-ns-hero__text p {
margin: 2px 0 0;
font-size: 15px;
color: var(--u-meta);
}
a.u-ns-hero__sched {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
font-size: 14px;
font-weight: 600;
color: var(--u-blue-600);
text-decoration: none;
background: var(--u-blue-50);
border-radius: var(--u-r-sm);
transition: background-color var(--u-ease);
}
a.u-ns-hero__sched:hover {
color: var(--u-blue-600);
text-decoration: none;
background: #dde7fb;
}
.u-ns-hero__sched .u-ico {
width: 16px;
height: 16px;
}
.u-ns-tabs {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 16px;
margin-bottom: 16px;
}
.u-ns-tabs .u-chips {
flex-wrap: wrap;
}
a.u-ns-rss {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
color: var(--u-meta);
}
a.u-ns-rss:hover {
color: #c05621;
text-decoration: none;
}
.u-ns-rss .u-ico {
width: 15px;
height: 15px;
color: #dd6b20;
}
/* Serveri: tabela, na telefonu kartica sa oznakama */
.u-ns-servers {
margin-bottom: 16px;
}
.u-ns-servers__lead {
margin: 0;
padding: 12px 20px 0;
font-size: 14px;
color: var(--u-meta);
}
.u-ns-table-wrap {
padding: 8px 0 4px;
overflow-x: auto;
}
table.u-ns-table {
width: 100%;
margin: 0;
font-size: 15px;
border-collapse: collapse;
}
.u-ns-table th,
.u-ns-table td {
padding: 12px 20px;
vertical-align: middle;
border-top: 1px solid var(--u-line-2);
}
.u-ns-table thead th {
padding-top: 6px;
padding-bottom: 8px;
font-size: 13px;
font-weight: 600;
color: var(--u-meta);
white-space: nowrap;
border-top: 0;
}
.u-ns-table__name {
font-weight: 600;
color: var(--u-ink);
}
.u-ns-table td {
color: var(--u-ink-2);
font-variant-numeric: tabular-nums;
}
.u-ns-table td img {
vertical-align: middle;
}
.u-ns-table__php a {
font-size: 14px;
font-weight: 600;
white-space: nowrap;
}
@media (max-width: 767px) {
.u-ns-table thead {
display: none;
}
.u-ns-table tbody tr {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px 12px;
padding: 14px 16px;
border-top: 1px solid var(--u-line-2);
}
.u-ns-table th,
.u-ns-table td {
padding: 0;
text-align: left !important;
border: 0;
}
.u-ns-table__name,
.u-ns-table__php {
grid-column: 1 / -1;
}
.u-ns-table td[data-label]::before {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--u-meta);
content: attr(data-label);
}
}
/* Problemi */
.u-ns-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
}
.u-ns-issue {
padding: 16px 20px 18px;
background: #fff;
border: 1px solid var(--u-line);
border-left: 4px solid #e0a116;
border-radius: var(--u-r);
box-shadow: var(--u-shadow);
}
.u-ns-issue.is-outage {
border-left-color: var(--u-red);
}
.u-ns-issue.is-scheduled {
border-left-color: var(--u-blue);
}
.u-ns-issue.is-resolved {
border-left-color: var(--u-green);
}
.u-ns-issue__head {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 8px 16px;
}
.u-ns-issue__titles {
display: flex;
flex: 1 1 300px;
flex-direction: column;
align-items: flex-start;
gap: 6px;
min-width: 0;
}
h2.u-ns-issue__title {
margin: 0;
font-size: 17px;
font-weight: 700;
line-height: 1.35;
overflow-wrap: anywhere;
}
.u-ns-prio {
padding: 2px 9px;
font-size: 12.5px;
font-weight: 600;
line-height: 1.5;
color: var(--u-ink-2);
background: var(--u-paper);
border-radius: 999px;
}
.u-ns-prio.is-critical {
color: #a3281e;
background: var(--u-red-50);
}
.u-ns-prio.is-high {
color: #8a5a00;
background: var(--u-amber-50);
}
.u-ns-prio.is-low {
color: var(--u-green-600);
background: var(--u-green-50);
}
.u-ns-status {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 7px;
padding: 3px 10px;
font-size: 13px;
font-weight: 600;
color: #8a5a00;
background: var(--u-amber-50);
border-radius: 999px;
}
.u-ns-status__dot {
width: 7px;
height: 7px;
background: currentColor;
border-radius: 50%;
}
.u-ns-status.is-outage {
color: #a3281e;
background: var(--u-red-50);
}
.u-ns-status.is-scheduled {
color: var(--u-blue-600);
background: var(--u-blue-50);
}
.u-ns-status.is-resolved {
color: var(--u-green-600);
background: var(--u-green-50);
}
.u-ns-meta {
display: flex;
flex-wrap: wrap;
gap: 6px 20px;
margin: 12px 0 0;
padding: 0;
font-size: 14px;
color: var(--u-meta);
list-style: none;
}
.u-ns-meta li {
display: inline-flex;
align-items: center;
gap: 7px;
}
.u-ns-meta .u-ico {
width: 15px;
height: 15px;
color: var(--u-slate);
}
.u-ns-meta strong {
font-weight: 600;
color: var(--u-ink-2);
}
.u-ns-affects {
display: flex;
align-items: center;
gap: 8px;
margin: 12px 0 0;
padding: 8px 12px;
font-size: 14px;
font-weight: 600;
color: #7a4f00;
background: var(--u-amber-50);
border-radius: var(--u-r-sm);
}
.u-ns-affects .u-ico {
width: 16px;
height: 16px;
}
.u-ns-issue__desc {
margin-top: 12px;
font-size: 15px;
line-height: 1.6;
color: var(--u-ink-2);
overflow-wrap: anywhere;
}
.u-ns-issue__desc > :last-child {
margin-bottom: 0;
}
.u-ns-empty {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
padding: 18px 20px;
font-size: 15px;
color: var(--u-meta);
background: #fff;
border: 1px dashed var(--u-line);
border-radius: var(--u-r);
}
.u-ns-empty p {
margin: 0;
}
.u-ns-empty .u-ico {
flex: 0 0 auto;
width: 20px;
height: 20px;
color: var(--u-slate);
}
.u-ns-pager {
display: flex;
justify-content: space-between;
gap: 8px;
margin-bottom: 16px;
}
.u-ns-pager .btn.u-ns-pager__next {
margin-left: auto;
}
@media (max-width: 575px) {
.u-ns-hero,
.u-ns-issue {
padding: 14px 16px;
}
a.u-ns-hero__sched {
width: 100%;
}
.u-ns-hero__go {
margin-left: auto;
}
}
/* ---------- Zaglavlje strane (putanja + naslov) na tamnoj podlozi, kao vrh početne ----------
Ista tamnoplava podloga u slojevima kao .u-hero (prelaz, sjaj, tačkasta mreža levo, krugovi desno),
samo niža. Važi za sve strane sa naslovom: Moje usluge, Moji domeni, Računi, Podrška, Nalog... */
.master-breadcrumb.u-has-pagehead {
position: relative;
isolation: isolate;
overflow: hidden;
color: #c9d7f2;
background-color: #0c2556;
background-image:
radial-gradient(760px 300px at 92% -40%, rgba(66, 140, 255, .5), transparent 64%),
radial-gradient(560px 260px at -4% 140%, rgba(0, 186, 255, .2), transparent 62%),
radial-gradient(480px 220px at 52% 150%, rgba(124, 92, 255, .2), transparent 66%),
linear-gradient(135deg, #091a42 0%, #0e2c6e 52%, #1544a3 100%);
border-bottom: 0;
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
}
.master-breadcrumb.u-has-pagehead::before,
.master-breadcrumb.u-has-pagehead::after {
content: "";
position: absolute;
z-index: -1;
pointer-events: none;
}
.master-breadcrumb.u-has-pagehead::before {
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1.6px);
background-size: 22px 22px;
-webkit-mask-image: linear-gradient(105deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .3) 34%, transparent 60%);
mask-image: linear-gradient(105deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .3) 34%, transparent 60%);
}
.master-breadcrumb.u-has-pagehead::after {
top: -300px;
right: -180px;
width: 620px;
height: 620px;
border-radius: 50%;
background: repeating-radial-gradient(circle, rgba(255, 255, 255, .1) 0 1px, transparent 1.6px 48px);
-webkit-mask-image: radial-gradient(circle, #000 26%, transparent 70%);
mask-image: radial-gradient(circle, #000 26%, transparent 70%);
}
.master-breadcrumb.u-has-pagehead > .container {
padding-top: 26px;
padding-bottom: 28px;
}
.master-breadcrumb.u-has-pagehead .breadcrumb-item a {
color: #a9bde3;
}
.master-breadcrumb.u-has-pagehead .breadcrumb-item a:hover,
.master-breadcrumb.u-has-pagehead .breadcrumb-item a:focus-visible {
color: #fff;
}
.master-breadcrumb.u-has-pagehead .breadcrumb-item.active {
color: #e3ebfa;
}
.master-breadcrumb.u-has-pagehead .breadcrumb-item + .breadcrumb-item::before {
color: rgba(201, 215, 242, .45);
}
.master-breadcrumb.u-has-pagehead .u-pagehead__title {
color: #fff;
text-shadow: 0 2px 18px rgba(4, 14, 40, .3);
}
.master-breadcrumb.u-has-pagehead .u-pagehead__lead {
color: #c3d2ee;
}
.master-breadcrumb.u-has-pagehead .u-pagehead__stats {
color: #e3ebfa;
}
.master-breadcrumb.u-has-pagehead .u-pagehead__stats span::before {
background: #9fb3d6;
}
.master-breadcrumb.u-has-pagehead .u-pagehead__stats span:nth-child(2)::before {
background: #45d39a;
}
.master-breadcrumb.u-has-pagehead .u-pagehead__stats span.is-warn {
color: #ffd27a;
}
.master-breadcrumb.u-has-pagehead .u-pagehead__stats span.is-warn::before {
background: #ffc34d;
}
/* Dugmad u zaglavlju: glavno svetlije plavo, ostala providna (kao na tamnoj kartici pozdrava) */
.master-breadcrumb.u-has-pagehead .btn-primary {
color: #fff;
background: #2b67e6;
border-color: #2b67e6;
box-shadow: 0 10px 22px -12px rgba(2, 10, 32, .8);
}
.master-breadcrumb.u-has-pagehead .btn-primary:hover,
.master-breadcrumb.u-has-pagehead .btn-primary:focus {
background: #3b76f2;
border-color: #3b76f2;
}
.master-breadcrumb.u-has-pagehead .btn-default {
color: #fff;
background: rgba(255, 255, 255, .08);
border-color: rgba(255, 255, 255, .24);
}
.master-breadcrumb.u-has-pagehead .btn-default:hover,
.master-breadcrumb.u-has-pagehead .btn-default:focus {
color: #fff;
background: rgba(255, 255, 255, .16);
border-color: rgba(255, 255, 255, .4);
}
.master-breadcrumb.u-has-pagehead .btn:focus-visible {
outline: 3px solid rgba(126, 172, 255, .6);
outline-offset: 2px;
}
@media (max-width: 767px) {
.master-breadcrumb.u-has-pagehead > .container {
padding-top: 18px;
padding-bottom: 20px;
}
.master-breadcrumb.u-has-pagehead::after {
top: -220px;
right: -260px;
width: 480px;
height: 480px;
}
}
/* ---------- Strane naloga: Moje info, korisnici, prava, kontakti, sigurnost, primljene poruke ---------- */
.primary-content .card.u-acard {
overflow: visible;
}
.u-acard__head {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 20px 22px 0;
}
.u-acard__titles {
min-width: 0;
}
h2.u-acard__title {
margin: 0;
font-size: 17px;
font-weight: 800;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--u-ink);
}
.u-acard__desc {
margin: 3px 0 0;
font-size: 14px;
line-height: 1.45;
color: var(--u-meta);
}
.u-acard__body {
padding: 16px 22px 20px;
}
.u-acard__count {
margin: 10px 22px 0;
font-size: 14px;
color: var(--u-meta);
}
.u-acard__foot {
margin: 0;
padding: 14px 22px 18px;
font-size: 13px;
color: var(--u-meta);
}
.u-acard__body > .u-acard__foot {
padding: 12px 0 0;
}
.u-fgrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 20px;
}
.u-fgrid > .form-group {
min-width: 0;
margin-bottom: 14px;
}
.u-fgrid > .u-f--wide {
grid-column: 1 / -1;
}
.u-acard .col-form-label {
padding: 0 0 6px;
font-size: 14px;
font-weight: 600;
color: var(--u-ink-2);
}
.u-acard .form-control,
.u-acard .custom-select {
height: 44px;
font-size: 15px;
}
.u-acard .intl-tel-input {
width: 100%;
}
@media (max-width: 767px) {
.u-fgrid {
grid-template-columns: minmax(0, 1fr);
}
.u-acard__head {
padding: 18px 16px 0;
}
.u-acard__body {
padding: 14px 16px 18px;
}
}
/* Prekidači (obaveštenja e-poštom): isti obrazac i nazivi polja, izgled kao prekidač */
.u-switches {
display: grid;
gap: 2px;
padding-top: 10px;
}
.u-acard label.u-switch {
position: relative;
display: flex;
align-items: center;
gap: 12px;
margin: 0 -10px;
padding: 9px 10px;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: var(--u-ink-2);
border-radius: 10px;
cursor: pointer;
transition: background-color var(--u-ease);
}
.u-acard label.u-switch:hover {
background: var(--u-paper);
}
.u-acard .u-switch__input.form-check-input {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
opacity: 0;
}
.u-switch__track {
position: relative;
flex: 0 0 auto;
width: 40px;
height: 24px;
background: #cbd5e1;
border-radius: 999px;
transition: background-color .15s ease;
}
.u-switch__track::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(20, 32, 51, .3);
transition: transform .15s ease;
}
.u-switch__input:checked + .u-switch__track {
background: var(--u-green);
}
.u-switch__input:checked + .u-switch__track::after {
transform: translateX(16px);
}
.u-switch__input:focus-visible + .u-switch__track {
outline: 3px solid rgba(31, 90, 209, .35);
outline-offset: 2px;
}
.u-switch__text {
min-width: 0;
}
@media (prefers-reduced-motion: reduce) {
.u-switch__track,
.u-switch__track::after {
transition: none;
}
}
/* Traka za čuvanje: ostaje pri dnu ekrana dok se forma ne završi */
.u-savebar {
position: sticky;
bottom: 12px;
z-index: 20;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
margin: 4px 0 0;
padding: 12px 14px 12px 18px;
background: rgba(255, 255, 255, .95);
border: 1px solid var(--u-line);
border-radius: var(--u-r);
box-shadow: 0 14px 30px -18px rgba(20, 32, 51, .45);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
transition: border-color .15s ease;
}
.u-acard .u-savebar {
margin-top: 16px;
}
.u-savebar__state {
flex: 1 1 auto;
margin: 0;
font-size: 14px;
font-weight: 600;
color: #8a5a00;
}
.u-savebar__btns {
display: flex;
gap: 8px;
margin-left: auto;
}
form.is-dirty .u-savebar {
border-color: #ecc77a;
}
.btn.u-btn-danger-soft {
color: #a3281e;
background: #fff;
border: 1px solid #f1c7c3;
}
.btn.u-btn-danger-soft:hover,
.btn.u-btn-danger-soft:focus {
color: #a3281e;
background: var(--u-red-50);
border-color: #e6a39b;
}
.btn.u-btn-danger-soft:focus-visible {
outline: 3px solid rgba(196, 56, 45, .25);
outline-offset: 2px;
box-shadow: none;
}
@media (max-width: 575px) {
.u-savebar {
padding: 10px;
}
.u-savebar__state:empty,
.u-savebar__state:not(:has(span:not([hidden]))) {
display: none;
}
.u-savebar__btns {
flex: 1 1 0;
width: 100%;
min-width: 0;
}
.u-savebar__btns .btn {
flex: 1 1 0;
min-width: 0;
padding-left: 8px;
padding-right: 8px;
}
/* Brisanje kontakta: samo ikonica u istom redu, tekst ostaje za čitače ekrana */
.u-savebar .u-savebar__del {
flex: 0 0 40px;
width: 40px;
padding: 0;
justify-content: center;
}
.u-savebar__deltext {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
}
/* Korisnici sa pristupom i pozivnice */
.u-ulist {
margin: 14px 0 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--u-line-2);
}
.u-ulist__row {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) auto;
align-items: center;
gap: 6px 14px;
padding: 14px 22px;
border-bottom: 1px solid var(--u-line-2);
}
.u-ulist__avatar {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 40px;
height: 40px;
font-size: 16px;
font-weight: 800;
color: var(--u-blue);
background: var(--u-blue-50);
border-radius: 50%;
}
.u-ulist__avatar.is-invite {
color: #8a5a00;
background: var(--u-amber-50);
}
.u-ulist__avatar .u-ico {
width: 18px;
height: 18px;
}
.u-ulist__main {
min-width: 0;
}
.u-ulist__email {
display: block;
font-size: 15px;
font-weight: 700;
color: var(--u-ink);
overflow-wrap: anywhere;
}
.u-ulist__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 10px;
margin-top: 4px;
font-size: 13px;
color: var(--u-meta);
}
.u-ulist__tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 9px;
font-size: 12px;
font-weight: 700;
border-radius: 999px;
}
.u-ulist__tag .u-ico {
width: 13px;
height: 13px;
}
.u-ulist__tag.is-owner {
color: var(--u-blue-600);
background: var(--u-blue-50);
}
.u-ulist__tag.is-ok {
color: var(--u-green-600);
background: var(--u-green-50);
}
.u-ulist__tag.is-muted {
color: var(--u-ink-2);
background: var(--u-paper);
}
.u-ulist__actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
margin: 0;
}
.u-ulist__actions .btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 34px;
padding: 0 12px;
font-size: 13px;
font-weight: 700;
border-radius: var(--u-r-sm);
}
.u-ulist__actions .btn .u-ico {
width: 15px;
height: 15px;
}
.u-ulist__sub {
margin: 20px 22px 0;
font-size: 12px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--u-meta);
}
@media (max-width: 575px) {
.u-ulist__row {
grid-template-columns: 36px minmax(0, 1fr);
padding: 14px 16px;
}
.u-ulist__avatar {
width: 36px;
height: 36px;
}
.u-ulist__actions {
grid-column: 1 / -1;
justify-content: flex-start;
}
.u-ulist__actions:empty {
display: none;
}
.u-ulist__actions .btn {
flex: 1 1 0;
justify-content: center;
white-space: nowrap;
}
.u-ulist__sub {
margin: 18px 16px 0;
}
}
/* Poziv novog korisnika i prava pristupa */
.u-invite {
display: grid;
gap: 14px;
}
.u-invite .form-group {
max-width: 520px;
margin: 0;
}
.u-seg {
display: inline-flex;
flex-wrap: wrap;
width: fit-content;
max-width: 100%;
padding: 4px;
background: var(--u-paper);
border: 1px solid var(--u-line-2);
border-radius: 10px;
}
.u-acard label.u-seg__opt {
position: relative;
margin: 0;
font-weight: 700;
}
.u-acard .u-seg__opt input.form-check-input {
position: absolute;
margin: 0;
opacity: 0;
}
.u-seg__opt span {
display: block;
padding: 8px 14px;
font-size: 14px;
color: var(--u-ink-2);
border-radius: 8px;
cursor: pointer;
}
.u-seg__opt input:checked + span {
color: var(--u-ink);
background: #fff;
box-shadow: 0 1px 3px rgba(20, 32, 51, .14);
}
.u-seg__opt input:focus-visible + span {
outline: 3px solid rgba(31, 90, 209, .35);
}
.u-perms {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.u-acard label.u-perm {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0;
padding: 11px 12px;
font-weight: 400;
border: 1px solid var(--u-line-2);
border-radius: 10px;
cursor: pointer;
transition: background-color var(--u-ease), border-color var(--u-ease);
}
.u-acard label.u-perm:hover {
border-color: var(--u-line);
background: #fafbfd;
}
.u-acard label.u-perm:has(input:checked) {
background: var(--u-blue-50);
border-color: #b9cdf3;
}
.u-acard .u-perm input.form-check-input {
position: static;
flex: 0 0 auto;
width: 17px;
height: 17px;
margin: 2px 0 0;
accent-color: var(--u-blue);
}
.u-perm__text {
min-width: 0;
}
.u-perm__text strong {
display: block;
font-size: 14px;
line-height: 1.35;
color: var(--u-ink);
}
.u-perm__text span {
display: block;
margin-top: 1px;
font-size: 13px;
line-height: 1.4;
color: var(--u-meta);
}
.u-perm-user {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 18px;
padding: 10px 12px;
background: var(--u-paper);
border-radius: 10px;
overflow-wrap: anywhere;
}
.u-perm-title {
margin: 0 0 10px;
font-size: 12px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--u-meta);
}
@media (max-width: 767px) {
.u-perms {
grid-template-columns: minmax(0, 1fr);
}
}
/* Drugi kontakt: izbor kontakta */
.primary-content .card.u-cpick {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
padding: 14px 18px;
}
.u-cpick label.u-cpick__label {
margin: 0;
font-weight: 700;
color: var(--u-ink);
}
.u-cpick .form-control.u-cpick__select {
flex: 1 1 260px;
width: auto;
max-width: 520px;
height: 42px;
}
.u-cpick__new {
margin-left: auto;
}
.u-cpick__empty {
flex: 1 1 260px;
margin: 0;
font-size: 14px;
color: var(--u-ink-2);
}
@media (max-width: 575px) {
.u-cpick .form-control.u-cpick__select,
.u-cpick__new {
flex: 1 1 100%;
max-width: none;
margin-left: 0;
}
}
/* Sigurnost naloga */
.u-seclinks {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
a.u-seclink {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
font-weight: 700;
color: var(--u-ink);
border: 1px solid var(--u-line);
border-radius: var(--u-r);
transition: background-color var(--u-ease), border-color var(--u-ease), color var(--u-ease);
}
a.u-seclink:hover,
a.u-seclink:focus-visible {
color: var(--u-blue);
text-decoration: none;
background: var(--u-blue-50);
border-color: #b9cdf3;
}
.u-seclink__ico {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 36px;
height: 36px;
color: var(--u-blue);
background: var(--u-blue-50);
border-radius: 10px;
}
.u-seclink__go {
margin-left: auto;
color: var(--u-muted);
}
.u-sso__row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: var(--u-paper);
border-radius: 10px;
}
.u-sso__state {
font-weight: 700;
color: var(--u-ink-2);
}
.u-sso__state.is-on {
color: var(--u-green-600);
}
@media (max-width: 575px) {
.u-seclinks {
grid-template-columns: minmax(0, 1fr);
}
}
/* Prozori na stranama naloga (uklanjanje pristupa, brisanje kontakta) */
.u-amodal .modal-content {
border: 0;
border-radius: 16px;
}
.u-amodal .modal-body {
padding: 26px 26px 8px;
color: var(--u-ink-2);
}
.u-amodal .modal-title {
margin: 0 0 8px;
font-size: 20px;
font-weight: 800;
color: var(--u-ink);
}
.u-amodal__ico {
display: grid;
place-items: center;
width: 46px;
height: 46px;
margin: 0 0 14px;
border-radius: 14px;
}
.u-amodal__ico.is-danger {
color: var(--u-red);
background: var(--u-red-50);
}
.u-amodal__ico .u-ico {
width: 22px;
height: 22px;
}
.u-amodal__note {
font-size: 14px;
color: var(--u-meta);
}
.u-amodal .modal-footer {
padding: 12px 26px 22px;
border-top: 0;
}
/* Primljene poruke (clientareaemails.tpl): isti izgled kao lista tiketa */
.u-dtools__count {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 14px;
font-weight: 700;
color: var(--u-ink-2);
}
.u-dtools__count .u-ico {
color: var(--u-blue);
}
.u-emails-ready #tableEmailsList_wrapper .listtable {
border-radius: 0 0 var(--u-r) var(--u-r);
}
#tableEmailsList_wrapper .listtable > table {
border-top: 0 !important;
}
#uEmSide .dataTables_filter.u-dsearch {
float: none;
width: auto;
margin: 0;
padding: 0;
}
#uEmSide .dataTables_filter.u-dsearch label {
display: block;
margin: 0;
font-size: 0;
}
#uEmSide .dataTables_filter.u-dsearch input.form-control {
width: 260px;
height: 38px;
margin: 0;
padding: 8px 12px 8px 36px !important;
font-size: 14px;
background: var(--u-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366758a' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px 50%;
border: 1px solid transparent;
border-radius: var(--u-r-sm);
}
#uEmSide .dataTables_filter.u-dsearch input.form-control:focus {
background-color: #fff;
border-color: var(--u-blue);
}
#tableEmailsList thead th {
width: auto !important;
text-align: left;
}
#tableEmailsList thead th:first-child {
width: 66% !important;
padding-left: 18px;
}
#tableEmailsList tbody > tr {
cursor: pointer;
}
#tableEmailsList tbody > tr > td {
vertical-align: middle;
}
#tableEmailsList td.u-col-subject {
padding-left: 18px;
}
.u-eml {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.u-eml__ico {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 36px;
height: 36px;
color: var(--u-blue);
background: var(--u-blue-50);
border-radius: 10px;
}
.u-eml__ico .u-ico {
width: 18px;
height: 18px;
}
.u-eml__text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.u-eml__subject {
font-size: 15px;
font-weight: 600;
line-height: 1.35;
color: var(--u-ink);
overflow-wrap: anywhere;
}
#tableEmailsList tr:hover .u-eml__subject {
color: var(--u-blue);
}
.u-eml__att {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
color: var(--u-meta);
}
.u-eml__att .u-ico {
width: 14px;
height: 14px;
}
#tableEmailsList td.u-col-date {
font-size: 13px;
font-variant-numeric: tabular-nums;
color: var(--u-ink-2);
white-space: nowrap;
}
#tableEmailsList td.u-col-actions,
#tableEmailsList th.u-col-actions {
width: 1%;
text-align: right;
white-space: nowrap;
}
#tableEmailsList tr:hover .btn.u-rowbtn {
border-color: #b9cdf5;
}
#tableEmailsList td.dataTables_empty,
#tableEmailsList.is-empty tbody {
display: none;
}
@media (max-width: 767px) {
#uEmSide,
#uEmSide .dataTables_filter.u-dsearch,
#uEmSide .dataTables_filter.u-dsearch label,
#uEmSide .dataTables_filter.u-dsearch input.form-control {
width: 100%;
}
#uEmSide {
flex: 1 1 100%;
grid-template-columns: 1fr;
}
#uEmSide .dataTables_filter.u-dsearch {
grid-column: 1 / -1;
}
.dataTables_wrapper #tableEmailsList tbody tr {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"subject action"
"date action";
align-items: center;
gap: 4px 12px;
padding: 14px;
}
#tableEmailsList tbody td.u-col-subject {
grid-area: subject;
padding-left: 0 !important;
}
#tableEmailsList tbody td.u-col-date {
grid-area: date;
padding-left: 48px !important;
text-align: left !important;
color: #6b7686;
}
#tableEmailsList tbody td.u-col-date::before {
content: none !important;
}
#tableEmailsList tbody td.u-col-actions {
grid-area: action;
margin: 0 !important;
}
#tableEmailsList .btn.u-rowbtn {
width: 36px;
height: 36px;
padding: 0;
justify-content: center;
}
#tableEmailsList .u-rowbtn__text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
}
/* SSO prekidač (bootstrap-switch) zaobljen kao ostala polja */
.u-sso .bootstrap-switch {
border-radius: var(--u-r-sm);
}
.u-sso .bootstrap-switch .bootstrap-switch-handle-on {
border-radius: var(--u-r-sm) 0 0 var(--u-r-sm);
}
.u-sso .bootstrap-switch .bootstrap-switch-handle-off {
border-radius: 0 var(--u-r-sm) var(--u-r-sm) 0;
}
/* Moje info: pomoćni tekst ispod dodatnog polja (npr. matični broj uz PIB) */
.u-accform .u-fhelp {
display: block;
margin-top: 6px;
font-size: 13px;
line-height: 1.4;
color: var(--u-meta);
}
/* ---------- Obaveštenja: jedno obaveštenje i lista ---------- */
.card.u-ann {
border-radius: var(--u-r);
}
.u-ann__body {
padding: 28px 32px 32px;
}
@media (max-width: 575px) {
.u-ann__body {
padding: 20px 18px 24px;
}
}
.u-ann__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 20px;
}
.u-ann__date {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
font-size: 13px;
font-weight: 700;
color: var(--u-slate);
font-variant-numeric: tabular-nums;
background: var(--u-paper);
border-radius: 999px;
}
.u-ann__date .u-ico {
width: 14px;
height: 14px;
}
.u-ann__foot {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px;
margin-bottom: 24px;
}
.u-ann__foot .u-dbtn .u-ico {
width: 16px;
height: 16px;
}
/* Tekst iz WHMCS editora: čitljivo, ujednačeni razmaci, ništa ne izlazi iz kartice */
.u-article {
font-size: 15.5px;
line-height: 1.7;
color: var(--u-ink-2);
overflow-wrap: break-word;
}
.u-article > :first-child {
margin-top: 0 !important;
}
.u-article > :last-child {
margin-bottom: 0 !important;
}
.u-article p {
margin: 0 0 1em;
}
.u-article h1,
.u-article h2,
.u-article h3,
.u-article h4,
.u-article h5,
.u-article h6 {
margin: 1.6em 0 .55em;
font-weight: 800;
line-height: 1.3;
letter-spacing: -.01em;
color: var(--u-ink);
}
.u-article h1 {
font-size: 26px;
}
.u-article h2 {
font-size: 22px;
}
.u-article h3 {
font-size: 19px;
}
.u-article h4,
.u-article h5,
.u-article h6 {
font-size: 16.5px;
}
.u-article ul,
.u-article ol {
margin: 0 0 1em;
padding-left: 1.4em;
}
.u-article li {
margin: .3em 0;
padding-left: .2em;
}
.u-article li > p {
margin: 0;
}
.u-article li::marker {
color: var(--u-blue);
}
.u-article a {
color: var(--u-blue);
text-decoration: underline;
text-underline-offset: 2px;
overflow-wrap: anywhere;
}
.u-article strong,
.u-article b {
font-weight: 700;
color: var(--u-ink);
}
/* slike, video i ugrađeni sadržaj: najviše širine kartice, srazmerno (i kada editor upiše širinu u px) */
.u-article img,
.u-article video,
.u-article svg {
max-width: 100% !important;
height: auto !important;
}
.u-article img {
border-radius: 10px;
}
.u-article iframe,
.u-article embed,
.u-article object {
max-width: 100%;
}
.u-article iframe[src*="youtube"],
.u-article iframe[src*="vimeo"] {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
.u-article [style*="width"] {
max-width: 100% !important;
}
.u-article table {
display: block;
width: 100%;
max-width: 100%;
margin: 0 0 1.2em;
overflow-x: auto;
font-size: 14.5px;
border-collapse: collapse;
}
.u-article th,
.u-article td {
padding: 8px 12px;
vertical-align: top;
border: 1px solid var(--u-line);
}
.u-article th {
font-weight: 700;
color: var(--u-ink);
background: var(--u-paper);
}
.u-article pre,
.u-article code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 13.5px;
}
.u-article pre {
margin: 0 0 1em;
padding: 12px 14px;
overflow-x: auto;
white-space: pre-wrap;
background: var(--u-paper);
border: 1px solid var(--u-line-2);
border-radius: 8px;
}
.u-article :not(pre) > code {
padding: 1px 5px;
background: var(--u-paper);
border-radius: 4px;
}
.u-article blockquote {
margin: 0 0 1em;
padding: 4px 0 4px 16px;
color: var(--u-ink-2);
border-left: 3px solid var(--u-blue);
}
.u-article hr {
margin: 1.6em 0;
border: 0;
border-top: 1px solid var(--u-line);
}
@media (max-width: 575px) {
.u-article {
font-size: 15px;
}
.u-article h1 {
font-size: 22px;
}
.u-article h2 {
font-size: 20px;
}
.u-article h3 {
font-size: 18px;
}
}
/* Lista obaveštenja */
.card.u-annlist {
overflow: hidden;
border-radius: var(--u-r);
}
.u-annlist__item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 22px 26px;
}
.u-annlist__item + .u-annlist__item {
border-top: 1px solid var(--u-line-2);
}
h2.u-annlist__title {
margin: 2px 0 0;
font-size: 19px;
font-weight: 800;
line-height: 1.35;
}
.u-annlist__title a {
color: var(--u-ink);
}
.u-annlist__title a:hover {
color: var(--u-blue);
text-decoration: none;
}
.u-annlist__text {
display: -webkit-box;
margin: 0;
overflow: hidden;
font-size: 15px;
line-height: 1.6;
color: var(--u-muted);
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.u-annlist__actions {
display: flex;
align-items: center;
gap: 16px;
margin-top: 2px;
}
.u-annlist__edit {
font-size: 13px;
color: var(--u-muted);
}
.u-annlist__empty {
padding: 20px;
}
@media (max-width: 575px) {
.u-annlist__item {
padding: 18px;
}
}
/* Strane podrške (tiket, lista tiketa, nov tiket): niže zaglavlje strane i manji naslov */
.master-breadcrumb.u-has-pagehead.u-pagehead--compact > .container {
padding-top: 16px;
padding-bottom: 18px;
}
.master-breadcrumb.u-has-pagehead.u-pagehead--compact .breadcrumb {
margin-bottom: 6px;
}
.master-breadcrumb.u-has-pagehead.u-pagehead--compact .u-pagehead__title {
font-size: 23px;
line-height: 1.3;
}
.master-breadcrumb.u-has-pagehead.u-pagehead--compact .u-pagehead__lead {
margin-top: 4px;
font-size: 14px;
}
@media (max-width: 575px) {
.master-breadcrumb.u-has-pagehead.u-pagehead--compact .u-pagehead__title {
font-size: 20px;
}
}
/* Tiket, bočni meni: dodavanje osoba u kopiju (CC) i nazivi koji ne izlaze iz kartice */
.tpl-viewticket .sidebar .card-body .input-group {
flex-wrap: nowrap;
}
.tpl-viewticket .sidebar .card-body .input-group > .form-control {
height: 40px;
min-width: 0;
font-size: 14px;
border-radius: 10px 0 0 10px;
}
.tpl-viewticket .sidebar .card-body .input-group .btn {
height: 40px;
padding: 0 14px;
font-size: 14px;
font-weight: 700;
color: var(--u-blue);
border-radius: 0 10px 10px 0;
}
.tpl-viewticket .sidebar .card-body .input-group .btn:hover {
color: #fff;
background: var(--u-blue);
border-color: var(--u-blue);
}
.tpl-viewticket .sidebar .card-body,
.tpl-viewticket .sidebar .list-group-item {
overflow-wrap: anywhere;
}
/* ---------- Cene domena (domain-pricing.tpl, 20261020c) ----------
Pretraga i valuta u traci, jedna tabela bez kategorija; na telefonu svaki nastavak je kartica. */
.u-dp {
margin-bottom: 28px;
}
.u-dp__bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
margin: 0 0 14px;
}
.u-dp__search {
position: relative;
flex: 1 1 280px;
max-width: 420px;
margin: 0;
}
.u-dp__search .u-ico {
position: absolute;
top: 50%;
left: 14px;
width: 18px;
height: 18px;
color: var(--u-muted);
transform: translateY(-50%);
pointer-events: none;
}
.u-dp__search .form-control {
height: 44px;
padding-left: 42px;
font-size: 15px;
background: #fff;
border: 1px solid var(--u-line);
border-radius: 10px;
}
.u-dp__search .form-control:focus {
border-color: var(--u-blue);
box-shadow: 0 0 0 3px rgba(31, 90, 209, .15);
}
.u-dp__count {
font-size: 13.5px;
font-weight: 600;
color: var(--u-muted);
}
.u-dp__cur {
margin: 0 0 0 auto;
}
.u-dp__cur .custom-select {
height: 40px;
min-width: 110px;
font-weight: 700;
border-radius: 10px;
}
.btn.u-dp__cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
}
.u-dp__cur + .u-dp__cta {
margin-left: 0;
}
.u-dp__count + .u-dp__cta {
margin-left: auto;
}
.u-dp__cta .u-ico {
width: 17px;
height: 17px;
}
.u-dp__table {
overflow: hidden;
background: #fff;
border: 1px solid var(--u-line);
border-radius: var(--u-r);
box-shadow: var(--u-shadow);
}
.u-dp__head,
.u-dp__row {
display: grid;
grid-template-columns: minmax(130px, 1.1fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr);
gap: 10px 18px;
align-items: center;
padding: 12px 20px;
}
.u-dp__head {
font-size: 12px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--u-muted);
background: var(--u-paper);
border-bottom: 1px solid var(--u-line);
}
.u-dp__row {
border-bottom: 1px solid var(--u-line-2);
transition: background-color .12s ease;
}
.u-dp__row:hover {
background: #fafcfe;
}
.u-dp__row[hidden] {
display: none;
}
.u-dp__tld {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
min-width: 0;
}
.u-dp__tld strong {
font-size: 16px;
font-weight: 800;
overflow-wrap: anywhere;
}
.u-dp__grp {
padding: 2px 8px;
font-size: 11px;
font-weight: 800;
letter-spacing: .02em;
text-transform: uppercase;
color: var(--u-ink-2);
background: #edf1f5;
border-radius: 999px;
}
.u-dp__grp.is-hot {
color: #fff;
background: #e5484d;
}
.u-dp__grp.is-new {
color: #fff;
background: var(--u-green);
}
.u-dp__grp.is-sale {
color: #6b4a00;
background: #ffd863;
}
.u-dp__price b {
display: block;
font-size: 15px;
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.u-dp__price small,
.u-dp__after small {
display: block;
font-size: 12px;
color: var(--u-muted);
}
.u-dp__after {
display: grid;
gap: 2px;
font-size: 13px;
line-height: 1.45;
color: var(--u-ink-2);
font-variant-numeric: tabular-nums;
}
.u-dp__after em {
font-style: normal;
color: var(--u-muted);
}
.u-dp__empty {
padding: 22px 20px;
font-size: 14px;
color: var(--u-muted);
text-align: center;
}
.u-dp__empty[hidden] {
display: none;
}
@media (max-width: 991.98px) {
.u-dp__head {
display: none;
}
.u-dp__row {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px 14px;
padding: 14px 16px;
}
.u-dp__tld,
.u-dp__after {
grid-column: 1 / -1;
}
.u-dp__price::before,
.u-dp__after::before {
content: attr(data-label);
display: block;
margin-bottom: 1px;
font-size: 11px;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
color: var(--u-muted);
}
.u-dp__after {
padding-top: 8px;
border-top: 1px dashed var(--u-line-2);
}
}
@media (max-width: 575px) {
.u-dp__search {
flex-basis: 100%;
max-width: none;
}
.u-dp__count {
display: none;
}
.u-dp__cur {
margin-left: 0;
}
.btn.u-dp__cta {
margin-left: auto;
}
.u-dp__price b {
font-size: 14px;
}
}
/* ---------- Baza znanja (knowledgebase.tpl, knowledgebasecat.tpl, knowledgebasearticle.tpl; 20261020e) ----------
Pretraga prva, kartice kategorija, liste članaka, čitljiv članak, ocena članka. Bez oblaka oznaka. */
.u-kb {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 18px;
margin-bottom: 24px;
}
.u-kb > * {
min-width: 0;
}
.u-kb-hero {
padding: 22px 24px 24px;
background: #fff;
border: 1px solid var(--u-line);
border-radius: var(--u-r);
box-shadow: var(--u-shadow);
}
.u-kb-hero__title {
margin: 0;
font-size: 21px;
font-weight: 800;
letter-spacing: -0.01em;
}
.u-kb-hero__lead {
margin: 4px 0 16px;
font-size: 14.5px;
color: var(--u-muted);
}
.u-kb-search {
margin: 0;
}
.u-kb-search__box {
position: relative;
display: flex;
gap: 8px;
}
.u-kb-search__ico {
position: absolute;
top: 50%;
left: 16px;
width: 19px;
height: 19px;
color: var(--u-muted);
transform: translateY(-50%);
pointer-events: none;
}
.u-kb-search__box .form-control {
flex: 1 1 auto;
min-width: 0;
height: 50px;
padding-left: 46px;
font-size: 15.5px;
background: #fff;
border: 1px solid var(--u-line);
border-radius: 12px;
transition: border-color var(--u-ease), box-shadow var(--u-ease);
}
.u-kb-search__box .form-control::placeholder {
color: #8a99ad;
font-weight: 500;
}
.u-kb-search__box .form-control:hover {
border-color: #b9c6d8;
}
.u-kb-search__box .form-control:focus {
border-color: var(--u-blue);
box-shadow: 0 0 0 3px rgba(31, 90, 209, .15);
}
.btn.u-kb-search__btn {
flex: 0 0 auto;
height: 50px;
padding: 0 24px;
font-size: 15px;
font-weight: 700;
border-radius: 12px;
}
.u-kb > .u-kb-search {
padding: 14px;
background: #fff;
border: 1px solid var(--u-line);
border-radius: var(--u-r);
box-shadow: var(--u-shadow);
}
.u-kb-h {
margin: 4px 0 -6px;
font-size: 13px;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--u-muted);
}
/* kategorije: dve kolone, cela kartica je link */
.u-kb-cats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
a.u-kb-cat {
position: relative;
display: flex;
align-items: flex-start;
gap: 14px;
min-height: 100%;
padding: 16px 40px 16px 16px;
color: var(--u-ink);
text-decoration: none;
background: #fff;
border: 1px solid var(--u-line);
border-radius: var(--u-r);
box-shadow: var(--u-shadow);
transition: border-color var(--u-ease), box-shadow var(--u-ease), transform var(--u-ease);
}
a.u-kb-cat:hover,
a.u-kb-cat:focus-visible {
color: var(--u-ink);
text-decoration: none;
border-color: #b9cdf0;
box-shadow: 0 10px 22px -16px rgba(31, 90, 209, .5);
transform: translateY(-1px);
}
.u-kb-cat__ico {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 40px;
height: 40px;
color: var(--u-blue);
background: var(--u-blue-50);
border-radius: 11px;
}
.u-kb-cat__ico .u-ico {
width: 20px;
height: 20px;
}
.u-kb-cat__body {
display: grid;
gap: 3px;
min-width: 0;
}
.u-kb-cat__name {
font-size: 16px;
font-weight: 800;
line-height: 1.3;
overflow-wrap: anywhere;
}
.u-kb-cat__desc {
display: -webkit-box;
overflow: hidden;
font-size: 13.5px;
line-height: 1.5;
color: var(--u-ink-2);
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.u-kb-cat__count {
font-size: 12.5px;
font-weight: 600;
color: var(--u-muted);
}
.u-kb-cat__go,
.u-kb-item__go {
position: absolute;
top: 50%;
right: 14px;
width: 18px;
height: 18px;
color: #a7b4c6;
transform: translateY(-50%);
transition: color var(--u-ease), transform var(--u-ease);
}
a.u-kb-cat:hover .u-kb-cat__go,
a.u-kb-item:hover .u-kb-item__go {
color: var(--u-blue);
transform: translate(2px, -50%);
}
.u-kb-edit.show-on-card-hover {
position: relative;
z-index: 2;
align-self: center;
margin-left: auto;
}
/* liste članaka */
.u-kb-list {
overflow: hidden;
background: #fff;
border: 1px solid var(--u-line);
border-radius: var(--u-r);
box-shadow: var(--u-shadow);
}
.u-kb-list__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 6px 14px;
padding: 14px 20px;
border-bottom: 1px solid var(--u-line-2);
}
h2.u-kb-list__title {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
margin: 0;
font-size: 16px;
font-weight: 800;
overflow-wrap: anywhere;
}
.u-kb-list__title .u-ico {
flex: 0 0 auto;
width: 18px;
height: 18px;
color: var(--u-blue);
}
.u-kb-list__count {
font-size: 13px;
font-weight: 600;
color: var(--u-muted);
}
.u-kb-list__empty {
margin: 0;
padding: 18px 20px;
font-size: 14px;
color: var(--u-muted);
}
a.u-kb-item {
position: relative;
display: flex;
align-items: flex-start;
gap: 12px;
padding: 13px 44px 13px 20px;
color: var(--u-ink);
text-decoration: none;
border-bottom: 1px solid var(--u-line-2);
transition: background-color var(--u-ease);
}
a.u-kb-item:last-child {
border-bottom: 0;
}
a.u-kb-item:hover,
a.u-kb-item:focus-visible {
color: var(--u-ink);
text-decoration: none;
background: #f7f9fc;
}
.u-kb-item__ico {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 30px;
height: 30px;
margin-top: 1px;
color: var(--u-slate);
background: var(--u-paper);
border-radius: 8px;
}
.u-kb-item__ico .u-ico {
width: 16px;
height: 16px;
}
.u-kb-item__body {
display: grid;
gap: 2px;
min-width: 0;
}
.u-kb-item__title {
font-size: 15px;
font-weight: 700;
line-height: 1.4;
color: var(--u-blue);
overflow-wrap: anywhere;
}
a.u-kb-item:hover .u-kb-item__title {
text-decoration: underline;
text-underline-offset: 2px;
}
.u-kb-item__ex {
font-size: 13.5px;
line-height: 1.5;
color: var(--u-ink-2);
overflow-wrap: anywhere;
}
.u-kb-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
}
a.u-kb-back {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 14px;
font-weight: 700;
color: var(--u-blue);
}
a.u-kb-back .u-ico {
width: 16px;
height: 16px;
}
/* članak */
.u-kb-voted {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 16px;
font-size: 14.5px;
font-weight: 700;
color: var(--u-green-600);
background: var(--u-green-50);
border-radius: var(--u-r);
}
.u-kb-voted .u-ico {
width: 19px;
height: 19px;
}
.u-kb-art {
padding: 28px 32px 30px;
background: #fff;
border: 1px solid var(--u-line);
border-radius: var(--u-r);
box-shadow: var(--u-shadow);
}
.u-kb-art__head {
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--u-line-2);
}
h1.u-kb-art__title {
margin: 0;
font-size: 30px;
font-weight: 800;
line-height: 1.22;
letter-spacing: -0.015em;
overflow-wrap: anywhere;
}
.u-kb-art__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
margin-top: 12px;
font-size: 13px;
color: var(--u-muted);
}
.u-kb-tags {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
}
.u-kb-tag {
padding: 2px 9px;
font-size: 12px;
font-weight: 600;
color: var(--u-ink-2);
background: #eef2f6;
border-radius: 999px;
}
.u-kb-tag:empty {
display: none;
}
.u-kb-art__useful {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.btn.u-kb-art__print {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: auto;
font-weight: 700;
}
.u-kb-art__print .u-ico {
width: 16px;
height: 16px;
}
.u-kb-article {
font-size: 16px;
line-height: 1.7;
color: var(--u-ink);
overflow-wrap: break-word;
}
.u-kb-article a {
text-underline-offset: 2px;
}
.u-kb-article :not(pre) > code {
padding: 1px 6px;
font-size: .88em;
color: var(--u-ink);
background: #eef2f6;
border: 1px solid var(--u-line-2);
border-radius: 5px;
overflow-wrap: anywhere;
}
.u-kb-article pre code {
color: inherit;
}
/* udoban red za čitanje; slike, tabele i kod mogu šire */
.u-kb-article p,
.u-kb-article ul,
.u-kb-article ol,
.u-kb-article h2,
.u-kb-article h3,
.u-kb-article h4,
.u-kb-article blockquote {
max-width: 800px;
}
.u-kb-article h2 {
margin-top: 1.6em;
font-size: 22px;
}
.u-kb-article h3 {
margin-top: 1.4em;
font-size: 18px;
}
.u-kb-article pre {
max-width: 100%;
overflow-x: auto;
white-space: pre;
overflow-wrap: normal;
}
.u-kb-article img {
margin: 10px 0;
border-radius: 8px;
}
.u-kb-article table {
display: block;
max-width: 100%;
overflow-x: auto;
}
/* ocena članka */
.u-kb-vote {
margin: 28px 0 0;
padding: 18px 16px;
text-align: center;
background: var(--u-paper);
border-radius: var(--u-r);
}
.u-kb-vote__q {
margin: 0 0 12px;
font-size: 16px;
font-weight: 800;
}
.u-kb-vote__btns {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.btn.u-kb-vote__btn {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 132px;
min-height: 44px;
justify-content: center;
padding: 0 18px;
font-size: 14.5px;
font-weight: 700;
color: var(--u-ink-2);
background: #fff;
border: 1px solid var(--u-line);
border-radius: 10px;
transition: color var(--u-ease), border-color var(--u-ease), background-color var(--u-ease);
}
.btn.u-kb-vote__btn:hover,
.btn.u-kb-vote__btn:focus-visible {
color: var(--u-blue);
background: var(--u-blue-50);
border-color: var(--u-blue);
}
.u-kb-vote__btn i {
font-size: 15px;
}
/* bočni meni baze znanja: neutralni brojevi desno, istaknuta trenutna kategorija */
body.tpl-knowledgebase .sidebar .list-group-item .badge,
body.tpl-knowledgebasecat .sidebar .list-group-item .badge,
body.tpl-knowledgebasearticle .sidebar .list-group-item .badge {
min-width: 26px;
padding: 3px 7px;
font-size: 12px;
font-weight: 700;
color: var(--u-ink-2);
background: #eef2f6;
border-radius: 999px;
}
body.tpl-knowledgebasecat .sidebar .list-group-item.active,
body.tpl-knowledgebasearticle .sidebar .list-group-item.active {
box-shadow: inset 3px 0 0 var(--u-blue);
}
@media (max-width: 991.98px) {
/* telefon i tablet: pretraga i sadržaj pre bočnog menija */
body.tpl-knowledgebase #main-body .row > .u-sbcol,
body.tpl-knowledgebasecat #main-body .row > .u-sbcol,
body.tpl-knowledgebasearticle #main-body .row > .u-sbcol {
order: 2;
}
}
@media (max-width: 767.98px) {
.u-kb-cats {
grid-template-columns: minmax(0, 1fr);
}
.u-kb-art {
padding: 20px 18px 22px;
}
h1.u-kb-art__title {
font-size: 24px;
}
.u-kb-article {
font-size: 15.5px;
}
.btn.u-kb-art__print {
margin-left: 0;
}
.btn.u-kb-search__btn {
padding: 0 16px;
}
.u-kb-hero {
padding: 18px 16px 18px;
}
}
@media print {
body.tpl-knowledgebasearticle #header,
body.tpl-knowledgebasearticle .master-breadcrumb,
body.tpl-knowledgebasearticle #footer,
body.tpl-knowledgebasearticle .sidebar,
.u-kb-vote,
.u-kb-art__print,
.u-kb-foot,
.u-kb .u-kb-list {
display: none !important;
}
.u-kb-art {
padding: 0;
border: 0;
box-shadow: none;
}
}
/* ---------- Upravljanje domenom: generisanje predračuna (#tabAutorenew, 20261020h) ----------
Dva pasusa objašnjenja, pa red sa stanjem i dugmetom. Dugme ima istu visinu, zaobljenje i razmak kao ostala
dugmad; dug natpis ("Isključi automatsko generisanje predračuna") prelazi u drugi red unutar okvira. */
.u-ar-exp {
max-width: 760px;
margin-bottom: 20px;
}
.u-ar-exp p {
margin: 0 0 10px;
font-size: 15px;
line-height: 1.6;
color: var(--u-ink-2);
}
.u-ar-exp p:last-child {
margin-bottom: 0;
}
.u-statusrow.u-ar-row {
gap: 12px 20px;
padding: 16px 18px;
border: 1px solid var(--u-line-2);
}
.u-ar-row .u-statusrow__state .label {
padding: 4px 10px;
font-size: 13px;
}
.btn.u-btn-40.u-ar-btn {
flex: 0 1 auto;
height: auto;
min-height: 40px;
max-width: 100%;
padding: 9px 18px;
line-height: 1.3;
text-align: center;
white-space: normal;
border-radius: var(--u-r-sm);
}
@media (max-width: 575.98px) {
.u-statusrow.u-ar-row {
flex-direction: column;
align-items: stretch;
}
.btn.u-btn-40.u-ar-btn {
width: 100%;
}
}
/* ---------- APOLO DNS: prozor učitavanja pri otvaranju modula (footer.tpl #uApLoad, unl-theme.js apoloPreload; 20261020j) ---------- */
.u-apload {
position: fixed;
inset: 0;
z-index: 10060;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 24px 16px;
text-align: center;
background: rgba(9, 18, 38, .94);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
opacity: 0;
transition: opacity .2s ease;
}
.u-apload[hidden] {
display: none;
}
.u-apload.is-on {
opacity: 1;
}
.u-apload__ico {
display: grid;
place-items: center;
width: 52px;
height: 52px;
color: #93c5fd;
background: rgba(59, 130, 246, .16);
border-radius: 14px;
}
.u-apload__ico .u-ico {
width: 26px;
height: 26px;
}
.u-apload__title {
font-size: 19px;
font-weight: 800;
letter-spacing: .01em;
color: #fff;
}
.u-apload__spin {
width: 44px;
height: 44px;
border: 3px solid rgba(255, 255, 255, .14);
border-top-color: #60a5fa;
border-radius: 50%;
animation: uApSpin .9s linear infinite;
}
@keyframes uApSpin {
to {
transform: rotate(360deg);
}
}
.u-apload__text {
max-width: 420px;
font-size: 14.5px;
color: #a9c6f5;
}
.u-apload__slow {
display: none;
max-width: 460px;
padding: 12px 16px;
font-size: 15px;
font-weight: 600;
line-height: 1.5;
color: #fde68a;
background: rgba(242, 182, 60, .12);
border: 1px solid rgba(242, 182, 60, .35);
border-radius: var(--u-r);
}
.u-apload.is-slow .u-apload__text {
display: none;
}
.u-apload.is-slow .u-apload__slow {
display: block;
}
.btn.u-apload__close {
display: none;
align-items: center;
justify-content: center;
height: 40px;
padding: 0 20px;
font-size: 14px;
font-weight: 700;
color: #fff;
background: transparent;
border: 1px solid rgba(255, 255, 255, .4);
border-radius: var(--u-r-sm);
}
.btn.u-apload__close:hover,
.btn.u-apload__close:focus-visible {
color: #0b1730;
background: #fff;
border-color: #fff;
}
.u-apload.is-slow .btn.u-apload__close {
display: inline-flex;
}
@media (prefers-reduced-motion: reduce) {
.u-apload__spin {
animation-duration: 2.4s;
}
}
/* ---------- Status servisa: RSS kopira adresu feeda (serverstatus.tpl, unl-theme.js nsRss; 20261020k) ---------- */
.u-ns-rss-wrap {
display: inline-flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
max-width: 100%;
}
.u-ns-rss__msg {
font-size: 13px;
font-weight: 600;
color: var(--u-green-600);
text-align: right;
}
.u-ns-rss__msg[hidden] {
display: none;
}
.u-ns-rss__msg .u-ns-rss__url {
width: min(360px, 100%);
height: 34px;
margin-top: 4px;
font-size: 13px;
color: var(--u-ink);
}
@media (max-width: 575.98px) {
.u-ns-rss-wrap {
align-items: flex-start;
}
.u-ns-rss__msg {
text-align: left;
}
}