/* DEFAULTS
----------------------------------------------------------*/

@font-face {
    font-family: "Calibri";
    src: url('../fonts/CALIBRI.eot');
    src: url('../fonts/CALIBRI.ttf');
}

body {
    background: #333333;
    font: 14px Arial;
    margin: 0px;
    padding: 0px;
    color: #fff;
}

.tr123 {
    page-break-inside: avoid;
}

@page {
    size: lanscape;
    margin: 1cm;
}

@media print {
    .header-background, .header, .footer {
        display: none;
    }

    .btnMali, .btnObrada, .btnPoruke, .btnMailAttachment {
        display: none;
    }

    .body {
        margin: 0;
        border: initial;
        width: initial;
        min-height: initial;
        background: initial;
        page-break-after: always;
        font-size: 14px;
    }

    .page {
        margin: 0;
        border: initial;
        width: initial;
        min-height: initial;
        background: initial;
        page-break-after: always;
        font-size: 14px;
    }

    thead {
        display: table-header-group;
    }

    .collHeader {
        display: table-header-group;
    }

    .PrintNotVisible, .FilterForm, .FilterForm2 {
        display: none;
    }

    .tabela {
        width: 100%;
    }
}

@media only screen and (max-width : 600px) {
    .header {
        display: none;
    }

    .normalWindow {
        display: none !important;
    }

    .smallWindow {
        display: block;
    }

    #modalProces {
        display: none !important;
        z-index: 99999999999 !important;
    }
}

/* Pokaži header u landscapeu ili na desktopu */
@media only screen and (min-width : 601px) {
    .header {
        display: block !important;
    }

    .normalWindow {
        display: block !important;
    }

    .smallWindow {
        display: none !important;
    }
}

a:link, a:visited {
    color: #fff;
}

a:hover {
    color: blue;
    text-decoration: none;
}

a:active {
    color: #034af3;
}

p {
    margin-bottom: 10px;
    line-height: 1.6em;
}

.font14 {
    font-size: 14px;
}

.font16 {
    font-size: 16px;
}

/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
    font-size: 1.5em;
    color: #fff;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}

