:root {
    --folder-width: 200px;
    --folder-angle: -50deg;
}


/*
input {
    opacity: 0;
}

label {
    cursor: pointer;
}



.folder {
    position: relative;
    width: var(--folder-width);
    height: calc(var(--folder-width) / 100 * 75);
    perspective: calc(var(--folder-width) * 5);
}

    .folder span::before,
    .folder span::after,
    .folder::before,
    .folder::after {
        position: absolute;
        content: "";
        border-radius: calc(var(--folder-width) / 100 * 5);
    }

    .folder::before {
        width: 100%;
        height: 92%;
        bottom: 0;
        background-color: #cca352;
    }

    .folder span::after {
        width: 90%;
        height: 85%;
        bottom: 0;
        left: 5%;
        background-color: #fff;
        z-index: 2;
        transition: transform 250ms ease 0ms;
        transform: translate3d(0px, 0px, 0px);
    }

    .folder span::before {
        background-color: #ffcc66;
        width: 100%;
        height: 92%;
        bottom: 0;
        left: 0;
        z-index: 3;
        content: 'Click me...';
        transition: transform 500ms ease 0ms;
        transform-origin: 0 100% 0;
        outline: 1px solid transparent; 
        transform-style: preserve-3d;
        
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .folder::after {
        top: 0;
        left: 0;
        width: 40%;
        height: 50%;
        background-color: #cca352;
        z-index: 1;
    }

    .folder input:checked + span::before {
        transform: rotateX(var(--folder-angle));
    }

    .folder input:checked + span::after {
         transform: translate3d(0px, -5px, 0px);
         transition: transform 250ms ease 500ms;
         box-shadow: 0 -2px 5px -2px rgba(0,0,0,0.4);
    }

    */

.folder-container {
    width:100%;
    display:flex;
    flex-direction:row;
    padding-top:10px;
}



