/* font */

@font-face {
    font-family: 'Klavika';
    src: url('/include/fonts/klavika-bold-italic.otf') format('opentype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Klavika';
    src: url('/include/fonts/klavika-regular-italic.otf') format('opentype');
    font-style: italic;
}

/* Klavika Bold */
@font-face {
    font-family: 'Klavika';
    src: url('/include/fonts/klavika-bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

/* Klavika Light */
@font-face {
    font-family: 'Klavika';
    src: url('/include/fonts/klavika-light.otf') format('opentype');
    font-weight: 300;
    /* Light weight */
    font-style: normal;
}

@font-face {
    font-family: 'Klavika';
    src: url('/include/fonts/klavika-light-italic.otf') format('opentype');
    font-weight: 300;
    /* Light weight */
    font-style: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Klavika';
    src: url('/include/fonts/klavika-medium.otf') format('opentype');
    font-weight: 400;
}

/* header */
[id] {
    scroll-margin-top: 175px;
}

body {
    color: #f3f3f3;
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
    background: #212531;
}

a {
    color: #e1e1e1;
    text-decoration: none;
}

a:hover {
    color: #c1ff00;
}

p {
    line-height: 1.8rem;
}

.klavika {
    font-family: "Klavika", sans-serif;
    font-weight: 300;
}

.nav-link:focus,
.nav-link:hover {
    color: initial;
}

.logo {
    width: 220px;
}

.logo1 {
    display: none;
}

.logo2 {
    display: block;
}

.tribinaFoot .logo2 {
    margin: 0 auto;
}

.header {
    font-family: "Klavika", sans-serif;
}

.header ul li a {
    color: #ffffff;
    font-weight: 400;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.header ul li a:hover {
    color: #c1ff00;
}

.header .dropdown-menu li a {
    text-transform: initial;
    color: black;
    font-weight: 300;
}

.header ul li a i {
    margin-right: 2px;
}

.header ul li a.dropdown-item:hover {
    color: initial;
}

.header ul li .user {
    display: inline-block;
    font-size: 25px;
    padding: 6px 0px;
    vertical-align: middle;
    margin-right: 15px;
}

.brojobavijesti {
    background: #ef3824;
    top: -7px;
    right: 1px;
    font-size: 0.7rem;
    line-height: 1rem;
    font-weight: 500;
}

.nav-item {
    font-size: 1.1rem;
}

.nav-link {
    padding: 0.5rem 0.8rem;
}

.dropdown-toggle::after {
    display: none;
}

.btn {
    border-radius: 7px;
}

.btn-puls {
    color: #fff;
    background-color: #ef3824;
    border-color: #ef3824;
    outline: none !important;
    box-shadow: none !important;

}

.btn-puls:hover {
    color: #fff;
    background-color: #cc2b19;
    border-color: #cc2b19;
    outline: none !important;
    box-shadow: none !important;
}

.otac {
    background: #171923;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #4CAF50;
}

/* registracija */
h2 {
    font-size: 2rem;
    font-weight: bold;
}

h3 {
    font-size: 1.5rem;
    font-weight: bold;
}

h4 {
    font-size: 1rem;
    font-weight: normal;
    font-style: italic;
    font-weight: 300;
}

.registracija {
    margin: 20px;
    padding: 40px;
    border-radius: 10px;
}

h1,
h2,
h3,
h4 {
    font-family: "Klavika";
}

/* gumbići */

.btn-primary {
    color: #ffffff;
    background-color: #7ba300;
    border-color: #7ba300;
}

.btn-primary:hover,
.btn-primary:active {
    color: #ffffff;
    background-color: #658600;
    border-color: #658600;
}

.btn-primary:focus,
.btn-primary.focus {
    background-color: #658600;
    border-color: #658600;
    box-shadow: 0 0 0 .2rem #afcc58;
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #212529;
    background-color: #7ba300;
    border-color: #afcc58
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
    color: #212529;
    background-color: #afcc58;
    border-color: #afcc58
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem #afcc58;
}

.btn-outline-primary {
    color: #7ba300;
    background-color: transparent;
    background-image: none;
    border-color: #7ba300
}

.btn-outline-primary:hover {
    color: #ffffff;
    background-color: #afcc58;
    border-color: #7ba300
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
    box-shadow: 0 0 0 .2rem #afcc58;
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: #7ba300;
    background-color: transparent
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show>.btn-outline-primary.dropdown-toggle {
    color: #ffffff;
    background-color: #afcc58;
    border-color: #7ba300
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem #afcc58;
}

.btn-border {
    border: 1px solid #828282;
    color: white;
}

a.btn-light {
    color: #000000 !important;
    font-weight: 300 !important;
    border: 1px solid #000000;
    opacity: 0.7;
    transition: all 0.3s ease;
    background: transparent;
}

a.btn-light:hover {
    color: #000000 !important;
    font-weight: 300 !important;
    border: 1px solid #000000;
    opacity: 1;
    background: transparent;
}

.alert.alert-danger a {
    color: #81353c;
    font-weight: bold;
}

.alert.alert-danger a:hover {
    color: #98424a;
}

/* prva kutija s vijestima */

.glavne .prva img {
    max-height: 447px;
    object-fit: cover;
}

.glavne img {
    min-width: 100%;
    max-width: 100%;
    transition: opacity 0.3s ease;
}

.glavne .meta a {
    text-transform: uppercase;
    font-size: 0.9rem;
    border-bottom: 3px solid #e5e5e5;
}

.ukratko {
    color: black;
    font-size: 1rem;
    font-weight: 300;
}

.prva .info {
    font-size: 0.9rem;
}

.glavne .druga-slika img {
    border-radius: 7px;
}

.glavne .druge h2 {
    font-size: 1.1rem;
    line-height: 1.3rem;
    font-weight: 400;
}

.glavne .druge a {
    color: #fcfcfc;
}

.glavne .druge a:hover {
    color: #C1FF00;
}

.druge .info {
    font-size: 0.9rem;
    letter-spacing: 0px;
}

.druge .col {
    align-content: space-evenly;
}

.glavne .druge a.btn {
    background: white;
    border: 1px solid #c1c1c1;
    font-size: 0.9rem;
}

/* single članak */


.single .slika {
    width: 100%;
    height: 600px;
    overflow: hidden;
    border-radius: 7px;
    position: relative;
}

.single .slika img.featuredimg {
    width: 100%;
    height: auto;
    margin-top: -10%;
}

.single .slika:before {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, black 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0.9;
}

.single .metainfo {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 5;
}

.single .metainfo h2 {
    font-size: 3rem;
    color: white;
    line-height: 2.9rem;
}

.single .metainfo h3 {
    font-size: 1.5rem;
    color: white;
}

.single .metainfo a {
    color: white;
    padding: 0;
}

.single .clanak-info {
    display: flex;
}

.single .clanak-info img {
    width: 47px;
    height: 47px;
    border: 3px solid transparent;
    outline: 2px solid #ffffff66;
    margin-right: 10px;
    object-fit: cover;
}

.single .clanak-info h4 {
    color: white;
    line-height: 47px;
}

.single .clanakmeta {
    opacity: 0.8;
    font-weight: 200;
    border-left: 1px solid rgba(255, 255, 255, 0.288);
    font-size: 0.9rem;
    text-transform: uppercase;
    font-style: normal;
}

.single .clanakmeta i {
    margin-right: 4px;
}

.single .metainfo .nadnaslov {
    text-transform: uppercase;
    font-size: 1rem;
    border-bottom: 3px solid #e5e5e56b;
    display: inline-block;
    font-family: "Roboto", sans-serif;
    font-weight: 200;
}

.single .nema-slike {
    height: initial;
    background: #89b313;
    background-image: url('/include/head.jpg');
    background-size: initial;
}

.single .nema-slike .metainfo {
    position: static;
}

.single .nema-slike:before {
    display: none;
}

.single .nema-slike {
    text-shadow: 1px 1px 0px black;
}

.single .nema-slike .metainfo h2,
.single .nema-slike .metainfo h3 a,
.single .nema-slike .metainfo .clanak-info a,
.single .nema-slike .metainfo h2,
.single .nema-slike .metainfo h3 a,
.single .nema-slike .metainfo .clanak-info h4 {
    color: white;
}

.single .nema-slike h2.naslov {
    margin-top: 20px !important;
}

.single .nema-slike {
    border-radius: 0;
}

.single .nema-slike .clanakmeta {
    border: 0;
}

.borderkutija {
    border: 1px solid #4e4e4e;
    border-radius: 7px;
}


.vdesno h3 {
    font-size: 1.3rem;
    margin-bottom: 20px;
}

.vdesno .tagovi ul {
    margin: 0;
    padding: 0;
}

.vdesno .tagovi ul li a {
    padding: 5px 15px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
    word-break: keep-all;
    border-radius: 7px;
    background: #9ab13a;
    margin-right: 5px;
    color: #000000;
    display: inline-block;
    font-size: 0.9rem;
}

.vdesno .tagovi ul li a:hover {
    background: #C1FF00;
    color: black;
}

.vdesno .tagovi ul li {
    display: inline-block;
}

/* komentari */
#lista_komentara {
    padding: 0;
}

.list-group-item {
    background-color: #171923;
    border-color: #535353;
    color: white;
}

.komentari ol li {
    border-left: 1px solid #555555;
    padding-left: 15px;
    list-style-type: none;
    padding-top: 5px;
    margin-bottom: 20px;
}

.komentari ol li.depth-1 {
    border: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #5a5a5a;
    clear: both;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.komentari ol li .comment-author a cite {
    font-size: 0.9rem;
    font-style: normal;
    color: #ffffff;
    font-weight: 500;
    letter-spacing: -0.5px;
}

.commentmetacontainer a {
    color: #f7f7f7;
}

.commentmetacontainer {
    margin: 0px 0px 5px 0px;
    padding: 5px;
    display: inline-block;
    font-size: 0.7rem;
    border-radius: 7px;
    line-height: 1.3rem;
    opacity: 0.8;
}



.komentari .reply a.btn {
    color: #9a9a9a;
    padding: 0px;
    border: 0;
    line-height: normal;
    margin: 0px;
}


.comment-reply-link i:after {
    content: "Replika";
    margin-left: 5px;
    font-size: 0.7rem;
    text-transform: uppercase;
    line-height: 1rem;
    vertical-align: text-top;
    font-style: normal;
}

.pododgovor {
    width: 90%;
    background: #212531;
    border-radius: 10px;
    padding: 20px;
    margin: 10px;
}

a.comment-reply-link.btn.botun-primary.px-1 {
    box-shadow: none;
}

.comment-respond #respond-zatvori {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 1rem;
    cursor: pointer;
    padding: 10px;
}

.comment blockquote {
    border-left: 3px solid #7ba300;
    font-style: italic;
    color: #555;
    margin: 10px 0;
    background-color: #f9f9f9;
    padding: 10px 15px;
}

.comment-body .novinarBedz,
.comment-body .adminBedz {
    font-size: 0.7rem;
    letter-spacing: 0;
}

.comment-body .novinarBedz i,
.comment-body .adminBedz i {
    font-size: 0.9rem;
}

.cld-like-dislike-wrap div {
    display: inline-block;
    font-size: 13px !important;
    font-weight: bold;
}

.cld-like-dislike-wrap a {
    color: #111;
}

.cld-like-wrap,
.cld-like-wrap a {
    color: rgb(0, 218, 0);
}

.cld-dislike-wrap,
.cld-dislike-wrap a {
    color: #e76759;
}

.cld-common-wrap {
    font-size: 13px;
    cursor: pointer;
}

.cld-common-wrap a:hover {
    color: inherit;
    opacity: 0.8;
}

.cld-count-wrap {
    cursor: default;
}

.cld-common-wrap i {
    font-size: 0.9rem;
}

.cld-common-wrap span {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
}


.cld-like-dislike-wrap .skor {
    display: none;
    margin-right: 10px;
    font-size: 1rem;
    font-weight: 500;
    vertical-align: middle;
}

.pozitivanSkor {
    color: green;
}

.negativanSkor {
    color: red;
}

.neutralanSkor {
    color: black;
}

.btn.zaModal {
    color: #757575;
}

.reply {
    align-content: center;
}

.komentari .modal ol li {
    border: 0;
    padding: 0;
    list-style-type: auto;
    margin: 0;
    font-size: 0.9rem;
}

.disabled {
    pointer-events: none;
}

.komentari ol li blockquote br:first-child {
    display: none;
}

/* komentari sprite */

.spritespan {
    border-left: none;
    color: rgb(49, 49, 49);
    vertical-align: middle;
    width: 23px;
    display: inline-block;
    height: 23px;
    overflow: hidden;
    cursor: default;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 21px;
}

.spritespan:hover {
    width: 100%;
    padding: 0px 7px 0px 0px;
}

.sprite-container {
    display: inline-block;
}

.vijest .tekst p {
    line-height: 1.8rem;
}

.vijest .tekst p a {
    color: #C1FF00;
    text-decoration: none;
    border-bottom: 3px solid #C1FF00;
}

.vijest .tekst p a:hover {
    color: black;
}

.vijest .tekst blockquote,
.tekstovi .sadrzaj blockquote,
.inbox blockquote {
    border-left: 3px solid #7ba300;
    padding: 0px 20px;
    margin: 20px;
    font-style: italic;
}

.vijest .tekst {
    overflow: hidden;
}

.vijest .tekst img {
    max-width: 100%;
    height: auto;
}

/* novo */


.novikomentari,
.novonayt,
.top10kutija {
    background: #212531;
    border-radius: 7px;
}

.separator {
    display: flex;
    align-items: center;
    text-align: left;
}

.separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #474747;
    padding-top: 8px;
}

.novo .separator span {
    margin-left: 20px;
    margin-right: 10px;
}

.top10kutija .separator span {
    margin-right: 0px;
}

.top10kutija .separator b {
    margin-right: 10px;
    margin-left: 10px;
}

.novikomentari {
    background: #212531;
    border-radius: 7px;
}

.novo .separator i {
    color: white;
    background: #212531;
}

.novo .separator span,
.novo .separator b {
    color: white;
    font-size: 1.6rem;
    font-weight: 300;
}

.novo .separator a:hover {
    border-color: white;
}

.novo ul {
    margin: 0;
    padding: 0;
    margin-top: 20px;
    color: white;
    list-style: none;
}

.novo ul li {
    background: #343948;
    border-radius: 7px;
    margin: 15px 0px;
    padding: 5px 10px;
    font-size: 1rem;
    font-weight: 400;
    position: relative;
    transition: background-color 0.2s ease;
    height: 33px;
    overflow: hidden;
    word-break: break-all;
}

.novo ul li:hover {
    background: #222222;
}

.novo ul li a {
    color: white;
    opacity: 0.7;
    font-size: 0.9rem;
}

.novo ul li span {
    font-weight: 400;
    margin-right: 5px;
}

.novo ul li a.vise {
    float: right;
    line-height: 32px;
    font-size: 0.8rem;
}

.bddw-author img {
    border-radius: 5px;
    margin-right: 7px;
    object-fit: cover;
    float: left;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 70px;
}

.tekucice h2 a,
.novo h2 a {
    display: inline;
    position: absolute;
    right: 0px;
    padding: 10px 20px;
    text-transform: initial;
    transition: all 0.2s ease;
    border-radius: 7px;
    border: 1px solid #c1c1c1;
    background: #212530;
    font-family: "Roboto", sans-serif;
    color: #212531;
    font-weight: 400;
    font-size: 1rem;
    box-shadow: -20px 0px 0px 10px #212531;
    background: #212531;
    color: #ffffff;
    border-color: #777777;
}

.novo ul li.bddw-author {
    height: auto;
}

.bddw-author span.autorforum {
    display: block;
    font-size: 0.7rem;
    opacity: 0.7;
}

.bddw-author a.stretched-link {
    font-size: 0.9rem;
    opacity: 0.9;
    word-break: break-word;
}

.desnoMali {
    margin-left: 80px;
}

.crneKutije .separator i {
    font-size: 1.5rem;
    line-height: 2.2rem;
}

.crneKutije .tekucice h2 a,
.crneKutije .novo h2 a {
    padding: 7px 16px;
    font-size: 0.8rem;
}

.crneKutije .novo .separator span,
.crneKutije .novo .separator b {
    font-size: 1.4rem;
}

.crneKutije .separator::after {
    padding-top: 1px;
}

.desnoIzbornik button.btn {
    font-size: 1rem;
    padding: 0;
}

#playerCarousel ul {
    width: 100%;
}

#playerCarousel ul li a {
    display: flex;
    justify-content: space-between;
}

.desnoIzbornik {
    display: inline;
    position: absolute;
    right: 0px;
    text-transform: initial;
    transition: all 0.2s ease;
    border-radius: 7px;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    box-shadow: -20px 0px 0px 10px #212531;
    background: #212531;
    top: 0px;
}

.desnoIzbornik .btn:focus {
    outline: none;
    box-shadow: none;
}

.desnoIzbornik .btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.tablicaTop10 tr:hover {
    background: #2c2c2c;
    cursor: pointer;
}

.tablicaTop10 a {
    color: white;
}

.tablicaTop10 a:hover {
    border-bottom: 1px solid #ccc;
}

.tablicaTop10 tr td {
    color: #ffffff;
    font-size: 0.9rem;
    padding: 7px 0;
    font-family: "Klavika", sans-serif;
    font-weight: 300;
    border-color: #3e3c3c;
}

td.tPozicija span {
    background: #e0e0e0;
    border-radius: 50%;
    color: black;
    font-size: 0.7rem;
    display: block;
    line-height: 21px;
    width: 20px;
    height: 20px;
    font-weight: bold;
    text-align: center;
}

.epoletaselect {
    padding-left: 38px;
    font-size: 0.9rem;
}

/* footer */

.tribinaFoot {
    background: #171923;
    border-radius: 7px;
}

.tribinaFoot h3 {
    font-size: 3rem;
}

.tribinaFoot p {
    font-weight: 400;
    font-size: 1.1rem;
}

.tribinaFoot .btn {
    font-size: 1.2rem;
    transition: all 0.2s ease;
    border-radius: 7px;
    border: 1px solid #212531;
    font-family: "Roboto", sans-serif;
    color: #212531;
    font-weight: 400;
    line-height: initial;
}

.tribinaFoot .btn:hover {
    border-color: #000;
    color: #666;
    background-color: #f7f7f7;
}

.tribinaFoot h4 {
    font-weight: bold;
    font-size: 1.4rem;
    min-height: 1.8rem;
    font-style: normal;
}

.tribinaFoot ul {
    margin: 0;
    padding: 0;
    font-size: 1.3rem;
    margin-top: 10px;
    padding-left: 2px;
}

.tribinaFoot ul li {
    margin: 10px 0px;
    font-size: 1.1rem;
    list-style: none;
}

.tribinaFoot p {
    margin-top: 10px;
}

.tribinaFoot ul li i {
    margin-right: 10px;
    color: #ffffff;
}

.tribinaFoot ul li a {
    font-size: 1rem;
}

.tribinaFoot svg {
    margin-right: 10px;
    filter: invert(1);
}

.tribinaFoot p.tribinaPodnaslov {
    font-size: 0.9rem;
    margin-top: 10px;
    font-weight: 300;
}

/* podcasti */


/* Shine */
.podcastImg .column {
    margin: 15px 15px;
    padding: 0;
}

.podcastImg {
    row-gap: 20px;
}

.podcastImg img {
    width: 300px;
    height: 169px;
    object-fit: cover;
}

.podcastImg .column:last-child {
    padding-bottom: 60px;
}


.podcastImg .column a:first-child {
    margin-left: 0;
}

.podcastImg span {
    text-align: center;
    font-family: "Klavika", sans-serif;
    margin: 10px 0px;
    display: block;
    font-weight: normal;
    font-size: 1rem;
}

.podcastImg figure {
    overflow: hidden;
    position: relative;
    border-radius: 15px;
}

.podcastImg figure::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}