h1 {
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2 {
    font-size: 1.5em;
    font-weight: 600;
    margin-top: 5px;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2 {
    margin-top: 0px;
}


/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page {
    width: 100%;
    background-color: #333333;
}

.menuLeft {
    padding: 10px;
    flex: 0 0 auto; /* Fiksirana širina */
}

.header-background {
    background: #333333;
    /*background: #FFB5AD;*/ /*test*/
    /*background: #007F7F;*/ /*ostale firme*/
    /*background: #7A04EF;*/ /*Meyer*/
    /*background: #F4A255; Zlatna Kamilica*/
}

.header {
    position: relative;
    margin: 0px;
    padding: 0px;
    width: 100%;
}

    .header h1 {
        font-weight: 700;
        margin: 0px;
        padding: 0px 0px 0px 20px;
        color: #f9f9f9;
        border: none;
        line-height: 2em;
        font-size: 2em;
    }

.main {
    padding: 10px;
    min-height: 420px;
}


.leftCol {
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}

.footer {
    color: #4e5766;
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
}

.FilterForm {
    width: 100%;
}

.FirmaLabel {
    color: #fff;
    font-size: 30px;
    padding: 0px;
    margin: 0px;
    padding-left: 20px;
    padding-top: 10px;
}


/* TAB MENU   
----------------------------------------------------------*/
div.hideSkiplink {
    padding: 0px;
    background-color: #465C82;
    margin-top: 15px;
    margin-bottom: 5px;
}

div.menu {
    padding: 4px 0px 4px 8px;
}

    div.menu ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
        width: auto;
    }

        div.menu ul li a, div.menu ul li a:visited {
            background-color: #465c71;
            border: 1px #4e667d solid;
            color: #dde4ec;
            display: block;
            line-height: 1.35em;
            padding: 4px 20px;
            text-decoration: none;
            white-space: nowrap;
        }

            div.menu ul li a:hover {
                background-color: #bfcbd6;
                color: #465c71;
                text-decoration: none;
            }

            div.menu ul li a:active {
                background-color: #465c71;
                color: #cfdbe6;
                text-decoration: none;
            }

/* FORM ELEMENTS   
----------------------------------------------------------*/

image {
    border: 0;
}

fieldset {
    margin: 1em 0px;
    padding: 1em 1em 1em 2em;
    border: 1px solid #ccc;
    width: 300px;
    border-radius: 15px;
}

    fieldset p {
        margin: 2px 12px 10px 10px;
    }

    fieldset.login label, fieldset.register label, fieldset.changePassword label {
        display: block;
    }

    fieldset label.inline {
        display: inline;
    }

legend {
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input.textEntry {
    width: 320px;
    border: 1px solid #ccc;
}

input.passwordEntry {
    width: 320px;
    background-color: #FFF8DC;
    height: 25px;
    border: 1px solid #9F9F9F;
    border-radius: 2px;
    padding-left: 3px;
    padding-right: 3px;
}

div.accountInfo {
    width: 42%;
}

:not(.modal) input[type=text] {
    background-color: #FFF8DC;
    border-radius: 2px;
    height: 25px;
    border: none;
    padding-left: 3px;
    padding-right: 3px;
}

input[type=password] {
    background-color: #FFF8DC;
    border-radius: 2px;
    height: 25px;
    border: none;
    padding-left: 3px;
    padding-right: 3px;
}

input[type=number] {
    border-radius: 2px;
    background-color: #FFF8DC;
    height: 25px;
    border: none;
    padding-left: 3px;
    padding-right: 3px;
    width: 75px;
}



input[type=text].focused {
    background-color: #fff;

}

input[type=number].focused {
    background-color: #fff;
 
}

input[type=checkbox].focused {
    background-color: #fff;
   
}

select.focused {
    background-color: #fff;

}

.autoExpandTextBox {
    width: 270px;
    min-height: 50px; /* Minimalna visina */
    resize: none; /* Onemogućava ručno mijenjanje veličine */
    overflow-y: hidden; /* Sakriva vertikalni scroll */
    line-height: 1.5; /* Visina reda */
    box-sizing: border-box; /* Uključuje padding u širinu */
}

textarea {
    background-color: #FFF8DC;
    border: 1px solid #9F9F9F;
    border-radius: 2px;
    padding: 3px;
    font-family: "Calibri", "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
}

    textarea.focused {
        background-color: #fff;
        border: 1px solid Red;
    }

.timepicker {
    width: 50px;
}

.bigLabel {
    font-size: 15px;
    color: yellow;
}

.bigLabelGrren {
    font-size: 15px;
    color: springgreen;
    font-weight: bold;
}

.clasic-table {
    border-collapse: collapse;
}

    .clasic-table th, .clasic-table td {
        vertical-align: baseline;
    }

    .clasic-table th {
        padding-right: 5px;
    }

.clasic-table2 {
    border-collapse: collapse;
}

    .clasic-table2 th, .clasic-table2 td {
        vertical-align: baseline;
    }

    .clasic-table2 th {
        padding-right: 5px;
        text-align: right;
    }

.forma th {
    text-align: left;
}

/* MISC  
----------------------------------------------------------*/

.clear {
    clear: both;
}

.title {
    display: block;
    float: left;
    text-align: left;
    width: auto;
    padding: 10px 0px 0px 10px;
    font-size: 30px;
    color: #FFF8DC;
}

.loginDisplay {
    font-size: 1.1em;
    display: block;
    text-align: right;
    padding: 20px 20px 0px 0px;
    color: White;
    vertical-align: middle;
}

    .loginDisplay a:link {
        color: white;
    }

    .loginDisplay a:visited {
        color: white;
    }

    .loginDisplay a:hover {
        color: white;
    }

.failureNotification {
    font-size: 1.2em;
    color: Red;
}

.bold {
    font-weight: bold;
}

.submitButton {
    width: 100%;
    padding-right: 10px;
}


/* IZBORNIK
----------------------------------------------------------*/

.primaryStaticMenu {
    background-color: #465C82;
    z-index: 99999999;
    font-size: 15px;
    height: 30px;
}

    .primaryStaticMenu td {
        text-align: left;
        padding: 0px;
        height: 30px;
    }

    .primaryStaticMenu a {
        color: #fff;
         
    }

.primaryStaticMenuItem {
    background-color: #465C82;
    color: #000;
    text-align: center;
    z-index: 99999999;
}

.primaryStaticHover {
    color: Black;
    background: #000;
    z-index: 99999999;
}

.primaryDynamicMenu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #240210;
    border: solid 1px #fff;
    z-index: 99999999;
    max-height: calc(100vh - 100px); /* ili visina viewporta - visina static menija */
    overflow-y: auto;
}

    .primaryDynamicMenu a {
        color: #fff;
        width: 98%;
        display: block;
    }

.primaryDynamicMenuItem {
    background-color: #240210;
    color: #fff;
    padding: 4px 2px 4px 2px;
    text-align: left;
    z-index: 99999999;
}

.primaryDynamicHover {
    color: #800000;
    background: #9F9F9F;
    z-index: 99999999;
}


select:not(.form-control):not(.modern-select) {
    background-color: #FFF8DC;
    border-radius: 2px;
    border: none;
    padding-left: 3px;
    padding-right: 3px;
    height: 27px;
}

.primaryStaticMenu,
.primaryDynamicMenu {
    position: relative; /* ili absolute/fixed ako već koristiš */
}

/* === BASE CONTAINER === */
.floating-label {
    position: relative;
    margin-bottom: 1.5rem;
    margin-right: 1rem;
}

    .floating-label label.required::after {
        content: "*";
        font-weight: normal;
        margin-left: 0px;
    }

    /* === INVALID STATE === */
    .floating-label.invalid .form-control {
        border-color: Red !important;
        box-shadow: 0 0 0 1px Red !important;
    }

    .floating-label.invalid label {
        color: Red !important;
    }

    /* === INPUT + SELECT === */
    .floating-label input.form-control,
    .floating-label select.form-control {
        background-color: #333333 !important;
        color: #f0fc03;
        padding: 18px 13px;
        border: 2px solid #aaa;
        border-radius: 6px;
        outline: none;
        transition: all 0.2s ease-in-out;
        box-sizing: border-box;
        width: 100%;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

    /* === TEXTAREA === */
    .floating-label textarea.form-control {
        background-color: #333333 !important;
        color: #f0fc03;
        padding: 12px 13px;
        border: 2px solid #aaa;
        border-radius: 6px;
        outline: none;
        transition: all 0.2s ease-in-out;
        box-sizing: border-box;
        width: 100%;
        resize: vertical;
        line-height: 1.5;
        min-height: 60px;
        font-size: 14px;
        font-family: inherit;
    }

    /* === AUTOFILL (Chrome fix) === */
    .floating-label .form-control:-webkit-autofill {
        background-color: transparent !important;
        -webkit-box-shadow: 0 0 0 1000px #333333 inset !important;
        -webkit-text-fill-color: #fff !important;
        transition: background-color 0s ease-in-out 0s;
    }

    /* === LABEL === */
    .floating-label label {
        position: absolute;
        left: 12px;
        top: 12px;
        color: #aaa;
        padding: 0 6px;
        margin-left: -4px;
        background-color: #333333;
        transition: 0.2s ease all;
        pointer-events: none;
        white-space: nowrap;
        z-index: 1;
    }

    /* === FLOATING EFFECT === */
    .floating-label input.form-control:focus + label,
    .floating-label textarea.form-control:focus + label,
    .floating-label input.form-control:not(:focus):not(:placeholder-shown) + label,
    .floating-label textarea.form-control:not(:focus):not(:placeholder-shown) + label,
    .floating-label select.form-control:focus + label {
        top: -8px;
        left: 12px;
        font-size: 12px;
        background-color: #333333;
        padding: 0 4px;
        margin-left: -4px;
        color: #aaa;
        z-index: 1;
    }

    .floating-label.has-value > label {
        top: -8px;
        font-size: 12px;
        padding: 0 4px;
        background-color: #333333;
        color: #aaa;
        z-index: 1;
    }

    /* === FOCUS STATE === */
    .floating-label .form-control:focus {
        border-color: #fff;
        box-shadow: 0 0 0 1px #fff;
        color: #fff;
    }

    /* === SELECT === */
    .floating-label select.form-control {
        padding: 10px 13px;
        padding-right: 40px;
        z-index: 1;
    }

        .floating-label select.form-control option {
            background-color: #333333;
            color: #fff;
        }

.select-like {
    min-height: 39px;
    background-color: #333333;
    color: #aaa;
    border: 2px solid #aaa;
    border-radius: 6px;
    padding: 8px 36px 8px 12px;
    cursor: pointer;
    position: relative;
    width: 100%;
    max-width: 1000px;
    box-sizing: border-box; /* ✅ ključno! */
    transition: border-color 0.2s ease-in-out;
}

    .select-like:hover {
        border-color: #fff;
    }

.ChooserPanel.invalid .select-like {
    border-color: #ff6b6b !important;
    box-shadow: 0 0 0 1px #ff6b6b !important;
}

.clear-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #ff6b6b;
    font-size: 18px;
    cursor: pointer;
    display: none;
}

.floating-label > label {
    position: absolute;
    left: 12px;
    top: 10px;
    color: #aaa;
    background-color: #333333;
    padding: 0 6px;
    transition: 0.2s ease all;
    pointer-events: none;
    font-size: 16px;
}


.select-like .clear-btn {
    display: none;
}

.select-like:has(.RecordValueLabel:not(:empty)) .clear-btn {
    display: inline;
}

.floating-label:has(.select-like.has-value) > label,
.floating-label:has(.select-like:focus-within) > label {
    top: -8px;
    left: 12px;
    font-size: 12px;
    background-color: #333333;
    padding: 0 4px;
    color: #aaa;
    position: absolute;
    z-index: 1;
}

.select-like .RecordValueLabel {
    color: #f0fc03;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
    white-space: nowrap;
}

.textbox-with-button {
    position: relative;
}

    .textbox-with-button .form-control {
        padding-right: 40px; /* prostor za gumb */
    }

.btn-inside {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    height: 26px;
    padding: 0 8px;
    font-size: 14px;
    cursor: pointer;
    border: none;
    background-color: #666;
    color: #fff;
    z-index: 2;
    border-radius: 4px;
}
.floating-label:focus-within > label {
    top: -8px;
    left: 12px;
    font-size: 12px;
    background-color: #333333;
    padding: 0 4px;
    color: #aaa;
    z-index: 1;
}

.readonly-label-wrap {
    position: relative;
    margin-bottom: 1.5rem;
    margin-right: 1rem;
    width: 100%;
}

.readonly-label-caption {
    position: absolute;
    top: -8px;
    left: 12px;
    font-size: 12px;
    background-color: #333333;
    color: #aaa;
    padding: 0 4px;
    z-index: 1;
    pointer-events: none;
    white-space: nowrap; /* sprječava prelazak u novi red */
}

.readonly-label-box {
    display: inline-block;
    background-color: #333333;
    color: #f0fc03 !important;
    border: 2px solid #aaa;
    border-radius: 6px;
    padding: 10px 13px;
    font-family: inherit;
    text-decoration: none;
    height: 40px;
    box-sizing: border-box;
    min-width: 150px;
    text-decoration: underline;
}

.floating-label .datetime-wrapper {
    background-color: #333;
    border: 2px solid #aaa;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 4px 10px;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
}

.datetime-wrapper input {
    background-color: #333 !important;
    color: #f0fc03;
    border: none;
    outline: none;
    font-size: 14px;
    width: 90px;
    border-radius: 0px !important;
}

    .datetime-wrapper input::placeholder {
        color: #777;
    }

.ui-datepicker-trigger {
    background: none;
    border: none;
    color: #f0fc03;
    font-size: 18px;
    cursor: pointer;
}

.floating-label.has-value > label {
    top: -8px;
    font-size: 12px;
    padding: 0 4px;
    background-color: #333333;
    color: #aaa;
    z-index: 1;
}

.datetime-wrapper input:-webkit-autofill,
.datetime-wrapper input:-webkit-autofill:focus,
.datetime-wrapper input:-webkit-autofill:hover,
.datetime-wrapper input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #333 inset !important;
    -webkit-text-fill-color: #f0fc03 !important;
    caret-color: #f0fc03;
}

