/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
  padding-right: 15px;
  padding-left: 15px;
}

/* Custom page header */
.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 40px;
}

/* Custom page footer */
.footer {
  padding-top: 19px;
  color: #777;
  border-top: 1px solid #e5e5e5;
}

/* Novi artikal page */

.navbar-controls
{
    width: auto;
    height : auto;
    float : right;
}

.container-fluid
{
    padding-right: 40px;
    padding-left: 40px;
    padding-top : 20px;
    padding-bottom: 20px;
}

#canvas
{
    display:block;
    margin:auto;
}

.cell, .raspodjela-cell
{
  border : none;
  width : 40px;
  text-align: center;
}

.boja-item-elements
{
  width : 100%;
  border : 1px solid grey;
}

.boja-item-div-elements
{
  display: inline-block;
  height: 100%;
  width : 100%;
  border: 1px solid grey;
}

.boja-ime-item-div
{
  display: inline-block;
}

#boja-selected-div
{
  display: inline-block;
  border-radius : 2px;
  height: 100%;
  width: 100%;
  border: 1px solid grey;
  margin-right: 1%;
}

#radioBtn label {
    color: #fff;
    background-color: #3276b1
}

#radioBtn .active{
    color: #fff;
    background-color: #ff9900; 
}

#boja-selected-ime
{    
  display: inline-block;
}

.form-control
{
  border: 1px solid #ccc;
  padding-left : 3%;
}

.section-50-left
{
    float: left;
    width: 45%;
    height: auto;
    margin-left: 15px;
}

.section-50-right
{
    float: right;
    width: 45%;
    height: auto;
    margin-right: 15px;
}

.section-40-left
{
    float: left;
    width: 45%;
    height: auto;
    margin-left: 15px;
}

.section-40-right
{
    float: right;
    width: 45%;
    height: auto;
    margin-right: 15px;
}

.dropdown
{
  position : relative;
}

.dropdown-menu
{
  position : absolute;
  padding : 0px;
  border : none;
}

.add-new-input
{
    display : inline-block;
    border : none;
    background: transparent;
    width : 80%;
}

.add-new-button
{
    display : inline-block;
    border : none;
    background: transparent;
    float : right;
}


.form-control
{
    height: auto;
}

body {
    overflow-x: hidden;
}

.price-div
{
    position : relative;
}

.currency
{
    position: absolute;
    top : 0px;
    right : 10px;
}

.currency-form-control
{
    width : 52.5%;
}

.list-group-item-inline
{
    width: 11.5%;
    text-align: center;
    display: inline-block;
    padding: 0;
}

.dropdown-menu-boja
{
    padding: 1%;
}

.lookup-input
{
    color : #A9A9A9;
}

/* Main Layout */

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled 
{
    padding-left: 175px;
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    top : 0;
    left: 175px;
    width: 0;
    height: 100%;
    margin-left: -175px;
    overflow-y: auto;
    background: #001a33;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
    width: 175px;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -175px;
}


/* Sidebar Styles */

.brend-filter
{
    font-size : 12px;
}


#sidebar-controls
{
    display : inline-block;
    width : 100%;
    height : 55px;
    background-color: white;
}

#report-button
{
    float : left;
    margin-top : 18px;
    margin-left : 15px;
    height : 25px;
    width : 25px;
    border : none;
    background-color: transparent;
}

#report-button img
{
    height : 25px;
    width : 25px;   
}

#print-button
{
    float : left;
    margin-top : 18px;
    margin-left : 27px;
    height : 25px;
    width : 25px;
    border : none;
    background-color: transparent;
}

#print-button img
{
    height : 25px;
    width : 25px;  
}


#refresh-button
{
    float : right;
    margin-top : 18px;
    margin-right : 30px;
    height : 25px;
    width : 25px;
    border : none;
    background-color: transparent;
}

#refresh-button img
{
    height : 25px;
    width : 25px;   
}

.sidebar-nav {
    position: absolute;
    top: 50;
    width: 175px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li:last-child {
    text-indent: 20px;
}

.sidebar-nav li div {
    display: block;
    text-decoration: none;
    color: #999999;
}

.sidebar-nav li div input {
    background-color: transparent;
    border : none;
    display : none;
    font-style: italic;
    padding-left: 25px;
}

.sidebar-nav li div:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

.sidebar-nav li div:active,
.sidebar-nav li div:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    font-size: 18px;
    margin-bottom : 25px;
    margin-top : 25px;
}

.sidebar-nav > .sidebar-brand div {
    color: #999999;
}

.sidebar-nav > .sidebar-brand div:hover {
    color: #fff;
    background: none;
}

