@charset "utf-8";
/* CSS Document */

/*
body{
background-color: #5e5e5e;
}
*/
.tabs{
    width:100%;
    height:auto;
    margin:0 auto;
	font-family: 'Roboto', sans-serif;
	}

/* tab list item */
.tabs .tabs-list{
    list-style:none;
    margin:0px;
    padding:0px;
}
.tabs .tabs-list li{
    width:auto;
    float:left;
    margin-right:5px;
	margin-bottom: 0px;
    padding:8px 20px 4px 20px;
    text-align: center;
    background-color: #ccc;
    border-radius:10px 10px 0 0;
}
.tabs .tabs-list li:hover{
    cursor:pointer;
}
.tabs .tabs-list li a{
    text-decoration: none;
    color:white;
}

/* Tab content section */

.tabs .tab2{
    height: auto;
    height: auto;
    border-top: 2px solid #f7982f;
/*   border-radius:0 0 5px 5px; */
    padding:20px 15px;
    background-color: white;
    color: #333 ;
    clear:both;
}

.tabs .tab{
    display: none;
    height: auto;
    height: auto;
    border-top: 10px solid #f7982f;
/*   border-radius:0 0 5px 5px; */
    padding:20px 15px;
    background-color: #FFFFFF;
    color: #333 ;
    clear:both;
}
.tabs .tab h3{
    border-bottom:3px solid #f7982f;
    letter-spacing:1px;
	color: #f7982f;
    font-weight:normal;
    padding:5px 0;
	margin: 0px 0 20px 0; 
}
.tabs .tab p{
    line-height:20px;
    letter-spacing: 1px;
	margin: 0px 0 3px 0;
}

/* When active state */
.active{
    display:block !important;
}
.tabs .tabs-list li.active{
    background-color:#f7982f !important;
    color:black !important;
}
.active a{
    color:black !important;
}

/*--------------FORMA-----------*/

.divText{
font-family: 'Roboto', sans-serif;
font-size: 3vh;
}

.block
{
  margin: 0 0;
  max-width: 1000px;
  padding: 20px 0px;
}
.input-res
{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font: 15px/1 'Open Sans', sans-serif;
  color: #333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  max-width: 500px;
  background-color: #fff;
  border: 1px solid #a9a9a9;
  padding: 5px 11px 5px 11px;
  border-radius: 5px;
  box-shadow: none;
  outline: none;
  margin: 3px 0 5px 0;
  box-sizing: border-box; 
}

.input-res-2
{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font: 15px/1 'Open Sans', sans-serif;
  color: #333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 90%;
  max-width: 500px;
  background-color: #fff;
  border: 1px solid #a9a9a9;
  padding: 5px 11px 5px 11px;
  border-radius: 5px;
  box-shadow: none;
  outline: none;
  margin: 3px 0 5px 0;
  box-sizing: border-box; 
}

.input-res-3
{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font: 15px/1 'Open Sans', sans-serif;
  color: #333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 90%;
  max-width: 300px;
  background-color: #fff;
  border: 1px dashed#f7982f;
  padding: 15px 11px 15px 11px;
  border-radius: 5px;
  box-shadow: none;
  outline: none;
  margin: 3px 0 5px 0;
  box-sizing: border-box; 
}

.box1 { 
  position: absolute;
  width: 48%;
}

.box2 { 
  position: absolute;
  width: 50%;
 right: 0;

}

/* Dropdown */

.dropdown {
  display: inline-block;
  position: relative;
}

.dd-button {
  display: inline-block;
  border: 1px solid gray;
  border-radius: 4px;
  padding: 5px 35px 5px 5px;
  background-color: #ffffff;
  margin: 3px 0 0px 0;
  cursor: pointer;
  white-space: nowrap;
}

.dd-button:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black;
}

.dd-button:hover {
  background-color: #eeeeee;
}

.dd-input {
  display: none;
}

.dd-menu {
  position: absolute;
  top: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0;
  margin: 2px 0 0 0;
  box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);
  background-color: #ffffff;
  list-style-type: none;
}

.dd-input + .dd-menu {
  display: none;
} 

.dd-input:checked + .dd-menu {
  display: block;
} 

.dd-menu li {
  padding: 10px 10px;
  cursor: pointer;
  white-space: nowrap;
}

.dd-menu li:hover {
  background-color: #f6f6f6;
}

.dd-menu li a {
  display: block;
  margin: -10px -20px;
  padding: 10px 20px;
}

.dd-menu li.divider{
  padding: 0;
  border-bottom: 1px solid #cccccc;
}

/*--Zaglavlja--*/
.cont {
    display: inline-flex;
    align-items: flex-start;
	 }
  .c0{
  	width: 99%;
	margin: 10px 0;
	padding: 20px 0;
	background-color: #2A0BED;
  }
  .c1 {
    flex-direction: row;
	width: 49%;
  }
  .c2 {
    flex-direction: row-reverse;
	width: 49%;

  }
  
  /*--Artikal - delte--*/
.art {
    display: inline-flex;
    align-items: center;
	width: 100%;
	 }
  
  .art-01 {
    flex-direction: row;
	width: 92%;

  }
  
    .art-01 h2{
	
	font-size: 3vh;
	padding: 0;
	margin: 0;
	
  }
  .art-02 {
    flex-direction: row-reverse;



  }

/*--Kolicina-Cijene-Valuta--*/
.kcv {
    display: inline-flex;
    align-items: flex-start;
	 }
  .ko-01{
  flex-direction: row-reverse;
  	width: 37%;

  }
  .ci-02 {
    flex-direction: row;
	width: 37%;

  }
  .va-03 {
    flex-direction: row;
	width: 33%;

  }
  
  /*--Slika--*/
.sl {
	display: inline-flex;
    align-items: center;
    width: 100%;
	}
	
  .cf-01{
  flex-direction: row;
  align-items: flex-end;
  	width: 92%;

  }
  .de-02 {
    flex-direction: row-reverse;


  }
 
   /*--Azururanje-*/
.az {
	
    display: inline-flex;
    align-items: flex-start;

	width: 100%

	
	 }

 
/*----Dugme---*/

.btn
{
background-color: transparent;
border: 1px solid transparent;
color: #FF0000;
font-size: 3vh;
}

.btn:hover,
.btn:focus 
{
 opacity: 0.5;
}

.btn-save{
background-color: #f7982f;
border: 1px solid #f7982f;
padding: 12px 15px;
border-radius: 6px;
margin: 5px 5px 0 0;
width: 100%;
color:aliceblue;
-webkit-box-shadow: 0em -0.1rem 0em rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0em -0.1rem 0em rgba(0, 0, 0, 0.1) inset;
box-shadow: 0em -0.1rem 0em rgba(0, 0, 0, 0.1) inset;
}

.btn-save:hover,
.btn-save:focus {
 opacity: 0.8;
}

.btn-del{
background-color: #efefef;

border: 1px solid #888888;
padding: 3px 15px;
border-radius: 3px;
margin: 0px;
-webkit-box-shadow: 0em -0.1rem 0em rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0em -0.1rem 0em rgba(0, 0, 0, 0.1) inset;
box-shadow: 0em -0.1rem 0em rgba(0, 0, 0, 0.1) inset;
}

.btn-del:hover,
.btn-del:focus {
 opacity: 0.8;
}

hr{
border-top: 1px dashed #f7982f; 

}