.folder {
    position: relative;
    width: var(--folder-width);
    height: calc(var(--folder-width) / 100 * 75);
    perspective: calc(var(--folder-width) * 5);
    z-index: 1;
    margin-right: 10px;
}

    .folder .folder-body {
        position: absolute;
        background-color: #ffcc66;
        z-index: 2;
        border-radius: calc(var(--folder-width) / 100 * 5);
        top: 17px;
        right: 0;
        left: 0;
        bottom: 0;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items:center;
        padding:10px;
    }

    .folder .folder-card {
        position:absolute;
        width: 40%;
        height: 30%;
        background-color: #cca352;
        top: 3px;
        left: 0;
        z-index: 1;
        border-radius: calc(var(--folder-width) / 100 * 5);
    }

    .folder:hover .folder-body {
        border: 1px solid #b88e3b;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(184, 142, 59, .6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(184, 142, 59, .6);
    }

    .folder:hover .folder-card {
        top: 0px;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(184, 142, 59, .6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(184, 142, 59, .6);
    }




/*edit kompomenta*/
.subjectNoteBackground {
    background-color: #feff9c;
}
    .subjectNoteBackground:focus {
        background-color: #feff9c;
    }



    .subjectNoteBackground::-moz-placeholder {
        color: #8a939e !important;
        opacity: 1;
    }

    .subjectNoteBackground::placeholder {
        color: #8a939e !important;
        opacity: 1;
    }




/**/
.subjectContainer {
    border: 1px solid rgba(0,0,0,.075);
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    padding: 10px;
    gap: 0px;
}

    .subjectElement {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-bottom: 20px;
        border: 3px dashed transparent;
        padding: 5px;
    }

    .subjectElement:last-child {
        /*padding-bottom: 0px;*/
    }

    .subjectElement:hover {
        border: 3px dashed #b8baba;
    }

    .subjectElement .subjectElementHeader {
        display: flex;
        flex-direction: row;
    }

        .subjectElement .subjectElementHeader .subjectElementMarker {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            min-width:60px;
        }
            .subjectElement .subjectElementHeader .subjectElementMarker .marker {
                /*background-color: #3cc4f1;
                color: white;*/
                border-radius: 5px;
                font-size: 13px;
                padding-left: 3px;
                padding-right: 3px;
                margin-top: auto;
                margin-bottom: auto;
                min-width: 60px;
                text-align: center;
            }

        .subjectElement .subjectElementHeader .subjectElementTitle {
            padding-left: 10px;
            flex: 1;
        }

        .subjectElement .subjectElementHeader .subjectElementControls {
            width: 120px;
            padding-left: 10px;
            display: flex;
            flex-direction: row;
        }

            .subjectElement .subjectElementHeader .subjectElementControls .up {
                font-size: 29px;
                color: var(--bs-primary);
                cursor: pointer;
            }
            .subjectElement .subjectElementHeader .subjectElementControls .down {
                font-size: 29px;
                padding-left: 5px;
                color: var(--bs-secondary);
                cursor: pointer;
            }

            .subjectElement .subjectElementHeader .subjectElementControls .move-handler {
                /*padding-left: 5px;*/
                /*color: linear-gradient(var(--bs-primary), var(--bs-secondary));*/
                /*cursor: pointer;*/
                /*background-color: linear-gradient(#428bca, #6c757d);*/
                /*color: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);*/
                
                background-image: linear-gradient(to bottom, var(--bs-primary), var(--bs-secondary));
                -webkit-background-clip: text; 
                background-clip: text;
                color: transparent;
            }

            .subjectElement .subjectElementHeader .subjectElementControls .gear {
                font-size: 20px;
                padding-left: 5px;
                cursor: pointer;
                margin-left: auto;
                
                align-self: center
            }

    .subjectElement .subjectElementBody {
        padding-left: 70px;
    }

        .subjectElement .subjectElementBody .note {
            background-color: #feff9c;
            /*
            line-height: 21px;
            padding-left: 70px;
            padding-right: 10px;
            background-image: url(https://static.tumblr.com/maopbtg/E9Bmgtoht/lines.png), url(https://static.tumblr.com/maopbtg/nBUmgtogx/paper.png);
            background-image: url(../Img/linesTArea.png), url(../Img/paper.png);
            background-repeat: repeat-y, repeat;
            overflow: hidden;
            resize: none;
            */
        }


/*podelementi*/
        .subjectElement .subjectElementBody .subjectSubElementContainer {
            display: flex;
            flex-direction: column;
            padding-top: 10px;
            gap: 0px;
        }

            .subjectElement .subjectElementBody .subjectSubElementContainer .subjectSubElement {
                display: flex;
                flex-direction: row;
                border: 3px solid transparent;
            }

                .subjectElement .subjectElementBody .subjectSubElementContainer .subjectSubElement:hover {
                    border: 3px dashed #e6e6e6;
                }

                .subjectElement .subjectElementBody .subjectSubElementContainer .subjectSubElement .subjectSubElementMarker {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-content: center;

                }

                    .subjectElement .subjectElementBody .subjectSubElementContainer .subjectSubElement .subjectSubElementMarker .marker {
                        border: 1px solid black;
                        color: black;
                        border-top-left-radius: 10px;
                        border-top-right-radius: 10px;
                        font-size: 13px;
                        padding-left: 8px;
                        padding-right: 8px;
                        min-width: 80px;
                        text-align: center;
                    }

                .subjectElement .subjectElementBody .subjectSubElementContainer .subjectSubElement .subjectSubElementTitle {
                    padding-left: 10px;
                    flex: 1;
                }

                .subjectElement .subjectElementBody .subjectSubElementContainer .subjectSubElement .subjectSubElementControls {
                    width: 120px;
                    padding-left: 10px;
                    display: flex;
                    flex-direction: row;
                    padding-right: 20px;
                }

                    .subjectElement .subjectElementBody .subjectSubElementContainer .subjectSubElement .subjectSubElementControls .up {
                        font-size: 29px;
                        color: var(--bs-primary);
                        cursor: pointer;
                    }

                    .subjectElement .subjectElementBody .subjectSubElementContainer .subjectSubElement .subjectSubElementControls .down {
                        font-size: 29px;
                        padding-left: 5px;
                        color: var(--bs-secondary);
                        cursor: pointer;
                    }

                    .subjectElement .subjectElementBody .subjectSubElementContainer .subjectSubElement .subjectSubElementControls .move-handler {
                        background-image: linear-gradient(to bottom, var(--bs-primary), var(--bs-secondary));
                        -webkit-background-clip: text;
                        background-clip: text;
                        color: transparent;
                    }

                    .subjectElement .subjectElementBody .subjectSubElementContainer .subjectSubElement .subjectSubElementControls .gear {
                        font-size: 20px;
                        padding-left: 5px;
                        cursor: pointer;
                        margin-left: auto;
                        align-self: center
                    }




.subjectElementMarker .markerRP,
.subjectPreviewElementHeader .markerRP {
    background-color: #1976d2;
    color: white;
}
.subjectElementMarker .markerSP,
.subjectPreviewElementHeader .markerSP {
    background-color: #9c27b0;
    color: white;
}
.subjectElementMarker .markerPM,
.subjectPreviewElementHeader .markerPM {
    background-color: #009688;
    color: white;
}
.subjectElementMarker .markerOB,
.subjectPreviewElementHeader .markerOB {
    background-color: #ff9800;
    color: white;
}
.subjectElementMarker .markerUG,
.subjectPreviewElementHeader .markerUG {
    background-color: #c2185b;
    color: white;
}
.subjectElementMarker .markerKO,
.subjectPreviewElementHeader .markerKO {
    background-color: #e64a19;
    color: white;
}
.subjectElementMarker .markerLA,
.subjectPreviewElementHeader .markerLA {
    background-color: #ee5f5b;
    color: white;
}
.subjectElementMarker .markerPS,
.subjectPreviewElementHeader .markerPS {
    background-color: #19c0e6;
    color: white;
}
.subjectElementMarker .markerLink,
.subjectPreviewElementHeader .markerLink {
    background-color: white;
    color: black;
    border: 1px solid black;
}
.subjectElementMarker .markerBeleska,
.subjectPreviewElementHeader .markerBeleska {
    background-color: #569da9;
    color: white;
}





.subjectContainer .beginMoveBackground {
    animation: none !important;
    background-color: #C8EBFB !important;
}

.subjectContainer .move-handler {
    font-size: 20px;
    padding-left: 10px;
    cursor: grab;
    align-self: center;
}


.subjectContainer .animate-moved {
    animation: background-fade 2s forwards;
}
@keyframes background-fade {
    0% {
        background: #FFFFFF;
    }

    50% {
        background: #FFD700;
    }
    99.9% {
        background: #FFFFFF;
    }

    100% {
        background: #FFFFFF;
    }
}




#menu_elements_options,
#menu_subelements_options,
#menu_subject_options {
    position: absolute;
    display: none;
    z-index: 2;
}