.podcastImg figure:hover::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
}

@-webkit-keyframes shine {
    100% {
        left: 125%;
    }
}

@keyframes shine {
    100% {
        left: 125%;
    }
}


/* data */
.klub {
    position: relative;
    display: flex;
    flex-shrink: 1;
}

.klub-info {
    padding: 10px 20px;
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
}

.klub-name {
    font-size: 1.3rem;
    font-weight: 700;
}

.klub-name span {
    display: block;
    font-weight: 300;
}

.klub-liga {
    font-size: 1.125rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.klub-stats {
    display: flex;
    justify-content: space-between;
    column-gap: 10px;
    text-align: center;
    margin: 0;
}

.klub-stat {
    font-size: 0.75rem;
    text-transform: uppercase;
}

.klub-stat-number {
    margin-top: 0.375rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.bazaPodataka a .klub {
    color: white;
    transition: all 0.2s ease;
    background-color: #212530 !important;
    border-bottom: 1px dashed #646464;
}

.bazaPodataka a:hover .klub {
    color: #C1FF00;
}

.bazaPodataka td.rating,
.bazaPodataka td.tvojaOcjenaTd {
    font-weight: bold;
    font-family: "Klavika", sans-serif;
    font-size: 1rem;
}

table tr td.pozicija span {
    background: #212530;
    padding: 7px;
    border-radius: 50%;
    font-size: 0.8rem;
    border: 1px solid #a0a1a0;
    font-weight: bold;
}

table.igraciOcjene {
    font-size: 0.9rem
}

.igraciOcjene thead th {
    font-size: 0.8rem;
    font-family: "Klavika", sans-serif;
    font-weight: 300;
}

.igraciOcjene td:first-child {
    text-wrap: nowrap;
}

table.igraciOcjene tbody tr td.ime {
    font-family: "klavika", sans-serif;
    font-size: 1rem;
    font-weight: 300;
}

table.sort tr th {
    cursor: ns-resize;
}

.bazaPodataka .modal .modal-header h1 span {
    background: #212530;
    padding: 7px;
    border-radius: 50%;
    font-size: 0.8rem;
    border: 1px solid #a0a1a0;
    font-weight: bold;
    margin-right: 5px;
    vertical-align: middle;
}

.popularnost,
.kontroverzniFaktor,
.usporedbaEkipa {
    max-height: 65px;
}

.tvojaOcjena {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', Arial;
    background: #212530;
}

.tvojaOcjena .output {
    position: relative;
    width: 40px;
    padding-top: 10px;
    height: 40px;
    margin-left: 50%;
    font-size: 0.9rem;
    line-height: 1.2rem;
    color: #C1FF00;
    text-align: center;
    background: #212530;
    border: 2px solid #C1FF00;
    border-radius: 50% 50% 50% 0%;
    -webkit-transition: opacity 0.3s ease-in-out 0s;
    transition: opacity 0.3s ease-in-out 0s;
    font-weight: 600;
}

.tvojaOcjena input {
    --active: #C1FF00;
    touch-action: none;
    -webkit-appearance: none;
    appearance: none;
    user-select: none;
    width: 320px;
    height: 2px;
    border-radius: 1px;
    background: #cdd9ed;
    position: relative;
}

.tvojaOcjena input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    background: #f5f9ff;
    border: 2px solid #7d972d;
    cursor: pointer;
    border-radius: 18px;
    transition: 0.5s ease;
}

.tvojaOcjena input::-webkit-slider-thumb:focus,
.tvojaOcjena input::-webkit-slider-thumb:active {
    padding: 8px;
}

.tvojaOcjena input:focus,
.tvojaOcjena input:active {
    outline: none;
}

.pozitivno {
    color: green;
}

.negativno {
    color: red;
}

.spremiOcjenuResult {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f5ffea;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    font-family: "Klavika", sans-serif;
    font-weight: 300;
}

.checkmark {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: green;
    stroke-miterlimit: 10;
    margin: 10% auto;
    box-shadow: inset 0px 0px 0px #7ac142;
    animation: fill .1s ease-in-out .1s forwards, scale .1s ease-in-out .3s both;
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: green;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {

    0%,
    100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #fff;
    }
}

.bazaPodataka .klubLogo {
    width: 34px;
    height: auto;
    vertical-align: middle;
    margin-right: 10px;
    object-fit: contain;
}

.bazaPodataka .ligaPopis .klubLogo {
    align-self: baseline;
}

.bazaPodataka table.igraciOcjene td {
    vertical-align: middle;
}

/* scoreboard */

.tekst .rezultat-div {
    padding-bottom: 20px;
    border-bottom: 1px solid #ebebeb;
    margin-bottom: 25px;
    margin-top: 20px;
    font-size: 0.9rem;
}

.tekst .rezultat-div .detalji-container.horizontal .left-part,
.tekst .rezultat-div .detalji-container.horizontal .right-part {
    flex: 1
}

.tekst .rezultat-div .detalji-container.horizontal .left-part {
    border-right: 1px solid #ebebeb;
    padding-right: 30px;
    margin-right: 30px;
    text-align: right
}

.tekst .rezultat-div .detalji-container.horizontal .brojcani-rezultat-div {
    font-size: 80px;
    line-height: 100px;
    font-family: "Klavika", serif;
    font-weight: 700
}

.tekst .rezultat-div .detalji-container.horizontal .brojcani-rezultat-div .ekipa-rezultat {
    justify-content: space-between
}

.tekst .rezultat-div .detalji-container.horizontal .brojcani-rezultat-div .ekipa-rezultat .ekipa-slika {
    height: 100px;
    text-align: center
}

.tekst .rezultat-div .detalji-container.horizontal .brojcani-rezultat-div .ekipa-rezultat .ekipa-slika img {
    vertical-align: unset
}

.tekst .rezultat-div .detalji-container.horizontal .imena-ekipa {
    font-size: 35px;
    line-height: 39px;
    text-transform: uppercase;
    font-family: "Klavika", serif;
    font-weight: 700
}

.tekst .rezultat-div .detalji-container.horizontal .imena-ekipa .ime-ekipe {
    padding-top: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.tekst .rezultat-div .detalji-container.horizontal .imena-ekipa .ime-ekipe div {
    overflow: hidden;
}

.ekipa-rezultat-details p {
    margin: 0;
}

.tekst .rezultat-div .detalji-container.horizontal .ekipa-rezultat-detalji-container .ekipa-rezultat-details {
    padding-top: 20px
}

.tekst .rezultat-div .detalji-container.horizontal .ekipa-rezultat-detalji-container .ekipa-rezultat-details p:last-child {
    margin-bottom: 0
}

.tekst .rezultat-div .detalji-container.vertical table tr td {
    padding: 15px 0
}

.tekst .rezultat-div .detalji-container.vertical table tr:not(:last-child) {
    border-bottom: 1px solid #ebebeb
}

.tekst .rezultat-div .detalji-container.vertical table tr:first-child td {
    padding-top: 0
}

.tekst .rezultat-div .detalji-container.vertical table tr:last-child td {
    padding-bottom: 0
}

.tekst .rezultat-div .detalji-container.vertical table .ime-ekipe-holder {
    max-width: 580px;
    font-size: 35px;
    line-height: 39px;
    text-transform: uppercase;
    font-family: "Klavika", serif;
    font-weight: 700;
    align-items: center;
    padding-right: 40px
}

.tekst .rezultat-div .detalji-container.vertical table .ime-ekipe-holder .ekipa-slika {
    width: 60px;
    height: 60px;
    object-fit: contain;
    text-align: center;
    margin-right: 20px
}

.tekst .rezultat-div .detalji-container.vertical table .ekipa-rezultat-holder .ekipa-rezultat {
    text-transform: uppercase;
    font-size: 30px;
    line-height: 60px;
    text-align: center;
    padding: 0 20px
}

.tekst .rezultat-div .detalji-container.vertical table .ekipa-rezultat-holder .ekipa-rezultat.main-score {
    font-size: 35px;
    font-family: "Klavika", serif;
    font-weight: 700;
    border-left: 1px solid #ebebeb;
    border-right: 1px solid #ebebeb;
    padding: 0 25px;
    margin-right: 20px
}

.tekst .rezultat-div .detalji-container.vertical table .ekipa-rezultat-holder .ekipa-rezultat.key-score {
    font-weight: 700
}

.tekst .rezultat-div .ekipa-slika img {
    max-width: 110px;
}

.bazaPodataka span.maliSpan,
.vijest span.maliSpan {
    font-size: 0.9rem;
    font-weight: 300;
}

.bazaPodataka i.bi-link-45deg {
    font-size: 1.2rem;
}

.bazaPodataka .igracKartica,
.vijest .igracKartica {
    background: #313131;
    padding: 20px;
    border-radius: 10px;
    margin: 10px;
    outline: 1px solid #535353;
    box-shadow: 0 14px 28px rgb(0 0 0 / 5%), 0 10px 10px rgba(0, 0, 0, 0.03);
}

.vijest .klubLogo {
    width: 64px;
    height: auto;
    object-fit: contain;
}

.vijest .zbrojiRedove {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vijest .igracKartica i,
.vijest .igracKartica em,
.malaOcjena {
    background: #7ba300;
    color: white;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 1rem;
    font-style: normal;
    margin-left: 10px;
    vertical-align: middle;
}

.malaOcjena {
    background-color: #e9e9e9;
}

.container.container-xxl .onama hr {
    margin: 40px 0px;
    background-color: #6d6d6d;
}

.otribini .obrezanaSlika {
    width: 174px;
    height: 100px;
    object-fit: cover;
}

.ostaliPodcasteri .card-text {
    font-size: 0.9rem;
    line-height: normal;
}

.korisnici table td {
    font-size: 0.9rem;
}

.table {
    --bs-table-bg: #343948;
    --bs-table-striped-bg: #2d3241;
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: #373b3e;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #323539;
    --bs-table-hover-color: #fff;
    color: #fff;
    border-color: #373b3e;
}

.korisnici .table-responsive td:first-child {
    white-space: nowrap;
}

.korisnici .table-responsive th {
    white-space: nowrap;
}

.tvojaOcjenaTd {
    cursor: pointer;
}

.tvojaOcjenaTd .inlineOcjena {
    background: #212530;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 14px 28px rgb(0 0 0 / 5%), 0 10px 10px rgba(0, 0, 0, 0.03);
    border: 1px solid #ccc;
    overflow: hidden;
    top: -10px;
    right: -10px;
}

.tvojaOcjenaTd .inlineOcjena .spremiOcjenuResult {
    font-size: 0.9rem !important;
}

.tvojaOcjenaTd .inlineOcjena .output {
    margin: 0 !important;
}

tr.row-item.highlighted {
    background-color: #171a17;
}

.slider.inlineOcjena {
    z-index: 1;
}

.opisnaOcjena {
    text-align: center;
    font-size: 0.8rem;
    font-family: "Klavika";
    font-weight: 300;
    font-style: italic;
    margin: 10px 0px;
}

/* moja aktivnost */

.mojaAktivnost .komentari ol li.depth-1 {
    background: #212530;
    padding: 10px 15px;
    border: 1px solid #555555;
    border-radius: 5px;
}

.mojaAktivnost ol li .ispod-komentara {
    margin-top: 10px;
    border-top: 1px solid #e1e1e1;
    padding: 10px 5px 0px 5px;
}

.mojaAktivnost ol li .ispod-komentara i,
.mojaAktivnost ol li .ispod-komentara span {
    color: #7d7a7a;
}

.mojaAktivnost ol li .komentar-tekst {
    padding-top: 5px;
}

.userinfo .card {
    background: #3d4750;
}

.mojaAktivnost .userinfo ul li i {
    font-size: 1.7rem;
    color: #607D8B;
    line-height: 2.1rem;
    vertical-align: middle;
}

.paginacijaFront {
    margin-bottom: 10px;
    border-bottom: 1px solid #656562;
    padding-bottom: 10px;
    font-family: "klavika", sans-serif;
    font-weight: 200;
    font-size: 0.9rem;
}

.paginacijaFront .btn {
    font-size: 0.9rem;
    font-weight: 300;
    font-family: "Klavika";
    line-height: 1rem;
    color: white;
}

.paginacijaFront .ukupanBroj {
    margin: 0px 10px;
    font-size: 0.8rem;
    background: #424242;
    padding: 3px 10px;
    border-radius: 3px;
    color: white;
}

.opacity-50 {
    opacity: 0.3;
}

.novinarBedz,
.adminBedz {
    font-size: 0.9rem;
    vertical-align: middle;
    line-height: 2rem;
    margin-left: 10px;
    text-transform: uppercase;
    font-weight: 300;
}

.novinarBedz i {
    color: #00ab26;
}

.adminBedz i {
    color: #008eff;
}

.mojaAktivnost .userinfo ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.mojaAktivnost .userinfo ul li {
    padding: 6px 0px;
    border-bottom: none;
    padding-left: 5px;
    font-size: 1rem;
    margin-bottom: 15px;
    font-weight: 400;
}


.mojaAktivnost .userinfo ul li span {
    font-weight: 300;
    position: static;
    display: block;
    bottom: 0px;
    left: 42px;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: silver;
}

.mojaAktivnost ol li .uTemi {
    font-size: 0.9rem;
    font-weight: 400;
}

.mojaAktivnost h2 span.badge,
.coinsStatus {
    font-size: 0.8rem;
    font-weight: 400;
    vertical-align: middle;
    background: #04d058;
    font-family: "Klavika", sans-serif;
}

.ocjeneModal .imeVrijeme span {
    font-size: 0.8rem;
    display: block;
    opacity: 0.8;
    color: white;
}

.ocjeneModal .imeVrijeme span::first-letter {
    text-transform: capitalize;
}

.ocjeneModal .igracKlub span {
    display: inline;
    border-left: 1px solid #ccc;
    padding-left: 5px;
    opacity: 1;
}

.ocjeneModal .igracKlub {
    font-family: "Klavika", sans-serif;
    font-weight: 300;
}



.ocjeneModal .badge {
    width: 30px;
    height: 30px;
    line-height: 30px;
    padding: 0;
    border-radius: 5px !important;
}

.ocjena-10 {
    color: #00c9bc;
}

.ocjena-8,
.ocjena-9 {
    color: #00a372;
}

.ocjena-5,
.ocjena-6,
.ocjena-7 {
    color: #0bc900;
}

.ocjena-4 {
    color: #507800;
}

.ocjena-3 {
    color: #6e7800;
}

.ocjena-2 {
    color: #8d6737;
}

.ocjena-1 {
    color: #ff2500;
}

.ocjeneModal .badge.ocjena-8,
.ocjeneModal .badge.ocjena-9 {
    background: #00a372 !important;
    color: white;
}

.ocjeneModal .badge.ocjena-10 {
    background: #00c9bc !important;
    color: white;
}

.ocjeneModal .badge.ocjena-5,
.ocjeneModal .badge.ocjena-6,
.ocjeneModal .badge.ocjena-7 {
    background: #0bc900 !important;
    color: white;
}

.ocjeneModal .badge.ocjena-3,
.ocjeneModal .badge.ocjena-4 {
    background: #737e00 !important;
    color: white;
}

.ocjeneModal .badge.ocjena-2 {
    background: #8d6737 !important;
    color: white;
}

.ocjeneModal .badge.ocjena-1 {
    background: #ff2500 !important;
    color: white;
}

/* kontakt */

.input-group {
    border: 1px solid #545151 !important;
    outline: none;
    box-shadow: none;
}

.kontakt .form-control,
.kontakt .input-group-text {
    border: 0;
    font-size: 0.9rem;
    padding: 10px 15px;
    background: #212530;
    color: white;
}

.input-group input::placeholder {
    color: white;
    opacity: 0.6;
}


.kontakt .input-group-text {
    background: #2b2b2b;
    border-radius: 0;
}

.kontakt button {
    font-weight: normal !important;
    font-size: 0.9rem;
    text-transform: uppercase;
}

/* autor stranica */
.autorStranica ul li a span {
    display: block;
    font-size: 0.8rem;
}

.autor0 ul li a span {
    position: absolute;
    left: -100px;
    top: 38%;
    font-family: "Klavika", sans-serif;
    text-align: right;
    width: 100px;
}

.autor0 .pomakniDesno {
    margin-left: 100px;
    position: relative;
}

.autorStranica ul li a {
    font-size: 0.9rem;
}

.autorStranica ul li .badge {
    background: #434242 !important;
    font-family: "Klavika", sans-serif;
    font-weight: 300;
    font-size: 0.9rem;
    color: #ffffff;
}

.autorStranica ul.list-group li img {
    width: 80px;
    height: 40px;
    object-fit: cover;
    float: left;
    margin-right: 10px;
    border-radius: 3px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.autorStranica ul.list-group li:hover a img {
    opacity: 1;
}

/* anketa */
.progress-bar {
    width: 0;
    animation: progress 1.5s ease-in-out forwards;
    overflow: visible;
    background-color: #e4382b;
}

.progress-bar .title {
    opacity: 0;
    animation: show 0.35s forwards ease-in-out 0.5s;
}

@keyframes progress {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes show {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.anketaDisplay {
    margin: 30px 0px;
    font-family: "Klavika", sans-serif;
    font-weight: 300;
    font-size: 1rem;
}


.anketaDisplay .list-group li {
    background: #f9f9f9;
    border-color: #dddddd;
    padding: 10px 20px;
}

.korisnici table.sort thead th {
    font-size: 0.8rem;
    font-family: "Klavika", sans-serif;
    font-weight: 300;
}

.bazaPodataka .card .card-footer {
    font-family: "Klavika", sans-serif;
    font-weight: 300;
    background-color: #f1f4f5;
}

/* carousel s rezultatima */
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {

    .carousel-inner .carousel-item-end.active,
    .carousel-inner .carousel-item-next {
        transform: translateX(25%);
    }

    .carousel-inner .carousel-item-start.active,
    .carousel-inner .carousel-item-prev {
        transform: translateX(-25%);
    }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
    transform: translateX(0);
}


.rezultatiBoard {
    font-family: "Klavika", sans-serif;
    font-weight: 300;
}

.rezultatiBoard small {
    font-size: 0.8rem;
}

.rezultatiBoard {
    background: #212530;
}

.rezultatiBoard .card {
    background: #212531;
    border: none;
    border-right: 1px solid #414141;
    border-left: 1px solid #414141;
    border-radius: 0;
    margin-left: -1px;
}

.rezultatiBoard .card ul li {
    display: flex;
    font-size: 0.8rem;
    line-height: 1.4rem;
}

.rezultatiBoard .card ul {
    margin: 0;
    padding: 0;
}

.rezultatiBoard .card h5 {
    font-size: 0.9rem;
}

.rezultatiBoard .card .card-footer {
    padding: 0;
    margin: 0;
    font-size: 0.8rem;
    color: white;
    background: #212531;
    border: 0;
    text-align: center;
}

.rezultatiBoard .card .card-body {
    background: #212531;
    color: white;
}

.rezultatiBoard .card-body {
    padding: 10px;
}

.rezultatiBoard .card {
    height: 100%;
}

.rezultatiBoard .card.kartica-0 {
    margin-left: 0px;
}

.rezultatiBoard .nadolazeca .card-body,
.rezultatiBoard .nadolazeca .card-footer {
    background: #212531;
    color: white;
}


li.pobjednik {
    font-weight: bold;
}

li.pobjednik span {
    position: relative;
}

li.pobjednik span:after {
    content: "◀";
    position: absolute;
    left: 11px;
}

.rezultatiBoard a {
    color: white;
}

.rezultatiBoard a .card-body,
.rezultatiBoard a .card-footer {
    transition: all 0.2s ease;
}

.rezultatiBoard a:hover .card-body,
.rezultatiBoard a:hover .card-footer {
    background: #353535;
}

.rezultatiBoard .active .col-4:first-child {
    margin-left: 0px !important;
    padding-left: 1px;
}



@media (min-width: 991px) {
    #rezultatiRasporedModal .list-group {
        display: grid;
        grid-gap: 1px;
        padding-left: 0;
        margin-bottom: 0;
        border-radius: .25rem;
        grid-template:
            "x x x x";
    }
}

.utakmica ul li .nav-link {
    font-size: 0.8rem;
    font-family: "Klavika", sans-serif;
    color: #0ac746;
    font-weight: 300;
}

.utakmica ul li .nav-link img {
    max-width: 12px;
}

.utakmica .tabliceUtakmica {
    font-family: "Klavika", sans-serif;
}

.value {
    text-align: center;
    font-weight: bold;
    font-size: 4em;
    display: block;
}

.ocjenaUtakmice input[type="range"] {
    display: block;
    -webkit-appearance: none;
    background-color: #7c7c7c;
    width: 300px;
    height: 12px;
    border-radius: 5px;
    margin: 0 auto;
    outline: 0;
}

@keyframes bounce {
    0% {
        transform: translate(0px);
    }

    75% {
        margin-bottom: 10px;
    }

    100% {
        margin: 0;
        transform: translate(0px);
    }
}

.ocjenaUtakmice input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #C1FF00;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid white;
    cursor: pointer;
    transition: .3s ease-in-out;
    z-index: 999;
}



.range-slider::-moz-range-thumb {
    z-index: 999;
    /* Ensure the thumb is in front of the before element */
}

.ocjenaUtakmice input[type="range"]::-webkit-slider-thumb:hover {
    background-color: white;
    border: 2px solid #C1FF00;
}

.ocjenaUtakmice input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.6);
}

.ocjenaUtakmice {
    background: #212121;
    border-radius: 10px;
    font-family: "Klavika", sans-serif;
}

/* tekstovi */
.tekstovi .tekstmeta {
    border-top: 1px solid #424242;
    border-bottom: 1px solid #424242;
    padding: 5px 10px;
    align-items: center;
}

.tekstovi .tekstmeta h4 {
    padding: 0;
    margin: 0;
    line-height: 2rem;
    font-size: 0.9rem;
    font-style: normal;
    text-transform: initial;
    border-right: 1px solid transparent;
    padding-right: 20px;
}

.tekstovi .form-control {
    background: #232f3d;
    color: white;
    border-color: #171f28;
}

.tekst .sadrzaj table tr,
.tekst .sadrzaj table td {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
    font-size: 0.9rem;
}

.tekst .sadrzaj table {
    margin: 1rem 0px;
}

.tekucice h2 a {
    display: inline;
    position: absolute;
    right: 0px;
    padding: 5px 20px;
    text-transform: initial;
    transition: all 0.2s ease;
    border-radius: 7px;
    border: 1px solid #c1c1c1;
    background: white;
    font-family: "Roboto", sans-serif;
    color: #212531;
    font-weight: 400;
    font-size: 0.9rem;
}

.tekucice .separator i {
    width: 42px;
    height: 42px;
    text-align: center;
    line-height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
}

.tekucice h2 span {
    font-size: 1.7rem;
    margin-left: 10px;
    margin-right: 30px;
    font-weight: 500;
}

.tekucica .meta img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.tekucica .card-text {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.5rem;
    color: #494949;
    border-top: 1px solid #dddddd;
    padding-top: 15px;
}

.tekucica .card-body p {
    font-size: 1rem;
    font-weight: 400;
}

.tekucica .card-body p a {
    text-decoration: underline;
}

.tekucice h5 {
    font-size: 1.1rem;
}

.tekucica i {
    margin-right: 6px;
}


.tekucica .drugired a {
    white-space: nowrap;
    color: #f1f1f1;
}

.tekucica .drugired p {
    margin: 0;
}

.tekucice .card {
    border-radius: 7px;
    background-color: #212531;
}

.tekucica h3 {
    font-size: 1.1rem;
    font-weight: 400;
}

.tekucica .drugired,
.tekucica .drugired p,
.tekucica .drugired a {
    font-family: "klavika", sans-serif;
    font-weight: 300;
    font-size: 0.9rem;
}

.tekucica-featured::before {
    content: "\F589";
    font-family: "Bootstrap-icons";
    position: absolute;
    right: 15px;
    top: 15px;
    color: #ffffff;
    background: #ffffff00;
    padding: 0px 5px;
}


.tekucica-featured {
    position: relative;
    max-height: 410px;
    overflow: hidden;
}

.reakcije {
    font-family: "Klavika", sans-serif;
    font-weight: 300;
}

.reakcije button span {
    position: absolute;
    top: -46px;
    left: 50%;
    width: auto;
    color: white;
    font-size: 0.8rem;
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    text-align: center;
    translate: -50% 0;
}

.reakcije button span:before {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 50%;
    translate: -50% 0;
    width: 10px;
    height: 10px;
    rotate: 45deg;
    z-index: -1;
    background-color: inherit;
}

.reakcije button.upvote span {
    background-color: rgb(25 135 84);
}

.reakcije button.downvote span {
    background-color: #dc3545;
}

.reakcije button.respekt span {
    background-color: #6c757d;
}

.reakcijeKorisnici {
    font-size: 0.8rem;
}

.tab-content .komentari {
    font-family: "Roboto";
}

.utakmica ul li a#komentariTab span {
    font-size: 0.7rem;
    background: #607D8B;
    border-radius: 4px;
    color: white;
    letter-spacing: 1px;
    padding: 2px 6px;
    font-weight: 400;
}

.item-TR td {
    border-bottom: 2px solid #7b7b7b;
    border-top: 2px solid #7b7b7b;
}

tr.item-TR td.pozicija span {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    font-weight: 400;
}

.maliLogo {
    max-width: 32px;
}

.highlighted {
    background-color: #213321;
}

.highlighted .text-dark {
    color: white !important;
}

.list-group-item-action:focus,
.list-group-item-action:hover {
    background: black;
    color: white;
}

.novo .table.text-light tr a {
    color: white;
}

.novo .table.text-light tr a:hover {
    color: #f1f4f5;
}

.ytcontainer {
    display: flex;
    justify-content: center;
    max-width: 90%;
    margin: 0 auto;
}


.ytcontainer iframe {
    aspect-ratio: 16 / 9;
    width: 100% !important;
}

/* chat box */
span.chatOnline {
    background: #000000;
    display: inline-block;
    text-align: center;
    margin-left: 3px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.7rem;
    line-height: 1.4rem;
    padding: 0px 5px;
    min-width: 25px;
    color: #ffffff;
}

#chat-full {
    background-color: #ffffff;
    box-shadow: -1px 1px 10px 2px rgba(19, 19, 19, 0.5);
    margin: 10px auto !important;
    padding: 20px !important;
    border-radius: 10px;
}

