html {
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
}

.search-within-outer {
  padding: 18px 0 20px;
}

.search-block {
  width: 100%;
}

.search-back {
  width: 50px;
  padding-right: 15px;
}

.search-input {
  outline: none;
}

.search-back .btn {
  width: 100%;
  padding: 7px;
  font-size: 20px;
  color: #fff;
}

.search-back .btn .material-icons {
  line-height: 26px;
}

.card-style {
  background-color: #fff;
  border-radius: 6px;
  position: relative;
  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}

.emp-profilepic-cell {
  width: 124px;
  height: 120px;
  padding: 15px 22px;
}

.emp-profilepic-cell .initial {
  max-width: 100%;
  max-height: 100%;
  width: 70px;
  height: 72px;
  line-height: 70px;
  position: absolute;
  z-index: 1;
  left: 4px;
  top: 4px;
  font-size: 30px;
}

.dot-dange {
  display: inline-block;
  width: 3px;
  height: 3px;
  background: #F00;
  position: absolute;
  top: 0px;
  left: 50%;
  margin: -5px 0 0 -2px;
  border-radius: 45%;
  -webkit-border-radius: 45%;
  -ms-border-radius: 45%;
  overflow: hidden;
}

.emp-propic-placeholder {
  width: 72px;
  height: 72px;
  position: relative;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  background: #f4f4f4;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  cursor: pointer;
}

.upload-profile-pic {
  position: absolute;
  z-index: 5;
  top: 4px;
  left: 4px;
}

.center-link {
  color: #4282be;
  padding: 5px 0;
  display: block;
  text-align: center;
  clear: both;
  cursor: pointer;
}

.empname-designation,
.empname,
.field-data,
.employee-phone,
.employee-doj {
  color: #494949;
}

.empname {
  font-size: 22px;
  line-height: 22px;
  font-family: 'DIN Bold';
  margin-bottom: 4px;
}

.empname .empc {
  font-size: 12px;
  margin-left: 10px;
}

.empname:empty:after,
.employee-designation:empty:after,
.employee-department:empty:after,
.employee-location:empty:after,
.emp-designation span:empty:before,
.emp-code-col .field-data:empty:after,
.emp-expected-doj .field-data:empty:after,
.employee-phone:empty:after,
.employee-email:empty:after {
  color: #e3e3e3;
}

/*.empname:empty:after {
	content:'New Employee Name';
	font-size:20px;
	line-height:20px;
	font-family:'DIN Bold';
	margin-bottom:4px;
	white-space:inherit;
}
.employee-designation:empty:after {
	content:'Designation';
	font-weight:lighter;
}
.employee-department:empty:after {
	content:'Department';
}
.employee-location:empty:after {
	content:'Location';
}
.employee-phone:empty:after {
	content:'+91 00000 00000';
}
.employee-email:empty:after {
	content:'newemployee@gmail.com';
}*/
.employee-email {
  color: #4282be;
}

.emp-designation {
  font-size: 11px;
}

