html {
  height: 100%;
}
body {
  height: 100%;
}

@-webkit-keyframes tresi {
  0% { -webkit-transform: translate(30px); }
  20% { -webkit-transform: translate(-30px); }
  40% { -webkit-transform: translate(15px); }
  60% { -webkit-transform: translate(-15px); }
  80% { -webkit-transform: translate(8px); }
  100% { -webkit-transform: translate(0px); }
}
@-moz-keyframes tresi {
  0% { -moz-transform: translate(30px); }
  20% { -moz-transform: translate(-30px); }
  40% { -moz-transform: translate(15px); }
  60% { -moz-transform: translate(-15px); }
  80% { -moz-transform: translate(8px); }
  100% { -moz-transform: translate(0px); }
}
@-o-keyframes tresi {
  0% { -o-transform: translate(30px); }
  20% { -o-transform: translate(-30px); }
  40% { -o-transform: translate(15px); }
  60% { -o-transform: translate(-15px); }
  80% { -o-transform: translate(8px); }
  100% { -o-origin-transform: translate(0px); }
}

.totalheightcalc,.totalwidthcalc{
  height: 1px!important;
  width:1px!important;
  background-color: #e3e3e3;
  border: 0!important;
  font-size: 1px!important;
  line-height:0.1!important;
  
}
.sizes .has-error{display:none!important;visibility:hidden!important;opacity:0!important}


.btn-primary{
    color: white;
    background-color: #089d40;
    font-weight: 500;
    letter-spacing: 1px;
}

img.logo{
  max-width:300px;
  padding-bottom: 30px;
}


.navbar{
  margin-top: 20px
}

.pozicija-header{
  background-color: #d7d7d7;
  border-radius: 20px;
  
    padding: 10px 0px;
  margin:0px 0px 20px 0px;
}

.pozicija{
  background-color: #f1f1f1;
  border-radius: 20px;
  padding: 10px;
  margin:0px 0px 20px 0px;
}

.pozicija label{
    width: 45%;
    font-weight: bold;
    text-align: right;
    padding-right: 10px;
    font-size: 18px;
    line-height: 1;
    vertical-align: middle;
    height: 100%;
}


.pozicija input[type="text"]{
    width: 53%;
    font-size: 23px;
    text-align: center;
    line-height: 2.7;

    display: inline-block;
}

.pozicija .opening label{
  width: 48%;
  display: inline-block;
  text-align: left;
  font-size: 16px;
  padding-left: 24px;
  line-height: 1.3;
}

.pozicija .opening label.right{
  width: 48%;
  display: inline-block;
  text-align: right;
  font-size: 16px;
  line-height: 1.3;
  padding: 0px 24px 0px 0px;
}
.pozicija .opening label.right .icons,
.pozicija .opening label.right .icons .icon-unchecked,
.pozicija .opening label.right .icons .icon-checked{
  right:0;
  left: auto

}

.form-group-hg textarea.form-control{
  height:auto;
}

.pozicija .komentar label{
  text-align: left;
}

span.title{
  width:40%;
  display: inline-block;
  font-weight: bold;
  font-size: 16px;
}

span.info{
  width:58%;
  display: inline-block;
  font-size: 15px;
  text-align: right;
}



.form-group{
  margin-bottom:20px;
  padding:5px;

}
.form-group-edited{
  background-color:#fdf0a2;
  padding:5px;
}


.form-group.has-error span.has-error{
  background-color: #e74c3c;
  font-weight: 300;
  position: absolute;
  top: -9px;
  right: 4px;
  color: #fff;
  font-size: 11px;
  padding: 4px 6px;
  line-height: 1;
}
.has-error,.form-control.has-error:focus{
    color: #e74c3c;
    border-color: #e74c3c;
    box-shadow: none;
}

.form-sizes{
  background:#ebebeb;
}
.totalsizes{
    width: 100%;
    text-align: center;
    padding: 20px 0px 10px 0px;
    background: #e3e3e3;

}
.totalsizes .title{
  line-height: 1;
  font-size: 18px;
}
.totalsizes .sizes{
  font-size: 22px;
  font-weight: bold;
  line-height: 1.2;
  
}
.totalsizes .small{
  font-size: 12px;
  line-height: 1.1;
  
}
.pozicija .col-md-4 img.mx-center{

  display: flex;
  justify-content: center;
  margin: 0 auto;
  text-align: center;
}

.error-notice{ 
  display: block;
  opacity: 0;
  visibility: hidden;

  background-color: #e74c3c;
  color: #fff;
  font-size: 12px;
  padding: 1px 5px;
  margin-top: 5px; 
}

.alert.alert-danger{
  -webkit-animation: tresi 0.8s 1 linear;
  -moz-animation: tresi 0.8s 1 linear;
  -o-animation: tresi 0.8s 1 linear;
}

/* iPhone, iPad, and Retina Displays */
 
/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
  
}
 
/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
  
}
 
/* iPhone Portrait */
@media screen and (max-device-width: 480px) and (orientation:portrait) {

  
} 
 
/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
  
}
 
/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation:portrait) {
  
}
 
/* iPad Landscape */
@media screen and (min-device-width: 481px) and (orientation:landscape) {
  
}
/*------------------------------------------*/

/* max-width 640px, mobile-only styles, use when QAing mobile issues */
@media only screen and (max-width: 40em) {
  .col-md-4 img.mx-center{ 
    text-align: center;
    margin: 0 auto;
    margin: 20px 0px;
  }
  
} 
 
/* Medium screens - TABLET */
/* min-width 641px, medium screens */
@media only screen and (min-width: 40.063em) {
  
} 

/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
  
  
} 
 
/* Large screens - DESKTOP */
/* min-width 1025px, large screens */
@media only screen and (min-width: 64.063em) {


  
  
} 


 
/* min-width 1024px and max-width 1440px, use when QAing large screen-only issues */
@media only screen and (min-width: 64.063em) and (max-width: 90em) {
  
} 
 
/* XLarge screens */
/* min-width 1441px, xlarge screens */
@media only screen and (min-width: 90.063em) {
  
} 
 
/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
@media only screen and (min-width: 90.063em) and (max-width: 120em) {
  
} 
 
/* XXLarge screens */
/* min-width 1921px, xlarge screens */
@media only screen and (min-width: 120.063em) {
  
}