@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
:root {
  font-size: clamp(0.75rem, 0.7375rem + 0.1vw, 0.8125rem); /* 12px az 13px */
}

body {
  width: 100%;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: Open Sans;
}

body div.wrapper {
  background-color: var(--cui-body-bg)!important;
}

.bg-opacity-light {
  background: var(--cui-bg-opacity-light) !important;
}

.btn-custom-size {
  padding: 0.15rem 0.3rem;
  font-size: 0.75rem;
  border-radius: 0.2rem;
}

.icon-custom-size {
  width: 0.75rem;
  height: 0.75rem;
  font-size: 0.75rem;
}

.btn-icm4 {
  --cui-btn-bg: var(--icm4-positive-color);
  --cui-btn-border-color: #FFF;
  --cui-btn-color: #FFF;
  --cui-btn-hover-bg: var(--icm4-positive-hover-color);
  --cui-btn-hover-border-color: var(--icm4-positive-hover-color);
  --cui-btn-hover-color: #FFF;
  --cui-btn-active-bg: var(--icm4-positive-color);
  --cui-btn-active-border-color: #FFF;
  --cui-btn-active-color: #FFF;
  --cui-btn-shadow: none;
  box-shadow: none!important;
}

.btn-icm4-secondary {
  --cui-btn-bg: var(--icm4-positive-light-color);
  --cui-btn-border-color: #FFF;
  --cui-btn-color: var(--icm4-positive-color);
  --cui-btn-hover-bg: var(--icm4-positive-hover-color);
  --cui-btn-hover-border-color: var(--icm4-positive-hover-color);
  --cui-btn-hover-color: #FFF;
  --cui-btn-active-bg: var(--icm4-positive-light-color);
  --cui-btn-active-border-color: #FFF;
  --cui-btn-active-color: #FFF;
  --cui-btn-shadow: none;
  box-shadow: none!important;
}

.btn-check:checked + .btn:focus, .btn-check:active + .btn:focus, .btn:active:focus, .btn.active:focus, .show > .btn.dropdown-toggle:focus {
  box-shadow: none;
}
.btn-check:checked + .btn, .btn-check:active + .btn,
.btn.active, .show > .btn.dropdown-toggle {
  color: #FFF;
  background-color: var(--icm4-positive-hover-color);
  border-color: var(--icm4-positive-hover-color, transparent);
}

.btn-basic {
  --cui-btn-bg: var(--icm4-positive-color);
  --cui-btn-border-color: var(--cui-basic-bg);
  --cui-btn-color: rgba(255, 255, 255, 0.87);
  --cui-btn-hover-bg: var(--icm4-positive-color);
  --cui-btn-hover-border-color: var(--icm4-positive-color);
  --cui-btn-hover-color: rgba(255, 255, 255, 0.87);
  --cui-btn-active-bg: var(--icm4-positive-light-color);
  --cui-btn-active-border-color: var(--icm4-positive-color);
  --cui-btn-active-color: rgba(255, 255, 255, 0.87);
  --cui-btn-shadow: rgba(50, 31, 219, 0.5);
}

.btn-basic-empty {
  --cui-btn-bg: transparent;
  --cui-btn-border-color: var(--cui-basic-bg);
  --cui-btn-color: var(--icm4-floating-btn-color);
  --cui-btn-hover-bg: var(--icm4-positive-color);
  --cui-btn-hover-border-color: var(--icm4-positive-color);
  --cui-btn-hover-color: var(--icm4-positive-color);
  --cui-btn-active-bg: transparent;
  --cui-btn-active-border-color: var(--icm4-positive-color);
  --cui-btn-active-color: var(--icm4-positive-color);
  --cui-btn-shadow: rgba(50, 31, 219, 0.5);
}

.btn-basic-empty:active,
.btn-basic-empty:focus,
.btn-basic-empty:focus-visible,
.btn-basic-empty:hover {
  color: #FFF;
}

.btn-basic-empty:focus {
  background-color: var(--cui-btn-bg);
}

