/*COLORS*/
/*
@green-primary:
@green-shadow: #33cc66;	
	
*/

.error {
    text-align: center; font-size:18px; color:#fff; background-color: #EE5757;
}
.success {
    text-align: center; font-size:18px; color:#fff; background-color: #5bb75b;
}
/* Style Fixed Payment Form */
 #paymentform_fixed {
    width:30%;
    position: relative;
    z-index:2;
    background-color:#EEE;
    text-align: center;
    border:1px solid #CCC;
    border-radius:5px;
    padding-bottom:5%;
    margin-left:35%;
    margin-right:35%;
    
     
 }
 #paymentform_fixed .block{
     width:100%;
   
 }
 #paymentform_fixed .boxinput{
     width:80%;
     margin:0 10% 0 10%;
     display:inline-block !important;
     margin:0 1% 0 0;
     padding: 0 0 0 2%;
     color:#333;
    
 }
 #paymentright{
    float:right;
    width:30%;
    position:absolute;
    top:0;
    right:0;
    
 }
 
 .button2 {
     margin:15px 0px 15px 0px;
	color:#fff;
	display:inline-block;
	border:solid;
	border-color:#33cc66;
        /*border-color:#97d1a3;*/
	border-radius: 10px;
	background-color:#33cc66;
	background-repeat:no-repeat;
	min-width:25%;
        height:45px;
        font-size:16px; 
	font-weight:800;
	text-align:center;
	vertical-align: middle;
        text-transform:uppercase;
 }
 .button2:hover {
	color:#33cc66;
	background-color:#fff;
	
}
 
 /* End style Fixed payment Form */

/* Header Style */

header {
	background: #33cc66;
	width: 100%;
	height: 58px;
	position: relative;
	top: 0;
	left: 0;
	border-bottom: 4px solid #27ae60;
	z-index: 100;
        text-align: center;
}
/*Fix for blog layout*/
.entry-header {
    height:auto;
    position:relative;
    text-align:center;
}
/*End fix for blog*/
.logo-header{
	margin-left: 20px;
	height: 62px;
	width: 130px;
	float: left;
}

/* Navigation */
.navbar {
    margin-bottom:0;
    min-height:60px;
    border:0;
    border-radius:0;
    border-bottom:2px solid #339966;
}

.navbar-nav>li{
    height:60px;
    
}
.navbar-nav>li:hover, .navbar-nav>li:active{
    background-color:#339966;
}
.navbar-default .navbar-nav>li>a {
    color:#fff;
    padding-top:20px;
    padding-bottom:20px;
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:active, .navbar-default .navbar-nav>li>a:focus {
    color:#fff;
}
.navbar-default{
    background-image:none;
    background-color: #33CC66;
}
.navbar-blue{
    background-image:none;
    background-color: #fff;
    margin-bottom:0;
    height:40px;
    border:0;
    border-radius:0;
    border-bottom:2px solid #1976d2;
}
.navbar-default .navbar-toggle {
    border-color: #FFF;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #FFF;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #FFF;
}
.navbar-brand{
    padding:0;
}
.dropdown-menu{
/*    background-color:#33cc66;
    color:#fff;*/
    padding:5px;
    
}
.dropdown-menu li > a{
    /*color:#fff;*/
    
}
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a{
    background-image:none;
    background-color:#339966;
    color:#fff;
}

.dropdown-menu.color-black{
    color:#333;
}

@media only screen and (max-width:767px){
    .navbar-nav .open .dropdown-menu {
        position:absolute;
        background-color:#ccc;
        width:100%;
}
}
/*Nav & header styling for business & customer portals*/
#menu-icon {
	display: hidden;
	width: 40px;
	height: 40px;
	background: #F5F7FA;
	border-radius: 4px;
}
.nav-header{
	padding-left: 0px;
}

.nav-header a{
	color: #fff;	
}

.nav-header ul {
	list-style: none;
}

.nav-header li {
	display: inline-block;
	float: left;
	padding: 10px;
	padding-left: 12.5px;
	padding-right: 12.5px;
}
.nav-header li:hover {
	background: #27ae60;
	border-radius: 3px;
}

.nav-header a{
	text-decoration: none;
}
.nav-justified {
    margin-left:15px;
    margin-right:15px;
}

@media only screen and (max-width:640px) {
    header {
            position: absolute;
    }

    #menu-icon{
            display:inline-block;
    }
  
}

h1 {
    /*color:#33CC66;*/
    text-align:center;
}

h4 {
    text-align:center;
}

.text-green{
    color:#33CC66;
}

.text-error{
    color:#a94442;
}

.checkText {
    line-height:50px;
}
	
/*	nav ul, nav:active ul { 
		display: none;
		position: absolute;
		//padding: 20px;
		background: #33cc66;
		//border: 3px 3px 3px 0px #27ae60;
		right: 20px;
		top: 70px;
		width: 40%;//50%;
		border-radius: 3px;
		box-shadow: 3px 3px 0px #27ae60
	}

	nav li {
		//text-align: center;
		width: 100%;
		padding: 0;
		margin: 0;
		
	}

	nav:hover ul {
		display: block;


}


 /*Toggle Styles - END Nav and header for business & customer portals*/ 

#wrapper {
    background: #33cc66;
    position:relative;
    width: 100%;
    /*height: 100%;*/
    /*margin-top: 58px;//76px;*/
    /*padding-left: 250px;*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    min-height: 100vh;

    display: table;
}

#sidebar-wrapper {
    /*width: 0;*/
    padding: 0;
    height: 100%;
    padding-bottom: 20px;
    overflow: hidden;
    background: #33cc66;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -moz-box-shadow:    3px 0px 1px #ccc;
    -webkit-box-shadow: 3px 0px 1px #ccc;
    box-shadow:         3px 0px 1px #ccc;
    /*z-index:100;*/
}

#wrapper.toggled #sidebar-wrapper {
    z-index:3;
    display: table-cell;
}

#wrapper > .same-height-panel {
    float: none;
    display: table-cell;
    vertical-align: top;
}

/* Menu Icon Dash */
.menu-icon-dashboard{
	z-index: 1;
	height: 40px;
	width: 60px;
	background: #27ae60;
	position: absolute;
	display: block;
	box-shadow: 0px 3px #1E824C;
        color:#fff;
        font-size:20px;
        padding:10px 20px;
	border-bottom-right-radius: 3px;
	opacity: 0.9;
}

#page-content-wrapper {
    width: 100%;
    padding: 15px;
}


/* Sidebar Styles */

.sidebar-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sidebar-nav .lang-buttons-span {
    margin-right: 5px;
    background-color:transparent;
    text-align: center;
    font-size: 14px
}
.sidebar-nav .lang-buttons-span a {
    padding-left: 5px!important;
    display:inline;
    font-size: 18px;
}
.sidebar-nav .lang-buttons {
    color:white    
}
.sidebar-nav .lang-buttons .active {
    color:#FF4081    
}

.sidebar-nav .dashboard-wrapper {
    margin-top: 20px;
    margin-bottom: 20px;
}

.sidebar-nav li .disabled-functionality {
    margin: 10px 0px;
    text-indent: 0px;
    padding-left: 20px;
    line-height: 100%;
    color: #fff;
    font-weight: normal;
}

    .sidebar-nav li .disabled-functionality a {
        display: inline;
        padding-left: 0px;
    }

.thum-profile{
	height: 200px;
	background: #27ae60;
	display: flex;
	
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	
	justify-content:center;
	-webkit-justify-content:center;
	-moz-justify-content:center;
	
	align-items: center;
	-webkit-align-items: center;
	-moz-align-items: center;
}

.thum-profile img{
	width: 180px;
	height: 180px;
	display: block;
	box-shadow: 0px 3px #1E824C;
	-webkit-box-shadow: 0px 3px #1E824C;
	-moz-box-shadow: 0px 3px #1E824C;
}