.chat-box {
    padding: 20px;
    border-radius: 10px;
    margin: 10px 0px;
    height: 60vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

.porukaBox.animacija {
    animation: zoom-in-zoom-out 0.5s ease 2 forwards;
}

@keyframes zoom-in-zoom-out {
    0% {
        scale: 100%;
    }

    50% {
        scale: 105%;
    }

    100% {
        scale: 100%;
    }
}

.chat-box .porukaSingle {
    background: #e5e5e5;
    padding: 7px 15px;
    border-radius: 10px;
    color: #111111;
    font-size: 0.9rem;
    max-width: 65%;
    display: inline-block;
    width: initial;
    position: relative;
    margin-top: 2px;
    margin-bottom: 15px;
}

.chat-box .novaPoruka {
    animation: pop 0.2s ease;
}

.chat-box .porukaSingle::after {
    display: block;
    clear: both;
    content: '';
    position: absolute;
    top: -5px;
    left: 21px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent #e5e5e5 transparent;
}

.chat-box .porukaSelf,
.porukaSelf div {
    margin-left: auto;
    margin-right: 0;
    text-align: right;
}

.porukaSingle span.brisi-ikona {
    position: absolute;
    color: rgb(0, 0, 0);
    opacity: 0.3;
    right: -55px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.porukaSingle span.replyTo-ikona {
    position: absolute;
    color: rgb(0, 0, 0);
    opacity: 0.8;
    right: -25px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.porukaSingle span.brisi-ikona:hover {
    opacity: 1;
}

.porukaSelf span.brisi-ikona {
    right: initial;
    left: -55px;
}

.porukaSelf span.replyTo-ikona {
    right: initial;
    left: -25px;
}

.replyToOpis {
    position: absolute;
    background: #4b7bec;
    top: -18px;
    color: white;
    font-size: 0.8rem;
    padding: 3px 10px;
    border-radius: 5px;
    line-height: 1.1rem;
    left: 2px;
}

.replyToOpis #otkaziRepliku {
    padding: 3px 5px;
    margin-left: 10px;
    vertical-align: middle;
    line-height: 1rem;
}

.porukaSingle a blockquote {
    font-size: 0.8rem;
    background: #00000016;
    padding: 10px 15px;
    border-left: 3px solid #6fbf6f;
    margin: 10px 0px;
    overflow: hidden;
    cursor: pointer;
    color: black;
    text-align: left;
}

.porukaSelf .porukaSingle a blockquote {
    color: white;
    background: #ffffff1f;
}

.chat-box .porukaSelf .porukaSingle::after {
    left: initial;
    right: 21px;
    border-color: transparent transparent #4b7bec transparent;
}

.chat-box .porukaSelf .porukaSingle {
    background: #4b7bec;
    color: white;
}

.chat-box .porukaMeta {
    font-family: "Klavika", sans-serif;
    font-weight: 300;
    font-size: 0.8rem;
}

.chat-box .porukaMeta span {
    opacity: 0.5;
    margin-left: 5px;
}

h2 span#connected-users {
    font-size: 0.8rem;
    display: inline-block;
    vertical-align: middle;
    background: #6fbf6f;
    color: white;
    border-radius: 5px;
    padding: 0px 8px;
    font-weight: 300;
    line-height: 1.3rem;
}

.chat-box .porukaMeta span:before,
#connected-users:before {
    content: "\A";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #000000;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

#connected-users:before {
    background: white;
}