.btn-filter {
  --cui-btn-bg: var(--cui-header-color);
  --cui-btn-border-color: none;
  --cui-btn-color: var(--cui-header-bg);
  --cui-btn-hover-bg: var(--cui-header-color);
  --cui-btn-hover-border-color: var(--cui-header-color);
  --cui-btn-hover-color: var(--cui-header-bg);
  --cui-btn-active-bg: transparent;
  --cui-btn-active-border-color: none;
  --cui-btn-active-color: var(--icm4-positive-color);
  --cui-btn-shadow: none;
}

.btn-filter:active,
.btn-filter:focus,
.btn-filter:focus-visible,
.btn-filter:hover {
  color: var(--icm4-floating-btn-color);
}

.btn-filter:focus {
  background-color: var(--cui-header-color);
}

.btn-ghost-hint {
  --cui-btn-bg: var(--icm4-positive-transparent);
  --cui-btn-border-color: none;
  --cui-btn-color: var(--icm4-positive-color);
  --cui-btn-hover-bg: var(--icm4-positive-color);
  --cui-btn-hover-border-color: none;
  --cui-btn-hover-color: #FFF;
  --cui-btn-active-bg: var(--icm4-positive-color);
  --cui-btn-active-border-color: none;
  --cui-btn-active-color: #FFF;
  --cui-btn-shadow: none;
  border-radius: 6px;
}

html:not([dir=rtl]) .form-select {
  min-width: 75px;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--cui-body-bg);
}

/* SWITCHES */
.form-check-input:checked {
	background-color: var(--icm4-positive-color);
  border-color: var(--cui-body-bg);
}

/* SCROLLBAR */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}
 
::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.diff-feedback {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  font-weight: 700;
  color: var(--icm4-minimize-diff-color);
}

.invalid-feedback {
  font-weight: 700;
}

.dark-header {
  color: var(--cui-header-color);
  background-color: var(--cui-header-bg);
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  font-size: .8rem;
  font-weight: 700;
  cursor: default!important;
  opacity: 1;
}

.dark-header > li.list-group-item {
  padding: 0.275rem 1rem;
  color: inherit;
  background-color: inherit;
  text-decoration: none;
  border: none;
}

.dark-header > li.list-group-item:hover {
  color: inherit;
  background-color: inherit;
  text-decoration: none;
  border: none;
}

/*LIST GROUPS*/
.fa-icon::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  color: var(--cui-list-group-color);
  -webkit-font-smoothing: antialiased;
}

.standard-list-group .list-group-item-text,
.standard-list-group .list-group-item {
  border:  none;
  cursor: pointer;
}
.standard-list-group .list-group-item-text:hover,
.standard-list-group .list-group-item:hover {
  color: var(--icm4-positive-color);
}
.standard-list-group .list-group-item-action:hover {
  border-radius: 6px
}

.standard-list-group .list-group-item i.fa-icon-gap::before {
  content: "\f111";
  color: transparent;
}
.standard-list-group .list-group-item i.fa-icon-file-line::before {
  content: "\f15c";
}
.standard-list-group .list-group-item i.fa-icon-file::before {
  content: "\f3e0";
}
.standard-list-group .list-group-item i.fa-icon-folder::before {
  content: "\f07c";
}
.standard-list-group .list-group-item.collapsed i.fa-icon-folder::before {
  content: "\f07b";
}
.standard-list-group .list-group-item i.fa-icon-mark::before {
  content: "\f146";
}
.standard-list-group .list-group-item.collapsed i.fa-icon-mark::before {
  content: "\f0fe";
}

/* HEADER */
.header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
  padding: 0.5rem;
  background: var(--cui-basic-bg-color);
  border-bottom: none;
  box-shadow: 0px 4px 4px #0000000D;
}

.header-toggler,
.header-nav .nav-link {
  color: var(--cui-basic-color);
}

.header-toggler:hover {
  color: var(--cui-basic-color);
}

.header-nav.primary-menu {
  min-height: 3rem;
}