.thum-profile h4{
	text-align: center;
	-webkit-text-align: center;
	-moz-text-align: center;
	background: #fff;	
}

.sidebar-nav li {
    line-height: 20px;
    margin: 10px 0px;
}

.sidebar-nav.dashboard li {
    padding-left: 10px;
}

.account-status{
	margin-top: 10px;
	margin-bottom: 8px;

}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #fff;
    position: relative;
    padding-left: 20px;
}

.sidebar-nav.dashboard li a {
    padding-left: 45px;
}

.sidebar-nav li .thum-profile a {
    padding-left: 0px;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-darker {
    background: #27ae60;
    box-shadow: 0px 3px #26A65B;
}

.sidebar-nav > .sidebar-brand {
	margin-left: 0px;
    padding-left: 20px;
	color: #fff;
	font-weight: bold;
    height: 40px;
    font-size: 18px;
    line-height: 45px;
}

.sidebar-nav.dashboard > .sidebar-brand {
    padding-left: 20px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}

.sidebar-nav li a .sprite {
    display: block;
    position: absolute;
    left: 8px;
    top: 0px;

    width: 20px;
    height: 20px;

    background-image: url('../img/business_portal_menu_icons.png');
    background-repeat: no-repeat;
}

.sidebar-nav li .sidebar-darker.lang-buttons {
    color: red;
}

.sidebar-nav li a .sprite.dashboard {
    background-position: -4px -5px;
}

.sidebar-nav li a .sprite.loyalty-analytics {
    background-position: -4px -30px;
}

.sidebar-nav li a .sprite.upfront {
    background-position: -4px -50px;
}

.sidebar-nav li a .sprite.giftcards {
    background-position: -4px -72px;
}

.sidebar-nav li a .sprite.transaction-history {
    background-position: -4px -97px;
}

.sidebar-nav li a .sprite.clover {
    background-position: -4px -120px;
}

.sidebar-nav li a .sprite.customers {
    background-position: -27px -4px;
}

.sidebar-nav li a .sprite.tiers {
    background-position: -27px -28px;
}

.sidebar-nav li a .sprite.ordering-history {
    background-position: -4px -97px;
}

.sidebar-nav li a .sprite.details {
    background-position: -27px -50px;
}

.sidebar-nav li a .sprite.business-loyalty {
    background-position: -26px -70px;
    height: 25px;
}

.sidebar-nav li a .sprite.reports {
    background-position: -27px -97px;
}

.sidebar-nav li a .sprite.settings {
    background-position: -27px -120px;
}

@media(min-width:768px) {
    .logo-header{
        margin-left: 65px;
    }
	
    .menu-icon-dashboard{
        display: none;
        position: absolute;
    }

    #wrapper.toggled #sidebar-wrapper {
        display: none;
    }

    #page-content-wrapper {
	    position: absolute;
        padding: 20px;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }
}

.right-container{
    min-height: 100vh;
    padding: 20px;
    margin: 0;	
    background: #eee;
}

.grey-container{
	padding: 20px;
	background-color: #ECF0F1;
}
.texture-background{
    background-color: #1976d2;
/*    background-size: 100px 100px;
    background-repeat: repeat;*/
}
/*Dashboard Infomation (Header)*/
.dashboard-information{
    display: inline-block;
    text-align: center;
    width: 100%;
}

.dashboard-information p {
    margin-bottom: 0px;
}

.dashboard-information .panel-right {
    padding-top: 10px;
}

.dashboard-information .btn-group>.btn {
    padding: 8px 8px;
}

.dashboard-information .btn-group>.btn.dropdown-label {
    line-height: 22px;
}

.panel{
    border:none;
    margin-bottom:20px;
}

.panel-heading.analytics .time-selector {
    padding-top: 7px;
    padding-bottom: 7px;
}

.panel-heading.turquoise .btn-link:focus, 
.panel-heading.turquoise .btn-link:hover {
    background: #fff;
}

.panel-heading > h3 {
    margin: 0;
}

.loyalty-analytics-page .panel-heading > h3 {
    margin: 10px 0px;
}

.panel-left{
  line-height: 120px;
  min-height:120px;
  -webkit-border-radius: 4px 0px 0px 4px;
  border-radius: 4px 0px 0px 4px;
  text-align: center;
  font-size: 30px;
  color: #fff;
}
.panel-right{
  -webkit-border-radius: 0px 4px 4px 0px;
  border-radius: 0px 4px 4px 0px;
  text-align: center;
  background:#fff;
  min-height:120px;
}

.fixed-height-employees{
    height:310px;
    overflow-y: scroll;
}

.fixed-height-branches{
    height:500px;
    overflow-y: scroll;
}

.opening_hours_module .dayname {
    min-width: 105px;
    text-align: right;
}

.time-selector{
    cursor: pointer;
}

 .hid{
        display: none;
}
.clickable{
    cursor: pointer;
}
.clickable:hover {
    background-color: rgba(0,0,0,0.3);
}
.white-link{
    color: #FFFFFF;
}
.white-link:hover{
    color: #FFFFFF;
}
.time-selector{
    outline: none;
    border: none;
}
.drp-dwn{
    border: none;
}

.selected {
    text-decoration: underline;
    font-weight:bold;
}
.white {
  background: #fff;
  color:#333;
  
}
.red {
  background: #ff6c60;
  color:#fff;
}
.red-icon {
  color:#ff6c60;
}
.turquoise {
  background: #6ccac9;
  color:#fff;
}
.skyblue {
  background: #41cac0;
  color:#fff;
}
.lime {
  background: #a9d96c;
  color:#fff;
}
.yellow {
  background: rgba(248,211,71,1);
  color:#fff;
}
.transparent {
  background: none;
  border:none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.popover-wide {
    width: 400px;
}
/*.panel-head {
  background: #ff6c60;
  -webkit-border-radius: 4px 4px 0px 0px;
  border-radius: 4px 4px 0px 0px;
  color: #fff;
  line-height: 50px;
}*/

.item{
	color: #F6F6F6;
	flex-grow: 1;
	webkit-flex-grow: 1;
	/*padding: 12px;*
	flex-grow: 1;
	webkit-flex-grow: 1;
	padding: 2mm;
    margin: 10px 10px;
    flex: 0 1 20%;*/
}

#showModal{
	cursor: pointer;	
}

.dashboard-information h2{
/*	margin-top: 15px;
	color: white;
	font-size: 400%;
	font-family: 'Open Sans',"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;*/
	
}

.dashboard-information h4{
/*	padding: 0;
	//margin: 30px;
	margin-top: -5px;
	font-size: 100%;
	font-family: 'Open Sans',"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;*/
}

.dashboard-information span{
	/*font-size: 50%;*/
}
/*
.val-average-visit{
	display: flex;
	flex-wrap: wrap;
	
}*/
/* #/Dashboard Infomation (Header) */

/*Containers Holders*/
/*#canvas-holder{*/
.holder-1{
	display: block;
/*        width:100%;*/
	margin-bottom: 20px;
	padding: 20px;
	border-radius: 2px;
        border-left: #DADFE1 1px solid;
        border-right: #DADFE1 1px solid;
	background: #fff;
	-moz-box-shadow:    0px 3px #ccc;
	-webkit-box-shadow: 0px 3px #ccc;
	box-shadow:         0px 3px #ccc;
        /*position:relative;*/
}

#title-container{
	margin-left: 20px;
        margin-top:0;
	padding-top: 20px;
}

/* Chart Container */
.view-container{
    background: #ECF0F1;
    display: flex;
    flex-direction: row;
    webkit-flex-direction: row;
    flex-wrap: wrap;
    webkit-flex-wrap: wrap;
    justify-content: space-around;
    webkit-justify-content: space-around;
    /*padding:20px;*/
    
}

