: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;


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

.table th,
.table td {
    padding: 5px;
    vertical-align: middle;
    border-top: 0px solid #dee2e6;
}

.table td {
    padding: 5px;
    vertical-align: middle;
    border-top: 1px solid #dee2e6;
}

table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_asc_disabled::before,
table.dataTable thead .sorting_desc_disabled::before {
    left: 0em;
    content: "\2191";
    top: 4px;
}

table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_asc_disabled::before,
table.dataTable thead .sorting_desc_disabled::before {
    left: 7px;
    content: "\2191";
    top: 4px;
}

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after,
table.dataTable thead .sorting_asc_disabled::after,
table.dataTable thead .sorting_desc_disabled::after {
    left: 0;
    content: "\2193";
    top: 4px;
}

table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_asc_disabled::before,
table.dataTable thead .sorting_desc_disabled::before {
    left: 7px;
    content: "\2191";
    top: 4px;
}

table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::after {
    opacity: 1;
    color: var(--blue);
}

table.dataTable thead>tr>th.sorting_asc,
table.dataTable thead>tr>th.sorting_desc,
table.dataTable thead>tr>th.sorting,
table.dataTable thead>tr>td.sorting_asc,
table.dataTable thead>tr>td.sorting_desc,
table.dataTable thead>tr>td.sorting {
    padding-right: 30px;
    padding-left: 20px;
}

.osnovne-informacije {
    width: 100%;
}

.osnovne-informacije th {
    white-space: nowrap;
    font-size: var(--font-size-s);
    font-family: "Roboto";
    font-weight: 500;
    color: var(--dark-text);
    padding-right: 20px;
    text-align: left;
}

.osnovne-informacije tr {
    height: 40px;
    border-bottom: var(--border) ;
}
.osnovne-informacije td {
padding-left: 0 !important;
}
.badge {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    line-height: 17px;
    float: right;
    text-align: center;
    padding: 0;
}

.normal .badge {
    background-color: var(--green);
    color: var(--white);
}

.minimalni .badge {
    background-color: var(--yellow);
    color: var(--white);
}

.hitno .badge {
    background-color: var(--red);
    color: var(--white);
}

.u-toku .badge {
    background-color: var(--table-blue);
    color: var(--white);
}

.na-cekanju .badge {
    background-color: var(--yellow);
    color: var(--dark-grey);
}

.zavrseno .badge {
    background-color: var(--green);
    color: var(--white);
}

.odbijeno .badge {
    background-color: var(--red);
    color: var(--white);
}