.status {
    color: #FFF;
    font-size: 20px;
    width: 100%;
    text-align: center;
    border: 2px solid #FFF;
    padding: 8px 30px;
    border-radius: 6px !important;
}

    /* BUTTONS
----------------------------------------------------------*/

.loginButton {
    background-color: #465C82;
    color: #FFF;
    border: none;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 15px;
    width: 300px;
    cursor: pointer;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 15px;
    margin-right: 20px;
}

    .btnMali, .submit, .submitC, .btnTrazi, .PotvrdaButton, .btnMailAttachment, .btnVeliki {
    background-color: #465C82;
    color: #FFF;
    border: none;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 15px;
    min-width: 100px;
    box-shadow: 3px 3px 0 #1f3c5a;
    transition: all 0.1s ease-in-out;
    cursor: pointer;
    text-align: center;
    margin-top: 5px;
}

    .btnMali:active,
    .btnVeliki:active
    .submit:active,
    .submitC:active,
    .btnTrazi:active,
    .PotvrdaButton:active,
    .btnObrada:active,
    .btnStop:active,
    .btnMailAttachment:active {
        transform: translate(1px, 1px);
        box-shadow: none;
    }


.btnObrada {
    background-color: #2E8B57;
    color: #FFF;
    border: none;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 15px;
    min-width: 100px;
    box-shadow: 3px 3px 0 #1e5e3a;
    transition: all 0.1s ease-in-out;
    cursor: pointer;
}

.btnStop {
    background-color: #E53935;
    color: #FFF;
    border: none;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 15px;
    min-width: 100px;
    box-shadow: 3px 3px 0 #992523;
    transition: all 0.1s ease-in-out;
    cursor: pointer;
}

.submit, .submitC {
    width: 100px;
    height: 24px;
    border-radius: 2px;
    font-size: 13px;
}

    .btnMali:hover, .btnVeliki:hover, .submit:hover, .submitC:hover, .btnTrazi:hover, .PotvrdaButton:hover, .btnMailAttachment:hover {
        cursor: pointer;
        filter: alpha(opacity=90);
        opacity: 0.9;
    }

.btnObrada:hover {
    cursor: pointer;
    filter: alpha(opacity=90);
    opacity: 0.9;
}

.btnStop:hover {
    cursor: pointer;
    filter: alpha(opacity=90);
    opacity: 0.9;
}

.btnPoruke {
    background-color: #990033;
    width: 120px;
    height: 28px;
    font-size: 10px;
    padding-bottom: 1px;
    border: 0;
    color: #FFF;
}

    .btnPoruke:hover {
        cursor: pointer;
        filter: alpha(opacity=90);
        opacity: 0.9;
    }

#reqFields {
    margin-top: 10px;
}

input[type=submit][disabled=disabled] {
    background-color: #CCC;
}

.btnBig {
    width: 300px;
    height: 80px;
    border-radius: 4px;
    font-size: 15px;
    padding-bottom: 1px;
    border: 0;
    font-size: 30px;
}

.btnExtraBig {
    width: 600px;
    height: 80px;
    border-radius: 4px;
    font-size: 15px;
    padding-bottom: 1px;
    border: 0;
    font-size: 30px;
}

.closePopUp, .closePopUpImg, .closePromptImg, .closePromptImgKonta, .closePromptImgSastavnice, .closePromptImgZavrsetak, .closePopUpImgIFrame, .closePromptImgProizvod, .closePopUpImgNarudzbe, .closePopUpImgZatvaranjeNarudzbe {
    position: absolute;
    right: 5px;
}