.emp-designation .emp-desig-grade {
  display: inline-block;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.emp-designation span+span {
  position: relative;
}

.emp-designation .emp-desig-grade+.employee-department:before,
.emp-designation .emp-desig-grade+.employee-location:before,
.emp-designation .emp-desig-grade+.employee-department+.employee-location:before {
  content: "|";
  margin-left: 3px;
  margin-right: 3px;
}

/*.emp-code-col .field-data:empty:after, .emergency-no .field-data:empty:after, .employee-relation .field-data:empty:after, .blood-group-col .field-data:empty:after {
	content:"- -";
}
.emp-expected-doj .field-data:empty:after {
	content:"DD Mon YYYY";
	font-weight:lighter;
}*/

.emergency-no .field-data {
  font-weight: bold;
}

.employee-relation .field-data {
  font-weight: lighter;
}

.emp-card-outer {
  padding: 20px 0;
}

.emp-code-col {
  width: 20%;
  float: left;
}

.emp-expected-doj {
  width: 85px;
}

.blood-group-col {
  width: 10%;
  float: left;
}

.field-label {
  display: block;
  width: 100%;
  font-family: 'DIN Regular';
  font-weight: normal;
  color: #8d8d8d;
  margin: 0px;
}

.field-data {
  font-weight: bold;
}

.emp-profilecard-inner {
  padding-left: 124px;
  height: 130px;
}

.emp-profilecard-inner:after,
.emp-profilecard-inner:before {
  content: '';
  display: table;
  visibility: hidden;
  clear: both;
}

.profile-progress-large {
  position: absolute;
  left: 0px;
  top: 0px;
}

.emp-info-card .table-layout+.table-layout {
  border-top: solid 2px #f2f2f2;
}

.emp-details-col {
  vertical-align: top;
  color: #b5b5b5;
}

.empname-designation,
.emp-code-col,
.emp-expected-doj {
  display: inline-block;
  height: 62px;
}

.emp-fields-saprator {
  display: inline-block;
  width: 100%;
  height: 2px;
  background: #e3e3e3;
  float: left;
}

.emp-code-col,
.emp-expected-doj {
  float: right;
}

.empname-designation,
.emp-code-col,
.emp-expected-doj {
  padding: 10px 0 10px;
}

.empname-designation {
  width: 100%;
  float: left;
}

.empon-socialnetwork,
.emp-email-col,
.emp-doj-col,
.emp-contacts,
.blood-group-col,
.emp-default-col {
  padding-top: 15px;
  line-height: 18px;
}
.emp-default-col {
  min-width: 80px;
}

.emp-email-col .mdi {
  color: #777;
  margin-right: 5px;
}

.empon-socialnetwork {
  width: 28%;
  float: left;
}

.empon-socialnetwork span {
  display: inline-block;
  margin-right: 30px;
}

.empon-socialnetwork .mdi {
  font-size: 14px;
}

.empon-socialnetwork .mdi-linkedin {
  color: #3b7eb3;
}

.empon-socialnetwork .mdi-twitter {
  color: #3ab4f5;
}

.empon-socialnetwork .mdi-facebook {
  color: #496198;
}

.label-left {
  width: 110px;
  display: inline-block;
}

.emp-contacts {
  width: 35%;
  float: left;
}

.emp-email-col {
  width: 35%;
  float: left;
}

.emp-doj-col {
  width: 27%;
  float: left;
}

.emp-contacts .label-left,
.blood-group-col .field-label {
  color: #8d8d8d;
}
.emp-profilecard-inner.card-custom-height {
  padding-left: 90px;
  height: 80px;
}
.emp-profilecard-inner.card-custom-height .emp-profilepic-cell {
  width: 80px !important;
  height: 80px !important;
  padding: 15px !important;
}
.emp-profilecard-inner.card-custom-height .profile-progress-large .c100 {
  position: relative;
  font-size: 0px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  float: left;
  margin: 0 1px 1px 0;
  background-color: #fff;
}
.emp-profilecard-inner.card-custom-height .emp-profilepic-cell .initial {
  max-width: 100%;
  max-height: 100%;
  width: 50px;
  height: 50px;
  line-height: 50px;
  position: absolute;
  z-index: 1;
  left:0px;
  top:0px;
  font-size: 30px;
}

.emp-profilecard-inner.card-custom-height .empname-designation, .emp-profilecard-inner.card-custom-height .emp-code-col, .emp-profilecard-inner.card-custom-height .emp-expected-doj {
  padding: 20px 0 0px;
}
.emp-profilecard-inner.card-custom-height .profile-progress-large .c100:after {
  display: none;
}
.emp-profilecard-inner.card-custom-height .profile-progress-large .c100 img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.tab-section {
  padding-top: 29px;
 /* margin-right: -32.5px;
  margin-left: -32.5px;*/
}

.tab-bar {
  display: table;
  table-layout: fixed;
  width: 100%;
  /*padding-right: 32.5px;
  padding-left: 32.5px;*/
}

.tab-bar ul {
  height: 52px;
  display: table-row;
}

.tab-bar ul li {
  display: table-cell;
  /*text-transform: uppercase;*/
  position: relative;
  z-index: 1;
}

.tab-bar ul li:after {
  content: '';
  position: absolute;
  bottom: 0px;
  right: 0px;
  left: 0px;
  height: 2px;
  background: #6da4d8;
}

.tab-bar ul li a {
  height: 50px;
  padding: 10px;
  display: block;
  background-color: #d5d5d5;
  color: #777777;
  font-family: 'DIN Bold';
  letter-spacing: 0.5px;
  line-height: 14px;
  border-right: solid 2px #e3e3e3;

}

.tab-bar ul li:last-child a {
  border: none;
  border-radius: 0 5px 0 0;
}
.first a {
  border-radius: 5px 0 0 0;
}

.tab-bar ul li.last a {
  border: none;
}

.tab-bar ul li.last a {
  border-radius: 0 5px 0 0;
}

.tab-bar ul li.active a {
  background-color: #4282be;
  color: #fff;
  position: relative;
  z-index: 2;
  border-radius: 5px 5px 0 0;
}

.tab-details {
  padding-top: 9px;
  /*padding-right: 32.5px;
  padding-left: 32.5px;*/
  box-shadow: 0 -3px 2px -2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 -3px 2px -2px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0 -3px 2px -2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 -3px 2px -2px rgba(0, 0, 0, 0.1);
  position: relative;
}

.panel .panel-heading {
  padding: 15px 15px 0 15px;
  height: 50px;
  color: #333;
  background-color: #fff;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.panel.open .panel-heading,
.panel.panel-open .panel-heading {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom: solid 1px #f5f5f5;
}

.panel {
  margin-bottom: 10px;
  border-radius: 5px;
  position: relative;
  background-color: #fff;
  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}

.panel .panel-body {
  display: none;
}

.panel.panel-open .panel-body {
  display: block;
}


.panel-open .panel-title,
.panel-done .panel-title,
.panel-multiple-open .panel-title,
.panel-multiple-done .panel-title {
  color: #494949;
}


.panel-title {
  font-size: 18px;
  color: #494949 !important;
  letter-spacing: -0.5px;
  line-height: 18px;
}

.panel-body {
  padding: 13px 15px 15px 15px;
}

.panel-heading .panel-count-outer {
  display: inline-block;
  float: left;
  margin: -5px 10px 0 0;
}

.panel-count-outer .panel-count-cell {
  display: table-cell;
  width: 30px;
  height: 30px;
  text-align: center;
  vertical-align: middle;
  font-size: 18px;
  font-family: 'DIN Bold';
  background: #fff;
  color: #4282be;
  border: solid 0.5px #4282be;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
}

.panel-right-option {
  color: #4282be;
  display: inline-block;
  float: right;
  line-height: 18px;
}

.fields-group {
  list-style: none;
  padding: 0px;
  margin-bottom: 0px;
  margin-left: -15px;
  margin-right: -15px;
  display: flex;
  flex-wrap: wrap;
}

.fields-group>li {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 12px;
  float: left;
}

.fields-group>li>label, .fields-group li .fields-label {
  font-family: 'DIN Medium';
  font-size: 12px;
  color: #494949;
  margin-bottom: 5px;
}

.column-5>li {
  width: 20%;
}

.column-3>li {
  width: 33.33%;
}

.column-3>li.column-3-offset-2 {
  width: 66.66%;
}

.formfield-control,
.multiselect-dropdown .dropdown-btn {
  display: block;
  position: relative;
  width: 100%;
  height: 30px;
  padding: 3px 12px 5px 12px  !important;
  font-size: 12px !important;
  line-height: 14px;
  color: #979797 !important;
  background-color: #f5f5f5 !important;
  background-image: none;
  border: 1px solid #f5f5f5 !important;
  border-radius: 5px;
  letter-spacing: 0.5px;
}
.multiselect-dropdown .dropdown-btn {
  display: block;
  position: relative;
  width: 100%;
  height: 30px;
  padding: 5px 24px 5px 12px !important;
}
mat-form-field.formfield-control { display:block; }
.open > .dropdown-toggle.formfield-control {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.18);
    -webkit-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.18);
	background: #fff !important;
}
input[type="text"].formfield-control {
  color: #979797 !important;
}

.formfield-control-style {
  display: block;
  position: relative;
  width: 100%;
  height: 30px;
  padding: 3px 0px;
  font-size: 12px;
  line-height: 24px;
  color: #979797;
  letter-spacing: 0.5px;
}