.header-nav.primary-menu .nav-link:not(.nav-sortable):hover {
  background-color: var(--cui-body-bg);
}

.header-nav.primary-menu .nav-link.active {
  background: var(--icm4-positive-light-color);
  color: var(--icm4-positive-color);
}

.dark-theme .header-nav.primary-menu .nav-link.active {
  color: #FFF;
}

.header #security_logout_reset_button {
  cursor: pointer;
}

/*.header nav {
  min-height: 47px;
}*/

/* SIDEBAR */
/* .sidebar-lg nastavuje --cui-sidebar-occupy-start s vyssou specificitou ako .sidebar-narrow(-unfoldable),
   takze bez tohto pravidla by obsah zostal odsadeny na sirku 20rem aj po zbaleni sidebaru */
.sidebar.sidebar-lg.sidebar-narrow:not(.sidebar-end):not(.hide) ~ *,
.sidebar.sidebar-lg.sidebar-narrow-unfoldable:not(.sidebar-end):not(.hide) ~ * {
  --cui-sidebar-occupy-start: 4rem;
}

/* .btn-link nedeklaruje --cui-btn-hover-bg/--cui-btn-active-bg, takze bez tohto by tlacidlo
   na hover, active aj focus-visible (a pri otvorenom dropdowne - .btn.show) zdedilo pozadie z .btn */
.theme-switcher-toggle {
  --cui-btn-hover-bg: transparent;
  --cui-btn-active-bg: transparent;
}

#aside_nav .tab-content {
  overflow-x: hidden;
  overflow-y: auto;
  margin-right: 2px;
}

.sidebar-brand {
  flex: 0 0 3rem;
  color: var(--cui-basic-color);
  background: var(--cui-basic-bg-color);
}

.sidebar-nav .nav-group.show .nav-group-toggle,
.sidebar-nav .nav-link {
  color: var(--cui-basic-color);
  border-left: .5rem solid transparent;
}

.sidebar-nav .nav-group.show {
  background: var(--cui-body-bg);
}

.sidebar-nav .nav-link {
  padding: 0.8445rem 0.5rem;
}

.sidebar-nav .nav-link.active {
  color: var(--icm4-positive-color);
  background: var(--icm4-positive-light-color);
  border-left: .5rem solid var(--icm4-positive-color);
}

.sidebar-nav .nav-link:hover {
  background: var(--cui-body-bg);
  border-left: .5rem solid var(--icm4-positive-light-color);
}

.sidebar-nav .nav-link.current-modul:hover {
  color: var(--cui-basic-color);
  background: var(--cui-body-bg);
}

.sidebar-nav .nav-link.active .nav-icon {
  color: var(--icm4-positive-color);
/*  font-weight: bold;*/
}

.sidebar-nav .nav-link:hover .nav-icon {
  color: var(--cui-basic-color);
}

.sidebar-nav .nav-title {
  color: #B3B3B3;
  font-size: 90%;
  font-weight: 700;
}

.sidebar-overlaid .nav-underline .nav-link.active, 
.sidebar-overlaid .nav-underline .show > .nav-link {
  color: var(--icm4-positive-color);
  background: transparent;
  border-color: var(--icm4-positive-color);
}

.sidebar-overlaid .nav-underline .nav-link:hover {
  border-color: var(--icm4-positive-light-color);
}

/* VALIDATION */
label.invalid {
  color: #FF0000!important;
  font-weight: 700!important;
}

label.diff {
  color: var(--icm4-minimize-diff-color)!important;
  font-weight: 700!important;
}

label span.required:after,
label.required:after {
  content:"*";
  display: inline-block;
  color: #FF0000;
  margin-right: -8px;
  font: normal normal bold 12px/18px Open Sans;
  letter-spacing: 0px;
  opacity: 1;
}

#body-content {
  background-color: var(--cui-basic-bg-color);
  box-shadow: 0px 0px 8px #00000029;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.25s linear;
  height: 100%;
}

#body-content.show-table {
  visibility: visible;
  opacity: 1;
}