#canvas-holder{/*#canvas-holder{*/
	display: block;
	margin: 20px;
	padding: 20px 50px 30px 50px;
	border-radius: 2px;
	background: #fff;
	-moz-box-shadow:    0px 3px #ccc;
	-webkit-box-shadow: 0px 3px #ccc;
	box-shadow:         0px 3px #ccc;
}

#canvas-holder-hidden{
	display: none;
}

/*Labels*/
h2[id^=plot-name]{
	color: #61BD6D;
	font-size: 200%;
	font-family: 'Open Sans',"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

#plot-name span{
	color: #6C7A89;
}

/*Testing*/
#square-data-colour1{
	width: 20px;
	height: 20px;
	margin-right: 25px;
	background: rgba(220,220,220,0.9);
	display: inline-block;
}
#square-data-colour3{
	width: 20px;
	height: 20px;
	margin-right: 25px;
	background: rgba(151,187,205,0.9);
	display: inline-block;
}
#square-data-colour2{
	width: 20px;
	height: 20px;
	margin-right: 25px;
	background: rgba(247,70,74,0.9);
	display: inline-block;
}
#square-data-colour4{
	width: 20px;
	height: 20px;
	margin-right: 25px;
	background: rgba(77,83,96,0.9);
	display: inline-block;
}

h2#plot-label{
	padding: 15px;
	color: #6C7A89;
	font-size: 150%;
	font-family: 'Open Sans',"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	text-shadow: 0.5px 0.5px #fff;
}

#plot-label{ /*Button Total*/
	background: #ECF0F1;
	border-radius: 3px;
}
#plot-label:hover{
	background: #DADFE1;
	border-radius: 3px;
}
/* #/Chart Container */
#wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        /* Negative indent footer by it's height */
        margin: 0 auto -150px;
      }
/* Set the fixed height of the footer here */
#push, #footer {
  height: 60px;
 
}
#footer {
  background-color: #fff;
   
}

.container-footer{
	margin-top: auto;	
	padding-top: 10px;
	padding-bottom: 10px;
	/*margin-left: 20px;*/
	/*margin-right: 20px;*/
        border-top:1px solid #ccc;
}

.green{
    background-color:#33cc66;
    color:#fff; 
}
.green-icon {
    color:#33cc66; 
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
	#footer {
          /*margin-left: -20px;*/
	  /*padding-left: 20px;*/
	  /*padding-right: 20px;*/
	}
}

/*Social*/
#social{
	display: inline-block;
}

#social a{
	
}

/*Columns*/
/*.row{
	margin: 0;
}*/

/*MAP CANVAS*/
#mapCanvas { 
    height: 500px; 
    border-width:0;
    border-radius:5px;
    margin: 2% 2% 0px 0px;
}
 
 /*Payment && Switch*/
 
 /*style payment form*/
 #paymentform {
     width:300px;
     left: 50%;
    margin-left: -150px;
    position: fixed;
    top: 20%;
    z-index:2;
    display: none;
     box-shadow:#000 5px 5px 2px; 
     -webkit-box-shadow:#000 0px 5px 30px;  
     -moz-box-shadow:#ccc 1px 1px 5px; 
     background-color:#EEE;
     text-align: center;
     border:1px solid #000;
     border-radius:5px;
     
 }
 #paymentform .block{
     width:100%;
   
 }
 
 /*Style Box input and text input areas */
 .textarea{
        width:360px;
        height:215px;
        overflow:hidden !important; 
        vertical-align:middle; 
        padding:0px 30px 0px 10px; 
        /*background:url(../../images/layout/textbox_user_left.png) no-repeat 0px 0px transparent;*/
        background-color: #fff;
        border:solid;
        border-color: #ccc;
        border-radius: 5px;
        border-width:1px;
        box-shadow:#ccc 0px 1px 1px; 
       
}

.textarea input{
    height:30px; 
    outline:none;
    width:90%;
    overflow:hidden !important; 
    vertical-align:middle; 
    line-height:35px; 
    font-size:16px; 
    padding:2px 25px 0px 0px; 
    border:0px 0px 0px 0px !important; 
    margin:0px 0px 0px 0px !important; 
    /*background:url(../../images/layout/textbox_right.png) no-repeat 100% 0px transparent;*/ 
    position:absolute; 
    color:#000;
    font-weight: 600;
    
}

.textarea1{
        width:90%;
        height:220px;
        overflow:hidden !important; 
        vertical-align:middle; 
        padding:0px 30px 0px 10px; 
        /*background:url(../../images/layout/textbox_user_left.png) no-repeat 0px 0px transparent;*/
        background-color: #fff;
        border:solid;
        border-color: #ccc;
        border-radius: 5px;
        border-width:1px;
        box-shadow:#ccc 0px 1px 1px; 
       
}


.overlimit{
   color: red;         
}​


.textarea1 input{
    height:30px; 
    outline:none;
    width:90%;
    overflow:hidden !important; 
    vertical-align:middle; 
    line-height:35px; 
    font-size:16px; 
    padding:2px 25px 0px 0px; 
    border:0px 0px 0px 0px !important; 
    margin:0px 0px 0px 0px !important; 
    /*background:url(../../images/layout/textbox_right.png) no-repeat 100% 0px transparent;*/ 
    position:absolute; 
    color:#000;
    font-weight: 600;
    
}


.boxinput{
    display:block !important; 
    width:87%;
    height:35px;
    overflow:hidden !important; 
    vertical-align:middle; 
    padding:0px 0px 0px 10px; 
    margin:10px 0px 10px 0px;
    /*background:url(../../images/layout/textbox_user_left.png) no-repeat 0px 0px transparent;*/
    background-color: #fff;
    border:solid;
    border-color: #ccc;
    border-radius: 5px;
    border-width:1px;
    
} 

.boxinput input{
    height:30px; 
    outline:none;
    width:90%;
    overflow:hidden !important; 
    vertical-align:middle; 
    line-height:35px; 
    font-size:16px; 
    padding:2px 8% 0px 0px; 
    margin:0px 0px 0px 0px;
    border:0px !important; 
    /*padding:0px 0px 0px 0px !important;*/ 
    /*background:url(../../images/layout/textbox_right.png) no-repeat 100% 0px transparent;*/ 
    position:relative; 
    color:#000;
    font-weight: 600;
    
}

.boxinput input.calendar_picker{padding-right:35px; background:url(../../images/layout/textbox_right_calendar.png) no-repeat 100% 0px transparent; position:absolute;}


.boxinput:hover{
/*  height:33px;
    background-position:0px -35px;*/
    border-color:#33cc66;
    
}

.textarea:hover{
    height:213px;
    background-position:0px -35px;
    border:2px solid #33cc66;
    box-shadow:none;
}

.textarea:hover input{
    background-position:100% -35px; 
    outline:none;
    margin:1px 0px 1px 0px;
    }

.textarea1:hover{
    height:217px;
    background-position:0px -35px;
    border:2px solid #33cc66;
    box-shadow:none;
}

.boxinput:hover input{
    background-position:100% -35px; 
    outline:none;
    /*margin:1px 0px 1px 0px;*/
    }
.boxinput img{
    border:0px; 
    margin:0px;
    padding:0px; 
    vertical-align:middle;
}

 .styled-select {
   color:#999;
   overflow:hidden !important; 
   margin:0px 1% 1% 0px;
   padding:0px 0px 0px 10px;
   vertical-align:middle; 
   float:left;
   background:url(../../images/layout/select_arrow.png) no-repeat 100% 50% transparent;
   background-color: rgba(255,255,255,1);
   font-size: 16px;
   font-size: 16px;
   border:solid;
   border-color: #ccc;
   border-radius: 5px;
   border-width:1px;
      font-size: 16px;
   
   }
   .styled-select:hover{
    border:1px solid #33cc66;
    border-radius:5px;
     
    
   }
   
   .styled-select select{
    background-color: rgba(0,0,0,0);
    -webkit-appearance: none;
    height:35px; 
    outline:none;
    width:100%;
    overflow:hidden !important; 
    vertical-align:middle; 
    font-size:16px; 
    background-color: rgba(0,0,0,0);
    border:none;
    color:#333;
    font-size: 16px;
    font-weight: 600;
}

