@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css?family=Nunito:300,400,400i,600,600i,700,700i&display=swap");
@import url("https://fonts.googleapis.com/css?family=Fugaz+One&display=swap");
html {
  text-size-adjust: none;
  width: 100%;
  height: 100%;
  -webkit-font-smoothing: antialiased;
}

a,
input,
button {
  outline: none !important;
}

img {
  border: 0px;
  vertical-align: top;
  max-width: 100%;
  height: auto;
}
.site-logo a {
  display: flex;
}
.slick-slide {
  outline: none !important;
}
.testimonial.y-pad {
  margin: p;
  padding: 2rem 0;
}
.slick-slider {
  user-select: text;
}

.cta-btn .cta-link {
  position: relative;
  display: inline-block;
  background: rgb(230 4 4);
  color: rgb(255 255 255);
  font-size: 15px;
  min-width: 220px;
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 18px;
  font-weight: 400;
  padding: 15px 30px;
  cursor: pointer;
  text-transform: uppercase;
  border-radius: 8px;
  transition: 0.3s ease-in-out;
  text-decoration: none;
}

.cta-btn .cta-link.cta-block {
  display: block;
  width: 100%;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
}

.cta-btn .cta-link i {
  margin-right: 5px;
}

.cta-btn .cta-link:hover {
  background: rgb(8, 28, 45);
  color: rgb(210, 214, 239);
  box-shadow: rgba(0, 33, 71, 0.4) 0px 5px 20px;
}