@media(min-width:768px) {
    #wrapper {
        padding-left: 0;
    }
    #wrapper.toggled {
        padding-left: 175px;
    }
    #sidebar-wrapper {
        width: 0;
    }
    #wrapper.toggled #sidebar-wrapper {
        width: 175px;
    }
    #page-content-wrapper {
        padding: 20px;
        position: relative;
    }
    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }
}

#ulaz-folder-li
{
    margin-bottom: 0px;
}

#settings-folder-li
{
    height: auto;
    margin-top: 5px !important;
    margin-bottom: 0px;
}

#download-folder-li
{
    height: auto;
    margin-top: 5px !important;
    margin-bottom: 0px;
}

.download-item
{
    text-indent: 25px;
    font-size : 10px;
    color : #999999;
}

#logout-li
{
    height: auto;
    margin-top: 5px !important;
    margin-bottom: 0px;
}



/* Home page Styles */

.nav-controls-container
{
    position : fixed;
    top : 0;
    width : 100%;
    height : 44px;
    background-color : #e6ebf4;
    z-index : 9999;  
}

.nav-controls-date
{
    float : right;
    margin-right : 18px;
    margin-top : 10px;
    z-index : 9999; 
}

.nav-controls-search
{
    float : right;
    margin-right : 200px;
    margin-top : 10px;
    z-index : 9999; 
}

#page-content-wrapper
{
    padding : 0px;
}

#page-title
{
    float : left;
    margin-left : 20px;
    margin-top : 13px;
    font-size : 20px;
    color : #337ab7;
}

#tags-container
{
    position : fixed;
    width : 100%;
    top: 44px;
    z-index : 10;
    min-height: 0;
    height:auto;
    display:inline-block;
    background-color : #e6ebf4;
    padding-top : 10px;
    -webkit-box-shadow: 2px 2px 2px #cccccc;
    -moz-box-shadow: 2px 2px 2px #cccccc;
    box-shadow: 2px 2px 2px #cccccc;
    -o-box-shadow: 2px 2px 2px #cccccc;
}

.tag
{
    display:inline-block;
    padding-left : 8px;
    padding-right: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom : 25px;
    margin-left : 15px;
    background-color : #cccccc;
    color : #333;
    border-radius : 5px;
    text-align: center;
    -webkit-box-shadow: 2px 2px 2px #888888;
    -moz-box-shadow: 2px 2px 2px #888888;
    box-shadow: 2px 2px 2px #888888;
    -o-box-shadow: 2px 2px 2px #888888;
}

.stylish-input-group .input-group-addon{
    background: white !important; 
}
.stylish-input-group .form-control{
	border-right:0; 
	box-shadow:0 0 0; 
	border-color:#ccc;
}
.stylish-input-group button{
    border:0;
    background:transparent;
}

.delete-tag
{
    font-size : 15px; 
    margin-left : 15px;
    margin-top : 2.5px;
}

#artikli-container
{
    width : 100%;
    height : auto;
    padding-left: 18px;
    padding-right: 18px;
    margin-top : 64px;
}

.artikal
{
    position : relative;
    float : left;
    width : 320px;
    height : 100%;
    margin-right : 15px;
}

.artikal-content
{
    margin-top : 10px;
}

.artikal-table tr.artikal-row td.artikal-coll
{
    vertical-align: top;
    position : relative;
    padding-top : 20px;
    padding-bottom: 10px;
    padding-left : 4px;
    padding-right: 4px;
}

.artikal-info-div-prikazi-vise
{
    text-align: center;
    margin-top : 10px;
    margin-bottom: 40px;
    margin-left : 20%;
    margin-right : 20%;
    padding-top : 20px;
    padding-bottom : 20px;
    font-size : 20px;
    color : #337ab7;
    cursor : pointer;
    /* background-color : rgb(230, 235, 244); */
    /*border-radius: 20px; */
    /*border : 1px solid rgb(202, 219, 247); */ 
}


.artikal-info-div
{
    float : left;
    width : 100%;
    padding-top : 50px;
    padding-bottom: 5px;
    padding-left : 1%;
    font-weight: bold;
    border-bottom : 1px solid #ccc;
    font-size : 16px;
    color : #4d4d4d;
}

.artikal-table tr.artikal-info-row:first-child div.artikal-info-div
{
    padding-top : 20px;    
}

.artikal-table tr td .display-raspodjela-full
{
    display : table-cell;
    vertical-align: bottom;
    cursor: pointer;
    color : #337ab7;
}

.artikal-content-p
{
    margin-bottom : 1px;
}

