:root {
    --error: #E54048;
    --notification: #BB151D;

    --white: #ffffff;
    --red: #E54048;
    --yellow: #FBBA5A;
    --green: #90B64F;
    --blue: #6ECCDA;
    --table-blue: #196BBD;

    --purple: #A140DC;
    --orange: #E9864F;

    --ultra-light-blue: #e2f5f8;
    --light-blue: #E2F5F8;
    --normal-blue: #6ECCDA;
    --dark-blue: #46828b;

    --ultra-light-grey: #F3F3F3;
    --light-grey: #DADADA;
    --normal-grey: #575757;
    --dark-grey: #141414;

    --light-green: #edf4e0;
    ;

    --primary-button-bg-color: #6ECCDA;
    --primary-button-bg-color-hover: #c5ebf0;
    --primary-button-bg-color-focus: #46828b;

    --primary-button-border-color: #6ECCDA;
    --primary-button-border-color-hover: #c5ebf0;
    --primary-button-border-color-focus: #46828b;

    --primary-button-text-color: #f3f3f3;
    --primary-button-text-color-hover: #46828b;
    --primary-button-text-color-focus: #f3f3f3;

    --secondary-button-bg-color: #fff;
    --secondary-button-bg-color-hover: #c5ebf0;
    --secondary-button-bg-color-focus: #c5ebf0;

    --secondary-button-border-color: #6ECCDA;
    --secondary-button-border-color-hover: #6ECCDA;
    --secondary-button-border-color-focus: #46828b;

    --secondary-button-text-color: #6ECCDA;
    --secondary-button-text-color-hover: #6ECCDA;
    --secondary-button-text-color-focus: #46828b;

    --tertiary-button-bg-color: #fff;
    --tertiary-button-bg-color-hover: #fff;
    --tertiary-button-bg-color-focus: #fff;

    --tertiary-button-border-color: #fff;
    --tertiary-button-border-color-hover: #fff;
    --tertiary-button-border-color-focus: #fff;

    --tertiary-button-text-color: #6ECCDA;
    --tertiary-button-text-color-hover: #46828b;
    --tertiary-button-text-color-focus: #023F1E;


    --box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10), 0px 3px 6px 0px rgba(0, 0, 0, 0.10), 0px 10px 10px 0px rgba(0, 0, 0, 0.09), 0px 24px 14px 0px rgba(0, 0, 0, 0.05), 0px 42px 17px 0px rgba(0, 0, 0, 0.01), 0px 66px 18px 0px rgba(0, 0, 0, 0.00);

    --font-size-xs: 11px;
    --font-size-s: 12px;
    --font-size-m: 13px;
    --font-size-l: 15px;
    --font-size-xl: 20px;

    --border: 1px solid #dadada;
    --border-focus: 1px solid #6ECCDA;

    --ultra-light-text: #b6b6b6;
    --light-text: #575757;
    --dark-text: #464C54;

    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}



body {
    font-family: "Roboto";
    font-weight: 400;
    font-size: var(--font-size-s);
    background-color: var(--ultra-light-grey);
    overflow-x: hidden;

}

main {
    padding: 15px;
}

.main-container {
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    padding: 10px;
}


.vesti-container img {
    width: 100%;
    height: auto !important;
}

.main-container-footer {
    border-top: var(--border);
    padding: 10px 0px 0px 0px;
}

.grey-background {
    background-color: var(--ultra-light-grey);
    border-radius: 10px;
    padding: 10px;

}

.flex {
    display: flex;
    gap: 10px;
    align-self: stretch;
    align-items: center;
}

.form-field {
    width: 100%;
}

.full-width {
    width: 100%;
    display: block;
}

.m-0 {
    margin: 0;
}

