/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.menu .app-brand.demo {
  height: 64px;
  margin-top: 12px;
}

.app-brand-logo.demo svg {
  width: 22px;
  height: 38px;
}

.app-brand-text.demo {
  font-size: 1.75rem;
  letter-spacing: -0.5px;
  text-transform: lowercase;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
/* Detached navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
  padding-top: 76px !important;
}
/* Default navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}
.container-xxl {overflow:auto!important;}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}
.layout-navbar{
	z-index:0!Important;
}
.swal2-html-container .btn {
  width:80%;}
  #support_message{
  margin:0;
  width:80%;}
.swal2-actions{
justify-content: center!important;
    margin: 1em 1.6em 0.3em!important;
    padding: 0!important;
    overflow: auto!important;
    color: inherit!important;
    font-size: 1.125em!important;
    font-weight: normal!important;
    line-height: normal!important;
    text-align: center!important;
    word-wrap: break-word!important;
    word-break: break-word!important;
	margin-top:0!important;  
}.swal2-actions button{
	width:80%;
      font-size: 0.9375rem!important;
}
.container-xxl{
	margin:0!important;
  	min-width:100%!important;
    width:100%!important;
}
.layout-navbar{
	margin-bottom:20px!important;	
}
.myInput{border-radius:8px;}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-weight: 300;
  background-color: #ecf0f3;
}
.white{color:white!important;}
.label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: #394a56;
}
.container-p-y:not([class^=pt-]):not([class*=" pt-"]){
	padding-top:0!important;
}
.container-p-y{padding-top:0!important;}
.label-text {
  margin-left: 16px;
}

.toggle {
  isolation: isolate;
  position: relative;
  height: 30px;
  width: 60px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow:
    -8px -4px 8px 0px #ffffff,
    8px 4px 12px 0px #d1d9e6,
    4px 4px 4px 0px #d1d9e6 inset,
    -4px -4px 4px 0px #ffffff inset;
}

.toggle-state {
  display: none;
}

.indicator {
  height: 100%;
  width: 200%;
  background: #ecf0f3;
  border-radius: 15px;
  transform: translate3d(-75%, 0, 0);
  transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
  box-shadow:
    -8px -4px 8px 0px #ffffff,
    8px 4px 12px 0px #d1d9e6;
}

.toggle-state:checked ~ .indicator {
  transform: translate3d(25%, 0, 0);
}/* width */
::-webkit-scrollbar {
  width: 10px;
  height:10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
.myInput {
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
.dark-card{
background: rgb(28, 27, 27)!important;
}
.menu-vertical .menu-item .menu-link, .menu-vertical .menu-block{
padding: 0.225rem 1rem!important;
}
.sub-menu{
list-style-type:none!important;
  cursor:pointer!important;
  background:#03c3ec!important;
  border:#03c3ec!important;
  color:white!important;
  font-size:12px!important;
  margin-bottom:3px!important;
}
rect{fill:transparent!important;}
@media only screen and (max-width: 600px) {
  #vkupna-cena-artikli{width:100%;}
    .btn-group > .btn {
        border-radius:5px!important;
        margin-bottom:5px;
        width:100%;
white-space:nowrap;        
    }
  .container-xxl .navbar-nav .nav-item{
flex-direction: column-reverse!important;
    width:100%;
  }
  .container-xxl .btn-group {
    display:block!important;
    width:100%;
  }
  .container-xxl .navbar-nav-right{
  	display:block!important;
    width:100%;
  }
  .container-xxl .layout-navbar{
  height:auto;display:block;}
  .container-xxl .nav-item .btn{
  	width:100%;
  }
  .container-xxl .navbar-nav .btn-group .btn{
  	width:100%;
  }
  .container-xxl .navbar-nav .btn-group{
  	margin-bottom:20px;
  }
  .container-xxl .navbar-nav .nav-item .btn{
  	margin-right:0!important;
  }
  .container-xxl .nav-item{margin-bottom:20px;}
  .card-header{width:100%!important; }
  .container-xxl .navbar-nav-right .navbar-nav .myInput{width:100%!important;}
  .content-wrapper{overflow:auto;}
  .card .navbar-nav .myInput {width:100%!important;}
  .container-p-y:not([class^=pb-]):not([class*=" pb-"]){
	padding-bottom:2.5rem!Important;
}
  .menu-inner {height:auto!important;flex:none!important;}
}
.invert{filter: invert(1);}
.black{background:black!important;}
.blackshadow{box-shadow:none!important;}
.dataTables_filter{margin-top:8px;}

.dataTables_filter > label{width:100%;padding-right:20px;}

.dataTables_filter > label > input{width:60%!important;}

          .preloader{
              position: fixed;
              top: 0;
              left: 0;
              width: 100vw;
              height: 100vh;
              z-index: 1000;
              display:block;
          }
        .middle-pre {
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          position: absolute;
        }
        .bar {
          width: 10px;
          height: 70px;
          background: #fff;
          display: inline-block;
          transform-origin: bottom center;
          border-top-right-radius: 20px;
          border-top-left-radius: 20px;
          /*   box-shadow:5px 10px 20px inset rgba(255,23,25.2); */
          animation: loader 1.2s linear infinite;
        }
        .bar1 {
          animation-delay: 0.1s;
        }
        .bar2 {
          animation-delay: 0.2s;
        }
        .bar3 {
          animation-delay: 0.3s;
        }
        .bar4 {
          animation-delay: 0.4s;
        }
        .bar5 {
          animation-delay: 0.5s;
        }
        .bar6 {
          animation-delay: 0.6s;
        }
        .bar7 {
          animation-delay: 0.7s;
        }
        .bar8 {
          animation-delay: 0.8s;
        }
        
        @keyframes loader {
          0% {
            transform: scaleY(0.1);
            background: ;
          }
          50% {
            transform: scaleY(1);
            background: yellowgreen;
          }
          100% {
            transform: scaleY(0.1);
            background: transparent;
          }
        }

.menu-header {
margin :2px 0 2px 0 !important;

}