.active>.formfield-control {
  border: solid 1px #4282be;
}
.formfield-control.white, .white .formfield-control,
.white .new-dropdown-style .dropdown-button,
.white .multiselect-dropdown .dropdown-btn
{
  background-color: #fff !important;
  border-color:  #fff !important;
}
.formfield-control .text-dropdown, .arrow-dropdown .text-dropdown {
  display: block;
  padding-top: 2px;
  position: relative;
  z-index: 1;
  white-space: nowrap;
  overflow: hidden;
  padding-right: 20px;
}
.btn.arrow-dropdown .text-dropdown, .dropdown-button.arrow-dropdown .text-dropdown {
  padding-top: 1px;
}
.single-drop-label {
  display: inherit;
  overflow: hidden;
}
.formfield-control .mdi, .arrow-dropdown .mdi {
  position: absolute;
  top: 8px;
  right: 5px;
  font-size: 20px;
  color: #adadad;
  z-index: 0;
}
.white .select-dropdown .dropdown-button .mdi {
  background-color: #fff !important;
}
.multiselect-dropdown .dropdown-btn .dropdown-multiselect__caret {
  line-height: 16px;
  display: block;
  position: absolute;
  box-sizing: border-box;
  width: 30px !important;
  height: 30px !important;
  right: 1px;
  top: 0;
  padding: 6px 6px !important;
  margin: 0;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: transform .2s;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.multiselect-dropdown .dropdown-btn .dropdown-multiselect__caret:before {
  content: "\F140" !important;
  display: inline-block;
    font: normal normal normal 24px/1 "Material Design Icons";
    line-height: inherit;
    font-size: 22px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    right: 0;
    top: 0% !important;
    color: #aeaeae !important;
    margin-top: 0px !important;
    border-style: none !important;
    border-width: 0 !important;
    border-color: inherit !important;
    line-height: 20px !important;
}
ng-multiselect-dropdown .dropdown-btn {
  padding: 0px !important;
  border: none !important;
}
ng-multiselect-dropdown .dropdown-btn:focus { outline: none;}
ng-multiselect-dropdown .dropdown-btn .selected-item {
  background: #777 !important;
  border: none !important;
}
ng-multiselect-dropdown .dropdown-btn .dropdown-down,
ng-multiselect-dropdown .dropdown-btn .dropdown-up {
  border: none !important;
  position: relative;
  top: 0px !important;
  width: 24px !important;
  height: 24px !important;
  right: -10px;
}
ng-multiselect-dropdown .dropdown-btn .dropdown-down:after,
ng-multiselect-dropdown .dropdown-btn .dropdown-up:after {
  content: "\F140" !important;
  font: normal normal normal 24px/1 "Material Design Icons";
  color: #aeaeae;
  position: absolute;
  right: 0;
  top:0;
}
ng-multiselect-dropdown .dropdown-btn span > span.ng-star-inserted { float: left; margin-top: 0px;}
ng-multiselect-dropdown .multiselect-dropdown .dropdown-list { margin-top: 0px !important;}
.panel-footer {
  padding: 0px 0px 0px;
  text-align: right;
}

.check-radio-inline {
  display: inline-block !important;
  margin-right: 15px;
  padding-left: 20px;
}

.check-radio-inline label {
  font-family: 'DIN Regular';
  padding-left: 0px !important
}

.radio.check-radio-inline label:after {
  top: 4px !important;
}

.radio-check-row {
  padding: 10px 0px;
}

.btn+.btn {
  margin-left: 10px;
}

.datepicker {
  position: relative;
}

.calendar-icon {
  display: block;
  width: 12px;
  height: 13px;
  background: url(../images/app-icons/calendar.png) no-repeat;
}

.datepicker .calendar-icon {
  position: absolute;
  right: 10px;
  top: 8px;
  z-index: 1;
}

.formfield-control.sortby {
  background-color: #ffffff !important;
  border-color: #fff;
  color: #777;
}

.amount-col {
  text-align: right;
}

.amount-col+.amount-col {
  padding-right: 50px !important;
}

.sort-by-block.show-always {
  display: block;
}

.view-details-col .material-icons {
  font-size: 14px;
  float: left;
  margin-right: 5px;
}

.dropdown-calender {
  width: 237px;
  border-radius: 0 5px 5px 5px;
}

.duration-tab,
.monthyear-section {
  display: table;
  table-layout: fixed;
  width: 100%;
  /*margin-top: 5px;*/
  height: 30px;
  /*margin-bottom: 10px;*/
}

.duration-tab .tab-cell {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-bottom: solid 1px #e3e3e3;
  position: relative;
  cursor: pointer;
}

.duration-tab .tab-cell.active:after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #4282be;
}

.duration-tab .tab-cell .date-selected {
  color: #515151;
  font-weight: 600;
  margin-left: 5px;
}

.duration-tab .tab-cell .date-selected:empty:after {
  content: 'Choose date';
  color: #afafaf;
  letter-spacing: 0.3px;
}

.month-mover,
.current-monthyear {
  vertical-align: middle;
}

.current-monthyear {
  text-align: center;
  color: #494949;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.month-mover {
  width: 46px;
  color: #aeaeae;
  font-size: 22px;
}

.month-mover .mdi {
  cursor: pointer;
}

.month-mover.left {
  text-align: right;
}

.month-mover.right {
  text-align: left;
}

.calendar-outer {
  padding: 5px 15px 0px;
}

.weekdays {
  margin-bottom: 5px;
}

.weekdays li {
  display: block;
  position: relative;
  float: left;
  width: 14.2%;
  font-size: 10px;
  color: #0a0a14;
  text-align: center;
  padding-bottom: 8px;
  border-bottom: solid 1px #e3e3e3;
  cursor: pointer;
}

.weekdays li.active {
  color: #4282be;
  font-weight: bold;
}

.weekdays li.active:after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #4282be;
}

.days li {
  display: block;
  width: 14.2%;
  float: left;
  height: 28px;
  line-height: 28px;
  text-align: center;
  margin-bottom: 3px;
  font-size: 10px;
  color: #0a0a14;
  cursor: pointer;
}

.days li.active {
  background: #4282be;
  color: #fff;
  border-radius: 50%;
}

.days li.next-mdate {
  color: #a9a9b2;
}

.calendar-footer {
  display: inline-block;
  width: 100%;
  padding: 3px 15px 7px;
  text-align: right;
}

.filtered-data-outer {
  max-width: 300px;
  padding-left: 10px;
  width: 310px;
  min-width: 310px;
  position: relative;
}