.mt-30 {
    margin-top: 30px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-10 {
    margin-top: 10px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-30 {
    margin-bottom: 10px;
}

.p-20 {
    padding: 20px;
}

.pr-0 {
    padding-right: 0px;
}

.pl-0 {
    padding-left: 0px;
}

.pl-15 {
    padding-left: 15px;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.login-container {
    background-color: var(--white);
    box-shadow: var(--box-shadow);
    max-width: 360px;
    margin: auto;
    border-radius: 10px;
    padding: 10px;
}

.logo-placeholder {
    max-width: 120px;
    margin: auto;
    text-align: center;
    margin-bottom: 30px;
}

.logo {
    width: 100%;
}

.headline,
.info-headline,
.naslov-vesti,
.panel-title a {
    font-size: var(--font-size-l);
    font-family: "Roboto";
    font-weight: 500;
    color: var(--dark-text) !important;
}

.light-text {
    color: var(--ultra-light-text);
}


.info-text {
    font-size: var(--font-size-s);
    font-family: "Roboto";
    font-weight: 300;
    color: var(--ultra-light-text);
}

.hr-small {
    width: 60%;
    height: 1px;
    color: #dadada;
    border-top: var(--border);
    text-align: center;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 10px;
}

.hr {
    width: 100%;
    height: 1px;
    color: #dadada;
    border-top: var(--border);
    text-align: center;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 20px;
}


.info-tiket {
    display: flex;
}

.id-tiketa {
    font-size: var(--font-size-s);
    font-family: "Roboto";
    font-weight: 500;
    color: var(--dark-text);
    padding-right: 10px;
    border-right: var(--border);
}

.kreator,
.azurirao {
    font-size: var(--font-size-s);
    font-family: "Roboto";
    font-weight: 400;
    color: var(--dark-text);
    padding: 0px 10px;
    border-right: var(--border);
}

.ime,
.datum-kreiranja,
.datum-azuriranja {
    font-size: var(--font-size-s);
    font-family: "Roboto";
    font-weight: 500;
    color: var(--dark-text);
    padding-right: 5px;
}

.naslov-tiketa {
    font-size: var(--font-size-xl);
    font-family: "Roboto";
    font-weight: 500;
    color: var(--dark-text);
    align-content: center;
    align-items: center;
    display: flex;
}

.follow-tiket {
    font-size: var(--font-size-s);
    font-family: "Roboto";
    font-weight: 500;
    color: var(--dark-text);
    align-content: center;
    align-items: center;
    display: flex;
}

.naslov-tiketa i,
.follow-tiket i {
    margin-right: 10px;
}

.text-tiketa {
    font-size: var(--font-size-m);
    font-family: "Roboto";
    font-weight: 400;
    color: var(--dark-text);
}

.prilozi-tiketa {
    font-size: var(--font-size-m);
    font-family: "Roboto";
    font-weight: 400;
    color: var(--dark-text);
    align-content: center;
    align-items: center;
    display: flex;
}

.prilozi-tiketa i {
    margin-right: 10px;
}

.istorija-tiketa:not(:first-child) .promena-statusa,
.istorija-tiketa:not(:first-child) .komentar,
.istorija-tiketa:not(:first-child) .vreme-zavrsetka {
    margin-top: 20px !important;
}

.promena-statusa {
    display: flex;
    align-items: flex-start;
    position: relative;
}

.komentar {
    display: flex;
    align-items: flex-start;
    position: relative;
}

.vreme-zavrsetka {
    display: flex;
    align-items: flex-start;
    position: relative;
}

.promena-statusa::before,
.komentar::before,
.vreme-zavrsetka::before {
    content: "";
    position: absolute;
    left: 6px;
    display: block;
    width: 2px;
    height: calc(100% - 24px);
    background-color: #c1c1c1;
    top: 26px;
    height: calc(100% - 20px)
}

.last::before {
    content: "";
    position: absolute;
    left: 6px;
    display: block;
    width: 0px;
    height: calc(100% - 24px);
    background-color: #c1c1c1;
    top: 26px;
    height: calc(100% - 10px)
}

.komentar i {
    display: inline-block;
}

.promena-statusa i {
    display: inline-block;
}

.vreme-zavrsetka i {
    display: inline-block;
}

.komentar .opis {
    display: inline-block;
    padding-left: 10px;
}

.vreme-zavrsetka .opis {
    display: inline-block;
    padding-left: 10px;
}

.promena-statusa .opis {
    display: inline-block;
    padding-left: 10px;
}

.promena-statusa .ime,
.promena-statusa .datum,
.komentar .datum,
.komentar.ime,
.vreme-zavrsetka .ime,
.vreme-zavrsetka .datum {
    font-size: var(--font-size-s);
    font-family: "Roboto";
    font-weight: 500;
    color: var(--dark-text);
}

.promena-statusa .promena {
    font-size: var(--font-size-xs);
    font-family: "Roboto";
    font-weight: 400;
    color: var(--dark-text);
    display: flex;
    align-items: center;
}

.vreme-zavrsetka .promena {
    font-size: var(--font-size-xs);
    font-family: "Roboto";
    font-weight: 400;
    color: var(--dark-text);
    display: flex;
    align-items: center;
}

.komentar .opis p {
    font-size: var(--font-size-xs);
    font-family: "Roboto";
    font-weight: 400;
    color: var(--dark-text);
    margin-bottom: 0px;
}

.old-status,
.old-date {
    padding-right: 5px;
    font-size: var(--font-size-xs);
    font-family: "Roboto";
    font-weight: 400;
    color: var(--dark-text);
}

.new-status,
.new-date {
    padding-left: 5px;
    font-size: var(--font-size-xs);
    font-family: "Roboto";
    font-weight: 400;
    color: var(--dark-text);
}

.card {
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: var(--box-shadow);
}

.dash-card {
    box-shadow: var(--container-shadow);
    border-radius: 10px;
    border: none;
    margin-bottom: 10px;
    color: var(--white);
}

.dash-card .card-footer a {
    color: var(--white) !important;
}

.dash-card.blue {
    background-color: var(--table-blue);
}

.dash-card.yellow {
    background-color: var(--yellow);
}

.dash-card.green {
    background-color: var(--green);
}

.dash-card.red {
    background-color: var(--red);
}

.dash-card.blue::before {
    background-image: url("/default/images/ikonice/progress.svg");
    background-size: 65px;
    background-repeat: no-repeat;
    background-position: center right;
    opacity: 0.2;
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 100px;
    height: 88px;
}

.dash-card.yellow::before {
    background-image: url("/default/images/ikonice/on_hold.svg");
    background-size: 65px;
    background-repeat: no-repeat;
    background-position: center right;
    opacity: 0.2;
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 100px;
    height: 88px;
}

.dash-card.green::before {
    background-image: url("/default/images/ikonice/done.svg");
    background-size: 65px;
    background-repeat: no-repeat;
    background-position: center right;
    opacity: 0.2;
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 100px;
    height: 88px;
}

.dash-card.red::before {
    background-image: url("/default/images/ikonice/rejected.svg");
    background-size: 65px;
    background-repeat: no-repeat;
    background-position: center right;
    opacity: 0.2;
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 100px;
    height: 88px;
}

.inner .number {
    font-size: 28px;
    font-weight: bold;
    margin: 0px;
    padding: 0;
    white-space: nowrap;
}

.inner .text {
    font-size: 14px;
    font-weight: 400;
    margin: 0px;
    padding: 0;
    white-space: nowrap;
}

.dash-card .card-footer {
    background-color: rgba(0, 0, 0, .1);
    border: none;
    text-align: center;
}

.dash-card .card-footer a {
    text-decoration: none;
    font-size: 14px;
    font-weight: normal;
}

.card .card-footer a {
    text-decoration: none;
    font-size: 14px;
    font-weight: normal;
    color: var(--primary);
}

.alert-box {
    position: absolute;
    top: 100px;
    z-index: 2;
    width: 100%;
    max-width: 600px;
    margin: auto;
    right: 0;
    left: 0;
}

.alert-danger {
    color: var(--red);
    background-color: #ebb9bc;
    border-color: #ebb9bc;
    font-size: 14px;
    width: 95%;
    margin: auto;
}

.alert-success {
    color: var(--green);
    background-color: #edf4e0;
    border-color: #d9efb3;
    font-size: 14px;
    width: 95%;
    margin: auto;
}

.alert-dismissible .close {
    position: absolute;
    top: -10px;
    right: 5px;
    padding: 0;
    filter: none;
}



.no-background-color {
    background-color: transparent;
    border: none;
}

.button-tertiary.no-background-color:hover {
    background-color: transparent;
    border: none;
}

#preview-image-before-upload {
    max-width: 150px;
}

#preview-images img {
    max-width: 150px;
    margin-right: 20px;
    margin-bottom: 20px;
}

#formeo-editor {
    width: 100%;
}