ul.slick-dots {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.slick-dots {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 1rem 0;
  list-style-type: none;
}

.slick-dots li {
  margin: 0 0.25rem;
}

.slick-dots button {
  display: block;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: none;
  border-radius: 100%;
  background-color: grey;
  text-indent: -9999px;
}

.slick-dots li.slick-active button {
  background-color: #ff0000;
}

.banner-wrap {
  position: relative;
  overflow: hidden;
  height: auto;
  background-color: #fff;
  box-shadow: 1px -26px 6px 30px #00000030;
}

.shape {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
}

.shape svg {
  width: 100%;
}

.banner-slider {
  height: 100%;
}

.banner-slider > .banner-slide {
  display: none;
}

.banner-slider > .banner-slide:first-child {
  display: block;
}

.slick-initialized .banner-slide {
  position: relative;
  align-items: center;
  display: flex !important;
}

.banner-slider .slick-arrow {
  position: absolute;
  right: 25px;
  bottom: 50px;
  font-size: 0px;
  background: rgb(255, 255, 255);
  border: 0px;
  width: 50px;
  height: 50px;
  z-index: 12;
  cursor: pointer;
  border-radius: 100%;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 15px;
}

.banner-slider .slick-arrow::before {
  font-family: monospace;
  font-size: 37px;
  text-align: center;
  line-height: 14px;
  color: rgb(0, 33, 71);
  font-weight: 800;
}

.banner-slider .slick-arrow.slick-prev {
  right: 95px;
}

.banner-slider .slick-arrow.slick-prev::before {
  content: "←";
}

.banner-slider .slick-arrow.slick-next {
  right: 25px;
}

.banner-slider .slick-arrow.slick-next::before {
  content: "→";
}

.hero-image {
  position: absolute;
  height: 100%;
  width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  /* background-color: #ddddddb5 !important; */
}

@media only screen and (max-width: 1080px) {
  .hero-image {
    background-size: cover;
  }
}

.banner-wrap .container {
  position: relative;
  z-index: 12;
}

.hero-overlay {
  background: rgb(8, 28, 45);
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

.hero-content {
  color: rgb(255, 255, 255);
  padding: 7rem 0 4rem 0;
}

.hero-content p {
  font-size: 20px;
  line-height: 32px;
  max-width: 600px;
  color: rgba(255, 255, 255, 0.9);
  /* letter-spacing: 0.01em; */
}

.blog-detail-banner .hero-content {
  max-width: 900px;
}

.blog-detail-banner .hero-content h1 {
  font-size: 53px;
}

.hero-content h3 {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 3px;
  position: relative;
  font-weight: 500;
  margin-top: 0px;
  margin-bottom: 12px;
  margin-left: 6px;
}

.hero-content h1 {
  font-size: clamp(30px, 3.2vw, 40px);
  line-height: 1.333;
  margin-bottom: 18px;
  color: rgb(0 0 0);
  font-weight: 400;
  max-width: 760px;
  background-color: #ffffff00;
  padding: 0;
  /* width: fit-content; */
  backdrop-filter: blur(8px);
  border-radius: 12px;
}

.hero-content .cta-btn {
}

.hero-content .cta-btn .cta-link.cta-outline-white:hover {
  background: rgb(255, 255, 255);
  color: rgb(0, 33, 71);
}

.how-to-use {
}

/* master class */
.y-pad {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
a[disabled] {
  pointer-events: none;
  opacity: 0.6;
  cursor: not-allowed;
}
.tab-info h5 {
  background: #1d2124;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  color: #fff;
  padding: 2rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  box-shadow: rgb(0 0 0 / 16%) 0px 3px 6px, rgb(0 0 0 / 23%) 0px 3px 6px;
  margin-bottom: 1.2rem;
  transition: all 350ms;
  cursor: pointer;
}

.tab-info h5:hover {
  background: #d72638;
}

.tab-info h5 strong {
  flex: 0 0 67%;
  max-width: 67%;
}
/* Admin Login CSS */
.login-block {
  width: 100%;
  padding: 50px 0;
  height: 100vh;
}

.banner-sec {
  background: url(../../../photos/33972/pexels-photo.jpg) no-repeat center;
  background-size: cover;
  min-height: 500px;
  border-radius: 0 10px 10px 0;
  padding: 0;
}

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

.carousel-inner {
  border-radius: 0 10px 10px 0;
}

.carousel-caption {
  text-align: left;
  left: 5%;
}

.login-sec {
  padding: 50px 30px;
  position: relative;
}

.login-sec .copy-text {
  position: absolute;
  width: 80%;
  bottom: 20px;
  font-size: 13px;
  text-align: center;
}

.login-sec .copy-text i {
  color: #fb8d99;
}

.login-sec .copy-text a {
  color: #e36262;
}

.btn-login {
  background: #d72638;
  color: #fff;
  font-weight: 600;
}

.banner-text {
  width: 70%;
  position: absolute;
  bottom: 40px;
  padding-left: 20px;
}

.banner-text h2 {
  color: #fff;
  font-weight: 600;
}

.banner-text h2:after {
  content: " ";
  width: 100px;
  height: 5px;
  background: #fff;
  display: block;
  margin-top: 20px;
  border-radius: 3px;
}

.banner-text p {
  color: #fff;
}
/* custom checkbox */
.login-sec
  .custom-checkbox
  .custom-control-input:checked
  ~ .custom-control-label::before {
  background-color: #d62638;
}

.login-sec .custom-control-input:focus ~ .custom-control-label::before,
.company-from .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(214, 38, 56, 0.25);
}

.login-sec .custom-control-input:checked ~ .custom-control-label::before,
.company-from .custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  background-color: #d62638;
}

/* custom switch toggle button */
.switch label {
  cursor: pointer;
}

.switch label input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch [type="checkbox"]:not(:checked),
.switch [type="checkbox"]:checked {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

.switch input[type="radio"],
.switch input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}

.switch label .lever {
  position: relative;
  display: inline-block;
  margin: 0 1rem;
  margin-right: 0.625rem;
  vertical-align: middle;
  content: "";
  background-color: #dee2e6;
  border-radius: 0.9375rem;
  width: 2.5rem;
  height: 0.9375rem;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
}

.switch label .lever:after {
  position: absolute;
  top: -0.1875rem;
  left: -0.3125rem;
  display: inline-block;
  content: "";
  background-color: #f1f1f1;
  border-radius: 1.3125rem;
  -webkit-box-shadow: 0 0.0625rem 0.1875rem 0.0625rem rgba(0, 0, 0, 0.4);
  box-shadow: 0 0.0625rem 0.1875rem 0.0625rem rgba(0, 0, 0, 0.4);
  width: 1.3125rem;
  height: 1.3125rem;
  -webkit-transition: left 0.3s ease, background 0.3s ease,
    -webkit-box-shadow 1s ease;
  transition: left 0.3s ease, background 0.3s ease, -webkit-box-shadow 1s ease;
  transition: left 0.3s ease, background 0.3s ease, box-shadow 1s ease;
  transition: left 0.3s ease, background 0.3s ease, box-shadow 1s ease,
    -webkit-box-shadow 1s ease;
}

.switch label input[type="checkbox"]:checked + .lever {
  background-color: #ff9aa4;
}

.switch label input[type="checkbox"]:checked + .lever:after {
  left: 1.5rem;
  background-color: #dc3545;
}

.adm-error-msg {
  background-color: #d62638;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  margin: 10px 0;
}

.icon.logot {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

/* End Admin Login CSS */

/* Navigation CSS */
header.site-header {
  background-color: #ffffff;
  border-bottom: 4px solid #095256;
  line-height: 90px;
  width: 100%;
}

.site-header .header-menu {
  padding: 0 50px;
  justify-content: space-between;
  align-items: center;
}

.site-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-navigation > ul > li {
  padding: 0 15px;
  position: relative;
  transition: 0.3s all;
}

.site-navigation > ul > li a {
  color: #4c4c4c;
  position: relative;
  display: block;
  outline: none;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
}

.site-navigation > ul > li:hover a {
  color: #d62638;
}

.site-navigation > ul > li > a:after,
.site-navigation > ul > li.active > a:after {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 4px;
  background: #d62638;
  content: "";
  opacity: 0;
  transition: 0.5s all;
}

.site-navigation > ul > li.active > a,
.site-navigation > ul > li:hover > a,
.site-navigation > ul > li.menu-active a,
.site-navigation > ul li a.currentParent {
  color: #d62638;
}

.site-navigation > ul > li.active > a:after {
  opacity: 1 !important;
}

.site-navigation > ul > li > a:hover:after,
.site-navigation > ul > li.menu-active a:after,
.site-navigation > ul > li.currentParentList a:after {
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  transform: translateY(0px);
}

.admin-header .site-navigation > ul li a:hover:after {
  opacity: 0;
}

.employee-header .site-navigation > ul li a {
  text-transform: capitalize;
}

.site-header .site-navigation .sub-menu {
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 120%;
  width: 100%;
  background: #fff;
  padding: 0;
  margin: 0;
  list-style: none;
  border-top: 4px solid #d62638;
  z-index: 999;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 0 0 5px 5px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}

.site-header .site-navigation .sub-menu > li {
  padding: 0.2rem 2rem 0.2rem 1rem;
  position: relative;
}

.site-header .site-navigation .sub-menu a {
  color: #444;
  line-height: 30px;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 400;
  padding: 5px 0;
  letter-spacing: 2px;
  text-transform: capitalize;
  border-bottom: 1px dashed #eee;
}

.site-header .site-navigation .sub-menu a:hover {
  color: #dc3545;
}

.site-header .site-navigation .sub-menu li:last-child {
  margin: 0;
}

.site-header .site-navigation .sub-menu li:last-child a {
  border: none;
}

.site-header .site-navigation .sub-menu > li.active > a {
  color: #dc3545;
  border-bottom: 1px dashed #dc3545;
}

.site-header .site-navigation .sub-menu li.active:last-child a {
  border: none;
}
/* End Navigation CSS */

section.login-section {
  background-color: #f5f5f5;
  min-height: 85vh;
  display: flex;
  align-items: center;
}

.admin-main-page {
  background-color: #f5f5f5;
}

.card-signin {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1rem 0 #095256;
  background: #095256;
}

.login-box h1 {
  color: #fff;
  margin-bottom: 1rem;
  text-align: center;
}

.e-msg-style {
  color: #fff;
  width: auto;
  text-align: center;
  background: #d62638;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.login-box-body > label {
  margin-bottom: 0;
  color: #fff;
}

.card-signin .card-body {
  padding: 2rem;
}

.form-signin {
  width: 100%;
}

.form-signin .btn {
  font-size: 80%;
  border-radius: 5rem;
  letter-spacing: 0.1rem;
  font-weight: bold;
  padding: 1rem;
  transition: all 0.2s;
}

.form-label-group {
  margin-bottom: 1rem;
}

.secure-pass {
  position: relative;
}

.form-label-group input {
  height: auto;
  border-radius: 2rem;
  padding: 0.75rem;
}

.btn-theme {
  background: #095256;
  border-color: #095256;
  padding: 0.4rem 22px;
}

.btn-theme:hover {
  background: #1d2124;
  border-color: #1d2124;
}

footer {
  padding: 1rem 0;
}

footer .copyright > p {
  margin: 0;
  font-size: 0.9rem;
  color: #fff;
}

.responsive-menu,
.e-msg {
  display: none;
}

.admin-page-header h1 {
  color: #dc3545;
  text-align: center;
  font-size: 2.2rem;
  margin-top: 3rem;
}

.admin-page {
  position: relative;
  height: 100vh;
  background-color: #f5f5f5;
}

.admin-page section {
  /* height: 90vh; */
}

.admin-page > footer {
  /* position: absolute; */
  bottom: 0;
  text-align: center;
  display: flex;
  width: 100%;
  background-color: #fff;
}
.company_selct {
  display: flex;
  align-content: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.company-from {
  box-shadow: 0 0.5rem 1rem 0 #343a4063;
  background: #ffffff;
  border: 0;
  border-radius: 1rem;
  padding: 1.5rem 1rem;
}

.control-label,
.company-checkbox {
  text-align: left;
}

main section {
  padding: 3rem 0;
}

.employee-home main section {
  padding: 0.2rem 0 0;
}
/*.back-to-btn a,
.custom-table tr.child td.child ul li .dtr-data a {
    background-color: #dc3545;
    color: #fff !important;
    font-size: 0.9rem;
    padding: 4px 15px;
    margin: 0.8rem 0.5rem 2rem;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1rem 0 #343a4063;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    display: inline-block;
}*/
.back-to-btn a,
.custom-table tr.child td.child ul li .dtr-data a {
  margin: 0.5rem 0.5rem 0.5rem;
  display: inline-block;
  transition: all 0.3s;
}
.back-to-btn a:hover,
.custom-table tr.child td.child ul li .dtr-data :active:hover {
  color: red !important;
  text-decoration: underline;
}

ul.dtr-details {
  width: 100% !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
  text-indent: 0px !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
  top: 12px !important;
}

.back-to-btn a:hover {
  text-decoration: none;
}

.btn-theme-gr {
  background-color: #095256;
  color: #fff;
  padding: 4px 30px;
  border-radius: 1rem;
  font-weight: 500;
  display: inline-block;
  padding-bottom: 8px;
  transition: all 0.3s;
}

.btn-theme-gr:hover {
  background: #383838;
  color: #fff;
  box-shadow: 0 0.5rem 1rem 0 #343a4063;
}


.btn-theme-dr {
    background-color: #dc3545;
    color: #fff;
    padding: 4px 30px;
    border-radius: 1rem;
    font-weight: 500;
    display: inline-block;
    padding-bottom: 8px;
    transition: all 0.3s;
}

    .btn-theme-dr:hover {
        background: #dc3545;
        color: #fff;
        box-shadow: 0 0.5rem 1rem 0 #dc3545;
    }


.company-from .form-group label {
  margin-bottom: 2px;
  font-size: 0.9rem;
  line-height: normal;
  font-weight: 600;
}

.custom-file-control {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 5;
  height: 2.4rem;
  padding: 0.5rem 1rem;
  line-height: normal;
  color: #464a4c;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #f8f9fa;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
}

.custom-table tr th {
  /* background-color: rgba(0, 0, 0, 0.075); */
}

.company-from .form-group {
  margin-bottom: 10px;
}

.disp-label {
  font-weight: 700;
  font-size: 1.1rem;
}

.det-forms .form-group {
  margin-bottom: 1.5rem;
}

.forms-style .card-header {
  background-color: rgba(179, 184, 189, 0.5);
  border-bottom: 1px solid rgb(217, 219, 222);
  color: #333;
}

.custom-table tr th {
  font-size: 0.85rem;
}

.custom-table tr th,
.custom-table tr td {
  vertical-align: middle;
  font-size: 0.8rem;
  text-align: center;
}

.custom-table tr td > a:last-child:after {
  content: "";
}
/* .custom-table tr td > a:after,
.custom-table tr td > span > a:after {
content: "|";
margin: 0 2px 0 4px;
} */
.custom-table tr td > span:last-child > a:after {
  display: none;
}

.custom-table tr td > a {
  white-space: nowrap;
  color: #007bff;
  text-decoration: underline;
  /*       text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.15);*/
  margin: 0 0.5rem;
}
.custom-table tr td > a:hover {
  color: red;
}
.custom-table tr td > a.editable {
  text-decoration: none;
}

.atten-box .big-table > div {
  /* margin: 0.5rem; */
}

.company-from .form-row .form-group {
  text-align: left;
}

.company-from .tablehead > h1 {
  background-color: #dee2e6;
  padding: 12px 0;
  border: 1px solid #dee2e6;
}

.form-group .button-login {
  text-align: center;
  margin-top: 10px;
}

.btn-theme-gr a {
  color: #fff;
}

.btn-theme-gr:hover a {
  color: #095256;
  text-decoration: none;
}

header.site-header.home-header {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  transition: all 0.2s;
  z-index: 997;
}

header.site-header.home-header.header-scrolled {
  line-height: 70px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.employee-header.site-header .header-menu {
  padding: 0;
  margin-left: -15px;
  margin-right: -15px;
}

.main-slider {
  padding: 0;
}

.slider-box {
  position: relative;
}

.slider-box img {
  width: 100%;
}

.slider-box > .slide-text {
  position: absolute;
  top: 40%;
  width: 42%;
  left: 10%;
}

.slider-box > .slide-text p {
  font-size: 1.5rem;
}

body.home-page {
  font-family: "Montserrat", sans-serif;
  color: #666;
}

.home-header.header-scrolled .site-logo img {
  width: 85%;
  margin: 7px 0;
}

.home-header .site-logo img {
  width: 100%;
  transition: 0.3s width;
}

.slider-box > p {
  font-size: 1.5rem;
}

.themecolor {
  color: #dc3545;
}

.home-page main section {
  padding: 5rem 0;
}

.home-page .section-title > h2 {
  font-size: 2.5rem;
  font-weight: 900;
  color: #383838;
}
/*index-home page new layout*/
.banner-para p {
  font-size: 1.5rem;
}

.banner-clock-img {
  background: radial-gradient(
    circle,
    rgba(214, 214, 214, 1) 0%,
    rgba(255, 255, 255, 1) 0%,
    rgba(214, 214, 214, 1) 63%
  );
}

.main-home-banner {
  background: #d6d6d6;
  /*padding-top: 6rem !important;*/
  padding-bottom: 0 !important;
}

.row.h-align {
  align-items: center;
  justify-content: center;
  height: 100%;
}
/*.home-page .section-title {
margin-bottom: 70px;
}*/
.home-page .section-title > hr {
  height: 2px;
  width: 70px;
  text-align: center;
  position: relative;
  background: #d81900;
  margin: 0 auto;
  margin-bottom: 20px;
  border: 0;
}

.about-text > p {
  line-height: 30px;
}

.services,
.contact {
  background: #f6f6f6;
}

.service-box span {
  display: block;
  text-align: center;
}

.service-box img {
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
}

.service-box h4 {
  text-align: center;
  font-size: 1.2rem;
  color: #383838;
  font-weight: 700;
}
/*feature page styling*/
.feature-items a {
  text-decoration: none;
  color: #383838;
}

.feature-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  border: 1px solid #cecece;
  padding: 20px;
  border-radius: 4px;
  transition: all 0.5s;
}

ul.show-div.miner-def {
  margin-top: 20px;
}

.feature-items:hover {
  border: 1px solid red;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.sub-heading {
  margin: 2rem 0;
}

/*pricing page styling*/
.plan-name1 {
  background-color: #eeeeee !important;
  padding: 10px 5px 10px 20px;
  font-size: 20px;
  color: #575957 !important;
  font-weight: 600;
}

.chosing-plan {
  margin: 3rem 0;
}

.chosing-plan h3 {
  font-weight: 600;
  font-family: sans-serif;
  color: #000;
}

.plan-name1.text-center a.theme-btn {
  padding: 10px 35px;
  background: #d72638;
}

.plan-name1.text-center .theme-btn-div {
  margin-top: 0;
  justify-content: center;
}

.sub-heading h3 {
  font-size: 1.4rem;
}
/*.service-box ul.show-div {
display: none;
}*/
.show-div > li,
.big-table div.dataTables_wrapper div.dataTables_info,
.btn-reject,
.btn-accept {
  font-size: 0.9rem;
}

.company-from.atten-box {
  padding: 1rem;
}

/*.price-box .pricing-table {
border: 1px solid #e4e4e4;
text-align: center;
position: relative;
background-color: #fff;
border-radius: 4px;
}*/

.pricing-table .plan-name {
  padding: 6px 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05) inset;
  border-bottom: 1px solid #eee;
  background: transparent;
}

.price-box .pricing-table {
  border: 1px solid #e4e4e4;
  text-align: center;
  position: relative;
  background-color: #fff;
  border-radius: 4px;
  transition: 0.3s all;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  transition: all 0.3s;
}

.price-box .pricing-table:hover {
  z-index: 2;
}

.plan-list {
  box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
  transition: all 0.3s;
}

.plan-list:hover {
  box-shadow: none;
  transition: all 0.3s;
}

.plan-list p {
  text-align: center !important;
}

.pricing-table .plan-name h3 {
  color: #fff;
  font-size: 32px;
  background: #d72638;
  margin-bottom: 0;
  padding: 10px 0;
  text-transform: uppercase;
}

.price-box .pricing-table ul {
  margin: 0;
  list-style: none;
  padding: 0;
}

.plan-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.pricing-table .plan-list li {
  padding: 8px;
  font-size: 16px;
  border-bottom: 1px solid #eee;
}

.pricing-table .plan-list li strong {
  font-weight: 400;
}

.pricing-table .plan-list li:first-child {
  border-top: 1px solid #eee;
}

.client-box {
  justify-content: space-between;
}

.client-logo-box {
  flex: 0 0 23%;
  max-width: 25%;
  margin-left: 5px;
  margin-right: 5px;
}

.client-logo-box img {
  transition: 0.3s all;
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.client-logo-box img:hover {
  transform: scale(1.1);
}

.contact form {
  padding: 30px 0;
  text-align: center;
}

.form-control:focus,
.custom-file-input:focus ~ .custom-file-control {
  color: #495057;
  border-color: #dc3545;
  outline: 0;
  box-shadow: none;
}

.contact .form-control {
  display: block;
  width: 100%;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #383838;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ddd;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
  min-height: 40px;
}

.contact .form-control:focus {
  border-color: #999;
  outline: 0;
}

.btn-custom {
  text-transform: uppercase;
  color: #fff;
  background-color: #d72638;
  border: 0;
  padding: 14px 20px;
  margin: 0;
  font-size: 16px;
  border-radius: 2px;
  margin-top: 20px;
  transition: all 0.3s;
}

.contact .social {
  margin-top: 80px;
}

.contact .social i {
  width: 36px;
  height: 36px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  color: #3b5998;
}

.contact .social i {
  font-size: 24px;
  padding: 4px;
  transition: all 0.3s;
}

.contact .social li a span {
  font-size: 16px;
  color: #383838;
}

.social-icon-list > a {
  display: flex;
  align-items: center;
}

.social-icon-list > a:hover {
  text-decoration: none;
}

.employee-header .site-logo {
  display: flex;
  align-items: center;
}

.employee-header .site-logo img {
  margin: 0 15px;
  height: 70px;
  width: auto;
  object-fit: cover;
}

.comp-detail h1 {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 6px;
  letter-spacing: 1px;
}

.comp-detail h5 {
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}

.comp-detail h5 strong {
  font-size: 1rem;
  font-weight: 500;
}

.employee-header .currentParentList:after,
.employee-header .currentParentList:before {
  display: none;
}

body.employee-home {
  background: #f5f5f5;
}

.site-header.employee-header .site-navigation .sub-menu {
  margin-left: 15px;
}

.atten-box {
  background: #ffffff;
  border: 0;
  border-radius: 0;
  border: 1px solid #ccc;
  padding: 1rem;
  box-shadow: none;
}

.employee-home footer#footer {
  margin: 0;
  padding: 0px 0 !important;
  min-height: auto;
  background-color: #fff;
  border-top: 1px solid #ddd;
  margin-top: 2rem;
}

.employee-home footer#footer .copyright {
  padding: 10px 0;
  text-align: center;
}

.employee-home footer#footer .copyright p {
  color: #444;
}

.dates-section {
  /* background-color: #fff;
border: 1px solid #ccc; */
}

.atten-box h2 {
  margin-top: 15px;
}

.leave-dropdown > .leavedrop,
.leave-dropdown > .DatePicker {
  flex: 0 0 50%;
  max-width: 50%;
  padding-right: 5px;
  padding-left: 5px;
}

.tolleave,
.remainleave {
  flex: 0 0 25%;
  max-width: 25%;
  padding-right: 5px;
  padding-left: 5px;
}

.gridhead {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
}

.gridhead h2 {
  font-size: 1.2rem;
  text-align: center;
  font-weight: 500;
}

.gridhead h2 span.name {
  font-weight: 700;
}

.gridhead h2 span.daterange {
  font-weight: 500;
}

.attendencebox {
  background: #fff;
  border: 1px solid #ccc;
}

.daysbox {
  border-right: 1px solid #ccc;
  padding: 1rem;
}

.attentotal {
  padding: 20px;
}

.prestday,
.absentday {
  text-align: center;
}

.summary-box {
  width: 100%;
}

td.toldays-box {
  width: 45%;
  vertical-align: middle;
  border-right: 1px solid #ccc;
  padding: 40px 5px;
}

.toldays-box table {
  background: #eee;
  font-size: 0.8rem;
}

.toldays-box table tr td {
  border: 1px solid #ccc;
  padding: 5px;
}

.att-table-box .tblmain {
  width: 100%;
}

.toldays-box table.tbl .display-field {
  color: #8b3735;
  margin: 5px 0;
  font-weight: 700;
}

td.tolatt-box {
  width: 55%;
  text-align: center;
  vertical-align: middle;
}

.custom-table td > input,
.custom-table td select,
.editable-buttons .editable-submit,
.custom-table td .editable-buttons .editable-cancel {
  margin: 0 auto;
  display: block;
  width: 115px;
  padding: 0.25rem 0.5rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  font-size: 0.8rem;
}

.custom-table td > input[type="button"] {
  width: 65px;
  font-size: 0.8rem;
  background: #d72638;
  border-color: #d72638;
  color: #fff;
  display: inline-block;
}

.editable-buttons .editable-submit {
  display: inline;
  width: 45px;
  margin-right: 5px;
}

.custom-table td .editable-buttons .editable-cancel {
  display: inline;
  width: 62px;
  margin: 0;
}

.custom-table td > input:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.delt-box p {
  margin-bottom: 0;
}

.delt-box p strong {
  font-size: 18px;
}

.dayschecked {
  font-size: 0.8rem;
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.dayschecked > div:before {
  content: "";
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 2px;
}

.dayschecked > div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

.dayschecked div:nth-child(1):before {
  background-color: #dadada;
  border: 1px solid #dadada;
}

.dayschecked div:nth-child(2):before {
  background-color: #ffffff;
  border: 1px solid #a0a0a0;
}

.dayschecked div:nth-child(3):before {
  background-color: #d25b47;
  border: 1px solid #d25b47;
}

.dayschecked div:nth-child(4):before {
  background-color: #e19284;
  border: 1px solid #e19284;
}

.dayschecked div:nth-child(5):before {
  background-color: #ffe189;
  border: 1px solid #ffe189;
}

.dayschecked div:nth-child(6):before {
  background-color: #3b86ad;
  border: 1px solid #3b86ad;
}

.atten-box .big-table > table {
  font-size: 0.8rem;
  background: #fff;
  text-align: center;
}

.atten-box .big-table > table th,
.atten-box .big-table > table td {
  padding: 0.5rem;
}

.atten-box .big-table .nowrapstyle tr td {
  white-space: nowrap;
}

.input-group .input-group-addon.cal-icon {
  border-radius: 0px 4px 4px 0px;
  background-color: #d2d6de;
  display: flex;
  padding: 0 8px;
  cursor: pointer;
  text-align: center;
  align-items: center;
}

.input-group.date .input-group-addon.cal-icon i {
  width: 20px;
  height: auto;
}

.full-radius.atten-box .form-group {
  margin-bottom: 0px;
}

.dates-section h2 {
  font-size: 1.8rem;
  margin-bottom: 15px;
}

.leave-view-table {
  margin-top: 1rem;
}

.abset-box {
  text-align: center;
}

.absentcheckbox-box {
  font-weight: 700;
  color: #8b3735;
}

.lastupdate {
  font-size: 0.9rem;
  color: #d62638;
}

.colr-set {
  font-weight: 500;
  font-size: 0.9rem;
  color: #000;
}

span.pas-eye {
  position: absolute;
  right: 3%;
  top: 28%;
  cursor: pointer;
  color: #d62638;
}

/* pagination */
.atten-box .page-link,
.leave-view-table .page-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #007bff;
  background-color: #fff;
  border: 1px solid #dee2e6;
}

.atten-box .pagination .page-item.disabled .page-link,
.leave-view-table .pagination .page-item.disabled .page-link {
  color: #868e96;
}

.atten-box .pagination .page-item .page-link,
.leave-view-table .pagination .page-item .page-link {
  font-size: 0.9rem;
  color: #212529;
  background-color: transparent;
  border: 0;
  outline: 0;
  transition: all 0.3s linear;
}

.atten-box .pagination .page-item.active .page-link,
.leave-view-table .pagination .page-item.active .page-link {
  color: #fff;
  background-color: #dd3545;
  border-radius: 0.125rem;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  transition: all 0.2s linear;
}

.sli-text-mob {
  display: none;
}

.site-navigation > ul > li.menu-drop > a:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f067";
  color: #d52638;
  position: absolute;
  right: 0;
  font-size: 1rem;
  cursor: pointer;
}

