#container {
  height: 400px;
}

.highcharts-figure, .highcharts-data-table table {
  min-width: 310px;
  max-width: 800px;
  margin: 1em auto;
}

.highcharts-data-table table {
  font-family: Verdana, sans-serif;
  border-collapse: collapse;
  border: 1px solid #EBEBEB;
  margin: 10px auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
}
.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
  padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
  padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}
.highcharts-data-table tr:hover {
  background: #f1f7ff;
}
input[type="text"], input[type="number"],
select.form-control {
  background: transparent;
  border: none;
  border-bottom: 1px solid #000000;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
  font-size:20px;
  padding-bottom:5px;
}
input[type="custom"]{
  background-color:white !important;
}
input[type="text"]:focus, input[type="number"],
select.form-control:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 10px; /* Specified height */
  background: rgba(30,30,30,0.2); /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 20px; /* Set a specific slider handle width */
  height: 20px; /* Slider handle height */
  background: LightSkyBlue; /* Green background */
  cursor: pointer; /* Cursor on hover */
  border:none;
}

.slider::-moz-range-thumb {
  width: 20px; /* Set a specific slider handle width */
  height: 20px; /* Slider handle height */
  background: LightSkyBlue; /* Green background */
  border:none;
  cursor: pointer; /* Cursor on hover */
}
.navbar { background-color: rgb(6, 184, 238); }
.navbar .navbar-nav .nav-link { color: white;font-size:14px;text-transform:uppercase;text-align: right}
.navbar .navbar-nav .nav-link:hover { color: khaki;}
.navbar .navbar-nav .active > .nav-link { color: khaki;text-transform:uppercase; }

ul a:hover{
  color: khaki !important;
}
nav li{
    text-align: left;
    text-transform: uppercase;
}
li > a:after{
    content: '';
    display: block;
    height: 2px;
    background: khaki;
    transform: scaleX(0);
    transition: transform .5s;
}
li > a:hover:after{
    transform: scaleX(1);
    transition: transform .5s;
}
.dropdown {
  transform: none;
  transition-property: none;
}
.active{
    color: khaki !important;

}


footer a.text-light:hover { color: #fed136!important; text-decoration: none; }
footer .cizgi { border-right: 1px solid #535e67; }
@media (max-width: 992px) { footer .cizgi { border-right: none; } }
@media (max-width: 992px) {
  .pl-1 {
    border-bottom:1px solid black;width:50%
  }
  .nav-link {
    text-align:left !important;
  }
}
@media (min-width: 992px) {
   .pl-1 {
     border-right:2px solid white;
   }
   .barometer {
     background:FloralWhite;
     margin-top:50px;
     margin-bottom:50px;
     box-shadow:3px 3px 6px DarkSlateBlue;
   }

 }
@media (max-width: 800px) {
  #progressbar1 li {
    width: calc(100%/4) !important;
  }
}
.pbar{
  border-right:1px solid black;
  font-weight: 700;
  background:cornsilk;
  line-height: 1;
  padding: 20px 0px 0px 0px;
}

.pbar:first-of-type{
  border-left:1px solid black;
}

.sectiondiv{
  padding:20px 0px 60px 0px;

}
.btn {
  border:1px white solid;
}

hr {
  margin:0px;
}

html {
  overflow-y: scroll;
}
@import url('https://fonts.googleapis.com/css?family=Roboto:300i,400,400i,500,700,900');
/*font Variables*/
/*Color Variables*/
 #progressbar {
	 margin-bottom: 30px;
	 overflow: hidden;
   z-index: 200;
   background:white;
   padding:50px 0px 50px 0px;
   border-top: 1px solid black;
   border-bottom: 1px solid black;
}
 #progressbar li {
	 list-style-type: none;
	 color: #99a2a8;
	 font-size: 9px;
	 width: calc(100%/6);
	 float: left;
	 position: relative;
	 font: 500 13px/1 'Roboto', sans-serif;
}
 #progressbar li:nth-child(2):before {
	 content: "\f2d9";
}
#progressbar li:nth-child(3):before {
  content: "\f47c";
}
#progressbar li:nth-child(4):before {
  content: "\f212";
}
#progressbar li:nth-child(5):before {
  content: "\f3bb";
}

#progressbar li:nth-child(6):before {
  content: "\f375";
}

 #progressbar li:before {
	 content: "\f376";
	 font: normal normal normal 30px/50px Ionicons;
	 width: 50px;
	 height: 50px;
	 line-height: 50px;
	 display: block;
	 background: #eaf0f4;
	 border-radius: 50%;
	 margin: 0 auto 10px auto;
}
 #progressbar li:after {
	 content: '';
	 width: 100%;
	 height: 10px;
	 background: #eaf0f4 !important;
	 position: absolute;
	 left: -50%;
	 top: 21px;
	 z-index: -1;
}
 #progressbar li:last-child:after {
	 width: 150%;
}
 #progressbar li.active {
	 color: #5cb85c;
}
 #progressbar li.active:before, #progressbar li.active:after {
	 background-color: #5cb85c !important;
	 color: white;
}
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.card {
  width: 18rem;
  padding:0;
  border-radius: 10px;
}