.artikal-slika
{
    max-height: 320px;
    max-width: 320px;
    min-height: 320px;
    min-width: 320px;
    border: 1px solid #888;
}

.img-button
{
    position : absolute;
    top : 4px;  
    height : 20px;
    width : 20px;
    cursor: pointer
}

.edit-button
{
    right : 2px;
}

.copy-button
{
    right : 26px;
}

.ulaz-button
{
    right : 50px;
}

.print-button
{
    right : 74px;
}

.comment-button
{
    right : 98px;
}

.img-button:hover
{
    height: 22px;
    width: 22px;
}

.ista-sifra-sum
{
    color:red;
}

.ista-sifra-wrap
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width : 100%;
    margin-top : 5px;
    margin-bottom : 10px;
}

.ista-sifra-div
{
    display: inline-block;
    height: 17px;
    width: 17px;
    border: 2px solid #ccc;
    margin-right : 5px;
    border-radius : 100%;
    cursor: pointer;  
}

.ista-sifra-div-self-large
{
    height: 30px;
    width: 30px;
}

.ista-sifra-div-self-white
{
    background-image: url('/icon/check-white.png');
    background-repeat: no-repeat;
    background-size: 60% 60%;
    background-position: center;
}

.ista-sifra-div-self-black
{
    background-image: url('/icon/check-black.png');
    background-repeat: no-repeat;
    background-size: 60% 60%;
    background-position: center;
}

/* Display Table Styles */

.display-table
{
    border : 1px solid grey;
    table-layout: fixed;
    font-size : 10px;
    margin-top : 10px;
}

.display-table-cell
{
    text-align: center;
    border : 1px solid grey;
    width: 50px; 
    background-color: white; 
}

.display-table-duzina-cell
{
    background-color: #cceeff
}

.display-table-velicina-cell
{
    background-color:rgb(252, 228, 214)
}


.display-table-poslovnica-cell
{
    text-align: center;
    width: 70px;  
}

.display-table-header
{
    background-color : #ffff99;
    font-weight: bold;
}

.display-table-value
{
    background-color : #f2f2f2;
}

.display-table-duzina
{
    text-align: center;
    border : 1px solid grey;
    background-color : #ccccff;
}

th
{
    text-align : center;
}

.form-signin-heading
{
    text-align: center;
    margin-bottom: 20px;
}

.form-signin
{
    margin-left : 30%;
    width : 40%;    
}

/* Izvjestaj table */

.izvjestaj-table
{
    margin-right : 5%;
    width : 90%;
    margin-left : 5%;
    border : 1px solid grey;
    table-layout: fixed;
    font-size : 12px;
    margin-top : 30px;
    margin-bottom : 20px;
}

.izvjestaj-cell-left
{
    text-align: left;
}

.izvjestaj-table tr td,
.izvjestaj-table tr th
{
    padding : 3px;
    text-align: center;
    border-collapse: collapse;
    border-bottom : 1px solid grey;
}

.izvjestaj-table tr:first-child
{
    background-color : rgb(255, 255, 153);
}

.izvjestaj-cell-left
{
    text-align: center !important;
    border-right : 1px solid grey;
}

.izvjestaj-sum
{
    background-color : rgb(255, 255, 153);    
}

.small-cell
{
    width : 3% !important;
    border-right : 1px solid grey;
}

.izvjestaj-row-grey
{
    background-color: #e6e6e6;
}


/* Settings layout */

#nav-top
{
    margin-top : 10px;    
}

#nav-top,
#nav-top ul
{
    width: 100%    
}

#nav-top ul li
{
    width: 50%;
    cursor: pointer !important;      
}

#nav-top ul li a
{
    text-align: center; 
    cursor: pointer !important;          
}

#nav-bottom
{
    margin-top : 15px; 
    display: none;   
}

#nav-bottom,
#nav-bottom ul
{
    width: 95%;
    margin-left: 2.5%;    
}

#nav-bottom ul li
{
    width: 16%;
    cursor: pointer !important;      
}

#nav-bottom ul li a
{
    text-align: center; 
    cursor: pointer !important;          
}

#podaci-list-container
{
    margin-top : 20px; 
    width: 92%;
    margin-left: 4%; 
    display: none;    
}

.list-group-item
{
    border-width: 1px 0px 1px 0px;
}

.list-group-item input
{
    border : 0px;
    margin: 0px;
    padding: 0px;
    background-color: transparent;
    margin-left : 1%;
}

.list-group-item:first-child
{
    border-top : 0px;
}


.list-remove,
.list-eye,
.list-save
{
    float : right;
    cursor: pointer;
}