.attendencebox > .row {
  justify-content: center;
  align-items: center;
}

div.dataTables_wrapper div.dataTables_paginate {
  /* margin-bottom: 10px; */
}

.atten-box .select2-container--default .select2-selection--single {
  border: 1px solid #d2d5de;
}

.atten-box .select2-container .select2-selection--single,
.atten-box
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 38px;
}

.atten-box
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 36px;
}

.abset-box .show1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.datepicker table tr td span.active.active,
.datepicker table tr td.active.active {
  background-color: #d62638;
  border-color: #d62638;
  color: #fff;
}

.datepicker table tr td span {
  height: 44px;
  line-height: 44px;
}

.datepicker table tr td.active.active {
  border-radius: 50%;
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.15);
}

.note h4 {
  margin-bottom: 5px;
}

.note p {
  font-size: 0.9rem;
}

.emp-notes ul {
  padding-left: 1.5rem;
}

.emp-notes li {
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.emp-notes li:last-child {
  margin: 0;
}

.empdetails-box {
  margin-bottom: 1.5rem;
}

.form-control[type="file"] {
  padding: 3px 10px;
}

.comp-field {
  color: red;
}

.emp-profinfo .prof-info-box {
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #eee;
}

.personal-infobox,
.emp-profinfo .prof-pics-box {
  margin-bottom: 1.8rem;
}

.emp-profinfo .prof-pics-box {
  background-color: #fff;
  text-align: center;
  min-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 4px;
  box-shadow: 0 0 1rem 0 rgba(52, 58, 64, 0.08);
}

.emp-profinfo .prof-info-box,
.personal-infobox {
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #eee;
  box-shadow: 0 0 1rem 0 rgba(52, 58, 64, 0.08);
  padding: 1rem;
  color: #495057;
}

.prof-info-box h4 {
  font-size: 1.4rem;
}

.personal-infobox h4 {
  font-size: 1.4rem;
}

.emp-profinfo p:last-child,
.personal-infobox p:last-child {
  margin-bottom: 0;
}

.emp-profinfo p {
  margin-bottom: 5px;
}

.prof-pics-box img {
  border-radius: 50%;
  border: 1px solid #ddd;
  -webkit-box-shadow: 0px 0px 19px 0px rgb(230, 229, 229);
  -moz-box-shadow: 0px 0px 19px 0px rgb(230, 229, 229);
  box-shadow: 0px 0px 19px 0px rgb(230, 229, 229);
}

.emp-profinfo p,
.personal-infobox p {
  font-size: 0.9rem;
}

.emp-profinfo p strong,
.personal-infobox p strong {
  font-size: 0.9rem;
  margin-right: 0.5rem;
}

.payroll {
  display: none;
}

.payroll-profile-pic {
  text-align: center;
  display: flex;
  justify-content: center;
}

.payroll-profile-pic img {
  border-radius: 50%;
  border: 1px solid #ddd;
  -webkit-box-shadow: 0px 0px 19px 0px rgb(230, 229, 229);
  -moz-box-shadow: 0px 0px 19px 0px rgb(230, 229, 229);
  box-shadow: 0px 0px 19px 0px rgb(230, 229, 229);
}

.d-hidden {
  display: none;
}

.d-show {
  display: block;
}

.close-btn-cus {
  position: relative;
}

.close-btn-cus > span {
  position: absolute;
  right: -25px;
  z-index: 2;
  top: -40px;
  color: #fff;
  font-size: 2.5rem;
  cursor: pointer;
  font-weight: 500;
}

.modal-content .modal-body {
  padding: 2rem;
}

.modal-content {
  /* background-color: #ed5e81; */
  border: 0;
}

.modal-header > h3.modal-title {
  font-size: 16px;
}

#myModal9 .backform,
#payslipemp .backform,
.new .backform {
  background-color: #ffffff;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #ddd;
}

.payslip-head {
  height: 4.5rem;
  border-bottom: 2px solid #000;
}

.payslip-head button.btn.btn-danger {
  border-color: #d62638;
  background-color: #d62638;
  padding: 2px 4px 2px;
  font-size: 10px;
  float: right;
  color: #ffffff;
}

.payslip-li {
  list-style-type: none;
  display: inline-flex;
}

.payslip-li img {
  height: auto;
  width: 80px;
  margin-top: -11px;
}

.payslip-li h3 {
  bottom: 28px;
  position: relative;
  left: 4px;
  font-size: 25px;
}

.payslip-head strong {
  color: #6b1414;
  font-size: 16px;
}

.ED-box {
  height: 65px;
  background-color: #fff;
}

.PSD1 h4 {
  font-weight: 600;
}

.PSD1 small,
.PSD2 small,
.PSD3 small {
  font-size: 14px;
}

.P-tb1 h2 {
  font-weight: 700;
  font-size: 18px;
  /* color: #6b1414; */
  color: #d62638;
}

.field-validation-error {
  font-size: 0.9rem;
}

button.mymodal1,
button.mymodal {
  font-size: 0.8rem;
  padding: 4px 8px;
}

.atten-box .big-table > table th label,
.atten-box .big-table > table td label {
  margin-bottom: 0;
}

#payslipemp .table > thead > tr > th,
.new .backform .table > thead > tr > th {
  font-size: 12px;
  color: #000;
  padding: 10px;
  background-color: rgb(230, 229, 229);
}

.new .table > tbody > tr > td {
  font-size: 14px;
}

.pdtable tr > td {
  padding: 3px 8px;
}

.table-borderless tbody + tbody,
.table-borderless td,
.table-borderless th,
.table-borderless thead th {
  border: 0;
}

.PSD1 h4,
.PSD2 h4,
.PSD3 h4 {
  font-size: 15px;
}

.headerhead h2,
.headerhead strong,
.pt1 h2 {
  font-size: 16px;
  color: #d62638;
}

.pftext h2 {
  font-size: 18px;
}

canvas {
  width: 100%;
}

.custom-table tr.child td.child {
  text-align: left;
}

.signbox-bor {
  margin-top: 50px;
  border-bottom: 1px solid #232323;
}

.sign-box label {
  font-weight: 700;
}

.custom-table tr.child td.child ul li {
  display: block;
  white-space: initial;
}
.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-draggable.ui-resizable {
  position: fixed !important;
  height: auto;
  width: 700px;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}
.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.ui-draggable.ui-resizable:before {
  content: "";
  position: absolute;
  height: 100vh;
  width: 100vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1515155e;
  z-index: -1;
}
.ui-dialog .ui-dialog-content {
  background: #ffffff !important;
}
div#ui-id-1 {
  background: #fff !important;
}
.e-msg-style.background-success {
  background: #28a745;
}