.predmeti-title {
    font-size: 18px;
    font-weight: bold;
}

/*-----------------------------------------------------------------------------------------------------------*/
/*preview kompomenta*/
.subjectsPreviewContainer {
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 6px;
}



.subjectPreview {
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 6px;
    /*background-color: #f1f1f1;*/
    border-radius: 10px;
    border: 1px solid #cbd5e0; /*#2c85c5;*/
    /*border: 1px solid #ffcc66;*/
    /*background-color: #ffcc66;*/
}

    .subjectPreview:hover {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    }


    .subjectPreview .subjectPreviewHeader {
        display: flex;
        flex-direction: row;
    }

        .subjectPreview .subjectPreviewHeader .subjectPreviewTitle {
            margin-bottom: 0;
            flex: 1;
        }
            .subjectPreview .subjectPreviewHeader .subjectPreviewTitle .title{
                font-size: 1.7rem;
                font-weight: bold;
            }

            .subjectPreview .subjectPreviewHeader .subjectPreviewTitle .ord {
                font-size: 0.7rem;
                font-weight: bold;
                display: inline;
            }


        .subjectPreview .subjectPreviewHeader .subjectPreviewOwnerName {
            padding-right: 10px;
            color:brown;
        }
    .subjectPreview:hover .subjectPreviewHeader .subjectPreviewControls {
        display: flex;
    }

    .subjectPreview .subjectPreviewHeader .subjectPreviewControls {
        display: none;
        flex-direction: row;
        grid-gap:7px;
    }
        .subjectPreview .subjectPreviewHeader .subjectPreviewControls .edit {
            cursor:pointer;
            font-size:1.25rem;
        }
        .subjectPreview .subjectPreviewHeader .subjectPreviewControls .gear {
            cursor: pointer;
            font-size: 1.25rem;
        }
        .subjectPreview .subjectPreviewHeader .subjectPreviewControls .up {
            cursor: pointer;
            font-size: 29px;
            color: var(--bs-primary);
        }
        .subjectPreview .subjectPreviewHeader .subjectPreviewControls .down {
            cursor: pointer;
            font-size: 29px;
            color: var(--bs-secondary);
        }


    .subjectPreview .subjectPreviewNote {
        font-size: 0.875rem;
        margin-bottom: 0;
        background-color: #feff9c;
        padding: 5px;
        border-radius: 5px;
        font-style:italic;
    }