/* BREADCRUMB
----------------------------------------------------------*/

.Breadcrumb {
    background-color: #333333;
    color: #fff;
    padding: 5px 0px 0px 4px;
    border-bottom: 2px solid #fff;
    height: 35px;
}

    .Breadcrumb a {
        color: #fff;
        text-decoration: none;
        padding-left: 6px;
    }

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

.CurrentNode {
    font-variant: small-caps;
    font-size: 20px;
}


/* GRID      
----------------------------------------------------------*/

.ASDAgrid caption {
    text-align: center;
    font-weight: bold;
    padding: 4px;
    color: #FFF;
    background-color: #4F6E8B;
}

ASDAgrid th {
    background-color: #240210 !important;
}

.potpuno td {
    background-color: green !important;
    color: #fff !important;
}

.fali td {
    background-color: red !important;
    color: #fff !important;
}

.btnMailAttachment {
    font-size: small;
    text-align: left;
    margin-bottom: 4px;
    padding: 2px;
    Width: 190px;
    max-width: 180px;
    height: 20px;
}

.width1000 {
    width: 1000px;
}

.width400 {
    width: 400px;
}

.width200 {
    width: 200px;
}

.width100 {
    width: 100px;
}

.width50 {
    width: 50px;
}

.ErrorMessage {
    color: yellow;
}

.ErrorMessageBig {
    color: yellow;
    font-size: 30px;
}

.ErrorMessageBigRed {
    color: red;
    font-size: 30px;
}


.simple_overlay {
    /* must be initially hidden */
    display: none;
    overflow: auto;
    height: 700px;
    width: 1000px;
    /* place overlay on top of other elements */
    z-index: 10000;
    /* styling */
    background-color: #333;
    min-height: 200px;
    border: 1px solid #666;
    /* CSS3 styling for latest browsers */
    -moz-box-shadow: 0 0 90px 5px #000;
    -webkit-box-shadow: 0 0 90px #000;
}

    /* close button positioned on upper right corner */
    .simple_overlay .close {
        background-image: url('');
        position: absolute;
        right: -15px;
        top: -15px;
        cursor: pointer;
        height: 35px;
        width: 35px;
    }

/* MODAL POPUP   
----------------------------------------------------------*/

.modal {
    z-index: 9999999999 !important;
    background-color: #000;
    display: none;
    width: 550px;
    text-align: left;
    border: 2px solid #333;
    opacity: 1;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-box-shadow: 0 0 50px #ccc;
    -webkit-box-shadow: 0 0 50px #ccc;
}

.promptUtrosak {
    width: 850px !important;
    height: 550px !important;
}

.gridJedinice td.CNClass {
    width: 150px !important; /* Fiksna širina kolone */
    max-width: 150px; /* Osigurava da ne prelazi definiranu širinu */
    white-space: normal; /* Omogućava normalno lomljenje teksta */
    word-break: break-all; /* Lomljenje unutar riječi */
    overflow-wrap: break-word; /* Osigurava da se riječi lome unutar ćelije */
    display: block; /* Osigurava da se stilovi primjenjuju unutar ćelije */
}

.modal2 {
    z-index: 9999999999 !important;
    background-color: #fff;
    display: none;
    width: 350px;
    text-align: center;
    border: 30px solid Red;
    font-family: Arial;
    opacity: 1;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-box-shadow: 0 0 50px #ccc;
    -webkit-box-shadow: 0 0 50px #ccc;
}

.PopUp {
    background-color: #fff;
    display: none;
    width: 750px;
    text-align: left;
    border: 2px solid #333;
    min-height: 500px;
    opacity: 1;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-box-shadow: 0 0 50px #ccc;
    -webkit-box-shadow: 0 0 50px #ccc;
}

.PopUpTitle {
    position: relative;
    padding: 3px 15px 3px 15px;
    background-color: #abcdef;
    color: #000;
    border-bottom: 2px solid #333;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    cursor: pointer;
}

.PopUpTitle2 {
    position: relative;
    padding: 5px 15px 5px 15px;
    background-color: #abcdef;
    color: #000;
    border-bottom: 2px solid #333;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
}

.PopUpContent {
    padding: 15px;
}

.iFrame {
    min-height: 550px;
}

#progressBackgroundFilter {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background-color: #000;
    filter: alpha(opacity=50);
    opacity: 0.5;
    z-index: 99999999999;
    text-align: center;
}

#processMessage {
    position: fixed;
    top: 30%;
    left: 43%;
    padding: 10px;
    width: 14%;
    z-index: 999999999999;
    text-align: center;
}



/* HIDEN CONTROLS
----------------------------------------------------------*/

.RecordValueTextBox, .TableToShowLabel, .PopUpTitleLabel, .ChoosenRecordIdTextBox, .ChoosenValueTextBox, .TableToShowPopUp, .OdabirMjestaTextBox, .SetDataButton, .RequiredLabel, .RecordOldIdTextBox, .PartnerIdTextBox, .SetPartnersButton, .NazivOldTextBox, .AdresaDostaveIdTextBox, .AdresaDostaveOldTextBox, .SetAdresaButton, .ProizvodIdTextBox, .SetProizvodiButton, .VozarIdTextBox, .RecordIdTextBox2, .SifraProizvodaOldTextBox, .PanelKolicinaHiden, .BarcodeButton, .BarcodeLabel, .KolicinaHidenTextBox, .CiljnoMjestoButton, .SklMjestoIdTextBox, .SklMjestoOldTextBox, .VozarIdTextBox, .VozarOldTextBox, .SetVozarButton, .SastavniceIdTextBox, .SetSastavniceButton, .PreuzmiSastavnicuButton, .SirovinaIdTextBox, .SifraSirovineOldTextBox, .AmbalazaIdTextBox, .SifraAmbalazeOldTextBox, .PrevButton, .NextButton, .PromjenaMjesalicaButton, .PromjenaPunjenjeButton, .BrisanjeButton, .SelektorTextBox, .Button, .IdentifikacijaButton, .PripremaIdTextBox, .VrstaTextBox, .PostupakIdTextBox, .FokusTextBox, .RefreshButton, .RefreshButtonGO, .PDFButton, .ReproDobIdTextBox, .SetPrimkeButton, .PotvrdaKontroleTextBox, .FocusTextBox, .BojiloIdTextBox, .SifraBojilaOldTextBox, .SetNarudzbeButton, .OdjavaStroja, .NarPosHiden, .SetPaleteButton, .SetDataButton2, DownloadDocButton {
    display: none;
}

.hidden {
    display: none;
}