.editprofimage {
  width: 200px;
  margin: 15px;
}

.blockUI.blockMsg h1 {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 4px;
}

.company-from .form-group.det-text label {
  font-size: 1rem;
  display: block;
  font-weight: 700;
}

.company-from .form-group.det-text span,
.summray-boxpd {
  font-size: 0.9rem;
}

.form-group.det-text {
  margin-bottom: 0;
}

.UP,
.PD {
  background-color: #d62638;
  color: #fff;
  width: 90px;
  padding: 3px 0;
}

.PD {
  background-color: #28a745;
}

.custom-table tr td > a.make {
  color: #d52638;
  text-shadow: 2px 4px 3px rgba(213, 38, 56, 0.15);
}

.ui-dialog .ui-dialog-titlebar-close {
  position: absolute;
  right: 0.3em;
  top: 18px;
  width: 26px;
  margin: -10px 0 0 0;
  padding: 1px;
  height: 22px;
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 4px;
  z-index: 99;
}

button.ui-dialog-titlebar-close:focus {
  outline: none;
}

.ui-dialog .ui-dialog-titlebar-close::after {
  position: absolute;
  right: 4px;
  top: 0px;
  width: 20px;
  font-size: 1.5rem;
  margin: -10px 0 0 0;
  padding: 1px;
  height: 20px;
  display: block;
  color: #dc3545;
  cursor: pointer;
  font-family: "Font Awesome 5 Free";
  display: inline-block;
  padding-right: 3px;
  content: "\f410";
  vertical-align: middle;
  font-weight: 900;
}

.popup-box {
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 1.5rem !important;
}

input#txtDDate:after {
  content: "\f073";
  position: absolute;
  right: 3px;
  top: 1px;
  width: 20px;
  font-size: 1.5rem;
  margin: -10px 0 0 0;
  padding: 1px;
  height: 20px;
  color: #dc3545;
  cursor: pointer;
  font-family: "Font Awesome 5 Free";
  display: inline-block;
  padding-right: 3px;
  vertical-align: middle;
  font-weight: 900;
  z-index: 9999;
}

.error-modal-popup {
  z-index: 1;
  border: none;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 1;
  position: fixed;
  display: none;
}

