@charset "utf-8";
/* Table of Content
==================================================
	1.0 - Progress Bar
	2.0 - Default Colors
	3.0 - Responsive*/

	/*--------------------------------------------------------------
	1.0 - Progress Bar
	--------------------------------------------------------------*/
	.dt-sc-progress { margin:55px 0px 10px; clear:both; display:inline-block; width:100%; border-radius:3px; height:12px; padding:1px; border:1px solid; border-radius:20px; }
	.dt-sc-progress .dt-sc-bar { position:relative; }
	.dt-sc-bar-text { font-size:14px; font-weight:600; margin-bottom:5px; margin:-36px 0px 0px; }
	.dt-sc-progress .dt-sc-bar-text > span { float:right; display:inline-block; }
	
	@-webkit-keyframes progress-bar-stripes {
	  from {
		background-position: -20px 0;
	  }
	  to {
		background-position: 0 0;
	  }
	}
	@-moz-keyframes progress-bar-stripes {
	  from {
		background-position: -20px 0;
	  }
	  to {
		background-position: 0 0;
	  }
	}
	@-ms-keyframes progress-bar-stripes {
	  from {
		background-position: -20px 0;
	  }
	  to {
		background-position: 0 0;
	  }
	}
	@-o-keyframes progress-bar-stripes {
	  from {
		background-position: 0 0;
	  }
	  to {
		background-position: -20px 0;
	  }
	}
	@keyframes progress-bar-stripes {
	  from {
		background-position: -20px 0;
	  }
	  to {
		background-position: 0 0;
	  }
	}
	.dt-sc-progress .dt-sc-bar {
	  width: 0%;
	  height: 100%;
	  float: left;
	  background-repeat: repeat-x;
	  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
	  -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
	  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
	  -webkit-transition: width 0.6s ease;
	  -moz-transition: width 0.6s ease;
	  -o-transition: width 0.6s ease;
	  transition: width 0.6s ease;
	  border-radius:20px;
	}
	.dt-sc-progress .dt-sc-bar + .dt-sc-bar {
	  -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15);
	  -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15);
	  box-shadow: inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15);
	}
	.dt-sc-progress-striped .dt-sc-bar {
	  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
	  background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	  background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	  background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	  -webkit-background-size: 20px 20px;
	  -moz-background-size: 20px 20px;
	  -o-background-size: 20px 20px;
	  background-size: 20px 20px;
	}
	.dt-sc-progress.active .dt-sc-bar {
	  -webkit-animation: progress-bar-stripes 2s linear infinite;
	  -moz-animation: progress-bar-stripes 2s linear infinite;
	  -ms-animation: progress-bar-stripes 2s linear infinite;
	  -o-animation: progress-bar-stripes 2s linear infinite;
	  animation: progress-bar-stripes 2s linear infinite;
	}
	
	/* Progress Bar Type2 */
	.dt-sc-progress.type2 { height:26px; border:2px solid rgba(0, 0, 0, 0.05); border-radius:30px; padding:0px; } 
	.dt-sc-progress.type2 .dt-sc-bar-text > span { margin:14px 0px 0px; border:5px solid #ffffff; width:60px; height:60px; font-size:16px; line-height:60px; text-align:center; border-radius:50%; color:#ffffff; position:relative; right:-2px; }
	.dt-sc-progress.type2 .dt-sc-bar-text { text-transform:uppercase; font-weight:bold; }
	.dt-sc-progress.type2 .dt-sc-bar { box-shadow:none; }
	
	.dt-sc-progress.type2.blue .dt-sc-bar-text > span { background:#4b9dc7; }
	.dt-sc-progress.type2.orange .dt-sc-bar-text > span { background:#e49b5c; }
	.dt-sc-progress.type2.green .dt-sc-bar-text > span { background:#91b962; }
	.dt-sc-progress.type2.yellow .dt-sc-bar-text > span { background:#eecf6f; }
	
	/* Progress Bar New Type */
	.dt-sc-progress-wrapper { float:left; clear:both; width:100%; margin:15px 0px 0px; }
	.dt-sc-progress-wrapper .dt-sc-bar-title { float:left; width:27%; padding:0px 20px 0px 0px; font-size:14px; text-transform:uppercase; font-weight:bold; }
	.dt-sc-progress-wrapper .dt-sc-progress { float:left; width:73%;  background:rgba(0, 0, 0, 0.1); border:none; clear:none; height:7px; margin:10px 0px 0px; padding:0px; }
	.dt-sc-progress-wrapper .dt-sc-bar-text { margin-top:-25px; }
	.dt-sc-progress-wrapper .dt-sc-bar-text span { position:relative; }
	.dt-sc-progress-wrapper .dt-sc-bar-text span:before { content:""; position:absolute; left:-19px; top:7px; border-left:7px solid transparent; border-right:7px solid transparent; border-top:7px solid #000000; }
	
	
	
	/*--------------------------------------------------------------
	2.0 - Default Colors
	--------------------------------------------------------------*/
	.dt-sc-dark-bg .dt-sc-progress { background-color: #444444; }
	.dt-sc-progress { border-color:#000000; }
	
	.dt-sc-bar-text { color:#000000; }
	.dt-sc-dark-bg .dt-sc-bar-text { color:#ffffff; }
	
	
	
	/*--------------------------------------------------------------
	3.0 - Responsive
	--------------------------------------------------------------*/
	
	/* Note: Design for a width of 960px */	
    @media only screen and (min-width:992px) and (max-width:1199px) {
		
		.dt-sc-progress-wrapper .dt-sc-bar-title { font-size: 12px; }
	
	}
	
	
	/* Note: Design for a width of 768px */
    @media only screen and (min-width:768px) and (max-width:991px) {
	
		.dt-sc-progress-wrapper .dt-sc-bar-title { font-size: 11px; padding: 0 15px 0 0; width: 30%; }
		.dt-sc-progress-wrapper .dt-sc-progress { width: 70%; }	
	
	}
	
	/*----*****---- << Mobile (Landscape) >> ----*****----*/
    /* Note: Design for a width of 480px */
    @media only screen and (min-width: 480px) and (max-width: 767px) {
		
		.dt-sc-progress-wrapper .dt-sc-bar-title { font-size: 10px; padding: 0 10px 0 0; width: 32%; }
		.dt-sc-progress-wrapper .dt-sc-progress { width: 68%; }
	
	}
	
	/* Common Styles for the devices below 479px width */
    @media only screen and (max-width: 479px) {
		
		/** Progress Bars **/
		.dt-sc-bar-text { margin:-30px 0 0; }
		.dt-sc-progress .dt-sc-bar-text > span { margin: 10px 0 0; text-align: right; width: 100%; }
		.dt-sc-progress-wrapper .dt-sc-bar-text > span { margin: 0; width: auto; }
		
		.dt-sc-progress-wrapper .dt-sc-bar-title, .dt-sc-progress-wrapper .dt-sc-progress { width: 100%; }
		.dt-sc-progress-wrapper .dt-sc-bar-title { padding: 0 0 20px; }
	
	}
	
	
	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 319px) {						
		
		/** Progress Bars **/
		.dt-sc-bar-text { font-size: 10px; line-height: normal; position: relative; }
		.dt-sc-progress .dt-sc-bar-text > span { position: absolute; bottom: 0; right: 0; }
		.dt-sc-progress-wrapper .dt-sc-bar-title { font-size: 10px; }
		
	}