#chat-form button {
    font-family: "Klavika", sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 0.8rem;
    padding: 8px 30px;
    display: flex;
}

.dot-flashing {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    animation: dot-flashing 1s infinite linear alternate;
    animation-delay: 0.5s;
    display: inline-block;
    margin-right: 20px;
    margin-left: 20px;
}

.dot-flashing::before,
.dot-flashing::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
}

.dot-flashing::before {
    left: -15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    animation: dot-flashing 1s infinite alternate;
    animation-delay: 0s;
}

.dot-flashing::after {
    left: 15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    animation: dot-flashing 1s infinite alternate;
    animation-delay: 1s;
}

@keyframes dot-flashing {
    0% {
        background-color: #9880ff;
    }

    50%,
    100% {
        background-color: rgba(152, 128, 255, 0.2);
    }
}

@keyframes pop {
    0% {
        transform: scale(0.15);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

#netko-tipka {
    font-family: "klavika", sans-serif;
    font-weight: 300;
    font-size: 0.8rem;
    height: 30px;
    transition: opacity 0.5s ease;
    opacity: 0;
}

.opacity-1 {
    opacity: 1 !important;
}

.chatDesno {
    padding: 20px;
    border-radius: 10px;
    margin: 0px 0px;
    background: #f9f9f9;
}

.chatDesno h4 {
    font-style: normal;
    font-weight: bold;
    border-bottom: 1px dashed #999;
    padding-bottom: 5px;
}

.chatDesno .trenutnoSpojeno {
    padding: 0;
    margin: 0;
    margin-bottom: 2rem;
    background: #6c757d;
    color: white;
    font-family: "Klavika", sans-serif;
    text-align: center;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 300;
}

.chatDesno ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: scroll;
    padding-right: 10px;
    height: 90%;
}

