html, body {

  width: 100%;
}

.shadow {
    box-shadow: 0 2px 5px rgba(0,0,0,.10) !important;
}
body {
  margin: 0;
  padding: 0;

  font-size: 14px;
  font-weight: 400;
  overflow-x: hidden;

  /* color: #102c58; */
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

::-webkit-input-placeholder {
  color: #c3c3c3;
}
@font-face {
    font-family: 'google_sansbold';
    src: url('../fonts/googlesans-bold-webfont.woff2') format('woff2'),
         url('../fonts/googlesans-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'google_sansmedium';
    src: url('../fonts/googlesans-medium-webfont.woff2') format('woff2'),
         url('../fonts/googlesans-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'google_sansregular';
    src: url('../fonts/googlesans-regular-webfont.woff2') format('woff2'),
         url('../fonts/googlesans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

a{ text-decoration:none;}
a:hover{ text-decoration:none;}
.bg-green{background: rgb(0,117,58);background: linear-gradient(90deg, rgba(0,117,58,1) 0%, rgba(0,129,64,1) 47%, rgba(0,185,92,1) 100%) !important;}
.bg-black{
background: rgba(17,19,14,1);
background: -moz-linear-gradient(left, rgba(17,19,14,1) 0%, rgba(40,45,32,1) 100%) !important;
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(17,19,14,1)), color-stop(100%, rgba(40,45,32,1))) !important;
background: -webkit-linear-gradient(left, rgba(17,19,14,1) 0%, rgba(40,45,32,1) 100%) !important;
background: -o-linear-gradient(left, rgba(17,19,14,1) 0%, rgba(40,45,32,1) 100%) !important;
background: -ms-linear-gradient(left, rgba(17,19,14,1) 0%, rgba(40,45,32,1) 100%) !important;
background: linear-gradient(to right, rgba(17,19,14,1) 0%, rgba(40,45,32,1) 100%) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#11130e', endColorstr='#282d20', GradientType=1 );

}

.bg-black { background: linear-gradient( 23deg, #11130E, #4A543C); color: #fff;}
.bg-light-green {background: linear-gradient( 23deg, #83A264, #A8CF80);  color: #fff; }
.bg-aqua {background: linear-gradient( 23deg, #7BA87B, #AAE3AA); color: #fff; }
.bg-light-blue {background: linear-gradient( 23deg, #547194, #7396C1); color: #fff;}
.bg-grey {background: #f8f8f8}

.bg-l-green { background:#006F37}
.bg-blue1{ background:#547194}
.bg-l-green{ background:#A8CF80}
.bg-darkgreen {background-color:#006F37;
}


.f-family-poppins{font-family: 'Poppins', sans-serif;}
.f-family-nunito {font-family: 'Nunito', sans-serif;}
.f-family-g-sans-bold {font-family: 'google_sansbold';}
.f-family-g-sans-medium {font-family: 'google_sansmedium';}
.f-family-g-sans-regular {font-family: 'google_sansregular';}

.btn{font-family: 'Poppins', sans-serif; 
   border-radius:5px; text-transform:uppercase; border-width:2px; 
   background:none; color:#4C4C4C; font-weight:600;   -webkit-transition: background 0.2s linear;}
.btn:focus{ box-shadow:none}
.green-border{ border-color:#006F37}
.btn:hover {color: #fff !important;}


.cancel-btn{ background:none; border:solid 2px #707070; border-radius:5px; color:#4C4C4C; }
.cancel-btn:hover{background:#707070 !important;}

.btn-hover {
    width: auto;
 
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    text-align:center;
    border: none;
    background-size: 300% 100%;

    border-radius: 5px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:focus {
    outline: none;
}

.btn-hover.color-1 {
    background-image: linear-gradient(to right, #006F37, #00B95C, #00B95C, #006F37);
    
}
.btn-hover.color-1:active{
    background-image: linear-gradient(to right, #006F37, #00B95C, #00B95C, #006F37);
    
}

.btn-hover.color-2 {
	background-image: linear-gradient(to right, #0174BB, #0174BB, #A0CEEA, #0174BB);
}

.btn-hover.color-2:active {
    background-image: linear-gradient(to right, #11130E, #282D20, #282D20, #11130E);
    
}

.fs-12{font-size:12px;}
.fs-10{font-size:10px;}
.fs-13{font-size:13px  !important;}
.fs-14{font-size:14px;}
.fs-15{font-size:15px;}
.fs-16{font-size:16px;}
.fs-18{font-size:18px;}
.fs-20{font-size:20px !important;}
.fs-22{font-size:22px;}
.fs-24{font-size:24px;}
.fs-26{font-size:26px;}
.fs-28{font-size:28px;}
.fs-30{font-size:30px;}
.fs-32{font-size:32px;}
.fs-34{font-size:34px;}
.fs-36{font-size:36px;}
.fs-38{font-size:38px;}
.fs-40{font-size:40px;}
.fs-42{font-size:42px;}
.fs-44{font-size:44px;}
.fs-46{font-size:46px;}
.fs-48{font-size:48px;}
.fs-50{font-size:50px;}
.fs-52{font-size:52px;}
.fs-57{font-size:57px;}
.fs-80{font-size:80px;}

.text-dark-grey{color:#00171F !important}

.text-grey{ color:#929292 !important}

.text-color-929292{ color:#929292 !important}
.text-color-3D3D3D{ color:#3D3D3D !important}
.text-color-7E7E7E{ color:#7E7E7E !important}
.text-color-373737{ color:#373737 !important}
.text-color-878787{ color:#878787 !important}
.text-color-00171F{ color:#00171F !important}
.text-color-4C4C4C{ color:#4C4C4C !important}
.text-color-53925A{color:#53925A !important}
.text-color-4C5869{color:#4C5869 !important}
.text-color-ababab{color:#ababab}
.text-color-686A6C{color:#686A6C}
.text-color-616161{color:#616161}
.text-color-000000{color:#000000}

.text-color1{color:#547194}
.text-color2{color:#83A264}
.text-color3{color:#292929}
.text-color4{color:#464646}
.text-color5{color:#006F37}

.fw-400{ font-weight:400}
.fw-500{ font-weight:500}
.fw-600{ font-weight:600}
.fw-700{ font-weight:700}
.fw-800{ font-weight:800}

table th{ font-size:16px; font-weight:700;color:#2E2E2E;font-family: 'Nunito', sans-serif;}
table td{ font-size:14px; font-weight:400;color:#3D3D3D;font-family: 'Poppins', sans-serif; padding:15px !important}

.border-color-DFDFDF{ border-color:#DFDFDF !important}
.border-color-3d3d3d{ border-color:#3d3d3d !important}
.border-color-DFDFDF{ border-color:#EBEBEB !important}
.border-color-E8E8E8{ border-color:#E8E8E8 !important}
.border-color-83A264{ border-color:#83A264 !important}
.border-color-547194{ border-color:#547194 !important}
.border-color-006F37{ border-color:#006F37 !important}
.heading-space{ padding-left:102px;}



h1 { font-weight:600;
 
}


h3 {
  font-size: 18px;
}

.u-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.u-input {
  outline: 0;
  border: 1px solid #d0d0d0;
  padding: 5px 10px;
  height: 35px;
  font-size: 12px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background-clip: padding-box;
}

.c-badge {
  font-size: 10px;
  font-weight: 700;
  min-width: 17px;
  padding: 5px 4px;
  border-radius: 100px;
  display: block;
  line-height: 0.7;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #f91605;
}
.c-badge--header-icon {
  position: absolute;
  bottom: -9px;
}

.tooltip {
  width: 120px;
}
.tooltip-inner {
  padding: 8px 10px;
  color: #fff;
  text-align: center;
  background-color: #051835;
  font-size: 12px;
  border-radius: 3px;
}
.tooltip-arrow {
  border-right-color: #051835 !important;
}


.logout:before { content:""; position:absolute; left:0; background:#ccc; width:1px; height:85px; top:0px;
 



}
.header-icons-group .c-header-icon:last-child {
  border-right: 0;
}

.c-header-icon {
  position: relative;
  display: flex;
  float: left;
  width: 70px;
  height: 85px;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  border-right: 1px solid #cccccc;
}
.c-header-icon i {
  font-size: 28px;
line-height: 90px;
width: 70px; z-index:10; position:relative;
height: 85px; text-align:center;
}
.c-header-icon--in-circle {
  border: 1px solid #d0d0d0;
  border-radius: 100%;
}
/* .c-header-icon:hover i {
  color: #f5642d;
} */

.l-header {

  position: fixed;
  top: 0;
  right: 0;  box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
  z-index: 20;
  width: 100%;
  background: #ffffff;
  -webkit-transition: padding 0.5s ease-in-out;
  -moz-transition: padding 0.5s ease-in-out;
  -ms-transition: padding 0.5s ease-in-out;
  -o-transition: padding 0.5s ease-in-out;
  transition: padding 0.5s ease-in-out;
}


.dashboard  h2{ font-size:20px;font-family: 'Poppins', sans-serif; color:#3D3D3D; font-weight:400}

.top-boxes{
  padding: 14px;
  border-radius: 4px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}



.top-boxes .bottom-a {
	float: right;
	margin: 0;
	color: #fff;
	text-decoration: none;
}

.top-boxes ul li{ font-size:14px; color:#fff; font-family: 'Poppins', sans-serif; line-height:30px}
.activity-cards{
  padding-top: 25px;
}
.activity-cards .card-structure{
  width: 100%;
  height: 100%;

  background: #fff;
  border-radius: 5px;

}

.activity-cards .card-structure .top-structure{
  width: 100%;
}
 .top-content{ border-bottom:solid 1px #E3EBF3  ; padding:20px 20px 10px;}


.activity-cards .card-structure .top-structure .right-btn{
  background: none;
  border: none;
  outline: none !important;
  padding: 0;
}
.activity-cards .card-structure .top-structure .right-btn svg{
  height: 17px;
  width: 17px;
  fill: #707070;
}
.activity-cards .card-structure .top-structure .top-content{
  width: 100%; 
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.activity-cards .card-structure .bottom-structure{
  padding: 30px;
}
.activity-cards .card-structure .bottom-structure .activity-design{
  border-left: 1px solid #E4E5E7;
}
.activity-cards .card-structure .bottom-structure .activity-design ul{
  list-style: none;

}
.activity-cards .card-structure .bottom-structure .activity-design ul li{
  position: relative;font-family: 'Nunito', sans-serif; font-weight:400; margin-bottom:40px;
}
.activity-cards .card-structure .bottom-structure .activity-design ul li p{ color:#444444; margin-top:5px; font-family: 'Nunito', sans-serif; }
.activity-cards .card-structure .bottom-structure .activity-design ul li span{
  font-size: 14px; font-family: 'Nunito', sans-serif;
  color: #A08285;
}

.activity-cards .card-structure .bottom-structure .activity-design ul li::before {
	content: '';
	position: absolute;
	width: 22px;
	height: 22px;
	top: 0;
	left: -52px;
  border-radius: 50%;
  opacity: 0.2;
}
.activity-cards .card-structure .bottom-structure .activity-design ul li::after {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	top: 6px;
	left: -46px;
	border-radius: 50%;
	z-index: 1;
}


.activity-cards .card-structure .bottom-structure .activity-design ul li:nth-child(1):before{
  background: #11130E;
  border: 1px solid #707070;
} 
 .activity-cards .card-structure .bottom-structure .activity-design ul li:nth-child(1):after{
  background: #11130E;
  border: 1px solid #707070;
}
.activity-cards .card-structure .bottom-structure .activity-design ul li:nth-child(2):before{
  background: #006F37;
  border: 1px solid #707070;
}
.activity-cards .card-structure .bottom-structure .activity-design ul li:nth-child(2):after{
  background: #006F37;
  border: 1px solid #707070;
}
.activity-cards .card-structure .bottom-structure .activity-design ul li:nth-child(3):before{
  background: #CC5E35;
  border: 1px solid #A8CF80;
}
.activity-cards .card-structure .bottom-structure .activity-design ul li:nth-child(3):after{
  background: #CC5E35;
  border: 1px solid #A8CF80;
}
.activity-cards .card-structure .bottom-structure .activity-design ul li:nth-child(4):before{
  background: #AAE3AA;
  border: 1px solid #707070;
}
.activity-cards .card-structure .bottom-structure .activity-design ul li:nth-child(4):after{
  background: #AAE3AA;
  border: 1px solid #AAE3AA;
}
.activity-cards .card-structure .bottom-structure .activity-design ul li:nth-child(5):before{
  background: #547194;
  border: 1px solid #707070;
}
.activity-cards .card-structure .bottom-structure .activity-design ul li:nth-child(5):after{
  background: #547194;
  border: 1px solid #707070;
}

.canvas-container {
	width: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}
.canvas-container .ratio{ width: 90%;}
.canvas-container .ratio h4{
font-size: 14px;
 color:#444444;
text-align: center; font-family: 'Poppins', sans-serif; font-weight: 600; margin-bottom:30px;
margin-top: 12px;
}
.canvas-container .ratio ul {
	list-style: none;
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	padding-inline: 0;
	padding: 0 20px;
	margin: 0;
}

.canvas-container .ratio ul li {
	position: relative;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
}
.canvas-container .ratio ul li span{
  font-size: 25px; font-family: 'Poppins', sans-serif;  color:#464646
}
.canvas-container .ratio ul li p{
  font-size: 14px; font-family: 'Poppins', sans-serif;  color:#3D3D3D
}
.canvas-container .ratio ul li::before {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	bottom: 22px;
	left: -15px;
}
.canvas-container .ratio ul li:nth-child(1):before{
  background: #547194;
}
.canvas-container .ratio ul li:nth-child(2):before{
  background: #11130E;
}
.canvas-container .ratio ul li:nth-child(3):before{
  background: #006F37;
}

.profile-container{
  width: 100%; margin-bottom:20px;
  display: flex;
}
.profile-container .pro-photo:after{
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  background: #F74344; border:solid 1px #fff;
  bottom: 3px;
  right: 3px;
  border-radius: 50%;
}
.profile-container .pro-photo1:after{
    ontent: '';
  position: absolute; border:solid 1px #fff;
  width: 9px;
  height: 9px;
  background: #62A564;
  bottom: 3px;
  right: 3px;
  border-radius: 50%;

}
.profile-container img {

	height: 51px; border-radius:50%;
	
}
.profile-container .pro-photo{
  width: 51px;
  height: 51px;
  border-radius: 50%;
  position: relative;
}
.profile-container .pro-details{
  margin-left: 20px;
}
.profile-container .pro-details h4{
  font-size: 18px; color:#464646; font-family: 'Poppins', sans-serif; font-weight:400;
}
.profile-container .pro-details span{
  font-size: 14px;font-weight:400;
  color: #9F9F9F; 
}

.line-chart-container{
  background: #fff;
  border-radius: 4px;
  margin-top: 25px;
  padding: 15px 0;
}
.top-options {
	width: 100%;
	
	justify-content: space-between;
	align-items: center;
}
.top-options ul {
	list-style: none;	margin: 0;
     padding:0;
	width: 100%;

}
.top-options ul li{
 font-family: 'Poppins', sans-serif; font-size:14px; color:#464646; line-height:28px
}
.ul-status li{
  position: relative;
}
.ul-status li:before{
  content: '';
  position: absolute;
  height: 9px;
  width: 9px;
  border-radius: 50%;
  left: -15px;
  top: 10px;
}
.ul-status li:nth-child(1):before{
  background: none;
}
.ul-status li:nth-child(2):before{
  background: #547194;
}
.ul-status li:nth-child(3):before{
  background: #11130E;
} 
.ul-status li:nth-child(4):before{
  background: #006F37;
} 
.ul-status1 li:nth-child(1):before{
  background: none;
}
.ul-status1 li:nth-child(2):before{
  background: #11130E;
}
.ul-status1 li:nth-child(3):before{
  background: #83A264;
} 
.ul-status1 li:nth-child(4):before{
  background: #7BA87B;
} .ul-status1 li:nth-child(5):before{
  background: #547194;
} 
.chart-container{
  width: 100%;
  padding: 20px;
  /* background: red; */
}
.payments-section{
  margin-top: 25px;
}
.payments-section .progress-bg {
	background: #fff;
	border-radius: 4px;
	padding: 15px 0;
  width: 100%;
  height: 100%;
  flex-direction: column;
}
.rightsection-progress {
	background: #fff;
	padding-top: 15px;
	height: 100%;
}
.option-container{
  width: 100%;
}
.canvas{

  padding: 0 20px;
}

.inp-design{
  width: 215px;
  height: 38px;
}
.inp-c {
	display: flex;
  flex-direction: column;
  margin-left: 10px; width:200px;
}

.customer-sup .btn-support{ width:40px; height:40px;}
.customer-sup .select2-chosen{ font-size:12px; font-family: 'Poppins', sans-serif; color:#616161;}
.customer-sup .fs-12{ font-size:12px !important;}
.customer-sup .select2-arrow b{background-size: 22%; background-position: right 13px center}
.bottom-table th{ font-family: 'Poppins', sans-serif;}

.emp-table{

  background: #fff;
  border-radius: 4px;

}
.t-btn {
	padding: 6px 14px;
	border-radius: 3px;
}
.btn-support{
  padding: 7px;
  border: none;
  outline: none;
  fill: #fff;
}
.items-count {
	float: right;
	padding: 10px 0;
}
.customer-sup{

  justify-content: space-between;
  align-items: center;
  padding-top: 25px;
}


.customer-sup .btn-support svg{ width:25px; height:25px; fill:#fff;}
.customer-sup .btn-support { position:absolute; right:15px; bottom:0;  border-radius:0px 5px 5px 0}
.customer-sup .form-control{ height:40px;}
.customer-sup .select2-choice{ height:40px !important;}
.customer-sup .select2-chosen{ margin-top:0 !important;}

.bottom-table .table-striped tbody tr:nth-of-type(2n+1) { background-color:#f8f8f8;}
.bottom-table table td{ padding:10px !important; vertical-align:middle}

.progress {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    font-size: .75rem;
    line-height: 1rem;
    text-align: center;
    background-color: #eceeef;
    border-radius: .25rem;
}
.progress-bg .btn{ height:31px;}
.process-activity .bg-primary {
    background-color: #11130E !important;
}
.process-activity .bg-success {
    background-color: #547194 !important;
}
.process-activity .bg-danger {
    background-color: #A8CF80 !important;
}
.process-activity .bg-warning {
    background-color: #006F37 !important;
}

.m-logout svg{ width:20px; height:20px; position:absolute; right:8px; top:-45px; fill:#757575;}



.header .pro-details { margin-left:10px;}

.logo a{ width:160px;}

/*login pannel css*/
.loginbg {
	background: url("../images/login-home.jpg") no-repeat bottom -200px center;
	width: 100%;
	height: 100vh;
	background-attachment: fixed;
	background-size: 100%;
}
.login-content{
background: rgba(0,0,0,0.8);

position: fixed;
top: 0;
left: auto;
right: 0;
max-width: 610px;
padding: 50px 104px;
width: 100%;
}

.wave {
    position: relative;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    z-index: 1;
    color: #384056 !important;
    background-color: #fff;
    border-left: 1px solid #eeeeef;
}

    .wave:hover {
        color: #fff !important;
    }

    .wave:before, .wave:after {
        content: "";
        margin: 0 auto;
        position: absolute;
        top: 50%;
        left: 50%;
        opacity: 0;
        display: block;
        background-color: #000;
        width: 150px;
        height: 150px;
        border-radius: 50%;
       
        color: #fff;
    }
    .wave.over:before {
         -webkit-animation: spread-fadein 1s ease-out;
        animation: spread-fadein 1s ease-out;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
    }
    .wave:hover:before {
        display: block;
        -webkit-animation: spread-fadeout 1s ease-out;
        animation: spread-fadeout 1s ease-out;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
    }

@-webkit-keyframes spread-fadeout {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(0.1);
        transform: translate(-50%, -50%) scale(0.1);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@keyframes spread-fadeout {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(0.1);
        transform: translate(-50%, -50%) scale(0.1);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}





@-webkit-keyframes spread-fadein {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: translate(-50%, -50%) scale(0);
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
}

@keyframes spread-fadein {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: translate(-50%, -50%) scale(0);
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
}
.login-content .btn {
	border: none;
	border-radius: 4px;
	border: solid 0px #fff;
	padding: 14px 33px;
	margin-left: auto;
}
.login-content .form-control{ background:none; border-bottom:solid 1px #fff; border-top:none; border-left:none; border-right:none; height:40px; padding:0; }
.login-content .field label::before { content: attr(title1);   position: absolute;   top: 0;  left: 0px;   line-height: 45px;  color: #fff; transition: 300ms all; }
.login-content .field .input-validation-error { border-top:0px; border-left:0px; border-right:0; border-bottom: 1px solid #d93025; border-radius:0px; }
.login-content .label-before, .login-content .field input:focus + label::before, .login-content .field input:valid + label::before { background:none; color:#fff; left:0; padding:0;}
.login-content .form-control:focus{ box-shadow:none; background:none;}
.login-content .field-validation-error{top:40px}
.login-content .form-control:focus{ border-color:#fff; color:#fff;}
.login-content .valid { color:#fff; border:none; border-bottom:solid 1px #fff; border-radius:0px;}
/*form css*/
.form-control{ height:56px; font-family: 'google_sansregular'; box-shadow: none; font-size:16px; border-color:#CCCCCC; color: #929292;}
.form-control:focus{ box-shadow:none; border-color:#00B359; color: #929292;}
.btn:active{ background:none}
.field-validation-error {  bottom: 0px !important;  color: #d93025;  font-size: 14px;  font-weight: normal;   position: absolute;  top: 56px; }
.validation-error {color:red;}
.input-validation-error { background: #fff url("../images/cross.png") no-repeat scroll right 15px center; border: 1px solid #d93025; transition: all 0s ease-in-out 0s; box-shadow: none;}
.valid {background: #fff url("../images/right.png") no-repeat scroll right 15px center;border: 1px solid #1273eb; transition: all 0s ease-in-out 0s;}
.field { height:75px}
.field label::before { content: attr(title1);   position: absolute;   top: 0;  left: 15px;   line-height: 56px;  color: #929292;  font-size: 16px; transition: 300ms all; font-family: 'google_sansregular'; }
.field input:focus { outline: 0;  border-color: none; }
.field input:valid + label::before { content: attr(data-title1);}
.field input:focus + label::before { color: blue;}
.label-before, .field input:focus + label::before, .field input:valid + label::before {  line-height: 20px; top: -10px; background: #fff;   padding: 0 6px;  color: #00B359; left: 9px; }
.field label {  cursor: text; font-family: 'google_sansregular';}



/*change password*/

.show-pwd{
    width: 25px;
    height: 25px; position:absolute; right:15px; top:15px;
    fill: #878787;

}

.passwd form-control:focus .passworw-match-box{ display:block;}
.passworw-match-box {
    width: 340px;
    background: #fff;
    border:solid 1px #E3E3E3; 
    padding: 13px 20px 4px 20px; display:block;
    position: absolute;
    top: 50% !important; transform:translateY(-55%);
    right: -360px;
}

.passworw-match-box:after, .passworw-match-box:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.passworw-match-box:after {
	border-color: rgba(136, 183, 213, 0);
	border-right-color: #fff;
	border-width: 9px;
	margin-top: -4px;
}
.passworw-match-box:before {
	border-color: rgba(194, 225, 245, 0);
	border-right-color: #E3E3E3;
	border-width: 10px;
	margin-top: -5px;
}

.passworw-match-box p svg{ width:10px; height:10px; fill:#53925A; margin-right:10px;}
.header-icons-group a:hover i{ color:#fff !important;}
/*add account*/
.user{ width:auto;}
.user {margin:auto 0}


.user{ margin-top:10PX;}
.user .pro-details span{ color:#3D3D3D}
.user .pro-details { margin-top:5px;}
.user img{ margin-top:7px;}
.add-account{ background:#E5E5E5; width:90px; height:90px;  margin-bottom:30px;}
.add-account .add { width:25px; height:25px; bottom:0; right:0;}
.add-account .add svg{ width:15px; height:15px; fill:#fff;}
.add-account svg.users{ width:45px; height:85px; fill:#9E9E9E;}

.account .acount-type{ background:#fff; position:absolute; top: -10px;left: 10px;z-index: 10;padding: 0 5px;}
.logoutMobile svg{ width:20px; height:20px;}
.logo{ z-index:50; position:relative; height:85px;}
.account .select2-choice{ border-color:#cccccc !important; font-size:16px;font-family: 'google_sansregular'; color:#929292 !important}
.btn-link:focus{ text-decoration:none;}
/*mangange account*/

.account-type{ border:solid 1px #DFDFDF; width:230px; height:43px;}
.account-type a{ background:#FBFBFC; border-bottom-left-radius:5px; border-top-left-radius:5px; border-right:solid 1px #DFDFDF; padding:11px 10px;}
.account-type .select2-choice{ border:none !important; padding:0px 0px 0 10px !important; height:41px  !important;}
.account-type .select2-arrow b{ background-position:right 5px  center !important;}

.rightside .form-control{ height:43px; padding-left:45px;}
.rightside .form-group{ width:230px; margin-right:10px;}
.rightside ul li{ float:left;}
.rightside ul{ float:right;}
.rightside .form-group .search svg{ width:20px; height:20px; fill:#808995;}
.rightside .form-group .search { position:absolute; top:10px; left:13px;}
.rightside li a{ border-color:#7E7E7E !important; padding:10px 11px;}
.rightside li a svg{ width:20px; height:20px; fill:#7E7E7E; margin-right:10px;}
.rightside .add-btn{ padding:13px;  height:43px; line-height:20px;}
.rightside li a:hover{ border-color:#00B359 !important; color:#00B359 !important;}
.rightside li a:hover svg{ fill:#00B359} 
.rightside li a.btn{ color:#fff !important;  width:auto; padding:12px 20px !important}
.rightside li a.active{ border-color:#00B359 !important; color:#00B359 !important;}
.rightside li a.active svg{ fill:#00B359} 

.alert-roow-tr{border-left:solid 2px #e9aeb8 !important; border-right:solid 2px #e9aeb8 !important;  background:#F3F3F3;position:relative;}

.alert-row td{border:solid 2px #e9aeb8 !important;    border-left: none !important;
    border-right: none !important;}
.alert-row svg.alticon{ left:40px; bottom:-3px; width:25px; height:25px; fill:#E50027; position:absolute; }
/*.alert-roow-tr:after{ position:absolute; content:""; left:0; border:solid 2px #e9aeb8 !important; height:62px; width:100%;}*/



.account-list{ border:solid 1px #EBEBEB; }
 .account-list .table{white-space: nowrap;}
.account-list .table th{ font-size:16px; border-bottom:solid 1px #EBEBEB;  font-family: 'google_sansmedium'; color:#000; font-weight:500;  padding:10px 20px;}
.account-list .table td{ font-size:16px; border-top:solid 1px #EBEBEB;  font-family: 'google_sansregular'; color:#373737; font-weight:400;   padding:10px 20px !important;  vertical-align: middle;}
.account-list .table td .profile-container { margin-bottom:0;}
.account-list  .profile-container img{ width:40px; height:40px;}
.account-list .action a{ border:solid 1px #7B7B7B; width:25px; height:25px; background:#fff; }
.account-list .action a svg{fill:#7B7B7B; width:13px; height:13px;}
.account-list .action a:hover{ background:#4BD964;}
.account-list .action a:hover svg{ fill:#fff}
.account-list .table-striped tbody tr:nth-of-type(2n+1) { background-color: #FCFCFC;}
.account-list .table tr:hover td{ background:rgba(0,177,88,0.1) !important}



.custom-control-input:checked ~ .custom-control-label::before { color: #fff; border-color: #4BD964; background-color: #4BD964;}
.custom-switch .custom-control-label::before{ width:35px; height:22px; border-radius:40px; border-color: #7B7B7B;background-color: #7B7B7B;}
.custom-switch .custom-control-label::after{ width:20px; height:20px; border-radius:15px; left:-34px; top:5px;}
.custom-switch .custom-control-label::after { background:#fff;}
.custom-control-input:focus ~ .custom-control-label::before { box-shadow:none;}


.pagging ul li{ margin:0 5px;}
.pagging ul li a{ width:35px; height:35px; border-radius:5px; font-size:13px; color:#A6A7AD; line-height:16px;}
.pagging ul li a span svg{ width:10px; height:10px; fill:#808495;}
.pagging ul li a span { line-height:10px;}
.pagging ul li a:hover{ background:#00B359; border-color:#00B359; color:#fff;}
.pagging ul li a.active{ background:#00B359; border-color:#00B359; color:#fff !important;}
.pagging ul li a:hover svg{ fill:#fff;}
.pagging ul li.allpage{ width:110px;}
.pagging ul li.allpage .select2-choice{ height:35px; border-color:#E9E9F0 !important; }
.pagging ul li.allpage .select2-chosen{ font-size:13px; line-height:25px; margin-top:0; color:#A6A7AD}
.pagging ul li.allpage .select2-arrow b{ background-position: right 10px center !important; background-size:25% !important;}
.pagging ul li.allpage .select2-choice:hover{ background:none;}


.list-view{ border-color:#EBEBEB !important}
.list-view .tooltip-dot{ position:absolute; right: -5px;top: 45px; background:none; border:none; outline:none;}
.user-edit { width:130px; position: absolute;top: -24px;right: 20px;background: #fff; z-index:10; cursor:auto;}
.user-edit ul li a {width: 25px;height: 25px; border: solid 1px #7B7B7B; border-radius:.25rem; text-align:center; line-height:24px;}
.user-edit ul li a span{ display:block; margin:-22px 0 0 35px;}
.user-edit ul li a svg{width: 13px;height: 13px;fill: #7B7B7B;  position:static; }
.user-edit ul li a:hover svg{fill:#fff;}
.user-edit ul li a:hover{background: #4BD964;}
.user-edit .close svg{width: 15px;height: 20px;fill: #fff }
.user-edit ul{ text-align:left;}
.user-edit .close{ background:#4c4c4c; width:30px; height:30px; display:none; opacity:1; text-align:center; position:absolute; top:-25px; right:-25px;}
.list-view ul li{ width:44%;}
.user-edit ul li{ width:100%;}


.alert{ background:#F3F3F3;  border:solid 2px #e9aeb8 !important}
.alert svg.alticon{ width:25px; height:25px; fill:#E50027; position:absolute;  bottom:-3px; left:70px}




/*department*/
.department .list-view ul li a svg.down-arrow{ width:12px; height:12px; fill:#818A96;}
.department .user-edit ul li a span{ font-weight:normal}
.department .list-view ul li span{ font-weight:700}
.department .list-view ul li span i{ vertical-align:middle}
.department .list-view ul li img{ width:35px;}
.department .employ-view ul li:hover{ background:#f8f8f8;}
.department .employ-view ul li{ padding:5px 15px;}

.employ-view { width:180px; position: absolute;top: 40px;right: 20px;background: #fff; z-index:10; }
.employ-view ul{max-height:500px; overflow-y:auto;}
.employ-view .close-list{ background:#4c4c4c; width:30px; height:30px; line-height:26px; opacity:1; text-align:center; position:absolute; top:-15px; right:-15px;}
.employ-view .close-list svg{width: 15px;height: 20px;fill: #fff !important }
.employ-view ul li{ width:100% !important;}

.add-dpt{ background:#FCFCFC; border-color:#EBEBEB !important}
.add-dpt .plus{ width:50px; height:50px; border:dashed 1px #007B3D}
.add-dpt .plus svg{ width:20px; height:50px; fill:#007B3D}

/*change password*/
.change-password .input-validation-error{ background:#fff; }


/*charger page*/
.accordion-list button{ background:none;}
.accordion-list button.icon{ background:url("../images/minus.png") right center no-repeat; width:100%; text-align:left; padding:13px 0; }
.accordion-list button.collapsed{ background:url("../images/plus.png") right center no-repeat; width:100%; text-align:left; padding:13px 0;}
button:focus{outline:none;}
.accordion-list .pannel{border-bottom:solid 1px #DFDFDF}
.accordion-list .custom-control-label::before{ border-color:#DFDFDF; }
.accordion-list .custom-control-input:checked ~ .custom-control-label::before{ background:none; border-color:#659D6B; border-color:#659D6B;}
.accordion-list .custom-checkbox .custom-control-input:checked~.custom-control-label::after{ border-left:solid 2px #659D6B; border-bottom:solid 2px #659D6B; transform:rotate(-45deg);  width:10px; height:6px; background:none;}
.accordion-list .custom-control-label::after{ top:8px; left:-21px;}
.accordion-list .custom-control-label:focus{color:#00B359 !important}
.accordion-list .custom-control-input:focus{ border:none;}
.accordion-list .custom-control-input:not(:disabled):active~.custom-control-label::before { background:none; border-color:#659D6B;}
.accordion-list .custom-control-input:focus:not(:checked)~.custom-control-label::before { border-color:#DFDFDF;}
#accordionCategory{ padding-right:5px;}

.verticle-border:before{ background:#DFDFDF; content:""; position:absolute; left:35%; width:1px; height:100%; top:0;}

.charger .box{ width:45px; height:45px; line-height:45px; border-style:dashed !important; position:absolute; top:15px; right:15px; }

/*cities*/
.cities .list-view h3{ line-height:33px;}
.cities .m-logout svg{ top:-38px;}
.cities .account-type  a:hover{ color:#4C5869 !important}
.cities .rightside li a.border-right {border-right: solid 1px #DFDFDF !important;}
.cities .select2-chosen{ margin-top:6px !important;}
.cities .account-type .select2-arrow b {background-position: right 10px center !important;}
.cities .rightside .form-control{ border-color:#dfdfdf}


.cities .nav-tabs li a{ border:solid 1px #DFDFDF; border-radius:3px; position:relative;width:175px; display:block; text-align:center; line-height:24px;}
.cities .tab-content ul li a{ font-size:17px; color:#ababab; font-family: 'google_sansregular'; line-height:36px; }
.cities .nav-tabs .nav-link.active{background:#292B27; color:#fff !important;}
.cities .nav-tabs .nav-link.active:after{background:#292B27; width:10px; height:10px; transform:rotate(45deg); content:""; position:absolute; left:50%; right:50%; bottom:-5px;}
.cities .tab-content h4{font-size:18px; color:#4C5869; font-family: 'google_sansmedium';}
.cities .tab-content ul li a.active{ color:#659D6B; font-weight:bold}

.active-menu{ color:#53925A}
.cust-m{margin-left: 3rem;}
.activity-cards .cust-p{padding-left: 3rem !important;padding-right: 3rem !important;}

/*Cars*/
.carAve .title-text{ border:dashed 1px; padding:10px;}
.carAve ul li span{ display:block; line-height:15px;}

.carAve .border1:before{ content:""; position:absolute; background:#ccc; border:dashed 1px #547194 !important; width:10px; height:10px; left:0; right:0; bottom:-6px; margin:auto; transform:rotate(45deg); border:none;}
.carAve .border1:after{ content:""; position:absolute; background:#fff; width:10px; z-index:5;  height:10px; left:0; right:0 ; bottom:-5px; margin:auto; transform:rotate(45deg); border:none;}

.carAve .border2:before{ content:""; position:absolute; background:#ccc; border:dashed 1px #83A264 !important; width:10px; height:10px; left:0; right:0; bottom:-6px; margin:auto; transform:rotate(45deg); border:none;}
.carAve .border2:after{ content:""; position:absolute; background:#fff; width:10px; z-index:5;  height:10px; left:0; right:0 ; bottom:-5px; margin:auto; transform:rotate(45deg); border:none;}

.carAve .border3:before{ content:""; position:absolute; background:#ccc; border:dashed 1px #006F37 !important; width:10px; height:10px; left:0; right:0; bottom:-6px; margin:auto; transform:rotate(45deg); border:none;}
.carAve .border3:after{ content:""; position:absolute; background:#fff; width:10px; z-index:5;  height:10px; left:0; right:0 ; bottom:-5px; margin:auto; transform:rotate(45deg); border:none;}




/*CUSTOMER OVERVIEW*/
.chargerActive{ background:none;}
.chargerActive ul li{ padding-top:24px; width:auto; margin:0; text-align:center; }
.chargerActive ul li .box{ width:85px; height:85px; line-height:85px; border-style:dashed !important; position:relative;  }
.overview .chargerActive ul li .box{ width:85px; height:85px; line-height:85px; border-style:dashed !important; position:static;  }

.overview ul li{ margin:0 30px;}
.overview .charge { border:solid 1px #ccc; padding:10px 10px; width:85px !important;}
.overview .charge:before{ content:""; position:absolute; background:#ccc; width:10px; height:10px; left:0; right:0; bottom:-2px; margin:auto; transform:rotate(45deg); border:none;}
.overview .charge:after{ content:""; position:absolute; background:#fff; width:10px; z-index:5;  height:10px; left:0; right:0 ; bottom:2px; margin:auto; transform:rotate(45deg); border:none;}


/*buildings*/
.chaerger-building .title{ border:dashed 1px #547194; width:150px ;height:150px; line-height:150px;}
.chaerger-building .detail p{ vertical-align:middle; }
.chaerger-building .bdr-color{border:dashed 1px #83A264;}

 .charge {line-height: 30px; border: dashed 1px #547194; padding: 10px 45px;}
 .charge::after, .charge::before {
    right: 0;
    left: 0;
    margin: auto;
       
    top: 100%;
    border: dashed transparent;
        border-top-color: transparent;
        border-top-width: medium;
        border-right-color: transparent;
        border-right-width: medium;
        border-bottom-color: transparent;
        border-bottom-width: medium;
        border-left-color: transparent;
        border-left-width: medium;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
 .charge::before {
        border-color: rgba(194, 225, 245, 0);
         background: rgba(194, 225, 245, 0);
        border-right-color: rgba(194, 225, 245, 0);
        border-right-color: #fff;
        border-width: 10px;
        margin-top: -4px;
        transform: rotate(-90deg);
        z-index:5
    }
 
.charge::after {
    background: #547194;
    border-color: #547194;
    border-right-color: #547194;
    border-right-color: #547194;
    border-width: 4px;
    margin-top: -2px;
    transform: rotate(-45deg);

}
.meters {line-height: 30px; border: dashed 1px #547194; padding: 10px 45px;}
.meters::after, .meters::before {
    right: 0;
    left: 0;
    margin: auto;
       
    top: 100%;
    border: dashed transparent;
        border-top-color: transparent;
        border-top-width: medium;
        border-right-color: transparent;
        border-right-width: medium;
        border-bottom-color: transparent;
        border-bottom-width: medium;
        border-left-color: transparent;
        border-left-width: medium;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
 .meters::before {
        border-color: rgba(194, 225, 245, 0);
         background: rgba(194, 225, 245, 0);
        border-right-color: rgba(194, 225, 245, 0);
        border-right-color: #fff;
        border-width: 10px;
        margin-top: -4px;
        transform: rotate(-90deg);
        z-index:5
    }
.meters::after {
    background: #547194;
    border-color: #547194;
    border-right-color: #547194;
    border-right-color: #547194;
    border-width: 4px;
    margin-top: -2px;
    transform: rotate(-45deg);

}
.status {line-height: 30px; border: dashed 1px #006F37; padding: 10px 45px;}
.status::after, .status::before {
    right: 0;
    left: 0;
    margin: auto;
       
    top: 100%;
    border: dashed transparent;
        border-top-color: transparent;
        border-top-width: medium;
        border-right-color: transparent;
        border-right-width: medium;
        border-bottom-color: transparent;
        border-bottom-width: medium;
        border-left-color: transparent;
        border-left-width: medium;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
 .status::before {
        border-color: rgba(194, 225, 245, 0);
         background: rgba(194, 225, 245, 0);
        border-right-color: rgba(194, 225, 245, 0);
        border-right-color: #fff;
        border-width: 10px;
        margin-top: -4px;
        transform: rotate(-90deg);
        z-index:5
    }
.status::after {
    background: #006F37;
    border-color: #006F37;
    border-right-color: #006F37;
    border-right-color: #006F37;
    border-width: 4px;
    margin-top: -2px;
    transform: rotate(-45deg);

}
.seprator-charge{ position:absolute; width:100%; top:50%; transform:translateY(-50%); background:#e8e8e8; height:1px; left:0; right:0; }

.setupfee li{ border:dashed 1px #547194; width:47.8%;}
.setupfee li.border-green{ border:dashed 1px #83A264; width:47.8%;}

.charger-status .status,.charger-status .meters,.charger-status .charge{ padding:20px 50px;}
.card-structure.charger-status{ height:auto;}

.building-grapgh .count1{ position:absolute; left:0; right:0; top:-35px;}
.building-grapgh .count2{ position:absolute; left:0; right:0; bottom:35px;}
.building-grapgh ul li::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    bottom: 22px;
    left: -15px; top:6px;
}
.building-grapgh ul li{ position:relative;}
.building-grapgh ul li:nth-child(1)::before {
    background: #547194;
}
.building-grapgh ul li:nth-child(2)::before {
    background: #83A264;
}
.building-table .table-striped tbody tr:nth-of-type(2n+1) {
    background-color: #FCFCFC;
}
.building-table .bottom-table td{ padding:15px !important;}
.building-table .bottom-table th{ font-weight:normal}
.dd-arrow{ position:absolute; right:10px; top:0}
  .dd-arrow .select2-choice{  padding:0px !important; border:none !important; background:none  !important; height:35px  !important;}
  .dd-arrow  .select2-container{width:auto !important;}
   .dd-arrow  .select2-chosen{ margin-top:0px !important;}
  .dd-arrow  .select2-arrow b {background:url('../images/select2-arrow.png') no-repeat right 10px center !important;}
  .dd-arrow  .select2-arrow {background:none !important; height:32px  !important;}
  .dd-arrow .select2-drop-active{ border:solid 1px #ccc !important;}
  /*location detail page*/

.contect-detail{ background:#fff; width:525px; z-index:10;   position: absolute;top: 0px;padding-top: 20px;height: 100%;  height: calc(100vh - 33px);left: 245px; transition: 0.5s;}
.contect-detail h2{ font-size:18px;}
.contect-detail .close{ background:#fff; width:30px; height:30px; display:block; text-align:center; position:absolute; top:80px; right:-30px; line-height:22px; opacity:1}
.contect-detail .close svg{ width:15px; height:15px; fill:#000000}
.contect-detail .charger-total{ line-height:36px;}
.contect-detail .charger-total:before{ content:""; width:10px; height:10px; position:absolute; left:-5px; top:12px; transform:rotate(45deg); border-left:solid 1px #C7C7C7;  border-bottom:solid 1px #C7C7C7; background:none; }
.contect-detail .charger-total:after{ content:""; width:10px; height:10px; position:absolute; left:-3px; top:12px; transform:rotate(45deg); background:#fff; }
.contect-detail .top-head ul li span.map-icon{ border:solid 1px #6546BE; width:28px; height:28px;}
.contect-detail .top-head ul li span.map-icon svg{ width:20px; height:20px; fill:#6546BE}
.contect-detail .chargerActive{ background:none;}
.contect-detail .chargerActive ul li{ padding-top:24px; width:48%;}
.contect-detail .chargerActive ul li .box{ width:65px; height:65px; line-height:65px; border-style:dashed !important; }



.openmap{ background:#fff; width:30px; height:30px; display:block; text-align:center; position:absolute; top: 150px;
left: 245px; line-height:26px; opacity:1;}
.openmap svg{ width:15px; height:15px; fill:#000000}

.contect-detail{left:-100%;transition:all 0.5s;}
.contect-detail.active{left:245px !important;}

.mapdetail iframe{ width:100%; height:100vh; margin:0}
.mapdetail{ position:absolute; top:0px; left:245px; width: calc(100% - 245px);}
.mapdetail .gm-control-active, .mapdetail .gm-svpc { display:none;}


.mapRightBar{ background:#fff;box-shadow: 0px 5px 10px rgba(0,0,0,0.1); max-width:300px; margin-left: auto; margin-right:35px; margin-top:25px;}
.mapRightBar .select2-choice{ height:40px !important;}
.mapRightBar .select2-chosen{ margin-top:0px !important}
.mapRightBar .seprator{ }
.mapRightBar  .form-group .search {position: absolute; top: 7px;  right: 13px;}
.mapRightBar .form-group .search svg { width: 20px; height: 20px; fill: #808995;}
.mapRightBar .form-group .form-control{ height:40px;}
.mapRightBar .dd-list li{ border-bottom:solid 1px #E2E2E2; padding:10px 0}
.mapRightBar .dd-list li span{ border:solid 1px #808995; border-radius:50%; width:25px; height:25px; text-align:center; line-height:23px; margin-right:10px; float:left;}
.mapRightBar .dd-list li:hover{color:#00B359; cursor:pointer}
.mapRightBar .dd-list li:hover span{color:#00B359 !important; border-color:#00B359}
.mapRightBar .dd-list li.detail{color:#00B359; cursor:pointer}
.mapRightBar .dd-list li.detail span{color:#00B359 !important; border-color:#00B359}

.mapRightBar .counter{ position:absolute; right:0; border-left:solid 1px #DFDFDF; padding:8px; top:0; width:45px;}
.mapRightBar .counter.bdr{ border-color:rgba(255,255,255,0.2)}



.get-nicer { overflow: auto; height: 280px; }
.nicescroll-rails { background-color: rgb(51, 122, 183);}
.nicescroll-cursors {border: none !important; background-color: #000 !important;  border-radius: 0 !important; }
.jumbotron {  padding-top: 80px;}

.scroll-holder {
    height: 275px; 
}

.h-411{ height:411px;}
.building-grapgh img{ width:350px;}

  /* Custom styles to match your form */
  .form-group.field {
    margin-bottom: 1rem;
}
.form-control {
    background: transparent;
    border: none;
    border-bottom: 1px solid white;
    color: white;
    font-size: 16px;
    padding: 5px 0;
}
.form-control:focus {
    outline: none;
    box-shadow: none;
    border-bottom: 2px solid #007bff;
}
label {
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.2s;
    color: white;
    font-size: 16px;
}
.form-control:focus + label,
.form-control:not(:placeholder-shown) + label {
    top: -15px;
    font-size: 16px;
    color: #007bff;
}
.invalid-feedback {
    display: none;
    color: #dc3545;
    font-size: 16px;
}
.form-control.is-invalid ~ .invalid-feedback {
    display: block;
}
.btn-primary {
    background-color: #007bff;
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    color: #fff;
}
.btn-primary:hover {
    background-color: #0056b3;
}

.icon_menu {
	height: 25px;
	vertical-align: middle;
	width: 25px;
	padding-right: 5px;
	margin-top: -5px;
}

@media only screen and (max-width: 1660px) {
    .heading-space { padding-left: 128px;}
    .list-view ul li {width: 42%;}
    .column-3{ max-width:33%; flex:0 0 33%;}
    .column-2{ max-width:50%; flex:0 0 50%;}
    
    .user-edit ul li {width: 100%;}
    .account-list .col-lg-3:nth-of-type(3n+3) { padding-right:0;}
  .cities .nav-tabs li a{ width:auto; padding:10px;}
  .verticle-border::before { left:36%;}
  .c-bdr::before { left: 36.9%;}
  .overview ul li {margin: 0 20px;}

  .setupfee li{  width:47%;}
  .setupfee li.border-green{ width:47%;}
.setupfee h4{ font-size:25px;}
.charger-status .status, .charger-status .meters, .charger-status .charge {padding: 10px 30px;}



}


@media only screen and (max-width: 1440px) {
.list-view ul li {  width: 42%;}
.alert svg.alticon {width: 20px;    height: 20px; left: 65px;}
.user-edit ul li { width: 100%;}
.heading-space {padding-left: 141px;}
.colum-5{ max-width:40%; flex:40%}
.account-list .col-lg-3:nth-of-type(3n+3) { padding-right: 3px;}
.verticle-border::before {left: 38%;}
.cities .account-type{ width:200px;}
.cities .rightside .form-group{ width:160px;}
.canvas-container .ratio {width: 100%;} 
.cust-m{margin-left: 20px;}
.bottomTable{white-space: nowrap; display: block; width: 100%;  overflow-x: auto;}
.overview ul li { margin: 0 10px;}
.c-bdr::before {left: 38.2%;}
.setupfee li{  width:45%; }
  .setupfee li.border-green{ width:45%;}

.setupfee li p{ font-size:13px;}
.setupfee li.border-green p{ font-size:13px;}
.setupfee h4 {font-size: 18px}
.chaerger-building .title{ font-size:60px;}
.chaerger-building .fs-57{ font-size:40px;}
.charger-status .status, .charger-status .meters, .charger-status .charge {padding: 10px 20px;}
.building-grapgh img { width: 310px;}
.build-sec .activity-design ul li{ margin-bottom:25px !important; margin:0;}


}

@media only screen and (max-width: 1366px) {
.heading-space {padding-left: 148px;}
.cities .nav-tabs li a{ font-size:13px;}
.verticle-border::before {left: 39%;}
.canvas-container .ratio ul {padding: 0 0px;}
.cust-m{margin-left: 5px;}
.activity-cards .cust-p{padding-left: 3rem;padding-right: 3rem;}
.overview ul li { margin: 0 5px;}

.charge, .meters{ padding:10px 30px;}
.setupfee h3{ font-size:20px;}

.chaerger-building .detail p{ font-size:14px !important}
.setupfee li p {font-size: 12px;}
.setupfee li.border-green p {font-size: 12px;}
.setupfee h4 {font-size: 15px;}
.building-grapgh img {width: 275px;}
}
@media only screen and (max-width: 1280px) {
.heading-space { padding-left: 154px;}
.list-view ul li {width: 38%;}
.user-edit ul li {width: 100%;}
.account-list .col-lg-3:nth-of-type(3n+3) {padding-right: 5px;}
.verticle-border::before {left: 40.5%;}
.dashboard h2 {font-size: 18px;}
.payments-section .cust-m{margin-left: 0px;}
.activity-cards .cust-p {	padding-left: 27px !important;padding-right: 27px !important;}
.p-custom{padding: 0;}
.overview ul li { margin: 0px;}
.c-bdr::before {left: 40%;}

.carAve .title-text{ font-size:15px;}

.cars .verticle-border::before {
    left: 24%;
}


}

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

.heading-space {padding-left: 35px;}
.login-content{top: 50%;transform: translateY(-50%);right: 0;max-width: 610px;padding: 50px 104px;height: 600px !important;left: 0;}
.rightside ul{ float:none;}
.rightside ul li{ float:none;}
.c-header-icon{ width:60px;}
 .add-account{ margin:0 auto 30px}
.verticle-border::before {left: 30%;}
.cities .account-type {width: 230px;}
.cities .rightside .form-group{ width:230px;}
.activity-cards .cust-p {padding-left: 37px !important;padding-right: 37px !important;}
.mapdetail{ left:0;width: calc(100% - 0%);}
.contect-detail{ width:400px;}
.contect-detail.active {left: 0px !important;}
.openmap{ left:0; top:90px; z-index:10;}
.building-grapgh img { width: 250px;}
.setupfee li { width: 46%;}
.setupfee li.border-green { width: 46%;}
}



@media only screen and (max-width: 999px) {
.passworw-match-box { position: fixed !important; bottom: 110px;  transform: inherit; right: 0; z-index: 10;  top: auto !important; left: 0; margin: auto; }
.profile-container .pro-details span {font-size: 13px;}
.account-type {margin: auto;}
.loginbg {background: url("../images/login-home-m.jpg") center no-repeat; background-size: cover; }
.heading-space {padding-left: 40px;}
.column-3{ max-width:50%; flex:0 0 50%;}
.account-list .col-lg-3:nth-of-type(3n+3) {padding-right: 15px;}
.cities .account-type {width: 220px;}
.cities .rightside .form-group{ width:220px;}
.verticle-border::before {left: 33%;}
.wrapper {margin-left: 24px !important;}
.activity-cards .cust-p {padding-left: 28px !important;padding-right: 28px !important;}
.activity-cards .card-structure .bottom-structure {padding: 22px;}
.dashboard h2 {font-size: 17px;}
.customer-sup .btn-support{ right:0;}
.overview ul li { margin: 0 10px;}
.c-bdr::before { display:none;}
.h-411 {height: auto;}

.setupfee li { width: 48%;}
.setupfee li.border-green { width: 48%;}
}

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

.colum-5 { max-width: 50%; flex: 50%;}

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

  .wrapper {margin-left: 15px !important;}
  .activity-cards .cust-p {padding-left: 28px !important;padding-right: 28px !important;}
  .activity-cards .card-structure .bottom-structure {padding: 22px;}
  .dashboard h2 {font-size: 17px;}
  .cus-p2{padding-right: 20px;}

}






@media only screen and (max-width: 767px)
{
.passworw-match-box::after, .passworw-match-box::before{ top:auto; left:0; right:0; margin:auto}
.passworw-match-box::before { border-color: rgba(194, 225, 245, 0);  border-bottom-color: rgba(194, 225, 245, 0);border-bottom-color: #E3E3E3; border-width: 15px; margin-top: -43px;}
.passworw-match-box::after {border-color: rgba(136, 183, 213, 0);  border-right-color: rgba(136, 183, 213, 0); border-bottom-color: #fff; border-width: 13px; margin-top: -26px; top:0}
.login-content {
	max-width: 90%;
	padding: 35px;
	height: auto;
}
.account-list { width: 100%; overflow-x: auto;}
.fs-26 {font-size: 23px;}
.list-view ul li { width: 45%;}
.grid{ overflow-x: inherit;}
.user-edit ul li { width: 100%;}
.colum-5{ max-width:100%; flex:100%}
.verticle-border::before { display:none;}
.customer-sup .btn-support {right: 15px;}
.setupfee li {width: 46%;}
.setupfee li.border-green { width: 46%;}
.dd-arrow{ position:relative; right:0;}
.ul-status1 li{ padding-right:20px;}
.contect-detail{position:relative;}
#map_div2{height: calc(500px + 100vh) !important;}
.mapRightBar{ max-width:92%; margin:30px 15px 30px;}

    .column-2{ max-width:100%; flex:0 0 100%;}
}
@media screen and (max-width: 575px)
{    
.wrapper{ margin-top:100px !important; margin-bottom: 50px;} 
.logo-login img{ width:200px;}
.account-type{ width:254px;}
.rightside .form-group{ width:auto;}
.rightside li.w-74{ width:74%; margin-right:0;}
.rightside li a{ padding:12px 14px}
.pagging ul li { display:inline-block; margin-bottom:5px;}
.pagging ul{ display:block;}
.rightside .form-group{ margin-right:0px;}
.column-3{ max-width:100%; flex:0 0 100%;}
.heading-space { padding: 15px;}

.cities .rightside ul li{ width:100%;}
.cities .account-type { width: auto;}
.cities .rightside .form-group {width: auto;}
.customer-sup .btn-support {
	position: absolute;
	right: 50%;
	bottom: -73px;
	border-radius: 5px;
	padding: 10px 58px 33px 43px;
	margin: 0;
	transform: translateX(50%);
}

.contect-detail { width: 325px;}
.mapRightBar{ max-width:88%;}
}
@media(max-width: 481px){
  .account-type {
    width: 100%;
}
.account-type a{min-width: 110px;}
.account-type .custom-selectbox-record-num-form-control{width: 100% !important}
.rightside li.w-74{width: 100%}
.list-inline-item:not(:last-child){ width: 47%;}
.rightside ul li{width: 100%}
.rightside li a.btn{display: block;}
}