input.radio-image[type="radio"]{
    display:none;
}
input.radio-image[type="radio"] + label {
    text-align:center;
}
    
input.radio-image[type="radio"] + label span {
    display:block;
    width:60px;
    height:60px;
    border: 2px solid #999;
    border-radius:2px;
    background-color:#CCC;
    color:#fff;
    font-size:25px;
    padding-right:5px;
    line-height:60px;
    cursor:pointer;
}
input.radio-image[type="radio"]:checked + label span {
    background-color:#33CC66;
    border: 2px solid #33CC66;
    border-radius:2px
}

.custom-radio input[type="radio"] {
    display:none;
}
.custom-radio label{
    background-color:#FFF;
    border:1px solid #BFBFBF;
    text-shadow: 1px -1px #FFFFF0;
}
.custom-radio input[type="radio"]:checked + label {
    background-color:#5EE48B;
    color: #FFF;
    border:1px solid #5EE48B;
    text-shadow: none;
    
}


/* Custom range slider */
input[type=range] {
  -webkit-appearance: none;
  margin: 18px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
/*  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;*/
  background-color: #61BD6D;
}
input[type=range]::-webkit-slider-thumb {
  /*box-shadow: 1px 1px 1px #CCC, 0px 0px 1px #0d0d0d;*/
  border: 1px solid #666;
  height: 40px;
  width: 40px;
  border-radius: 40px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -15px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  /*background: #367ebd;*/
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #61BD6D;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #666;
  height: 20px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #61BD6D;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
/*  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;*/
}
input[type=range]::-ms-fill-upper {
  background: #61BD6D;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
/*  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;*/
}
input[type=range]::-ms-thumb {
/*  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;*/
  border: 1px solid #666;
  height: 20px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #61BD6D;
}
input[type=range]:focus::-ms-fill-upper {
  background: #61BD6D;
}
output {
    font-size:3em;
}
/*end custom range slider */
 /* End style of inputs*/
 
 #paymentform .boxinput{
     width:80%;
     margin:0 10% 0 10%;
     display:inline-block !important;
     margin:0 1% 0 0;
     padding: 0 0 0 2%;
     color:#333;
     
     
 }
 
 
 #backgroundPopup {
    z-index:1;
    position: fixed;
    display:none;
    height:100%;
    width:100%;
    background:#000000;
    top:0px;
    left:0px;
}

div.loader {
    background: url("../img/loading.gif") no-repeat scroll 0 0 transparent;
    height: 32px;
    width: 32px;
    display: none;
    z-index: 9999;
    top: 40%;
    left: 50%;
    position: absolute;
    margin-left: -10px;
}
div.close {
    background: url("../img/closebox.png") no-repeat scroll 0 0 transparent;
    cursor: pointer;
    height: 30px;
    position: absolute;
    right: -27px;
    top: -24px;
    width: 30px;
}
span.ecs_tooltip {
    background: none repeat scroll 0 0 #000000;
    border-radius: 2px 2px 2px 2px;
    color: #FFFFFF;
    display: none;
    font-size: 11px;
    height: 16px;
    opacity: 0.7;
    padding: 4px 3px 2px 5px;
    position: absolute;
    right: -62px;
    text-align: center;
    top: -51px;
    width: 93px;
}
span.arrow {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #000000;
    display: block;
    height: 1px;
    left: 40px;
    position: relative;
    top: 3px;
    width: 1px;
}
div#popup_content {
    margin: 4px 7px;
    /* remove this comment if you want scroll bar
    overflow-y:scroll;
    height:200px
    */
}

 .onoffswitch {
    position: relative; width: 150px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
    text-align:left;
}
.onoffswitch input[type="checkbox"] {
    display:none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; 
    overflow: hidden; 
    cursor: pointer;
    border: 2px solid #FFFFFF; 
    border-radius: 20px;
}
.onoffswitch-label a {
    padding-left: 0px !important; 
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "Active";
    padding-left: 10px;
    background-color: #33CC66; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "Inactive";
    padding-right: 10px;
    background-color: #EEEEEE; color: #666666;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 20px; margin: 7px;
    background: #FFFFFF;
    border: 2px solid #FFFFFF; border-radius: 30px;
    position: absolute; top: 0; bottom: 0; 
    /*right: 66px;*/
    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}


/*Custom file input style */
.btn-file {
  overflow: hidden;
}

.btn-file input[type=file] {
  width: 100%;
  filter: alpha(opacity=0);
  opacity: 0;
  cursor: pointer;
}

.btn-green{
    background: #33cc66;
  color:#FFF;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 5px 8px;
  margin:20px 0px 20px 0px;
  text-align: center;
  outline: none;
  -webkit-user-select: none;
  vertical-align: middle;
  /*line-height:35px;*/
  height:35px;
}
.btn-green:hover {
  border: 1px solid #33cc66;
  color: #33cc66;
  background:#FFF;
}
.btn-green:active {
  border: 1px solid #33cc66;
  color: #33cc66;
  background:#FFF;
}
/*input[type="file"]{
    font-size:10px; 
    padding:2px;
}

.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'Select Your File';
  display: block;
  background: #33cc66;
  width:100%;
  color:#FFF;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 5px 8px;
  margin:20px 0px 20px 0px;
  text-align: center;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 10pt;
}*/
.custom-file-input:hover::before {
  border: 1px solid #33cc66;
  color: #33cc66;
  background:#FFF;
}
.custom-file-input:active::before {
  border: 1px solid #33cc66;
  color: #33cc66;
  background:#FFF;
}

/*End custom file input style */

/*Modals*/
span[id^=modal-lbl]{
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}
/*Modals*/

/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
  padding-right: 0;
  padding-left: 0;
}
.navbar-wrapper .navbar {
  padding-right: 15px;
  padding-left: 15px;
}
.navbar-wrapper .navbar .container {
  width: auto;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 500px;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner{
    position:absolute;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  width:100%;
  height: auto;
  
}



/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 20px;
  text-align: center;
}
.marketing h2 {
  font-weight: normal;
}
.marketing .col-lg-4 p {
  margin-right: 10px;
  margin-left: 10px;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 50px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}
featurette-image {
    margin-top:50px;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {
  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }
  .navbar-wrapper .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }

  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 50px;
  }
}

/* Places glyph icon in modal contact form in middle of text box */
/*.form-horizontal .has-feedback .form-control-feedback {
    top: 25px;
}*/

.has-feedback label.sr-only~.form-control-feedback {
    top:5px;
}
.checkbox >.form-control-feedback {
    top:-5px;
}

/* buffer for space above row */
.top-buffer {
    margin-top:40px;
}
.bottom-buffer {
    margin-bottom:20px;
}

/* Custom font */
/*@font-face{
    font-family: Lato;
    src: url(https://fonts.googleapis.com/css?family=Lato:300,400);
} */

body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Lato', 'Open Sans',"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
}
html, body {
        height: 100%;
        /* The html and body elements cannot have any padding or margin. */
      }

/* End custom font */

/* Form with spacing top and bottom for single page */
.singleForm {
  /*max-width: 330px;*/
  padding: 15px;
  margin: 20% auto 20% auto;
}
.singleForm .singleForm-heading,
.singleForm .checkbox {
  margin-bottom: 10px;
}
.singleForm .checkbox {
  font-weight: normal;
}
.singleForm .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.singleForm .form-control:focus {
  z-index: 2;
}
.singleForm input {
    /*margin-top:5px;*/
    margin-bottom:5px;
}
/*.singleForm input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.singleForm input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}*/
/* End signin form */

/*Form with input at the start*/
.form-control-start{
    position:absolute;
    left:15px;
    top:25px;
    font-size:2em;
    
}
/*Form with input at the start*/