.chatDesno ul li {
    font-family: "Klavika", sans-serif;
    font-size: 0.8rem;
    font-weight: 300;
    text-align: right;
    margin-bottom: 5px;
}

#chat-full .porukaModerator {
    text-align: center;
}

.chat-box .porukaModerator .porukaSingle::after {
    display: none;
}

.chat-box .porukaModerator .porukaSingle {
    background: #663399;
    color: white;
    font-family: 'Klavika';
    font-weight: 300;
    font-size: 0.8rem;
    width: 80%;
    text-align: center;
    margin: 0 auto;
    padding: 6px 0px;
}

#chat-form .dropup button:after {
    display: none;
}

.pinned {
    font-family: "Klavika", sans-serif;
    background: #663399;
    display: inline-block;
    color: white;
    font-weight: 300;
    padding: 5px 20px;
    border-radius: 5px;
    font-size: 0.9rem;
}

#chat-full .dropdown-menu .dropdown-item {
    font-family: "Klavika", sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
}

#chat-full.privatni-chat {
    padding: 20px !important;
    box-shadow: inset 0px 0px 15px 0px #dcd6d6;
    outline: 2px solid #f3f0f0;
    border: 2px solid #fff;
    background: #f9f9f9;
}

.privatni-chat .pinned {
    display: none;
}