.partnerForm {
    width: 390px;
    padding: 2px 10px 10px 10px;
    border-radius: 6px;
    border: 1px solid #959595;
}

    .partnerForm h2 {
        margin-top: 0px;
        margin-bottom: 5px;
        margin-left: 2px;
    }

    .partnerForm a {
        text-decoration: none;
        color: #000;
    }

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

    .partnerForm .linija {
        margin-top: 5px;
    }

    .partnerForm input[type=text] {
        background-color: #fff;
        border-radius: 2px;
        border: none;
        width: 370px;
        padding: 1px 10px 1px 10px;
        height: 18px;
        color: Blue;
    }

        .partnerForm input[type=text]:focus {
            background-color: #FFFFD9;
        }

.description {
    margin-bottom: 10px;
    padding-left: 10px;
}

.small {
    font-size: 11px;
}

.left {
    float: left;
}

.marginLeft10 {
    margin-left: 10px;
}


.narHeaderForm td, .narHeaderForm th {
    padding-top: 10px;
}

.narHeaderForm th {
    text-align: left;
}

.narHeaderForm input[type=text] {
    background-color: #FFF8DC;
    border-radius: 2px;
    border: none;
    width: 100px;
    padding: 1px 10px 1px 10px;
    height: 18px;
    color: #000;
}

.narHeaderForm select {
    background-color: #FFF8DC;
    border-radius: 2px;
    border: none;
    width: 100px;
    padding: 1px 10px 1px 10px;
    height: 21px;
    color: #000;
}

    .narHeaderForm input[type=text]:focus, .narHeaderForm select:focus {
        background-color: #fff;
    }

.narHeaderForm th {
    padding-right: 10px;
}


.ASDAtable {
    color: #fff;
    table-layout: fixed;
}

    .ASDAtable td {
        border-top: 1px solid #fff;
        border-left: 1px solid #fff;
        padding: 1px 3px 1px 3px;
        text-align: center;
        vertical-align: baseline;
        overflow: hidden;
    }

        .ASDAtable td:first-child {
            font-weight: bold;
        }

        .ASDAtable td:last-child {
            border-right: solid 1px #fff;
            border-bottom: solid 1px #fff;
        }

    .ASDAtable tr:last-child td {
        border-bottom: solid 1px #fff;
    }

    .ASDAgrid tr:last-child td {
        border-bottom: solid 1px #fff;
    }

    .ASDAtable tr:nth-child(2) td {
        border-top: 0;
        white-space: nowrap;
        font-weight: bold;
    }

    .ASDAtable tr:first-child td {
        font-weight: bold;
        background-color: #240210;
        color: #fff;
    }

    .ASDAtable tr:nth-child(3) td {
        font-weight: bold;
        vertical-align: middle;
    }

        .ASDAtable tr:nth-child(3) td:first-child {
            font-size: 11px;
        }

    .ASDAtable tr:nth-child(4) td:first-child {
        font-size: 11px;
    }

    .ASDAtable tr:nth-child(5) td:first-child {
        font-size: 11px;
    }

    .ASDAtable tr:nth-child(5) td {
        border-bottom: double 4px #fff;
        vertical-align: middle;
    }

    .ASDAtable tr:nth-child(4) td {
        vertical-align: middle;
    }

.ASDAtableFields {
    color: #fff;
    table-layout: fixed;
}

    .ASDAtableFields td {
        border-top: 1px solid #fff;
        border-left: 1px solid #fff;
        padding: 1px 3px 1px 3px;
        text-align: center;
        vertical-align: baseline;
        overflow: hidden;
    }

        .ASDAtableFields td:last-child {
            border-right: solid 1px #fff;
        }

    .ASDAtableFields input[type=text] {
        background-color: #FFF8DC;
        border-radius: 2px;
        border: none;
        width: 100px;
        padding: 1px 3px 1px 3px;
        height: 18px;
        color: #000;
    }

        .ASDAtableFields input[type=text]:focus {
            background-color: #fff;
        }

.ASDAtable2 {
    color: Black;
    table-layout: fixed;
}

    .ASDAtable2 td {
        border-top: 1px solid #000;
        border-left: 1px solid #000;
        padding: 1px 3px 1px 3px;
        text-align: center;
        vertical-align: baseline;
        overflow: hidden;
    }

        .ASDAtable2 td:first-child {
            font-weight: bold;
        }

        .ASDAtable2 td:last-child {
            border-right: solid 1px #000;
        }

    .ASDAtable2 tr:last-child td {
        border-bottom: solid 1px #000;
    }

    .ASDAtable2 tr:nth-child(2) td {
        border-top: 0;
        white-space: nowrap;
        font-weight: bold;
    }

    .ASDAtable2 tr:first-child td {
        font-weight: bold;
    }

    .ASDAtable2 tr:nth-child(3) td {
        font-weight: bold;
        vertical-align: middle;
    }

        .ASDAtable2 tr:nth-child(3) td:first-child {
            font-size: 11px;
        }

    .ASDAtable2 tr:nth-child(4) td:first-child {
        font-size: 11px;
    }

    .ASDAtable2 tr:nth-child(5) td:first-child {
        font-size: 11px;
    }

    .ASDAtable2 tr:nth-child(5) td {
        border-bottom: double 4px #000;
        vertical-align: middle;
    }

    .ASDAtable2 tr:nth-child(4) td {
        vertical-align: middle;
    }

.ASDAtableFields2 {
    color: #fff;
    table-layout: fixed;
}

    .ASDAtableFields2 td {
        border-top: 1px solid #000;
        border-left: 1px solid #000;
        padding: 1px 3px 1px 3px;
        text-align: center;
        vertical-align: baseline;
        overflow: hidden;
    }

        .ASDAtableFields2 td:last-child {
            border-right: solid 1px #000;
        }

    .ASDAtableFields2 input[type=text], .ASDAtableFields2 textarea {
        background-color: #fff;
        border-radius: 2px;
        border: none;
        width: 100px;
        padding: 1px 3px 1px 3px;
        height: 18px;
        color: Blue;
    }

        .ASDAtableFields2 input[type=text]:focus, .ASDAtableFields2 textarea:focus {
            background-color: Yellow;
        }

