@charset "utf-8";
/* CSS Document */
@import url('../css/font-awesome.min.css');

.menuicon  { width: 25px; height: 2px; background-color: black; margin: 4px 0; }
    
	a.activeleft { background-color:#FFF !important; color:000!important; }
	.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
	.grey1 { background-color:#273142 !important; }
	.grey1 > a { color:#fff !important; text-decoration:none; }
	.grey2 { background-color:#4d5766 !important; }
	.grey2 > a { color:#fff !important; text-decoration:none; }
	.grey3 { background-color:#98a2ae !important;   }
	.grey3 > a { color:#fff !important; text-decoration:none; }
	.grey4 { background-color:#bec8d2 !important;  }
	.grey4 > a { color:#000 !important; text-decoration:none; }
	.grey5 { background-color:#edf2f5 !important;   }
	.grey5 > a { color:#000 !important; text-decoration:none; }
	.table_grey2 { background-color:#4d5766 !important; color:#fff !important; height:35px;}
	.greenbg { color:#4bdd33;}
	.blue1 { color:#124191;}
	.blue2 { color:#00c9ff;}
	.blue1bg { background-color:#124191!important; color:#fff !important;}
	
	.blue2bg { background-color:#00c9ff!important; color:#fff !important;}
	
	.successbg { background-color:#eafaea;}
	.lightgrey { background-color:#CCC;}
	.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th { border:#999 solid 1px; padding:8px;}
	
/*	.sidebar-nav {
		border-bottom-right-radius: 1px;
		border-bottom-left-radius: 1px;}
		 
	.list-group.panel > .list-group-item {
		border-bottom-right-radius: 1px;
		border-bottom-left-radius: 1px;
	}*/
	.navbar-brand  {color:#fff !important;}
	.list-group-item { border-left:none; border-right:none;}
	.bgblue { background:none; background-color:#124191 !important; }
	.brandname { font-size:1em; font-weight:normal; color:#fff;  } 
	.list-group-item-success { background-color:#4d5766; color::#fff;}
	a.list-group-item-success:focus, a.list-group-item-success:hover, button.list-group-item-success:focus, button.list-group-item-success:hover
	{ background-color:#98a2ae; color:#fff;}
	
	a.list-group-item-success, a.list-group-item-success:hover, a.list-group-item-success:focus {color:#fff;}
	.list-group-item:last-child { border-bottom-right-radius: 0px; border-bottom-left-radius: 4px;}
	.list-group-item:first-child { border-top-right-radius: 0px; border-top-left-radius: 4px;}
	.panelbg { background-color:#273142; border:none; margin-top:2px;}
	.bannerimg { padding:0 !important; }
	.buttonmin {min-width: 100%; margin:1%; float: left; }
	.headline1 {  color:#273142; padding:5px 10px 5px 15px; font-size:18px;}
	.toolcontainer { border:solid 1px #ccc; background-color:#edf2f5; border-radius: 0 0 4px 4px; padding:10px; margin-top:-22px;}

	/* ------------------------------------------------------------------------------------------------------------------------------------------------ */

	<!--.breadcrumb { border: solid 1px #ccc; padding:2px 5px 5px 15px;} -->
	.breadcrumb { border: none;  margin:0; background:none; margin-bottom:5px;} 
	.breadcrumb li { font-size:12px !important ;}
	.breadcrumb li { display: inline; color:#ccc; text-decoration:none;}
	.breadcrumb li+li:before { content:"» ";  color:#000; font-size:20px;}
	.borderwhite { border:solid 1px #999999; background-color:#FFF; border-radius:4px; margin:10px 0 10px 0;}
	.borderwhite1 { border:solid 1px #c0c0c0; background-color:#FFF; border-radius:4px; }
	.shadow {-moz-box-shadow: 3px 3px 4px #ccc; -webkit-box-shadow: 3px 3px 4px #ccc; box-shadow: 3px 3px 4px #ccc; 
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#ccc')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#ccc');}
	
	.shadow1 {-moz-box-shadow: 0px 2px 4px #ccc; -webkit-box-shadow: 0px 2px 4px #ccc; box-shadow: 0px 2px 4px #ccc; 
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#ccc')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#ccc');}
	
	/* ------------------------------------------------------------------------------------------------------------------------------------------------ */
	
	.textsize1 { font-size:0.813em;} /* 13px	81.3%*/
	.textsize2 { font-size:0.875em;} /* 14px	87.5%*/
	.textsize3 { font-size:0.938em;} /* 15px	93.8%*/
	.textsize4 { font-size:1.000em;} /* 16px	100.0%*/
	
	/* ------------------------------------------------------------------------------------------------------------------------------------------------ */
	
input[type=text] { border: 1px solid #98a2ae; }
input[type=text]:focus { border: 1px solid #bec8d2;  background-color: rgba(237, 242, 245, 0.2); -moz-box-shadow: 0 3px 3px #edf2f5; -webkit-box-shadow: 0 3px 3px #edf2f5; box-shadow: 0 3px 3px #edf2f5; 
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#ccc')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#ccc');}
	.textsize1 { font-size:0.813em;} /* 13px	81.3%*/
	.textsize2 { font-size:0.875em;} /* 14px	87.5%*/
	.textsize3 { font-size:0.938em;} /* 15px	93.8%*/
	.textsize4 { font-size:1.000em;} /* 16px	100.0%*/
	
	select {
  /*  -webkit-appearance: none;
   -moz-appearance: none; */
   appearance: visible; border: 1px solid #98a2ae;
}

select::-ms-expand { /* for IE 11 */
   /*  display: none; */
}
select {border: 1px solid #98a2ae;}

select:focus,
select:active,
 { border: 1px solid #bec8d2;  background-color: rgba(237, 242, 245, 0.2); -moz-box-shadow: 0 3px 3px #edf2f5; -webkit-box-shadow: 0 3px 3px #edf2f5; box-shadow: 0 3px 3px #edf2f5; 
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#bec8d2')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#bec8d2');}
	
hr { border:1px solid #bec8d2; margin-top:10px; margin-bottom:15px; }






.list-group.panel > .list-group-item {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}


/*-------------*/
/*tabs - stages starts here*/


.tabs-left, .tabs-right {
  border-bottom: none;
  padding-top: 2px;
}
.tabs-left {
  border-right: 1px solid #ddd; 
}
.tabs-right {
  border-left: 1px solid #ddd;
}
.tabs-left>li, .tabs-right>li {
  float: none;
  margin-bottom: 2px;
}
.tabs-left>li {
  margin-right: -1px;
}
.tabs-right>li {
  margin-left: -1px;
}
.tabs-left>li.active>a,
.tabs-left>li.active>a:hover,
.tabs-left>li.active>a:focus {
  border-bottom-color: #ddd;
  border-right-color: transparent; 
}

.tabs-right>li.active>a,
.tabs-right>li.active>a:hover,
.tabs-right>li.active>a:focus {
  border-bottom: 1px solid #ddd;
  border-left-color: transparent;
}
.tabs-left>li>a {
  border-radius: 4px 0 0 4px;
  margin-right: 0;
  display:block;
}
.tabs-right>li>a {
  border-radius: 0 4px 4px 0;
  margin-right: 0;
}
.vertical-text {
  margin-top:50px;
  border: none;
  position: relative;
}
.vertical-text>li {
  height: 20px;
  width: 120px;
  margin-bottom: 100px;
}
.vertical-text>li>a {
  border-bottom: 1px solid #ddd;
  border-right-color: transparent;
  text-align: center;
  border-radius: 4px 4px 0px 0px;
}
.vertical-text>li.active>a,
.vertical-text>li.active>a:hover,
.vertical-text>li.active>a:focus {
  border-bottom-color: transparent;
  border-right-color: #ddd;
  border-left-color: #ddd;
}
.vertical-text.tabs-left {
  left: -50px;
}
.vertical-text.tabs-right {
  right: -50px;
}
.vertical-text.tabs-right>li {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.vertical-text.tabs-left>li {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
/*-------------*/
/*tabs - stages starts here*/


<!--------------------------------------------------------------------------------------------------------------------------------------->

.nav-side-menu {
  overflow: auto;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 200;
  background-color: #d0d8e1;
  position: fixed;
  top: 0px;
  width: 300px;
  height: 100%;
  color: #000;
}
.nav-side-menu .brand {
  background-color: #00c9ff;
  line-height: 50px;
  display: block;
  text-align: center;
  font-size: 14px;
}
.nav-side-menu .toggle-btn {
  display: none;
}

.nav-side-menu ul,
.nav-side-menu li {
  list-style: none;
  padding: 0px;
  margin: 0px;
  line-height: 35px;
  cursor: pointer;
  /*    
    .collapsed{
       .arrow:before{
		 font-family: FontAwesome;
		 content: "\f053";
		 display: inline-block;
		 padding-left:10px;
		 padding-right: 10px;
		 vertical-align: middle;
		 float:right;
	}
     }
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
  font-family: FontAwesome;
  content: "\f078";
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
  float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
  border-left: 3px solid #00c9ff;
  background-color: #98a2ae;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
  color: #000;  
}

<!------------>


.nav-side-menu ul .sub-menu1 li.active a,
.nav-side-menu li .sub-menu1 li.active a {
  color: #000; /* Sub Menu */
}
.nav-side-menu ul .sub-menu1 li,
.nav-side-menu li .sub-menu1 li {
  background-color: #edf2f5; /* Grey 2 */
  border: none;
  line-height: 28px;
  border-bottom: 1px solid #ccc;
  margin-left: 0px; color:#000;
}
.nav-side-menu ul .sub-menu1 li:hover,
.nav-side-menu li .sub-menu1 li:hover {
  background-color: #e0e0e0; 
}
.nav-side-menu ul .sub-menu1 li:before,
.nav-side-menu li .sub-menu1 li:before {
  font-family: FontAwesome;
  content: "\f105";
  display: inline-block;
  padding-left: 38px;
  padding-right: 10px;
  vertical-align: middle;
}

<!------------------>
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
  color: #000; /* Sub Menu */
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
  background-color: #edf2f5; /* Grey 2 */
  border: none;
  line-height: 28px;
  border-bottom: 1px solid #ccc;
  margin-left: 0px; color:#000;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
  background-color: #e0e0e0; 
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
  font-family: FontAwesome;
  content: "\f105";
  display: inline-block;
  padding-left: 18px;
  padding-right: 10px;
  vertical-align: middle;
}

.nav-side-menu li {
  padding-left: 0px;
  border-left: 3px solid #d0d8e1;
  border-bottom: 1px solid #23282e;
  background-color:#bec8d2; 
   /* grey */
}
.nav-side-menu li a {
  text-decoration: none;
  color: #000;
}
.nav-side-menu li a i {
  padding-left: 10px;
  width: 20px;
  padding-right: 20px;
}

.nav-side-menu li:hover {
  border-left: 3px solid #00c9ff;
  background-color:#98a2ae;
 
  /*  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease; */
}
@media (max-width: 767px) {
  .nav-side-menu {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
  }
  .nav-side-menu .toggle-btn {
    display: block;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 10 !important;
    padding: 3px;
    background-color: #ffffff;
    color: #000;
    width: 40px;
    text-align: center;
  }
  .brand {
    text-align: left !important;
    font-size: 22px;
    padding-left: 20px;
    line-height: 50px !important;
  }
}
@media (min-width: 767px) {
  .nav-side-menu .menu-list .menu-content {
    display: block;
  }
}

<!-------------------------------------------------------------------------------------------------------------------------->

.panel-heading {
  padding: 0;
	border:0;
}
.panel-title>a, .panel-title>a:active{
	display:block;
	padding:15px;
	color:#555;
	font-size:16px;
	font-weight:bold;
	text-transform:uppercase;
	letter-spacing:1px;
	word-spacing:3px;
	text-decoration:none;
}
.panel-heading  a:before {
   font-family: 'Glyphicons Halflings';
   content: "\e114";
   float: right;
   transition: all 0.5s;
}
.panel-heading.active a:before {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	transform: rotate(180deg);
} 

/* Drag and drop starts here----------------------------------- */
/*#launchPad {
    float:left;width:50% !important;
    border: 1px solid #eaeaea;
    background-color: #f5f5f5;
}
#dropZone { margin:auto; 
    float:left; width:50% !important;
    border: 1px solid #eaeaea;
    background-color: #ffffcc; overflow:scroll;
}
.card { 
    min-width: 150px; 
    padding: 5px 10px;
    margin:5px;
    border:1px solid #ccc;
    background-color: #eaeaea;
}
.stack {
    min-width: 180px;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    margin: 20px;
}
.stackHdr {
    background-color: #eaeaea;
    border: 1px solid #fff;
    padding: 5px 
}
.stackDrop1, .stackDrop2 {
    min-height:100px;
    padding: 15px;
}*/
/* Drag and drop sends here----------------------------------- */

.mymedia
{	min-width:200px; 
    padding: 5px 10px;
    margin:5px;
    border:1px solid #ccc;
    background-color: #eaeaea; list-style:none;}
	
.playlists {min-height:100px;
    padding: 15px; background-color:#f3f3f3;}
	
	.stackHdr {
    background-color: #eaeaea;
    border: 1px solid #fff;
    padding: 5px 
}
.stackDrop1
 {
    min-height:100px;
    padding: 15px;}
.commonheight
{ height:300px; }

.dot { height: 10px; width: 10px; background-color: #bbb; border-radius: 50%; display: inline-block; }

.modalWidth { width:90%; }