.filtered-result-outer {
  display: table;
  width: 100%;
  color: #777;
  text-transform: uppercase;
  height: 30px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.drop-file-con {
	padding: 10px 0;
}
.drop-file-con .drop-note {
	color: #adadad;
	margin-bottom: 10px;
}
.drop-file-con .drop-file-area {
	border: dashed 1px #adadad;
	padding: 15px;
	text-align: center;
	border-radius: 5px;
	margin-bottom: 10px;
}
.drop-file-con .drop-file-area .drop-inner-info {
	display: inline-table;
	table-layout: fixed;
	text-align: center;
	width: 70%;
}
.drop-file-con .drop-file-area .drop-inner-info .drop-here-text {
	font-weight: bold;
	color: #adadad;
	font-size: 18px;
}

.filtered-data-outer .card-style.open .filtered-result-outer {
  background-color: #fff;
  border-radius: 6px;
  position: relative;
  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}

.filtered-result-outer .mdi {
  font-size: 22px;
  color: #adadad;
}

.filtered-result-outer .filtered-data {
  width: 74px;
  padding: 0 6px;
}

.filtered-result-outer .td {
  vertical-align: middle;
}

.filtered-result-outer .filtered-data.left {
  text-align: left;
}

.filtered-result-outer .filtered-data.left .mdi {
  float: left;
  height: 15px;
}

.filtered-result-outer .filtered-data.right .mdi {
  float: right;
  height: 15px;
}

.filtered-result-outer .filtered-data.right {
  text-align: right;
}

.filtered-result-outer .filtered-data span+span {
  margin-left: 5px;
}

.filtered-result-outer .filtered-list {
  text-align: center;
  border-left: solid 1px #e3e3e3;
  border-right: solid 1px #e3e3e3;
  padding: 0px 6px;
}

.filtered-result-outer .filtered-list .mdi {
  float: right;
}

.afd-container {
  display: none;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  padding-top: 30px;
}

.filtered-holder.open .afd-container {
  display: block;
}

.af-block {
  padding: 15px;
  border-bottom: solid 2px #e3e3e3;
}

.af-block .af-title {
  text-transform: uppercase;
  color: #777;
  margin-bottom: 5px;
  font-weight: 600;
}

.af-block .af-content {
  color: #adadad;
  text-transform: uppercase;
}

.af-block .af-content span:after {
  content: ' + ';
  font-size: 16px;
}

.af-block .af-content span:last-child:after {
  display: none;
}

.af-block .af-content span {
  display: inline-block;
  font-size: 12px;
  max-width: 95%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: lighter;
}

.af-datalist-block {
  max-height: 400px;
  overflow: auto;
}

.af-datalist-block .empimg {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  float: left;
  margin-right: 10px;
}

.af-datalist-block .datalist-details {
  float: left;
}

.af-datalisting li {
  padding: 15px;
  clear: both;
}

.af-datalisting li .af-datalisting-subdetails {
  text-transform: uppercase;
}

.desktop-none {
  display: none !important;
}

.m-th-label {
  color: #777777;
  font-family: 'DIN Bold';
  margin-bottom: 3px;
}

.bulk-actionblock .btn.text-center {
  text-align: center !important;
}

.suspension-tu {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  float: left;
  margin-right: 10px;
}
.mb20 {
  margin-bottom: 20px !important;
}
.drop-file-con {
  padding: 10px 0;
}
.drop-file-con .drop-note {
  color: #adadad;
  margin-bottom: 10px;
}
.drop-file-con .drop-file-area {
  border: dashed 1px #adadad;
  padding: 15px;
  text-align: center;
  border-radius: 5px;
  margin-bottom: 10px;
  position: relative;
}
.drop-file-con .drop-file-area .drop-inner-info {
  display: inline-table;
  table-layout: fixed;
  text-align: center;
  width: 70%;
}
.drop-file-con .drop-file-area .drop-inner-info .drop-here-text {
  font-weight: bold;
  color: #adadad;
  font-size: 18px;
}
.panel-right-option .mdi-download { font-size: 16px; line-height: 14px; float: left; margin-right: 2px;}

.drop-file-area .ui-fileupload {
  float: inherit !important;
  padding: 0 !important;
  display: inline-block;
  position: inherit !important;
}
.drop-file-area .ui-fileupload-buttonbar,
.drop-file-area .ui-fileupload-choose
{ position: inherit !important;}
.drop-file-area  .ui-button-icon-left { display: none;}
.drop-file-area .ui-button-text-icon-left .ui-button-text {
  padding: .3em 1.3em !important;
}
.drop-file-area .ui-fileupload .ui-fileupload-buttonbar .ui-fileupload-choose input {
  width: 100% !important;
  display: block;
  height: inherit !important;
  top: 0px !important;
  bottom: 0px !important;
}


.card-col {
  padding-top: 15px;
  line-height: 18px;
  vertical-align: top;
}
.viewall-carcol {
  width: 100px;
  float: right;
  text-align: center;
}
.card-integrated-outer {
  margin: 10px -10px 10px -10px;
}
.card-integrated-inner {
  background-color: #fff;
  border-radius: 6px;
  margin: 10px;
  padding: 15px;
  height: 210px;
  position: relative;
  -webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.07);
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.07);
}
.card-integrated-title {
  font-family: 'DIN Bold';
  font-size: 16px;
  margin-bottom: 15px;
  color: #494949;
}
.card-integrated-title .link {
  float: right;
  font-family: 'DIN Regular';
  font-size: 14px;
}
.card-it-border {
  background: #f5f5f5;
  height: 1px;
  margin-left: -15px;
  margin-right: -15px;
}
.linktabs {
  margin: 0;
  padding: 0;
  padding-top: 0px;
  padding-top: 5px;
  list-style: none;
  border-bottom: solid 1px #e5e5e5;
}
.linktabs li {
  display: inline-block;
  position: relative;
}
.linktabs li + li {
  margin-left: 12px;
}
.linktabs li a {
  text-decoration: none;
  text-transform: uppercase;
  color: #494949;
  font-size: 14px;
  display: block;
  padding: 8px 3px;
  font-family: 'DIN Regular';
  font-weight: 100;
}
.linktabs li.active a {
  color: #0598e6;
}
.linktabs li.active a::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #4282be;
}
.intergrated-skills {
  margin-left:-5px;
  margin-right:-5px;
  list-style: none;
  padding: 10px 0;
}
.intergrated-skills li {
  display: inline-block;
  list-style: none;
  margin:5px;
  padding: 8px 20px;
  background: #d7fbed;
  text-align: center;
  border-radius: 5px;
  font-family: 'DIN Medium';
  font-weight: 100;
}
.intergrated-skills li.lightred {
  background: #ffdddd;
}
.intergrated-skills li.extreemlightred {
  background: #fff3e3;
}
.intergrated-skills li.moretab {
  background: #f6f6f6;
  color: #4d6fb6;
}
.card-ib-bottom {
  position:absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  text-align: right;
}
.card-ib-bottom .link {
  font-family: 'DIN Regular';
  font-size: 14px;
}
.integrated-progressbar {
  width: 80px;
  height: 8px;
  background: #eaf0ff;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.integrated-progressbar:after {
  content: '';
  display: block;
  width: 1px;
  height: 8px;
  background: #fff;
  position: absolute;
  right: 20%;
  top: 0;
  z-index: 2;
}
.integrated-progressbar:before {
  content: '';
  display: block;
  width: 1px;
  height: 8px;
  background: #fff;
  position: absolute;
  left: 20%;
  top: 0;
  z-index: 2;
}
.progress-layer {
  height: 8px;
}
.inted-progress-count {
  font-size: 16px;
  padding-bottom: 5px;
  text-align: center;
}
.card-i-tableouter table td {
  padding: 10px 0;
  font-family: 'DIN Medium';
  color: #494949;
}
.orgchartsubemp {
  background: #fff;
  border: solid 1px rgb(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px 0px rgb(0 0 0 / 15%);
  border-radius: 5px;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  display: inline-block;
  padding: 5px 10px 5px 10px;
}
.maxw-80 { max-width: 80%;}
.inte-sl-outer {
  padding: 30px 0;
  margin: 0 30px;
  position: relative;
}
.careerpathico-outer {
  display: table-cell;
  vertical-align: middle;
  width: 70px;
}
.inte-sl-wrap li .careerpath-icon {
  width: 70px;
  height: 70px;
  background: #eaf0ff;
  border-radius: 50%;
  text-align: center;
  line-height: 70px;
  font-size: 36px;
  color: #6da4d8;
}
.inte-sl-wrap li .cpath-textouter {
  display: table-cell;
  vertical-align: middle;
  padding-left: 20px;
}
.cpath-post {
  font-family: 'DIN Bold';
  color: #494949;
  margin-bottom: 3px;
  font-size: 14px;;
}
.scount { color: #494949; font-family: 'DIN Medium'; font-size: 14px;}
.cpath-matchskills {
  line-height: 16px;
  font-size: 14px;
}
.inte-sl-outer .mdi-scroll-icons {
  font-size: 30px;
  position: absolute;
  top: 50%;
  color: #6da4d8;
  margin-top: -12px;
  width: 30px;
  height: 24px;
  text-align: center;
  line-height: 24px;
}
.inte-sl-outer .mdi-chevron-left {
  left: -35px;
}
.inte-sl-outer .mdi-chevron-right {
  right: -35px;
}
.milestonedate_col {
  width: 60px;
  height: 80px;
  vertical-align: middle;
  position: relative;
  background: url("../images/default_icons/empplate.png") no-repeat;
}

.milestonedate {
  width: 60px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  font-family: 'DIN Bold';
}
.milestonedate span {
  display: block;
  clear: both;
  font-size: 10px;
  font-family: 'DIN Regular';
}
.milestonetext_col {
  padding-left: 30px !important;
}
.milestonetext_col .mdi-email {
  font-size: 36px;
  color: #d5cd22;
}
.appreciation_title {
  font-size: 14px;
  font-family: 'DIN Bold';
  color: #494949;
  padding: 5px 0;
}
.orgchart_subdirectory { min-width: 45px;}
.subdirectory-arrow-right {
  display: block;
  width: 40px;
  height: 48px;
  position: absolute;
  z-index: 2;
  background: url("../images/default_icons/emparrow.png") no-repeat;
  top: -5px;
  right: 5px;
}
.orgchartimg_col {
  width: 40px;
  padding: 0px !important;
}
.orgchartimg_col img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.orgcharttext_col {
  padding-left: 20px !important;
}
.orgchart_subdirectory + .orgcharttext_col, .orgchart_subdirectory {
  padding: 0px !important;
}
.initial.initial40 {
  width: 40px;
  height: 40px;
  max-height: 40px;
  max-width: 40px;
  line-height: 38px;
}
.orgchart_subdirectory .mdi {
  font-size: 70px;
  color: #eaf0ff;
  position: absolute;
  top: -10px;
  right: -30px;
}
.filenotuploaded {
  border: solid 1px #f8b3b2;
  background-color: #fce8e6;
  color: #e71d09;
  padding: 15px;
  border-radius: 5px;
  line-height: 20px;
}
.fnotu-title {
  font-family: 'DIN Bold';
  color: #e71d09;
  margin-bottom: 5px;
}
.errorlegends {
  padding: 7px 0;
  border-bottom: dashed 1px #aeaeae;
  margin-bottom: 10px;
}
.errorlegends > span + span {
  margin-left: 30px;
}
.link-input-style {
  display: inline-block;
  padding: 3px 10px;
  background: #fff;
  border-radius: 5px;
}
.orange-color {
  color: #ffb532 !important;
}
.orange-bg {
  background: #ffb532;
}



.tab-row-table {
	display: table;
	width: 100%;
}
.tab-row-table .title-cell {
	display: table-cell;
	width: 100%;
}
.tab-row-table .btn-cell {
	display: table-cell;
	padding-left: 10px;
	vertical-align: middle;
}
.DW190px { width: 190px;}
.statusprogress-outer {
	width: 100%;
	float: left;
	padding: 10px 0;
}
.dot-progressbar {
	width: 100%;
	height: 2px;
	background: #eee;
	position: relative;
	display: table;
	table-layout: fixed;
	margin: 15px 0px 50px 0 !important;
	padding: 0;
	list-style: none;
}
.dot-progressbar li {
	display: table-cell;
	position: relative;
}
.dot-progressbar li .stepdots {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #eee;
	position: absolute;
	top: -9px;
	left: 0;
	z-index: 1;
}
.dot-progressbar li:last-child {
	width: 20px;
	text-align: right;
}
.stepdcontents {
	display: inline-block;
	white-space: nowrap;
	position: absolute;
	left: 0;
	top: 15px;
}
.dot-progressbar li:last-child .stepdcontents {
	right: 0;
	left: initial;
}
.indibar {
	height: 2px;
}
.dot-progressbar li.done .indibar,
.dot-progressbar li.done .stepdots {
	background: #70cf26;
}

.dot-progressbar li.pending .indibar,
.dot-progressbar li.pending .stepdots {
	background: #f0af3f;
}
.dot-progressbar li.awaiting .indibar,
.dot-progressbar li.awaiting .stepdots {
	background: #e71d09;
}
.redStrikethrough {
	color: #e71d09;
	text-decoration: line-through;
}
.fields-label-none .fields-label { display: none;}


.fs-14 {
  font-size: 14px;
}
.blue-color {
  color: #4282be !important;
}
.initial24 {
  width: 24px;
  height: 24px;
  display: inline-block;
  text-align: center;
  line-height: 23px;
  font-family: 'DIN Bold';
  color: #494949;
  font-size: 12px;
  border-radius: 50%;
}
.initial24.gradient1 {
  background: rgb(223,216,254);
  background: linear-gradient(220deg, rgba(223,216,254,1) 30%, rgba(251,230,254,1) 71%);
}
.initial24.gradient2 {
  background: rgb(254,237,227);
  background: linear-gradient(220deg, rgba(254,237,227,1) 30%, rgba(253,201,215,1) 71%);
}
.initial24.gradient3 {
  background: rgb(227,244,255);
  background: linear-gradient(220deg, rgba(227,244,255,1) 30%, rgba(193,218,255,1) 71%);
}
.initial24.gradient4 {
  background: rgb(253,244,229);
  background: linear-gradient(180deg, rgba(253,244,229,1) 30%, rgba(241,228,221,1) 71%);
}

.panel-heading-rt-option {
	float: right;
	line-height: 18px;
}
.panel-heading-rt-option .mdi + .mdi {
	margin-left: 20px;
	cursor: pointer;
}
.panel-heading-rt-option .mdi {
	line-height: 18px;
	height: 18px;
	float: left;
  font-size: 24px !important;
}
.dropdown.disabled,
.formfield-control.disabled,
.disabled .dropdown-button,
.dropdown-button.disabled {
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}
.tab-section2 {
  padding-top: 10px;
}
.tab-bar2 ul li{
  text-transform:uppercase;
  position:relative;
  z-index:1;
}
.tab-bar2 ul li a{
  display:block;
  background-color:#d5d5d5;
  color:#777777;
  font-family: 'DIN Bold';
  letter-spacing:0.5px;
  line-height:14px;
  border-right:solid 2px #e3e3e3;

}
.tab-bar2 ul li:last-child a{
  border:none;
  border-radius: 0 5px 0 0;
}
.tab-bar2 ul li.first a{
  border-radius:5px 0 0 0;
}
.tab-bar2 ul li.active a{
  background-color:#4282be;
  color:#fff;
  position:relative;
  z-index:2;
  border-radius:5px 5px 0 0;
}
.tab-section-normal {
  padding-top: 10px !important;
  margin-right: 0px !important;
  margin-left: 0px !important;
}
.simple-tab-bar ul li a {
	background: none !important;
	border: none !important;
}
.simple-tab-bar ul li.active a,
.simple-tab-bar ul li a {
	color: #494949 !important;
}
.simple-tab-bar ul {
	border-bottom: none !important;
}
.simple-tab-bar ul li.active a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background-color: #6da4d8;
}
.mat-form-field {
  padding: 2px 12px !important;
}
.formfield-control.datepicker-field .mat-form-field {
  padding: 0px 0px !important;
}
.filter-showHide {
  position: relative;
}
.filter-showHide .filter-toggle {
  top: -40px;
  bottom: inherit;
}
.cal-date-title {
  font-size: 10px;
  font-family: 'DIN Bold';
  color: #494949;
}
.cal-month-block {
  padding: 15px;
}
.cal-month-block ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 -5px;
}
.cal-month-block ul li {
  display: block;
  width: 50%;
  padding: 5px;
}
.cal-month-block ul li .btn-month {
  display: block;
  padding: 5px 10px;
  height: 24px;
  line-height: 12px;
  font-family: 'DIN Medium';
  font-size: 10px;
  color: #494949;
  text-decoration: none;
  border: solid 1px #e4e5e6;
  border-radius: 4px;
}
.active > .startenddate,
.active > .btn-month {
  border-color: #2A5EE3 !important;
}
.cal-month-block ul li .startenddate {
  display: block;
  text-align: left;
  height: 40px;
  padding: 5px 10px;
  line-height: 12px;
  font-family: 'DIN Medium';
  font-size: 10px;
  color: #494949;
  text-decoration: none;
  border: solid 1px #e4e5e6;
  border-radius: 4px;
}
.SetCustom {
  display: block;
  clear: both;
  text-align: left;
  font-size: 9px;
  color: #777;
  font-family: 'DIN Medium';
  text-transform: uppercase;
}
.cal-month-block ul li .startenddate .SetCustom {
  margin-bottom: 5px;
}
.height-22 {
  height: 22px;
}