.subjectPreviewContainer {
    display:flex;
    flex-direction:column;
    gap:3px;
}

    .subjectPreviewContainer .subjectPreviewElement {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding-left: 0;
        padding-top: 0;
        padding-right: 0px;
        padding-bottom: 0px;
    }

        .subjectPreviewContainer .subjectPreviewElement .subjectPreviewElementHeader {
            display: flex;
            flex-direction: row;
        }

            .subjectPreviewContainer .subjectPreviewElement .subjectPreviewElementHeader .subjectPreviewElementMarker {
                /*
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items:center;
                width: 60px;
                border-radius: 5px;
                */
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                min-width: 60px;
                margin-top:2px;
            }

                .subjectPreviewContainer .subjectPreviewElement .subjectPreviewElementHeader .subjectPreviewElementMarker .marker {
                    /*color: white;*/
                    border-radius: 5px;
                    font-size: 13px;
                    padding-left: 3px;
                    padding-right: 3px;
                    /*
                        margin-top: auto;
                        margin-bottom: auto;
                    */
                    min-width: 60px;
                    text-align: center;
                    /*
                    border: 1px solid transparent;
                    color: white;
                    font-size: 13px;
                    padding-left: 3px;
                    padding-right: 3px;
                    */
                }

            .subjectPreviewContainer .subjectPreviewElement .subjectPreviewElementHeader .subjectPreviewElementTitle {
                padding-left: 10px;
                flex: 1;
            }


        .subjectPreviewContainer .subjectPreviewElement .subjectPreviewElementBody {
            margin-left: 70px; /*60+10*/
            display:flex;
            flex-direction:column;
            grid-gap:5px;
        }

            .subjectPreviewContainer .subjectPreviewElement .subjectPreviewElementBody .subjectPreviewElementNote {
                font-size: 0.875rem;
                margin-bottom: 0;
                background-color: #feff9c;
                padding: 5px;
                border-radius: 5px;
                font-style: italic;
            }


        /*podelementi*/

            .subjectPreviewContainer .subjectPreviewElement .subjectPreviewElementBody .subjectPreviewSubElementContainer {
                display: flex;
                flex-direction: column;
                gap: 6px;
            }

                .subjectPreviewContainer .subjectPreviewElement .subjectPreviewElementBody .subjectPreviewSubElementContainer .subjectPreviewSubElement {
                    display: flex;
                    flex-direction: row;
                }

                    .subjectPreviewContainer .subjectPreviewElement .subjectPreviewElementBody .subjectPreviewSubElementContainer .subjectPreviewSubElement:hover {
                    }

                    .subjectPreviewContainer .subjectPreviewElement .subjectPreviewElementBody .subjectPreviewSubElementContainer .subjectPreviewSubElement .subjectPreviewSubElementMarker {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-content: center;
                    }

                        .subjectPreviewContainer .subjectPreviewElement .subjectPreviewElementBody .subjectPreviewSubElementContainer .subjectPreviewSubElement .subjectPreviewSubElementMarker .marker {
                            border: 1px solid black;
                            color: black;
                            border-top-left-radius: 10px;
                            border-top-right-radius: 10px;
                            font-size: 13px;
                            padding-left: 8px;
                            padding-right: 8px;
                            min-width: 80px;
                            text-align: center;
                            background-color:white;
                        }

                    .subjectPreviewContainer .subjectPreviewElement .subjectPreviewElementBody .subjectPreviewSubElementContainer .subjectPreviewSubElement .subjectPreviewSubElementTitle {
                        padding-left: 10px;
                        flex: 1;
                    }
                        .subjectPreviewContainer .subjectPreviewElement .subjectPreviewElementBody .subjectPreviewSubElementContainer .subjectPreviewSubElement .subjectPreviewSubElementTitle .subjectPreviewElementTitleClan {
                            display: flex;
                            padding: 5px;
                            border-radius: 5px;
                            background-color: #feff9c;
                            font-style: italic;
                            font-size: 0.875rem;
                        }
                            .subjectPreviewContainer .subjectPreviewElement .subjectPreviewElementBody .subjectPreviewSubElementContainer .subjectPreviewSubElement .subjectPreviewSubElementTitle .subjectPreviewElementTitleClan:empty {
                                display: none;
                            }