.table-search-action {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.table-search-action.start {
    display: flex;
    justify-content: start;
    align-items: flex-start;
}

.table-search-action.start>* {
    margin-right: 10px;
}


.table-search-action.start select {
    min-width: 120px;
    max-width: 120px;
}

table {
    position: relative;
    display: table;
    margin: 10px auto;
    padding: 0;
    width: 100%;
    height: auto;
    border-collapse: collapse;
    text-align: center;
}


table thead tr th {
    border-bottom: 2px solid #dadada;
    text-decoration: none;
    color: var(--light-text);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    padding-left: 20px;
}

table tr td {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px !important;
    border-bottom: 1px solid #dadada;
    color: var(--dark-text);
    font-size: 12px;
    font-weight: 400;
    text-align: left;

}

table.table-tiketi tr td {
    width: 100%;
    display: block;
}

table.table-tiketi tfoot tr td {
    width: 50%;
    display: inline-block;
}

table tfoot tr td {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 0px;
    border-bottom: 1px solid #dadada;
    color: var(--dark-text);
    font-size: 12px;
    font-weight: 400;
    text-align: left;
}

.table-image {
    max-width: 25px;
    vertical-align: top;
}

td .badge.active,
td .badge.not-active {
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    float: left;
    padding: 4px;
    width: auto;
    height: auto;
}

td .badge.active {
    background-color: rgba(144, 182, 79, 0.2);
    color: var(--green);
}


td .badge.not-active {
    background-color: rgba(229, 64, 72, 0.2);
    color: var(--red);
}

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

.button-pagination.active {
    background-color: var(--light-grey);
    color: var(--dark-text);
    font-size: var(--font-size-s);
    font-weight: 500;
    border: none;
    border-radius: 4px;
    text-align: center;
}

.button-pagination {
    background-color: var(--white);
    color: var(--dark-text);
    font-size: var(--font-size-s);
    font-weight: 500;
    border: none;
    border-radius: 4px;
    width: 25px;
    height: 25px;
    text-align: center;
}

.page-link {
    border: none;
}

.page-item.active .page-link {
    background-color: var(--light-grey);
    color: var(--dark-text);
    font-size: var(--font-size-s);
    font-weight: 500;
    border: none;
    border-radius: 4px;
    text-align: center;
}

.button-pagination.prev,
.button-pagination.next {
    background-color: var(--light-grey);
    color: var(--dark-text);
    font-size: var(--font-size-s);
    border: none;
    border-radius: 4px;
    text-align: center;
}

.button-pagination.prev i,
.button-pagination.next i {
    background-color: var(--light-grey);
    color: var(--dark-text);
    font-size: var(--font-size-s);
    width: 10px;
    height: 10px;
    border: none;
    border-radius: 4px;
    text-align: center;
}

.custom-pagination {
    text-align: left !important;
}

.table-tiketi {
    color: var(--dark-text);
    font-size: 12px;
    font-weight: 400;
    text-align: left;
}

.table-tiketi tbody tr td {
    padding: 0 !important;
}

.top-row,
.bottom-row {
    display: table;
    width: 100%;
    margin-bottom: 5px;
}

.bottom-row {
    width: calc(100% - 25px);
}

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

.top-row .tiket,
.top-row .action {
    width: 10% !important;
}

.top-row .naslov {
    width: 80% !important;
}

/* .bottom-row .prioritet, */
.bottom-row .gradjanin,
/* .bottom-row .status, */
.bottom-row .tip-problema,
.bottom-row .datum-kreiranja,
.bottom-row .zaposleni,
.bottom-row .datum-zavrsetka {
    width: 10% !important;
}

.bottom-row .preduzece {
    width: 30% !important;
}

.top-row>div {
    display: inline;
    width: auto;
    padding: 0px 10px;
    vertical-align: middle;
}

.float-right {
    float: right;
}

.action i {
    width: 15px;
    height: 15px;
    vertical-align: middle;
}

.ikonica {
    margin-left: 5px;
}

.top-row div:first-child {
    padding-left: 0px;
}

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

.bottom-row {
    margin-bottom: 10px;
    margin-left: 25px;
}

.bottom-row div:first-child {
    padding-left: 0px;
}

.bottom-row>div {
    display: table-cell;
    width: auto;
    border-right: var(--border);
    padding: 0px 10px;
    vertical-align: middle;
}

.bottom-row div:last-child {
    border-right: none;
}


.top-row .normal .badge {
    background-color: var(--green);
    color: var(--white);
    float: left;
    margin-right: 5px;
}


.top-row .minimalni .badge {
    background-color: var(--yellow);
    color: var(--white);
    float: left;
    margin-right: 5px;
}

.top-row .hitno .badge {
    background-color: var(--red);
    color: var(--white);
    float: left;
    margin-right: 5px;
}

.top-row .action .ikonica {
    max-width: 35px;
    display: inline-block;
}

.tiket-naslov {
    color: var(--blue);
    font-size: 12px;
    font-weight: 400;
    text-align: left;
}


.prioritet.normal {
    color: var(--green);
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    position: relative;
}


.prioritet.normal::after {
    content: '';
    position: absolute;
    width: calc(100% - 10px);
    height: 3px;
    background-color: var(--green);
    bottom: -12px;
    left: 0;
}

.prioritet.hitno {
    color: var(--red);
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    position: relative;
}


.prioritet.hitno::after {
    content: '';
    position: absolute;
    width: calc(100% - 10px);
    height: 3px;
    background-color: var(--red);
    bottom: -12px;
    left: 0;
}

.prioritet.minimalni {
    color: var(--yellow);
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    position: relative
}


.prioritet.minimalni::after {
    content: '';
    position: absolute;
    width: calc(100% - 10px);
    height: 3px;
    background-color: var(--yellow);
    bottom: -12px;
    left: 0;
}

.status.na-cekanju {
    color: var(--yellow);
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    position: relative
}

.status.na-cekanju::after {
    content: '';
    position: absolute;
    width: calc(100% - 10px);
    height: 3px;
    background-color: var(--yellow);
    bottom: -12px;
    left: 0;
}

.status.u-toku {
    color: var(--table-blue);
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    position: relative
}

.status.u-toku::after {
    content: '';
    position: absolute;
    width: calc(100% - 10px);
    height: 3px;
    background-color: var(--table-blue);
    bottom: -12px;
    left: 0;
}

.status.zavrseno {
    color: var(--green);
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    position: relative
}

.status.zavrseno::after {
    content: '';
    position: absolute;
    width: calc(100% - 10px);
    height: 3px;
    background-color: var(--green);
    bottom: -12px;
    left: 0;
}


.status.odbijeno {
    color: var(--red);
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    position: relative
}

.status.odbijeno::after {
    content: '';
    position: absolute;
    width: calc(100% - 10px);
    height: 3px;
    background-color: var(--red);
    bottom: -12px;
    left: 0;
}


@media only screen and (max-width: 1024px) {
    table.dataTable>tbody>tr.child ul.dtr-details {
        display: inline-block;
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .top-row .tiket,
    .top-row .action {
        width: 20% !important;
    }

    .top-row .naslov {
        width: 60% !important;
    }

    .bottom-row .prioritet,
    .bottom-row .gradjanin,
    .bottom-row .status,
    .bottom-row .tip-problema,
    .bottom-row .datum-kreiranja,
    .bottom-row .zaposleni,
    .bottom-row .datum-zavrsetka {
        width: 15% !important;
    }

    .bottom-row .preduzece {
        width: 25% !important;
    }

    td .badge.active,
    td .badge.not-active {
        font-size: 12px;
        font-weight: 400;
        text-align: left;
        float: none;
        padding: 4px;
        width: auto;
        height: auto;
    }

    table thead tr th {
        padding-left: 20px;
    }

    table.dataTable th.dt-nowrap,
    table.dataTable td.dt-nowrap {
        white-space: nowrap;
    }

}

@media screen and (max-width:768px) {

    .top-row .action,
    .bottom-row .tip-problema,
    .bottom-row .datum-kreiranja,
    .bottom-row .zaposleni,
    .bottom-row .datum-zavrsetka {
        display: none;
    }

    .bottom-row .prioritet,
    .bottom-row .gradjanin,
    .bottom-row .status,
    .bottom-row .tip-problema,
    .bottom-row .datum-kreiranja,
    .bottom-row .zaposleni,
    .bottom-row .datum-zavrsetka {
        width: 100% !important;
    }

    .mobile-form-group select {
        width: 100%;
        margin-bottom: 10px;
    }
}