.dot-progressbar {
	width: 100%;
	height: 2px;
	background: #eee;
	position: relative;
	display: table;
	table-layout: fixed;
	margin: 15px 0px 50px 0 !important;
	padding: 0;
	list-style: none;
}
.dot-progressbar.dark {
	background: #e2e2e2;
}
.dot-progressbar li {
	display: table-cell;
	position: relative;
}
.dot-progressbar li .stepdots {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #eee;
	position: absolute;
	top: -9px;
	left: 0;
	z-index: 1;
}
.dot-progressbar li.done .stepdots {
	text-align: center;
    font-size: 16px;
    color: #fff;
}
.dot-progressbar.dark li .stepdots {
	background: #f7f7fa;
	border: solid 1px #e2e2e2;
}
.dot-progressbar li.active .stepdots {
	background: #f7f7fa;
	border: solid 2px #2A5EE3;
}
.dot-progressbar li.active .stepdcontents {
	font-family: 'DIN Bold';
	color: #494949;
}
.dot-progressbar li:last-child {
	width: 20px;
	text-align: right;
}
.stepdcontents {
	display: inline-block;
	white-space: nowrap;
	position: absolute;
	left: 0;
	top: 15px;
}
.dot-progressbar li:last-child .stepdcontents {
	right: 0;
	left: initial;
}
.indibar {
	height: 2px;
	float: left;
}
.dot-progressbar li.done .indibar,
.dot-progressbar li.done .stepdots {
	background: #70cf26;
}
.dot-progressbar.dark li.done .stepdots {
	background: #70cf26;
	border: none;
}
.dot-progressbar li.pending .indibar,
.dot-progressbar li.pending .stepdots {
	background: #f0af3f;
	border: none;
}
.dot-progressbar li.reached .stepdots {
	background: #2A5EE3;
	border: none;
}
.last-pending {
	background: #f0af3f;
	height: 2px;
	float: left;
}
.dot-progressbar li.awaiting .indibar,
.dot-progressbar li.awaiting .stepdots {
	background: #e71d09;
	border: none;
}
.alt-modal-body.noscroll {
  min-height: 100px;
  overflow: inherit !important;
}
 .stickyguideline {
  position: sticky;
    top: -6px;
    z-index: 5;
 }