.error-msg-popup {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.error-msg-popup > div {
  text-align: center;
  border: 3px solid #fff;
  background: #fff;
  padding: 1rem 2rem;
  border-radius: 4px;
}

.error-msg-popup h4 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  font-weight: 500;
}

.rejected-error-btn {
  width: 80px;
}

.popup-box .date {
  float: right;
  font-size: 11px;
}

.popup-box li {
  color: #333;
  font-size: 0.9rem;
  list-style: none;
}

.popup-box .cusNav li span:last-child {
  color: #c53838;
  padding-left: 10px;
}

.profilePic .photo img {
  float: right;
  width: 120px;
  height: auto;
}

.popup-box h2 {
  color: #095256;
  font-size: 1.3rem;
  font-weight: 600;
}

.custom-table td.nowrap {
  white-space: nowrap;
}

.custom-table td select.droping-time {
  width: 60px;
  font-size: 0.8rem;
  display: inline-block;
  height: auto !important;
}

.ui-widget {
  font-family: inherit;
}

.namegrid p {
  background-color: #ececec;
  padding: 4px;
  margin-bottom: 2px;
  padding-left: 0.5rem;
}

.popupox-opacity {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
  display: none;
}

table.dataTable.custom-table {
  width: 100% !important;
}

table.dataTable.dtr-inline.collapsed
  > tbody
  > tr[role="row"]
  > td:first-child:before,
table.dataTable.dtr-inline.collapsed
  > tbody
  > tr[role="row"]
  > th:first-child:before {
  background-color: #dd3545;
  box-shadow: 0 0 3px #dd3545;
}

.custom-table tr td.sepr-anchr a:after,
.custom-table tr td.sepr-anchr-span > span > a:after {
  content: "|";
  margin-left: 3px;
}

.custom-table tr td.sepr-anchr a:last-child:after {
  content: "";
}

.custom-table tr td.sepr-anchr-span a {
  text-decoration: underline;
  text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.15);
}

.note h2 {
  font-size: 1.5rem;
}

.payroll-profile-pic img {
  width: 180px;
  height: auto;
}

.custom-file span.custom-file-control.uploaded {
  background-color: #e9ecef;
  font-size: 0.95rem;
}

table.dataTable.custom-table.nowrap td.warpinitial {
  white-space: initial;
}

/* pay slip css */
.payslip-st {
  background-color: #fff;
  padding: 1rem;
  border: 1px solid #eee;
}

.bcomp-header {
  text-align: center;
}

.bcomp-header h2 {
  font-size: 1.5rem;
  margin: 0;
}

.bcomp-header p {
  font-size: 0.8rem;
  width: 320px;
  margin: 0 auto;
}

.bcom-emp-info h5 {
  font-size: 1rem;
}

.bcom-emp-info h5 span {
  color: #095256;
  border-bottom: 1px dashed;
  font-size: 1rem;
  width: 200px;
  text-align: center;
  margin-left: 10px;
  font-weight: normal;
}

.loaderImg {
  text-align: center;
}

.loaderImg img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

/*Who's is it for?*/
.about-detail {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.about-detail h2,
.banner-para h2 {
  font-size: 1.8rem;
  color: #383838;
  font-family: sans-serif;
  font-weight: 600;
}

.tab-detail {
  padding: 20px;
  border: 1px solid #000;
  transition: all 0.5s;
  margin-bottom: 20px;
  flex: 0 0 48%;
  max-width: 48%;
  transition: all 0.5s;
}

.tab-detail:hover {
  border: 1px solid red;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,
    rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  transform: translateX(-6px);
}

.outer-box.content ul {
  padding-left: 20px;
}
/*theme btn*/
a.theme-btn {
  padding: 8px 14px;
  background: red;
  color: #ffff;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease-in;
}

a.theme-btn:hover {
  box-shadow: rgb(50 50 93 / 25%) 0px 30px 60px -12px inset,
    rgb(0 0 0 / 30%) 0px 18px 36px -18px inset;
}

.plan-name1 .theme-btn-div a.theme-btn:hover {
  transform: translateY(-6px);
}

.outer-box.content h2 {
  color: #332f2f;
  font-weight: 600;
  margin: 2rem 0;
  font-size: 1.8rem;
  text-align: center;
}

.outer-box .theme-btn-div {
  justify-content: center;
}

.outer-box .inr-pag p {
  margin: 1rem 0;
  text-align: left;
}

.outer-box .inner-para {
  text-align: left;
  margin: 1.2rem 0;
}

.outer-box .inner-para h4 {
  color: #686868;
  font-weight: 600;
  font-size: 1.4rem;
}

.outer-box h5 {
  font-weight: 600;
}

.theme-btn-div {
  display: flex;
  margin-top: 2rem;
}
/*main index page btn*/
.banner-para .theme-btn-div {
  justify-content: flex-start;
}
/*datatable icons*/
.ui-dialog-content {
  overflow-y: auto;
  max-height: 80vh !important; /* Adjust the max-height value as needed */
}
.nav.flex-row.navbar_holder > li:last-child > ul.sub-menu {
  transform: translateX(-40px);
}
/* print media css */
@media print {
  /*setting end*/
  .hideprint,
  header,
  footer,
  button#print,
  #makesalary,
  .modal-header,
  .close-btn-cus,
  .modal-backdrop.show {
    display: none !important;
  }

  #myModal9 .backform,
  #payslipemp .backform {
    border: 0;
  }

  .PSD1 h4,
  .PSD2 h4,
  .PSD3 h4,
  .PSD1 small,
  .PSD2 small,
  .PSD3 small {
    font-size: 23px !important;
  }

  .headerhead h2,
  .headerhead strong,
  .pt1 h2,
  .P-tb1 h2 {
    font-size: 23px !important;
  }

  .P-tb1 .table {
    margin-bottom: 0.5rem;
  }

  .modal-lg {
    max-width: 100% !important;
  }

  .new .table > tbody > tr td,
  .new .table > tbody > tr th,
  .P-tb1 .summray-boxpd span {
    padding: 10px !important;
    font-size: 22px !important;
  }

  .P-tb1.pt1 {
    padding-top: 23px;
  }
}
/*submemu CSS*/
.navbar_holder .menu-item-has-children:hover ul.sub-menu {
  display: block !important;
  position: absolute;
  top: 0;
  left: 100%;
  border: none;
  margin-left: 0 !important;
  visibility: visible;
}

li.menu-item-has-children > a:after {
  content: "+";
  position: absolute;
  top: 44%;
  transform: translateY(-50%);
  right: -21px;
  font-size: 22px;
}

li.menu-item-has-children:hover > a:after {
  content: "-";
}
/*inner pages*/
/*Attendence Records*/
.inr-pag p {
  margin: 2rem 0;
  text-align: left;
}

.inr-pag h2 {
  text-align: left;
}

.inner-para {
  text-align: left;
  margin: 2rem 0;
}

.inner-para h4 {
  color: #686868;
  font-weight: 600;
}

.inner-para .plan-list {
  width: 430px;
  max-width: 100%;
  border: 1px solid red;
  padding: 20px;
}

.inner-para .plan-list ul {
  list-style: none;
  padding-left: 0;
}
/*home page inner cont*/

.both-con,
.inner-cont {
  border: 1px solid transparent;
  padding: 2rem;
  padding-top: 0;
  box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;
  transition: all 0.5s;
}

.both-con:hover,
.inner-cont:hover {
  border: 1px solid red;
}

.inner-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid #cecece;
  padding-bottom: 6rem;
}

