@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
@import url('bootstrap.min.css');
@import url('lineicons.css');
@import url('bootstrap-toggle.min.css');

* {
	margin: 0;
	padding: 0;
}

body {
	color: #000;
	font-size: 14px;
	font-weight: 400;
	background: #F5F5F5;
	line-height: 1.4;
	overflow-x: hidden;
	font-family: 'Poppins', sans-serif;

}

.mainwrapp,
body,
html {
	height: 100%;
}

a,
i,
.btn,
button,
img,
span,
.dropdown-item,
.hover-translate {
	-webkit-transition: all 0.3s ease-in-out 0s;
	-moz-transition: all 0.3s ease-in-out 0s;
	-ms-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}

dl,
ol,
ul {
	margin-bottom: 0;
}

a {
	color: #777575;
	text-decoration: none;
}

.form-control:focus,
.form-select:focus {
	border-color: inherit;
	box-shadow: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	padding-bottom: 20px;
	margin: 0;
}

h1 {
	font-size: 46px;
	font-weight: 700;
}

h2 {
	font-family: 'Poppins';
	font-weight: 900;
	font-size: 32px;
	line-height: 48px;
	color: #000000;
}

h3 {
	font-weight: 500;
    font-size: 14px;
}

p {
	line-height: 1.5;
	padding-bottom: 20px;
	margin: 0;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #DBDADA;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #DBDADA;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #DBDADA;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    #DBDADA;
}
img {
	max-width: 100%;
	vertical-align: middle;
}
 

.container {
	max-width: 1367px;
}

.whitebg {
	background: #fff;
	box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
	border-radius: 20px;
}

input:focus {
	outline: 0;
}

/* menu */
.mobile-menu {
	display: none;
	padding: 10px 15px 0 0;
	text-align: right;
	z-index: 1;
	position: relative;
}

.mobile-menu a {
	display: inline-block;
	background: #000;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	line-height: 30px;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	margin: 0 0 0 auto;
}

.mobile-menu a span {
	display: block;
	height: 2px;
	background-color: #FFF;
	margin: 2px auto;
	border-radius: 5px;
	width: 16px;
}

/* =============================== leftpanel */

.leftpanel {
	background: #000;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: 280px;
	border-radius: 0 40px 40px 0;
	-webkit-transition: all 0.5s ease-in-out 0s;
	-o-transition: all 0.5s ease-in-out 0s;
	transition: all 0.5s ease-in-out 0s;
	z-index: 9999999;
}
.leftpanel .dropdown .dropdown-menu{
    position: relative !important; 
    transform: inherit !important;
}
.logouttxt {
	position: absolute;
	bottom: 88px;
}

.leftpanelbg {
	padding: 60px 0 0 0;
}

.leftpanelbg ul {
	padding: 0;
	overflow-y: auto;
}

.leftpanelbg .logo {
	font-weight: 900;
	margin: 0 auto 72px auto;
}

.leftpanel .leftpanelbg ul li a {
	font-weight: 500;
	color: #7F7F7F;
	border-left: 5px solid transparent;
	border-radius: 0;
	font-size: 14px;
}

.leftpanel .leftpanelbg ul li a img {
	margin: 0 30px 0 0;
}

.leftpanelbg ul li a i {
	margin: 0 29px 0 0;
}

.leftpanel .leftpanelbg ul li a.active,
.leftpanel .leftpanelbg ul li a:hover {
	position: relative;
	background: transparent;
	border-left: 5px solid #fff;
	filter: brightness(0) invert(1);
}

.leftpanel .leftpanelbg .dropdown-menu-dark {
    color: #000;
    background-color: #DBDADA;
    border-color: #DBDADA;
	border-radius: 0;
}
.leftpanel .leftpanelbg ul li .dropdown-menu li a {
    color: #000;
    font-weight: 400;
	padding: 10px 30px 10px 90px;
	filter: opacity(60%);
	border: 0;
}
.leftpanel .leftpanelbg ul li .dropdown-menu li a:hover, 
.leftpanel .leftpanelbg ul li .dropdown-menu li a.active {
    color: #000; 
	filter: opacity(100%);
	border: 0;
}
 
.leftpanel .leftpanelbg ul li .dropdown-menu li a img{
	width: 12px;
	height: 12px;
}
.leftpanel .leftpanelbg ul li.dropdown .dropdown-toggle::after { 
    vertical-align: middle;
    content: ">";
    border-top: 0; 
    font-size: 20px;
	rotate: -90deg;
	right: 20px;
    position: absolute;
}
.leftpanel .leftpanelbg ul li.dropdown .dropdown-toggle.show::after {  
    content: ">"; 
	rotate: 90deg;
}
.leftpanelbg ul li a.active:after {
	display: block;
}