#zatvoriPrivatnuSobu {
    display: none;
}

.privatni-chat #zatvoriPrivatnuSobu {
    display: initial;
}

#roomKorisniciOnline {
    display: none;
}

.privatni-chat #roomKorisniciOnline {
    display: initial;
}

#korisniciOnline {
    display: initial;
}

.privatni-chat #korisniciOnline {
    display: none;
}

.malix {
    display: none;
    margin-left: 5px;
    background: #00000030;
    border: 0;
    color: white;
    vertical-align: middle;
    border-radius: 5px;
}

.sobaTab.aktivno .malix {
    display: inline-block;
}

#chatDesno ul li a .bi-broadcast {
    display: none;
}

#chatDesno ul li a.korisnikBroadcast .bi-broadcast {
    display: inline-block;
}

#chatDesno ul li a {
    color: black;
}

#chatDesno ul li a.korisnikBroadcast {
    color: #C1FF00;
    font-weight: 400;
}

#statusbar {
    overflow-x: auto;
    white-space: nowrap;
}

.sobaTab {
    font-family: "Klavika", sans-serif;
    background: #444444;
    display: inline-block;
    color: white;
    font-weight: 300;
    padding: 5px 20px;
    border-radius: 5px;
    font-size: 0.8rem;
    margin-right: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.sobaTab.novaPoruka::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    display: block;
    background: #ffffff;
    right: 4px;
    top: 4px;
    border-radius: 50%;
}