/* centered columns styles */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}

.nofloat {
    float:none;
}
/*Button style - Gender toggle*/
.btn-default{
    height:35px;
    padding-top:5px;
    padding-bottom:5px;
}

/*Put background on carousel*/
.dark {
    background: rgba(0, 0, 0, 0.5);
    border-radius:5px;
}
/*Custom align*/
.bottomright {
    position:absolute;
    bottom:0;
    right:0;
}
.bottomleft {
    position:absolute;
    bottom:0;
    left:0;
}
/*.bottom-align{
    position:absolute;
    bottom:0;
    width:100%;
}*/

/*Green border box - round corners*/
.greenborder{
    border: 2px solid #33CC66;
    border-radius: 5px;
    padding:0;
}
.greenbox{
    color:#fff !important;
    background-color:#33CC66;
}
.divider {
  height: 1px;
  width:100%;
  display:block; /* for use on default inline elements like span */
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.bg_404{
    background: url('/images/layout/404.png') no-repeat top left;
    -webkit-background-size: auto 120%;
    -moz-background-size: auto 120%;
    -o-background-size: auto 120%;
    background-size: auto 120%;
    min-height:650px;
    margin:0;
    padding:0;
}
.text_404{
    font-size:12em;
    margin-top:30%;
    /*width:100%;*/
}

.nopadding{
    padding-left:0 !important;
    padding-right:0 !important;
}
.alert {
    position: absolute;
    top: 62px;
    text-align: center;
    width: 100%;
    z-index:101;
}

.alert.alert-inflow {
   position: relative; 
   top: 0px;
}
/*Custom file input*/
.btn-file {
  overflow: hidden;
  position: relative;
  vertical-align: middle;
}
.btn-file > input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  font-size: 23px;
  height: 100%;
  width: 100%;
  direction: ltr;
  cursor: pointer;
}
.fileinput {
  margin-bottom: 9px;
  display: inline-block;
}
.fileinput .form-control {
  padding-top: 7px;
  padding-bottom: 5px;
  display: inline-block;
  margin-bottom: 0px;
  vertical-align: middle;
  cursor: text;
}
.fileinput .thumbnail {
  overflow: hidden;
  display: inline-block;
  margin-bottom: 5px;
  vertical-align: middle;
  text-align: center;
}
.fileinput .thumbnail > img {
  max-height: 100%;
}
.fileinput .btn {
  vertical-align: middle;
}
.fileinput-exists .fileinput-new,
.fileinput-new .fileinput-exists {
  display: none;
}
.fileinput-inline .fileinput-controls {
  display: inline;
}
.fileinput-filename {
  vertical-align: middle;
  display: inline-block;
  overflow: hidden;
}
.form-control .fileinput-filename {
  vertical-align: bottom;
}
.fileinput.input-group {
  display: table;
}
.fileinput.input-group > * {
  position: relative;
  z-index: 2;
}
.fileinput.input-group > .btn-file {
  z-index: 1;
}
.fileinput-new.input-group .btn-file,
.fileinput-new .input-group .btn-file {
  border-radius: 0 4px 4px 0;
}
.fileinput-new.input-group .btn-file.btn-xs,
.fileinput-new .input-group .btn-file.btn-xs,
.fileinput-new.input-group .btn-file.btn-sm,
.fileinput-new .input-group .btn-file.btn-sm {
  border-radius: 0 3px 3px 0;
}
.fileinput-new.input-group .btn-file.btn-lg,
.fileinput-new .input-group .btn-file.btn-lg {
  border-radius: 0 6px 6px 0;
}
.form-group.has-warning .fileinput .fileinput-preview {
  color: #8a6d3b;
}
.form-group.has-warning .fileinput .thumbnail {
  border-color: #faebcc;
}
.form-group.has-error .fileinput .fileinput-preview {
  color: #a94442;
}
.form-group.has-error .fileinput .thumbnail {
  border-color: #ebccd1;
}
.form-group.has-success .fileinput .fileinput-preview {
  color: #3c763d;
}
.form-group.has-success .fileinput .thumbnail {
  border-color: #d6e9c6;
}
.input-group-addon:not(:first-child) {
  border-left: 0;
}

/*Upfront.php and canvas styling*/
.smallCanvas{
        height: 180px;
    }
    .bigCanvas{
        height: 300px;
    }
    .bold-label {
        font-size: 1.4em;
        width: 70%;
        text-align: left;
    }
    .timeScale {
        width: 30%;
        text-align: right;
    }
    .data {
        vertical-align: middle;
        font-size: 1.5em;
        color: #5DE170;
        text-align: center;
    }
    #loading {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        z-index: 99;
        display: none;
        
    }
    #loading-gif {
        width: 150px;
        padding:55px;
        display: block;
        position: fixed;
        background-color: rgba(0,0,0,0.4);
        border: solid 1px transparent;
        border-radius:10px;
        top: 50%;
        left:50%;
        transform: translate(-50%, -50%);
        
    }
    .upfront-bonus-data {
        vertical-align: middle;
        font-size: 1.5em;
        color: #CA871A;
        text-align: center;
    }
    
/*Campaigns CSS*/
/*---------------campaigns.php----------------*/
#campaigns #previewAll,
#campaigns #previewTop,
#campaigns #previewLapsed {
	background-image: url("../images/mobile_screen.png");
	background-size: 100% 100%;
	width: 30%;
	padding-bottom: 40%;
	background-repeat: no-repeat;
	position: relative;
}

#campaigns #previewTextBox,
#campaigns #previewTextTop,
#campaigns #previewTextLapsed {
	top: 28%;
	left: 18%;
	width: 60%;
	position: absolute;
	background: rgba(255, 255, 255, 0);
	overflow: hidden;
	color: #FFFFFF;
	border: 0px none;
	resize: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}

/*#campaigns #previewTextBoxTitle{
	border-bottom: 2px solid #232222;
	top: 28%;
	left: 18%;
	width: 60%;
	position: absolute;
	background: rgba(255, 255, 255, 0);
	overflow: hidden;
	color: #FFFFFF;
	border: 0px none;
	resize: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}*/

#campaigns #previewTextBox:focus,
#campaigns #previewTextTop:focus,
#campaigns #previewTextLapsed:focus {
	outline: 0px none transparent;
}

#campaigns #previewTextBox:hover,
#campaigns #previewTextTop:hover,
#campaigns #previewTextLapsed:hover {
	cursor: default;
}
#campaigns .panel{
	border-left: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #ddd;
}
#campaigns .nav-tabs>li {
	margin-bottom: -2px;
}
#campaigns .btn-group-xs>.btn, .btn-xs{
	font-size: 8px;
}
#campaigns .input-group{
	padding-top: 2px;
	padding-bottom: 2px;
}
#campaigns textarea{
	resize: none;  
}
#campaigns .well.col-md-6.pull-left{
	top: 0px;
	/*background-image: linear-gradient(to bottom,#33CC66 0,#33CC66 100%);*/
}
#campaigns .target-head h3,
#campaigns .campaign-history h3,
#campaigns .history-title h3{
	padding: 15px 15px 10px 15px;
}
#campaigns .nav-tabs>li>a:hover,
#campaigns .nav-tabs>li.active a {
	color:#33CC66; 
}
#campaigns .est-customer{
	margin-top: 8px;
}
#campaigns #textboxAll,
#campaigns #textboxTop,
#campaigns #textboxLapsed{
	margin-top:60px;
}
#campaigns .target-head h3 button{
	float:right;
}
#campaigns .panel-heading .accordion-toggle:before{
	content: "";
    display: block;
    width: 20px;
    height:20px;
    float:left;
    margin: 0 6px 0 0;
	background: url('../images/icons/icon-blue-circle-tick.png') no-repeat;
}
#campaigns .panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';
    content: "\e114";    
    float: right;        
    color: grey;         
}
#campaigns .panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    
}
#campaigns .panel-title a {
    display: block;
    padding: 10px 15px;
    margin: -10px -15px;
}
#campaigns .panel-heading h4{
	text-align: left;
}
#ModalAll .modal-body th{
	text-align:center;
}
#campaigns #allCustomers .row .btnSet{
	padding: 0px;
}
#campaigns .backColorBox{
	
	padding: 10px;
	border: 2px solid #eee;
	border-radius: 4px;
}
#campaigns .backColorBox .messageColor{
	color:#333;
	font-weight: bold;
}
#campaigns .panel-group .history-title{
		border-left: 0px;
		border-right: 0px;
		border-bottom: 0px;
		border-radius: 0px;
		margin-top: 0px;
}
#campaigns .panel-group .history-title:last-child{
	border-bottom: 1px solid #b2b2b2;
}
#campaigns .panel-group .panel-heading{
		background-color: #f8f8f8;
		border-radius:0px;