.leftpanelbg ul li a {
	padding: 15px 30px 15px 72px;
}

/* =============================== rightwrapp */
.rightwrapp {
	padding: 75px 64px 20px 344px;
}


/******              LOGIN           ******/
.loginmain {
	background: #F5F5F5;
}

.loginwrapp {
	height: 100%;
}

.loginffield {
	width: 100%;
	max-width: 500px;
	max-height: 500px;
	background: #000000;
	border-radius: 30px;
	margin: 0 auto;
	padding: 55px 136px 109px 136px;
}

.loginffield h1 {
	font-weight: 900;
	font-size: 28px;
	color: #FFF;
	padding: 0 0 80px 0;
}

.loginffield input {
	background: #FFFFFF;
	box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 300;
	text-align: center;
	padding: 11px 0;
}

.loginffield .form-group {
	margin: 0 0 26px 0;
}

.logintxt button {
	border: 1px solid;
	padding: 11px 45px;
	background: #FFFFFF;
	border-radius: 15px;
	font-weight: 500;
	font-size: 15px;
	color: #000;
}

.logintxt button:hover {
	background: #000;
	color: #fff;
}


/* Dashboard *********************************************PAGE*/
.headtxtlft h2 {
	padding: 0;
}

.headtxtlft p {
	font-weight: 300;
	font-size: 15px;
	padding: 0;
}

.headtxtryt p {
	font-weight: 700;
	font-size: 14px;
	color: #7F7F7F;
	max-width: 166px;
	padding: 0 24px 0 0;
	text-align: right;
}

.headtxtryt input {
	background: #FFFFFF;
	box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.05);
	border-radius: 20px; 
	border: 0;
	padding: 20px 18px;
	color: #7F7F7F ;
}

.card-body {
	padding: 24px 24px 10px 24px;
	min-height: 150px;
}

.card-body h6 {
	font-weight: 500;
	font-size: 15px;
	padding: 0 0 10px 0;
}

.card-body h3 {
	font-weight: 800;
	font-size: 40px;
	padding: 0;
}

.card-body span {
	font-weight: 200;
	font-size: 10px;
}

.dash-data {
	margin: 0 -15px 44px -15px;
}

.headtxt {
	margin: 0 0 52px 0;
}

.bar-graph {
	margin: 0 0 46px 0;
}

.subhead h2 {
	padding: 0 0 35px 0;
}

.alertstable tr td {
	padding: 17px 0;
	vertical-align: middle;
}

.pendingclr {
	color: #7F7F7F;
}

.timrclr {
	color: #DBDADA;
}

.alertstable tr td.usericon {
	padding-left: 93px;
}

.alertstable tr:first-child td {
	padding-top: 55px;
}

.alertstable tr:last-child td {
	padding-bottom: 55px;
}


/* Customers #2 *********************************************PAGE*/
.searchmain {
	margin: 0 0 30px 0;
}

.searchinput {
	background: #FFFFFF; 
    box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    position: relative;
    display: flex;
    max-width: 288px;
	width: 100%;
}

.searchinput input,
.searchinput select {
	font-size: 14px;
	border: 0;
	width: 83%;
	border-radius: 10px;
	padding: 6px 20px;
	width: 100%;
	color: #7F7F7F ;  

}

/* .searchinput input  { 
    box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.2);
} */
/* .searchinput select {
	box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
} */

.searchinput input {
    padding-top: 8px;
    padding-bottom: 7px;
    background: none;
}

.searchmain .col-md-6 {
	padding-left: 0;
}

.searchinput.searchselect {
	background-image: url(../img/select-arrow.png);
	background-color: #FFF;
	background-repeat: no-repeat;
	background-position: right;

}

.searchinput select {
	background: transparent;
	padding-left: 43px;
	-webkit-appearance: none;
}

.searchinput input:focus,
.searchinput select:focus {
	outline: 0;
}

.searchinput input::placeholder {
	color: #DBDADA;
}

.common-btn {
    background: #7F7F7F;
    color: #FFFFFF;
    border-radius: 10px;
    border: 0;
    font-weight: 400;
    font-size: 14px;
    padding: 7px 10px;
    display: inline-block;
    max-width: 333px;
    text-align: center;
    width: 100%;

}