.both-con {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
/*footer*/
.footer {
  padding: 3rem 0 0;
  position: relative;
  overflow: hidden;
  background: #eeeeee;
}

.footer .main-footer .inner-footer:last-child ul {
  display: flex;
}

.footer .main-footer .inner-footer .footer-content .footer-logo {
  width: 200px;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.footer .main-footer .inner-footer .footer-content .footer-logo img {
  width: 100%;
}

.footer .main-footer .inner-footer .footer-content .footer-item-list ul {
  padding-left: 0;
}

.footer .main-footer .inner-footer .footer-content .footer-item-list ul li {
  list-style: none;
  display: flex;
  align-items: center;
}

.footer .main-footer .inner-footer .footer-content .footer-item-list ul li p {
  margin: 0;
  transition: 0.5s;
  white-space: nowrap;
}

.footer .main-footer .inner-footer .footer-content .footer-item-list ul a {
  text-decoration: none;
  color: #000;
  display: flex;
  align-items: center;
  padding-bottom: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  transition: 0.5s;
}

.footer .main-footer .inner-footer .footer-content .footer-item-list ul li {
  list-style: none;
  display: flex;
  align-items: center;
}

.footer .main-footer .inner-footer .footer-content .footer-heading a {
  text-decoration: none;
  color: #000;
}

.footer .main-footer .inner-footer .footer-content .footer-heading h3 {
  border-bottom: 1px solid #ddd;
  padding-bottom: 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #ff0000;
}

.footer .main-footer .inner-footer:nth-child(1) .footer-logo {
  padding-bottom: 1rem;
}

html body .footer .main-footer .inner-footer:nth-child(1) li a span {
  width: 42px !important;
}

.main-copyright {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  position: relative;
  background-color: #ff0000;
  background-color: #686868;
  box-shadow: rgb(50 50 93 / 25%) 0px 30px 60px -12px inset,
    rgb(0 0 0 / 30%) 0px 18px 36px -18px inset;
}

.main-copyright .social-links {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.main-copyright p {
  margin: 0;
  padding: 0rem 1rem;
}

.main-copyright p a {
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  transition: all 0.5s;
}

.main-copyright p a:hover {
  text-decoration: underline;
  color: #000;
}

.main-copyright .social-links img {
  width: 50%;
}

.main-copyright .social-links span {
  width: 19px !important;
}

.footer .main-footer .inner-footer:nth-child(1) ul li a {
  display: inline-block !important;
}

.footer .main-footer .inner-footer ul li span img {
  height: 25px;
  width: 25px;
}

.footer-item-list ul li a span:not(last-child) {
  padding-right: 10px;
}

.footer:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #095256;
}

.footer:after {
  content: "";
  position: absolute;
  top: -1%;
  left: 50%;
  width: 100%;
  height: 10px;
  background-color: #eb0201;
}

.footer
  .main-footer
  .inner-footer
  .footer-content
  .footer-item-list
  ul
  a:hover
  p {
  transform: scale(1.1);
  position: relative;
}

.footer
  .main-footer
  .inner-footer
  .footer-content
  .footer-item-list
  ul
  a:hover
  p:before {
  width: 100%;
}

.footer
  .main-footer
  .inner-footer
  .footer-content
  .footer-item-list
  ul
  li
  p:before {
  content: "";
  width: 0;
  height: 0.1rem;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  transition: all 0.5s;
  position: absolute;
  background-color: #eb0201;
}

.footer-item-list.social-list ul li a:hover {
  transform: translateY(-4px);
}
/*blog page*/
.card-body ul {
  display: flex;
  list-style: none;
  padding-left: 0;
  justify-content: space-between;
}

.card-body ul li {
  font-weight: 500;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
}

.card-body ul li a {
  color: #808080;
  font-size: 0.8rem;
}

.card-body ul.stack-color li:first-child a {
  padding: 0.5rem;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.5s;
  background: #f4f5f5;
}

.card-body ul.stack-color li span {
  color: #b3b3b3;
  font-size: 0.8rem;
  margin-right: 0.5rem;
}

.card-body ul li:first-child {
  padding-right: 3rem;
}

.card-body ul li:first-child a:hover {
  background: #ff0000;
  color: #fff;
}

.card-body.blog-bd h4 a {
  text-decoration: none;
  color: #000;
  font-size: 1rem;
  font-weight: 700;
  color: #383838;
  transition: all 0.5s;
}

.card-body.blog-bd h4 a:hover {
  color: #ff0000;
}

.card_image {
  overflow: hidden;
  filter: grayscale(0.8);
  transition: all 0.5s;
}

.card-body.blog-bd ul li img {
  height: 18px;
  width: 18px;
  margin-right: 0.4rem;
}

ul.date-time {
  margin-bottom: 0;
}

.card .card_image img {
  transition: all 0.5s;
}

.blog-item:hover .card .card_image img {
  transform: scale(1.2);
}

.blog-item:hover .card_image {
  filter: grayscale(0);
  transition: all 0.5s;
}
/*blog detail page*/
.bdr-round {
  border-radius: 20px;
}

.blog-content h2 {
  font-size: 2.2rem;
  margin: 2.2rem 0 1.2rem;
  color: #000;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.blog-content h2 span {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0.2rem;
  color: #ff0000;
}

.blog-content p {
  text-align: justify;
}

.blog-content h3 {
  margin-top: 2.2rem;
  font-weight: 600;
}

.blog-content h5 {
  margin: 1.6rem 0 0.4rem;
  font-weight: 600;
}

/*plans-styling*/
.plan-list ul li img {
  margin-right: 0.4rem;
  margin-top: 0.3rem;
}

.plan-list ul li {
  display: flex;
}

.plan-list p {
  font-size: 1rem;
}
/*BCI admin panel styling*/
.fetch-theme-btn {
  align-self: end;
}

.col-md-3.fetch-theme-btn #btnFetch {
  padding: 7px;
}

.evn-nesting {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
}

.evn-nesting label {
  margin-bottom: 0;
}

select#FKShiftList,
select.form-control.selectsameshift {
  height: 100% !important;
  padding: 2px;
  border: 1px solid;
  border-radius: 0;
}
/*coutom inputs*/
input#Allfromdate,
input#Alltodate {
  width: 96%;
}

.evn-nesting-to,
.evn-nesting-from {
  width: 100%;
}
/*inner dynamic table inputs*/
input.Allfromdate.noTyping {
  width: 48%;
  margin-right: 10px;
}

input.Alltodate.noTyping {
  width: 48%;
}
/*cutom delete/btn*/
.bin-theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 8px 0px;
}

.bin-theme-btn img {
  height: 20px;
  width: 20px;
}

.userWlcmLogo {
  height: auto;
  width: 200px;
}

.userWlcmLogo > img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.Wlecom_sr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 1rem;
  background: #fff;
  border-radius: 6px;
}

.userWlcmCompany h2 {
  font-size: clamp(1.4rem, 4vw, 2.3rem);
  font-weight: 200;
  font-family: sans-serif;
  margin-top: -8px;
  text-align: end;
  color: #383838;
}

.userWlcmName > h3 {
  font-size: clamp(1.6rem, 4vw, 2rem);
  font-weight: 700;
  font-family: "Font Awesome 5 Free";
}

.userWlcmName > h3 > strong {
  font-size: 82%;
  font-weight: 500;
  text-transform: capitalize;
  color: #ff0000;
}
/*Employe edit tabs*/
#tabbedForm a.nav-item {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  flex: 1 0 auto;
}
#tabbedForm nav.tab-nav {
  overflow-x: auto;
}
.pass {
  position: relative;
  cursor: pointer;
}
.eyes {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: #095256;
}
/*Pricing tab line*/
span.tog_text {
  padding-left: 0.8rem;
}
/* Media Query */
@media (min-width: 1200px) {
  .container {
    max-width: 1280px;
  }

  .home-page .container {
    max-width: 1140px;
  }
}