.delete_draft_row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 10px;
  text-transform: capitalize;
}
.delete_draft_row a {
  color: #494949;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: capitalize !important;
  margin-left: 10px !important;
}
.delete_draft_row a + a {
  margin-left: 30px;
}
.delete_draft_row a> .mdi {
  margin-right: 5px;
}



.filter-showHide {
  position: relative;
}
.filter-showHide .filter-toggle {
  top: -40px;
  bottom: inherit;
}
.cal-date-title {
  font-size: 10px;
  font-family: 'DIN Bold';
  color: #494949;
}
.cal-month-block {
  padding: 15px;
}
.cal-month-block ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 -5px;
}
.cal-month-block ul li {
  display: block;
  width: 50%;
  padding: 5px;
}
.cal-month-block ul li .btn-month {
  display: block;
  padding: 5px 10px;
  height: 24px;
  line-height: 12px;
  font-family: 'DIN Medium';
  font-size: 10px;
  color: #494949;
  text-decoration: none;
  border: solid 1px #e4e5e6;
  border-radius: 4px;
}
.active > .startenddate,
.active > .btn-month {
  border-color: #2A5EE3 !important;
}
.cal-month-block ul li .startenddate {
  display: block;
  text-align: left;
  height: 40px;
  padding: 5px 10px;
  line-height: 12px;
  font-family: 'DIN Medium';
  font-size: 10px;
  color: #494949;
  text-decoration: none;
  border: solid 1px #e4e5e6;
  border-radius: 4px;
}
.SetCustom {
  display: block;
  clear: both;
  text-align: left;
  font-size: 9px;
  color: #777;
  font-family: 'DIN Medium';
  text-transform: uppercase;
}
.cal-month-block ul li .startenddate .SetCustom {
  margin-bottom: 5px;
}
.height-22 {
  height: 22px;
}
.dot-progressbar {
	width: 100%;
	height: 2px;
	background: #eee;
	position: relative;
	display: table;
	table-layout: fixed;
	margin: 15px 0px 50px 0 !important;
	padding: 0;
	list-style: none;
}
.dot-progressbar.dark {
	background: #e2e2e2;
}
.dot-progressbar li {
	display: table-cell;
	position: relative;
}
.dot-progressbar li .stepdots {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #eee;
	position: absolute;
	top: -9px;
	left: 0;
	z-index: 1;
}
.dot-progressbar li.done .stepdots {
	text-align: center;
    font-size: 16px;
    color: #fff;
}
.dot-progressbar.dark li .stepdots {
	background: #f7f7fa;
	border: solid 1px #e2e2e2;
}
.dot-progressbar li.active .stepdots {
	background: #f7f7fa;
	border: solid 2px #2A5EE3;
}
.dot-progressbar li.active .stepdcontents {
	font-family: 'DIN Bold';
	color: #494949;
}
.dot-progressbar li:last-child {
	width: 20px;
	text-align: right;
}
.stepdcontents {
	display: inline-block;
	white-space: nowrap;
	position: absolute;
	left: 0;
	top: 15px;
}
.dot-progressbar li:first-child {
  width: auto !important;
  text-align: left !important;
}
.dot-progressbar li:first-child .stepdcontents {
  right: initial !important;
  left: 0 !important;
}
.dot-progressbar li:last-child .stepdcontents {
	right: 0;
	left: initial;
}
.indibar {
	height: 2px;
	float: left;
}
.dot-progressbar li.done .indibar,
.dot-progressbar li.done .stepdots {
	background: #70cf26;
}
.dot-progressbar.dark li.done .stepdots {
	background: #70cf26;
	border: none;
}
.dot-progressbar li.pending .indibar,
.dot-progressbar li.pending .stepdots {
	background: #f0af3f;
	border: none;
}
.dot-progressbar li.reached .stepdots {
	background: #2A5EE3;
	border: none;
}
.last-pending {
	background: #f0af3f;
	height: 2px;
	float: left;
}
.dot-progressbar li.awaiting .indibar,
.dot-progressbar li.awaiting .stepdots {
	background: #e71d09;
	border: none;
}
.alt-modal-body.noscroll {
  min-height: 100px;
  overflow: inherit !important;
}
 .stickyguideline {
  position: sticky;
    top: -6px;
    z-index: 5;
 }

 .text_ellipsis200 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inherit;
  max-width: 200px;
  display: inline-block;
}
.hide_label .fields-label {
  display: none;
}
.divider_list {
  border-bottom: solid 2px #e4d8e7;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.divider_list:last-child {
  border: none;
  padding-bottom: 0px;
  margin-bottom: 0px;
}
.missing-icon-blue {
  position: absolute;
  top: 9px;
  right: 11px;
  z-index: 1;
 }

 app-transfer-employee-info .emp-email-col{width: 48%;}
 app-transfer-employee-info .emp-contacts{width: 38%;}