.common-btn:hover {
	background: #000;
	color: #FFFFFF;
}

.notification-in-sl .common-btn {
	margin-left: 64px;
}

.notification-in-sl .searchinput {
	width: 100%;
}

.customerstable tr:hover td {
	background: #dadada;
}

.edittxt {
	color: #292D32;
}

.customerstable tr th {
	background: #7F7F7F;
	color: #FFF;
	font-weight: 600;
}

.customerstable tr th,
.customerstable tr td {
	padding: 10px 0;
}

.customerstable tr:hover {
	cursor: pointer;
}

.customerstable tr:nth-child(even) {
	background: #F5F5F5;
}

.customerstable tr:nth-child(odd) {
	background: #fff;
}

.customerstable tr th:first-child {
	border-radius: 10px 0 0 0;
}

.customerstable tr th:last-child {
	border-radius: 0 10px 0 0;
}

.customerstable tr:last-child td:last-child {
	border-radius: 0 0 10px 0;
}

.customerstable tr:last-child td:first-child {
	border-radius: 0 0 0 10px;
}

.customerstable tr .numbertxt {
	width: 20%;
	text-align: center;
}

/* Alerts *********************************************PAGE*/

.searchselect {
	box-shadow: none;
}

.searchselect button i {
	font-size: 22px;
	color: #FFF;
}

.searchinput button {
    background: #DBDADA;
    border-radius: 10px;
    border: 0;
    width: 34px;
    height: 34px;
}

/* Usage Data *********************************************PAGE*/
.usagetd tr td:nth-child(4) {
	width: 20%;
}

.usagedatawrapp .detailtxt {
	margin: 0 0 40px 0;
}

/* Notification *********************************************PAGE*/
.notificationwrapp {
	padding-bottom: 70px;
}

.notification h3 {
	padding: 0 0 34px 0;
	width: 100%;
}

.notificationm {
	margin: 0 0 92px 0;
}

.toggle.ios,
.toggle-on.ios,
.toggle-off.ios {
	border-radius: 20px;
}

.toggle.ios .toggle-handle {
	border-radius: 20px;
}

.box-bg {
    background: #F5F5F5;
    border-radius: 10px;
    padding: 36px;
    margin: 0 0 20px 0;
}

.notification-toggle .toggle.btn {
	min-width: 44px;
	min-height: 24px;
	border-color: #000000;
}

.notification-toggle .toggle-off.btn {
	padding-left: 0;
	z-index: 2222222;
	background: #fff;
	border-radius: 100%;
	width: 20px;
	height: 20px;
	right: 0;
	left: 21px;
	top: 1px;
}

.notification-toggle .toggle-off {
	position: absolute;
	top: 9px;
	bottom: 0;
	font-size: 0;
	right: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
}

.notification-toggle .toggle-on {
	background-color: #000;
	border-color: #000;
}

.notification-toggle .btn-default.off {
	background: #DBDADA;
	border-color: #DBDADA;
}

.notification-toggle .btn-default.off .toggle-off.btn {
	left: 44px;
}