@media screen and (min-width: 1025px) {
  /*drop down */
  ul.drop {
    transform: translateY(10px);
    transition: all 0.3s;
    opacity: 0;
    visibility: hidden;
  }

  .nav li.feature-drop:hover ul.drop,
  .nav li.resources-drop:hover ul.drop {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  /*drop down end */
  .site-header .site-navigation .sub-menu {
    width: auto;
  }

  .toggleSub {
    display: none;
  }

  .navbar_holder > li:hover > .sub-menu {
    visibility: visible !important;
    top: 100%;
    display: block !important;
  }

  .site-navigation {
    display: flex !important;
  }

  .module {
    width: 250px;
    overflow: hidden;
  }

  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .tooltip-inner {
    max-width: 400px;
  }
}

@media only screen and (max-width: 1024px) {
  .y-pad {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  a.theme-btn {
    padding: 8px 30px;
  }

  span.toggle-menu img {
    width: 60px !important;
    transition: all 0.4s;
  }

  .module {
    width: 150px;
  }

  .back-to-btn {
    text-align: center;
  }

  .atten-box {
    padding: 1rem;
  }

  .company-from .company-checkbox.form-group {
    margin-bottom: 0;
  }

  .row.form-group.company-checkbox.lastch {
    margin-bottom: 0.5rem;
  }

  div.dataTables_wrapper div.dataTables_info {
    padding-bottom: 0.85em;
  }

  table.dataTable > tbody > tr.child ul.dtr-details {
    width: 100%;
  }

  .prestday,
  .absentday {
    display: flex;
    flex-direction: column;
  }

  .prestday canvas,
  .absentday canvas {
    margin-bottom: 3rem;
  }

  .email-wrodbreak {
    word-break: break-all;
  }

  .responsive-menu {
    display: block;
    padding: 0px 20px;
  }

  .responsive-menu span {
    font-size: 2rem;
    vertical-align: middle;
    cursor: pointer;
    color: #095256;
  }

  .site-navigation,
  .sli-text-mob {
    display: none;
  }

  .site-header .header-menu {
    padding: 0;
  }

  .d-flex.header-menu {
    padding: 8px 0;
    position: relative;
    flex-wrap: wrap;
  }

  .site-navigation {
    background: #fff;
    border-top: 4px solid #085255;
    padding: 0.5rem 0;
    margin: 1rem 0 0.5rem;
    flex: 0 0 100%;
  }

  .site-header ul.navbar_holder li {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 1px dashed #ddd;
  }

  .site-navigation > ul > li {
    padding: 0;
  }

  .site-navigation > ul li a {
    color: #343a40;
    line-height: 2;
    height: auto;
    margin: 0 1rem;
    padding: 0.25rem 0;
    display: block;
  }

  .site-navigation > ul li:last-child a {
    border: none;
  }

  .site-navigation > ul > li > a:after,
  .site-navigation > ul li.current-menu-item > a:after {
    height: 2px;
  }

  .slider-box > .slide-text {
    position: absolute;
    top: 33%;
    width: 56%;
    left: 3%;
  }

  .slider-box > .slide-text p {
    font-size: 1.1rem;
  }

  .home-page main section:first-child {
    padding: 4rem 0 0;
  }

  .home-page main section {
    padding: 2.5rem 0;
  }

  .home-page .section-title {
    margin-bottom: 30px;
  }

  .client-logo-box img {
    height: auto;
    object-fit: initial;
  }

  .service-box h4 {
    font-size: 1.1rem;
  }

  .pricing-table .plan-name h3 {
    font-size: 22px;
    margin-bottom: 0;
  }

  .contact .social {
    margin-top: 20px;
  }

  span.toggleSub:before {
    font-family: "Font Awesome 5 Free";
    content: "\f067";
    display: block;
    font-weight: 900;
    position: absolute;
    color: #d62638;
    right: 15px;
    line-height: 20px;
    top: 0px;
    z-index: 9999;
    padding: 0.6rem 0.75rem;
    border-left: 1px dashed #ddd;
    cursor: pointer;
  }

  .sub-menu-active span.toggleSub:before {
    content: "\f068";
  }

  .site-header .site-navigation .sub-menu {
    display: none;
    position: static !important;
    border-top: 0 !important;
    padding: 0;
    box-shadow: none;
    visibility: visible;
  }

  .site-header .site-navigation .sub-menu > li {
    padding: 0rem 1rem;
  }

  .site-header.employee-header .site-navigation .sub-menu {
    margin-left: 0;
  }

  .site-navigation > ul > li > a:after,
  .site-navigation > ul > li > a.active:after,
  .employee-header .site-logo:last-child {
    display: none;
  }

  .site-navigation > ul > li > a.active,
  .site-navigation > ul > li:hover > a,
  .site-navigation > ul li.sub-menu-active > a {
    color: #d62638;
    font-weight: 500;
  }

  .site-navigation > ul li.sub-menu-active a,
  .site-header .site-navigation .sub-menu li:last-child a {
    border-bottom: 1px dashed #eee;
  }

  .leave-dropdown {
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
  }

  .back-to-btn.back-btn-resp {
    text-align: left;
  }

  .back-to-btn.back-btn-resp a {
    width: auto;
    display: inline;
  }

  .atten-box .big-table > table th {
    white-space: nowrap;
  }

  .custom-table tr td .act-btn-st {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  .atten-box .big-table > table td .btn-accept,
  .atten-box .big-table > table td .btn-reject {
    padding: 2px 10px;
  }

  .custom-table tr td .act-btn-st > button:first-child {
    margin-right: 5px;
  }
  /*navbar drop down*/

  ul.drop {
    position: initial !important;
    width: 100% !important;
    display: none;
  }

  .active img.toggle-img {
    transform: rotate(180deg);
  }
}

@media screen and (min-width: 576px) {
  .mb-sm-5,
  .my-sm-5 {
    margin-bottom: 2rem !important;
  }
}

@media screen and (max-width: 991px) {
  header.site-header {
    line-height: 70px !important;
  }
  .otherlogo {
    right: 28px !important;
  }
  .nav.flex-row.navbar_holder li:last-child > ul.sub-menu {
    transform: translateX(0) !important;
  }
}

@media only screen and (min-width: 767px) and (max-width: 1024px) {
  .back-to-btn.resTabWidth a {
    width: 48%;
    padding: 2px;
  }
}

@media only screen and (max-width: 1024px) {
  ul.show-div.miner-def {
    margin-top: 0;
  }
}

@media only screen and (max-width: 767px) {
  .both-set .back-to-btn {
    top: 100px !important;
  }
  .tab-detail {
    flex: 0 0 100%;
    max-width: 100%;
    transition: all 0.5s;
  }

  .about-detail h2,
  .banner-para h2 {
    font-size: 1.4rem !important;
  }

  .site-logo {
    flex: 0 0 40%;
    max-width: 40%;
  }

  .md-md {
    margin-bottom: 2rem;
  }
  /*inner page index*/
  .outer-box.content h2,
  .testimonial h2 {
    font-size: 1.4rem;
  }
  /*homepage order change*/
  .order_1 {
    order: 2;
  }

  .order_2 {
    order: 1;
  }

  img.img-fluid.banner-clock-img {
    padding: 20px 0;
  }

  .employee-home main section {
    padding: 2rem 0 0;
  }

  .main-page section h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .note h2 {
    font-size: 1.5rem;
  }

  .custom-table tr.child td.child ul li .dtr-data a {
    font-size: 0.8rem;
    padding: 2px 15px;
  }

  .custom-table tr.child td.child ul li .dtr-data {
    display: block;
  }

  .ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.ui-draggable.ui-resizable {
    width: 100% !important;
  }

  .profilePic .photo img,
  .popup-box .date {
    float: none;
  }

  .popup-box .date {
    margin-bottom: 0.5rem;
    font-size: 14px;
  }

  .profilePic {
    margin-bottom: 1rem;
  }

  .back-to-btn {
    text-align: center;
  }

  .leave-dropdown > .leavedrop {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 1rem;
  }

  .tolleave,
  .remainleave {
    flex: 0 0 50%;
    max-width: 50%;
    padding-right: 5px;
    padding-left: 5px;
  }

  .site-logo {
    flex: 0 0 78%;
    max-width: 78%;
  }

  .banner-sec,
  .slider-box {
    display: none;
  }

  .adm-login-container {
    margin: 0 22px;
  }

  .slide-text {
    padding: 1.5rem;
    background-color: #f6f6f6;
  }

  .slide-text p {
    margin-bottom: 0;
  }

  section.main-slider:first-child {
    padding-top: 6.5rem;
  }

  .home-page main section {
    padding: 2rem 0 0;
  }

  .service-box h4 {
    font-size: 1rem;
  }

  .service-box > div {
    margin-bottom: 1rem;
  }

  .price-box .pricing-table {
    margin-bottom: 1rem;
  }

  .client-logo-box:first-child {
    padding-top: 0;
  }

  .client-logo-box:last-child {
    border: 0;
  }

  .client-logo-box {
    flex: 0 0 100%;
    max-width: 100%;
    border-bottom: 1px solid #ccc;
    padding: 20px 0;
  }

  .client-box {
    justify-content: center;
    padding: 0 1rem;
  }

  .contact .social {
    margin-top: 10px;
    padding-bottom: 20px;
  }

  .comp-detail h1 {
    font-size: 1.4rem;
  }

  .dayschecked > div,
  .prestday {
    margin-bottom: 0.5rem;
  }

  .daysbox {
    border-right: 0;
    border-bottom: 1px solid #ccc;
  }

  .full-radius.atten-box .form-group {
    margin-bottom: 1rem;
  }

  .full-radius.atten-box {
    text-align: left;
  }

  div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    justify-content: center;
  }

  div.table-responsive
    > div.dataTables_wrapper
    > div.row
    > div[class^="col-"]:last-child,
  .dataTables_paginate .pagination > li:first-child a {
    padding-left: 0;
  }

  .form-group label.invisible {
    display: none;
  }

  .gridhead h2 {
    font-size: 1.1rem;
  }

  .prof-info-box {
    margin-bottom: 2rem;
  }

  .main-page section h1.text-profile {
    text-align: center;
  }

  #payslipemp .backform .ED-box {
    height: auto;
  }

  .blockUI.blockMsg {
    width: 80% !important;
    left: 10% !important;
  }

  .site-logo {
    flex: 0 0 50%;
    max-width: 50%;
  }
  /*header responsive*/
  span.toggle-menu {
    justify-content: space-between;
    margin-right: 12px;
  }

  .inr-pag p {
    margin: 1rem 0;
    text-align: left;
  }

  .inner-para {
    text-align: left;
    margin: 1rem 0;
  }
}

@media only screen and (max-width: 575px) {
     .hero-content {
        padding: 5rem 0 4rem 0 !important;
    }
  .both-set .back-to-btn {
    top: 52px !important;
    left: 50%;
    right: inherit !important;
    transform: translateX(-50%);
  }
  .both-set h2.text-center {
    margin-bottom: 4rem;
  }
  .about-detail h2,
  .banner-para h2 {
    font-size: 1.2rem;
  }

  header.site-header {
    line-height: 60px !important;
  }

  .y-pad {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .banner-para p {
    font-size: 1.2rem;
  }

  .outer-box.content h2,
  .testimonial h2 {
    font-weight: 600;
    margin: 1.2rem 0;
    font-size: 1.4rem;
  }

  .outer-box .inner-para h4 {
    font-size: 1rem;
  }
  /*top header*/
  .main-home-banner {
    padding-top: 1.5rem !important;
  }

  .inner-item {
    padding-bottom: 2rem;
  }
  /*footer*/
  .footer-content {
    align-items: flex-start;
    padding-left: 2rem;
  }
}
@media only screen and (max-width: 480px) {
  .Wlecom_sr {
    justify-content: center;
  }
  .userWlcmCompany h2 {
    text-align: center;
  }
}
@media only screen and (max-width: 400px) {
  .both-set .back-to-btn {
    top: 75px !important;
  }
}

.parsley-errors-list > li {
  font-size: 12px;
  list-style: none;
  color: #f62f37;
  margin-top: 5px;
  text-align: left;
}

.parsley-errors-list {
  padding-left: 0px;
}
/*comming soon pages*/
.comming-soon {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ff0000;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,
    rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

.comming-soon h1 {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  margin-bottom: 0;
  font-weight: 700;
}
/*navbar expensive*/
span.toggle-menu {
  display: flex;
  align-items: center;
}

span.toggle-menu img {
  height: 15px;
  width: 15px;
  margin-bottom: 5px;
  margin-left: 4px;
}

ul.drop {
  position: absolute;
  top: 100%;
  line-height: 28px;
  padding-left: 0;
  list-style: none;
  border-top: 4px solid red;
  background: #383838;
  width: 245px;
  box-shadow: rgb(0 0 0 / 25%) 0px 14px 28px, rgb(0 0 0 / 22%) 0px 10px 10px;
  overflow: hidden;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

ul.drop li {
  padding: 6px 17px;
  transition: all 0.2s;
}

ul.drop li:hover {
  background: #f8f9fa;
}

ul.drop li a {
  color: #fff !important;
  font-size: 14px;
  font-weight: 500 !important;
  transition: all 0.2s !important;
}

ul.drop li:hover a {
  color: #d62638 !important;
  font-size: 14px;
  padding-left: 1rem;
}

ul.drop li a:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -3px;
  height: 2px;
  width: 0;
  border-radius: 10px;
  background: #d62638;
  transition: all 0.5s !important;
}

ul.drop li:hover a:before {
  width: 10px;
}

.site-navigation > ul > li {
  display: flex;
}
/*testimonial styling*/
.test-monial {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c9c9c9;
  padding: 20px 0;
  height: 150px;
  box-shadow: rgb(50 50 93 / 25%) 0px 13px 27px -5px,
    rgb(0 0 0 / 30%) 0px 8px 16px -8px;
  transition: all 0.5s;
}

.test-monial:hover {
  transform: translateX(-4px);
  border: 1px solid red;
}

.clint-logo {
  width: 175px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clint-logo img {
  width: 100%;
}

.test-monial a.theme-btn {
  padding: 9px 26px;
  background: red;
  color: #ffff;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease-in;
}

.testimonial h2 {
  color: #332f2f;
  font-weight: 600;
  margin: 2rem 0;
}
/* new styling 11/05/23 */
.employee-header .site-logo.cmpny_logo {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: auto;
  width: 200px;
  border-bottom: 1px solid #ff0202;
  padding-bottom: 0.5rem;
  margin: 8px auto;
}

.site-logo.cmpny_logo img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.comp-detail h1 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0.4rem;
  width: 100%;
  text-align: center;
  color: #737070;
}

.company_latter {
  display: flex !important;
  align-content: center;
  justify-content: center;
  position: relative !important;
  margin-left: 0.5rem;
}

.company_latter > a {
  height: 50px;
  width: 50px;
  display: flex !important;
  align-content: center;
  justify-content: center;
  position: absolute !important;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #b0a8a8;
  color: #fff !important;
}

.profile_fletter {
  font-size: 1.6rem;
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  font-weight: 600;
}

li.anyCompnay {
  position: relative;
}

ul.anyCompnay {
  position: absolute;
  top: 45px;
  left: inherit;
  right: -47px;
  z-index: 30;
  background: #fff;
  width: 250px;
  list-style: none;
  line-height: 35px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  padding: 1.5rem;
  border-top: 3px solid #e60404;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transform: translateY(5%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  padding-top: 0.5rem;
}

.comp-detail {
  text-align: center;
  margin: 0 0.5rem;
}

.company_logos > img {
  margin: inherit !important;
}

ul.anyCompnay li a {
  color: #383838;
  font-size: 0.9rem;
  transition: all 0.3s;
  text-decoration: none;
}

.otherlogo:hover ul.anyCompnay {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

ul.anyCompnay li:not(:last-child) {
  width: 100%;
  border-bottom: 1px dashed #dddada;
}

ul.anyCompnay li a:hover {
  color: #e60404;
}

.d-flex.header-menu {
  width: 100%;
}

.otherlogo {
  position: relative;
  right: 17px;
}

.back-to {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.copyright.cmpny-rights p {
  color: #808080;
}
/*employe popup setting*/
.em-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.em-heading p {
  margin-bottom: 0;
  margin-left: 0.5rem;
}

table#tbl_attendanceDetail thead tr td {
  font-weight: 700;
}

.total-du {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.total-du h3 {
  font-size: 1.2rem;
}

.total-du h3 > span {
  color: #cf0707;
  font-size: 1rem;
}

.custom_bllable,
.custom_bllable > label {
  text-align: end;
  margin-bottom: 0.5rem !important;
  font-size: 1rem !important;
  color: #626262;
  text-align: end;
}

.custom_bllable > label {
  margin-left: 0;
}

.btn_grid {
  display: flex;
  align-items: center;
  border-radius: 4px;
  margin-top: 0.5rem;
}

.btn_grid h2 {
  margin-bottom: 0 !important;
}

.sld_Btn > i {
  transition: all 0.3s;
  transform: rotate(180deg);
}

.arrow_sld i {
  transform: rotate(0deg);
}

.form-horizontal.company-from {
  border-top: 2px solid #e60404;
}

.absentday.inherit_Cl {
  position: relative;
}

.bred_crum {
  padding: 1rem;
  background: #eaeaea;
  margin-bottom: 1rem;
  display: flex;
  align-content: center;
  justify-content: flex-start;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
/*BreadCrum styling*/
.bred_crum {
  display: flex;
  align-content: center;
}

.bred_crum span {
  display: inline-block;
  margin: 0 0.4rem;
}

.bred_crum h5 {
  font-size: 1.2rem;
}

.bred_crum > a {
  color: #716f6f;
  transition: all 0.2s;
  text-decoration: none;
  text-transform: capitalize;
}

.bred_crum > a:hover {
  color: #e60404;
}

.login-box-body button {
  background: #e60404;
}

#createButton {
  color: #fff;
  background-color: #095256;
  border-color: #095256;
  padding: 0.4rem 1.3rem 0.6rem !important;
}

#createButton:hover {
  background: #383838;
  border-color: #383838;
}

.custom_flex {
  display: flex;
  align-content: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
/*success icon*/
.main_app {
  height: 100%;
  background: white;
  width: 100%;
  border-radius: 6px;
  display: flex;
  align-content: center;
  justify-content: center;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.cusm-pop {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  margin: 2rem 0 3rem;
  margin-right: 0px;
  margin-left: 0px;
}
/*Success icon*/
.success-checkmark {
  width: 80px;
  height: 115px;
  margin: 0 auto;
}

.success-checkmark .check-icon {
  width: 80px;
  height: 80px;
  position: relative;
  border-radius: 50%;
  box-sizing: content-box;
  border: 4px solid #4caf50;
}

.success-checkmark .check-icon::before {
  top: 3px;
  left: -2px;
  width: 30px;
  transform-origin: 100% 50%;
  border-radius: 100px 0 0 100px;
}

.success-checkmark .check-icon::after {
  top: 0;
  left: 30px;
  width: 60px;
  transform-origin: 0 50%;
  border-radius: 0 100px 100px 0;
  animation: rotate-circle 4.25s ease-in;
}

.success-checkmark .check-icon::before,
.success-checkmark .check-icon::after {
  content: "";
  height: 100px;
  position: absolute;
  background: #ffffff;
  transform: rotate(-45deg);
}

.success-checkmark .check-icon .icon-line {
  height: 5px;
  background-color: #4caf50;
  display: block;
  border-radius: 2px;
  position: absolute;
  z-index: 10;
}

.success-checkmark .check-icon .icon-line.line-tip {
  top: 46px;
  left: 14px;
  width: 25px;
  transform: rotate(45deg);
  animation: icon-line-tip 0.75s;
}

.success-checkmark .check-icon .icon-line.line-long {
  top: 38px;
  right: 8px;
  width: 47px;
  transform: rotate(-45deg);
  animation: icon-line-long 0.75s;
}

.success-checkmark .check-icon .icon-circle {
  top: -4px;
  left: -4px;
  z-index: 10;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  box-sizing: content-box;
  border: 4px solid rgba(76, 175, 80, 0.5);
}

.success-checkmark .check-icon .icon-fix {
  top: 8px;
  width: 5px;
  left: 26px;
  z-index: 1;
  height: 85px;
  position: absolute;
  transform: rotate(-45deg);
  background-color: #ffffff;
}

@keyframes rotate-circle {
  0% {
    transform: rotate(-45deg);
  }

  5% {
    transform: rotate(-45deg);
  }

  12% {
    transform: rotate(-405deg);
  }

  100% {
    transform: rotate(-405deg);
  }
}

@keyframes icon-line-tip {
  0% {
    width: 0;
    left: 1px;
    top: 19px;
  }

  54% {
    width: 0;
    left: 1px;
    top: 19px;
  }

  70% {
    width: 50px;
    left: -8px;
    top: 37px;
  }

  84% {
    width: 17px;
    left: 21px;
    top: 48px;
  }

  100% {
    width: 25px;
    left: 14px;
    top: 45px;
  }
}

@keyframes icon-line-long {
  0% {
    width: 0;
    right: 46px;
    top: 54px;
  }

  65% {
    width: 0;
    right: 46px;
    top: 54px;
  }

  84% {
    width: 55px;
    right: 0px;
    top: 35px;
  }

  100% {
    width: 47px;
    right: 8px;
    top: 38px;
  }
}

@media (min-width: 992px) {
  .modal-lg {
    max-width: 900px;
  }
}

.remove_flex .form-inline {
  display: inherit !important;
}

.btn_grid.gridhead {
  background: #fff;
  padding: 0 1rem 0 0;
}
/*.btn-danger, .btn-secondary {
    padding: 0.4rem 1.3rem 0.6rem !important;
}*/
.card-body.bal-Report h3 {
  font-size: 1.5rem;
  padding: 0;
  margin: 0;
  text-align: right;
  display: flex;
  align-content: center;
  justify-content: flex-end;
}

.balce_totl {
  font-weight: bolder;
  color: #e60404;
  margin-left: 0.2rem;
}

.page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.cus-export {
  position: absolute;
  right: 8px;
  z-index: 10;
  bottom: -53px;
}
.contact_UsLink > p > a {
  color: #000;
}
.contact_UsLink {
  margin-top: 1rem;
}

.cus-export a {
  color: #007bff;
  padding: 0.3rem 1rem 0.4rem;
  transition: all 0.5s;
  cursor: pointer;
  background: transparent;
  border-radius: 4px;
  text-decoration: underline;
}

.cus-export a > span {
  margin-right: 0.3rem;
  transition: all 0.5s;
  color: #008000;
}

.cus-export a:hover {
  color: #fff !important;
  background: #1d6f42;
}

.cus-export a:hover span {
  color: #fff !important;
}

.btn_grid h2 {
  margin-bottom: 0 !important;
  padding-left: 2rem;
}

.noti_imp {
  padding: 1rem;
  background: #ffedcb;
  border-radius: 4px;
  display: flex;
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 2px 4px;
}

.noti_imp p {
  margin: 0;
}

span.info_icon {
  margin-right: 1rem;
  border-right: 1px solid #095256;
  padding-right: 1rem;
  font-size: 1.4rem;
  color: #095256;
}

span.info_icon > i {
  animation: bounce 1s 5;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-20px);
  }

  60% {
    transform: translateY(-10px);
  }
}

.cusm-pop h2 {
  font-size: 1.6rem;
  margin: 1rem 0 3rem;
  color: #1ba321;
}

.btn-info {
  background: #095256;
  border-color: #095256 !important;
  color: #fff !important;
}

.btn-info:hover {
  background: #383838;
  border-color: #383838;
}

.company_logos {
  height: 120px;
  width: 100%;
  margin-bottom: 1rem;
  border-top: 2px solid #ff3737;
  box-shadow: rgb(99 99 99 / 24%) 0px 1px 4px 0px;
  border-radius: 8px;
  overflow: hidden;
}
/* banner slide */
.c-height {
    height: 400px;
    width: auto;
}

.c-height img {
    height: 100%;
    width: auto;
}