@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
html,body{margin:0; font-family: 'Noto Sans', sans-serif; outline:none;}
 
.padd0{padding:0;}
.mar0{margin:0;}
.loginwidget{
    width: 100%;
    min-height: 100vh;
    /* display: -webkit-box; */
    /* display: -webkit-flex; */
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: center;
    align-items: center;
    padding: 15px;
    background: #9053c7;
    background: -webkit-linear-gradient(
-135deg
,#c850c0,#4158d0);
    background: -o-linear-gradient(-135deg,#c850c0,#4158d0);
    background: -moz-linear-gradient(-135deg,#c850c0,#4158d0);
    background: linear-gradient(
-135deg
,#c850c0,#4158d0);
    }
.loginwidget .alert{margin-bottom:0;padding: 5px 10px;text-align: center;}
.loginwidget .innerbox{
    width: 400px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    justify-content: space-between;
    padding: 2%;
    margin: 0 auto;
    }
	

.loginwidget .innerbox figure img{width: 100%;}


 .loginwidget .innerbox  .logform h3{
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 3px;
    text-align: center;
    font-weight: 400;
}
 .loginwidget .innerbox  .logform label{
    font-size: 15px;
    line-height: 1.5;
    color: #666;
    display: block;
    width: 100%;
    background: #e6e6e6;
    height: auto;
    border-radius: 25px;
    padding: 10px 30px 10px 48px;
    position: relative;
    }
 .loginwidget .innerbox  .logform label i{
    position: absolute;
    left: 25px;
    top: 17px;
    font-size: 16px;
}
 .loginwidget .innerbox  .logform label input[type='text'],  .loginwidget .innerbox  .logform label input[type='password']{
    border: none;
    background: #e6e6e6;
    padding: 5px;
    outline: none;
    width: 100%;
}
 
 .loginwidget .innerbox  .logform button{
    font-size: 15px;
    line-height: 1.5;
    color: #fff;
    text-transform: uppercase;
    width: 100%;
    margin-top: 20px;
    height: 50px;
    border-radius: 25px;
    background: #57b846;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    border: none;
    align-items: center;
    padding: 0 25px;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    -moz-transition: all .4s;
    transition: all .4s;
    outline:none;
    }
 .loginwidget .innerbox  .logform span{
    display: block;
    text-align: center;
    padding-top: 8px;
    color: #666;
}
 .loginwidget .innerbox  .logform span a{
    color: #7d54c8;
}

/****************** HEADER ********************/
header{
    height: 70px;
    display: flex;
    align-items: center;
    align-content: center;
    position: relative;
    z-index: 10;
    /* z-index: 1; */
    transition: all .2s;
    box-shadow: 0 0.46875rem 2.1875rem rgb(4 9 20 / 3%), 0 0.9375rem 1.40625rem rgb(4 9 20 / 3%), 0 0.25rem 0.53125rem rgb(4 9 20 / 5%), 0 0.125rem 0.1875rem rgb(4 9 20 / 3%);
    position: fixed;
    width: 100%;
    top: 0;
    background: #003ea0;
 }

header .logpanel{
    padding: 0px 15px;
    height: 60px;
    width: 280px;
    display: flex;
}	
header .logpanel .logoimg{
    padding-top: 0;
    display: inline-block;
    padding-left: 20px;
}	
header .logpanel .logoimg img{width:160px;}
header .logpanel .menubtn{
  
background: none;
  
border: none;
  
font-size: 23px;
  
display: inline-block;
  
margin-top: 1px;
  
outline:none;
  
color: #3f6ad8;
  
position: absolute;
  
left: 0;
  
top: 10px;
}	
header .logpanel .menubtn img{width: 20px;}
header .rightheader{display: flex;
    align-items: center;
    align-content: center;
    flex: 1;
    padding: 0 1.5rem;
    height: 60px;}
.app-main{
    flex: 1;
    display: flex;
    z-index: 2;
    position: relative;
}	
.app-main .app-sidebar {
    width: 280px;
    display: flex;
    z-index: 11;
    overflow: hidden;
    min-width: 280px;
    position: relative;
    flex: 0 0 280px;
    margin-top: 0;
    padding-top: 70px;
    background: #fff;
    transition: all .2s;
    position: fixed;
    height: 100vh;
    box-shadow: 7px 0 60px rgb(0 0 0 / 5%);
}	
.app-main .app-sidebar .leftmainmenu{
    padding: 25px;
    width: 100%;
    list-style: none;
    overflow: scroll;
    overflow: auto;
    max-height: 100vh;
}

 

.app-main .app-sidebar .leftmainmenu > li > a{
    display: block;
    padding: 15px;
    background: none;
    color: #000000;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    position: relative;
    font-weight: 300;
    line-height: normal;
}

.app-main .app-sidebar .leftmainmenu > li > a:hover {
    background: #f9f9f9;
    text-decoration: none;
}
.app-main .app-sidebar .leftmainmenu > li > a > i.lefti{
    margin-right: 5px;
    color: #000;
    width: 20px;
    text-align: center;
    font-size: 18px;
}
.app-main .app-sidebar .leftmainmenu > li > a > i.righti{
    /* float: right; */
    /* color: #b7b7b7; */
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 14px;
}
.app-main .app-sidebar .leftmainmenu > li > a.active{
    background: #143e93;
    color: #fff;
    }
.app-main .app-sidebar .leftmainmenu > li > a.active i.lefti{color:#fff;}
.app-main .app-sidebar .leftmainmenu > li > ul{
    padding: 0 0 0 35px;
    list-style: none;
    position: relative;
}
 
.app-main .app-sidebar .leftmainmenu > li > ul > li > a{
    display: block;
    padding: 10px;
    border-radius: 5px;
    color: #000000;
}
.app-main .app-sidebar .leftmainmenu > li > ul > li > a:hover{
    background: #f9f9f9;
    text-decoration: none;
    }
.app-main .app-sidebar .leftmainmenu > li > ul:before {
    content: '';
    height: 100%;
    opacity: 1;
    width: 3px;
    background: #f9f9f9;
    position: absolute;
    left: 20px;
    top: 0;
    border-radius: 15px;
}


.app-main .app-sidebar .leftmainmenu::-webkit-scrollbar {
    width: 0px;
}
 
.app-main .app-sidebar .leftmainmenu::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgb(238 238 238);
}
 
.app-main .app-sidebar .leftmainmenu::-webkit-scrollbar-thumb {
  background-color: #d0d0d0;
  outline: 1px solid #fdfdfd;
}

.app-main .app-main-outer{
    flex: 2;
    flex-direction: column;
    display: flex;
    z-index: 9;
    padding-left: 280px;
    padding-top: 70px;
    }
	
.app-main .app-main-outer .app-main-inner {
    padding: 10px;
    flex: 1;
    /* background: #f8f7fc; */
}

.app-main .app-main-outer .app-main-inner .app-page-title{
    background: rgb(232 232 232 / 27%);
    /* padding: 30px; */
    position: relative;
    }
	
	
.app-page-title .page-title-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}	
.app-page-title .page-title-heading {
    font-size: 1.25rem;
    font-weight: 400;
    display: flex;
    align-content: center;
    align-items: center;
}
.app-page-title .page-title-icon {
    font-size: 2rem;
    display: inline-block;
    align-items: center;
    align-content: center;
    text-align: center;
    padding: 15px;
    margin: 0 30px 0 0;
    color: #5a5a5a;
    background: #fff;
    box-shadow: 0 0.46875rem 2.1875rem rgb(4 9 20 / 3%), 0 0.9375rem 1.40625rem rgb(4 9 20 / 3%), 0 0.25rem 0.53125rem rgb(4 9 20 / 5%), 0 0.125rem 0.1875rem rgb(4 9 20 / 3%);
    border-radius: .25rem;
    width: 60px;
    height: 60px;
}	
.app-page-title  .pagetitle2{
    font-size: 18px;
    letter-spacing: 0;
    display: inline-block;
}	
.app-page-title  .pagetitle2 .page-title-subheading{font-size: 14px;}

.cardbox{
    box-shadow: 0 0.46875rem 2.1875rem rgb(4 9 20 / 3%), 0 0.9375rem 1.40625rem rgb(4 9 20 / 3%), 0 0.25rem 0.53125rem rgb(4 9 20 / 5%), 0 0.125rem 0.1875rem rgb(4 9 20 / 3%);
    border-width: 0;
    transition: all .2s;
    background: #fff;
    padding: 20px;
    }

.frmpanel{
    padding: 0 5px;
}
.frmpanel label{
    display: block;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
}
.frmpanel span{color:red;}
.frmpanel input[type='text'], .frmpanel input[type='text'], .frmpanel input[type='email'], .frmpanel input[type='number']{
    padding: 10px;
    border: 2px solid #eee;
    width: 100%;
    outline:none;
    margin-bottom: 10px;
    border-radius: 5px;
}
.frmpanel input[type='time']{
    padding: 2px 10px;
    border: 2px solid #eee;
    width: 100%;
    outline:none;
    margin-bottom: 10px;
  
}
.labelbg{padding: 10px;
    background: #f3f6f9;}
.frmpanel select{
    padding: 10px;
    border: 2px solid #eee;
    width: 100%;
    outline:none;
    /* margin-bottom: 10px; */
    border-radius: 5px;
    }
	
	.frmpanel textarea{padding: 11px;
    border: 2px solid #eee;
    width: 100%;
    outline: none;
    margin-bottom: 10px;
    border-radius: 5px;}
	.frmpanel input[type='submit']{
    position: relative;
    padding: 10px 30px;
    margin: 0 .75rem 0 0;
    background: #4caf50;
    border: none;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 1px;
    font-weight: 600;
    outline:none;
    border-radius: 5px;
    }
	
	.app-page-title .page-title-actions {
    margin-left: auto;
}
.app-page-title .page-title-actions  a{
    font-size: 14px;
    padding: 10px 20px;
    background: #3f6ad8;
    color: #fff;
    text-transform: uppercase;
    outline: none;
    border-radius: 5px;
    text-decoration:none;
    border: none;
    letter-spacing: 1px;
    margin-left: 10px;
    }
	
	.createnew{display: inline-block;
    padding: 10px 30px;
    background: #3f6ad8;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;}
	
 .lds-dual-ring {
  display: inline-block;
  width: 80px;
  height: 80px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #3f6ad8 transparent #3f6ad8 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

table{
    width: 100%;
}
 
table thead tr th{
    padding: 10px;
    background: #f3f6f9;
    color: #3a4b5d!important;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}
table tbody tr{ border-bottom:1px solid #f3f6f9;  }
table tbody tr td{ padding: 10px;  }

table thead th:first-child, table thead tr:first-child {
    border-top-left-radius: .42rem;
    border-bottom-left-radius: .42rem;
}

table thead th:last-child, table thead tr:last-child {
    border-top-right-radius: .42rem;
    border-bottom-right-radius: .42rem;
}

table .span{border-radius: .42rem; padding:5px 10px;}

table .suspended{color: #f64e60;
    background-color: #ffe2e5;}
table .success{color: #1bc5bd;
    background-color: #c9f7f5;}
table .pending{color: #3699ff;
    background-color: #e1f0ff;}
	table .primary{background: #ff980052;
    color: #ff9800;}
	
table .editbtn{width: 30px;display: inline-block;height: 30px;padding: 5px;text-align: CENTER;/* background: #eee; */background-color: #f3f6f9;border-color: #f3f6f9;border-radius: 5px;padding-top: 7px;}	
table .editbtn i{font-size: 16px;}
table .editbtn:hover{color: #fff!important;
    background-color: #3699ff!important;
    border-color: #3699ff!important;} 	
table .delbtn{width: 30px;display: inline-block;height: 30px;padding: 5px;text-align: CENTER;/* background: #eee; */background-color: #ffeae3;border-color: #ff916e;border-radius: 5px;padding-top: 7px;color: red;}	
table .delbtn i{font-size: 16px;}
table .delbtn:hover{
    color: #fff!important;
    background-color: #ff5722!important;
    border-color: #ff5722!important;
    } 		
table .vwbtn{width: 30px;display: inline-block;height: 30px;padding: 5px;text-align: CENTER;/* background: #eee; */background-color: #673ab71f;border-color: #ff916e;border-radius: 5px;padding-top: 7px;color: #673ab7;}	
table .vwbtn i{font-size: 16px;}
table .vwbtn:hover{
    color: #fff!important;
    background-color: #673ab7!important;
    border-color: #673ab7!important;
    } 			
	table .addbtn{background: #2196f34d;
    color: #2196f3; width: 30px;display: inline-block;height: 30px;padding: 5px;text-align: CENTER; border-radius: 5px;padding-top: 7px;} 
.hidebox{display:none;}	
.marklist{display:none;}	
	
.shortcutkeys{
    padding: 0;
    margin-bottom: 10px;
}
.shortcutkeys button{
    border: none;
    border-radius: 0;
    background: #eee;
    color: #000;
	display: inline-block;
}
.shortcutkeys h4{display: inline-block;
    margin: 0;
    padding: 5px;}
.dropdown-backdrop{background: #2196f340;}
.shortcutkeys .dropdown-menu{
    border: navajowhite;
    border-radius: 0;
    padding: 10px;
}
 
.shortcutkeys .dropdown-menu li a{
    border-radius: 0;
    display: block;
    padding: 10px 15px;
    font-size: 16px;
}
.shortcutkeys a{
    display: inline-block;
    padding: 10px 25px;
    
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    margin-right: 10px;
     
}
.shortcutkeys a.darkgreen{background: #4CAF50;}
.shortcutkeys a.darkblue{background: #2196F3;}
.shortcutkeys a.darkviolet{background: #673AB7;}
.shortcutkeys a.darkorange{background: #FF9800;}
.shortcutkeys a.darkred{background: #F44336;}


.shortcutkeys a.active{
    color: #fff; opacity: 1;}	
	.pagehead{    margin: 0;
    padding: 10px;
    background: #f3f6f9;
    margin-bottom: 11px;
    font-size: 18px;}	
.addserv{
    font-size: 14px;
    padding: 10px 20px;
    background: #2196f3;
    color: #fff;
    text-transform: uppercase;
    outline: none;
    border-radius: 50%;
    text-decoration: none;
    border: none;
    position: fixed;
    letter-spacing: 1px;
    z-index: 99;
    bottom: 15px;
    right: 15px;
    width: 70px;
    height: 70px;
}	
.addserv i{
    font-size: 24px;
}	

span.tg{
    display: inline-block;
    padding: 3px 8px;
    /* background: #2196f3; */
    margin-right: 5px;
    color: #1bc5bd;
    background-color: #c9f7f5; border-radius: .42rem;
	margin-bottom:5px;
}

span.tg2{
    display: inline-block;
    padding: 3px 8px;
    /* background: #2196f3; */
    margin-right: 5px;
   color: #3699ff;
    background-color: #e1f0ff; border-radius: .42rem;
	margin-bottom:5px;
}

 
#createprojectFrm label{
    display: block;
}
#createprojectFrm input[type='submit']{
    padding: 10px;
	outline: none;
    width: 100%;
    border: 1px solid #4caf50;
    background: #4caf50;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    border-radius: 5px;
}
.viewbtn{display: inline-block;
    margin-top: 10px;
    background: #4caf50;
    padding: 10px 20px;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 2px;
    border-radius: 4px;}
	
.cheqhide{display:none;}	
.upihide{display:none;}	
.profilebox{
    align-items: center;
    display: flex;
    margin-left: auto;
    padding: 7px 7px;
    background: #eee;
    border-radius: 5px;
    padding-left: 15px;
    cursor:pointer;
    width: 30%;
    }
	.profilebox .nm{
    font-weight: 500;
}
	.profilebox .icon{
    display: inline-block;
    padding: 7px;
    background: #c1c1c1;
    margin-left: 10px;
    border-radius: 5px;
    width: 33px;
    text-align: center;
    font-weight: bold;
}
.acceptpay{border: none;
    padding: 6px 15px;
    text-transform: uppercase;
    background: #8bc34a;
    color: #fff;
    border-radius: 3px;}
	.canvas{
		z-index: 1001;
		position: fixed;
		top: 0;
		bottom: 0;
		padding:20px;
		-webkit-transition: left .3s ease,right .3s ease,bottom .3s ease,top .3s ease;
		transition: left .3s ease,right .3s ease,bottom .3s ease,top .3s ease;
		right: -100%;
		width: 250px;
		background: #fff;
		-webkit-box-shadow: 0 1px 9px -3px rgb(0 0 0 / 25%);
		box-shadow: 0 1px 9px -3px rgb(0 0 0 / 25%);
	}
	.canvas.canvas-right {
    right: 0;
    left: auto;
    /* width: 50%; */
}

.canvas.canvas-on {
    -webkit-transition: left .3s ease,right .3s ease,bottom .3s ease,top .3s ease;
    transition: left .3s ease,right .3s ease,bottom .3s ease,top .3s ease;
    left: 0;
}
.canvas.canvas-right.canvas-on {
    -webkit-transition: left .3s ease,right .3s ease,bottom .3s ease,top .3s ease;
    transition: left .3s ease,right .3s ease,bottom .3s ease,top .3s ease;
    right: 0;
    left: auto;
}
.closebtn{
    height: 30px;
    width: 30px;
    color: #7e8299;
    background-color: #f3f6f9;
    text-align: center;
    border-color: #f3f6f9;
    position: absolute;
    right: 0;
    border: none;
    border-radius: 3px;
    outline: none;
}
.canvas .empname{
    display: inline-block;
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 15px;
}

.canvas .nm{
    display: block;
    font-size: 16px;
    font-weight: 500;
}
.canvas .ty{
    display: block;
    color: #bfbfbf;
}
.canvas .em{
    display: block;
    color: #bfbfbf;
}
.canvas .signoutbtn{
    color: #7e8299;
    /* background-color: #f3f6f9; */
    /* border-color: #f3f6f9; */
    border: none;
    border-radius: 3px;
    outline: none;
    padding: 6px 15px;
    display: inline-block;
    margin-top: 10px;
    color: #3699ff;
    font-weight: 500;
    text-decoration: none;
    background-color: #e1f0ff;
    border-color: transparent;
}
.usericon{
    padding: 0;
    padding-right: 8px;
}
 
.usericon picture img{
    width: 100%;
    border-radius: 5px;
}

.moblistgrid{
    padding: 0;
    list-style: none;
    margin: 0;
}
.moblistgrid li{
    padding: 10px;
    border: 2px solid #eee;
    border-radius: 5px;
    margin-bottom: 10px;
}

.moblistgrid li h4{
    margin: 0;
    font-size: 18px;
    margin-bottom: 10px;
    color: #3f51b5;
}

.moblistgrid li span{
    border-radius: .42rem;
    padding: 5px 10px;
    margin-bottom: 5px;
    display: inline-block;
    }
.moblistgrid li span.desg{background-color: #f3f6f9;
    border-color: #f3f6f9;}
.moblistgrid li span.join{
    display: block;
    font-style: italic;
}
 
.moblistgrid li span.success{color: #1bc5bd;
    background-color: #c9f7f5;}

.moblistgrid li .grida{text-align:center;}
.moblistgrid li .grida a{
    width: 32.5%;
    display: inline-block;
    height: 30px;
    padding: 5px;
    text-align: CENTER;
    /* background: #eee; */
    border-radius: 5px;
    padding-top: 7px;
    margin-bottom: 5px;
    }
.moblistgrid li .grida .vwbtn{background-color: #673ab71f;
    color: #673ab7;}
.moblistgrid li .grida .editbtn{background-color: #f3f6f9;  }
.moblistgrid li .grida .delbtn{background-color: #ffeae3;
    border-color: #ff916e; color: red;}
 .moblistgrid li .tag{
    background: #ff980033;
    color: #ff9800;
}
.moblistgrid li .tag2{background: #2196f340;
    color: #2196f3;}
.enqgrid{ padding: 0;
    list-style: none;
    margin: 0;}
.enqgrid li{  padding: 10px;
    border: 2px solid #eee;
    border-radius: 5px;
    margin-bottom: 10px;}
.enqgrid li span{
    border-radius: .42rem;
    padding: 5px 10px;
    margin-bottom: 5px;
    display: inline-block;
    }
.enqgrid li span.dt{background-color: #673ab71f;
    color: #673ab7;}
.enqgrid li span.rating{
    background: #00bcd421;
    color: #00bcd4;
}
.enqgrid li span.response{
    display: block;
    background: #03a9f426;
    color: #03a9f4;
}
.enqgrid li p{
    margin: 0;
    padding: 8px 0;
}

 span.suspended{color: #f64e60;
    background-color: #ffe2e5;}
 span.success{
    color: #1bc5bd;
    background-color: #c9f7f5;
    display: block;
    }
 span.pending{color: #3699ff;
    background-color: #e1f0ff;}
 span.primary{background: #ff980052;
    color: #ff9800;}
.enqgrid li 	a{display: block;
    padding: 6px;
    background: #03a9f4;
    text-align: CENTER;
    border-radius: 5px;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 1px;}
	.moblogo{display:none;}
	.moblogo img{width: 30px;}
	
.chngpass{
    
   
    margin-top: 10px;
     
}	
.chngpass label{
    display: block;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 1px;
    color: #000;
}	
.chngpass input[type='password']{
    padding: 8px;
    width: 100%;
    margin-bottom: 10px;
    border: 2px solid #afafaf;
    border-radius: 4px;
}	
.chngpass input[type='submit']{
    padding: 10px 15px;
    border: none;
    background: #4caf50;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
}	

.chngpass a{display: block;
    color: #7e8299;
    
 
    border: none;
    border-radius: 3px;
    outline: none;
    padding: 6px 15px;
    display: inline-block;
    text-transform: uppercase;
    
    margin-top: 0;
    text-align: center;
    color: #3699ff;
    font-weight: 500;
    text-decoration: none;
    background-color: #e1f0ff;
    border-color: transparent;}	

 
.attendencecard .paghead{
    margin: 0;
    font-weight: 500;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
 
#attendFrm button{
    display: inline-block;
    padding: 10px 30px;
    border-radius: 2px;
    background: #03a9f4;
    text-transform: uppercase;
    color: #fff;
	margin-top:15px;
    border: 1px solid #03a9f4;
}
#attendFrm button i, #attendFrm2 button i{
    margin-right: 5px;
}
	#attendFrm2 button{
    display: inline-block;
    padding: 10px 30px;
    border-radius: 2px;
    background: #3f51b5;
    text-transform: uppercase;
    color: #fff;
    margin-top:15px;
    border: 1px solid #3f51b5;
}


.markleavebtn{
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #03a9f4;
    color: #fff;
    border-radius: 2px;
    background: #03a9f4;
}
.approvedbtn{
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #4caf50;
    color: #fff;
    border-radius: 2px;
    background: #4caf50;
    }
    .cancelbtn{
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #f44336;
    color: #fff;
    border-radius: 2px;
    background: #f44336;
    }
	.cleardata{display: inline-block;
    padding: 10px 20px;
    background: #03a9f4;
    border-radius: 5px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;}
	
.btnin{
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #4caf50;
    color: #fff;
    border-radius: 2px;
    background: #4caf50;
    text-transform: uppercase;
    }
.btnout{
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #03a9f4;
    color: #fff;
    border-radius: 2px;
    background: #03a9f4;
    text-transform: uppercase;
    }
 
	
 
.mobgrid div span{display:inline-block; padding:5px;}
	
.attengrid{
    border: 2px solid #eee;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
}	
.attengrid h3{
    margin: 0;
    font-size: 16px;
    text-transform: uppercase;
    color: #673ab7;
}	
.attengrid h4{
    margin: 0;
    font-size: 16px;
    line-height: 25px;
}	
.attengrid h4 span{
    display: block;
    text-align: CENTER;
    padding: 6px;
    margin-bottom: 10px;
}	
.attengrid h4 span span{display:none;}	
.attengrid button{
    display: block;
    width: 100%;
    clear: both;
    margin-bottom: 5px;
}

.attengrid a{display:block;text-align: center;padding: 5px;background: #ea2525;color: #fff;margin-top: 10px;}
pre{    border: none;
    background: none;
    letter-spacing: 0;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    margin: 0;}	

	.bootstrap-select{
    width: 100% !important;
}.bootstrap-select button:focus{outline:none;}
	.bootstrap-select button{
    outline: none !important;
    border: 2px solid #eee;
    background: #fff !important;
    box-shadow: none !important;
    color: #000 !important;
    margin-bottom:10px;
    padding: 11px;
}
 
	.bootstrap-select button .bs-caret .caret{
    color: #000;
}
.bootstrap-select button .filter-option{color:#000;}
 
.bootstrap-select ul li a{
    padding: 6px 15px;
}
.bootstrap-select ul li a span{color:#000;}
	





/******************** CHAT APP ************************/
.app-main .app-main-chat{
    flex: 1;
    flex-direction: row-reverse;
    display: flex;
    z-index: 9;
    padding:20px;
    background:#eee;
    padding-top: 85px;
    /* width: 300px; */
}

.app-main .app-main-chat .innerchat{background:#fff;border-radius:10px;box-shadow:0 0 128px 0 rgba(0,0,0,0.1),0 32px 64px -48px rgba(0,0,0,0.5);padding: 20px;}

.app-main .app-main-chat .innerchat .headerpanel, .app-main .app-main-chat .innerchat .userlist a{display:flex;align-items:center;padding-bottom: 8px;justify-content: space-between;border-bottom:1px solid #e6e6e6;position: relative;/* padding-top: 7px; */}
.app-main .app-main-chat .innerchat .headerpanel .content a	{    margin-right: 11px;
    margin-top: 14px;
    width: 25px;
    height: 25px;
    text-align: center;
    color: #183241;}
.app-main .app-main-chat .innerchat .headerpanel img{height:50px; width:50px; object-fit:cover; border-radius:50%;}
.app-main .app-main-chat .innerchat .headerpanel .content, .app-main .app-main-chat .innerchat .userlist a .content{display:flex;}
.app-main .app-main-chat .innerchat .headerpanel .content .details, .app-main .app-main-chat .innerchat .userlist a .content .details{margin-left:15px;padding-top: 0;}
.app-main .app-main-chat .innerchat .headerpanel .content .details span, .app-main .app-main-chat .innerchat .userlist a .content .details span{font-size: 16px;font-weight: 500;color: #383737;}
.app-main .app-main-chat .innerchat .headerpanel .content .details p{margin: 0;}

.app-main .app-main-chat .innerchat .headerpanel .content button{position: absolute;right: 5px;background: none;border: none;font-size: 22px;top: 5px;}
 
.app-main .app-main-chat .innerchat	.searchpanel{margin:20px 0; position:relative; display:flex; align-items:center; justify-content: space-between;}
.app-main .app-main-chat .innerchat	.searchpanel input{position:absolute;height:42px;width:calc(100% - 50px);border:1px solid #ccc;padding:0 13px;font-size:16px;border-radius:5px;outline: none;  opacity:0; pointer-events: none; transition:all 0.3s ease;}
.app-main .app-main-chat .innerchat	.searchpanel input.active{
	opacity:1;
	pointer-events:auto;
}
.app-main .app-main-chat .innerchat	.searchpanel button.active{color:#fff; background:#333;}
.app-main .app-main-chat .innerchat	.searchpanel button.active i:before{content:"\f00d";}
.app-main .app-main-chat .innerchat	.searchpanel button{width:47px;height:42px;border:none;outline:none;color: #000000;background: #fff;border-radius: 0 5px 5px 0;}
.app-main .app-main-chat .innerchat .userlist{max-height: 370px;overflow-y:auto;}
.app-main .app-main-chat .innerchat .userlist::-webkit-scrollbar{width:0px;}
.app-main .app-main-chat .innerchat .userlist a{page-break-after:10px; }
.app-main .app-main-chat .innerchat .userlist a:hover{text-decoration:none;}

.app-main .app-main-chat .innerchat .userlist a .content .iconname{height:40px;width:40px;object-fit:cover;border-radius:50%;margin-top: 5px;text-align: center;margin-top:5px; position:relative; padding: 8px;background: #183241;font-size: 18px;font-weight: bold;color: #fff;}
.app-main .app-main-chat .innerchat .userlist a .content .iconname span{
    position: absolute;
    top: -5px;
    background: #4caf50;
    width: auto;
    height: auto;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 5px;
    right: 0px;
}
.app-main .app-main-chat .innerchat .userlist a .content .boldcls{font-weight: bold !important;color: #333 !important;}
 .app-main .app-main-chat .innerchat .userlist a .content .details p{color: #868686;font-size: 14px;font-weight: 400;}
.app-main .app-main-chat .innerchat .userlist a .content .status-dot{font-size:12px;color:#468669;position: absolute;right: 10px;top: 15px;}
.app-main .app-main-chat .innerchat .userlist a .content .status-dot.offline{color:#ccc;}
.app-main .app-main-chat .innerchat .userlist a{margin-bottom: 10px;}
 .app-main .app-main-chat .innerchat .userlist a .content .details span{
    font-size: 14px;
}
.app-main .app-main-chat .innerchat .userlist a:last-child{border-bottom:none;}
 .app-main .app-main-chat .innerchat .chat-box{width: 310px;height:350px;background:#f7f7f7;padding:10px 30px 20px 30px;OVERFLOW: auto;MARGIN: 0;}
  .app-main .app-main-chat .innerchat .chat-box::-webkit-scrollbar{width:0px;}
 
 .app-main .app-main-chat .innerchat .chat-box .chat p{padding:8px 16px; box-shadow:0 0 32px rgb(0 0 0 / 8%), 0 16px 16px -16px rgb(0 0 0 / 10%);}
 .app-main .app-main-chat .innerchat .chat-box .chat img{width:50px; height:50px;}
 .app-main .app-main-chat .innerchat .chat-box .outgoing{display:flex; display:block;}
 .outgoing .details p{background:#333; color:#fff; border-radius:18px 18px 0 18px;}
  .outgoing .details{max-width:calc(100% - 60px); margin-left:auto;}
  
   .app-main .app-main-chat .innerchat .chat-box .incoming{display:flex; display:block;}
 .incoming .details p{background: #fff;color: #333;border-radius:18px 18px 18px 0;}
  .incoming .details{max-width:calc(100% - 60px); margin-right:auto;}
   .app-main .app-main-chat .innerchat .typing-area{padding: 15px 0;padding-bottom: 0;}
   .typing-area input{height:45px;width: calc(100% - 58px);font-size:17px;border:1px solid #eee;padding:0 13px;outline:none;border-radius: 5px 0px 0px 5px;}
    .typing-area button{width: 56px;border:none;outline:none;background:#333;color:#fff;font-size: 19px;cursor:pointer;border-radius:0 5px 5px 0;padding: 8px 0;margin-left: -3px;}
 .taskupdate{display:block;padding: 5px 5px;background: #4caf5040;color: #4CAF50;margin-top: 5px;font-size: 18px;text-align: center;text-transform: uppercase;border-radius: 4px;}  
 
 .gridboxser .innerbox{
    border: 1px solid #2196f324;
    border-radius: 0;
    /* overflow: hidden; */
    padding: 10px;
    margin-bottom: 15px;
}
 .gridboxser .innerbox h4{
    margin: 0;
    padding: 10px 5px;
    /* background: #2196f3; */
    text-align: CENTER;
    color: #2196f3;
    border-radius: 6px;
    margin-bottom: 7px;
    border-bottom: 1px solid #eee;
    text-align: left;
}
 .gridboxser .innerbox .platform{
    padding: 0;
    list-style: none;
    display: block;
    padding-bottom: 3px;
    border-bottom: 1px solid #2196f31f;
}
 .gridboxser .innerbox .platform li{
    display: inline-block;
    background: #eee;
    padding: 3px 7px;
    margin-right: 5px;
    color: #3699ff;
    background-color: #e1f0ff;
    border-radius: .42rem;
    margin-bottom: 5px;
}
 .gridboxser .innerbox .sertype{
    padding: 0;
    list-style: none;
    display: block;
}
 .gridboxser .innerbox .sertype li{
    display: inline-block;
    border: 2px solid #2196f3;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    /* width: 32.33%; */
}
 .gridboxser .innerbox .sertype li span.type{
    display: block;
    background: #2196f3;
    padding: 3px 9px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 500;
    letter-spacing: 1px;
}
 .gridboxser .innerbox .sertype li span.notext{
    display: block;
    padding: 4px 0;
    font-weight: 500;
    color: #2196f3;
}
 .gridboxser .innerbox .durtype{
    padding: 0;
    list-style: none;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
 .gridboxser .innerbox .durtype li{
    display: inline-block;
    width: 49%;
    padding-right: 10px;
}
 .gridboxser .innerbox .durtype li span.head{
    display: block;
    padding: 10px;
    background: #dff0fe;
    font-weight: 500;
    color: #2196F3;
}
 .gridboxser .innerbox .durtype li span.notext{
    display: block;
    padding: 10px;
    background: #dff0fe;
    font-weight: 500;
    color: #2196F3;
}

.defaultrow{display: none;};

.app-sidebar.hidden {
    left: -100%;
}
.app-main-outer.paddremove{padding-left: 0;}
.box-card {
    padding: 30px;
    background: #fff;
    margin-bottom: 20px;
    min-height: 385px;
}
.box-card h3 {
    margin: 0;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
}

.grid-box{
    padding: 10%;
    position: relative;
    border-radius: 5px;
    margin-bottom: 20px;
    margin-top: 20px;
}
.grid-box .text{
    font-weight: 800;
    display: block;
    color: #fff;
    font-size: 2.3em;
    letter-spacing: 1;
}
.grid-box .icon{
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 50px;
}
.grid-box .icon i{
    color: #2c2c2c26;
}
.grid-box a{
    display: inline-block;
    color: #fff;
    font-weight: 800;
    font-size: 18px;
}
.grid-box.bggreen{
    background: #4bc0c0;
    /* border-radius: 5px; */
}
.grid-box.bgred {
    background: #ff9f40;
}
.grid-box.bgpurple{background: #9060f0;}
.grid-box.bgyellow{background: #ffcd56;}

.new_tag{
    display: inline-block;
    padding: 3px 10px;
    text-align: CENTER;
    background-color: #8bc34a21;
    /* border-color: #ff916e; */
    border-radius: 2px;
    color: #8BC34A;
    text-transform: uppercase;
    font-weight: 600;
    }
.renew_tag{
    display: inline-block;
    padding: 3px 10px;
    text-align: CENTER;
    background-color: #00BCD421;
    /* border-color: #ff916e; */
    border-radius: 2px;
    color: #00BCD4;
    text-transform: uppercase;
    font-weight: 600;
    }
.renewbox{
    padding: 15px 0;
    /* border: 1px solid #eee; */
}    
 
.renewbox .innerhead h3{
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    background: #2196F3;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 2px;
    box-shadow: #2196f370 3px 3px 9px;
    color: #fff;
    position: relative;
}    
.renewbox .gridbox-one{
    /* width: 20%; */
    min-height: 50px;
}    
.renewbox .gridbox-one label{
    margin-bottom: 0;
    margin-right: 10px;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    color: #134a76;
    font-weight: 500;
    }
.renewbox .gridbox-one span, .renewbox .gridbox-two span{
    display: block;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 5px;
    /* color: #20649b; */
}    
 
.renewbox .gridbox-one input[type='number']{
    width: 100%;
    border: 2px solid #eee;
    padding: 10px;
    border-radius: 7px;
    outline: none;
    margin-bottom: 15px;
}
.renewbox .gridbox-one input[type='text']{
    width: 100%;
    border: 2px solid #eee;
    padding: 10px;
    border-radius: 7px;
    outline: none;
    margin-bottom: 15px;
}
.renewbox .gridbox-two textarea{ width: 100%;
    border: 2px solid #eee;
    padding: 10px;
    border-radius: 7px;
    outline: none;}

    .renewbox .innerhead h3 .delbtnrenew{
    position: absolute;
    right: 0;
    background: #ffffff;
    padding: 8px 15px;
    top: 0;
    font-size: 20px;
    border-radius: 0 2px 2px 0;
    color: #F44336;
}   
.navbutton{padding: 0;}
 .navbutton a{
    display: inline-block;
    padding: 5px 10px;
    margin-bottom: 10px;
    border: none;
    background: #2196f3;
    color: #fff;
} 

.submtbtn{    border: none;
    padding: 10px 20px;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 10px;
    background: #2196F3;
    color: #fff;
    border-radius: 3px;
    box-shadow: #2196f370 3px 3px 9px;}

    .select2-container--default .select2-selection--single{border:2px solid #eee !important; height: 45px !important;}
    .select2-container--default .select2-selection--single .select2-selection__rendered{line-height: 42px !important;}
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 40px !important;}
.punchbtn{
    border: none;
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    height: 100px;
}
.punchbtn img{
    width: 47px;
}
.punchbtn span{
    display: block;
    text-transform: uppercase;
    margin-top: 6px;
    font-weight: 700;
    color: #2196F3;
}

.boxdate{
    float: left;
    padding: 15px;
    /* border: 1px solid #4caf5030; */
    background: #0042a21c;
    border-radius: 10px;
    min-height: 100px;
    padding-top: 25px;
    margin-right: 10px;
}
.boxdate .date{
    text-align: center;
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    color: #003ea0;
}
.boxdate .month{
    display: block;
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    color: #003ea0;
    line-height: 30px;
}

.timebox{
    float: left;
    /* display: inline-block; */
    padding: 15px;
    background: #4ba1dc2e;
    min-height: 100px;
    margin-right: 10px;
    border-radius: 10px;
    padding-top: 25px;
}
.timebox .lbl{
    display: block;
    /* background: #fff; */
    text-align: CENTER;
    font-weight: 600;
    text-transform: uppercase;
    color: #4ba1dc75;
    margin-top: 4px;
}
.timebox .time{
    display: block;
    text-align: CENTER;
    font-size: 18px;
    font-weight: 600;
    color: #4596cc;
}
.bgdrop{
    background-color: rgb(0 0 0 / 9%);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    z-index: 99;
}
.editbox{
    position: fixed;
    z-index: 999999;
    top: 0;
    right: 0;
    width: 350px;
    display: none; 
    background: #fff;
    bottom: 0;
    padding: 15px;
}
.editbox .closebtn{
    right: 10px;
    top: 10px;
    background: #06060617;
    color: #000;
    font-weight: 700;
}
.editbox h3{
    font-size: 18px;
    font-weight: 600;
}
.editbox h3 span{
    display: block;
}
.editbox label{
    width: 50%;
    float: left;
    padding: 0 4px;
}
.editbox label span{
    display: block;
    font-weight: 600;
}
.editbox label input[type='number']{
    width: 100%;
    padding: 8px;
    border: 2px solid #eee;
   
    margin-bottom: 10px;
    outline: none;
}
.editbox label textarea{ width: 100%;
    padding: 8px;
    border: 2px solid #eee;
    
    margin-bottom: 10px; outline: none;}
    .editbox label button{
    display: block;
    background: #2196F3;
    border: none;
    padding: 10px 20px;
    text-transform: uppercase;
    color: #fff;
    border-radius: 2px;
    width: 100%;
}

/***************** MOBILE */
.mobile-dashboard-punch{
    background: #fff;
    padding: 15px;
    float: left;
    width: 100%;
    border-bottom: 1px solid #eee;
}
.mobile-dashboard-punch .mobile-dashboard-widget{
    float: left;
    width: 20%;
    padding-top: 5%;
    text-align: CENTER;
    background: #0042a21c;
    border-radius: 10px;
    min-height: 100px;
}
.mobile-dashboard-punch .mobile-dashboard-widget span.spandate{
    display: block;
    display: block;
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    color: #003ea0;
    line-height: 30px;
}
.mobile-dashboard-punch .mobile-dashboard-widget span.spanmonth{
    font-weight: 700;
    text-transform: uppercase;
    color: #003ea0;
    display: block;
    font-size: 18px;
}
.mobile-dashboard-punch .mobile-dashboard-widget-two{
    width: 60%;
    float: left;
    text-align: CENTER;
}
.mobile-dashboard-punch .mobile-dashboard-widget-two .innerbox-punch{
    display: inline-block;
    padding: 0 2%;
}
.mobile-dashboard-punch .mobile-dashboard-widget-two .innerbox-punch .spanpunch-text{
    display: block;
    text-align: CENTER;
    font-weight: 600;
    text-transform: uppercase;
    color: #4ba1dc75;
    margin-top: 4px;
}
.mobile-dashboard-punch .mobile-dashboard-widget-two .innerbox-punch .spanpunch-time{
    display: block;
    text-align: CENTER;
    font-size: 18px;
    font-weight: 600;
}
.mobile-dashboard-punch .mobile-dashboard-widget-two .innerbox-punch-two{
    display: block;
}
.mobile-dashboard-punch .mobile-dashboard-widget-two .innerbox-punch-two .spanpunch-text{
    display: block;
    display: block;
    text-align: CENTER;
    font-weight: 600;
    text-transform: uppercase;
    color: #4ba1dc75;
}
.mobile-dashboard-punch .mobile-dashboard-widget-two .innerbox-punch-two .spanpunch-time{
    text-align: CENTER;
    font-size: 18px;
    font-weight: 600;
}

.mobile-dashboard-punch .mobile-dashboard-widget-three{
    float: left;
    width: 20%;
    }
.mobile-dashboard-punch .mobile-dashboard-widget-three button{
    border: none;
    background: none;
}
.mobile-dashboard-punch .mobile-dashboard-widget-three button img{
    width: 70px;
    max-width: 100%;
}
.mobile-dashboard-punch .mobile-dashboard-widget-three button span{
    display: block;
    margin-top: 6px;
    font-weight: 700;
    color: #2196F3;
}

 

ul.mobile-grid-list{
    padding: 0;
    list-style: none;
    /* width: 93%; */
}
ul.mobile-grid-list > li{
    border: 1px solid #eee;
    display: block;
    position: relative;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 3px 5px 0px #eeeeee3b;
}
ul.mobile-grid-list > li > h3{
    margin: 0;
    font-weight: 700;
    font-size: 20px;
    color: #000;
}
ul.mobile-grid-list > li > span.mobicon{
    display: block;
}
ul.mobile-grid-list > li > span.cityicon{
    display: block;
}
ul.mobile-grid-list > li > .dropaction{
    position: absolute;
    right: 10px;
    width: 15px;
    top: 5px;
    text-align: center;
    background: none;
    border: none;
    font-size: 20px;
}
 
ul.mobile-grid-list > li > .dropaction .mobiletogglebox{
    z-index: 9;
    display: none;
    position: absolute;
    /* display: block; */
    right: 0;
    top: 100%;
    width: 120px;
}
ul.mobile-grid-list > li > .dropaction .mobiletogglebox a{
    font-size: 12px;
    display: block;
    text-transform: uppercase;
    text-align: left;
    background: #003ea0;
    padding: 8px 10px;
    color: #fff;
}

 
.dropaction.showdrp{background: #003ea0 !important;
    color: #fff !important;
    width: 25px !important;
    padding-top: 5px !important;}

.hidedata{display: none;}
#searchInput{width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #eee;
    border-radius: 0;
    outline: none;
    box-shadow: 3px 5px 0px #eeeeee3b;}

    .servicehead{
    color: #003ea0;
    margin: 0;
    font-size: 16px;
    padding: 10px 15px;
    background: #003ea01a;
    font-weight: 600;
    margin-top: 5px;
    border-radius: 2px;
    clear: both;
}
    .mob-innerpage-service{
    padding: 0;
    list-style: none;
    margin-top: 10px;
}
    .mob-innerpage-service li{
    border: 1px solid #eee;
    display: block;
    position: relative;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 3px 5px 0px #eeeeee3b;
}
    .mob-innerpage-service li h3{
    margin: 0;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 7px;
}
    .mob-innerpage-service li .subtext{
    display: block;
}

table .dropdown button.dropdown-toggle {
    font-size: 12px;
    margin: 0;
    padding: 3px 6px;
    background-color: #003ea0;
    border: none;
    outline: none;
}
table .dropdown button.dropdown-toggle:hover, table .dropdown button.dropdown-toggle:focus {
    background-color: #003ea0;
    border: none;
    outline: none;
}
.screengrid{
    padding: 15px;
    background: #f9f9f9;
    border-radius: 10px;
    margin-top: 15px;
    text-align: center;
}
.screengrid img{
    border-radius: 10px;
}
.screengrid span.time{
    display: block;
    text-align: CENTER;
    font-weight: 600;
}
.screengrid span.date{
    display: block;
    text-align: center;
    padding: 5px 0;
    font-weight: 700;
    color: #000000;
}
.screenhead{
    margin: 0;
    padding: 10px 15px;
    background: #003ea02e;
    font-size: 18px;
    font-weight: 600;
    border-radius: 4px;
    color: #003ea0;
    margin-bottom: 5px;
    }

    .zoom-container {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        justify-content: center;
        align-items: center;
    }
    
    .zoom-container img {
        max-width: 90%;
        max-height: 90%;
    }
    
    .close {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 30px;
        color: white !important;
        cursor: pointer;
        opacity: 1 !important;
    }


.tophead-punch{
    padding: 0;
    list-style: none;
    display: inline-block;
}
.tophead-punch li{
    display: inline-block;
    padding: 0 11px;
    color: #fff;
    text-align: center;
}
.tophead-punch li span.month{
    display: block;
}
.tophead-punch li span.date{
    display: block;
}
.tophead-punch li span.lbl{
    display: block;
}
.tophead-punch li span.time{
    display: block;
}

.outerbox-punch{    display: flex;
    align-items: center;
    align-content: flex-start;
    justify-content: space-around;
    flex-direction: row;
    width: -webkit-fill-available;}
.tabdate{
    font-size: 18px;
    background: #003ea017;
    display: block;
    font-weight: 600;
    padding: 10px;
    border-radius: 2px;
    color: #003ea0;
}
#zoomedImageContainer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 99;
}
#zoomedImage {
    max-width: 80%;
    max-height: 80%;
}
#imageControls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}
#imageName{
    position: absolute;
    top: 0;
    color: #fff;
    display: block;
    padding: 6px;
    text-transform: uppercase;
    font-size: 18px;
    }
    #prevButton{
    display: inline-block;
    border: none;
    background: #fff;
    padding: 7px 14px;
    text-transform: uppercase;
}
    #nextButton{
    display: inline-block;
    border: none;
    background: #fff;
    padding: 7px 14px;
    text-transform: uppercase;
}
.shortcutkeys a.togglesearch{
    background: #003ea0;
}

.gallery a{
    display: inline-block;
    padding: 5px 15px;
    background: #cbcbcb24;
    text-decoration: none;
    color: #003ea0;
    /* margin-top: 10px; */
    margin-right: 6px;
    margin-bottom: 10px;
    font-weight: 600;
}

.tabbx{
    padding: 10px;
    background: #4cae5024;
    margin-bottom: 10px;
    border: 1px solid #63af503d;
    border-radius: 5px;
}
.tabbx ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
.tabbx ul li{
    display: inline-block;
    margin-right: 10px;
}
.tabbx ul li a{
    display: inline-block;
    padding: 5px 15px;
    background: #e6f4e6;
    color: #4caf50;
    font-weight: 500;
    border-radius: 4px;
}
.tabbx ul li a.active{
    background: #4caf50;
    color: #fff;
}

.attendencebox{
    padding: 0;
}
.attendencebox .innerbox{
    padding: 0;
}
.attendencebox .innerbox ul{
    padding: 15px;
    list-style: none;
    margin: 0;
    border-radius: 10px;
    background: #003ea00f;
}
.attendencebox .innerbox ul li{
    padding: 15px;
    background: #003ea0;
    border-radius: 5px;
    text-align: center;
}
.attendencebox .innerbox ul li .timebox-widget{
    display: block;
    text-align: center;
    color: #fff;
    font-size: 25px;
    font-weight: 700;
}
.attendencebox .innerbox ul li .datebox-widget{
    display: block;
    text-align: center;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #fff;
}
.attendencebox .innerbox ul li button{
    border: none;
    padding: 7px 20px;
    border-radius: 4px;
    background: #ffffff;
    color: #003ea0;
    font-weight: 600;
}

@media only screen and (max-width: 58em){
	.loginwidget{background:#fff;display: block;}
	.loginwidget .innerbox{width: 100%;padding: 15px 0;}
	.moblogo{display:inline-block;}
	.app-main .app-sidebar{
    
display:none;
    
width: 220px;
    
-webkit-transition: left .3s ease,right .3s ease,bottom .3s ease,top .3s ease;
    
transition: left .3s ease,right .3s ease,bottom .3s ease,top .3s ease;
    
min-width: 220px;
    
flex: 0 0 220px;
    
box-shadow: 7px 0 60px rgb(0 0 0 / 5%);
    
z-index: 9999;
    
position: fixed;
    
}
.app-main .app-sidebar.hidden{display: block !important;width: 250px;}
	 
	.profilebox .nm{/* display:none; */color: #fff;padding: 5px 6px;background: #ffffff1f;}
	.profilebox{
    background: none;
    padding: 0;
    width: 100%;
    }
	.app-main .app-main-outer{
    display:block;
    padding: 0;
    padding-top: 70px;
    }
	
	.app-main .app-main-outer .app-main-inner .app-page-title {
    padding: 15px 10px;
    margin: 0;
}
	.app-page-title .page-title-icon{
    margin-right: 5px;
    padding: 4px;
    width: 40px;
    height: 40px;
    display: inline-block;
    color: #003ea0;
    }
	.app-page-title .page-title-heading {
    font-size: 1.25rem;
    font-weight: 400;
    display: inline-block;
    align-content: center;
    align-items: center;
    width: 75%;
}
	.app-page-title .page-title-actions {
    margin-left: auto;
    position: absolute;
    right: 0;
    width: auto;
}
.app-main .app-main-outer .app-main-inner{    display: block;
    flex: none;
    padding: 0;}
	
	.canvas{width: 60%;}
	.app-main .showmobmenu{display:block;}
	
	.mobfrm{padding: 15px;
    margin-top: 10px;
    border: 2px solid #eee;}
	
	.servgrid{
    padding: 0;
    list-style: none;
}
	.servgrid li{
    border: 2px solid #eee;
    padding: 15px;
    border-radius: 5px;
}
	.servgrid li span{
    border-radius: .42rem;
    padding: 5px 10px;
    margin-bottom: 5px;
    display: inline-block;
    width: auto;
    }
	.servgrid li span.typ{
    background: #3f51b547;
    color: #3f51b5;
}
	.servgrid li span.nosms{
    background: #4caf5030;
    color: #4caf50;
}
	.servgrid li span.days{
    background: #03a9f42e;
    color: #2196f3;
}
	.servgrid li span.price{
    background: #eee;
}
 
	.servgrid li a{
    display: block;
    text-align: center;
    background: #f443362e;
    color: #f44336;
    padding: 5px;
    font-size: 18px;
    border-radius: 5px;
}

	.servgrid li span.gridhead{
    display: block;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
}
header .logpanel .menubtn{float:inherit;margin-top: 0;left: -10px;}
.app-main .app-sidebar .leftmainmenu{padding:10px; padding-bottom: 10%; max-height: 90vh;}
.grid-box{margin-bottom: 0;padding: 5% 23px;}
.alert{display: block;}
.frmpanel input[type='submit']{margin-top: 15px;}
.cardbox{
    box-shadow: none;
    padding: 0 25px;
    padding-top: 25px;
    overflow: hidden;
}
.shortcutkeys a{margin: 0;margin-bottom: 10px;font-size: 12px;padding: 5px 7px;/* margin: 0; */}
.app-main{display:block;}
.page-title-icon{display: none !important;}
.outerbox-punch{display:none;}
.box-card{min-height:auto;padding: 0px 0;}
.box-card h3{margin-top:15px;}
}