.list-eye
{
    height: 20px;
    width: 20px;
    margin-right: 10px;
}

.list-save
{
    height: 20px;
    width: 20px;
    margin-right: -4px;
}

.loader-container
{
    float : right;   
    margin-right: 10px
}

.loader-container-slike
{
    display: none;
    margin-right: 25px; 
}

.loader-container-message
{
    display: none;
    float : right; 
    font-size: 12px;
    margin-right: 10px; 
    margin-top : 3px;
}


/* Spining loading */

.checkmark {
    width: 18px;
    margin: 0 auto;
  }
  
  .path {
    stroke-dasharray: 300;
    stroke-dashoffset: 0;
    -webkit-animation-name: load, spin;
    -webkit-animation-duration: 3s, 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-name: load, spin;
    animation-duration: 3s, 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50px 50px;
  }
  
  .path-complete {
      -webkit-animation-play-state: paused;
      animation-play-state: paused;
  }
  
  .check 
  {
      stroke-dasharray: 110;
      stroke-dashoffset: -110;
      stroke-width: 0;
  }
  
  .check-complete 
  {   
      -webkit-animation: check 1s ease-in forwards;
      animation: check 1s ease-in forwards;
      stroke-width: 15;
      stroke-dashoffset: 0;
  }
  
  .fill 
  {
      stroke-dasharray: 285;
      stroke-dashoffset: -257;
      -webkit-animation: spin-fill 3s cubic-bezier(0.700, 0.435, 0.120, 0.600) infinite forwards;
      animation: spin-fill 3s cubic-bezier(0.700, 0.465, 0.120, 0.600) infinite forwards;
      -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50px 50px;
  }
  
  .fill-complete 
  {
      -webkit-animation: fill 1s ease-out forwards;
      animation: fill 1s ease-out forwards;
  }
  
  @-webkit-keyframes load {
   0% {
     stroke-dashoffset: 300;
     -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
   }
   50% {
       stroke-dashoffset: 0;
       -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
   }
   100% {
     stroke-dashoffset: -300;
   }
  }
  @keyframes load {
   0% {
     stroke-dashoffset: 285;
     animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
   }
   50% {
       stroke-dashoffset: 0;
       animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
   }
   100% {
     stroke-dashoffset: -285;
   }
  }
  
  @-webkit-keyframes check {
   0% {
     stroke-dashoffset: -110;
  }
   100% {
     stroke-dashoffset: 0;
   }
  }
  @keyframes check {
   0% {
     stroke-dashoffset: -110;
  }
   100% {
     stroke-dashoffset: 0;
   }
  }
  
  @-webkit-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
    }
  }
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  @-webkit-keyframes spin-fill {
    0% {
      -webkit-transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(720deg);
    }
  }
  @keyframes spin-fill {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(720deg);
    }
  }
  
  @-webkit-keyframes fill {
    0% {
      stroke-dashoffset: 285;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }
  @keyframes fill {
    0% {
      stroke-dashoffset: 285;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }
  
  .success 
  {
      stroke: #009900;
      transition: stroke .6s;
  }


  /* Switch */

   /* The switch - the box around the slider */
    .switch {
        position: relative;
        display: inline-block;
        width: 30px;
        height: 17px;
    }

    /* Hide default HTML checkbox */
    .switch input {display:none;}

    /* The slider */
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 13px;
        width: 13px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    input:checked + .slider {
        background-color: #2196F3;
    }

    input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(13px);
        -ms-transform: translateX(13px);
        transform: translateX(13px);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 17px;
    }

    .slider.round:before {
        border-radius: 50%;
    } 

    #opce-postavke-list-container 
    {
        width : 90%;
        margin-top : 50px;
        font-family : "Helvetica Neue", Helvetica, Arial, sans-serif;
        color : rgb(85, 85, 85);
    }

    #opce-postavke-list-container  ul
    {
        border-bottom: 1px solid #dddddd;
    }

    #opce-postavke-list-container  ul li
    {
        border-width: 0px;
    }

    #opce-postavke-list-container  ul li.list-group-item-title
    {
        font-size : 16px;
    }

    #opce-postavke-list-container  ul li.list-group-item-option
    {
        margin-left: 3%;
    }

    #opce-postavke-list-container  ul li.list-group-item-option:last-child
    {
        padding-bottom: 25px;
    }

    #opce-postavke-list-container  ul li label
    {
        float: right;
        margin-right: 3%;
    }

    .poslovnica-ime:hover {
        color: rgb(224, 217, 79);
        cursor: pointer;
    }