/* PAGINATION */
.pagination {
  flex-wrap: wrap;
}

.pagination .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.75rem;
  color: var(--icm4-positive-color);
  border-color: var(--icm4-positive-color);
}

.pagination .page-link:hover {
  background-color: var(--cui-light);
}

.pagination .active .page-link {
  color: #FFF;
}

.pagination .page-item {
  margin: 0 1px;
}

.pagination .page-item.active .page-link {
  background-color: var(--icm4-positive-light-color);
}

#footer a{
  color: #939ba1;
  font-weight: bold;
  text-decoration: none;
}

#footer a:hover{
  text-decoration: underline;
  color: var(--icm4-positive-color);
}

#footer #footer_logo a{
  display: block;
  background-image: url('../images/logo_icm_down_gray_long.basic.png');
  background-size: cover;
  background-repeat: no-repeat;
  width: 230px;
  height: 28px;
  margin: 5px auto;
}

#footer #footer_logo a:hover{
  background-image: url('../images/logo_icm_down_long.basic.png');
  background-size: cover;
}

#footer #positive{
  display: inline-block;
  margin-bottom: -7px;
  background-image: url('../images/logo_positive_down_gray.basic.png');
  background-repeat: no-repeat;
  background-size: cover;
  width: 17px;
  height: 20px;
}

#footer #positive:hover{
  background-image: url('../images/logo_positive_down.basic.png');
  background-size: cover;
}

#footer span {
  display: block;
  text-align: center;
  letter-spacing: 2px; 
  color: #abadae;
}

#dock {
  background-color: var(--cui-basic-bg-color);
  flex-wrap: nowrap;
  align-items: center;
}

#dock-buttons {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .25rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  flex: 1 1 auto;
  min-width: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#dock-buttons::-webkit-scrollbar {
  display: none;
}

#dock-buttons > * {
  flex-shrink: 0;
}

.dock-arrow {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.dock-arrow.show {
  display: flex;
}

.dock-arrow:hover {
  background-color: rgba(0, 0, 0, .06);
}

.dock-arrow:disabled {
  opacity: .3;
  cursor: default;
  pointer-events: none;
}

/* SECURITY LOGOUT */
.header-nav > .nav-item > .progress {
  background-color: var(--cui-body-bg);
  width: 100px;
  height: 20px;
}

.header-nav > .nav-item > .progress > .progress-bar-striped {
  background-color: var(--icm4-positive-color);
  width: 100%;
}

.header-nav > .nav-item > .progress > #security_logout_time_bar {
  /* color: var(--icm4-floating-btn-color); */
}

/* RESIZABLE ICON */
.icon-resizable {
  position: absolute;
  right: -3px;
  bottom: -3px;
}

.ui-resizable-helper {
  border: 2px dotted #00F;
  z-index: 9999999!important;
}

.btn-fullscreen,
.btn-minimize {
  width: 1em;
  height: 1em;
  box-sizing: content-box;
  background: none;
  border: 0;
  border-radius: 0.25rem;
  opacity: 0.5;
}

/*
* JQUERY SORTABLE
*/
.nav-ui-state-highlight {
  box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: inline-block;
    padding: 0;
    margin: 0;
    float: left;
    border: 1px red solid;
}

.nav-shake {
  animation: shake 1s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
}

#order_menu_modal div.menu_order #menu_order_form li {
  list-style-type:none;
  border: 1px solid var(--icm4-positive-light-color);
  border-radius: 6px;
  cursor: grab;
}

#order_menu_modal div.menu_order #menu_order_form li:hover {
  background-color: var(--icm4-positive-light-color);
  border: 1px solid var(--icm4-positive-color);
}

#order_menu_modal div.menu_order .form-check input.form-check-input[type=checkbox] {
  width: 20px;
  height: 20px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

.dark-theme .btn-navbar-style{
  color: #fff;
  border: 1px solid #707070 !important;
}

.dark-theme .btn-navbar-style:hover{
  color: #fff;
}