.sobaTab.aktivno {
    background: #663399;
}

.povratakNaTribinu {
    display: none;
}

.privatni-chat .povratakNaTribinu {
    display: inline-block;
    padding: 6px 20px;
    margin-right: 0px;
}

table.postovi td select.formaOcjenaUrednika {
    min-width: 66px;
}

.accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: #323639;
    box-shadow: inset 0 -1px 0 #585858;
}

.accordion-item {
    background-color: #323639;
    border-color: #454a4e;
}

button.accordion-button {
    background-color: #323639;
    color: white;
}


/* nove vijesti */
.prva-novo h1 {
    font-size: 1.4rem;
    letter-spacing: 0.4px;
    font-weight: bold;
}

.prva-novo img {
    min-height: initial;
    max-height: initial;
}

.druge-novo .row {
    display: flex;
    flex-direction: row-reverse;
}


.glavne .druge-novo img {
    max-height: 110px;
    object-fit: cover;
    object-position: top;
}

.druge-novo h2 {
    font-size: 1rem;
    font-weight: bold;
}

.blok-vijesti .info {
    font-size: 0.9rem;
}

.blok-vijesti hr {
    max-width: 95%;
    margin: 1.1rem auto;
    color: #f7f7f7;
}

@media (min-width: 1200px) {
    .blok-vijesti>div {
        border-right: 1px solid #474747;
    }

    .blok-vijesti>div:last-child {
        border: 0;
    }
}

.trece-novo h2 {
    font-size: 1rem;
    font-weight: bold;
}

.trece-novo hr {
    margin: 0.8rem auto;
}


.blok-vijesti a h2,
.blok-vijesti a h1 {
    /* color: #f3f3f3; */
}

.blok-vijesti .info a {
    text-wrap-mode: nowrap;
}

/* inbox */

.inbox .procitano-0 {
    background: #f4f3ff;
    font-weight: 400;
}

.inbox .inboxMeta h4 {
    font-style: normal;
    /* font-weight: bold; */
}

.inbox .inboxMeta h4.inboxVrijeme {
    font-weight: 300;
    font-size: 0.9rem;
    opacity: 0.8;
}

.inbox .card {
    background: #212121;
}

.obavijesti .vrijeme {
    font-family: "klavika", sans-serif;
    font-weight: 300;
    font-size: 0.9rem;
}

.notifikacijeMeni li.nema-obavijesti {
    padding: 10px;
    font-weight: 300;
    font-size: 0.9rem;
}

.notifikacijeMeni ul.dropdown-menu {
    min-width: 270px;
    margin-top: 8px !important;
    padding: 0;
}

.notifikacijeMeni ul li:last-child {
    border: none;
}

.notifikacijeMeni ul li {
    font-weight: 300;
    padding: 4px 10px;
    border-bottom: 1px solid #e2dada;
    overflow: auto;
}

.notifikacijeMeni ul li .vrijeme {
    font-size: 0.7rem;
    margin-left: 3px;
    opacity: 0.5;
    float: right;
    line-height: 1.6rem;
}