div:where(.swal2-icon).swal2-warning {
    border-color: var(--red) !important;
    color: var(--red) !important;
}




#page_container {
    margin-top: 15px;
    margin-bottom: 15px;
}



.panel-title a {
    display: block;
}


.panel-body .white-background {
    background: white;
    padding: 10px;
    border-radius: 10px;
}

#notfound {
    position: relative;
    height: 50vh;
}

#notfound .notfound {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.notfound {
    max-width: 560px;
    width: 100%;
    padding-left: 160px;
    line-height: 1.1;
    margin: auto;
    position: relative;
}

.notfound .notfound-404 {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    width: 140px;
    height: 140px;
    background-image: url(/default/images/emoji.webp);
    background-size: cover;
}

.notfound .notfound-404::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transform: scale(2.4);
    -ms-transform: scale(2.4);
    transform: scale(2.4);
    border-radius: 50%;
    background-color: #d7d7d7;
    z-index: -1;
}

.notfound h1 {
    font-size: 65px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 10px;
    color: #151723;
    text-transform: uppercase;
}

.notfound h2 {
    font-size: 21px;
    font-weight: 400;
    margin: 0;
    text-transform: uppercase;
    color: #151723;
}

.notfound p {
    color: #999fa5;
    font-weight: 400;
    margin-top: 10px;
}

