/*
Theme Name: E-KLAN Template
Author: Judah Andrew

Description: Main CSS
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Copyright 2018. All Right Reserved
Everyone is permitted to copy and distribute verbatim copies
of this license document, but changing it is not allowed.

*/

body {font-family: 'Noto Sans', sans-serif; color: #777; font-size: 17px}
h1, h2, h3, h4, h5, h6 {font-family: 'Montserrat', sans-serif; line-height: normal;}
small {font-size: 10px; padding-top: 15px; display: block;}

a {}
a:hover {text-decoration: none;}

.img-rwd {height: 100%; width: 100%;}
section {padding: 15px 0;}

#header-section {padding-top: 30px;}
.logo-wrap a img {height: 50px; width: auto;}
.small-logo {width: 233px; height: 60px;}
.menu-wrap {border-top: 3px solid #f59220; margin-top: 15px;}
.acc-wrap {padding-top: 20px; text-align: right;}
.grey-bg {background-color: #f5f6f7}
.grad-bg {background-image: linear-gradient(to right, #ee277c, #fd4064, #ff5c4d, #ff7937, #f79524); padding: 15px 0; color: #fff;}
.line-separator {border: 2px solid #f59220; margin: 15px 0; padding: 0px !important}
.grey-line-separator {border: 2px solid #aaa; margin: 15px 0; overflow: hidden; padding: 0px !important}
.btn-100 {width: 100%;}
.no-padding {padding: 0px !important;}
.no-margin {margin: 0px !important;}
.selectOption {padding: 13px 7px !important;}

.split1-section {margin-top: -30px; padding-top: 0px}
.split1-img {margin-top: -30px;}
.split-wrap {padding: 85px;}

.ver-line {margin-top: -30px; display: none;}
.split3-btn {margin-top: 125px;}

.splitadv1-section {background-color: #f69321; border-bottom: 10px solid #ea088c; color: #fff;}
.adv-car {position: absolute; height: 500px; width: auto; top: 50px;}
.madv-car {max-width: 270px; height: auto; margin: 30px auto 0  auto; display: none;}

.splitadv2-section {padding-top: 150px;}
.our-benefit {padding: 70px 0 30px 0}
.benefit-cont {padding: 5px 50px;}
.right-benefit {padding: 50px 0}
.left-benefit {padding: 50px 10px}
.benefit-cont1 {border-right: 0.5px solid #f69321; border-bottom: 0.5px solid #f69321;}
.benefit-cont2 {border-left: 0.5px solid #f69321; border-bottom: 0.5px solid #f69321;}
.benefit-cont3 {border-right: 0.5px solid #f69321; border-top: 0.5px solid #f69321; }
.benefit-cont4 {border-left: 0.5px solid #f69321; border-top: 0.5px solid #f69321;}

.splitadv3-section {background: url(../images/e-klan-image-adv.png) bottom right no-repeat; background-size: 50%; padding-bottom: 0px; margin-bottom: -15px;}
.road-adv {display: none;}

.splitdrv1-section {background-color: #ea088c; border-bottom: 10px solid #f69321; color: #fff;}

.splitdrv2-section {margin-top: 300px; background: url(../images/e-klan-image-drv-bg.png) bottom right no-repeat; background-size: 100%;}
.drv-right {text-align: right; padding-bottom: 300px;}

.drv-left-wrap, .drv-right-wrap {padding: 50px 30px;}
.drv-wrap {border-bottom: 2px solid #ccc}

.menu-link {font-weight: 500; margin-top: 5px; padding-left: 0px;}
.menu-link * {box-sizing: border-box;}
.menu-link li {display: inline-block; list-style: outside none none; margin: 0 2em 0 0; padding: 0;}
.menu-link a {padding: 0.35em 0; color: rgba(0, 0, 0, 0.5); position: relative; letter-spacing: 1px; text-decoration: none;}
.menu-link a:before, .menu-link a:after {position: absolute; -webkit-transition: all 0.35s ease; transition: all 0.35s ease;}
.menu-link a:before {top: 0; display: block; height: 3px; width: 0%; content: ""; background-color: #ea088c;}
.menu-link a:after {left: 0; top: 0; padding: 0.35em 0; position: absolute; content: attr(data-hover); color: #000; white-space: nowrap; max-width: 0%; overflow: hidden;}
.menu-link a:hover:before, .menu-link .current a:before {opacity: 1; width: 100%;}
.menu-link a:hover:after, .menu-link .current a:after {max-width: 100%;}

.btn {padding: 3px 30px; text-align: center; background-size: 100% auto; color: white; border-radius: 7px; display: inline-block; transition: 0.5s; border: none;}
.btn-print {padding: 2px 5px; color: #fff; border-radius: 2px;}
.btn-big {font-size: 25px; padding: 20px 50px;}
.btn-med {font-size: 18px; padding: 10px 30px;}
.btn-grad, .btn-grad:active {background-image: linear-gradient(to right, #ee277c, #fd4064, #ff5c4d, #ff7937, #f79524 90%);}
.btn-grad.no-active {background-color: #ccc; color: #777; background-image: none;}
.btn-grad:hover {background-position: right center;}
.btn-red {background-color: #ee277c}
.btn-orange {background-color: #f79524}
.btn-grey {background-color: #ccc}
.btn-100 {width: 100%;}

#login-section, #register-section, #corporate-section {padding: 100px 0;}
.title-bar {border-radius: 7px;}
.login-title {margin-top: 30px;}
.login-label {font-size: 14px; padding-left: 5px; padding-top: 20px;}
.login-wrap {padding: 20px;}
.input {
  width: 100%;
  position: relative;
  background: linear-gradient(to right, #ee277c, #fd4064, #ff5c4d, #ff7937, #f79524);
  padding: 2px;
  display: block;
  border-radius: 0.3em;
}
.input *:not(div) {
  position: relative;
  width: 100%;
  display: inherit;
  border-radius: 0.2em;
  margin: 0;
  border: none;
  outline: none;
  padding: 1px 10px;
  z-index: 1;
}
.input *:not(span):focus + span {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.input > span {
  -webkit-transform: scale(0.993, 0.94);
          transform: scale(0.993, 0.94);
  transition: opacity .25s, -webkit-transform .5s;
  transition: transform .5s, opacity .25s;
  transition: transform .5s, opacity .25s, -webkit-transform .5s;
  opacity: 0;
  position: absolute;
  z-index: 0;
  margin: 0px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px #ee277c, 0 0 0 1px #fd4064, 3px -4px 20px #ff5c4d, -3px 3px 20px #f79524;
}
.input > input, .input > textarea {padding: 5px 10px;}
.input > textarea {
  min-height:150px;
}
.input span > textarea {
  margin-bottom: -10px;
}
.noresize {
  resize: none; 
}

.vresize {
  resize: vertical; 
}
.createacc {padding: 30px;}
.bootstrap-tagsinput {border: none; width: 100%; min-height: 30px;}
.bootstrap-tagsinput > span {display: inline-block; width: auto; }
.bootstrap-tagsinput > input {position: absolute; display: inline-block;}
.bootstrap-tagsinput .tag {padding: .2em .6em .3em; margin-bottom: 3px;}
.bootstrap-tagsinput .tag [data-role="remove"] {display: inline-block; margin: 0px -5px 0px 15px; padding: 0px; width: auto;}

.board {
    width: auto;
    height: auto;
    margin: -15px auto 30px 0;
    background: none;
}

.board .nav-tabs {
    position: relative;
    background: none;
    color: #ccc;
}

.nav-tabs {  
  border-top: 0;
  border-radius: 0px;
  border-left: none;
  border-right: none;  
  border-bottom: none;
  box-shadow: none;
}

.nav-tabs > li {
    width: 33.33%;
    border-color: #fff;
    border: none;
}

.nav-tabs2 > li {width: 50% !important;}
.nav-tabs3 > li {width: 50% !important;}
.nav-tabs4 > li {width: 50% !important;}

.nav-tabs > li a {border: none; margin: 0;}
.nav-tabs > li a:hover, .nav-tabs > li a:visited, .nav-tabs > li a:active, .nav-tabs > li a:focus, .nav-tabs > li a:after {
  background: none;
  border-top: 3px solid #fff;
  border-radius: 0px;
  border-left: none;
  border-right: none;  
  border-bottom: none;
  box-shadow: none;
}
.nav-tabs > li a, .nav-tabs > li a.active, .nav-tabs > li:after, .nav-tabs > li.active:after, .nav-tabs > li a.active:after {
  color: #ccc !important;
  border-top: 3px solid #ea088c;
  border-radius: 0px;
  border-left: none;
  border-right: none;  
  border-bottom: none;
  box-shadow: none;
}

.nav-tabs > li a, .nav-tabs > li > a, .nav-tabs > li a.disabled, .nav-tabs > li > a:focus {
  color: #ccc !important;
  border-top: 3px solid #fff;
  border-radius: 0px;
  border-left: none;
  border-right: none;  
  border-bottom: none;
  box-shadow: none;
}

.nav-tabs > li a:hover {
  border-top: 3px solid #ea088c;
  border-radius: 0px;
  border-left: none;
  border-right: none;  
  border-bottom: none;
  box-shadow: none;
}


.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
  border-radius: 0px;
  border-top: 3px solid #ea088c;
  border-left: none;
  border-right: none;
  color: #777 !important;
  border-bottom: none;
  box-shadow: none;
}

.nav-tabs > li > a.disabled:hover {
}

.nav-tabs > li > a.disabled span {
    border-color: #ddd;
    color: #aaa;
}

/*progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}
#progressbar li {
list-style-type: none;
width: 25%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 30px;
line-height: 30px;
display: block;
font-size: 12px;
color: #fff;
background: #bcbdbf;
border-radius: 100%;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: #eb008b;
position: absolute;
left: -50%;
top: 15px;
z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after {
background: #eb008b;
color: white;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
.navbar {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
    margin-top: 0px;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
    perspective: 1500px;
}


#sidebar {
	font-size: 14px;
	color: #777 !important;
    min-width: 250px;
    max-width: 250px;
    background: #e6e7e9;
    color: #fff;
    transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
    transform-origin: bottom left;
    padding: 30px 15px;
}

#sidebar.active {
    margin-left: -250px;
    transform: rotateY(100deg);
}

#sidebar .sidebar-header {
    padding: 20px;
    background: #6d7fcc;
}

#sidebar ul.components {
    padding: 20px 0;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}
#sidebar ul li a:hover {
    color: #7386D5;
    background: #fff;
}

#sidebar ul li.active > a, a[aria-expanded="true"] {
    color: #fff;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
#content {
    width: 100%;
    padding: 30px;
    min-height: 100vh;
    transition: all 0.3s;
}

#sidebarCollapse {
    width: 40px;
    height: 40px;
    background: #f5f5f5;
    cursor: pointer;
}

#sidebarCollapse span {
    width: 80%;
    height: 2px;
    margin: 0 auto;
    display: block;
    background: #555;
    transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
    transition-delay: 0.2s;
}

#sidebarCollapse span:first-of-type {
    transform: rotate(45deg) translate(2px, 2px);
}
#sidebarCollapse span:nth-of-type(2) {
    opacity: 0;
}
#sidebarCollapse span:last-of-type {
    transform: rotate(-45deg) translate(1px, -1px);
}


#sidebarCollapse.active span {
    transform: none;
    opacity: 1;
    margin: 5px auto;
}

.e-credit{
  position:relative;
  margin-bottom:70px;
}
.bg-e-credit {position: absolute; top: -12px;}
.e-credit-head {color: #777; padding-left: 45px; line-height: 7px;}

.credit-input{
	font-size: 15px;
  	height:32px;
  	width:100%;
  	padding-left: 45px;
  	border-radius: 15px;
  	border:2px solid #f8f39f;
  	outline:none;
}
.add-credit{
  	position:absolute;
  	right: 0px;
  	top: 18px;
  	right: 2px;
  	border:none;
  	height:30px;
  	width:30px;
  	border-radius:100%;
  	outline:none;
  	text-align:center;
  	font-weight:bold;
  	paddingdding:2px;
  	background-image: linear-gradient(to right, #ee277c, #fd4064, #ff5c4d, #ff7937, #f79524);
}
.add-credit:hover{
  cursor:pointer;
}
.user-img {width: 100px; height: 100px; border-radius: 100%; border: 2px solid #777;}

.dashboard-menuitem {padding: 5px 15px; margin-right: -16px;}
.dashboard-menuitem:hover, .dashboard-menuitem.active {background: url(../images/white-triangle.png) no-repeat right;}
.dashboard-menuitem a {color: #777; font-size: 15px; font-weight: bold; display: block;}
.dashboard-menuitem a:hover {}
.dashboard-menuitem a img {padding-right: 15px;}

.container-campaign {width: 100%;}

.dashboard-head h3 {margin-bottom: 0px !important;}

.alert-e-klan {border: 2px solid #aaa; border-radius: 0px; padding: 30px;}
.close-alert-e-klan {background-image: linear-gradient(to right, #ee277c, #fd4064, #ff5c4d, #ff7937, #f79524) !important; width: 25px; height: 25px; border-radius: 100%; opacity: 1;}

/* ON OFF Switch */
.onoffswitch {
    position: relative; width: 83px; float: right; display: block;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #aaa; border-radius: 12px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 18px; padding: 0; line-height: 18px;
    font-size: 10px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "ACTIVE";
    padding-left: 10px;
    background-color: #2ecc71; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #EEEEEE; color: #aaa;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 22px; height: 22px; margin: 0px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 61px;
    border: 2px solid #999999; border-radius: 12px;
    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; 
}

/* small swicth */
.smallswitch {
    position: relative; width: 50px; float: right; display: block;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.smallswitch-checkbox {
    display: none;
}
.smallswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 1px solid #aaa; border-radius: 10px;
}
.smallswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.smallswitch-inner:before, .smallswitch-inner:after {
    display: block; float: left; width: 50%; height: 10px; padding: 0; line-height: 15px;
    font-size: 10px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.smallswitch-inner:before {
    content: "";
    padding-left: 10px;
    background-color: #2ecc71; color: #FFFFFF;
}
.smallswitch-inner:after {
    content: "";
    padding-right: 10px;
    background-color: #EEEEEE; color: #aaa;
    text-align: right;
}
.smallswitch-switch {
    display: block; width: 12px; height: 12px; margin: 0px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 38px;
    border: 1px solid #999999; border-radius: 10px;
    transition: all 0.3s ease-in 0s; 
}
.smallswitch-checkbox:checked + .smallswitch-label .smallswitch-inner {
    margin-left: 0;
}
.smallswitch-checkbox:checked + .smallswitch-label .smallswitch-switch {
    right: 0px; 
}

.cmpgn-section {border-top: 2px solid #aaa; padding: 20px 0px; margin-bottom: 50px; overflow: hidden;}
.box-section {padding: 15px; background-color: #f2f2f2; -webkit-box-shadow: 2px 2px 5px 0px rgba(170,170,170,1) !important;
-moz-box-shadow: 2px 2px 5px 0px rgba(170,170,170,1) !important;
box-shadow: 2px 2px 5px 0px rgba(170,170,170,1) !important; overflow: hidden;}

.tab-content {overflow: hidden; position: relative;}

.upload-section {padding: 50px;}
.img-uploaded {margin-top: 7px; padding: 3px;
    background-image: linear-gradient(to right, #ee277c, #fd4064, #ff5c4d, #ff7937, #f79524);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;}

.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width:90%;
  margin: 20px auto;
  overflow: hidden;
}
.white-popup div {padding-top: 5px; padding-bottom: 5px;}
.white-popup h4 {border-bottom: 1px solid #777;}

.dropzone {min-height: 250px !important; overflow: hidden; border: 2px dashed #aaa; position: relative; margin-bottom: 5px;}
.dropzone > span {position: absolute; right: 0; bottom: 0; text-align: right !important; font-size: 13px; padding: 10px;}

.datepick {width: 165px !important; font-size: 14px;}
.showtime-box {margin-top: 33px;}

/* Range Slider */ 
.rangeslider--horizontal {height: 6px;}
.rangeslider__handle {width: 20px; height: 20px; background-color: #f79524}
.rangeslider__fill {background-image: linear-gradient(to right, #ee277c, #fd4064, #ff5c4d, #ff7937, #f79524);}
.rangeslider--horizontal .rangeslider__handle {top: -7px;}
.output-wrap {display: inline-block; background-color: #fff; padding: 10px; margin-bottom: 20px; font-size: 20px; font-weight: bold;}
.output-wrap output {display: inline-block; font-size: 20px;}

.impression-view p {margin-bottom: 0px; background-color: #fff; padding: 5px 10px; border: 1px solid #aaa; border-radius: 5px; display: inline-block; font-size: 25px; margin: 61px 0;}

.spec-day {position: absolute; overflow: hidden; right: 0px; top: 0px; z-index: 1; visibility: hidden;}
#spec-day {display: inline-block;}
#spec-day:hover {cursor: pointer; color: #ee277c}
.spec-day.active {visibility: visible;}
.day-wrap {padding: 10px; margin: 10px; border-radius: 7px; color: #aaa; display: inline-block;}
.day-wrap:hover {background-color: #aaa; color: #fff;}

.box-location p {padding: 10px;}
.zone-select div, .campaign-select div {padding-left: 15px; padding-right: 20px;}
.campaign-select {border-radius: 0px;}
.zone-select-btn {background-color: #fff; font-size: 20px; color: #777; padding: 9px 10px; border-radius: 7px;}
.zone-select-btn span {float: right; padding-top: 4px;}
.zone-items {padding: 30px; background: linear-gradient(to right, #ee277c, #fd4064, #ff5c4d, #ff7937, #f79524); padding: 3px; border-radius: 5px;}

.point-item {background: #eee; border-radius: 7px; display: none;}
.point-item.active {display: block;}
.point-btn {border-radius: 7px; color: #fff; text-align: center;}
.point-btn span {color: #fff;}
.point-item ul {padding: 0px;}
.point-item li {list-style: none; text-align: center; padding: 7px;}
.point-item li:first-child {border-bottom: 1px solid #ccc;}
.point-item li a {font-size: 13px; color: #333;}

.radius-wrap {padding: 0px; text-align: right;}
.radius-wrap span {margin-right: 5px;}
.radius-wrap input {width: 70px; padding: 10px; border-radius: 5px; outline: none; border: none; color: #333;}

.input-icon-wrap {background-color: #fff; width: 100%; overflow: hidden; display: flex; flex-direction: row; border-radius: 5px; color: #333; padding: 0 5px;}
.input-icon-wrap > input {margin: 5px 5px 5px 20px; padding: 4px; border: none;}
.input-icon-wrap > .add-on i {font-size: 26px; padding: 7px 0px 5px 3px;}
.input-icon {font-size: 25px;}
.input-with-icon {border: none; flex: 1;}
.input-icon, .input-with-icon {margin: 5px;}

/* TAB LEFT */
.tabs-left {background-color: #fff; border-radius: 5px;}
.tabs-left > .nav-tabs {
  border-bottom: 0;
}
.tabs-left > .tab-content {height: 550px; padding-top: 20px; padding-bottom: 15px;}
.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: none;
}

.tab-content > .active,
.pill-content > .active {
  display: block;
}

.tabs-left > .nav-tabs > li {
  float: none;
}

.tabs-left > .nav-tabs > li > a {
  width: 150px;
  margin-right: 0;
  margin-bottom: 0;
  border-top: none;
  text-align: center;
}

.tabs-left > .nav-tabs {
  float: left;
  margin-right: 19px;
}

.tabs-left > .nav-tabs > li > a {
  margin-right: -1px;
}

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
  border-color: #fff;
  background-image: linear-gradient(to right, #ee277c, #fd4064, #ff5c4d, #ff7937, #f79524);
}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
  border-color: #fff;
  color: #fff !important;
  background-image: linear-gradient(to right, #ee277c, #fd4064, #ff5c4d, #ff7937, #f79524);
}
.zone-items {display: none; visibility: hidden;}
.zone-items.active {visibility: visible; display: block;}
#zone-select-btn:hover {cursor: pointer;}

.zone-kab {padding: 0 30px;}
.zone-kab div a {padding: 10px; margin: 4px 0 10px 0; display: block; color: #aaa; font-size: 13px;}
.zone-kab div a:hover {background-image: linear-gradient(to right, #ee277c, #fd4064, #ff5c4d, #ff7937, #f79524); border-radius: 5px; color: #fff}

.zone-prov {background-color: #eee; overflow-y: scroll; overflow-x: hidden; height: 550px; border-radius: 5px 0 0 5px; padding-top: 15px; padding-bottom: 15px;}
.zone-prov li {margin-bottom: 0px; display: block; padding: 10px 0px;}
.zone-prov > li a:hover, .zone-prov > li a:visited, .zone-prov > li a:active, .zone-prov > li a:focus, .zone-prov > li a:after {border-top: none !important;}

.gmap3{
  width: 100%;
  height: 520px;
  border-radius: 5px;
}

.gmap-point {
  width: 100%;
  height: 520px;
}
.point-items {padding: 0px;}
.zone-selection {background-color: #fff; overflow: hidden; margin-top: -5px; border-radius: 0 0 5px 5px; padding: 20px; display: none;}
.zone-selection.active {display: block;}
.zone-selection div > .media-left i {font-size: 47px; color: #ff5c4d}
.zone-selection div {padding-top: 5px; padding-bottom: 5px;}

.map-append {padding: 0px; margin-top: 5px;}
.map-append-content {padding: 20px 5px; border: 2px solid #ccc; overflow: hidden; margin: 10px 0}
.map-append-content span {font-size: 12px;}
.map-append-content div i.fa-map-marker {font-size: 45px; color: #ff7937;}
.map-append-content i.fa-plus-circle {font-size: 45px;}

/* DATA TABLES */
table.dataTable.row-border tbody tr th, table.dataTable.row-border tbody tr td, table.dataTable.display tbody tr th, table.dataTable.display tbody tr td {font-size: 12px !important; text-align: center;}
.table-style thead th {border: none;}
.table-style thead th:first-child {border-radius: 5px 0 0 5px;}
.table-style thead th:last-child {border-radius: 0 5px 5px 0;}
table.dataTable.no-footer {border: none;}

.table-style thead {background-image: linear-gradient(to right, #ee277c, #fd4064, #ff5c4d, #ff7937, #f79524); border-radius: 5px;}
.table-style thead tr th {text-align: center; font-size: 12px; padding: 5px}
.table-style thead tr {color: #fff; padding: 15px;}

table.dataTable.row-border tbody tr th, table.dataTable.row-border tbody tr td, table.dataTable.display tbody tr th, table.dataTable.display tbody tr td {font-size: 12px !important; text-align: center;}
.billing-style thead th {border: none;}
table.dataTable.no-footer {border: none;}

.billing-style thead {background-image: linear-gradient(to right, #ee277c, #fd4064, #ff5c4d, #ff7937, #f79524); border-radius: 5px;}
.billing-style thead tr th {text-align: center; font-size: 12px; padding: 10px}
.billing-style thead tr {color: #fff; padding: 15px;}

.billing-style tbody tr td {font-size: 11px; text-align: center !important;}

table.dataTable tbody th, table.dataTable tbody td {padding: 5px !important}

#billing-campaign_filter {display: none;}
.filter-billing {padding: 15px 0px; overflow: hidden;}
.searchInput {border: 1px solid #333 !important; font-size: 12px}
.greyInput {background-color: #aaa; border: 1px solid #aaa !important; border-radius: 5px; font-size: 12px}
.greyInput input {background-color: #aaa; font-size: 12px;}
.paginate_button.previous {background-image: linear-gradient(to right, #ee277c, #fd4064, #ff5c4d, #ff7937, #f79524) !important; border: none; color: #fff !important;}
.paginate_button.next {background-image: linear-gradient(to right, #ee277c, #fd4064, #ff5c4d, #ff7937, #f79524) !important; border: none; color: #fff !important;}

/* ACCORDION */
.accordion {padding-left: 0px;}
.list-acc {
  list-style: none;
}
.list-acc .inner {
  overflow: hidden;
  display: none;
}
.list-acc .inner.show-acc {
   display: block;
}
.list-acc li {
  margin: 10px 0;
}
.list-acc li a.toggle {
  overflow: hidden;
  display: block;
  background: #fff;
}
.list-acc li a.toggle i {right: 30px; position: absolute; font-size: 30px;}
.list-acc li a.toggle:hover {}
.list-board {
  background-image: linear-gradient(to right, #ee277c, #fd4064, #ff5c4d, #ff7937, #f79524);
  border-radius: 10px;
  padding: 2px;
}
.white-board {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  padding: 15px 0;
}
.white-board a img {height: 30px; padding: 3px 3px 3px 15px; float: left}
.white-board > ul {padding: 0px;}
.white-board > ul li:first-child {margin-top: 15px;}
.white-board > ul li {margin: 0px;}
.white-board > ul li a:hover, .white-board > ul li a:focus {text-decoration: none;}
.white-board > ul li a.toggle {padding: 15px; border-top: 1px solid #eee}
.white-board > ul li a.toggle:hover, .white-board > ul li a.toggle:focus {background-image: linear-gradient(to right, #ee277c, #fd4064, #ff5c4d, #ff7937, #f79524); padding: 15px;}

ul.numbered-list {
  counter-reset: li;
  list-style-type: none;
  font-size: 14px;
  line-height: 18px;
  padding-left: 10px;
}
ul.numbered-list li {
  position: relative;
  padding: 5px 0 5px 30px;
}
ul.numbered-list li:before {
  content: counter(li);
  counter-increment: li;
  height: 20px;
  width: 20px;
  border: 1px solid #ee277c;
  border-radius: 50%;
  color: red;
  text-align: center;
  position: absolute;
  left: 0;
  top: 4px;
}

/* CAMPAIGN TABLE */

.col-vis {float: right; padding: 5px; margin-top: 3px; font-size: 12px; border: none; color: #fff;}
.col-vis > option {color: #333;}
.header-cmpgn {border-bottom: 3px solid #aaa; overflow: hidden;}
.tabs-campaign {margin-bottom: 0px; font-size: 12px;}
.tabs-campaign li { 
  /* Makes a horizontal row */
  float: left; 
  list-style: none;
 
  /* So the psueudo elements can be
     abs. positioned inside */
  position: relative; 
}
.tabs-campaign a { 
  /* Make them block level
     and only as wide as they need */
  float: left; 
  padding: 10px 40px; 
  text-decoration: none;
  
  /* Default colors */ 
  color: black;
  background: #eee; 
  
  /* Only round the top corners */
  -webkit-border-top-left-radius: 15px;
  -webkit-border-top-right-radius: 15px;
  -moz-border-radius-topleft: 15px;
  -moz-border-radius-topright: 15px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px; 
}
.tabs-campaign .active {
  /* Highest, active tab is on top */
  z-index: 3;
}
.tabs-campaign .active a { 
  /* Colors when tab is active */
  background: #aaa; 
  color: black; 
}
.tabs-campaign li:before, .tabs-campaign li:after, 
.tabs-campaign li a:before, .tabs-campaign li a:after {
  /* All pseudo elements are 
     abs. positioned and on bottom */
  position: absolute;
  bottom: 0;
}
/* Only the first, last, and active
   tabs-campaign need pseudo elements at all */
.tabs-campaign li:last-child:after,   .tabs-campaign li:last-child a:after,
.tabs-campaign li:first-child:before, .tabs-campaign li:first-child a:before,
.tabs-campaign .active:after,   .tabs-campaign .active:before, 
.tabs-campaign .active a:after, .tabs-campaign .active a:before {
  content: "";
}
.tabs-campaign .active:before, .tabs-campaign .active:after {
  background: #aaa; 
  
  /* Squares below circles */
  z-index: 1;
}
/* Squares */
.tabs-campaign li:before, .tabs-campaign li:after {
  background: #eee;
  width: 10px;
  height: 10px;
}
.tabs-campaign li:before {
  left: -10px;      
}
.tabs-campaign li:after { 
  right: -10px;
}
/* Circles */
.tabs-campaign li a:after, .tabs-campaign li a:before {
  width: 20px; 
  height: 20px;
  /* Circles are circular */
  -webkit-border-radius: 10px;
  -moz-border-radius:    10px;
  border-radius:         10px;
  background: #fff;
  
  /* Circles over squares */
  z-index: 2;
}
.tabs-campaign .active a:after, .tabs-campaign .active a:before {
  background: #eee;
}
/* First and last tabs-campaign have different
   outside color needs */
.tabs-campaign li:first-child.active a:before,
.tabs-campaign li:last-child.active a:after {
  background: #fff;
}
.tabs-campaign li a:before {
  left: -20px;
}
.tabs-campaign li a:after {
  right: -20px;
}

.left-campaignitem {background: #e6e7e9; height: 593px;}
.header-campaignitem {padding: 24px 5px; border-bottom: 1px solid #ddd;}
.item-campaignmap {font-size: 12px; text-align: center; padding: 15px;}
.item-campaignmap ul li {padding: 10px 0; text-align: left;}
.item-campaignmap ul li.active {color: green}
.item-campaignmap ul li.active > span {color: #777;}

.detail-imgcampaign {display: inline-block; text-align: center; float: left; margin: 10px;}
.detail-imgcampaign a {font-size: 12px;}
.detail-imgcampaign a img {width: 125px; height: 125px; border-radius: 5px;}
.add-campaign {width: 125px; height: 125px; border-radius: 5px; border: 2px dashed #f79524; padding: 40px 10px; font-size: 12px; margin: 10px; display: inline-block; position: relative;}
.add-campaign:hover {cursor: pointer; border-color: #ee277c;}
.add-campaign span {font-size: 30px;}

.filter-campaign {border-radius: 5px; overflow: hidden;}

/* BUTTON CAMPAIGN */
.button-campaign {padding: 15px 0}
.button-campaign ul {margin: 0px; padding: 0px;}
.button-campaign ul li {list-style: none; display: inline-block; margin: 7px 0px;}
.btn-campaign {padding: 7px 15px; border: 1px solid #333; border-radius: 5px; font-size: 14px; color: #333;}
.btn-campaign.active {background-color: #2ecc71; border-color: #2ecc71; color: #fff;}
.btn-campaign i.first {padding-right: 10px;}
.btn-campaign i.last {padding-left: 10px;}

/* ADSET*/
.img-ads {width: 25%; height: auto; text-align: left;}

footer {background-image: linear-gradient(to right, #ee277c, #fd4064, #ff5c4d, #ff7937, #f79524); padding: 25px 0 15px 0; margin-top: 15px;}
.dashboar-footer {margin-top: 0px !important;}
.footer-menu {padding: 0px;}
.footer-menu li {list-style: none; display: inline-block; padding: 0 15px 0 0}
.footer-menu li a {color: #fff; transition: 0.5s; font-size: 12px;}
.footer-menu li a:hover {color: #000;}


/* RESPONSIVE */

@media (max-width: 1200px) {
} 

@media (max-width: 991px) {
  .logo-wrap, .menu-wrap, .acc-wrap  {text-align: center;}
  .menu-link li {margin: 0 1em;}
  .split-wrap {padding: 30px;}

  .split3-section {text-align: center;}
  .ver-line {margin-top: -30px; display: block;}
  .split3-btn {margin-top: 15px;}

  .splitadv1-section {text-align: center;}
  .adv-car {display: none;}
  .madv-car {display: block;}

  .benefit-cont {padding: 5px 20px;}
  .left-benefit {padding: 10px}
  .benefit-cont1, .benefit-cont2, .benefit-cont3, .benefit-cont4 {border: 0.5px solid #f69321; margin: 30px;}

  .splitadv3-section {background: none}
  .road-adv {display: block;}  

  .splitdrv2-section {margin-top: 30px;}
  .drv-right {text-align: center; padding-bottom: 200px;}  

    #sidebar {
        margin-left: -250px;
        transform: rotateY(90deg);
    }
    #sidebar.active {
        margin-left: 0;
        transform: none;
    }
    #sidebarCollapse span:first-of-type,
    #sidebarCollapse span:nth-of-type(2),
    #sidebarCollapse span:last-of-type {
        transform: none;
        opacity: 1;
        margin: 5px auto;
    }
    #sidebarCollapse.active span {
        margin: 0 auto;
    }
    #sidebarCollapse.active span:first-of-type {
        transform: rotate(45deg) translate(2px, 2px);
    }
    #sidebarCollapse.active span:nth-of-type(2) {
        opacity: 0;
    }
    #sidebarCollapse.active span:last-of-type {
        transform: rotate(-45deg) translate(1px, -1px);
    }   

  .spec-day-wrap {padding: 0px;}
  .spec-day {top: 0px; right: 0px; width: 100%;}

  .zone-items {display: block;}
  .tabs-left > .nav-tabs {float: none; width: 100%; height: auto;}
  .tabs-left > .nav-tabs > li {display: inline-block;}
  .tabs-left > .nav-tabs > li > a {}
  .zone-prov > li {width: 45%;}
  .zone-prov {padding: 15px;}
} 

@media (max-width: 767px) {

}
 
@media (max-width: 480px) {
  .createacc {padding: 30px 0px;}
  .nav-tabs > li {width: 100%}
  .tab-pane > div, .tab-pane > div > div > div, .tab-pane > div > div > div > div {padding-left: 0px; padding-right: 0px;}
}

@media (max-width: 320px) {
}