/* ==== Google font ==== */
@import url('google-fonts.css?family=Noto+Serif:400,400italic,700|Open+Sans:300,400,600,700');
body {
	height:100%;
	font-family:'Open Sans', Arial, sans-serif;
	font-weight:300;
	line-height:1.6em;
	color:#fff;
}
.user-avatar{
	border: solid 2px #fff;
	width:100%;
	max-width: 100px;
	border-radius: 100%;
}

.nav > li > a:hover, .nav > li > a:focus {
    background-color: #196c9e;
    text-decoration: none;
}

.tep-menu{
	background-color: #2887c1;
	min-height: 100vh;
	height:auto;
	color:#fff;
}
.tep-menu .nav-sidebar{
	margin-top: 20px;
}

.tep-menu .nav-sidebar li{
	background-color: #2887c1;
}
.tep-menu .nav-sidebar li a{
	color:#fff;
	font-size: 0.8em;
	font-weight: 500;
	
}

.tep-menu .nav-sidebar li.socail{
  background-color: #3ca2e0;
}

.tep-menu .nav-sidebar li.socail div{
  margin:5px;
  text-align: center;
}

.tep-menu .nav-sidebar li.socail div a{
  padding:5px;
}

.tep-menu .nav-sidebar li.socail div img{
  width:32px;
}


.tep-menu .nav-sidebar li.active{
	background-color: #196c9e;
}
.content{
	min-height: 100vh;
	height:100%;
	background-color: #333;
	color:#fff;
     background-image:  url(../assets/images/bg1.jpg);
}
.content  div.bg{
  min-height: 98vh;
  padding-top: 20px;
  background-image: url(../assets/images/bg-ul.png);
  width:100%;
  border-radius: 2px;
}

.content div.bg > div{
  padding:10px;
}
.content ul li{
  padding:1px;
}
/*
.tep-menu .nav-sidebar li.active a{
	color:#fff !important;
}
.tep-menu .nav-sidebar li:hover{
	background-color: #3ca2e0;
}
.tep-menu .nav-sidebar li:hover a{
	color:#fff !important;
}
*/


/***
User Profile Sidebar by @keenthemes
A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme
Licensed under MIT
***/

/* Profile container */
.profile {
  margin: 20px 0;
}

/* Profile sidebar */
.profile-sidebar {
  padding: 20px 0 10px 0;
  background: #fff;
}

.profile-userpic img {
  float: none;
  margin: 0 auto;
  width: 50%;
  height: 50%;
  -webkit-border-radius: 50% !important;
  -moz-border-radius: 50% !important;
  border-radius: 50% !important;
}

.profile-usertitle {
  text-align: center;
  margin-top: 20px;
}

.profile-usertitle-name {
  color: #5a7391;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 7px;
}

.profile-usertitle-job {
  text-transform: uppercase;
  color: #5b9bd1;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 15px;
}

.profile-userbuttons {
  text-align: center;
  margin-top: 10px;
}

.profile-userbuttons .btn {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 15px;
  margin-right: 5px;
}

.profile-userbuttons .btn:last-child {
  margin-right: 0px;
}
    
.profile-usermenu {
  margin-top: 30px;
}

.profile-usermenu ul li {
  border-bottom: 1px solid #f0f4f7;
}

.profile-usermenu ul li:last-child {
  border-bottom: none;
}

.profile-usermenu ul li a {
  color: #93a3b5;
  font-size: 14px;
  font-weight: 400;
}

.profile-usermenu ul li a i {
  margin-right: 8px;
  font-size: 14px;
}

.profile-usermenu ul li a:hover {
  background-color: #fafcfd;
  color: #5b9bd1;
}

.profile-usermenu ul li.active {
  border-bottom: none;
}

.profile-usermenu ul li.active a {
  color: #5b9bd1;
  background-color: #f6f9fb;
  border-left: 2px solid #5b9bd1;
  margin-left: -2px;
}