.subjectPreviewLink {
    cursor: pointer;
}
    .subjectPreviewLink:hover {
        color: #0033CC !important;
    }


.subjectShowAllLink {
    color: #0033CC;
    cursor: pointer;
}

    .subjectShowAllLink:hover {
        color: #0033CC;
    }



.accordianSubjectOption {
    padding: 0.5rem;
    font-size: 0.875rem;
    padding-left: 0.875rem
}
    .accordianSubjectOption .title {
        margin-left:10px;
    }




    .custom-resize-group {
        display: flex;
    }

    .custom-resize-group input {
        flex: 1;
        transition: width 0.3s;
        min-width:0px;
    }

        .custom-resize-group input:first-child:focus {
            width: 80%;
        }

        .custom-resize-group input:last-child:focus {
            width: 80%;
        }

        .custom-resize-group .linkUrl {
            color: #0033CC;
            text-decoration: underline;
        }


.subjectChooseContainer {
    display: flex;
    flex-direction: column;
    min-height: 100px;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    border: 1px solid #f5f5f5;
}

    .subjectChooseContainer .emptyMessage {
        display: flex;
        flex-direction: row;
        align-self: center;

        margin-top: auto;
        margin-bottom: auto;
        font-size: 0.875rem;
    }


    .subjectChooseContainer .plus {
        color: #f7103f;
    }

    .subjectChooseContainer .minus {
        color: #00d57e;
    }



    .subjectChooseContainer .my-material-input {
        border: 1px solid transparent;
        border-bottom: 1px solid #DEE2E6;
    }
        .subjectChooseContainer .my-material-input:focus,
        .subjectChooseContainer .my-material-input:active {
            border: 1px solid transparent;
            border-bottom: 1px solid #DEE2E6;
            /*border-bottom: 2px solid #0d6efd;*/
            outline: none;
        }





    .subjectChooseContainer .my-material-input-comment {
        border: 1px solid transparent;
        border-bottom: 1px solid #DEE2E6;
        color: #434B59;
        font-size: 14px;
        font-weight: 400;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        padding-left: 28px;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23c7c7c7" viewBox="0 0 16 16"><path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/></svg>') no-repeat 5px 2px;
    }

        .subjectChooseContainer .my-material-input-comment:focus,
        .subjectChooseContainer .my-material-input-comment:active {
            border: 1px solid transparent;
            border-bottom: 1px solid #DEE2E6;
            outline: none;
        }

        




    .subjectChooseContainer .row_in_list {
        display: flex;
        flex-direction: row;
        gap: 7px;
    }

        .subjectChooseContainer .row_in_list .checkBoxLeftContainer {
            padding-top: 2px;
        }

        .subjectChooseContainer .row_in_list .checkBoxRightContainer {
            display: flex;
            flex-direction: row;
            flex: 1;
            gap: 7px;
        }
            .subjectChooseContainer .row_in_list .checkBoxRightContainer .labelContainer {
                max-width: 200px;
                padding-top: 2px;
            }
            .subjectChooseContainer .row_in_list .checkBoxRightContainer .inputContainer {
                flex: 1;
            }
            .subjectChooseContainer .row_in_list .checkBoxRightContainer .remove {
                cursor: pointer;
            }