.notfound a {
    display: inline-block;
    font-weight: 700;
    border-radius: 40px;
    text-decoration: none;
    color: var(--tertiary-button-text-color);
    margin-top: 30px;
}

@media screen and (max-width:1600px) {
    .zaduzeno-lice {
        word-wrap: break-word;
        max-width: 90px;
        width: 100%;
    }
}

@media screen and (max-width:768px) {
    .flex {
        display: block;
    }

    .form-field {
        margin-bottom: 10px;
    }

    .info-tiket {
        flex-direction: column;
    }

    .kreator,
    .azurirao {
        padding: 0px;
    }

    .image-column {
        float: left;
        width: 50px;
    }

    .tiket,
    .tiket-naslov {
        font-size: 14px;
    }
}

button.filter-name {
    box-shadow: none;
    border: none;
    font-size: var(--font-size-m);
    font-weight: 500;
    padding: 5px;
    background: var(--white);
    margin: 0;
    cursor: pointer;
    text-decoration: none;
    color: var(--dark-text);

}

.filter-name:after {
    content: url("/default/images/ikonice/arrow-nav.svg");
    color: #777;
    font-weight: bold;
    float: left;
    margin-right: 5px;
}

.filter-name.active:after {
    content: url("/default/images/ikonice/arrow-nav.svg");
    transform: rotate(90deg);
}

.filter-fields {
    max-height: 0;
    padding-left: 15px;
    background-color: white;
    overflow: hidden;
    transition: max-height 0.2s linear ease-out;
}

.filter-name.active+.filter-fields {
    max-height: 100%
}

.custom-file::-webkit-file-upload-button {
    visibility: hidden;
}

.custom-file::before {

    display: inline-block;
    background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
    border: 1px solid #999;
    border-radius: 3px;
    padding: 5px 8px;
    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    text-shadow: 1px 1px #fff;
    font-weight: 700;
    font-size: 10pt;
}

.custom-file:hover::before {
    border-color: black;
}

.custom-file:active::before {
    background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

#pomoc-video {
    max-height: 600px;
}

.user-sidebar {
    position: absolute;
    top: 15px;
    left: 20px;
    font-weight: bold;
  }

  .side-card ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.side-card ul li {
    position: relative;
}

.side-card ul li h4 {
    margin: 0;
}

.side-card ul li .submenu {
    display: none;
    padding-left: 20px;
}

.side-card ul li.open > .submenu {
    display: block;
}