/* Profile Content */
.profile-content {
  padding: 20px;
  background: #fff;
  min-height: 460px;
}


.progress{
  min-height: 35px;
  border-radius: 0px!important;
}

.progress-bar{
  font-weight: 600;
  padding-top: 10px;
  vertical-align: middle!important;
}
/*scroll bar*/
#idCustomScrollbarContainer {
  height: 78vh;
  max-width: 400px;
}

#myCustomScrollbarContainer .scroll-viewport {
   height: 78vh;
   max-width: 400px;
}


.scroll-bar {
    background-color: #333!important;
    border-radius: 1px!important;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 0.6s ease-in-out 0s;
    width: 15px;
}

.scroll-thumb {
    background-color: #fff!important;
    border-radius: 1px!important;
    cursor: pointer;
    height: 20px;
    left: 1px;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 13px;
}


.timeline{
    background-image: url("images/line-1.png");
    background-position: center; 
    background-repeat: repeat-y;
    max-width: 960px;
    margin: 0 auto;
    position: relative;
    height: auto;
    padding: 0px;
    clear: both;
    overflow: hidden;
}
.timeline li.year, .timeline li.event{
  list-style-type: none;
  z-index: 999;
}
.timeline li.year{
  clear: both;
  width: 100px;
  margin: 0 auto;
  line-height:40px;
  /*
  background-color: #fff;
  */
background-color: #fff;
  border-radius:0px;
  text-align: center;
  margin-bottom:25px;
  color:#000;
  border: 1px solid #f39c12;
  box-shadow: 2px 2px 2px #888888;
  -moz-box-shadow: 2px 2px 2px #888888;
  -webkit-box-shadow: 2px 2px 2px #888888;
}
.timeline li.year:first-child{
  margin-top:0px;
}


.timeline li.event{
  font-size: 0.8em;
  font-weight: 600;
  width: 45%;
background-color: transparent;
  /*background-color: #fff;*/
  margin-bottom: 20px;
  padding: 20px;
  position: relative;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  /*border-color: #e5e6e9 #dfe0e4 #d0d1d5;
    */border-image: none;
    border-style: solid;
    border-width: 1px;
}

li.event:nth-child(odd) {
    /*color: green;*/
    color: green;
    clear:left;
    float: left;
}
li.event:nth-child(even) {
    /*color: #F5690C;*/
    color: #F5690C;
    clear: right;
    float: right;
    margin-top:100px;
    margin-bottom:50px;
}

.timeline li.event:nth-child(odd)::after {
    background:green;
    content: "";
    height: 2px;
    position: absolute;
    right: -11.2%;
    top: 30px;
    width: 11.2%;
    
}
li.event:nth-child(even)::before{
  background:#F5690C;
    content: "";
    height: 2px;
    position: absolute;
    top: 30px;
    width: 11.2%;
    left: -11.2%;
} 

@media (max-width: 640px) {
  .timeline li.event{
    width: 80%;
    background-color: #fff;
    border: 1px solid #ff0000;
    margin: 20px auto;
    padding: 20px;
    position: relative;
  }
  
  li.event:nth-child(odd) {
      color: green;
      clear: both;
      float: none;
  }
  li.event:nth-child(even) {
      color: #F5690C;
      clear: both;
      float: none;
  }
  
  .timeline li.event:nth-child(odd)::after, li.event:nth-child(even)::before {
      width: 0px;
  }
}


@media (max-width: 350px) {
  .timeline li.event{
    width: 98%;
    background-color: #fff;
    border: 1px solid #ff0000;
    margin: 20px auto;
    padding: 20px;
    position: relative;
  }
  
  li.event:nth-child(odd) {
      color: green;
      clear: both;
      float: none;
  }
  li.event:nth-child(even) {
      color: #F5690C;
      clear: both;
      float: none;
  }
  
  .timeline li.event:nth-child(odd)::after, li.event:nth-child(even)::before {
      width: 0px;
  }
}


}