.navimg {
 margin-left: 5px;
 margin-bottom:3px;
 max-height:20px;
 box-shadow: grey 1px 1px 4px;
}
#progressbar1 {
  margin-bottom: 30px;
  overflow: hidden;
  z-index: 200;
  background:white;
  padding:50px 0px 50px 0px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}
#progressbar1 li {
  list-style-type: none;
  color: #99a2a8;
  font-size: 9px;
  width: calc(100%/8);
  float: left;
  position: relative;
  font: 500 13px/1 'Roboto', sans-serif;
}
#progressbar1 li:nth-child(2):before {
  content: "\f2d9";
}
#progressbar1 li:nth-child(3):before {
 content: "\f47c";
}
#progressbar1 li:nth-child(4):before {
 content: "\f212";
}
#progressbar1 li:nth-child(5):before {
 content: "\f3bb";
}

#progressbar1 li:nth-child(6):before {
 content: "\f375";
}

#progressbar1 li:before {
  content: "\f376";
  font: normal normal normal 30px/50px Ionicons;
  width: 50px;
  height: 50px;
  line-height: 50px;
  display: block;
  background: #eaf0f4;
  border-radius: 50%;
  margin: 0 auto 10px auto;
}
#progressbar1 li:after {
  content: '';
  width: 100%;
  height: 10px;
  background: #eaf0f4 !important;
  position: absolute;
  left: -50%;
  top: 21px;
  z-index: -1;
}
#progressbar1 li:last-child:after {
  width: 150%;
}
#progressbar1 li.active {
  color: #5cb85c;
}
#progressbar1 li.active:before, #progressbar1 li.active:after {
  background-color: #5cb85c !important;
  color: white;
}
.card {
  margin-bottom: 30px;
}
.profil-hero {
  min-height: 100vh;
  background-image: url("/assets/img/investicije.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
footer {
  background:linear-gradient(0deg, #6c757d, #6c757d);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.profil-hero-result {
  background:linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url(/assets/img/1.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color:black;
}
.profil-hero h1{
  font-size: 50px;
  text-transform:capitalize;
  font-variant:small-caps;
  font-weight:bold;
  text-decoration: underline;
  color: white;
}
.profil-hero .tile {
  background-color: rgba(0, 0 , 0, 0.6);
  padding: 10px;
  border-radius: 5px;
}
.profil-hero h3{
  font-size: 20px;
  text-transform:capitalize;
  font-variant:small-caps;
  font-weight:bold;
  color: white;
}
.profil-hero button{
  text-transform:capitalize;
  font-variant:small-caps;
  font-weight:bold;
}
.profil-hero hr {
  color: white;
}
.profil-start {
  padding-top:0px;
  background-color: white;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.profil-start h1{
  font-size: 40px;
  text-transform:capitalize;
  font-variant:small-caps;
  font-weight:bold;
  text-decoration: underline;
}

.profil-start hr {
  margin: 10px;;
}

.big {
  //padding: 10px 0px 0px 40px;
  width:100%;
  background-color: Snow;
  border-radius:5px;
  border: grey 1px solid;
  margin-bottom:5px;
}
.big-label {
  padding: 10px 0px 10px 30px;
  width:100%;
}
.big-active {
  background-color: SpringGreen;
}
section {
  width:100vw;
}
.forma label {
  display: inline-block;
  width: 150px;
  text-align: right;
  padding-right: 20px;
}
#s0 {
  background:linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url(/assets/img/1.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 150vh;
}
#s1 {
  background:linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url(/assets/img/2.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 150vh;
}
#s2 {
  background:linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url(/assets/img/3.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 150vh;
}
#s3 {
  background:linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url(/assets/img/4.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 150vh;
}
#s4 {
  background:linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url(/assets/img/9.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 150vh;
}
#s5 {
  background:linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url(/assets/img/6.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 150vh;
}
#s6 {
  background:linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url(/assets/img/7.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 150vh;
}
#s7 {
  background:linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url(/assets/img/8.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 150vh;
}
#finish{
  background:linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url(/assets/img/12.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.sms {
  display:none;
}
.red-border>input:focus {
  border: red solid 2px;
}
.green-bottom-border {
  border-bottom: green 1px solid !important;
}
.red-bottom-border {
  border-bottom: red 1px solid !important;
}
.errspan {
    float: right;
    margin-right: 6px;
    margin-top: -20px;
    position: relative;
    z-index: 2;
    color: red;
}
.checkspan {
  float: right;
  margin-right: 6px;
  margin-top: -20px;
  position: relative;
  z-index: 2;
  color: green;
}