.transition,.transitionAll,.transitionAll *{transition:all .2s ease-out;-webkit-transition:all .2s ease-out}

#cssmenu > ul li a {font-weight: normal; text-transform: uppercase !important;}
#cssmenu > ul li.has-sub a {text-transform: capitalize !important;}

#cssmenu > ul li li{line-height: 25px;}

.colpsEffa {padding-left: 0 !important;}

/* #cssmenu > ul > li.hover, #cssmenu > ul > li:hover {background-color: #2758e0;} */
#dashboard ul.left-menu > li{border-bottom:1px solid #dddddd !important}
#dashboard ul.left-menu > li > a{background:#fff !important; color:#474747 !important; padding: 5px 10px !important;}
#dashboard ul.left-menu li a span.alert {font-size: 9px; background: #36bea6; color: #fff; padding: 2px; line-height: normal; border-radius: 5px; margin: 1px -7px; position: absolute; right: 11px; top: 6px;   text-transform: uppercase;}

.mksMenu .subMenu.active > a:after, .mksMenu .menu.active > a:after {border-left: 5px solid #0083a1 !important;}

.mksMenu li > ul li a{background: rgba(0,0,0,.03) !important; color:#474747 !important}
.mksMenu li > ul li {border-bottom: 1px solid #ddd; margin-bottom: 0px !important;}
/* #dashboard ul.left-menu li.subMenu > a:after, #dashboard ul.left-menu li.menu > a:after{border-left:5px solid#0532ac;} */

.footer-section {/* background: #0532ac; */ text-align:center; color:#fff}

#dashboard .right-side .col-box{box-shadow: none !important;}
#dashboard .right-side .title {font-size: 14px; color: #474747; font-weight: 600;}
#dashboard .right-side .title:before { position: absolute; content: "";width: 3px; height: 15px; left: 0; background: #00B3DB;}

#dashboard .right-side .title + table th {color: #999;}
#dashboard .right-side .title + table td {color: #474747;}
#dashboard .right-side .title + table td hr {border-color: #ddd;}

/* ::-webkit-scrollbar {width: 10px; max-height: 10px; display: block; }
::-webkit-scrollbar-track {background: #e9efff;}
::-webkit-scrollbar-thumb {background: #7791d9; border-radius: 5px;}
::-webkit-scrollbar-thumb:hover {background: #94b0ff;} */


#dashboard .alert.alert-warning label{margin-bottom: 0px !important;}


/* .box{padding: 15px;} */
.ticketsStyle {background: #f5f5f5;}

form#Form1 .table-for-print tr.footBody td span { position: relative !important; left: 0 !important; top: 0 !important;}

.w30left.mW100 .inline-form span {color: #000; display: inline-flex; align-items: center;}


.goal .inpHite input[type="text"] {margin-bottom: 0;height: 33px; border-radius: 0px !important;}
.rsize{resize: none;}
.goal .inpHite button {width: 30px; font-size: 21px; padding: 0px; color:#ffffff}

.goal table {background-color: #fff;}

.goal .table td, .goal .table th {padding: 3px 5px; vertical-align: middle;font-weight: normal;}
.goal table textarea, .goal table select {height: 34px }

.table-primary, .table-primary>td, .table-primary>th {background: #0887a4; color:#ffffff;}

.left-side {position: relative !important; width: 100% !important; padding: 5px !important; box-shadow: none !important;/*  height: calc(100vh - 120px) !important;  */border-radius: 0px !important}
.hamburger {display: block !important;z-index: 9; position: absolute; right:0px; top:1px; background: #fff !important; padding: 9px; border-radius: 0px 100px 100px 0px;}


.hamburger {cursor: pointer;-webkit-transition-property: opacity, -webkit-filter;transition-property: opacity, -webkit-filter;transition-property: opacity, filter;transition-property: opacity, filter, -webkit-filter;
	-webkit-transition-duration: 0.15s;transition-duration: 0.15s;-webkit-transition-timing-function: linear;transition-timing-function: linear;font: inherit;	color: inherit;	text-transform: none;
	border: 0;margin: 0 0 0 10px;overflow: visible; }
.hamburger:hover {opacity: 0.7; }
.hamburger.is-active:hover {opacity: 0.7;}
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {background-color: #676f77;}
.hamburger-box {width: 30px;height: 24px;display: inline-block;position: relative;}
.hamburger-inner {display: block;top: 50%;margin-top: -2px;}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {width: 25px;height: 3px;background-color: #676f77;border-radius: 3px;position: absolute;-webkit-transition-property: -webkit-transform;
	transition-property: -webkit-transform;transition-property: transform;transition-property: transform, -webkit-transform;-webkit-transition-duration: 0.15s;	transition-duration: 0.15s;	-webkit-transition-timing-function: ease;
			transition-timing-function: ease;}
.hamburger-inner::before, .hamburger-inner::after {content: "";display: block;}
.hamburger-inner::before {top: -10px;}
.hamburger-inner::after {bottom: -10px;}
.hamburger--collapse .hamburger-inner {top: auto;bottom: 0;-webkit-transition-duration: 0.13s;transition-duration: 0.13s;-webkit-transition-delay: 0.13s;transition-delay: 0.13s;-webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
.hamburger--collapse .hamburger-inner::after {top: -20px;-webkit-transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;	transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;}
.hamburger--collapse .hamburger-inner::before {-webkit-transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
	transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
	transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
	transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
.hamburger--collapse.is-active .hamburger-inner {-webkit-transform: translate3d(0, -10px, 0) rotate(-45deg);transform: translate3d(0, -10px, 0) rotate(-45deg);-webkit-transition-delay: 0.22s;
			transition-delay: 0.22s;-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}
.hamburger--collapse.is-active .hamburger-inner::after {top: 0;	opacity: 0;	-webkit-transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;	transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;}
.hamburger--collapse.is-active .hamburger-inner::before {top: 0;-webkit-transform: rotate(-90deg);transform: rotate(-90deg);-webkit-transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),-webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  }


#dashboard .left-side.aactive ul.left-menu > li > a span.title + img { opacity: 0 !important;}
  
.left-side.aactive {width: 50px !important; }
.left-side.aactive ul.left-menu > li > a{white-space: nowrap !important;}
.left-side.aactive ul.left-menu > li > a span.title{opacity: 0 !important;}
.left-side.aactive ul.left-menu li.menu > a:after{opacity: 0 !important;}



#dashboard .left-side.aactive ul.left-menu > li:first-child {margin-top: 40px !important}




/* #dashboard .left-side.aactive:hover {width: 230px !important; z-index: 1;} */
/* #dashboard .left-side.aactive:hover ul.left-menu > li > a span.title{opacity: 1;} 
#dashboard .left-side.aactive:hover ul.left-menu > li > a span.title + img {opacity: 1;} */




.hamburger.hamburger--collapse.is-active { right: 15px !important; transform: rotate(180deg) !important;  border-radius:100px 0px 0px 100px !important;}
.newWid{width: 75px !important; height: 100vh !important;}
.newW100{width: calc(100% - 75px) !important;}

.position-relative{position: relative;}
#dashboard .left-side.aactive ul.left-menu li.menu.active ul#pmsID, #dashboard .left-side.aactive ul.left-menu li.menu.active ul#dwrID {position: absolute; width: 250px !important;z-index: 1; top: 0;left: 45px; background: #fff !important;  box-shadow:0px 0.3rem 1rem rgba(13,20,49,.25);}

#dashboard ul.left-menu li a.active svg path, #dashboard ul.left-menu li a:hover svg path {fill:rgba(0,0,0,0.7) !important;}

#dashboard .wrapper {width: 100%;}

.hr-page-title{padding: 10px !important; background: #f5f5f5 !important; border: none !important; }
.hr-page-title .section-title {display: inherit !important;  text-align: left !important; }
.hr-page-title .title{font-weight: bold !important; color: #556e7a !important;}

.table.table-bordered.table-striped tr td{word-break: break-word !important;}

.body{background-color: #f5f5f5 !important;}


.container{max-width: 100% !important;}
.newWid .hamburger {right: 28px;}

div#body, body {
  background: #f7f7f7 !important;
}

button#btnbackEmp, button#btnNextEmp {
  display: flex;
  align-items: center;
}
.k-pager-wrap > .k-link {
  display: flex !important;
  align-items: center !important;
}

div#Div_Popup_ID{width: 96%;}

/*******dj 21-10-2020*******/

div#vFinancialYear1 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 75px;
}




@media screen and (max-width:1920px) {
    .hamburger.hamburger--collapse.is-active { right:28px !important; transform: rotate(180deg) !important;}
   /*  div#Div_Popup_ID11 {left: -318px !important;}  
    div#Div_Popup_ID11 .modal-body frame{height: 60vh;} */
    
}
@media screen and (max-width:1370px) {
    .newW100{width: calc(100% - 75px) !important;}
   /*  div#Div_Popup_ID11 {left: -218px !important; top: -50px !important;}  
    div#Div_Popup_ID11 .modal-body frame{height: 80vh;} */
    
}
@media screen and (max-width:1024px) {
  .inrBox .d-lg-flex {flex-wrap: wrap;}
}

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

  .left-side.aactive ul.left-menu > li > a span.title{opacity: 1;}
  .hamburger{display: none !important;}
 
body, html {overflow-x: hidden !important; height: auto !important;}   

#menu_img, .home-txt {padding-top:10px; padding-bottom: 10px;}

#dashboard .right-side .col-xs-8 {width: 100% !important;}
#cssmenu > ul > li {padding: 0;  border-bottom: 1px solid #2a91a9}

.w14left, .w11left, .w18left, .w25left, .w28left, .w20left, .w20right {width: 100% !important; padding: 0 10px; min-height: 30px}

/* .table-for-print tr.footBody td button{margin: 3px !important;}

#responsiveTable .k-grid-content table, #responsiveTable .k-grid-content-locked > table, #responsiveTable .k-grid-header table {table-layout: initial !important;}

#responsiveTable .k-grid-content.k-auto-scrollable, .k-grid-header-wrap.k-auto-scrollable {display: inline-block!Important; width: 100%; height: auto !important;}
#responsiveTable .k-grid-header-locked, #responsiveTable .k-grid-content.k-auto-scrollable.km-widget.km-native-scroller, #responsiveTable .k-grid-content-locked + .k-grid-content{display: inline-block !important; touch-action: initial !important;}

#responsiveTable #grid1.k-grid.k-widget.k-reorderable{overflow: scroll !important; touch-action: initial !important;}

#responsiveTable .k-grid-content.k-auto-scrollable{width: auto !important; height: auto !important;}

#responsiveTable table.k-selectable{touch-action: initial !important;}

#responsiveTable .k-grid-header th.k-with-icon .k-link {width: auto;} */

.table-for-print tr.footBody td button{margin: 3px !important;}

#responsiveTable .k-grid-content.k-auto-scrollable, .k-grid-header-wrap.k-auto-scrollable {display: inline-block !important; height: auto !important;}

#responsiveTable .k-grid-header-locked, #responsiveTable .k-grid-content.k-auto-scrollable.km-widget.km-native-scroller, #responsiveTable .k-grid-content-locked + .k-grid-content{display: inline-block !important; touch-action: initial !important;}

#responsiveTable #grid1 .k-grid-header, #responsiveTable .k-grid-header-locked, #responsiveTable #grid.salary-list.k-grid.k-widget, #responsiveTable #grid1.salary-list.k-grid.k-widget, #responsiveTable #divSalary.grand-info, #responsiveTable #app_list.w20left{width: initial !important;}

#responsiveTable .k-grid-content table, #responsiveTable .k-grid-content-locked > table, #responsiveTable .k-grid-header table {table-layout: initial !important; overflow: scroll !important; touch-action: initial !important;}

#responsiveTable .grid-view table tr td, .grid-view table tr th{width: auto !important;}
#responsiveTable  .k-grid-content-locked {height: auto !important;}


#dashboard .alert.alert-warning .d-flex {flex-wrap: wrap;}

#dashboard .alert-warning label {width:auto; margin-top: 10px;}
#dashboard  .alert-warning select {margin: 0 !important;}
#dashboard  .alert-warning select#MonthId { width: 200px !important;} 
#dashboard .alert-warning  button#btnmangradetback {margin-top: 10px;}

/* .box{padding:15px 0px;} */
button#Submitrefresh { margin: 5px 0px 0px !important;}

.ticketsStyle .padBox span.text-nowrap.pr-1.font-weight-bold {width: 200px;}

div#vFinancialYear{top:40px}
.user-menu .user-porfile .user-info {padding: 4px 10px 4px 10px;}

.w30left.mW100{width: 100% !important;}
.w30left.mW100 .inline-form span {width: 48%; line-height: 21px;}
.w30left.mW100 .inline-form {padding-left: 10px;}
.display-box .display-box-text .w5left .inline-form.mTop-10 button {margin-left: 8px; margin-top: 0px !important;}
/* .alert{padding: 0px !important;} */


.w14left span.k-widget.k-timepicker.k-header{width: 100%;}

.inline-form.mTop-10 button#btnSubmit {margin-top: 0px !important; margin-bottom: 10px;}

/* .table-for-print td{white-space: nowrap;} */
select#MonthId {width: 52px;}

.table-for-print tbody td:nth-child(2), .table-for-print tbody td:nth-child(3) {white-space: nowrap;}

button#btnNextEmp {display: flex; justify-content: center;align-items: center; margin: 0px; padding: 5px 10px; line-height: normal; vertical-align: middle;}
button#btnbackEmp {display: flex; justify-content: center; align-items: center; margin: 0px; padding: 5px 10px; line-height: normal; vertical-align: middle;}
.box-header h2{line-height:normal}

.container, .container-fluid {padding: 0px !important; margin: 0px !important;}
.box-body .inrBox .col-auto {padding-left: 0px !important; width: 50% !important; float: left;}
.left-side{height: auto !important;}
.table-for-print, .table-for-print tr.footBody td button{font-size: 12px !important; padding: 5px 10px;}

.r-pad-6, #dashboard .right-side .col-box, .col-xs-10.l-pad-6, .modal-body, .wrapper .row .col-xs-5, .wrapper .row .col-sm-7{padding:0px !important ;}
.box-header h2.mt-4 {margin-top: 0px !important;}
.box{padding: 0px !important;}

.table-for-print tr.footBody td{padding: 5px !important;}

table.table-for-print tbody tr td:nth-child(2) select#MonthId {width: 96px;}

.w14left, .w11left, .w18left, .w25left, .w28left, .w20left{padding: 0px !important;}

#menu_img, .home-txt {padding-top: 7px !important;  padding-bottom: 5px !important;}

#dashboard .left-side{margin-top: 10px;}

div#Div_Popup_ID11{left: 0px !important;}


div#vFinancialYear1 {height: 44px;}


}

@media screen and (max-width:650px){
    #dashboard .right-side .col-box.col-xs-6, #dashboard .right-side .col-box.col-xs-12{width: 100% !important;}
    #dashboard .right-side .col-xs-4{width: 100% !important;}
    .beta{margin: 5px 0 0 0px; font-size: 11px;}
    .user-menu .user-logout{margin-left: 0px;}
    .companyname {font-size: 12px;}
    .mW100{width: 100%;}
     .mFlexWrap650 {flex-wrap: wrap;}
   .inrBox .col-auto.pl-lg-0 {padding: 0px; }
   .goal .col-auto { margin-left: 0px !important;  padding-left: 0px !important; }

   


}

@media screen and (max-width:450px){
    .w30left.mW100 .inline-form span{width: 100%;}
    .k-grid tbody .k-button, .k-ie8 .k-grid tbody button.k-button{min-width: auto !important;}
    .box-body .inrBox .col-auto{width: 100% !important; font-size: 14px !important;}
    .inrBox .d-lg-flex{padding: 8px !important; display: table;}
    .display-box .display-box-head{display: flex;}
    .display-box .display-box-head span{margin-right: 5px;}

}

@media screen and (max-width:330px){
  .box-body .inrBox .col-auto{width: 100% !important; font-size: 12px !important;}
  .table-for-print{font-size: 10px !important;}
}