.notifikacijeMeni ul li a i {
    margin: 0;
    padding: 0;
    font-size: 0.7rem;
    opacity: 0.8;
}

#glavnaNavigacija {
    background: #131313;
}

#glavnaNavigacija .offcanvas-body ul li a i {
    color: white;
}

#glavnaNavigacija .offcanvas-header .btn-close {
    filter: invert(1);
}

#glavnaNavigacija span.chatOnline {
    background: #555555;
}

h2 {
    color: white;
}

#chat-full {
    background: #171922 !important;
}

.chatDesno {
    background: #171922 !important;
    color: white !important;
}

#chatDesno ul li a {
    color: white;
}

#chat-box a {
    color: #81aa00;
}

.chat-box .porukaSingle {
    background: #212529;
    color: white;
}

.chat-box .porukaSingle::after {
    border-color: transparent transparent #212529 transparent;
}

.porukaSingle span.replyTo-ikona {
    color: white;
}

.porukaSingle span.brisi-ikona {
    color: white;
}

.porukaSingle a blockquote {
    color: whitesmoke;
}

#chat-form input {
    background: black;
    border-color: black;
    color: white;
}

.modal-content {
    background: #2d2d2d;
    border: 2px solid #2d2d2d;
    color: white;
}

.modal-content .modal-header .btn-close {
    filter: invert(1);
}

.bazaPodataka .card {
    background: #212530;
    border-color: #212530;
    color: #ffffff;
}

.bazaPodataka .card .card-footer {
    background: #212530;
}

.modal-header {
    border-color: #585858;
}

.onama .card {
    background: #212530;
}

a.btn.btn-sm.btn-outline-secondary {
    color: white;
}

#rezultatiRasporedModal button.btn.btn-border.btn-sm:hover {
    color: white;
}


.adminmenu #nav-content,
.adminmenu #nav-header,
.adminmenu #nav-bar {
    background: black;
}

#searchModal form input {
    background: #454545;
    color: white;
    border-color: #212121;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: #f1f1f1;
    background-color: #212121;
    border-color: #212121 #212121 #cccccc;
}

.nav-tabs {
    border-color: #cccccc;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    border-color: #212121 #212121 #cccccc;
}

.userPanel .form-control {
    background: #212121;
    color: white;
    border-color: #555555;
}

.userPanel #forma_bedz {
    background: #212121;
    color: white;
    border-color: #555;
}

.glavne .form-control {
    background: #212121;
    color: white;
    border-color: #555555;
}

.avatarBox {
    background: #212121 !important;
}

.admin-korisnik .nav-button:hover {
    color: #555555 !important;
}

/* responsive */

@media (max-width: 1400px) {

    .mojaAktivnost .userinfo ul li i {
        margin-right: 10px;
    }

    .chat-box .porukaSingle,
    .chat-box .porukaSelf .porukaSingle {
        width: initial;
        display: inline-block;
        max-width: 85%;
    }

    #chat-full {
        padding: 10px !important;
    }


    .chatDesno ul {
        height: initial;
        overflow-y: auto;
    }

    .tekstovi .tekstmeta {
        flex-direction: column;
    }

    .tekstovi .tekstmeta h4 {
        border: 0;
    }

    .mojaAktivnost .userinfo ul {
        text-align: initial;
    }


    .mojaAktivnost .userinfo ul li {
        padding: 0px 0px;
        border-bottom: 1px dotted #ccc;
        padding-left: 5px;
        font-size: 0.9rem;
        margin-bottom: 15px;
        font-weight: bold;
    }

    .mojaAktivnost .userinfo ul li span {
        font-weight: 300;
        position: absolute;
        bottom: -22px;
        left: initial;
        font-size: 0.8rem;
        text-transform: uppercase;
        color: rgb(131, 131, 131);
        right: 0;
        background: #212121;
        padding-left: 10px;
    }

    .podcastImg img {
        width: 190px;
        height: 120px;
        object-fit: cover;
    }

    .offcanvas-body ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .offcanvas-body ul li {
        margin: 0px 0px;
        padding: 10px 0px;
        border-bottom: 1px dashed #aaa;
    }

    .offcanvas-body ul li i {
        color: #3b3b3b;
    }

    .glavne img {
        max-height: 270px;
        object-fit: cover;
        object-position: 50% 0%;
    }

    .glavne a h1 {
        font-size: 1.7rem;
    }

    .druge a h2 {
        font-size: 1rem;
        line-height: 1.3rem;
        font-weight: 500;
    }

    .druge hr {
        margin: 0.5rem 0;
    }

    .glavne {
        margin-top: 1.5rem !important;
    }

    .single .slika {
        border-radius: 0;
    }

    .autorStranica ul.list-group-flush li img {
        display: none;
    }

}

@media (min-width: 1400px) {
    .container-xxl {
        max-width: 1662px;
    }

    .hide-unless-xxl {
        display: block;
    }
}

@media (max-width: 1024px) {

    .podcastImg img {
        width: 120px;
        height: 80px;
        object-fit: cover;
    }

    .tekst .rezultat-div .ekipa-slika img {
        max-width: 40px;
    }

    .podcastImg {
        row-gap: 0;
    }


    .single .slika img.featuredimg {
        margin-top: 0;
    }

    .logo {
        width: 130px;
    }

    .logobox {
        line-height: 43px;
    }

    .single .metainfo {
        position: static;
    }

    .single .slika:before {
        display: none;
    }


    .single .clanak-info {
        flex-direction: column;
    }

    .single .clanak-info h4 {
        color: #ffffff;
        margin: 0 !important;
        padding: 0 !important;
    }

    .single .metainfo a {
        color: white;
    }


    .single .metainfo .nadnaslov {
        margin-top: 10px;
        font-weight: 400;
        font-size: 0.9rem;
        margin-bottom: 0px;
    }

    .single .clanak-info h4.clanakmeta {
        font-size: 0.9rem;
    }

    .single .clanakmeta {
        border: none;
    }

    .clanakmeta span {
        margin-left: 2px !important;
    }

    .single .slika {
        height: initial;

    }

    .single .clanak-info img {
        outline: 2px solid #f1f1f1;
    }

    .tekucice .separator i,
    .novo .separator i {
        font-size: 1rem;
        line-height: 31px;
        width: 33px;
        height: 33px;
    }

    h2.separator span {
        font-size: 1.4rem;
    }

    .tekucice h2 a,
    .novo h2 a {
        font-size: 1rem;
        padding: 10px 15px;
        line-height: normal;
        outline: 10px solid white;
        box-shadow: none;
    }

    .novo .separator span {
        font-size: 1.4rem;
    }

    .novo h2 a {
        outline: 1px solid #ffffff52;
    }

    .novo .separator::after {
        display: none;
    }

    .novo ul li {
        background: none;
        border-bottom: 1px solid #474444;
        border-radius: 0;
        padding: 4px 3px;
        margin: 9px 0px;
        line-height: 1.5rem;
    }

    .novo .separator span {
        margin-left: 0px;
        margin-right: 10px;
    }
}

@media (max-width: 991px) {
    .tekucica-featured {
        max-height: 19.5rem;
        overflow: hidden;
    }

    .otac {
        margin-top: 63px;
        padding-top: 1px;
    }

    .tekst .rezultat-div .detalji-container.horizontal .imena-ekipa .ime-ekipe div {
        font-size: 1.4rem;
    }

    .logo1 {
        display: none;
    }

    .logo2 {
        display: block;
    }

    .meni-top {
        background: #121212;
        position: fixed;
        z-index: 999;
        margin: 0 !important;
        padding-top: 0.5rem !important;
        top: 0;
        padding-bottom: 0.5rem !important;
    }

    .mobil-hr {
        margin-bottom: 58px !important;
    }

    .meni-top i {
        color: white;
        font-size: 1.2rem !important;
    }

    .tekst th,
    .tekst td {
        font-size: 0.9rem;
    }

    .single .metainfo h2 {
        color: white;
        font-size: 1.9rem;
        line-height: 2.2rem;
        margin: 0 !important;
    }

    .brojobavijesti {
        background: #ef2424;
        top: 0px;
        right: 3px;
        font-size: 0.7rem;
        line-height: 1rem;
        font-weight: 500;
        padding: 0px 7px;
        border-radius: 4px !important;
    }

}