.maxWidth {
    max-width: none;
    width: 100%;
}




.subjectChoosePopupSubtitle {
    /*font-weight: bold;*/
}


.label-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}



@media (min-width: 576px) {


    .modal-400 {
        --bs-modal-width: 400px;
    }

    .modal-500 {
        --bs-modal-width: 500px;
    }

}
@media (min-width: 768px) {
    .modal-700 {
        --bs-modal-width: 700px;
    }
}


















/*PEDJA*/

.subjectsNewStyle {
    /*width: 800px;*/
    margin: 30px;
    margin-bottom: 0px;
}
    /*
    .subjectsNewStyle .note {
        position: relative;
        width: 90%;
        padding: 2px 3px 2px 3px;
        margin: 2em auto;
        color: #fff;
        background: #97C02F;
        overflow: auto;
    }

        .subjectsNewStyle .note:before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            border-width: 0 16px 16px 0;
            border-style: solid;
            border-color: #fff #fff #658E15 #658E15;
            background: #658E15;
            -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2); 
            display: block;
            width: 0;
        }

        .subjectsNewStyle .note.rounded {
            -moz-border-radius: 5px 0 5px 5px;
            border-radius: 5px 0 5px 5px;
        }

            .subjectsNewStyle .note.rounded:before {
                border-width: 8px;
                border-color: #fff #fff transparent transparent;
                -moz-border-radius: 0 0 0 5px;
                border-radius: 0 0 0 5px;
            }

    .subjectsNewStyle .bublic {
        position: relative;
        max-width: 30em;
        background-color: #fff;
        padding: 1.125em 1.5em;
        font-size: 1.25em;
        border-radius: 1rem;
        box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, .3), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2);
    }

        .subjectsNewStyle .bublic::before {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            bottom: 100%;
            left: 1.5em;
            border: .75rem solid transparent;
            border-top: none;
            border-bottom-color: #fff;
            filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, .1));
        }

    .subjectsNewStyle .okvirPredmeta1 {
        margin: 25px 5px 5px 25px;
        border-radius: 10px;
        padding: 20px;
        border: 1px solid #D5D5FF;
        width: 700px;
    }

    .subjectsNewStyle .infoPanel {
        margin: 5px;
        border-radius: 10px;
        padding: 20px;
        border: 1px solid #FFD700;
        width: 600px;
        background-color: #FFE96C;
    }

    .subjectsNewStyle .propisiInteresneGrupe1 {
        margin: 5px;
        border-radius: 10px;
        padding: 20px;
        border: 1px solid #CCFFCC;
        width: 600px;
        background-color: #ECFFEC;
    }

    .subjectsNewStyle .nazivPredmeta {
        font-size: 14px;
        font-weight: 600;
    }

    .subjectsNewStyle .autorPredmeta {
        font-size: 12px;
        text-align: right;
        vertical-align: top;
    }

    .subjectsNewStyle .bodyStyle {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
    }

    .subjectsNewStyle .tekst1 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        padding-top: 10px;
    }

    .subjectsNewStyle .tekst2 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        padding-top: 10px;
        padding-left: 0px;
    }

    .subjectsNewStyle .tekst3 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        padding-top: 0px;
        padding-bottom: 5px;
        padding-left: 20px;
    }

    .subjectsNewStyle .komentarPropisa {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        margin-bottom: 10px;
        color: #993300;
    }

    .subjectsNewStyle .tekstUzClan {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
    }
    */

    .subjectsNewStyle .vezaSaPropisom {
        font-weight: 500;
        margin-top: 1px;
        margin-bottom: 0px !important;
        font-size: 15px;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    /*
    .subjectsNewStyle .vezaSaSudskomPraksom {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        padding-left: 10px;
        font-weight: 500;
        color: #0000FF;
    }

    .subjectsNewStyle .link1 {
        font-size: 14px;
    }

    .subjectsNewStyle .clanUzZakon {
        border: 1px solid #FFFF00;
        border-radius: 1px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        margin-left: 30px;
        font-weight: 700;
        background-color: #FFFF00;
        text-align: right;
        width: 40px;
    }

    .subjectsNewStyle .clanUzZakon_BKP {
        padding: 1px;
        border: 1px solid #FF9966;
        border-radius: 3px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        margin-left: 20px;
        font-weight: 700;
        background-color: #FFFF66;
    }

    .subjectsNewStyle .ugradjenaTabela {
        width: 100%;
        border: 1px solid #003366;
        border-spacing: 2px;
    }

    .subjectsNewStyle .okvirUgradjeneTabele {
        border-radius: 6px;
        padding: 6px;
        margin: 8px;
        border: 2px dashed #CC99FF;
        background-color: #FFFFCC;
    }

    .subjectsNewStyle .auto-style1 {
        border-color: #003366;
        border-width: 0;
        width: 100%;
        border-spacing: 2px;
    }

    .subjectsNewStyle .naslovKategorije {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: 600;
    }

    .subjectsNewStyle .autorPredmetaIngPro {
        font-size: 12px;
        text-align: right;
        color: #714400;
        font-weight: 600;
        outline-color: red;
        vertical-align: top;
    }

    .subjectsNewStyle .nazivPredmetaIngPro {
        font-size: 14px;
        font-weight: 600;
        font-variant: small-caps;
        color: #714400;
    }

    .subjectsNewStyle .naslovnaLinija {
        margin-bottom: 15px;
        padding-bottom: 15px;
        height: 11px;
    }

    .subjectsNewStyle .tableBezCollapse {
        border-collapse: separate !important;
    }

    .subjectsNewStyle .belopoljanski {
        background-color: #FFFFFF;
    }
    */

    .subjectsNewStyle .noPadding {
        padding: 0px !important;
    }

    .subjectsNewStyle .noLeftPadding {
        padding-left: 0px !important;
    }
    /*
    .subjectsNewStyle em {
        color: #494136;
    }
    */

    .subjectsNewStyle mark {
        background-color: #FEF7AB;
        margin-bottom: 1px;
        margin-left: 10px;
        margin-right: 5px;
        font-size: 12px;
        font-weight: 400;
        text-align: right;
        display: inline-block;
        min-width: 30px;
    }

    /*
    .subjectsNewStyle .wavy {
        text-decoration-line: underline;
        text-decoration-style: wavy;
        text-decoration-color: red;
    }
    */

    .subjectsNewStyle .beleska {
        border-radius: 5px;
        color: #434B59;
        font-size: 14px;
        font-weight: 400;
        padding-left: 3px;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }

    /*
    .subjectsNewStyle h6 {
        font-size: 14px;
    }
    */

    .subjectsNewStyle .krajJednogPropisa {
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: #DEE2E6;
    }

    .subjectsNewStyle .krajJednogPropisaSaKomentarimaClanova {
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: #DEE2E6;
        margin-top: 5px;
    }

    .subjectsNewStyle i.bi {
        padding-left: 3px;
        padding-right: 3px;
        border: 1px solid transparent;
        color: #c7c7c7;
        margin-right: 3px;
        border-radius: 4px;
        transition: all 0.3s;
        width: 24px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        box-sizing: border-box;
        display: inline-block;
        vertical-align: middle;
        margin: 0;
        padding: 0 3px;
    }

        .subjectsNewStyle i.bi:hover {
            color: #FFFFFF;
            background-color: #FF6600;
            border: 1px solid #FF6600;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
            cursor: pointer;
        }

        .subjectsNewStyle i.bi:active {
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
            transform: translateY(1px);
        }

    .subjectsNewStyle .nav-link {
        padding: .2rem .5rem !important;
        color: #000000;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    /*
    .subjectsNewStyle .okvirPredmeta2 {
        margin: 25px 5px 5px 25px;
        border-radius: 10px;
        padding: 20px;
        border: 1px solid #D5D5FF;
        width: 700px;
    }
    */
    /*
    .subjectsNewStyle .okvirPredmeta3 {
        margin: 25px 5px 5px 25px;
        border-radius: 10px;
        padding: 20px;
        border: 1px solid #D5D5FF;
        width: 700px;
        background-color: #CEF4D3;
    }
    */

    .subjectsNewStyle .ravnanjeTekstIIkonice {
        display: flex;
        align-items: flex-start;
    }







    /*BOJANOV DODATAK*/
    .subjectsNewStyle .accordion-button:not(.collapsed) {
        color: #0c63e4;
    }


    /*kategorije tabovi cursor*/
    .subjectsNewStyle .kategorijeTab {
        cursor:pointer;
    }
        .subjectsNewStyle .kategorijeTab .nav-item .nav-link {
            font-size:0.875rem;
        }
    .subjectsNewStyle .hlLike {
        cursor: pointer;
    }

    .subjectsNewStyle .element-pager {
        display: flex;
        flex-direction: row;
        flex: 1;
        margin-top:10px;
    }

        .subjectsNewStyle .element-pager .page {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 20px;
            padding-left: 5px;
            padding-right: 5px;
            font-size:0.875rem;
            cursor: pointer;
        }

        .subjectsNewStyle .element-pager .activePage {
            font-weight: bold;
            cursor: default !important;
            font-size: 1rem;
        }

    .subjectsNewStyle .subjectCategory {
        display: flex;
        flex-direction: column;
        position: relative;
        /*
        
        flex-direction: column;
        position: relative;
        */
    }

        .subjectsNewStyle .subjectCategory .loading-panel {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            background-color: rgba(255,255,255,0.5);
            display: flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;

        }

            .subjectsNewStyle .subjectCategory .loading-panel p {
                font-size: 0.813rem; /*13px;*/
                font-weight: bold;
            }






/*kompomentat za biranje boje*/
.color-scheme-picker {
}
    .color-scheme-picker .btn {
        border: var(--bs-border-width) solid var(--bs-border-color);
        width:100%;
    }
        .color-scheme-picker .btn .cColor {
            display: inline-block;
            width: calc(100% - 25px);
        }

    .color-scheme-picker .color-scheme-panel {
        width: 100%;
    }
        .color-scheme-picker .color-scheme-panel .color-block {
            display: block;
            border: 1px solid transparent;
            
            height: 21px;
            font-size: 0.8rem;
            text-align: center;
            color: #a3a3a3;
        }
            .color-scheme-picker .color-scheme-panel .color-block:hover {
                border-top: 1px solid silver;
                border-bottom: 1px solid silver;
            }
        .color-scheme-picker .color-scheme-panel .selected {
            /*border-top: 1px solid #d4d4d4;
            border-bottom: 1px solid #d4d4d4;
            */
        }