.ASDAtable3 {
    color: #fff;
    table-layout: fixed;
}

    .ASDAtable3 td {
        border-top: 1px solid #000;
        border-left: 1px solid #000;
        padding: 1px 3px 1px 3px;
        text-align: center;
        vertical-align: baseline;
        overflow: hidden;
    }

        .ASDAtable3 td:first-child {
            font-weight: bold;
        }

        .ASDAtable3 td:last-child {
            border-right: solid 1px #000;
        }

    .ASDAtable3 tr:last-child td {
        border-bottom: solid 1px #000;
    }

    .ASDAtable3 tr:nth-child(2) td {
        border-top: 0;
        white-space: nowrap;
        font-weight: bold;
    }

    .ASDAtable3 tr:first-child td {
        font-weight: bold;
    }

    .ASDAtable3 tr:nth-child(3) td {
        font-weight: bold;
        vertical-align: middle;
    }

        .ASDAtable3 tr:nth-child(3) td:first-child {
            font-size: 11px;
        }

    .ASDAtable3 tr:nth-child(4) td:first-child {
        font-size: 11px;
    }

    .ASDAtable3 tr:nth-child(5) td:first-child {
        font-size: 11px;
    }

    .ASDAtable3 tr:nth-child(5) td {
        border-bottom: double 4px #000;
        vertical-align: middle;
    }

    .ASDAtable3 tr:nth-child(4) td {
        vertical-align: middle;
    }

.ASDAtableFields3 {
    color: Blue;
    table-layout: fixed;
}

    .ASDAtableFields3 td {
        border-top: 1px solid #000;
        border-left: 1px solid #000;
        padding: 1px 3px 1px 3px;
        text-align: center;
        vertical-align: middle;
        overflow: hidden;
    }

        .ASDAtableFields3 td:last-child {
            border-right: solid 1px #000;
        }

    .ASDAtableFields3 input[type=text], .ASDAtableFields3 textarea {
        background-color: #fff;
        border-radius: 2px;
        border: none;
        width: 100px;
        padding: 1px 3px 1px 3px;
        height: 18px;
        color: Blue;
    }

        .ASDAtableFields3 input[type=text]:focus, .ASDAtableFields3 textarea:focus {
            background-color: Yellow;
        }

.Category {
    border: 1px solid #fff;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 5px;
    display: inline-block;
}

.CategoryTitle {
    text-align: center;
    background-color: #465C82;
    color: #fff;
    font-size: 12px;
    padding: 2px;
}

.CategoryIcons {
    padding-top: 3px;
    padding-bottom: 3px;
}

.BigIcon {
    width: 100px; /* Širina ikone */
    vertical-align: top;
    text-align: center; /* Centrira sadržaj unutar div-a */
    margin: 5px; /* Razmak između prečaca */
    padding: 0px; /* Unutarnji razmak */
    cursor: pointer; /* Pokazivač miša */
    display: inline-block; /* Omogućava horizontalno poravnanje prečaca */
    background-color: transparent; /* Pozadinska boja */
}

    .BigIcon img {
        width: 64px; /* Veličina slike */
        height: 64px; /* Veličina slike */
        display: block; /* Blok za središnje poravnanje slike */
        margin: 0 auto; /* Centrira sliku unutar div-a */
        border-radius: 8px; /* Zaobljeni rubovi */
    }

    .BigIcon div {
        margin-top: 15px; /* Razmak između slike i teksta */
    }

    .BigIcon span {
        margin-top: 10px;
        font-size: 14px; /* Veličina fonta */
        color: #fff; /* Boja teksta */
        white-space: normal; /* Onemogućava prelamanje teksta */
        overflow: hidden; /* Sakriva tekst koji ne stane */
        text-overflow: ellipsis; /* Dodaje tri točke na kraju ako tekst ne stane */
        display: block; /* Blok element za tekst */
    }

.HomeIcon {
    width: 70px; /* Širina ikone */
    vertical-align: top;
    text-align: center; /* Centrira sadržaj unutar div-a */
    margin: 0px; /* Razmak između prečaca */
    padding: 0px; /* Unutarnji razmak */
    cursor: pointer; /* Pokazivač miša */
    display: inline-block; /* Omogućava horizontalno poravnanje prečaca */
    background-color: transparent; /* Pozadinska boja */
}

    .HomeIcon img {
        width: 40px; /* Veličina slike */
        height: 40px; /* Veličina slike */
        display: block; /* Blok za središnje poravnanje slike */
        margin: 0 auto; /* Centrira sliku unutar div-a */
        border-radius: 4px; /* Zaobljeni rubovi */
    }

    .HomeIcon div {
        margin-top: 3px; /* Razmak između slike i teksta */
    }

    .HomeIcon span {
        margin-top: 5px;
        font-size: 12px; /* Veličina fonta */
        color: #fff; /* Boja teksta */
        white-space: normal; /* Onemogućava prelamanje teksta */
        overflow: hidden; /* Sakriva tekst koji ne stane */
        text-overflow: ellipsis; /* Dodaje tri točke na kraju ako tekst ne stane */
        display: block; /* Blok element za tekst */
    }

.SmallIcon {
    float: left;
    padding: 10px;
    position: relative;
    text-align: center;
    color: #fff;
    cursor: pointer;
    z-index: 0;
    width: 32px;
    height: 32px;
}

.bigList {
    list-style: none;
    margin: 0px;
    padding: 10px;
    font-size: 30px;
}

    .bigList li {
        border: solid 1px #000;
        padding: 10px;
        margin: 20px;
        border-radius: 10px;
        text-align: center;
        width: 500px;
        background-color: #fff;
        color: #000;
    }

    .bigList a {
        text-decoration: none;
    }

.pripremaList {
    list-style: none;
    margin: 0px;
    padding: 0px;
    font-size: 20px;
}

    .pripremaList li {
        border: solid 1px #000;
        padding: 10px;
        margin-right: 20px;
        border-radius: 10px;
        text-align: center;
        width: 300px;
        background-color: #fff;
        color: #000;
        float: left;
    }

    .pripremaList a {
        text-decoration: none;
    }


/* SCHEDULE  
----------------------------------------------------------*/

.schedule-table {
    font-size: 15px;
    border-spacing: 0;
    border-collapse: collapse;
    padding: 0px;
    color: #5B6271;
}

    .schedule-table td {
        border: solid 1px #A0A0A0;
        padding: 5px;
        text-align: center;
    }

.mjesecGodina {
    text-align: left;
    font-weight: bold;
    background-color: #FFD554;
}

.prvaKolona {
    background-color: #CDCDCD;
    white-space: nowrap;
}

.mjesalicatd {
}

.tdLast {
    background-color: #FFF;
    border-right: solid 2px #A0A0A0;
    padding: 0px;
}

.tdRest {
    background-color: #FFF;
    padding: 0px;
}

.helper {
    border: solid 1px #9F9F9F;
    background-color: #FFF8DC;
    padding: 2px;
    border-radius: 5px;
    text-align: center;
    font-size: 11px;
}

.nalog {
    padding: 2px;
    border-radius: 5px;
    text-align: center;
    font-size: 11px;
    margin: 3px;
    max-width: 120px;
}

