body{font-family: 'Roboto', sans-serif; background-color: #000000; background-image: url(../img/body_bg.jpg); background-repeat: no-repeat; background-size: 100%}

.body1{font-family: 'Roboto', sans-serif; background-color: #000000; background-image: url(../img/body_bg_1.jpg); background-repeat: no-repeat; background-size: 100%}
.body2{font-family: 'Roboto', sans-serif; background-color: #000000; background-image: url(../img/body_bg_2.jpg); background-repeat: no-repeat; background-size: 100%}

h1{font-size: 40px; font-weight: 600}
h2{font-size: 30px; font-weight: 600}
h3{font-size: 25px; font-weight: 600}
h4{font-size: 20px; font-weight: 600}
h5{font-size: 16px; font-weight: 600;}
p{font-size: 14px; font-weight:normal;}

.shadow1{-webkit-box-shadow: 0px 10px 10px -8px rgba(0, 0, 0, 0.2); box-shadow: 0px 10px 10px -8px rgba(0, 0, 0, 0.2);}
.shadow2{-webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1);}

.br-5{border-radius: 5px;}
.br-10{border-radius: 10px;}
.br-15{border-radius: 15px;}
.br-25{border-radius: 25px;}

.lightbluebg{background-color: #F0F6FE;}
.darkbluebg{background-color: #29166F;}
.bluebg{background-color: #16084A;}
.skybluebg{background-color: #59A9F4;}
.darkgraybg{background-color: #222222;}
.lightgraybg{background-color: #F4F4F4;}


.skybluecol{color: #59A9F4 !important}
.darkbluecol{color: #29166F !important}
.bluecol{color: #16084A !important}
.graycol{color: #999999 !important;}
/*.greencol{color: #7ece4c !important;}*/
/*.lightgreencol{color: #a9dd88 !important;}*/

.lbr{border-right: #575656 solid 1px;}

nav.navbar .form-inline button {font-size: 14px;}
nav.navbar .form-inline button .fa{background-color: #F0F6FE; color: #29166F; border-radius: 50%; width: 30px; height: 30px; line-height: 30px; margin-right: 10px; }
nav.navbar .form-inline button span{background-color: #F0F6FE; color: #29166F; border-radius: 50%; width: 35px; height: 35px; line-height: 30px; margin-right: 10px; display: block; float: left;}

#banner{margin-top: 80px; min-height: 415px;}
#banner_1{margin-top: 80px; min-height: 270px;}
#banner h1{font-size: 70px; font-weight: 900; text-shadow: #000 0px 0px 10px; color: #fff; margin-top: 20%;}
#banner_1 h1{font-size: 70px; font-weight: 900; text-shadow: #000 0px 0px 10px; color: #fff; margin-top: 8%;}

#banner .livebox, #banner_1 .livebox{ 
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f53231+0,c41d1c+100,c41d1c+100 */
background: #f53231; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #f53231 0%, #c41d1c 100%, #c41d1c 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  #f53231 0%,#c41d1c 100%,#c41d1c 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  #f53231 0%,#c41d1c 100%,#c41d1c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f53231', endColorstr='#c41d1c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

/* margin-top: 40%;*/
padding-top:10px;
}

#banner .livebox a, #banner_1 .livebox a{background-color: #29166F; padding: 5px 20px; border-radius: 4px; font-size: 12px;}
#banner .livebox p, #banner_1 .livebox p{font-size: 14px; border-bottom: #fff solid 1px; color: #fff !important; padding: 10px 0px; margin-bottom: 0px; }
#banner .livebox ul, #banner_1 .livebox ul{list-style: none; display: inline-block;  padding: 0px; margin: 10px 0px;}
#banner .livebox ul li, #banner_1 .livebox ul li{ float: left; display: block; width: 32%; margin-right: 1%; color: #fff; font-size: 14px;}
#banner .livebox ul li small, #banner_1 .livebox ul li small{font-size: 12px; display: inline-block;}
#banner .livebox ul li span, #banner_1 .livebox ul li span{background-color: #29166F; border: #fff solid 1px; border-radius: 50%; width: 30px; height: 30px; display: block; line-height: 30px; margin: auto;}



/*live box*/
/*Cube elements start*/
.section{ perspective: 800px; perspective-origin: 50% 100px; margin-top: 40px;}
.section1{ perspective: 800px; perspective-origin: 50% 100px; margin-top: 0px;}

.cube{ position: relative; width: 200px; transform-style: preserve-3d; padding-top: 30px; animation: cube-spin 30s infinite linear;}
.cube div.total{position: absolute; width: 100%; height: 189px; background: rgba(255,255,255,1); box-shadow: inset 0 0 30px rgba(125,125,125,0.8); text-align: center; color: rgba(0,0,0,0.5); font-family: sans-serif; text-transform: uppercase;}
.back { transform: translateZ(-100px) rotateY(180deg); }
.right { transform: rotateY(-270deg) translateX(100px); transform-origin: top right; }
.left {transform: rotateY(270deg) translateX(-100px); transform-origin: center left;}
.top { transform: rotateX(-90deg) translateY(-100px); transform-origin: top center;}
.bottom { transform: rotateX(90deg) translateY(100px); transform-origin: bottom center; }
.front { transform: translateZ(100px); }
@keyframes cube-spin{
0% {transform: rotateY(0);}
100% {transform: rotateY(360deg);}
}


.teamworkitem {position: relative}
.teamworkitem p {margin-bottom: 5px;}
.teamworkitem a{padding: 5px 15px; font-size: 14px; margin: 10px 0px 15px; display: inline-block;}


.challange{position: relative;}
.challange p{font-size: 12px; margin-bottom: 5px;}
.challange a{ background-color: #59A9F4; font-size: 12px; padding: 5px 10px; border-radius: 25px; text-transform: uppercase; color: #fff; margin-bottom: 10px; text-decoration: none;}

.overview h1 span a{ font-size: 20px; padding: 10px 15px;}
.overview h1 span a .fa{margin-right: 5px;}


.mychallenges{position: relative;}
.mychallenges ul{list-style: none; padding: 0px; margin: 0px 0px;}
.mychallenges ul li{ background-color: #F0F6FE; width: 90%; margin: auto; padding: 10px 20px;     border-radius: 10px; margin-bottom: 20px;}
.mychallenges ul li h3{ font-size: 20px; font-weight: 600;}
.mychallenges ul li a{ background-color: #59A9F4; font-size: 12px; padding: 5px 10px; border-radius: 25px; text-transform: uppercase; color: #fff; margin-bottom: 10px; text-decoration: none; float: right;}

.submenu{position: relative;}
.submenu .bg-white { border-radius: 50px}
.submenu a{color: #29166F; text-decoration: none;}
.submenu a:hover{color: #59A9F4; text-decoration: none;}


@media (min-width: 768px) {
  .multi-item-carousel .carousel-inner .carousel-item {
    margin-right: inherit;
  }
  .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item,
  .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item + .carousel-item {
    display: block;
  }
  .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
  .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
  .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
    -webkit-transition: none;
    transition: none;
  }
  .multi-item-carousel .carousel-inner .carousel-item.active + .carousel-item + .carousel-item + .carousel-item {
    position: absolute;
    top: 0;
    right: -33.33333333%;
    z-index: -1;
    display: block;
    visibility: visible;
  }
  .multi-item-carousel .carousel-inner .carousel-item-next,
  .multi-item-carousel .carousel-inner .carousel-item-prev {
    position: relative;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  .multi-item-carousel .carousel-inner .carousel-item-prev.carousel-item-right {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    visibility: visible;
  }
  .multi-item-carousel .active.carousel-item-left + .carousel-item-next.carousel-item-left,
  .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item,
  .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
  .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
    position: relative;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  .multi-item-carousel .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
  .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item,
  .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
  .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
    position: relative;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
    display: block;
    visibility: visible;
  }
}

bx--graph-header {
	font-weight: 300;
	font-size: 24px;
}

.overlay {
	fill: #3d70b2;
	opacity: .1;
	display: none;
	pointer-events: none;
}

.line {
	stroke-width: 2;
	stroke: #FF00FF;
	fill: none;
	pointer-events: none;
}

.axis path {
	stroke: #5A6872;
}

.tick line {
	stroke: #5A6872;
}

.tick text {
	fill: #5A6872;
}

.graph-container {
	position: relative;
}
.graph-container svg{ width: 100%}

.tooltip {
	font-weight: 700;
	padding-left: 1rem 2rem;
	background-color: #fff;
	position: absolute;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1); 
	border: 1px solid #DFE3E6;
	padding: .25rem .5rem;
	pointer-events: none;
	display: none;
	 
	&:after {
		content: '';
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		position: absolute;
		width: 0; 
		height: 0; 
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid #fff;
	}
}

.y path {
	display: none;
}

.label {
	font-size: 10px;
	font-weight: 700;
	fill: #5A6872;
	text-anchor: middle;
}
.carousel-control-next, .carousel-control-prev{color: #000 !important; font-size: 30px;}

.scrollbar{margin-left: 0px; float: left; height: 300px; width: 100%; overflow-y: scroll; margin-bottom: 25px;}
.scrollbar1{margin-left: 0px; float: left; height: 458px; width: 100%; overflow-y: scroll; margin-bottom: 25px;}
.force-overflow{min-height: 450px;}
/*.force-overflow1{min-height: 550px;}*/
/*#wrapper{text-align: center; width: 500px; margin: auto;}*/
#style-1::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(89,169,244,.9); border-radius: 10px; background-color: #59A9F4;}
#style-1::-webkit-scrollbar{ width: 12px; background-color: #F5F5F5; }
#style-1::-webkit-scrollbar-thumb{border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(89,169,244,.9); background-color: #16084A; }

/*Repor card*/
.fourboxtop{position: relative; margin-bottom: 15px;}
.fourboxtop .tittle{font-size: 13px; padding: 20px; color: #555;}
fourboxtop .icon {color: rgba(0, 0, 0, 0.15); font-size: 60px; position: absolute; bottom: 10px; width: 100%;}
.fourboxtop .icon i { color: #29166F !important; font-size: 60px; float: left; padding-left: 15px}
.fourboxtop .icon1 { color: rgba(0, 0, 0, 0.15); font-size: 60px; position: relative; bottom: 10px; width: 100%; display: inline-block; margin-top: 10px}
.fourboxtop .icon1 i { color: #444 !important; font-size: 30px; float: left; padding:0px 15px}
.fourboxtop .count {padding-top: 15px; font-weight: normal; font-size: 20px; /* margin-top: -4px; */ color: #555; font-weight: 700; text-align: right; padding-right: 15px}
.fourboxtop .count1 {padding-top: 5px; font-weight: normal; font-size: 16px; /* margin-top: -4px; */ color: #555; text-align: left; padding-right: 15px}

.vscta, congrets { position: relative; padding-top: 30px;}
.vscta a, .congrets a{padding:10px 20px; border-radius: 5px; font-size: 14px; text-transform: uppercase; font-weight: 500; text-decoration: none; background-color: #59A9F4; color: #fff}
.vscta a:hover, .congrets a:hover{background-color: #30424b; color: #fff;}


.graph-chart .head .information{border: #c4c4c4 solid 1px; padding:10px 20px; background-color: #f2f2f2; display: block; float: right; margin: 0px 10px 0 20px; text-align: center; border-bottom: #ffa200 solid 5px; border-radius: 0 0 5px 5px; color: #5a5a5a;}
.graph-chart .head .information p, .graph-chart .head .information h2{ color: #5a5a5a !important; }
.graph-chart { position: relative; color: #000}
.graph-chart .head{ position: relative;}
.graph-chart .head h2 {color: #000 !important}
.graph-chart .head h2 .fa{ font-size: 20px; border: #000 solid 1px; padding: 6px 12px; border-radius: 50%; font-weight: normal; margin-left: 20px;}


.analysistab{ position: relative;}
.analysistab .filter .fa{font-size: 16px; padding:9px 10px; background-color: #f7f7f7; border-radius: 50%;}
.analysistab span.marks{background-color: #d6f2ff; padding: 5px 30px; text-align: center; border-radius: 15px;}
.analysistab span.time{background-color: #e6e6e6; padding: 5px 30px; text-align: center; border-radius: 15px;}
.analysistab .date{color: #30424b; font-size: 14px;}
.analysistab .nav-tabs .nav-link {position: relative; top: 0px; left: 0px; background-color: #29166F; color: #fff; font-weight: 600; width: 20%; text-align: center; border: 0px; border-radius: 0px;}
/*.analysistab .nav-tabs .nav-link.active {position: relative; top: 0px; left: 0px; background-color: #eee; color: #a6a7a8; font-weight: 600; width: 20%; text-align: center; border: 0px; border-radius: 0px;}*/
.analysistab .nav-tabs .nav-link.active { color: #29166F !important; background-color: #fff}
.analysistab .nav-tabs .nav-link.active, .analysistab .nav-tabs.active > a:hover, .analysistab .nav-tabs > li.active > a:focus{ color: #29166F !important; background-color: #fff}
.analysistab .table tbody tr td, .analysistab .table tbody tr th{ padding: 12px; border-top: 0px solid #eee; border-bottom: 0px solid #eee;}

.analysistab .nav-tabs .nav-link.active:after { content: ''; position: absolute; left: 0; width: 20%; height: 0; border-bottom: 2px solid #2196F3; bottom: 0px; left: 40%;}


.analysistab table td a{color: #43a4d3; border: #43a4d3 solid 1px; border-radius: 5px; padding: 10px 25px; font-weight: 600; text-decoration: none;}
.analysistab .table tbody tr td, .analysistab .table tbody tr th{ padding-top: 20px; padding-bottom: 20px; font-size: 14px;}
.analysistab .table thead th {border-bottom: 1px solid #dee2e6;}


.container1 {/*width: 250px; margin: 20px; background: #fff;* /*  padding: 20px;*/ overflow: hidden; margin: auto; width:max-content;  /*  float: left;*/ }
.vertical .progress-bar {float: left; height: 255px; width: 40px; margin-right: 25px;}
.vertical .progress-track {position: relative; width: 40px; height: 100%; background: #ebebeb;}
.vertical .progress-fill {position: relative; background: #825; height: 50%; width: 40px; color: #fff; text-align: center; font-family: "Lato","Verdana",sans-serif; font-size: 12px; line-height: 20px; }
.rounded .progress-track, .rounded .progress-fill { box-shadow: inset 0 0 5px rgba(0,0,0,.2); border-radius: 3px; }
.paichart{min-height: 395px;}

.svg-item {width: 80px; font-size: 16px; margin: auto;}
.donut-ring {stroke: #EBEBEB; }
.donut-segment {animation: donut-chart-fill 1s reverse ease-in; transform-origin: center; stroke: #FF6200; }
.donut-text {font-family: Arial, Helvetica, sans-serif; fill: #FF6200; }
.donut-label {font-size: 0.28em; font-weight: 700; line-height: 1; fill: #000; transform: translateY(0.25em); }
.donut-percent {font-size: 0.5em; fill: #FF6200; line-height: 1; transform: translateY(0.5em); }