/* 		border-bottom: 1px solid #b2b2b2;	 */
		border-top: 1px solid #b2b2b2;
}
#campaigns .panel-body  {
    word-break:break-all
}
#campaigns .panel-group{
	margin-bottom: 0px;
}
/*#campaigns .load-more{
	text-align: center;
	padding: 15px;
	height: 50px;
	width: 100%;
} 
#campaigns .load-more a{
	cursor: pointer;
} */
/*---------------campaigns.php end----------------*/

/*---------------Media queries Start----------------*/

 @media only screen and (max-width : 1200px) {

		#campaigns #previewTextBoxTitle,
		#campaigns #previewTextBox,
		#campaigns #previewTextTop,
		#campaigns #previewTextLapsed {
			font-size: 11px;
		}
		#campaigns .mobile-pic{
			margin-top: 50px;
		}

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {
    	#campaigns #previewAll,
    	#campaigns #previewTop,
    	#campaigns #previewLapsed{
    		display: none;
    	}
		#campaigns #textboxAll,
		#campaigns #textboxTop,
		#campaigns #textboxLapsed{
			margin-top:0px;
		}
		#campaigns #textboxTop .input-group{
			
		}
		
    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
    	#campaigns .col-xs-12 #sendPush{
    		float: none !important;
    		margin-top: 10px; 
    		margin-bottom: 10px;
    	}
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {
		#campaigns .nav-tabs li{
			width: 100%;
			/*border-bottom: ;*/
		}
		#campaigns .nav-tabs li.active a,
		#campaigns .nav-tabs li:hover a{
			background-color: #33CC66;
			color:#fff;
		}
		#campaigns .nav-tabs li a{
			text-align: center;
			margin-right: 0px;
			border-radius: 4px 4px 4px 4px ;

		}
		#campaigns .target-head{
			text-align: center;
		}
		#campaigns #showTableAll,
		#campaigns #sendPush{
			text-align: center;
			float: none !important;
			width: 100%;
			
		}
		#campaigns .col-sm-4{
			margin-top: 10px;
			text-align: left;
		}
		#campaigns .target-head h3 button{
			float:none;
			margin-top: 20px;
			width: 80%;
		}
		#campaigns .panel-heading .accordion-toggle:after,
		#campaigns .panel-heading .accordion-toggle.collapsed:after{
			display: none;
		}
    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {
        
    }

  /*---------------Media queries end----------------*/

/* ==========================================================================
   UNIVERSAL CSS
   ========================================================================== */
body{
	padding-right: 0px !important;
}

/* ==========================================================================
   campaign.php
   ========================================================================== */

#campaigns #previewAll,
#campaigns #previewTop,
#campaigns #previewLapsed {
	background-image: url("../images/mobile_screen.png");
	background-size: 100% 100%;
	width: 30%;
	padding-bottom: 40%;
	background-repeat: no-repeat;
	position: relative;
}

#campaigns #previewTextBox,
#campaigns #previewTextTop,
#campaigns #previewTextLapsed {
	top: 28%;
	left: 18%;
	width: 60%;
	position: absolute;
	background: rgba(255, 255, 255, 0);
	overflow: hidden;
	color: #FFFFFF;
	border: 0px none;
	resize: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}

/*#campaigns #previewTextBoxTitle{
	border-bottom: 2px solid #232222;
	top: 28%;
	left: 18%;
	width: 60%;
	position: absolute;
	background: rgba(255, 255, 255, 0);
	overflow: hidden;
	color: #FFFFFF;
	border: 0px none;
	resize: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}*/

#campaigns #previewTextBox:focus,
#campaigns #previewTextTop:focus,
#campaigns #previewTextLapsed:focus {
	outline: 0px none transparent;
}

#campaigns #previewTextBox:hover,
#campaigns #previewTextTop:hover,
#campaigns #previewTextLapsed:hover {
	cursor: default;
}
#campaigns .panel{
	border-left: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #ddd;
}
#campaigns .nav-tabs>li {
	margin-bottom: -2px;
}
#campaigns .btn-group-xs>.btn, .btn-xs{
	font-size: 8px;
}
#campaigns .input-group{
	padding-top: 2px;
	padding-bottom: 2px;
}
#campaigns textarea{
	resize: none;  
}
#campaigns .well.col-md-6.pull-left{
	top: 0px;
	/*background-image: linear-gradient(to bottom,#33CC66 0,#33CC66 100%);*/
}
#campaigns .target-head h3,
#campaigns .campaign-history h3,
#campaigns .history-title h3{
	padding: 15px 15px 10px 15px;
}
#campaigns .nav-tabs>li>a:hover,
#campaigns .nav-tabs>li.active a {
	color:#33CC66; 
}
#campaigns .est-customer{
	margin-top: 8px;
}
#campaigns #textboxAll,
#campaigns #textboxTop,
#campaigns #textboxLapsed{
	margin-top:60px;
}
#campaigns .target-head h3 button{
	float:right;
}
#campaigns .panel-heading .accordion-toggle:before{
	content: "";
    display: block;
    width: 20px;
    height:20px;
    float:left;
    margin: 0 6px 0 0;
	background: url('../images/icons/icon-blue-circle-tick.png') no-repeat;
}
#campaigns .panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';
    content: "\e114";    
    float: right;        
    color: grey;         
}
#campaigns .panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    
}
#campaigns .panel-title a {
    display: block;
    padding: 10px 15px;
    margin: -10px -15px;
}
#campaigns .panel-heading h4{
	text-align: left;
}
#ModalAll .modal-body th{
	text-align:center;
}
#campaigns #allCustomers .row .btnSet{
	padding: 0px;
}
#campaigns .backColorBox{
	
	padding: 10px;
	border: 2px solid #eee;
	border-radius: 4px;
}
#campaigns .backColorBox .messageColor{
	color:#333;
	font-weight: bold;
}
#campaigns .panel-group .history-title{
		border-left: 0px;
		border-right: 0px;
		border-bottom: 0px;
		border-radius: 0px;
		margin-top: 0px;
}
#campaigns .panel-group .history-title:last-child{
	border-bottom: 1px solid #b2b2b2;
}
#campaigns .panel-group .panel-heading{
		background-color: #f8f8f8;
		border-radius:0px;
/* 		border-bottom: 1px solid #b2b2b2;	 */
		border-top: 1px solid #b2b2b2;
}
#campaigns .panel-body  {
    word-break:break-all
}
#campaigns .panel-group{
	margin-bottom: 0px;
}
/*#campaigns .load-more{
	text-align: center;
	padding: 15px;
	height: 50px;
	width: 100%;
} 
#campaigns .load-more a{
	cursor: pointer;
} */
/*---------------campaigns.php end----------------*/