.nalog2 {
    padding: 2px;
    border-radius: 5px;
    text-align: center;
    font-size: 11px;
    margin: 3px;
    max-width: 120px;
}

.normal {
    border: solid 1px #9F9F9F;
    background-color: #FFF8DC;
    color: #000;
}

.normal a:link, .normalca:hover, .normal:visited {
    color: blue;
}

.odabrani {
    border: double Blue;
    background-color: #FFF8DC;
}

.hitni {
    border: double Red;
    background-color: #FFF8DC;
    color: #000;
}

.spreman {
    background-color: #FFD554;
    color: #000;
}

.odobren {
    background-color: #4682B4;
    color: #FFF;
}

.pokrenut {
    background-color: Green;
    color: #FFF;
}

.zastoj {
    background-color: Red;
    color: #FFF;
}

.zavrsen {
    background-color: #D2B48C;
}

.Trash {
    padding-right: 50px;
}

.legenda {
    padding: 5px;
    border-radius: 5px;
    text-align: center;
    font-size: 11px;
    width: 55px;
}


.DDSarza {
    min-width: 150px;
}

.papir {
    background-image: url('');
    background-repeat: no-repeat;
    width: 580px;
    padding: 35px 20px 20px 20px;
    font-size: 15px;
}

.nalogPostupci {
    font-size: 15px;
    color: #000;
    border: solid 5px Green;
    padding: 0px 20px 0px 20px;
}

    .nalogPostupci td {
        padding: 10px;
        border-bottom: solid 1px #000;
        vertical-align: baseline;
    }

.skenirano {
    font-weight: normal;
    font-size: 12px;
}

.aktivan {
    color: Blue;
    font-weight: bold;
}

.tabela {
    border-collapse: collapse;
    color: #fff;
    width: 100%;
}

    .tabela th {
        border: 1px solid #fff;
        background-color: Gray;
        color: #fff;
        padding: 3px;
        white-space: normal;
    }

    .tabela td {
        border: 1px solid #fff;
        padding: 3px;
        color: #fff;
    }

.tabela2 {
    border-collapse: collapse;
    color: #FFF8DC;
}

    .tabela2 th {
        border: 1px solid black;
        background-color: Gray;
        color: #fff;
        padding: 3px;
    }

    .tabela2 td {
        border: 1px solid black;
        padding: 3px;
    }

.tabela3 {
    border-collapse: collapse;
    color: #000;
    width: 100%;
}

    .tabela3 th {
        border: 1px solid #000;
        background-color: #fff;
        color: #000;
        padding: 3px;
        white-space: normal;
    }

    .tabela3 td {
        border: 1px solid #000;
        padding: 3px;
        color: #000;
    }

        .tabela3 td a {
            color: #000;
            text-decoration: none;
        }

.suma {
    background-color: Gray;
    color: #fff;
    font-weight: bold;
}

.total {
    border-top: double 1px #000;
    background-color: Gray;
    color: #fff;
    font-weight: bold;
}

.black {
    color: #000;
}

.right {
    text-align: right;
}

.RedCircle {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 12px;
    font-weight: bold;
    background-color: Red;
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    border-radius: 15px;
    border: solid 1px Grey;
    z-index: 10;
}

div.RedCircleSmall {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 12px;
    font-weight: bold;
    background-color: Red;
    width: 16px;
    height: 16px;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    border-radius: 15px;
    border: solid 1px Grey;
    z-index: 10;
}

input .PageButton {
    font-weight: normal;
}

.CurrentPage {
    font-weight: bold;
}

.okvir {
    border: solid 1px #000;
    padding: 20px;
}

.kategorije {
    position: absolute;
    border: solid 2px #000;
    background-color: #240210;
    padding: 20px;
    width: 600px;
}

.kategorije_Users {
    position: absolute;
    border: solid 2px #000;
    background-color: #240210;
    padding: 20px;
    width: 470px;
}

.kategorijePro {
    position: absolute;
    border: solid 2px #000;
    background-color: #240210;
    padding: 20px;
    width: 600px;
}

.centar {
    text-align: center;
}

.bread-crumb-edit-object {
    color: #00FF00;
    font-weight: bold;
}

.Box {
    border: solid 1px #000;
    padding: 10px;
}

.image-midle {
    vertical-align: middle;
}


.repromaterijal {
    height: 30px;
    padding-top: 5px;
    margin-top: 15px;
    margin-bottom: 15px;
}

    .repromaterijal option {
        padding: 10px;
    }

.ComboBoxGrid {
    position: absolute;
    background-color: #fff;
    border: solid 3px #000;
}

.ListViewItem {
    float: left;
    padding: 10px;
    width: 170px;
}

.ListViewItem_Users {
    float: left;
    padding: 2px;
    width: 150px;
}

td {
    white-space: normal;
}

ins {
    background-color: #cfc;
    text-decoration: inherit;
}

del {
    color: #999;
    background-color: #FEC8C8;
}

ins.mod {
    background-color: #FFE1AC;
}

.kalendar td, .kalendar th {
    border: solid 1px rgb(150, 150, 150);
    text-align: center;
}

.kalendar td {
    color: #fff;
}

.kalendar td {
    color: #fff;
}

.kalendar th {
    text-align: center;
    height: 30px;
}

.kalendarCell {
    width: 80px;
    height: 40px;
    position: relative;
}

.dan {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 0.8em;
}

.izvan {
    color: rgb(170, 170, 170);
}

.dospjece {
    padding-top: 19px;
}

.pregledRacuna, .pregledInfo {
    position: absolute;
    left: 50px;
    top: 0px;
    z-index: 500;
    background-color: #000;
    border: solid 4px rgb(200, 150, 150);
    border-radius: 10px;
    padding: 10px;
    max-height: 300px;
    overflow: auto;
}

.pregledInfo2 {
    position: absolute;
    z-index: 500;
    background-color: rgb(240, 235, 232);
    border: solid 4px rgb(200, 150, 150);
    border-radius: 10px;
    padding: 10px;
    max-height: 300px;
    overflow: auto;
}

.pregledRacuna td, .pregledRacuna th {
    padding: 5px;
    border-collapse: collapse;
    white-space: nowrap;
}

.current {
    background-color: rgb(63 37 37);
}

.kalendar {
    float: left;
    padding: 10px;
}

.kalendar a {
    color: yellow;
}

.tabela a {
    text-decoration: none;
    font-style: normal;
    color: #fff;
}

.tabela a:hover {
    text-decoration: underline;
    color: #FFF8DC;
}

.tabela2 a {
    text-decoration: none;
    font-style: normal;
    color: #FFF8DC;
}

    .tabela2 a:hover {
        text-decoration: underline;
        color: #fff;
    }

