/* common */
a { color:black; text-decoration:none }
a:hover { color:black }
.pointer { cursor:pointer !important }
.btn { border-radius:1em !important; padding:6px 12px 7px 15px; font-size:1.1em;}
.container-margin { margin:0 8% }
.container-margin15 { margin:0 15% !important }
.container-margin20 { margin:0 20% !important }
.container-margin25 { margin:0 25% !important }
.container-margin30 { margin:0 30% !important }
.bg-gray { background:#eee }
.bg-orange { background:#f36b22 }
.tox-tinymce-aux {z-index: 9999 !important;}

/* datatable */
/*
.dataTable thead th { font-size:.8em }
.dataTable thead th .sorter.hide { display:none }
.dataTable tbody td [data-qry=dataTable/upsertField] { margin-right:.5em; color:red; background:green !important }
.dataTable img { background:#888 }
.dataTable .sort:hover { background:#f36b22 }
.dataTable .sort.active { color:#f36b22; background:#4d4e4e }
.dataTable .sortNr { position:absolute; color:white; font-weight:normal; font-size:.7em; margin:1.5em 0 0 0; background:white; color:black; border:1px solid red; width:15px; height:15px; line-height:15px; border-radius:1em !important; }
.dataTable .sortNr.asc { margin-left:-2em }
.dataTable .sortNr.desc { margin-left:-1.5em }
.dataTable .dynamicEdit { color:red }
.dataTable tr:hover { background: #eaf6fc }
.dataTable tr.active { background: #d4f0d8 }
.dataTable img.thumbnail { max-height:3em; max-width:8em; border:1px solid gray }
*/
thead .hover-trigger:hover .hover-menu {
        opacity: 1 !important;
        visibility: visible !important;
    }
.disabledField { opacity:.2; pointer-events: none; }

.bracket { color:#888; }
.bracket.active { color:green; }
.bracket.activeSmall { color:green; }
[data-request] { cursor:pointer }

/* select modal */

[selectDialog] .item:hover { background:#4d4e4e; color:white; cursor:pointer; }
[selectDialog] .item.active { background:#f36b22; color:white; cursor:pointer; }
/* form */
form .errors { color:#dc3545; text-align:left  }
form .errors li { color:#dc3545; }
.form-control { -webkit-appearance: auto !important; }

/* notifications */
.notifications { position:fixed !important; right:1em; top:1em; z-index:10000 !important; width:20em; text-align:right }
.notifications .badge { border-radius:2em; font-size:1em; display:block; border:6px solid white; }

/* header */
nav .navbar-nav .nav-link { color:#333 !important; }
nav #dropdown_profile { margin-left:-6em !important }

/* sections */
section.auth { width: 100%; max-width: 330px; padding: 15px; margin: auto; text-align:center }
section.auth .checkbox { font-weight: 400; }
section.auth .form-floating:focus-within { z-index: 2; }
section.auth input[type="email"] { margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
section.auth input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; }


/* cart - OLD? */
.cartBox {}
.cartBox.active { background:yellow !important }

/* widgets */
#WidgetCheckout .box { min-width: 100%; align-self: center; box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1), 0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07); border-radius: 7px; padding: 40px; }
#WidgetForm { background:white; padding:40px; box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1), 0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07); border-radius: 7px; }
#WidgetForm .errors1 { margin-bottom:1em }
#WidgetForm .errors1, .errors2 { background:red; }
#WidgetForm .errors1 h2, li { color:white }
#WidgetForm .errors2 h2, li { color:white }

/* source? of what? */
.source { background: #343434; color: var(--light-text-color); padding: 0.5em 1em; border-radius: 5px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 0.85rem; margin: 0; overflow-x: hide; }
.source span.line { line-height: 1.4; }
.source span.line .number { color: #666; }
.source .line .highlight { display: block; background: var(--dark-text-color); color: var(--light-text-color); }
.source span.highlight .number { color: #fff; }

/* qry */
.qryInsert { font-size:1.2em; font-weight:bold }
.qryInsertSmall { font-size:1em; font-weight:bold; padding-top:.2em !important }

/* filter */
.filterSelect { background:#f1f1f1; margin-bottom:2px; text-align:center; padding:.5em }
.filterSelect:hover { background:#0d6efd; font-weight:bold; color:white; cursor:pointer }
.filterSelect.active { background:#198754 !important; font-weight:bold; color:white; cursor:pointer }
.filterSelectSizeNormal { padding:1em }
.filterSelectSizeSmall { padding:1em }
.page-item.active { background-color:Red !important; }

/* other?? */
.ElementBackground { border:4px solid #f4f4f4; cursor:pointer }
.ElementBackground:hover { border:4px solid #ddd; }
.hovered { background-color: #f5f5f5 !important; }
.page-link { z-index:1 !important } /* fix for pagination - prekrije spodnji footer v app-u  */

/* večji gumbki */
.btn-xl { padding:.6em 1.2em !important; font-size:1.3em }

/* builder */
.pageBuilderOption { padding:2em 0 !important; font-size:2em; }
.pageBuilderOption:hover { font-weight:bold }

/* nekje se overida na način, da li postane bele barve */
li { color:black }

/* blinker */
.blinkMe { -webkit-animation-name:blinker; -webkit-animation-duration:1s; -webkit-animation-timing-function:linear; -webkit-animation-iteration-count:infinite; -moz-animation-name:blinker; -moz-animation-duration:1s; -moz-animation-timing-function:linear; -moz-animation-iteration-count:infinite; animation-name:blinker; animation-duration:1s; animation-timing-function:linear; animation-iteration-count:infinite; }
@-moz-keyframes blinker { 0%{opacity:1.0; } 50%{opacity:0.0;} 100%{opacity:1.0;} }
@-webkit-keyframes blinker { 0%{opacity:1.0;} 50%{opacity:0.0;} 100%{opacity:1.0;} }
@keyframes blinker{ 0%{opacity:1.0;} 50%{opacity:0.0;} 100%{opacity:1.0;} }

/* widget css */
[data-widget=NewsDetails] { min-height:86.5vh }

/* icon hover */
.iconHover:hover { transform:scale(1.4) !important; }
a.nav-link .iconHover:hover { transform: none !important; } /* prevent večanja ikone, če je znotraj href-a; če ima href class btn - app menu item */
a.nav-link:hover .iconHover { transform:scale(1.4) !important; }

/* PriceModel */
.priceTableSum td { border:1px dashed gray }
.priceTableSum td:nth-child(2) { text-align: right; width:10em }

.priceTable td { border:1px dashed gray; text-align:center }
.priceTable td:nth-child(3), .priceTable td:nth-child(4), .priceTable td:nth-child(5), .priceTable td:nth-child(6), .priceTable td:nth-child(7) { width:6em !important }
.priceTable td:nth-child(8) { width:10em; text-align:right !important }

.dialog { border: none; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 0; width: 90%; font-family: Arial, sans-serif; background-color: #fff; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; display: none; flex-direction: column; align-items: stretch; }
.dialog.bg-danger .dialog-content { color: white; font-size: 2.5em; font-weight: bold; }
.noBorder { border: none !important; }
.dialog[open] { display: flex; }
/* .dialog-header { padding: 20px; border-bottom: 1px solid #ddd; background-color: #f9f9f9; border-top-left-radius: 8px; border-top-right-radius: 8px; } */
.dialog-content h5 { color: black !important; }
.dialog-header h2 { margin: 0; font-size: 24px; color: #333; }
.dialog-content { padding: 20px; font-size: 16px; color: #666; line-height: 1.5; }
.dialog-footer { padding: 20px; border-top: 1px solid #ddd; background-color: #f9f9f9; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; display: flex; justify-content: flex-end; }
.dialog-footer .close-dialog-btn { display: inline-block; margin-left: auto; padding: 10px 20px; font-size: 16px; cursor: pointer; border: 2px solid #007bff; border-radius: 4px; background-color: #fff; color: #007bff; transition: background-color 0.3s, color 0.3s; }
.dialog-footer .close-dialog-btn:hover { background-color: #007bff; color: #fff; }
.btn.btn-outline-primary { display: inline-block; padding: 10px 20px; font-size: 16px; cursor: pointer; border: 2px solid #007bff; border-radius: 4px; background-color: #fff; color: #007bff; transition: background-color 0.3s, color 0.3s; }
.btn.btn-outline-primary:hover { background-color: #007bff; color: #fff; }
@media (max-width: 600px) {
    .dialog { width: 90%; }
    .dialog-header h2 { font-size: 20px; }
    .dialog-content { font-size: 14px; }
    .dialog-footer .close-dialog-btn { font-size: 14px; padding: 8px 16px; }
    .welcome .row {
    width: 100% !important;
}
}

/* canvas for signatures */
canvas { border: 1px solid #000; }

/* elements */
.elementPreview { border:4px solid #f1f1f1; cursor:pointer; padding:8em 0 }
.elementPreview:hover { border:4px solid #5DADE2 }

/* login */
#ee { height:20em }

/* footer */
section#footer { z-index:1; position: fixed; bottom:0; width:100%; background: linear-gradient(to right, #e0e0e0, #f1f1f1); }

/* welcome model */
.welcome {}
.welcome .row { width:50vw }
.videoMaxWidth { max-width: 100%; }

/* preloader */
#preloader .spinner-border { width: 3rem; height: 3rem; }

/* logo backend */
#logoBackend { height:1.2em !important}

/* backend navbar border */
.navbarBorder { border-top-left-radius:.5em; border-top-right-radius:.5em; }
.navbarBorder1 { border-bottom-left-radius:.5em; border-bottom-right-radius:.5em; }

/* menu2 */
.menu2Background { background: linear-gradient(to right, #f1f1f1, #e0e0e0); border-bottom-left-radius:.5em; border-bottom-right-radius:.5em; }
.menu2BackgroundMobile { background: linear-gradient(to right, #f1f1f1, #e0e0e0); }
.same-width-btns .btn{ min-width: 100px; }

.dialogFile .file { border:4px solid #d4d4d4; height:10em; width:100%; }
.dialogFile .file.selected { border-color:#5DADE2; }
.dialogFile .file:hover { border-color:#5DADE2; cursor:pointer }

/* rotate */
.rotate-icon { transition: transform 0.5s ease; }
.rotate { animation: rotate 1s linear infinite; }
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg);}}

/* app scroller */
.scroller { max-width: 100%; overflow-y: scroll; }
.scroller::-webkit-scrollbar { width: 6px; height: 6px; }
.scroller::-webkit-scrollbar-thumb { background-color: #4a4a4a; border-radius: 3px; }
.scroller::-webkit-scrollbar-track { background: transparent; }
.scroller::-webkit-scrollbar-button { display: none; }
.scroller:hover::-webkit-scrollbar { width: 6px; height: 6px; }
.scroller:hover::-webkit-scrollbar-thumb { border-radius: 6px; }

.custom-tooltip { background: rgba(0, 0, 0, 0.8); color: white; padding: 8px 12px; border-radius: 4px; font-size: 12px; z-index: 9999; white-space: normal; max-width: 500px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); }

/*chatbot style*/
#chatbot-container { position: fixed; bottom: 1rem; right: 1rem; width: calc(100% - 2rem); max-width: 24rem; z-index: 50; }
#chatbot-window { width: 100%; max-height: 80vh; max-width: 24rem; margin: 0 auto; }
@media (max-width: 640px) { #chatbot-container { bottom: 0.5rem; right: 0.5rem; width: calc(100% - 1rem); } }
@media (max-width: 640px) { #chatbot-window { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; max-height: 100%; border-radius: 0; margin: 0; } }
@media (max-width: 640px) { #chatbot-trigger { position: fixed; bottom: 1rem; right: 1rem; } }
#chatbot-container input, #chatbot-container button { font-size: 16px; }
#chat-messages { overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #2563eb; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #1d4ed8; }
#chat-messages a { color: #2563eb; text-decoration: none; font-weight: 500; transition: color 0.2s ease-in-out; }
#chat-messages a:hover { color: #1d4ed8; text-decoration: underline; }

/* handsontable - z-index fix - overlaying the modal */
.ht_clone_top, .ht_clone_left, .ht_clone_corner, .ht_clone_top_left_corner, .ht_clone_top_inline_start_corner { z-index: 20 !important; }
button.fc-button.fc-button-primary {background: #142344;}

/* dp select */
.dp-select-advanced-container {
    --dp-select-tag-bg: #16a34a;
    --dp-select-tag-text: white;
    --dp-select-tag-hover: #15803d;
    width: 100%;
}
.dp-select-trigger {
    width: 100%;
}
.dp-select-selected {
    width: 100%;
}
.dp-select-dropdown {
    width: 100%;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.dp-select-options {
    width: 100%;
}
.dp-select-tag {
    display: inline-flex;
    align-items: center;
    background-color: var(--dp-select-tag-bg);
    color: var(--dp-select-tag-text);
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    margin: 0.125rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.dp-select-tag-remove {
    margin-left: 0.25rem;
    cursor: pointer;
    opacity: 0.8;
    flex-shrink: 0;
}
.dp-select-tag-remove:hover {
    opacity: 1;
}
.dp-select-option.selected {
    background-color: #bbf7d0;
    color: #15803d;
}

/*define variale color */

.primary-color { color: var(--webpage-color-1) !important; }
.secondary-color { color: var(--webpage-color-2) !important; }
.tartiary-color { color: var(--webpage-color-3) !important; }
.text-primary { color: var(--webpage-color-1) !important; }
.text-secondary { color: var(--webpage-color-2) !important; }
.text-tartiary { color: var(--webpage-color-3) !important; }
.bg-primary { background-color: var(--webpage-color-1) !important; }
.bg-secondary { background-color: var(--webpage-color-2) !important; }
.bg-tartiary { background-color: var(--webpage-color-3) !important; }
.hover-primary:hover { background-color: var(--webpage-color-4) !important; }


/* DataTable hover - samo vrstica (najhitrejše) */
table[data-model-table] tbody tr:hover {
  background-color: #e0f2fe !important;
}

/* Hover na td - samo hover cell */
table[data-model-table] tbody td:hover {
  background-color: #0ea5e9 !important;
  color: white !important;
}

/* dialog - new */
dialog::backdrop {
  background: rgba(0,0,0,0.5);
  transition: opacity 0.3s ease;
}
dialog:not([open])::backdrop {
  opacity: 0;
}