.description {
  border: solid 1px #f5f5f5;
  border-radius: 5px;
  min-height: 80px;
  padding: 8px;
}

@media screen and (max-width:1023px) {
  .desktop-none {
    display: block !important;
  }

  .m-border .td {
    border: solid 1px #f0f0f0;
  }

  .col-full {
    max-width: 100%;
    width: 100%;
  }

  .col-50 {
    width: 50%;
  }

  .col-60 {
    width: 60%;
  }

  .col-40 {
    width: 40%;
  }

  .claim-list-col {
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .claim-processed-col {
    order: 5;
    border-right: 0 !important;
  }

  .claim-status-col {
    order: 4;
    border-left: 0 !important;
  }

  .claim-detail-col {
    order: 6;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .emp-profilecard-inner {
    height: auto;
  }

  .empname-designation {
    width: 100% !important;
  }

  .emp-code-col,
  .empon-socialnetwork,
  .emp-email-col,
  .emp-contacts,
  .blood-group-col {
    display: inline-block;
    float: left;
  }

  .emp-code-col {
    width: 100% !important;
    height: 46px;
    border-bottom: solid 2px #e3e3e3;
    padding: 5px 5px 5px 0;
    float: left;
  }

  .empname-designation {
    border-bottom: solid 2px #e3e3e3;
  }
.emp-profilecard-inner.employee-wrap .emp-doj-col {
  width: 100%;
  padding: 10px;
  height: auto;
  border-left: 0px;
}
.emp-profilecard-inner.employee-wrap .emp-details-col .table-layout .card-col {
  word-break: break-word;
}
.emp-profilecard-inner.employee-wrap .emp-profilepic-cell .initial {
    width: 48px;
    height: 48px;
    line-height: 48px !important;
}
  .emp-fields-saprator {
    display: none;
  }

  .empon-socialnetwork,
  .emp-email-col {
    width: 40%;
    /*border-left: solid 2px #e3e3e3;*/
    border-bottom: solid 2px #e3e3e3;
    height: 46px;
    padding: 5px 10px;
  }

  .empon-socialnetwork span {
    margin-right: 20px;
  }

  .emp-contacts {
    float: left;
    width: 60%;
    padding: 5px 10px;
    border-bottom: solid 2px #e3e3e3;
    height: 46px;
  }

  .blood-group-col {
    width: 40%;
    padding: 10px;
  }
  .tab-section .tab-row-table .title-cell {
    margin-bottom: 0px;
  }

  .tab-section .tab-bar ul {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tab-section .tab-bar ul {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.tab-section .tab-bar ul::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}
.tab-section .tab-bar.tab-bar-custom ul {
  display: flex;
}
  .tab-section .tab-bar.tab-bar-custom ul li {
    min-width: fit-content;
    margin-bottom: 0px;
  }
}

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

  .tab-bar.tab-bar-custom ul li {
    display: block;
    float: left;
    min-width: 100%;
    margin-bottom: 5px;
}
  .emp-profilepic-cell {
    width: 84px;
    height: auto;
    padding: 3px 15px 5px 10px;
  }

  .empname-designation,
  .emp-code-col,
  .emp-expected-doj {
    height: auto;
  }

  .center-link {
    white-space: nowrap;
  }

  .profile-progress-large {
    position: relative;
    float: left;
  }

  .emp-designation .employee-designation {
    margin-bottom: 5px;
    display: block;
  }

  .empname {
    font-size: 18px;
    margin-bottom: 0px;
  }

  .emp-designation .employee-department {
    padding-left: 0px;
  }

  .emp-designation span+span.employee-department::before {
    display: none;
  }

  .emp-profilecard-inner {
    padding-left: 0px !important;
  }
.task-inbox-user-card .empname-designation {
    border-bottom:none;
}
  .emp-code-col {
    width: 35%;
    height: 46px;
    border-bottom: solid 2px #e3e3e3;
    padding: 8px 10px;
  }

  .empon-socialnetwork {
    width: 70%;
    border-bottom: solid 2px #e3e3e3;
    border-left: 0px;
    height: 46px;
    padding: 5px 10px;
  }

  .empon-socialnetwork span {
    margin-right: 6px;
  }

  .emp-email-col {
    width: 70%;
    border-left: 0px;
    border-bottom: 0px;
    height: 50px;
    padding: 6px 8px;
  }
  .employee-wrap .emp-email-col {
    border-bottom: solid 2px #e3e3e3;
    width: 100%;
  }
  .emp-doj-col {
    width: 30%;
    border-left: 0px;
    border-bottom: solid 2px #e3e3e3;
    border-left: solid 2px #e3e3e3;
    height: 46px;
    padding: 5px 8px;
  }

  .emp-contacts {
    float: left;
    width: 70%;
    padding: 6px 10px;
    height: 56px;
  }
  .employee-wrap .emp-contacts {
    float: left;
    width: 100%;
    padding: 6px 10px;
    height: 56px;
    border-bottom: solid 2px #e3e3e3;
  }
  .blood-group-col {
    width: 30%;
    padding: 6px 10px;
    height: 50px;
    border-left: solid 2px #e3e3e3;
  }
  .employee-wrap .blood-group-col { width:50%; border:none;}

  .card-pagination {
    padding: 0 0 5px 0 !important;
  }

  .view-details-col .material-icons {
    margin-top: 2px;
  }

  .emp-desig-grade {
    white-space: nowrap;
    display: block !important;
  }

  .employee-location,
  .employee-department {
    white-space: nowrap;
    display: inline-block;
  }

  app-my-information .emp-profilepic-cell .initial {
    max-width: 100%;
    max-height: 100%;
    width: 48px !important;
    height: 48px !important;
    line-height: 48px !important;
    position: absolute;
    z-index: 1;
    left: 4px;
    top: 4px;
    font-size: 30px;
  }
  .tab-row-table {
    display: block;
    width: 100%;
  }
  .tab-row-table .title-cell {
    display: block;
    width: 100%;
    margin-bottom: 10px;
  }
  .tab-row-table .title-cell .panel-title {
    max-width: 100%;
  }
  .tab-row-table .btn-cell {
    display: block;
    padding-left: 0px;
}
.tab-row-table .btn-cell .btn-link {
  display: block;
  width: 100%;
}
.tab-row-table .head-title {
  font-size: 14px;
}
.statusprogress-outer  {
  overflow-y: auto;
  position: relative;
}
.statusprogress-outer::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.statusprogress-outer {
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */
}
.statusprogress-outer .field-data {
  position: sticky;
  left: 0px;
}
.statusprogress-outer .dot-progressbar li {
  width: 200px;
}
.statusprogress-outer .dot-progressbar li:last-child {
  width: 20px;
  text-align: right;
}
.stepdcontents {
  display: inline-block;
  white-space: normal;
  word-break: break-word;
  max-width: 100px;
  min-width: 100px;
}
.mobile-card .info:hover .tooltip-new.right {
  left: 0;
  bottom: auto;
  right: 0;
}
.mobile-card .info {
  position: inherit;
}
.rable-radio-row {
  min-width: auto;
}
.mobile-checkbox-col {
  width: 30px;
}
.m-flex {
  display: flex;
  align-items: center;
}
.tooltip-optional .tooltip-outer {
  width: 270px;
}
.tab-row-table-mobile {
  display: grid;
}
.tab-row-table-mobile .td {
  display: block;
}
.tab-row-table-mobile .td-col-1 {
  order: 1;
  text-align: right;
}
.tab-row-table-mobile .td-col-2 {
  order: 2;
  text-align: right;
}
}