/*---------------Media queries Start----------------*/

 @media only screen and (max-width : 1200px) {

		#campaigns #previewTextBoxTitle,
		#campaigns #previewTextBox,
		#campaigns #previewTextTop,
		#campaigns #previewTextLapsed {
			font-size: 11px;
		}
		#campaigns .mobile-pic{
			margin-top: 50px;
		}

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {
    	#campaigns #previewAll,
    	#campaigns #previewTop,
    	#campaigns #previewLapsed{
    		display: none;
    	}
		#campaigns #textboxAll,
		#campaigns #textboxTop,
		#campaigns #textboxLapsed{
			margin-top:0px;
		}
		#campaigns #textboxTop .input-group{
			
		}
		
    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
    	#campaigns .col-xs-12 #sendPush{
    		float: none !important;
    		margin-top: 10px; 
    		margin-bottom: 10px;
    	}
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {
		#campaigns .nav-tabs li{
			width: 100%;
			/*border-bottom: ;*/
		}
		#campaigns .nav-tabs li.active a,
		#campaigns .nav-tabs li:hover a{
			background-color: #33CC66;
			color:#fff;
		}
		#campaigns .nav-tabs li a{
			text-align: center;
			margin-right: 0px;
			border-radius: 4px 4px 4px 4px ;

		}
		#campaigns .target-head{
			text-align: center;
		}
		#campaigns #showTableAll,
		#campaigns #sendPush{
			text-align: center;
			float: none !important;
			width: 100%;
			
		}
		#campaigns .col-sm-4{
			margin-top: 10px;
			text-align: left;
		}
		#campaigns .target-head h3 button{
			float:none;
			margin-top: 20px;
			width: 80%;
		}
		#campaigns .panel-heading .accordion-toggle:after,
		#campaigns .panel-heading .accordion-toggle.collapsed:after{
			display: none;
		}
    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {
        
    }

  /*---------------Media queries end----------------*/
  
  
  /* ==========================================================================
   settings.php
   ========================================================================== */
  
  /*---------------Tab based navigation styles----------------*/
  
  .tab-nav-container {
      text-align: center;
      margin-bottom: 30px;
  }
  
  #tab-nav a {
      text-transform: uppercase;
      font-size: 16px;
      color: #27ae60;
      margin: 0 10px;    
      transition: all 1s; 
  }
  
  #tab-nav a.active,
  #tab-nav a:hover {
      border-bottom: 1px #333 solid;
      border-radius: 0;
      box-shadow: none;
      color: #333;
  }
  
  .tab {
      display: none;
  }
  
   /* Small Devices, Tablets */
    @media only screen and (min-width: 750px) and (max-width: 970px) {
        #tab-nav a {
            font-size: 14px;
            margin: 0 5px;
            padding: 10px 5px;
        }
    }
    
    @media only screen and (max-width: 750px) {
        #tab-nav a {
            display: block;
            float: none;
            text-transform: none;
        }

        #wrapper #sidebar-wrapper {
            display: none;
        }

        #wrapper .right-container {
            width: 100%;
        }
    }
    
/*---------------Tab styling----------------*/

  .tab .table th {
      border-top: none;
  }

  .tab .panel-heading h3 {
      padding-bottom: 0px;
      margin-bottom: 0px;
  }
  
  .tab .panel .panel {
      margin: 30px 0;
  }
  
  .tab .switcher-link {
      margin-top: 10px;
  }

  span.glyphicon {
      cursor: pointer;
  }
      
    @media only screen and (max-width: 750px) {
        .tab .form-control {
            margin: 10px 0px;
        }
        
        #employees-and-branches-tab .row {
            padding: 0;
        }
    }
      
/*---------------employees-and-branches-tab----------------*/

  #employees-and-branches-tab td {
      vertical-align: middle;
  }
  
  #employees-and-branches-tab td .badge {
      margin-left: 10px;
      font-weight: normal;
      cursor: pointer;
      background: #ccc;
      transition: background 1s;
  }
  
  #employees-and-branches-tab td sup span {
      margin-left: 5px;
  }
  
  #employees-and-branches-tab tr:hover td .badge {
      background: #337ab7;
  }

  #employees-and-branches-tab .employee-list-table .inactive td,
  #employees-and-branches-tab .employee-list-table .inactive td > *{
      color: #999;
  }
  
  #employees-and-branches-tab .employee-list-table .inactive td .label {
      background: #999;
      color: #fff;
      font-weight: normal;
      font-size: 8px;
      margin-left: 5px;
  }
  
  #employees-and-branches-tab .employee-list-table .inactive td .badge {
      color: #fff;
  }

  #employees-and-branches-tab .row {
      padding: 7px 0px;
  }

  #employees-and-branches-tab p {
      margin-bottom: 15px;
  }
  
  #employees-and-branches-tab #edit_employee_form,
  #employees-and-branches-tab #edit_branch_form {
      display: none;
  }
  
  #employees-and-branches-tab h4 {
      text-align: left;
  }
        
/*---------------payment-details-tab----------------*/      
#payment-details-tab .details {
    margin-top: 20px;
    overflow: hidden;
}

.payment-form-wrapper {
    margin: 0 10px 30px 10px;
    padding: 30px;
}

.payment-status p {
    margin-bottom: 30px;
}

.payment-status-icon {
    font-size: 80px;
    margin: 10px 0px;
}

.payment-status-icon.active {
    color: #33cc66;
}

.payment-status-icon.inactive {
    color: red;
}
      
/*---------------upfront-settings-tab----------------*/

#upfront-settings-tab h4.highlight {
    margin: 39px 0px 0px 0px;
}

#upfront-settings-tab .contact-us-wrapper { 
    margin-bottom: 20px;
}

#upfront-settings-tab .setup-customer-payments {
    margin: 20px 0 10px 0;
    overflow: hidden;
}

#upfront-settings-tab .setup-customer-payments h4 {
    margin-bottom: 30px;
}

#upfront-settings-tab .setup-customer-payments label {
    font-size: 11px
}

#upfront-settings-tab .setup-customer-payments .top-buffer {
    height: 40px;
    line-height: 40px;
    margin-top: 100px;
}

#upfront-settings-tab .setup-customer-payments .top-buffer>* {
    margin: 0;
}

#upfront-settings-tab .setup-tiers table td {
    vertical-align: middle;
}

#upfront-settings-tab .modal-body table td {
    border: none;
    vertical-align: middle;
}

#upfront-settings-tab .modal-body table tr td:first-child {
    text-align: right;
    padding-right: 20px;
}

  @media only screen and (max-width: 1170px) {
      #upfront-settings-tab .setup-customer-payments .top-buffer {
          margin: 10px 0;
      }
      
      #upfront-settings-tab .setup-customer-payments h4 {
        margin-top: 30px;
      }
    }
    
.st-sort-ascent:before{
    content: '\25B2';
}

.st-sort-descent:before{
    content: '\25BC';
}

th[st-sort] {
    cursor: pointer;
}

.table.table-default>tbody>tr>td, 
.table.table-default>tbody>tr>th, 
.table.table-default>tfoot>tr>td, 
.table.table-default>tfoot>tr>th, 
.table.table-default>thead>tr>td, 
.table.table-default>thead>tr>th {
    vertical-align: middle;
    padding-top: 10px;
    padding-bottom: 10px;
}

.table.table-item>tbody>tr>td, 
.table.table-item>tbody>tr>th, 
.table.table-item>tfoot>tr>td, 
.table.table-item>tfoot>tr>th, 
.table.table-item>thead>tr>td, 
.table.table-item>thead>tr>th {
    padding-top: 20px;
    padding-bottom: 20px;
}

.table.table-item .checkbox, 
.table.table-item .radio {
    margin-top: 0px;
    margin-bottom: 0px;
}

.table.table-item .checkbox+.checkbox, 
.table.table-item .radio+.radio {
    margin-top: 5px;
}

.smart-table-wrapper .spinner {
    text-align: center;
    padding: 20px 0px;
    font-weight: bold;
}

.page-title {
    margin: 0px;
}

.title-note {
    margin: 15px 0 0 0;
}