#popupIframe {
    width: 800px;
}

.datumTB {
    width: 70px;
}

.gridMogucaProduction {
    position: absolute;
    background: #fff;
}


.Root1 {
    font-weight: bold;
}

.Konto2 {
    background-color: #FF9966;
}

    .Konto2 td:first-child {
        padding-left: 15px;
    }

.Konto3 {
    background-color: #FFAD85;
}

    .Konto3 td:first-child {
        padding-left: 30px;
    }

.Konto4 {
    background-color: #FFC2A3;
}

    .Konto4 td:first-child {
        padding-left: 45px;
    }

.Konto5 {
    background-color: #FFD6C2;
}

    .Konto5 td:first-child {
        padding-left: 60px;
    }

.Konto6 {
    background-color: #FFEBE0;
}

    .Konto6 td:first-child {
        padding-left: 85px;
    }

.Konto7 {
    background-color: #FFEBE0;
}

    .Konto7 td:first-child {
        padding-left: 105px;
    }

.Konto8 {
    background-color: #FFEBE0;
}

.Konto7 td:first-child {
    padding-left: 135px;
}

.multilineLabel {
    white-space: normal;
    display: block;
    font-size: 16px;
}

.multilineText {
    width: 100%;
    min-height: 60px;
    font-size: 18px;
}

tabel td .summaryLabel {
    display: block;
    white-space: normal;
    line-height: 2.6;
    font-family: Arial, sans-serif;
    font-size: medium;
}

#dropzone, #dropzoneMessage {
    border: 2px dashed #999;
    border-radius: 10px;
    padding: 40px;
    text-align: center;
    color: #ccc;
    font-size: 18px;
    width: 580px;
}

    #dropzone.dragover, #dropzoneMessages.dragover {
        background-color: #f0f0f0;
        border-color: #333;
    }

#previewMessage {
    margin-top: 10px;
}

    #previewMessage img {
        max-width: 80px;
        max-height: 80px;
        display: block;
        margin: 5px auto;
        border-radius: 6px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

.messagesGrid .message-image {
    max-width: 300px;
    max-height: 300px;
    margin-top: 8px;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    display: block;
}

.messagesGrid a, .messagesGrid a:hover, .messagesGrid a:visited {
    color: #000;
}

.show-more-link {
    display: inline-block;
    margin-top: 5px;
    color: #0066cc;
    cursor: pointer;
}

.conversation {
    max-width: 500px;
    overflow: hidden;
}

.toDo {
    margin-top: 20px;
}

    .toDo > table {
        border-collapse: separate;
        border-spacing: 10px 0;
    }

        .toDo > table > tbody > tr > th {
            padding: 5px;
            background-color: #465C82;
            color: #fff;
            border: 1px solid #fff;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

        .toDo > table > tbody > tr > td {
            padding: 10px;
            border: 1px solid #fff;
        }

        .toDo > table > tbody > tr:nth-child(2) > td {
            text-align: center;
        }

    .toDo .floating-label {
        margin-bottom: 0px !important;
    }

.segmented-bar {
    display: inline-flex;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    width: fit-content;
}

    .segmented-bar .segment {
        flex: 1;
        padding: 5px 10px;
        background-color: #f0f0f0;
        border: none;
        cursor: pointer;
        font-weight: bold;
        color: #333;
        transition: background-color 0.2s ease;
        width: 100px;
    }

        .segmented-bar .segment:hover {
            background-color: #e0e0e0;
        }

        .segmented-bar .segment.active {
            background-color: #465C82;
            color: #fff;
        }

.plus-button {
    background-color: #465C82;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 16px;
    cursor: pointer;
    max-height: 28px;
}

    .plus-button:hover {
        background-color: #3a4f6e;
    }

.modalHome {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    color: #000 !important;
}

    .modalHome h2 {
        color: #000 !important;
    }

.modal-content {
    background-color: white;
    margin: 10% auto;
    padding: 20px;
    border-radius: 10px;
    width: 300px;
    box-shadow: 0 0 10px #444;
    display: block;
    flex-direction: column;
    gap: 10px;
    max-height: 50vh;
}

.modal-content2 {
    background-color: white;
    margin: 10% auto;
    padding: 20px;
    border-radius: 10px;
    width: 700px;
    box-shadow: 0 0 10px #444;
    display: block;
    flex-direction: column;
    gap: 10px;
}

    .modal-content h2 {
        margin-top: 0;
        text-align: center;
    }

.modal-content2 h2 {
    margin-top: 0;
    text-align: center;
}

.popup-input {
    padding: 6px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 12px;
}

    .popup-input.error {
        border: 1px solid red;
        background-color: #ffecec;
    }

    .popup-input:focus {
        outline: none;
        border-color: #465C82;
    }

.modal-actions {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 20px;
}

.cancel-button,
.save-button {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.cancel-button {
    background-color: #ccc;
}

.save-button {
    background-color: #465C82;
    color: white;
}

.projectGrid {
    width: 100%;
}

.taskGrid {
    width: 100%;
}

.taskGrid td {
    width: 100%;
}

.cardGrid tr {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* razmak između kartica */
}

.cardGrid td {
    padding: 10px 0;
    width: 100%;
    box-sizing: border-box;
}

.project-card {
    background-color: white;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 8px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background-color 0.25s ease;
    width: 350px;
}

    .project-card:hover {
        background-color: #f5f5f5;
    }

    .project-card.selected-card {
        background-color: #e6f0ff; /* svijetloplava kad je selektirano */
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
        border: 2px solid red;
    }

.task-card {
    background-color: white;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 8px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background-color 0.25s ease;
    width: 400px;
}

    .task-card:hover {
        background-color: #f5f5f5;
    }

    .task-card.selected-card {
        background-color: #e6f0ff; /* svijetloplava kad je selektirano */
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
        border: 2px solid red;
    }

.project-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #000;
    max-width: 400px;
    white-space: pre-wrap;
    word-break: break-word;
}

.project-meta {
    font-size: 14px;
    color: #555;
    margin-bottom: 12px;
    line-height: 1.6;
}

.project-assignee {
    font-size: 16px;
    color: #555;
    margin-bottom: 12px;
}

.project-description-wrapper {
    position: relative;
    max-width: 400px;
    background-color: antiquewhite;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 12px;
    box-sizing: border-box;
}

.project-description {
    font-size: 14px;
    color: #555;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 60px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

    .project-description.expanded {
        max-height: none;
    }

.read-toggle {
    font-size: 13px;
    color: blue;
    cursor: pointer;
    display: block;
    text-align: right;
    margin-top: 5px;
}

.project-actions {
    display: flex;
    gap: 10px;
}

.emptyGrid {
    color: #fff;
}