:root {
    --my-body-bgcolor: #f5f5f5; /*pozadina body-ja svih elemenata*/
    --my-font-color: #28335C; /*Blue*/
    --my-tablerow-color-hover: #D4DBE4; /*light-gray  #e0e0e0*/
}


/*Odnosi se na HTML thead elemnt*/
.table {
    text-align: left;
    vertical-align: middle !important;
}

    .table thead th {
        background-color: #154360 !important;
        color: white;
        vertical-align: middle !important;
    }

tbody, td, tfoot, th, thead, tr {
    text-align: left;
}


.table tbody tr td {
    background-color: #f5f5f5;
    border-bottom: 2px solid var(--blue, #D4DBE4);
    color: var(--my-font-color);
}

.table tbody tr:hover td {
    background-color: var(--my-tablerow-color-hover) !important;
    cursor: pointer;
    border-bottom: 2px solid var(--blue, #D4DBE4);
}

/*Ako treba  klasi .table datalist section napravi efekat zebre, ovo otkomentarisati*/
.table tbody tr:nth-of-type(odd) td {
    background-color: #f2f2f2;
}

.table tbody tr:nth-of-type(even) td {
    background-color: #fff;
}


.table a {
    text-decoration: none;
}

    .table a:hover {
        text-decoration: underline;
    }


.table-striped tbody tr:hover td {
    background-color: #e0e0e0 !important;
    cursor: pointer;
}

.table-header-main {
    background-color: #154360 !important;
    color: white !important
}

.table-header-sub {
    background-color: #97a3b1 !important;
}

/*  Stilovi za klasu responsive-table i ja mislim da se ne koristi sve, ali ne znam šta se tačno koristi. Ja mislim samo ovo iznad zakomentarisano*/
.responsive-table {
    width: 100%;
    border-spacing: 0;
    margin-bottom: 30px !important
}

    .responsive-table thead {
        position: absolute;
        clip: rect(1px 1px 1px 1px);
        padding: 0;
        border: 0;
        height: 1px;
        width: 1px;
        overflow: hidden;
        background: #154360;
    }

        .responsive-table thead th {
            font-weight: 400;
            text-align: left;
            color: #fff
        }

        .responsive-table thead tr {
            border-left: 1px solid #63879e;
            border-right: 1px solid #63879e;
        }

    .responsive-table a {
        color: #2A5B90;
    }

        .responsive-table a:hover {
            text-decoration: underline;
        }

    .responsive-table tbody,
    .responsive-table td,
    .responsive-table th,
    .responsive-table tr {
        display: block;
        padding: 0;
        text-align: left;
        white-space: normal
    }

        .responsive-table tbody th[scope=row] {
            background-color: #4c5c6d;
            color: #fff;
            font-weight: 400
        }

        .responsive-table tbody td[data-type=currency] {
            text-align: left
        }

        .responsive-table tbody td[data-title]::before {
            content: attr(data-title);
            text-align: left;
            color: #000;
            background: #f2f2f2;
            padding: 5px;
            display: block;
            font-weight: 400
        }
        .responsive-table tbody td {
            line-height: 20px;
        }

    .responsive-table td,
    .responsive-table th {
        padding: 8px 5px;
        font-size: 14px;
        vertical-align: middle;
        font-weight: 400
    }

    .responsive-table caption {
        margin-bottom: 10px;
        font-weight: 700;
        text-align: left
    }

    .responsive-table tfoot th {
        font-style: italic;
        overflow: hidden;
        font-size: 12px;
        text-align: left
    }    

    .responsive-table tbody, td, tfoot, th, thead, tr {
        border-color: transparent;
    }

    .responsive-table tfoot tr td {
        border: none;
        font-size: 12px;
        font-style: italic;
        text-align: left;
    }

    .responsive-table .btn-primary {
        color: white;
    }


/* Kako se ponaša responsive-table klasa na ekranima maximalne širine 768px */
@media (max-width:768px) {
   
    .responsive-table {
        border: 1px solid #4c5c6d;
    }

        .responsive-table td {
            padding: 4px 4px 0px 4px;
            vertical-align: middle;
            font-weight: 400
        }

            .responsive-table td:first-child {
                padding: 4px;
                vertical-align: middle;
                font-weight: 400;
                border-top: 5px solid #999
            }

            .responsive-table td:last-child {
                padding: 4px;
                vertical-align: middle;
                font-weight: 400;
                border-bottom: 1px solid #999
            }
}

/* Kako se ponaša responsive-table klasa na ekranima minimalne širine 768px */
@media (min-width:768px) {    

    .responsive-table thead tr:nth-of-type(2n) {
        background-color: #97a3b1 !important;
    }

    .responsive-table thead th {
        border: none;
    }
    .responsive-table th.color_light {
        border-right: 1px solid #63879e !important;
    }
    .responsive-table {
        border-top: 1px solid #4c5c6d
    }

        .responsive-table thead {
            position: relative;
            clip: auto;
            height: auto;
            width: auto;
            overflow: auto
        }

        .responsive-table tr {
            display: table-row
        }

        .responsive-table td,
        .responsive-table th {
            display: table-cell
        }

        .responsive-table tbody {
            display: table-row-group
        }

            .responsive-table tbody tr td {               
                border-bottom: 2px solid var(--blue, #D4DBE4);               
            }

            .responsive-table tbody tr:hover td {
                background-color: var(--my-tablerow-color-hover) !important;
                cursor: pointer;
                border-bottom: 2px solid var(--blue, #D4DBE4);
            }           

            .responsive-table tbody tr:nth-of-type(odd) {
                background-color: #f2f2f2;               
            }

            .responsive-table tbody tr:nth-of-type(even) {
                background-color: #fff;
            }            

            .responsive-table tbody td[data-title]:before {
                content: none
            }
}