.customers-page h3 {
    margin-top: 0px; 
    font-size: 18px;
}

#filterWrapper {
    clear: both;
    overflow: hidden;
    margin-bottom: 15px;
}

#filterWrapper .input-group {
    width: 100%;
}

#filterWrapper .filterField {
    margin: 10px auto;
}

#filterWrapper .filterField label {
    display: none;
}

#filterWrapper .filterField .inner {
    background: #FFF;
    padding: 15px;

    border-radius: 2px;
    border-left: #DADFE1 1px solid;
    border-right: #DADFE1 1px solid;
    background: #fff;
    -moz-box-shadow: 0px 3px #ccc;
    -webkit-box-shadow: 0px 3px #ccc;
    box-shadow: 0px 3px #ccc;
}

.customers-page .table h3 {
    margin: 0;
}

.btn-no-click {
    cursor: default;
}


.spacing-top-1 {
    margin-top: 10px;
}

.spacing-top-2 {
    margin-top: 20px;
}

.spacing-top-3 {
    margin-top: 30px;
}

.spacing-top-4 {
    margin-top: 40px;
}

.spacing-top-5 {
    margin-top: 50px;
}

.spacing-top-6 {
    margin-top: 60px;
}

.spacing-top-7 {
    margin-top: 70px;
}

.spacing-top-8 {
    margin-top: 80px;
}

.spacing-top-bottom {
    margin: 20px 0px;
}

.capitalise {
    text-transform: capitalize;
}

.item-tabs .tab-content {
    padding-top: 20px;
}

.default-spacing > div {
    margin: 20px 0px;
}

/*
 * Group cells in customer portal
 */

.group-item .group-cell {
    float: left;
    overflow: hidden;
}

.group-item .group-cell.right {
    float: right;
}

.group-item .panel-body .group-cell {
    padding: 20px;
}

.group-item .panel-body .group-cell .img-wrapper {
    padding: 5px;
    border: 1px solid #333;
    border-radius: 5px;
}

.group-item .panel-body .group-cell .img-wrapper img {
    max-width: 150px;
}

.group-item .group-cell h3 {
    margin-top: 0px;
}

.group-item .panel-footer {
    overflow: hidden;
}

.group-item .panel-footer .contact {
    padding: 5px 0px;
}

.group-item .panel-footer .contact .contact-element {
    padding: 0px 5px;
    white-space:nowrap;
}

.table>tbody>tr>td.no-border, 
.table>tbody>tr>th.no-border, 
.table>tfoot>tr>td.no-border, 
.table>tfoot>tr>th.no-border, 
.table>thead>tr>td.no-border, 
.table>thead>tr>th.no-border {
    border-top: none;
}

.form-label {
    padding: 6px 12px;
}

.table .btn-group {
    padding-left: 0px;
}

.cell-separator {
    height: 20px;
}

.toolbar {}

@media (max-width: 768px) {
    .toolbar a.btn {
        float: none !important;
    }
    
    .toolbar .breadcrumbs-wrapper {
        width: 100%;
        clear: both;
        padding-top: 15px;
        margin-top: 15px;
        border-top: 1px solid #ccc;
    }
}

.breadcrumbs-wrapper {
    min-height: 30px;
    line-height: 30px;
}

.breadcrumbs-wrapper .breadcrumb .glyphicon{
    padding-right: 5px;
}

.breadcrumbs-wrapper .breadcrumb.active, 
.breadcrumbs-wrapper .breadcrumb.active:hover,
.breadcrumbs-wrapper .breadcrumb.active:hover .glyphicon {
    color: #333;
    text-decoration: none;
    cursor: text;
}

@media (max-width: 768px) {
    .breadcrumbs-wrapper .breadcrumb {
        width: 33%;
        font-size: 12px;
        padding: 10px;
    }
}

.white-col-box {
    margin-top: 10px;
    margin-bottom: 10px;
    
    padding: 20px;

    border-radius: 2px;
    border-left: #DADFE1 1px solid;
    border-right: #DADFE1 1px solid;
    background: #fff;
    
    -moz-box-shadow: 0px 3px #ccc;
    -webkit-box-shadow: 0px 3px #ccc;
    box-shadow: 0px 3px #ccc;
}

.branch-title {
    font-size: 20px;
}

.branch-title a {
    text-decoration: none;
    color: #fff;
    display: block;
}

.branch-sub-title {
    margin-top: 15px;
}

.branch-sub-title small {
    padding: 5px;
    color: #666;
    font-weight: normal;
}

.branch-sub-title small .glyphicon {
    margin-right: 2px;
    font-size: 10px;
}

@media (max-width: 768px) {
    .branch-sub-title small {
        display: block;
        margin: 0px 0px;
    }
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
  
  cursor: default;
}

.btn-loy {
    background: #3c6 none repeat scroll 0 0;
    color: #fff;
    border-radius: 25px;
    display: inline-block;
    padding: 14px 28px 13px 28px;
    line-height: 1;
    border: 2px solid #3c6;
    font-family: Raleway, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.overflow {
    overflow: hidden;
}

.no-link-style {
    color: inherit;
}

.no-link-style>* {
    text-decoration: none;
    color: inherit;
}

#loadingOverlay {
    opacity:    0.8; 
    background: #000; 
    width:      100%;
    height:     100%; 
    z-index:    10;
    top:        0; 
    left:       0; 
    position:   fixed; 
}

#loadingSpinner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    color: #fff;
    z-index: 9999;
    
    text-align: center;
}

#loadingSpinner .desc {
    margin-top: 10px;
    font-size: 22px;

    font-weight: lighter;
    font-family: Raleway, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.fade-in-out {
  transition: 0.25s linear all;  
  opacity: 1;
}

.fade-in-out.ng-hide {
  opacity: 0;
}

.clear {
    clear: both;
}

.pagination.custom a:not(.no-padding) {
    padding-top: 9px;
    padding-bottom: 9px;
}

.pagination.custom input {
    text-align: center;
    width: 50px;
}

.sleek {
    text-transform: uppercase;
    font-weight: lighter;
}

.no-margin {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}

.no-top-margin {
    margin-top: 0px;
}

.no-right-margin {
    margin-right: 0px;
}

.no-bottom-margin {
    margin-bottom: 0px;
}

.no-left-margin {
    margin-left: 0px;
}

label.loyalty {
    text-transform: uppercase;
    font-weight: lighter;
    font-size: 18px;
    margin: 20px;
}

label.loyalty span {
    display:block;
    width:60px;
    height:60px;
    background-color:#CCC;
    color:#fff;
    font-size:25px;
    line-height:60px;
    cursor:pointer;
    margin: 0 auto;
    margin-bottom: 10px;
}

label.loyalty.active span,
label.loyalty:hover span  {
    background-color:#33CC66;

    -webkit-transition: background-color 0.5s ease-in-out; /* Safari */
    transition: background-color 0.5s ease-in-out;
}

.reward-counter {
    line-height: 36px;
    font-weight: lighter;
}

.reward-counter-number {
    font-size: 36px;
}

.reward-counter-details {
    font-size: 16px;
}

.fade-in-out {
    transition: 0.5s linear all;
    opacity: 1;
}

.fade-in-out.ng-hide {
    opacity: 0;
}

.vertical-middle {
    vertical-align: middle;
}

.table>tbody>tr>td.vertical-middle,
.table>tbody>tr>th.vertical-middle,
.table>tfoot>tr>td.vertical-middle,
.table>tfoot>tr>th.vertical-middle,
.table>thead>tr>td.vertical-middle,
.table>thead>tr>th.vertical-middle {
    vertical-align: middle;
}

table.uib-timepicker {
    margin: 0 auto;
}

.form-control:focus.border-warning,
.border-warning {
    border-color: yellow;
}

.form-control:focus.border-error,
.border-error {
    border-color: red;
}

.form-control:focus.border-success,
.border-success {
    border-color: lime;
}