@charset "utf-8";
/*==================================================
 Global CSS Reset
 ==================================================*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
ol, ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}
a,a:hover, a:focus {
    text-decoration: none;
}
em {
    font-style: italic;
}
strong {
    font-weight: bold;
}
figure{margin:0; padding:0}

/*===========Main CSS=================*/
*:focus{outline:0}
body{font-family: 'Roboto Slab', serif; transition: all 0.4s ease-in-out }
header{background: #ececec; padding: 10px 0; border-bottom: 1px solid #e5e5e5;}
header a{display: inline-block}
header .logo-head{text-transform: uppercase; color: #e78671; font-size: 26px; font-weight: 700; display: block}
header span{color: #878787; font-size: 16px;}
header span span{text-transform: uppercase; font-size: 18px; color: #1e4e9d}
.breadcrumb{background-color: transparent; padding-left: 0; margin-bottom: 0; margin-top: 10px;}
.breadcrumb a, .breadcrumb a:hover{color: #777;}
.mainContainer{padding-top: 10px; padding-bottom: 30px}
.date-range{overflow: hidden; margin-bottom: 30px;font-size: 18px; }
.date-range label, .date-range span{display: inline-block; vertical-align: middle; margin-left: 10px;}
.date-range span{font-size: 14px;}
.date-range input{width: 120px; padding: 4px; font-size: 14px; border: 1px solid #ccc; margin: 0 8px;}
.pink{background: #c4779c !important}
.yellow{background: #f3ca60 !important}
.blue{background: #72beb9 !important}
.green{background: #a8cd79 !important}
.mainContainer .box{height: 100px; margin-bottom: 25px; padding: 15px; color: #fff; line-height: 1.2}
.mainContainer .box label{font-size: 16px; font-weight: 300; margin-bottom: 15px; display: block;}
.mainContainer .box span{font-size: 30px; font-weight: 300; position: absolute; right: 30px; bottom: 40px;}
.mainContainer h2{font-size: 24px; font-weight: 300; margin: 0 0 30px;}
.mainContainer h2 span{color: #204f9d}
table{background: #f8f8f8;}
table th{border-bottom-width: 1px !important; color: #e6883b; font-size: 16px; font-weight: 400}
table th, table td{padding: 15px 10px !important;}
table td{font-size: 16px; color: #4c4c4c}
.w330{width: 330px !important}
.w190{width: 190px !important}
.table-container{padding: 0 15px; margin-bottom: 35px;}
.bdr-btm{border-bottom: 1px solid #dedede; padding-bottom: 15px;}
footer{border-top: 1px solid #e5e5e5;padding: 15px 0 25px 0}
footer p{color: #959595; font-size: 12px; text-align: center}
.social-media ul{padding: 5px;}
.social-media .box{border: 1px solid #e5e5e5; color: #4c4c4c;}
.social-media p{color: #2a58a2; font-size: 16px;}

.hamburger{float: left; cursor: pointer}
.hamburger-box{height: 32px; width: 32px; border: 2px solid #e6883b; border-radius: 50%; padding: 8px 7px;}
.hamburger-inner{height: 2px; width: 14px; background: #e6883b; display: block !important; margin-bottom: 3px; margin-left: 0 !important;}

.sentiments-main .hamburger-box{border-color: #0099d4}
.sentiments-main .hamburger-inner, .sentiments-main .search-form button{background: #0099d4}
.sentiments-main .logo-head, .sentiments-main table th{color: #0099d4}

.keyword-main .hamburger-box{border-color: #65d09b}
.keyword-main .hamburger-inner, .keyword-main .search-form button{background: #65d09b}
.keyword-main .logo-head, .keyword-main table th{color: #65d09b}

.revenue-main .hamburger-box{border-color: #e78ba4}
.revenue-main .hamburger-inner, .revenue-main .search-form button{background: #e78ba4}
.revenue-main .logo-head, .revenue-main table th{color: #e78ba4}

.revenue-main .box, .social-main .box, .traffic-main .box{border: 1px solid #e0e0e0; display: table; width: 100%}
.revenue-main .box p, .revenue-main .box figure, .traffic-main .box p, .traffic-main .box figure{display: table-cell; vertical-align: middle}
.revenue-main .box label, .revenue-main .box span,.traffic-main .box label, .traffic-main .box span{color: #1e4e9d; font-weight: 500; text-align: right}
.revenue-main .box span, .traffic-main .box span{font-weight: 300}
.revenue-main .box label, .traffic-main .box label{margin-bottom: 0}
.revenue-main .box span, .traffic-main .box span{position: inherit !important}
.revenue-main .breadcrumb li.active{color: #e78ba4}
.brand-performance{margin-bottom: 30px;}
.brand-performance label, .brand-performance span{display: inline-block; vertical-align: middle}
.brand-performance label{font-size: 16px; color: #757575; font-weight: 500; margin-right: 15px;}
.brand-performance span{max-width: 295px; width: 100%}

#tabs > ul{background: #bcbcbc; overflow: hidden; margin-bottom: 10px;}
#tabs > ul li {float: left; transition: all .4s ease-in-out}
#tabs > ul li a{display: inline-block; padding: 0 50px; height: 54px; line-height: 50px; color: #fff; font-size: 20px;position: relative; border-radius: 0; border: 0}
#tabs > ul li a:hover, .ui-state-active a{background: #f58428; position: relative; border: 0;}
#tabs > ul li a:hover:after, .ui-state-active a:after{content:''; position: absolute; right: -35px; bottom: 0; width: 0;height: 53px;border-style: solid;border-width: 55px 0 0 35px; border-color: transparent transparent transparent #f58428;
}
.tabs-data{padding: 20px 15px; border: 1px solid #dfdfdf}
.tabs-data h2{color: #034ea3; font-size: 24px; text-align: center; font-weight: 500; margin-bottom: 50px;}
.tabs-data h2 span{position: relative;}
.tabs-data h2 span:after{position: absolute; content: ''; width: 120%; background: #034ea3; height: 2px; left: -8px; bottom: -5px;}
#tabs li a:focus{outline: 0}
.tabs-data h3{font-size: 20px;color: #3f3f3f; margin-bottom: 10px;}
.tabs-data h3 span{display: block; font-size: 12px;color: #747474; font-style: italic; margin: 10px 0}
.performance-category{overflow: hidden; margin-bottom: 30px;}
.performance-category li{width: calc(100% / 5 - 5px); float: left; height: 115px; margin-right: 6px; text-align: center; display: table; overflow: hidden}
.performance-category li:last-child{margin-right: 0}
.performance-category li a{display: table-cell; vertical-align: middle; font-size: 16px; color: #fff; transition: all 0.4s ease; position: relative;}
.performance-category li a img{transition: all 0.4s ease-in-out;}
.performance-category li a div{position: absolute; width: 100%; height: 100%; left: 0; bottom: -100%; font-size: 13px; font-weight: 400; padding: 15px 5px 10px ; transition: all 0.4s ease-in-out}
.performance-category li a:hover div{bottom: 0}
.performance-category li a div span{position: absolute; left: 50%; top: 50%; width: 100%; padding: 10px; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%);}
/*.performance-category li a:after{content:''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.1); opacity: 0; transition: all 0.4s ease-in-out; }
.performance-category li a:hover::after{opacity: 1}
*/
.traffic-opt li:first-child, .traffic-opt li:first-child div{background: #e78ba4;}
.traffic-opt li:nth-child(2), .traffic-opt li:nth-child(2) div{background: #fcaf43;}
.traffic-opt li:nth-child(3), .traffic-opt li:nth-child(3) div{background: #55c1b9;}
.traffic-opt li:nth-child(4), .traffic-opt li:nth-child(4) div{background: #9ed06d;}
.traffic-opt li:nth-child(5), .traffic-opt li:nth-child(5) div{background: #759cd2;}

.sentiment-monitor li:first-child, .sentiment-monitor li:first-child div{background: #65d09b;}
.sentiment-monitor li:nth-child(2), .sentiment-monitor li:nth-child(2) div{background: #ff8c85;}
.sentiment-monitor li:nth-child(3), .sentiment-monitor li:nth-child(3) div{background: #0099d4;}

.customer-intell li:first-child, .customer-intell li:first-child div{background: #bd71c9}
.customer-intell li:nth-child(2), .customer-intell li:nth-child(2) div{background: #4565a4}

.sma li:first-child, .sma li:first-child div{background: #ff8c85;}
.lead li:first-child, .lead li:first-child div{background: #eb9fe1;}

.sales li:first-child, .sales li:first-child div{background: #00b9c0;}
.sales li:nth-child(2), .sales li:nth-child(2) div{background: #a0a0f5;}

.brand-engagement li:first-child, .brand-engagement li:first-child div{background: #e16de4}

.user-exp li:first-child, .user-exp li:first-child div{background: #99c069}

.segamentation-ana li:first-child, .segamentation-ana li:first-child div{background: #d0bc00}

.nav-overlay{position: fixed; background: rgba(0,0,0,0.7); width: 100%; height: 100%; left: 0; top: 0; transform: scale(0); z-index: 12}
.nav-overlay.open{transform: scale(1);}
.navigation{position: fixed; left: 0; width: 535px; height: 100%; background: #e78ba4; z-index: 12; padding: 75px 0 30px; transition: all 0.4s ease-in-out; margin-left: -535px; overflow: auto}
.navigation::-webkit-scrollbar { 
    display: none; 
}

.navigation h3{color: #fff; font-size: 16px; font-weight: 700; position: relative; padding-bottom: 15px; padding-top: 30px; background: url(../images/nav-bdr.png) left bottom repeat-x;}
.nav-section > ul ul{margin-top: 15px; display: none}
.nav-section{padding: 0 50px;/*background: url(../images/nav-bdr.png) left bottom repeat-x;*/}
.nav-section > ul > li{background: url(../images/nav-bdr.png) left bottom repeat-x;}

.nav-section > ul > li{padding: 15px 0 15px 15px;}
.nav-section > ul ul li{padding: 15px 0}
.nav-section  li a{color: #fff; display: block; font-size: 16px;}
.caret-icon{background: url(../images/nav-caret.png); width: 14px; height: 9px; display: inline-block; float: right; margin-top: 5px;}
.navSlide {margin-left: 0}
.slideleft{margin-left: 535px; overflow-x: hidden}
.nav-close{position: absolute; right: 25px; top: 25px; color: #fff; font-size: 16px;}
.nav-close label, .nav-close span{display: inline-block; vertical-align: middle; font-weight: 500; color: #fff; margin-right: 5px; cursor: pointer}
.nav-close label:hover, .nav-close:hover{color: #fff;}
.revenue-main .navigation{background: #e78ba4;}
.sentiments-main .navigation{background: #0099d4;}
.keyword-main .navigation{background: #65d09b;}
.sentiments-main .navigation h3, /*.sentiments-main .nav-section,*/ .sentiments-main .nav-section > ul > li{background: url(../images/sentiment-bdr.png) left bottom repeat-x}
.sentiments-main .breadcrumb li.active{color: #0099d4}
.keyword-main .navigation h3, /*.keyword-main .nav-section,*/ .keyword-main .nav-section > ul > li{background: url(../images/keyword-nav-bdr.png) left bottom repeat-x}
.keyword-main .breadcrumb a, .keyword-main .breadcrumb a:hover{color: #777;}
.keyword-main .breadcrumb li.active{color: #65d09b}

.social-main .hamburger-box{border-color: #ff8c85}
.social-main .hamburger-inner, .social-main .search-form button{background: #ff8c85}
.social-main .logo-head, .social-main table th{color: #ff8c85}
.social-main .navigation{background: #ff8c85;}
.social-main .navigation h3, .social-main .nav-section > ul > li{background: url(../images/social-bdr.png) left bottom repeat-x}
.social-main .breadcrumb li.active{color: #ff8c85}

.social-main .box{padding: 15px 7px;}
.social-main .box li{display: inline-block; vertical-align: middle;margin-right: 8px; text-align: right}
.social-main .box li:last-child{margin-right: 0}
.social-main .box li label{font-size: 16px;color: #4c4c4c; display: block;margin-bottom: 0px; }
.social-main .box li span.count{color: #ff8c85; font-size: 30px;  position: inherit}


.facebook-main .hamburger-box{border-color: #4565a4}
.facebook-main .hamburger-inner, .facebook-main .search-form button{background: #4565a4}
.facebook-main .logo-head, .facebook-main table th{color: #4565a4}
.facebook-main .navigation{background: #4565a4;}
.facebook-main .navigation h3, .facebook-main .nav-section > ul > li{background: url(../images/fb-nav-bdr.png) left bottom repeat-x}
.facebook-main .breadcrumb li.active{color: #4565a4}

.traffic-main .hamburger-box{border-color: #55c1b9}
.traffic-main .hamburger-inner, .traffic-main .search-form button{background: #55c1b9}
.traffic-main .logo-head, .traffic-main table th{color: #55c1b9}
.traffic-main .navigation{background: #55c1b9;}
.traffic-main .navigation h3, .traffic-main .nav-section > ul > li{background: url(../images/traffic-bdr.png) left bottom repeat-x}
.traffic-main .breadcrumb li.active{color: #55c1b9}
.traffic-main .box span, .traffic-main .box label{color: #55c1b9}

.spend-main .hamburger-box{border-color: #fcaf43}
.spend-main .hamburger-inner, .spend-main .search-form button{background: #fcaf43}
.spend-main .logo-head, .spend-main table th{color: #fcaf43}
.spend-main .navigation{background: #fcaf43;}
.spend-main .navigation h3, .spend-main .nav-section > ul > li{background: url(../images/spend-bdr.png) left bottom repeat-x}
.spend-main .breadcrumb li.active{color: #fcaf43}
.spend-main .box span, .spend-main .box label, .spend-color{color: #fcaf43}


h3.social-head{color: #2a58a2; font-size: 16px; margin-bottom: 10px;}



/* Deepak Css Start -------------------------------*/


.select-style {
	padding: 0;
	margin: 0;
	overflow: hidden;
}

.select-style select {
	padding: 9px 30px 9px 8px;
	width:100%;
	color: #828282;
	font-family: 'Roboto Slab', serif; font-weight: normal;
	border: none;
	font-size: 16px; font-weight: 400;
	box-shadow: none;
	border: 1px solid #e0e0e0;
	background: #fff url("../images/dropdown-arrow.png") right 10px center no-repeat;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.select-style select::-ms-expand {
	display: none;
}

.select-style select:focus {
	outline: none;
}

.search-form h2{font-size: 16px; font-weight: 400; margin: 0 0 15px;color: #204f9d}
.search-form ul{margin-bottom: 30px;}
.search-form ul li{width: 100%; max-width: 323px; display: inline-block; margin-right: 15px; vertical-align: top; margin-bottom: 15px; font-size: 0px;}
.search-form ul li:last-child{width:auto; max-width:auto; margin-right: 0px; }
.search-form button{color: #fff; background: #1e4e9d; border: none; padding: 10px 15px;font-size: 16px;}
.graph-container{width: 100%; padding: 15px; border: 1px solid #d0d0d0;margin-bottom: 35px; position:relative}
.search-form label{font-size: 16px; font-weight: 400; margin: 0 0 15px;color: #204f9d;display: block;}
.search-form input{padding: 9px 30px 9px 8px; width:100%; color: #828282; font-family: 'Roboto Slab', serif; font-weight: normal; border: 1px solid #e0e0e0;font-size: 16px;}
.search-form .input-frm-btn{margin-top: 38px;}

.range-tabs{overflow: hidden; float: right; margin-bottom: 10px;}
.range-tabs li{float: left; margin-left: 10px; padding:2px 10px; border: 1px solid #d0d0d0; border-radius: 5px; font-size: 13px; color: #204f9d}
.range-tabs + .graph-container{clear: both;}

.table-container.tableScroll{padding:0}
.tableScroll{height:418px; border-top:1px solid #ddd;}
.tableScroll .table{margin-bottom:0} 
#loader {
    background: none repeat scroll 0 0 #ffffff;
    display: none;
    height: 100%;
    left: 0;
    opacity: 0.7;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1001;
}

#loader img {
    left: 50%;
    margin-left: -62px;
    margin-top: -64px;
    position: absolute;
    top: 50%;
}
.disable-event{pointer-events: none}
.select-style{overflow: inherit}
.brand-performance span{max-width: none; width: auto;}
table.dataTable{margin-top: -2px !important}
.dataTables_info{display: none !important}
.graph-loader{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(255,255,255,0.5);
    z-index: 99;
    text-align: center;	
	}
.graph-loader img{
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
	}
/* Deepak Css End -------------------------------*/
.traffic-main table.ui-datepicker-calendar th{color: #173885; padding: 10px 0 !important; font-weight: 500;font-family: 'Roboto Slab', serif;}
.traffic-main table.ui-datepicker-calendar td{font-family: 'Roboto Slab', serif;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{font-weight: 500;}

@media(max-width:1024px){
    .social-main .box li{margin-right: 6px;}
    .social-main .box li label{font-size: 12px;}
    .social-main .box li span.count{font-size: 20px;}
}
@media(max-width:767px){
table{background: none;}
table thead {border: none;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}
table tr {display: block;margin-bottom: 20px; background: #f8f8f8}
table td {border-bottom: 1px solid #ddd;display: block;text-align: right;overflow:hidden}
table td:before {content: attr(data-label);float: left;color:#333333 ;font-size:16px;}
table td:last-child {border-bottom: 0;}
.table-bordered{border: none;}
.performance-category li{width: 100%; margin-bottom: 4px;}
#tabs > ul li{float: none}
#tabs > ul li a{width: 100%}
.brand-performance label{margin-bottom: 5px;}
header{text-align: center}
header a.pull-left, header a.pull-right{float: none !important}
#tabs > ul li a{border-bottom: 1px solid #fff !important}
.date-range {font-size: 14px;}
.search-form .input-frm-btn {margin-top: 0px;}
header .logo-head {font-size: 20px;}
header span {font-size: 14px; display: block;}
header span span {font-size: 16px;}
.navigation{width: 100%;}
}