.notification-toggle-wrapp {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.n-t-col {
	padding: 0 0 14px 0;
    width: 100%;
}

.black-btn { 
	background: #7F7F7F;
    color: #FFFFFF;
    border-radius: 10px; 
    border: 0;
    font-weight: 400;
    font-size: 14px;
    padding: 7px 20px;
    display: inline-block; 
    text-align: center; 
}

.bg-black { 
	background: #000 !important;
}
 

.black-btn:hover { 
	background: #000;
}
.toggle-text {
	font-weight: 300;
    font-size: 14px;
    color: #000;
    margin: 0 0 0 10px; 
}

.black-btn:hover {
	color: #fff;
}

/* Settings *********************************************PAGE*/

.settings-row .input-group {
	background: #F5F5F5;
	box-shadow: inset 1px 4px 10px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
}

.settings-row .input-group-text {
	font-weight: 500;
	font-size: 12px;
	color: #000;
	background: #D9D9D9;
	border-radius: 10px 0px 0px 10px;
}

.settings-row .input-group input {
	padding: 0.7rem 0.5rem;
	font-weight: 300;
	font-size: 12px;
	border: 0;
	background: none;
	text-align: center;
}

.settings-row .input-group input::placeholder {
	color: #DBDADA;
}

.settings-row .input-group {
	margin: 0 30px 0 0;
}

/* Customers #2 *********************************************PAGE*/
.detailedit {
	margin: 0 0 14px 0;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
            align-items: center;
}
.detailedit.address-text{
	-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;
}

.detailedit label {
	font-weight: 400;
	font-size: 14px;
	display: block;
	padding: 0 0 0 0;
	width: 25%;
	max-width: 107px;
}

.detailedit input,
.detailedit textarea {
	background: #F5F5F5;
    box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    border: 0;
    width: 75%; 
	max-width: 321px;
    padding: 7px 12px;
	color: #7F7F7F ;
}
.detailedit textarea{
	height: 173px;
}

.cancelbtn a.white-btn {
	background: #F5F5F5;
	border: 3px solid #000000;
	border-radius: 20px;
	padding: 9px 48px;
	font-weight: 700;
	font-size: 20px;
	color: #000000;
	display: inline-block;
	margin: 42px 0 0 0;
}

.txtarea {
	margin: 0 0 70px 0;
}

/* Modal *****************************/
.modalwrapp .modal-title {
	padding: 0;
	font-weight: 700;
	font-size: 32px;
}

.modalwrapp .modal-dialog {
	display: flex;
	align-items: center;
	height: 100%;
	max-width: 664px;
	margin: 0 auto;
}

.modalwrapp .modal-content {
	box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
}

.modalwrapp .btn-close {
	border: 2px solid #292D32;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	line-height: 40px;
	font-size: 12px;
	color: #292D32;
	padding: 0;
}

.modalwrapp .modal-body {
	padding: 0 60px 50px 54px;
}

.modalwrapp .modal-header {
	border: 0;
	padding: 35px 42px 35px 54px;
}

.modalwrapp .modal-content,
.modalwrapp .modal-header {
	border-radius: 20px;
	border: 0;
}

.detailtxt {
	background: #D9D9D9;
	border-radius: 20px;
	max-width: 501px;
}

.detailtxt p {
	padding: 0;
}

.detailtxt p span {}

.detailryt {
	padding: 10px 0 0 0;
}

.detaillft {
	max-width: 146px;
	width: 100%;
	padding: 10px 0 0 0;
	background: #7F7F7F;
	border-radius: 20px 0 0 20px;
}

.detaillft .addresstxt {
	min-height: 50px;
}

.detaillft span {
	font-size: 16px;
	line-height: 24px;
	color: #FFFFFF;
	padding: 0 0 8px 20px;
}

.detaillft span:first-child {
	border-radius: 20px 0 0 0;
}

.detaillft span:last-child {
	border-radius: 0 0 0 20px;
}

.detaillft span,
.detailryt em {
	display: block;
}

.detailryt em {
	font-weight: 275;
	font-size: 16px;
	padding: 0 0 8px 18px;
	font-style: normal;
	min-height: 32px;
}

/* Batch Details *******/

.usagestable tr th {
	background: #7F7F7F;
}

.usagestable tr th,
.usagestable tr td {
	padding: 20px 0;
}

.usagestable tr td {
	background: #D9D9D9;
}

/* new updats 22-5-23*/

.searchmain h3 {
    margin: 0;
    padding: 0;
	font-weight: 600;
}
.w-c-bg {
    background: #FFFFFF;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15); 
    border-radius: 20px;
    padding: 30px;
}
.detailedit.disabled-in input,
.searchinput.searchselect.disabled-in{
    background-color: #DBDADA;
}





.cancelbtnnew {
    /* max-width: 416px; */ /* new css */
    margin: 70px auto 0 auto;
}
.cancelbtnnew .cancelbtn a.white-btn {
    margin: 0;
}
.cancelbtnnew .black-btn{
    background: #7F7F7F;
	font-weight: 500;
}
.disabled-in .form-select:disabled {
    background-color: transparent;
	box-shadow: inherit;
}
.searchinput.searchselect.disabled-in {
    flex-wrap: wrap;
	width: 100%;
    max-width: 209px;
}
.cancelbtnnew .black-btn{
	margin: 0 30px;
}
.cancelbtnnew .black-btn:hover {
    background: #000000; 
}
.model-name.detailedit label {
    font-weight: 500;

}
.settings-input .detailedit input { 

    background: #FFFFFF;
    box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.1);
    border-radius: 10px; 
    width: 75%;
    max-width: 321px; 
	color: #7F7F7F ;
	width: 48%;
    max-width: 171px;
}

.settings-input .detailedit label { 
    width: 54%;
    max-width: 147px;
}