* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* select,
.form-control select {
  -webkit-appearance: none;
  background-image: url(http://medusa.gomilestone.com/assets/img/drop-down-arrow.png) !important;
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) center;
  background-size: 10px;
  cursor: pointer;
  background-color: #fff;
} */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Lato", sans-serif;
    color: #1f1f1f;
}

h4 {
    font-weight: 600;
}

.h1,
.h2,
.h3,
h1,
h2,
h3 {
    margin: 10px 0;
}

.nopadleft {
    padding-left: 0;
}

tr,
td,
th,
textarea {
    font-family: "Lato", sans-serif;
}

body {
    background: #f8fafd !important;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

body,
button,
select,
p,
input {
    font-family: "Lato", sans-serif;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.h2,
h2 {
    font-size: 22px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    color: green !important;
}

.form-control {
    height: 34px;
}

.input-group-text {
    background: #f5f5f5;
}

.form-control:focus {
    outline: none;
    border-color: #ccc;
    box-shadow: none;
}

.form-group-item {
    margin-bottom: 15px;
}

.btn-border {
    background: #fff;
    border: 2px solid #373759;
    color: #373759;
    font-size: 16px;
    padding: 8px 25px;
    border-radius: 8px;
    letter-spacing: 0.56px;
}

.LabelSide {
    text-align: left;
}

.LabelSide label {
    font-weight: 600;
    font-size: 14px;
    color: #414141;
    display: flex;
    align-items: center;
    letter-spacing: 0.56px;
}

.small-text {
    font-weight: 500;
    font-size: 13px;
    margin-left: 5px;
}

.Communication {
    margin: 20px 0 !important;
}

.padding-box {
    padding: 0px 15px;
}

.buttom-border {
    border-bottom: 2px solid #ff9800;
    padding-bottom: 6px;
}

img {
    vertical-align: middle;
}

.wrap {
    width: 100%;
    float: left;
}

.LeftSidebar {
    width: 250px;
    float: left;
    background: #373759;
    position: fixed;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    transition: width 0.25s;
    -ms-touch-action: auto;
    touch-action: auto;
    -ms-overflow-style: none;
    overflow-anchor: none;
    top: 0px;
    left: 0px;
    transition: all 300ms linear;
    z-index: 99;
}

#sidebar.active {
    left: 0px;
}

/* #sidebar .toggle-btn{
  display: none;
} */

.toggle-btn {
    position: fixed;
    left: 28px;
    top: 14px;
    z-index: 99;
}

.toggle-btn span {
    display: block;
    width: 23px;
    height: 2px;
    background: #5f5f5f;
    margin: 6px 0px;
    cursor: pointer;
}

.d-none {
    display: none;
}

@media screen and (max-width: 600px) {
    .DashboardHeader,
    .DashboardBody {
        width: 100% !important;
    }

    .DashboardHeader {
        padding-left: 60px !important;
    }

    #sidebar {
        left: -250px;
    }

    #sidebar .toggle-btn {
        display: block;
    }

    .TitleSec img {
        opacity: 0.65;
    }

    .cancel-btn {
        position: absolute;
        left: 210px;
        top: 22px;
        z-index: 99;
    }

    .cancel-btn span {
        display: block;
        width: 23px;
        height: 2px;
        background: #fff;
        margin: 6px 0px;
        cursor: pointer;
    }

    .cancel-btn span:first-child {
        transform: rotate(45deg);
        position: absolute;
    }

    .cancel-btn span:last-child {
        transform: rotate(-45deg);
    }

    .AuthPageSec.DarkSide {
        display: none;
    }

    .AuthPage .AuthPageSec {
        width: 100%;
    }

    .AuthPageSec .form-side {
        padding: 0 8% !important;
    }

    .d-sm-none {
        display: block;
    }
}

/******* CSS BY TARUN NARULA START **********/
.nopad {
    padding-left: 0;
    padding-right: 0;
}

.AuthPage {
    position: absolute;
    width: 100%;
    height: 100%;
}

.AuthPage .AuthPageSec {
    height: 100%;
    background: #fff;
    overflow-y: auto;
}

.AuthPage .AuthPageSec .SecBody {
    position: relative;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    left: 50%;
}

.AuthPageSec.DarkSide {
    background-image: url("../../assets/img/bgimg.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.logocontainer {
    text-align: center;
    color: #fff;
}

.AuthPageSec .form-side {
    padding: 0 15%;
}

.heading {
    font-weight: 600;
    font-size: 20px;
    color: #fff;
    margin-top: 11px;
    padding: 3px 0px;
}

.heading-bg {
    background-color: #373759;
    color: #fff;
    padding: 10px 10px;
    border-radius: 6px;
}

.add-btn {
    font-size: 16px;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 5px;
    padding: 4px 10px;
    cursor: pointer;
}

.add-btn:hover {
    background-color: #ffffff;
    text-decoration: none;
    color: #000;
}

.edit-icon {
    font-size: 17px;
    margin-right: 4px;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f0f0f0;
}

.employe-thead {
    margin-bottom: 8px;
}

.sub-heading {
    font-weight: 600;
    font-size: 20px;
    margin: 0;
    background-color: #e7e7e7;
    padding: 10px 10px;
    border-radius: 6px;
    letter-spacing: 0.56px;
    cursor: pointer;
}

.sub-heading-coantainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #e7e7e7;
    margin: 12px 0px;
}

.sub-heading-coantainer h3 {
    margin: 0px !important;
    font-weight: 600;
    font-size: 17px;
}

.sub-heading-coantainer img {
    width: 14px;
    height: 14px;
}

.sub-text {
    font-size: 16px;
}

.present-heading {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 22px;
    letter-spacing: 0.56px;
}

.LeftSidebar > .navigation {
    position: absolute;
    overflow: auto;
    bottom: 0;
    height: calc(100% - 60px);
    padding-right: 10px;
    padding-top: 15px;
}

.LeftSidebar > .navigation:-webkit-scrollbar-track {
    background-color: #373759;
}

.LeftSidebar > .navigation::-webkit-scrollbar {
    width: 7px;
    background-color: #373759;
}

.LeftSidebar > .navigation::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: none;
}

.LeftSidebar > .navigation:hover::-webkit-scrollbar-thumb {
    display: block;
}

.Attandence-slider h2 {
    font-size: 16px;
}

.DashboardHeader {
    width: calc(100% - 250px);
    height: 58px;
    background: #fff;
    position: fixed;
    right: 0;
    padding: 10px 26px;
    z-index: 9;
    box-shadow: 15px 1px 5px #dfeaff;
}

.user-avatar {
    float: right;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #f5f5f5;
}

.user-avatar img {
    max-width: 100%;
}

.user-info {
    float: right;
}

.user-info p {
    margin-top: 9px;
}

.invalid-feedback {
    display: inline-block;
}

.over h2 {
    font-size: 20px;
}

.main {
    width: 100%;
    float: left;
}

.MainLogo {
    width: 100%;
    float: left;
    background: rgba(0, 0, 0, 0.2);
    height: 59px;
    text-align: center;
    padding: 7px;
}

.MainLogo .LogoIng {
    display: inline-block;
    max-width: 90%;
    background: #fff;
    max-height: 43px;
    padding: 5px;
    border-radius: 4px;
}

.MainLogo .LogoIng img {
    max-height: 34px;
    max-width: 100%;
}

.DashboardBody {
    float: right;
    width: calc(100% - 250px);
    /* margin-top: 80px; */
    margin-top: 70px;
    padding: 15px 25px 25px 25px;
}

.MainLogo h2 {
    font-size: 20px;
    color: #fff;
    text-align: center;
    margin-top: 16px;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: bold;
    letter-spacing: 3px;
}

.main_logo {
    width: 70%;
    float: left;
}

.menu_icon {
    width: 30%;
    float: right;
}

.menu_icon img {
    padding-top: 12px;
    padding-left: 15px;
}

.user {
    width: 100%;
    float: left;
    display: flex;
    padding: 10px 0;
    border-top: 0.5px solid rgba(0, 0, 0, 0.1);
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
}

.user__img {
    padding-left: 5px;
}

.user__name {
    font-weight: 400;
    margin-top: 10px;
    display: inline-block;
    float: right;
    margin-bottom: 5px;
    color: #1f1f1f;
}

.user__email {
    color: #828282;
    font-size: 0.875rem;
    padding: 3px 0;
    font-weight: 400;
}

.navigation {
    width: 100%;
    float: left;
}

.navigation img {
    width: auto;
    vertical-align: middle;
    padding-right: 10px;
}

.navigation ul li a {
    text-decoration: none;
    color: #fff;
    display: block;
    padding-left: 13px;
    font-size: 15px;
    font-weight: normal;
}

.navigation > li > a {
    padding: 0.85rem 1rem;
    border-radius: 2px;
}

.PageHead .input-group {
    margin-bottom: 0;
    box-shadow: -2px 2px 8px #dfeaff;
    border-radius: 5px;
}

.PageHead .input-group-text {
    border: none;
    padding: 0 15px;
    background: #f6faff;
}

.PageHead .form-control {
    border: none;
    box-shadow: none;
    cursor: pointer;
    padding-top: 12px;
    padding-bottom: 12px;
}

.AttUpFormInputs {
    padding-top: 38px;
}

.mb-0 {
    margin-bottom: 0;
}

.info {
    color: #000;
    padding-left: 17px;
}

.search {
    width: 54%;
    float: left;

    border-radius: 50px;
    margin-left: 34px;
}

.search__inner {
    width: 100%;
    float: left;
    padding-left: 10px;
}

.inner-form .input-field {
    height: 40px;
    width: 100%;
    position: relative;
}

.search__text {
    border: 0;
    width: 100%;
    border-radius: 2px;
    height: 40px;
    padding-left: 3rem;
    transition: background-color 0.3s, color 0.3s;
}

.header-sec {
    width: 100%;
    float: left;
    padding-bottom: 15px;
    padding-top: 15px;
    background: #fff;
}

.inner-form input#search {
    width: 82%;
    border-style: none;
    font-weight: 300;
    height: 40px;
    padding-left: 10px;
    font-family: "Roboto", sans-serif;
    font-size: 0.875rem;
    color: #303030;
}

.header-items {
    width: 42%;
    float: left;
}

input#search:focus {
    outline: none;
}

.inner-form {
    width: 100%;
    float: left;
}

.img-search {
    width: 10%;
    float: left;
    padding-top: 8px;
    padding-left: 18px;
}

.img-search img {
    vertical-align: middle;
    margin-left: 1.5px;
}

.placeholder {
    color: #000;
}

.navigation ul > li > a {
    display: block;
    padding: 12px 0px;
    padding-left: 22px;
    border-top-right-radius: 70px;
    border-bottom-right-radius: 70px;
    transition: all 0.2s ease;
    margin-bottom: 5px;
}

.navigation ul > li > a:hover {
    background: rgba(255, 255, 255, 0.02);
}

.navigation {
    width: 100%;
    float: left;
}

.navigation ul {
    width: 100%;
}

.navigation ul > li {
    padding: 0px;
    display: flow-root;
    position: relative;
    list-style-type: none;
}

.icon-side {
    width: 100%;
    float: left;
}

.bell img {
    margin-left: auto;
    margin-right: auto;
}

.bell {
    width: 100%;
    float: left;
}

.bell ul {
    float: left;
    margin-left: 62px;
    display: inline-block;
}

.bell ul li {
    float: left;
    list-style-type: none;
    border: 1px solid #e1e1e1;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-right: 23px;
    text-align: center;
    display: block;
    position: relative;
}

.bell ul li span {
    background: #3a7ddd;
    width: 16px;
    height: 17px;
    display: block;
    color: #fff;
    font-size: 10px;
    border-radius: 50%;
    line-height: 18px;
    position: absolute;
    top: -5px;
    right: 0px;
}

.bell ul li a {
    text-decoration: none;
    display: block;
    padding: 0px;
    position: relative;
    height: 100%;
    width: 100%;
}

.bell ul li a > img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    left: 50%;
}

.user1 {
    width: 100%;
    float: left;
}

img.user__img1 {
    float: left;
    border-radius: 50%;
}

.home p {
    font-size: 0.875rem;
    color: #1f1f1f;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
}

figure {
    float: left;
}

figcaption {
    width: auto;
    float: right;
}

.arrow {
    width: 100%;
    float: left;
}

.user__name p {
    padding-left: 10px;
}

.user__name1 {
    font-weight: 400;
    margin-top: 10px;
    display: inline-block;
    float: left;
}

.info1 {
    float: left;
    padding-left: 23px;
    width: 35%;
    margin-left: 800px;
}

.user_name figcaption p span {
    vertical-align: middle;
    margin-top: -20px;
    display: inline-block;
    font-size: 22px;
    color: #616161;
    margin-left: 13px;
}

.user_name p {
    padding-left: 10px;
    color: #1f1f1f;
    font-size: 0.875rem;
    float: left;
    padding-top: 5px;
}

.user_name {
    font-weight: 400;
    display: inline-block;
    float: right;
}

.overview {
    width: 100%;
    float: left;
    background: #f0f0f7;
}

.overview h2 {
    font-size: 20px;
    color: #1f1f1f;
    font-weight: bold;
}

.overview-item {
    width: 100%;
    float: left;
    text-align: center;
}

.overview-item ul {
    list-style-type: none;
    float: left;
    margin-left: 36px;
}

.overview-item ul li {
    float: left;
    margin-right: 10px;
    padding: 20px;
    padding-left: 30px;

    background: #ffffff;
    padding-right: 23px;
}

.overview-item ul li:hover {
    background: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.overview-item ul li a {
    text-decoration: none;
    font-size: 0.875rem;
    color: #1f1f1f;
    margin-bottom: 10px;
}

.overview-item p {
    padding-top: 17px;
}

/* .heading {
  width: 96%;
  float: left;
  padding-top: 35px;
  padding-bottom: 5px;
  padding-left: 36px;
} */

.over {
    width: 72%;
    float: left;
}

.overcompany {
    width: 40%;
    float: left;
}

.home {
    width: 22%;
    float: right;
    display: inline-flex;
    background: #fff;
    padding: 12px 0px 12px 15px;
    margin-bottom: 14px;
    margin-right: 13px;
}

.home a {
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    padding-top: 5px;
}

.sales {
    width: 100%;
    float: left;
    padding-top: 57px;
    padding-bottom: 40px;
}

.img-sales img {
    float: left;
    padding-left: 20px;
    padding-top: 30px;
    width: 97%;
}

.sales-report {
    width: 70%;
    float: left;
    background: #fff;
    padding-top: 24px;
    margin-right: 11px;
}

.ttd-section {
    width: 29%;
    float: left;
}

.title {
    width: 70%;
    float: left;
    padding-left: 43px;
}

.main-haed {
    width: 100%;
    float: left;
}

.buttons {
    width: 20%;
    float: left;
    margin-left: 30px;
}

.buttons a {
    font-size: 9px;
    text-decoration: none;
    margin-left: -4px;
}

.get_started {
    color: #fff;

    text-transform: uppercase;
    border-radius: 5px;
    background: #f57f20;
    padding: 9px 6px 8px 7px;
}

.explore {
    color: #828282;
    text-transform: uppercase;
    padding: 9px 6px 8px 7px;
    background-color: #d9d6e1;
    border-radius: 5px;
    border: 1px solid #d9d6e1;
}

.img-sales {
    float: left;
    width: 100%;
}

.ttd {
    width: 100%;
    float: left;
    background: #fff;
    padding-top: 24px;
}

.ttd ul {
    list-style-type: none;
    padding-left: 45px;
}

.ttd ul li a {
    text-decoration: none;
    color: #1f1f1f;
    display: block;
    font-size: 15px;
    font-weight: normal;
}

.ttd ul li {
    padding-bottom: 74px;
}

.ttd ul li a b {
    width: 50%;
    display: block;
    float: left;
    font-weight: 500;
}

.doller {
    float: right;
    text-align: left;
    width: 50%;
    font-size: 17px;
    font-weight: 400;
    color: #828282;
}

.main-request {
    width: 95%;
    float: left;
    padding: 20px;
}

.perchase-section {
    width: 100%;
    float: left;
    text-align: center;
}

.perchase {
    width: 19%;
    float: left;
    display: block;
    /* padding-left: 20px; */
    padding-right: 16px;
    margin-left: 34px;
}

.perchase a {
    text-decoration: none;
    color: #ffffff;
    font-size: 20px;
    float: left;
    padding: 20px;
    padding-right: 39px;
    padding-left: 0px !important;
    width: 100%;
}

.perchase-btn {
    background: #3a7ddd;
    border-radius: 9px 9px 0px 0px;
}

.perchase-btn1 {
    background: #6859f3;
    border-radius: 9px 9px 0px 0px;
}

.perchase-btn2 {
    background: #f57f20;
    border-radius: 9px 9px 0px 0px;
}

.perchase-btn3 {
    background: #3eae4d;
    border-radius: 9px 9px 0px 0px;
}

.perchase-title {
    width: 42%;
    float: left;
    text-align: left;
    padding-top: 27px;
    display: inline-block;
    padding-left: 35px;
}

.perchase-title p {
    font-weight: 300;
    color: #828282;
}

.perchase img {
    float: left;
    padding-top: 30px;
    padding-left: 20px;
}

.perchase-title h2 {
    font-weight: 400;
    line-height: 2;
}

.description {
    width: 100%;
    float: left;
    padding-top: 96px;
}

.money {
    width: 46%;
    float: left;
    margin-left: 24px;
    background: #ffffff;
    padding-left: 20px;
    padding-top: 29px;
}

.updates {
    width: 47%;
    float: right;
    background: #ffffff;
    padding-top: 29px;
}

.first {
    width: 5%;
    float: left;
    text-align: center;
}

.first ul li {
    list-style-type: none;
    padding-bottom: 72px;
    font-size: 0.875rem;
}

.second ul li {
    list-style-type: none;
    padding-bottom: 49px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1f1f1f;
}

.second ul li span p {
    color: #828282;
    font-size: 12px;
    padding-top: 6px;
}

.second ul li span {
    padding-top: 10px;
}

.Third ul li {
    list-style-type: none;
    padding-bottom: 69px;
    font-size: 0.875rem;
}

.fourth ul li {
    list-style-type: none;
    padding-bottom: 69px;
    font-size: 0.875rem;
}

.second {
    width: 40%;
    text-align: center;
    float: left;
}

.Third {
    width: 25%;
    float: left;
    text-align: center;
}

.fourth {
    width: 25%;
    float: left;
    text-align: center;
}

.heading-title {
    width: 90%;
    float: left;
    padding-bottom: 54px;
}

.drop-img {
    width: 10%;
    float: right;
}

.demo {
    width: 95%;
    float: left;
    padding-left: 20px;
}

.list {
    width: 75%;
    float: left;
    padding-left: 22px;
}

.number-list {
    width: 20%;
    float: right;
}

.list ul li {
    list-style-type: none;
    padding-bottom: 23px;
    font-size: 0.875rem;
    color: #1f1f1f;
}

.number-list ul li {
    list-style-type: none;
    padding-bottom: 25px;
    color: #828282;
    font-size: 12px;
}

.graph-img1 {
    width: 100%;
    float: left;
    padding-top: 33px;
}

.graph-img1 img {
    width: 100%;
    float: left;
}

pr {
    color: #828282;
    font-weight: 400;
    font-size: 12px;
}

.navigation ul > li.dashboard_active::before {
    width: 4px;
    background: #3a7ddd;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
}

.dropdown-btn {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 20px;
    color: #818181;
    display: block;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    outline: none;
}

.dropdown-btn:hover {
    color: #f1f1f1;
}

li.dropdown-btn i.fa.fa-chevron-down {
    float: right;
    padding: 0;
    padding-right: 11px;
}

ul.dropdown-container i.fa.fa-chevron-right {
    padding: 0;
    padding-right: 11px;
    font-size: 12px;
    vertical-align: middle;
}

.dropdown-container {
    background: #3c3b54;
    display: none;
}

.dropdown-container li a {
    padding: 13px 0px 13px 59px !important;
}

.main-container {
    width: 97%;
    float: left;
    margin-left: 29px;
}

.Attandence {
    width: 60%;
    float: left;
}

.Notification {
    width: 37%;
    float: right;
    background: #fff;
    margin-right: 18px;
}

.Attandence-slider {
    width: 93%;
    float: left;
    background: #fff;
    padding: 20px 20px;
}

.Attandence-slider p {
    float: right;
    font-size: 18px;
    font-weight: 600;
    font-family: "Roboto", sans-serif;
    /* font-weight: 500; */
}

.Attandence-slider h2 {
    float: left;
}

.slider {
    width: 99%;
    float: left;
    background: #dde8ed;
    margin-top: 19px;
    border-radius: 2px;
}

.background {
    width: 100%;
    float: left;
    max-width: 476px;
    background: #51b74a;
    border-radius: 2px;
}

.company-title h2 {
    padding: 15px 0;
    font-size: 16px;
    border-bottom: 1px solid #f1f1f3;
    padding-left: 18px;
}

.background span {
    font-size: 9px;
    color: #fff;
    float: right;
    padding: 4px 0;
}

.range {
    width: 100%;
    float: left;
}

.range ul li {
    list-style-type: none;
    float: left;
    width: 33%;
}

.range .left {
    text-align: right;
}

.range .center {
    text-align: center;
}

.range {
    width: 100%;
    float: left;
    padding-top: 10px;
}

.main-company {
    width: 100%;
    float: left;
    margin-top: 25px;
}

.company-documents {
    width: 50%;
    float: left;
    background: #fff;
}

.holidays {
    width: 48%;
    float: right;
    background: #fff;
}

.holidays-items {
    width: 95%;
    float: left;
    padding-top: 12px;
    border-bottom: 1px solid #f1f1f3;
    padding-left: 7px;
    padding-bottom: 12px;
}

.holidays img {
    float: left !important;
    max-width: 100% !important;
    height: 47px !important;
    border-radius: 50%;
}

.company-title {
    width: 100%;
    float: left;
}

.company-title i.fa.fa-chevron-down {
    float: right;
    margin-right: 20px;
}

.company-title ul li {
    list-style-type: none;
    width: 33%;
    float: left;
}

.document-sec ul {
    padding: 5px;
    width: 97%;
    float: left;
}

.company-title ul li.one {
    width: 20%;
}

.company-title ul li.two {
    width: 60%;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f1f1f;
}

.company-title ul li.three {
    width: 20%;
    float: left;
}

.company-title ul li.three img {
    width: auto;
    height: auto;
    float: left;
    padding-left: 29px;
}

.company-title img {
    width: 45px;
    height: 24px;
    float: right;
}

.company-title ul li.one img {
    float: left !important;
}

.document-sec {
    width: 100%;
    float: left;
    padding: 15px 0;
    border-bottom: 1px solid #f1f1f3;
}

.view-all {
    width: 100%;
    float: left;
    padding: 25px 0;
    display: flex;
    margin: 0 auto;
}

.view-all button,
.primary-btn {
    padding: 7px 22px;
    color: #fff;
    background: #43425d;
    border: none;
    margin: 0 auto;
    outline: none;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.875rem;
}

.holidays-items p {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f1f1f;
    line-height: 0;
    padding-top: 15px;
    padding-left: 12px;
    padding-bottom: 5px;
}

.holidays-items span {
    font-size: 11px;
    color: #808495;
    font-weight: 400;
    padding-left: 13px;
}

.request-sec {
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

.Notification .company-title {
    margin-bottom: 15px;
}

.date-box {
    width: 100%;
    float: left;
    padding: 10px 10px;
    display: block;
    position: relative;
}

.date-box span {
    background: #616161;
    color: #fff;
    float: inherit;
}

span.date-option {
    padding: 7px;
    padding-top: 14px;
    padding-left: 8px;
}

span.date {
    padding: 6px;
    float: initial;
    border-bottom: 1px solid #ccc;
}

.Approved-Aria {
    width: 60%;
    float: left;
    padding: 9px 0;
    box-shadow: 0px 4px 5px 0px rgba(255, 242, 255, 1);
    margin-top: -5px;
    padding-left: 18px;
    padding-right: 20px;
    padding-bottom: 16px;
}

.Approved-Aria figurecaption b {
    font-size: 13px;
    font-weight: 400;
    float: right;
}

.Approved-Aria figurecaption {
    font-size: 12px;
    color: #808495;
}

.Approved-Aria p {
    font-size: 0.875rem;
    color: #1f1f1f;
    font-weight: 600;
}

.Approved-Aria figure {
    width: 100%;
}

.request-sec.remove {
    margin-bottom: 0;
}

.view-all button.notificationBtn {
    color: #808495;
    background: inherit;
    padding: 0;
}

.color {
    background: #a5a4bf !important;
}

.main {
    width: 100%;
    float: left;
}

.ProfileBoxSec:last-child {
    border: none;
}

.graph {
    float: left;
    width: 30%;
    background: #fff;
}

.MyRequest {
    width: 67%;
    float: right;
    background: #fff;
    margin-right: 18px;
}

.graph img {
    width: 100%;
}

.days-par-leave {
    width: 100%;
    float: left;
    display: flex;
    padding: 10px 0;
}

.days-par-leave span {
    font-size: 11px;
    margin: 0 auto;
    padding-top: 20px;
    color: #43425d;
}

.List-Item {
    width: 100%;
    float: left;
    overflow: auto;
}

.List-Item table {
    border-collapse: collapse;
    width: 100% !important;
    float: left;
}

#posts_filter label input {
    border: 1px solid rgb(193, 193, 193);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 14px;
}

:focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
}

a.btn.btn-sm.btn-default {
    border-radius: 6px;
    font-size: 14px;
    letter-spacing: 0.56px;
}

a.btn.btn-sm.btn-link {
    color: #000;
    font-size: 15px;
}

.input_p_text {
    width: 100%;
    padding: 10px 10px;
    outline: none;
    font-weight: 400;
    font-size: 14px;
    line-height: normal !important;
    border: 1px solid #c3c3c3 !important;
    border-radius: 8px;
    box-shadow: none;
    color: gray;
    height: 40px;
    border-bottom: 2px solid #d4d4d4 !important;
}

.reason {
    height: auto !important;
}

.btn-Cancel {
    background: #ffffff;
    border-color: #000000;
    color: #000000;
    font-size: 16px;
    padding: 8px 25px;
    border-radius: 8px;
    margin-right: 10px;
}

.cruse-icon {
    background-color: #fff;
    color: #000;
    opacity: 1;
    box-shadow: 0px 0px 6px 2px #d0d0d0;
    /* padding: 3px !important; */
    border-radius: 50%;
    height: 35px;
    width: 35px;
}

.modal-footer {
    border: none;
}

.List-Item tr td {
    text-align: center;
    font-size: 13px;
    color: #4f4e65;
    border-bottom: 1px solid #ddd !important;
    padding: 10px 7px !important;
    vertical-align: middle !important;
    border-top: none !important;
}

.table td.WeekendRow {
    background: #f5f5f5;
    border: none;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.table td.WeekendRow {
    background: #f5f5f5;
    border: none;
    padding: 5px 0 !important;
    color: #ababab;
}

.employee {
    width: 100%;
}

.profile {
    width: 70px;
    float: left;
    height: 70px;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
}

.employee .name {
    padding-left: 15px;
    float: left;
    width: calc(100% - 70px);
}

.dataTables_length {
    margin-bottom: 20px;
}

.profile img {
    max-width: 150%;
    max-height: 150%;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.empname {
    font-size: 13px;
    font-weight: bold;
    text-align: left;
    margin-top: 18px;
}

.empdesignation {
    text-align: left;
}

.empemail {
    width: 100%;
    margin-bottom: 6px;
    font-size: 13px;
}

.empmobile {
    width: 100%;
    margin-bottom: 0px;
    font-size: 13px;
}

.List-Item tr th {
    text-align: center;
    padding: 10px;
    border-color: #f5f6fa !important;
    border-spacing: 0;
    border-collapse: inherit;
    color: #373644;
    font-size: 14px;
    background-color: #c9c9c9;
}

.List-Item td.approved {
    color: #80dc76;
}

.List-Item td.Pending {
    color: #ff0000;
}

.input-box .textareas {
    height: 35px;
}

section.Title {
    width: 100%;
    float: left;
    padding-bottom: 20px;
}

section.Employee-profile {
    width: 97%;
    float: left;
    margin: 0px 0px 0px 30px;
    background: #fff;
}

section.Employee-company {
    width: 25%;
    float: left;
}

section.Employee-about {
    width: calc(75% - 30px);
    float: left;
    margin: 0px 0px 0px 30px;
    background: #fff;
}

.profile-info ul li {
    float: left;
    width: 50%;
    list-style-type: none;
    padding-bottom: 10px;
    color: #808495;
    font-size: 18px;
    font-family: "Source Sans Pro", sans-serif;
}

.profile-info ul {
    width: 100%;
    float: left;
}

.profile-info {
    width: 40%;
    float: left;
}

.editBTN {
    width: 25%;
    float: right;
}

.editBTN button {
    float: right;
    background: #43425d;
    border: none;
    border-radius: 4px;
    color: #fff;
    padding: 8px;
    margin-right: 40px;
    padding-right: 18px;
    padding-left: 5px;
    text-decoration: none;
    margin-top: -20px;
}

.editBTN a {
    float: right;
    background: #43425d;
    border: none;
    border-radius: 4px;
    color: #fff;
    padding: 8px;
    /* margin-right: 22px; */
    padding-right: 20px;
    padding-left: 18px;
    text-decoration: none;
}

.add:hover,
.add:focus {
    color: #fff;
    text-decoration: none;
}

.addemployee {
    margin-top: -23px;
}

.addcomp {
    margin-top: -40px;
}

.adddpeartment {
    margin-top: -32px;
}

.addholiday {
    margin-top: -35px;
}

.editBTN i.fa.fa-pencil {
    color: #fff;
    margin-right: 3px;
    font-size: 13px;
}

.profile-info li.bold {
    color: #4d4f5c;
    font-weight: 600;
}

.Attendence-sec {
    width: 100%;
    float: left;
    margin-top: 30px;
}

.Attendence-heading {
    width: 100%;
    float: left;
    padding-bottom: 18px;
}

.List-Item button.regular {
    background: #43425d;
    border: none;
    border-radius: 4px;
    color: #fff;
    padding: 6px;
    font-size: 13px;
    outline: none;
    padding-right: 12px;
    padding-left: 12px;
}

.leave {
    width: 100%;
    float: left;
    padding: 20px;
}

.holidays-list {
    width: 70%;
    float: left;
    padding-left: 34px;
    padding-top: 40px;
    padding-bottom: 40px;
}

.width {
    width: 50%;
}

.leaveBTN {
    width: 28%;
    float: left;
}

.PrimaryBtn {
    background: #43425d;
    border: none;
    border-radius: 4px;
    color: #fff;
    padding: 8px;
    text-decoration: none;
}

.add {
    background: #43425d;
    border: none;
    border-radius: 4px;
    color: #fff;
    padding: 8px;
    padding-right: 18px;
    padding-left: 18px;
    text-decoration: none;
}

section.applyLeave {
    width: 100%;
    float: left;
}

.form {
    width: 100%;
    float: left;
}

section.applyLeave form {
    display: inline-block;
    width: 93%;
    background: #fff;
    padding: 40px 0;
    padding-left: 35px;
}

.PrimaryBtn:hover,
.PrimaryBtn:focus {
    text-decoration: none;
    color: #fff;
}

.form-container {
    width: 100%;
    float: left;
}

/* .form-group-item {
  width: 100%;
  float: left;

  padding-bottom: 20px;
} */

.remove {
    padding-top: 0;
}

/* .LabelSide {
  width: 140px;
  float: left;
} */

.phone-nu {
    display: flex;
    align-items: center;
}

.check select {
    width: 8%;
    padding: 10px 0;
    padding-left: 17px;
    outline: none;
    border: 1px solid #eeeeee;
    border-radius: 4px;
    color: #4d4f5c;
}

.navigation > ul > li > a.active,
.navigation > ul > li > a.active:hover {
    background: #7676ff;
}

.input-box input,
.input-box select,
.input-box textarea {
    width: 100%;
    padding: 10px 10px;
    outline: none;
    font-weight: 400;
    font-size: 14px;
    line-height: normal !important;
    border: 1px solid #c3c3c3 !important;
    border-radius: 8px;
    box-shadow: none;
    color: gray;
    height: 40px;
    border-bottom: 2px solid #d4d4d4 !important;
}

.input-box .chosen-container {
    width: 100% !important;
    padding: 5px 10px;
    outline: none;
    font-weight: 400;
    font-size: 14px !important;
    line-height: normal !important;
    border: 1px solid #c3c3c3 !important;
    border-radius: 8px;
    box-shadow: none;
    color: gray !important;
    height: auto;
    border-bottom: 2px solid #d4d4d4 !important;
    z-index: 99;
}

.input-box .chosen-choices {
    border: none !important;
    background: none !important;
}

.input-box .chosen-container-active .chosen-choices {
    box-shadow: none !important;
}

.input-box input.phone {
    width: calc(100% - 68px);
    padding: 10px 0;
    padding-left: 17px;
    outline: none;
    border: 1px solid #eeeeee;
    border-radius: 8px;
    margin-top: 0px;
}

.phone-input {
    display: flex;
    align-items: center;
}

.select-img {
    margin-bottom: 20px;
}

.fullday {
    width: 20% !important;

    margin-top: 3px;
}

.input-box input.Eid {
    width: 93%;
    padding: 10px 0;
    padding-left: 17px;
    outline: none;
    border: 1px solid #eeeeee;
    border-radius: 4px;
}

.input-box option.selectLeave {
    /* width: 93%; */
    padding: 10px 0;
    outline: none;
    border-radius: 4px;
    font-size: 13px;
    padding-bottom: 10px;
}

.input-box input.days-total {
    width: 93%;
    padding: 10px 0;
    padding-left: 17px;
    outline: none;
    border: 1px solid #eeeeee;
    border-radius: 4px;
}

.input-box input.reason-box {
    width: 93%;
    padding: 10px 0;
    padding-left: 17px;
    outline: none;
    border: 1px solid #eeeeee;
    border-radius: 4px;
    max-height: 300px;
    height: 100px;
}

.submitBtn {
    width: 84%;
    float: right;
}

.stars {
    color: red;
    font-size: 20px;
    line-height: 0;
    margin-left: 4px;
    margin-top: 6px;
}

.to {
    float: left;
}

.allowed {
    margin-top: 11px;
}

.shiftsubmit {
    margin-left: 276px;
}

img.downloadPdf {
    height: 20px;
}

.cursor-pointer {
    cursor: pointer;
}

.date-item {
    width: 10%;
    float: left;
    position: absolute;
    left: 65px;
}

/* .LabelSide label {
  float: left;
  font-weight: 400;
  line-height: 1.5;
  font-size: .925rem;
  margin-top: calc(0.375rem + 1px);
  margin-bottom: 0;
  padding-right: 10px;
} */

.bg-primiry {
    width: 15%;
    float: left;
    padding-top: 20px;
    padding-left: 22px;
}

.date-box span.circleBg {
    border-radius: 50px;
    background: #4d565c;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.circleBg::before {
    position: absolute;
    width: 1px;
    height: 100%;
    content: "";
    background: #eeeeee;
    left: 35px;
    top: 40px;
}

.circleBg::before:last-child {
    background: #000;
}

.request-sec.remove .circleBg::before {
    display: none;
}

span.circleBg.light {
    background: #ccc;
}

.range ul li::after {
    position: absolute;
    width: 2px;
    height: 10px;
    content: "";
    background: #000;
    top: 247px;
    margin-left: -7px;
}

i.down img {
    width: 15px;
    margin-right: 20px;
    height: 15px !important;
    float: right !important;
    vertical-align: middle;
}

.user_name i.fa.fa-caret-down {
    padding-left: 18px;
    padding-top: 5px;
}

.Attandence-slider span {
    font-size: 0.875rem;
    font-weight: 400;
}

.space {
    padding-top: 18px;
}

h2.adjust {
    padding-top: 15px;
    font-size: 20px;
}

.halfday {
    color: #f57f20 !important;
}

td.absent {
    color: #b40707 !important;
}

i.leaveIcon img {
    width: 15px;
    float: right;
    margin-right: 15px;
}

section.leave-tracker.remove {
    padding-bottom: 55px;
}

.input-box input.full {
    margin-top: 10px;
}

.input-box input.half {
    margin-top: 10px;
}

.date-label {
    width: 40%;
    float: left;
}

.secondDate {
    width: 56%;
    float: left;
}

.inputTo {
    width: 80%;
    float: right;
}

.uploadBtn {
    width: 84%;
    float: left;
    display: flex;
}

.uploadBtn button {
    background: #43425d;
    border: none;
    border-radius: 4px;
    color: #fff;
    padding: 10px;
    padding-right: 20px;
    padding-left: 20px;
    font-size: 0.875rem;
    outline: none;
}

.uploadBtn p {
    font-size: 16px;
    color: #43425d;
    padding-top: 10px;
    padding-left: 12px;
}

.formets {
    width: 84%;
    float: right;
    padding: 15px 0;
}

.formets span {
    font-size: 16px;
    color: #43425d;
    font-weight: 600;
}

.ProjectSummerySec h2 {
    font-size: 20px;
}

.ProjectSummerySec {
    width: 100%;
    float: left;
}

.ProjectMain {
    width: 100%;
    float: left;
}

.right-projectSec {
    width: 15%;
    float: left;
}

.left-projectSec {
    width: 75%;
    float: right;
    padding: 31px 0;
}

.AssignName {
    width: 100%;
    float: left;
    padding: 14px;
    box-shadow: -1px 10px 7px 0px rgba(0, 0, 0, 0.1);
    background: #fff;
    margin-bottom: 120px;
    padding: 25px 38px 34px 18px;
    position: relative;
}

.AssignName p {
    font-size: 0.875rem;
    font-weight: 600;
    color: #000;
}

.AssignName span {
    color: #6b6868;
    font-size: 0.875rem;
    float: left;
    padding-top: 7px;
}

.dateSectionMain {
    width: 91%;
    float: left;
    padding: 26px 0;
    box-shadow: -1px 10px 7px 0px rgba(0, 0, 0, 0.1);
    margin-bottom: 22px;
}

.DateFrom {
    width: 18%;
    float: left;
    padding-left: 28px;
    border-right: 1px solid #e8e9ec;
}

.ExitSummary {
    width: 73%;
    float: left;
    padding-left: 25px;
}

.dateSectionMain .DateFrom p {
    font-size: 0.875rem;
    color: #000;
    font-weight: 600;
}

.dateSectionMain .DateFrom span {
    color: #6b6868;
    font-size: 0.875rem;
    font-weight: 400;
    float: left;
    padding-top: 7px;
}

.date-from {
    width: 100%;
    float: left;
    padding-bottom: 20px;
}

.date-to {
    width: 100%;
    float: left;
}

.ExitSummary p {
    line-height: 24px;
    color: #6b6868;
    font-size: 13px;
}

.ExitSummary strong {
    color: #000000;
    font-size: 0.875rem;
}

.submitBtn.width {
    width: 100%;
    float: left;
}

.AssignName:last-child {
    margin-bottom: 0;
}

.datecircle::before {
    position: absolute;
    width: 1px;
    height: 100%;
    content: "";
    background: #eeeeee;
    left: 35px;
    top: 40px;
}

.left-projectSec span.datecircle {
    border-radius: 50px;
    background: #4d565c;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.circle-background {
    width: 10%;
    float: left;
}

.bg-circle {
    /* float: right; */
    position: absolute;
    right: -30px;
}

.bg-circle span.circleBg {
    border-radius: 50px;
    background: #4d565c;
    width: 8px;
    height: 2px;
    border-radius: 50%;
    float: right;
}

.bg-circle span i#checkIcon {
    padding: 0;
}

.AssignName span.circleBg::before {
    position: absolute;
    width: 1px;
    height: 204px;
    content: "";
    background: #43425d;
    left: 3px;
    top: 14px;
    float: left;
}

span.ckeckPoint {
    padding: 0;
    float: left;
    margin: -6px;
}

li.dropdown-btn.active i.leaveIcon img {
    transform: rotate(180deg);
    transform-origin: center;
    margin-right: 24px;
}

.days-par-leave img {
    padding: 20px 0;
}

.graphimg {
    padding: 20px;
    width: 88% !important;
    padding-bottom: 10px;
}

.set {
    padding-bottom: 32px;
}

.requestBTN {
    margin-top: 15px !important;
}

.cd-popup {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
    -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
    transition: opacity 0.3s 0s, visibility 0s 0.3s;
    text-align: center;
}

.cd-popup.is-visible {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
    -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
    transition: opacity 0.3s 0s, visibility 0s 0s;
}

.cd-popup-container {
    position: relative;
    width: auto;
    border-radius: 10px;
    max-width: 60%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    padding: 20px;
    display: inline-block;
    top: calc(50% + 5px);
    max-height: calc(100% - 110px);
    overflow-x: auto;
    background: #fff;
    text-align: left;
    height: auto;
    transition-duration: 0.3s;
    transform: translateY(-50%) !important;
}

.cd-popup-container .cd-buttons:after {
    content: "";
    display: table;
    clear: both;
}

.cd-popup-container .cd-buttons li {
    float: left;
    width: 50%;
}

.cd-popup-container .cd-buttons a {
    display: block;
    height: 60px;
    line-height: 60px;
    text-transform: uppercase;
    color: #fff;
    -webkit-transition: background-color 0.2s;
    -moz-transition: background-color 0.2s;
    transition: background-color 0.2s;
}

.cd-popup-container .cd-buttons li:first-child a {
    background: #fc7169;
    border-radius: 0 0 0 0.25em;
}

.no-touch .cd-popup-container .cd-buttons li:first-child a:hover {
    background-color: #fc8982;
}

.cd-popup-container .cd-buttons li:last-child a {
    background: #b6bece;
    border-radius: 0 0 0.25em 0;
}

.no-touch .cd-popup-container .cd-buttons li:last-child a:hover {
    background-color: #c5ccd8;
}

.cd-popup-container .cd-popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
}

.cd-popup-container .cd-popup-close::before,
.cd-popup-container .cd-popup-close::after {
    content: "";
    position: absolute;
    top: 12px;
    width: 14px;
    height: 3px;
    background-color: #8f9cb5;
}

.cd-popup-container .cd-popup-close::before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    left: 8px;
}

.cd-popup-container .cd-popup-close::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    right: 8px;
}

.is-visible .cd-popup-container {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

.input-box input#myFile {
    background: #43425d;
    border: none;
    border-radius: 4px;
    color: #fff;
    padding: 6px;
    font-size: 13px;
    outline: none;
}

.input-box img {
    width: 60px;
}

.thank-popup {
    width: 100%;
    float: left;
}

.cd-popup.onPriority {
    z-index: 9;
}

.background span {
    padding-right: 10px;
}

.cd-popup-container h2 {
    font-size: 20px;
    padding-bottom: 10px;
    text-align: center;
}

.cd-popup-container p {
    font-size: 16px;
    text-align: center;
}

.List-Item button.regular.disabled {
    opacity: 0.4;
}

.fromalingment {
    margin-left: 5px;
    margin-right: 5px;
}

.imgnavn {
    border-style: none;
    /* width: 132px; */
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 80px;
    display: block;
    margin: 0 auto;
}

.ProfileBoxSec {
    border-bottom: 1px solid #f1f1f3;
    width: 100%;
    float: left;
    margin-bottom: 15px;
}

.ProfileBoxSec strong {
    font-size: 17px;
    margin-bottom: 10px;
    display: inline-block;
}

.ProfileBoxSec p {
    margin-bottom: 10px;
    line-height: 22px;
    font-size: 15px;
}

.edit-profile {
    display: flex;
    align-items: center;
}

.ProfileBoxSec img {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    display: block;
    max-height: 80px;
}

.ProfileBoxSec ul {
    margin-left: 15px;
}

.ProfileBoxSec ul li {
    float: left;
    width: 40%;
    list-style-type: none;
    color: #43425d;
}

.company_name {
    margin-left: 20px;
    font-weight: bold;
    opacity: 0.5;
}

.contact {
    font-weight: bold;
}

.address {
    /* margin: 2px 32px; */
    margin-bottom: 6px;
}

.phone {
    font-weight: normal !important;
}

.information {
    width: 95%;
    float: left;
    padding: 24px 0px;
    padding-left: 17px;
}

.about {
    width: 100%;
    float: left;
    border-bottom: 1px solid #cecece;
    padding: 15px 16px;
}

.desc {
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

.about_description {
    padding: 0px 16px;
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 15px;
    text-align: center;
    color: #636363;
}

.company_profile {
    width: 50%;
    float: left;
    font-size: 18px;
    font-weight: bolder;
    margin-left: 45px;
}

.edit {
    width: 10%;
    float: right;
    margin-bottom: 10px;
}

.about_start {
    width: 100%;
    float: left;
}

.edit button {
    margin-top: 10px;
}

.submitbutton {
    margin: 10px 0px;
}

.employtable {
    width: 100px;
    float: left;
}

.employname {
    width: 40%;
    float: left;
}

.employdesignation {
    width: 60%;
    float: left;
}

.employimg {
    width: 90px !important;
    height: 90px !important;
    border-radius: 35px !important;
}

.employpersion {
    width: 100%;
    margin-top: 14px;
    font-weight: bold;
    color: #4d4f5c;
    font-size: 15px;
    text-align: left;
}

.employpersiontest {
    width: 100%;
    margin-top: 14px;
    font-weight: bold;
    color: #43425d;
}

.employdetail {
    width: 100%;
    float: left;
}

.dataTables_info {
    margin: 13px;
}

.dataTables_paginate {
    margin: 13px;
}

.navnmargin {
    margin-bottom: 10px;
}

.rowmarg {
    margin-left: 10px;
    margin-right: 10px;
}

.rowname {
    margin-left: -10px;
}

.DashCard .LeftPatch {
    float: left;
    width: 50%;
}

.DashCard .RightPatch {
    float: left;
    width: 50%;
    min-height: 1px;
}

.DashCard .LeftPatch h2 {
    font-size: 25px;
    margin-bottom: 0;
    margin-top: 2px;
    color: #ffffff;
}

.PatchIcon {
    float: right;
    font-size: 32px;
}

.PatchIcon.blue {
    color: #9ae7ff;
}

.PatchIcon.purple {
    color: #beb6ff;
}

.PatchIcon.green {
    color: #5ed3a7;
}

.mb-0 {
    margin-bottom: 0 !important;
}

table.text-center th {
    text-align: center;
}

.table.no-border * {
    border: none;
}

.CalendarTable td p {
    margin: 0;
    display: inline-block;
}

.CalendarTable td p {
    width: 40px;
    height: 39px;
    line-height: 38px;
    margin-bottom: 3px;
    margin-top: 3px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    border-radius: 50%;
    cursor: pointer;
}

.CalendarTable td p:hover {
    background: #eee;
}

.CalendarTable td {
    padding: 0 !important;
}

.CalendarTable td.CurrentDate p {
    background: #1b9e77;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

.profile-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
    transform: translate(-50%, -50%);
}

.profile-image {
    width: 110px;
    /* display: inline-block; */
    position: relative;
    height: 110px;
    border: 4px solid #fff;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20px;
    margin-bottom: 20px;
}

.ProfileInfo {
    width: 100%;
}

.input-box .profile-input {
    border-top: none !important;
    border-right: none !important;
    border-left: none !important;
}

img {
    vertical-align: middle;
    border-style: none;
}

.empslider p {
    float: right;
    font-size: 12px;
    font-weight: 600;
    font-family: "Roboto", sans-serif;
    /* font-weight: 500; */
}

.emprange {
    width: 100%;
    float: left;
}

.emprange ul li {
    list-style-type: none;
    float: left;
    width: 33%;
}

.emprange .left {
    text-align: right;
}

.emprange .center {
    text-align: center;
}

.emprange .right {
    text-align: left;
}

.emprange {
    width: 100%;
    float: left;
    padding-top: 10px;
}

.emprange ul li::after {
    position: absolute;
    width: 2px;
    height: 10px;
    content: "";
    top: 309px;
    margin-left: -5px;
}

.backgroundemp {
    width: 77%;
    float: left;
    max-width: 476px;
    background: #51b74a;
    border-radius: 2px;
}

.backgroundemp span {
    font-size: 9px;
    color: #fff;
    float: right;
}

.viewemployee {
    background: #43425d;
    border: none;
    border-radius: 4px;
    color: #fff;
    padding: 6px;
    font-size: 13px;
    outline: none;
    padding-right: 12px;
    padding-left: 12px;
    text-decoration: none;
}

.viewemployee:hover,
.viewemployee:focus {
    color: #fff;
    text-decoration: none;
    box-shadow: 0 0 4px rgb(67, 66, 93, 0.7);
}

.logoback {
    background-color: #43425d !important;
}

.approve {
    background-color: #20c10e;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    padding: 6px 10px;
}

.reject {
    background-color: #b21d1d;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    padding: 6px 10px;
}

.alert-success {
    color: #fff;
    background-color: #28b463;
    border-color: #28b463;
}

.show {
    opacity: 1;
}

.alert-dismissible .close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.75rem 1.25rem;
    color: inherit;
    opacity: 1;
}

.alert .icon {
    color: #fff;
    opacity: 0.7;
}

.alert-danger {
    color: #fff;
    background-color: #ff6562;
    border-color: #ff6562;
}

.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

/* custom css by Navneet Gehlot end */

/* .form-group-item .input-box {
  width: calc(100% - 140px);
  position: relative;
} */

.input-box select[name="mob_code"] {
    width: 70px;
    padding: 10px 10px;
}

.check select {
    padding: 10px 0;
    padding-left: 17px;
    outline: none;
    border: 1px solid #eeeeee;
    border-radius: 4px;
    color: #4d4f5c;
    margin-left: 76px;
    width: 67px;
}

/* .form-group-item {
  width: 100%;
  float: left;
  padding-bottom: 20px;
  display: flex;
  padding-right: 9%;
} */

.approved {
    color: #20c10e;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
}

.PageHead {
    float: left;
    width: 100%;
    margin-bottom: 15px;
}

.PageHead .left-side {
    float: left;
    width: 100%;
    background-color: #373759;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
    padding: 0px 15px;
}

.PageHead .right-side {
    text-align: right;
    float: left;
    width: 100%;
    margin-top: 3px;
}

select[name="posts_length"] {
    margin: 0 3px;
    width: auto;
    padding: 4px 2px;
    border: 1px solid #bbbbbb;
    border-radius: 5px;
}

.card {
    float: left;
    width: 100%;
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    border: 1px solid #dadada;
}

/* custom css for company dashboard by Navneet Gehlot "Start Here"*/

.count {
    width: 100%;
    float: left;
}

.companymain {
    background-color: #fff;
    margin-top: 16px;
    width: 174px;
    font-size: 0.875rem;
    text-align: right;
    padding-top: 10px;
    padding-right: 10px;
    float: left;
    margin-right: 82px;
}

.birthday {
    width: 21%;
    float: left;
    background: #fff;
}

.disabled {
    opacity: 0.4;
}

/* custom css for company dashboard by Navneet Gehlot "End Here"*/

.leaveItem {
    float: right;
    margin-left: 10px;
    background: #dfdfef;
    padding: 2px 6px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-weight: 600;
}

.cat-selection-area,
.cat-chips,
.cats-listing,
.cat-list-item,
.search-box {
    float: left;
    width: 100%;
}

.cats-listing {
    border: 1px solid #ccc;
    padding: 10px;
    max-height: 180px;
    height: auto;
    overflow-y: auto;
}

.cats-listing .cat-list-item:last-child {
    margin: 0;
    border: none;
}

.cat-list-item {
    padding: 6px 10px;
    margin: 0;
    cursor: pointer;
}

.cat-list-item:hover {
    background: #eee;
    border-radius: 5px;
    border-color: transparent;
}

.cat-list-item input[type="checkbox"] {
    position: relative;
    top: 2px;
}

.cat-search-box {
    float: left;
    width: 100%;
    border-bottom: none !important;
    border: 1px solid #ccc !important;
    background: #f8f8f8;
    padding: 7px 10px !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    font-style: italic;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin-bottom: -1px;
}

.cat-search-box:hover,
.cat-search-box:focus {
    outline: none;
}

.NoResMsg {
    margin: 0;
    text-align: center;
    font-weight: bold;
    padding: 12px 0;
}

.loadingit {
    float: left;
    width: 100%;
    overflow: hidden;
}

.loadingit img {
    max-width: 100%;
    max-height: 70px;
    display: block;
    margin: 0 auto;
}

.cat-list-item p {
    display: inline-block;
    margin: 0;
    font-weight: normal;
    margin-left: 5px;
    opacity: 0.8;
}

.LeftAlignedFields th,
.LeftAlignedFields tr,
.LeftAlignedFields td {
    text-align: left !important;
}

.chip-item {
    background: #f0f3f5;
    color: #23282c;
    border-color: #f0f3f5;
    float: left;
    padding: 6px 10px;
    margin-top: 10px;
    border-radius: 60px;
    margin-right: 5px;
}

.chip-item p {
    margin-bottom: 0;
    display: inline-block;
}

.chip-item .cross {
    display: inline-block;
    font-size: 20px;
    line-height: 10px;
    cursor: pointer;
    width: 15px;
    height: 15px;
    text-align: center;
    border-radius: 100%;
    position: relative;
    top: 1px;
    margin-left: 5px;
}

.chip-item .cross:hover {
    background: #ddd;
}

.alert p {
    margin: 0;
}

.DashCard {
    margin-bottom: 25px;
}

.height-115 {
    height: 115px;
}

.CardHeader {
    padding: 4px 0;
    border-bottom: 1px solid #f1f1f3;
}

.CardHeader h4 {
    margin-top: 0;
    float: left;
}

.CardBody {
    padding-top: 10px;
    display: inline-block;
    width: 100%;
}

.TimeClock {
    font-size: 42px;
    color: #4c5460;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 4px;
}

.DateArea h5 {
    font-size: 18px;
    font-weight: 700;
    color: #989898;
    margin: 0;
}

.TimeArea button {
    margin-top: 18px;
    font-family: "Lato", sans-serif !important;
    background: #089274;
    transition: all 0.3s ease;
    color: #fff;
}

.TimeArea button.checkout {
    background: #656388;
}

.TimeArea button:hover {
    color: #fff;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
}

.DateArea {
    margin-bottom: 24px;
}

.ShiftTimings .s-item {
    display: inline-block;
    margin: 0 10px;
    font-size: 15px;
}

.ShiftTimings .s-item .dot {
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 100px;
    display: inline-block;
    margin-right: 2px;
}

.CardHeader .leftHead {
    float: left;
}

.nopad {
    padding-left: 0;
    padding-right: 0;
}

.CheckInSuccess {
    display: inline-block;
    background: #f5f5f5;
    color: #000;
    padding: 6px 12px;
    border-radius: 4px;
    position: relative;
    top: -5px;
    font-size: 15px;
    margin-right: 10px;
}

.BirthdayList {
    margin-top: 15px;
}

.BirthdayItem .infoside {
    float: left;
    width: calc(100% - 70px);
    padding-left: 15px;
}

.BirthdayItem {
    float: left;
    width: 50%;
    margin-bottom: 15px;
}

.BirthdayItem .imgside {
    float: left;
    width: 70px;
    height: 70px;
    overflow: hidden;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
    position: relative;
}

.BirthdayItem .imgside img {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 120%;
    max-height: 120%;
    transform: translate(-50%, -50%);
}

.BirthdayItem .infoside h6 {
    font-weight: 600;
    color: #1f1f1f;
    margin-bottom: 5px;
    font-size: 15px;
    margin-top: 17px;
}

.BirthdayItem .infoside p {
    color: #000;
    font-weight: 500;
    display: inline-block;
    background: #eaeaea;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 14px;
}

.BirthdayItem .infoside p img {
    width: 16px;
    margin-bottom: 3px;
    margin-right: 5px;
}

.ThumbnailContainer {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
}

.check-in-btn {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.56px;
}

.profilepic {
    float: left;
    width: 35px;
    height: 35px;
}

.user-info p {
    margin-top: 8px;
    float: left;
    margin-left: 10px;
    font-weight: 600;
    margin-bottom: 0;
}

.user-info {
    float: right;
    padding: 6px 6px;
    border-radius: 5px;
    position: relative;
    top: -4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.user-info p i {
    margin-left: 3px;
}

.AutoCompleteChips {
    margin-top: 10px;
}

.AutoCompleteChips .chip {
    align-items: center;
    border: none;
    display: inline-flex;
    justify-content: center;
    outline: none;
    position: relative;
    z-index: 0;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    letter-spacing: 0.25px;
    font-variant-ligatures: no-contextual;
    padding-bottom: 6px;
    padding-top: 6px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px #dadce0;
    box-sizing: border-box;
    color: #1a73e8;
    cursor: pointer;
    font-weight: 500;
    line-height: 20px;
    padding-left: 16px;
    padding-right: 16px;
    margin-bottom: 8px;
    margin-right: 8px;
}

.display-flex {
    display: flex;
}

.text-mute {
    position: relative;
    top: -10px;
    color: #ffffff;
    font-weight: 600;
    font-family: "lato";
    display: inline-block;
    font-size: 20px !important;
}

@media only screen and (max-width: 1450px) {
    .text-mute {
        font-size: 20px !important;
    }
}

.BackLink:hover {
    text-decoration: none;
    color: #000;
}

.ThumbnailContainer img {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 120%;
    max-height: 120%;
    transform: translate(-50%, -50%);
    min-height: 100%;
    min-width: 100%;
}

.FormInput[type="file"] {
    background: #eee;
    padding: 8px 10px;
    border-radius: 5px;
}

.UserSec:hover .UserDropdown {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.UserDropdown {
    position: absolute;
    top: 52px;
    background: #fff;
    width: 150px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    right: 15px;
    transition: all 0.2s ease;
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
}

.dropmenu {
    float: left;
    width: 100%;
}

.dropmenu a {
    float: left;
    width: 100%;
    border-bottom: 1px solid #ddd;
    padding: 0 10px 0 0;
    color: #222;
    transition: all 0.3s ease;
    font-size: 15px;
}

.dropmenu a:hover {
    text-decoration: none;
    background: #f5f5f5;
}

.dropmenu a i {
    margin-right: 7px;
    background: #eee;
    padding: 8px 8px;
    display: inline-block;
}

ul.errorlist {
    padding-left: 20px;
}

.UserDropdown .UpperArrow {
    position: absolute;
    top: -8px;
    left: 50%;
    border-bottom: 8px solid #eee;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    transform: translateX(-50%);
}

.FlatList,
.BumperList {
    float: left;
    width: 100%;
}

.BumperList .ListItem {
    float: left;
    width: 100%;
    padding: 10px 12px;
    background: #f3f3f3;
    border-radius: 5px;
    margin-bottom: 10px;
}

.BumperList > .ListItem:last-child {
    margin-bottom: 0px;
}

.FlatList .ListItem {
    float: left;
    width: 100%;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.FlatList > .ListItem:last-child {
    border: none;
}

.FlatList .ListItem h6 {
    margin-top: 0;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
}

.FlatList .ListItem strong,
.BumperList .ListItem strong {
    font-weight: 600;
    margin-bottom: 0px;
    display: inline-block;
    font-size: 15px;
    color: #000;
}

.BumperList .ListItem span {
    opacity: 0.7;
    font-weight: 600;
    font-size: 14px;
}

.dayscircle {
    float: left;
    margin-right: 7px;
    width: 40px;
    text-align: center;
    height: 40px;
    line-height: 31px;
    border-radius: 50%;
    border: 4px solid #ddd;
}

.ZoomOutTable {
    zoom: 0.8;
}

.titleIcon {
    color: #a5b6d0;
    font-size: 22px;
}

.navigation ul.submenu {
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.4s ease;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.navigation ul > li.hasmenu:before {
    content: "";
    color: #fff;
    position: absolute;
    right: 15px;
    top: 18px;
    font-family: monospace;
    transition: all 0.2s ease;
    background-image: url(http://medusa.gomilestone.com/assets/img/down-arrow-white.svg);
    background-size: cover;
    width: 10px;
    height: 10px;
}

ul.submenu {
    max-height: 0;
    overflow: hidden;
}

.navigation li .submenu li a {
    padding: 10px 5px 10px 40px;
    line-height: normal;
    color: #a9a9b3;
}

.navigation li .submenu li a.active {
    color: #eeeeff;
}

.navigation li .submenu li:last-child a {
    border: none;
}

.submenu.active {
    max-height: 400px;
}

.navigation ul > li.hasmenu.menuopen:before {
    transform: rotate(180deg);
}

.invalid-feedback {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 90%;
    color: #dc3545;
}

.BigImg {
    width: 80px;
    height: 80px;
    display: inline-block;
}

.MidInfo {
    text-align: left;
    padding-bottom: 2px;
    margin-top: -54px;
}

.BottomBtns a {
    font-size: 12px;
}

.MidInfo p {
    font-weight: 700;
    margin-bottom: 0;
}

.MidInfo .BigImg {
    margin-bottom: 10px;
}

.iconlist {
    float: left;
    width: 100%;
}

.iconlist .itm {
    float: left;
    width: 100%;
}

.iconlist .itm .iconside {
    width: 25px;
    float: left;
    text-align: center;
    padding: 2px 0;
    color: #aaa;
}

.iconlist .itm .txtside {
    float: left;
    width: calc(100% - 25px);
    padding-left: 10px;
}

.iconlist .txtside a {
    color: #4287d5;
}

.iconlist .txtside a:hover,
.iconlist .txtside a:focus {
    text-decoration: none;
}

.BotInfo {
    padding-top: 12px;
    margin-bottom: -20px;
    padding-left: 10px;
    background: #fafaff;
    padding-bottom: 7px;
}

.iconlist .itm .txtside p {
    margin: 0;
}

.indicate {
    font-size: 15px;
    margin-left: 5px;
}

.In {
    color: #42e09e;
}

.Out {
    color: #e14656;
}

.Absent {
    color: #e14656;
}

button#more-btn:hover .more-dot {
    background: #8296a5;
}

button#more-btn {
    position: absolute;
    right: 0;
    top: 0px;
}

span.more-dot {
    width: 5px;
    height: 5px;
    background: #aab8c2;
    border-radius: 50%;
    display: block;
    margin-bottom: 3px;
}

button#more-btn {
    position: absolute;
    right: -15px;
    top: 0px;
    background: transparent;
    border: none;
    width: 33px;
    padding-left: 10px;
}

button#more-btn:hover,
button#more-btn:focus {
    outline: none;
}

.TopRightBtn {
    position: relative;
}

.TopRightBtn .dropdown-menu {
    margin-top: 25px;
    right: 0;
    left: auto;
    width: 160px;
}

.TopRightBtn .dropdown-menu .dropdown-item {
    width: 100%;
    float: left;
    text-align: end;
    padding: 5px 10px;
    color: #111;
}

.TopRightBtn .dropdown-menu .dropdown-item:hover {
    text-decoration: none;
    background: #f5f5f5;
}

a.BackLink i {
    line-height: normal;
    margin-right: 6px;
}

.PrintableTable .dt-buttons {
    margin-bottom: 20px;
}

.PrintableTable .TableHrs {
    margin-bottom: -30px;
}

.PrintableTable {
    margin-top: 10px;
}

.mt-0 {
    margin-top: 0 !important;
}

a.BackLink {
    cursor: pointer;
    font-size: 17px;
    margin-bottom: 6px;
    display: inline-block;
    color: #a9b1c0;
    font-weight: 500;
    font-family: "lato";
}

.EmployeeCards > .col-md-3 {
    padding: 0 15px;
}

.EmployeeCards.row {
    margin-right: -10px;
    margin-left: -10px;
    width: 100%;
}

.EmployeeCards {
    padding-top: 35px;
    display: inline-block;
}

.EmployeeCards.row > div > .DashCard {
    margin-bottom: 60px;
    border-radius: 9px;
}

.MidInfo p span {
    font-weight: 400;
    opacity: 0.8;
}

.BottomBtns {
    margin-top: 18px;
}

.dt-buttons {
    float: right;
    margin-bottom: 10px;
}

.dt-buttons button.dt-button {
    border: none;
    background: #66649a;
    color: #fff;
    padding: 7px 15px;
    margin-left: 5px;
    border-radius: 4px;
}

.dt-buttons button.dt-button.buttons-csv {
    background: #4389d6;
}

.dt-buttons button.dt-button.buttons-excel {
    background: #e9ecef;
    color: #020100;
}

.dt-buttons button.dt-button.buttons-print {
    background: #1abb9c;
}

.List-Item .text-left tr td {
    text-align: left;
}

.List-Item .text-left tr th {
    text-align: left;
}

.status {
    position: relative;
    margin-left: 10px;
}

.status::before {
    position: absolute;
    width: 10px;
    height: 10px;
    background: transparent;
    content: "";
    left: -15px;
    top: 4px;
    border-radius: 50%;
}

span.status.st-present::before {
    background-color: #4dbd74;
}

span.status.st-absent::before {
    background-color: #ea4335;
}

span.status.st-halfday::before {
    background-color: #ffc823;
}

span.status.st-weekend::before {
    background-color: #4285f4;
}

span.status.st-leave::before {
    background-color: #4285f4;
}

span.status.st-holiday::before {
    background-color: #4285f4;
}

.List-Item .font-bold tr td {
    font-weight: bold;
}

.AttendanceTitleSec {
    margin-bottom: 15px;
}

.AttendanceTitleSec h1 {
    margin: 0;
    line-height: normal;
    font-size: 34px;
}

.hrs-worked img {
    max-width: 20px;
    margin-right: 5px;
    vertical-align: top;
}

.hrs-worked {
    float: left;
    border: 1px solid #ddd;
    padding: 5px 8px;
    margin-top: -4px;
    border-radius: 10px;
    cursor: default;
}

.AttendanceTitleSec .lit-info {
    float: left;
    width: 100%;
    margin-bottom: 10px;
    margin-top: 6px;
    color: rgba(0, 0, 0, 0.7);
}

.status .QuesIcon {
    background: #ccc;
    border-radius: 50%;
    display: inline-block;
    width: 16px;
    height: 16px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    line-height: normal;
}

.status[data-toggle="tooltip"] {
    cursor: pointer;
}

.input-note {
    float: left;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 35px;
    opacity: 0.7;
}

.callout {
    position: relative;
    padding: 4px 15px;
    margin: 1rem 0;
    border-left: 4px solid #c8ced3;
    background-color: #fff;
    border-top: 1px solid #eee;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    border-radius: 7px;
    box-shadow: 2px 3px 5px 1px #e8e8e8;
}

.text-muted {
    color: #777;
    font-size: 13px;
}

table.dataTable thead th,
table.dataTable thead td {
    padding: 10px 10px !important;
}

.callout-info {
    border-left-color: #63c2de;
}

.callout-danger {
    border-left-color: #ea4335;
}

.callout-warning {
    border-left-color: #fbbc05;
}

.callout-success {
    border-left-color: #34a853;
}

.callout.callout-litlight {
    border-left-color: #4285f4;
}

.FullWidth {
    float: left;
    width: 100%;
}

.CalloutsList > .callout {
    float: left;
    width: 100%;
    margin: 0 15px;
}

.CalloutsList {
    margin-top: 12px;
    margin-bottom: 15px;
}

.hrs-clock,
.table-icon {
    position: relative;
    top: 2px;
}

.mb-4 {
    margin-bottom: 4px;
}

.mb-8 {
    margin-bottom: 8px;
}

.ProfileInfo .icon {
    position: relative;
    top: 2px;
}

span.leave-status {
    font-size: 14px;
    display: inline-block;
    font-weight: bold;
    width: 100%;
}

.leave-status.approved {
    color: #20c10e;
}

.leave-status.pending {
    color: #f47141;
}

.leave-status.rejected {
    color: #b40707;
}

.leave-status > span {
    margin-right: 5px;
}

.btn {
    font-family: "Lato", sans-serif !important;
    font-size: 14px;
    padding: 12px 22px;
    line-height: normal !important;
    text-decoration: none;
    line-height: normal;
    transition: all 0.1s ease;
}

.btn.btn-block {
    padding-left: 0;
    padding-right: 0;
}

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

.btn-primary {
    background: #43425d;
    border-color: #43425d;
    color: #fff;
}

.btn-blue {
    background: #252550;
    border-color: #373759;
    color: #fff;
    font-size: 14px;
    padding: 6px 24px;
    border-radius: 8px;
    letter-spacing: 0.56px;
}

.editP-icon {
    font-size: 20px;
}

a i.fa.fa-eye {
    font-size: 20px;
    color: #161730;
}

a i.fa.fa-trash {
    font-size: 20px;
    color: red;
}

input[type="file"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: 0px auto -webkit-focus-ring-color;
    outline-offset: 0px;
}

.btn-blue:hover {
    color: #fff;
    text-decoration: none;
}

/* .btn-light-primary {
  color: #5757ff;
  font-weight: bold;
  padding: 5px 0;
  font-size: 16px;
  position: relative;
} */

.btn-light-primary:after {
    content: "\f061";
    font-family: FontAwesome;
    font-size: 16px;
    margin-left: 10px;
    transition: all 0.2s ease;
    display: inline-block;
}

.btn-light-primary:hover:after {
    transform: translateX(5px);
}

/* .btn-light-primary:hover {
  color: #8585ff;
} */

/* .btn-blue:hover,
.btn-blue:focus,
.btn-success:focus-within,
.btn-blue:active {
  background: #7070ff;
  color: #fff;
} */

.btn-success {
    background: #0f9d58;
    border-color: #0f9d58;
    color: #fff;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:focus-within,
.btn-success:active {
    background: #21b96f;
    color: #fff;
}

.btn-primary .icon {
    position: relative;
    top: 1px;
}

.btn-sm {
    padding: 6px 10px;
}

.InputTxt {
    margin-bottom: 0;
    font-weight: 600;
    display: inline-block;
    margin-top: 6px;
}

.InputTxt .icon {
    position: relative;
    top: 1px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    border: none;
    background: #f2f2f2;
}

.DottedBtn {
    border: none;
    background: #eee;
    padding: 0px 7px;
    border-radius: 5px;
    height: 16px;
    overflow: hidden;
}

.DottedBtn:hover,
.DottedBtn:focus,
.DottedBtn:active {
    outline: none;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.OptionsDrop .dropdown-menu {
    padding: 0;
    min-width: 100px;
}

.OptionsDrop .dropdown-item:hover {
    background: #f5f5f5;
    text-decoration: none;
}

.OptionsDrop .dropdown-item {
    float: left;
    width: 100%;
    color: rgba(0, 0, 0, 0.7);
    padding: 6px 7px;
    font-size: 16px;
    font-family: "Lato", sans-serif;
}

.DateInp {
    width: 100%;
    padding: 10px 10px;
    outline: none;
    font-weight: 400;
    font-size: 14px;
    line-height: normal !important;
    border: 1px solid #c3c3c3 !important;
    border-radius: 8px;
    box-shadow: none;
    color: gray;
    height: 40px;
    border-bottom: 2px solid #d4d4d4 !important;
}

.navigation li a span.icon {
    opacity: 0.6;
    font-size: 17px;
    margin-right: 5px;
    position: relative;
    color: #fbfbfb;
    top: 2px;
}

.NoResultsFound {
    text-align: center;
}

.NoResultsFound h5 {
    opacity: 0.6;
}

.List-Item .NewStyleTable tr th {
    background-color: #c9c9c9;
    border-bottom: 1px solid #ddd !important;
}

.Attendance-date {
    position: relative;
    top: -10px;
    color: #e7e7e7;
    font-weight: 600;
    font-family: "lato";
    display: inline-block;
    font-size: 16px;
}

.NewStyleTable {
    border-top: 1px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;
}

.List-Item .NewStyleTable tr td {
    border-bottom: 1px solid #ddd !important;
}

.LeaveTypeBoxes .LeaveBox {
    margin-top: 20px !important;
}

.LeaveTypeBoxes {
    display: flex;
    width: 100%;
    margin-bottom: 30px;
}

.LeaveTypeBoxes > .LeaveBox:last-child {
    margin: 0;
}

.card {
    border-radius: 8px;
    border: none;
    box-shadow: 0px 0px 10px #e3e3e3;
    position: relative;
}

.LeaveTypeBoxes .LeaveBox {
    width: 50%;
    margin-right: 25px;
    padding: 15px;
}

h2.CardTitle {
    margin-top: 0;
    /* margin-bottom: 24px; */
    color: #2d2b47;
    font-size: 18px;
    font-weight: bold;
}

/* a:focus {
  color: #ffffff;
  text-decoration: none;
} */

a:focus {
    outline: 0px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.LeaveBox strong {
    font-size: 18px;
    margin-bottom: 8px;
    display: inline-block;
    color: #222233;
}

.inforow .lside {
    float: left;
    width: 75%;
    text-align: left;
}

.inforow .rside {
    float: right;
    width: 25%;
    text-align: left;
}

.inforow {
    float: left;
    width: 100%;
    color: #2f3c48;
    margin-bottom: 5px;
}

.LeaveBox h5 {
    font-size: 18px;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 0;
}

.LeaveBox p {
    color: #8f8f8f;
    font-size: 14px;
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.56px;
}

/*********** SWitch Input CSS Start ***********/
.switch {
    display: inline-block;
    width: 40px;
    height: 26px;
}

.switch-input {
    display: none;
}

.switch-slider {
    position: relative;
    display: block;
    height: inherit;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #c8ced3;
    transition: 0.15s ease-out;
    border-radius: 0.25rem;
}

.switch-slider::before {
    position: absolute;
    top: 2px;
    left: 2px;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    content: "";
    background-color: #fff;
    border: 1px solid #c8ced3;
    transition: 0.15s ease-out;
    border-radius: 0.125rem;
}

.switch-input:checked ~ .switch-slider::before {
    -webkit-transform: translateX(14px);
    transform: translateX(14px);
}

.switch-input:disabled ~ .switch-slider {
    cursor: not-allowed;
    opacity: 0.5;
}

.switch-lg {
    width: 48px;
    height: 30px;
}

.switch-lg .switch-slider {
    font-size: 12px;
}

.switch-lg .switch-slider::before {
    width: 24px;
    height: 24px;
}

.switch-lg .switch-slider::after {
    font-size: 12px;
}

.switch-lg .switch-input:checked ~ .switch-slider::before {
    -webkit-transform: translateX(18px);
    transform: translateX(18px);
}

.switch-sm {
    width: 32px;
    height: 22px;
}

.switch-sm .switch-slider {
    font-size: 8px;
}

.switch-sm .switch-slider::before {
    width: 16px;
    height: 16px;
}

.switch-sm .switch-slider::after {
    font-size: 8px;
}

.switch-sm .switch-input:checked ~ .switch-slider::before {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
}

.switch-label {
    width: 48px;
}

.switch-label .switch-slider::before {
    z-index: 2;
}

.switch-label .switch-slider::after {
    position: absolute;
    top: 50%;
    right: 1px;
    z-index: 1;
    width: 50%;
    margin-top: -0.5em;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    color: #c8ced3;
    text-align: center;
    text-transform: uppercase;
    content: attr(data-unchecked);
    transition: inherit;
}

.switch-label .switch-input:checked ~ .switch-slider::before {
    -webkit-transform: translateX(22px);
    transform: translateX(22px);
}

.switch-label .switch-input:checked ~ .switch-slider::after {
    left: 1px;
    color: #fff;
    content: attr(data-checked);
}

.switch-label.switch-lg {
    width: 56px;
    height: 30px;
}

.switch-label.switch-lg .switch-slider {
    font-size: 12px;
}

.switch-label.switch-lg .switch-slider::before {
    width: 24px;
    height: 24px;
}

.switch-label.switch-lg .switch-slider::after {
    font-size: 12px;
}

.switch-label.switch-lg .switch-input:checked ~ .switch-slider::before {
    -webkit-transform: translateX(26px);
    transform: translateX(26px);
}

.switch-label.switch-sm {
    width: 40px;
    height: 22px;
}

.switch-label.switch-sm .switch-slider {
    font-size: 8px;
}

.switch-label.switch-sm .switch-slider::before {
    width: 16px;
    height: 16px;
}

.switch-label.switch-sm .switch-slider::after {
    font-size: 8px;
}

.switch-label.switch-sm .switch-input:checked ~ .switch-slider::before {
    -webkit-transform: translateX(18px);
    transform: translateX(18px);
}

.switch-3d .switch-slider {
    background-color: #f0f3f5;
    border-radius: 50em;
}

.switch-3d .switch-slider::before {
    top: -1px;
    left: -1px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50em;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.switch-3d.switch-lg {
    width: 48px;
    height: 30px;
}

.switch-3d.switch-lg .switch-slider::before {
    width: 30px;
    height: 30px;
}

.switch-3d.switch-lg .switch-input:checked ~ .switch-slider::before {
    -webkit-transform: translateX(18px);
    transform: translateX(18px);
}

.switch-3d.switch-sm {
    width: 32px;
    height: 22px;
}

.switch-3d.switch-sm .switch-slider::before {
    width: 22px;
    height: 22px;
}

.switch-3d.switch-sm .switch-input:checked ~ .switch-slider::before {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
}

.switch-success .switch-input:checked + .switch-slider {
    background-color: #4dbd74;
    border-color: #3a9d5d;
}

.switch-success .switch-input:checked + .switch-slider::before {
    border-color: #3a9d5d;
}

.switch-outline-success .switch-input:checked + .switch-slider {
    background-color: #fff;
    border-color: #4dbd74;
}

.switch-outline-success .switch-input:checked + .switch-slider::before {
    border-color: #4dbd74;
}

.switch-outline-success .switch-input:checked + .switch-slider::after {
    color: #4dbd74;
}

.switch-outline-success-alt .switch-input:checked + .switch-slider {
    background-color: #fff;
    border-color: #4dbd74;
}

.switch-outline-success-alt .switch-input:checked + .switch-slider::before {
    background-color: #4dbd74;
    border-color: #4dbd74;
}

.switch-outline-success-alt .switch-input:checked + .switch-slider::after {
    color: #4dbd74;
}

.switch-pill .switch-slider {
    border-radius: 50em;
}

.switch-pill .switch-slider::before {
    border-radius: 50em;
}

/*********** SWitch Input CSS End ***********/

.PrimatyBtn.btn-primary:hover,
.PrimatyBtn.btn-primary:focus,
.PrimatyBtn.btn-primary:active {
    color: #fff;
    background-color: #393854;
    border-color: #59577b;
    box-shadow: none;
    outline: none;
}

.InCard h2 {
    margin-top: 8px;
}

.PageHead.InCard {
    margin-bottom: 26px;
}

.alert li,
.alert p {
    list-style: none;
    font-size: 16px;
}

.btn-primary.btnPrimary.active,
.btn-primary.btnPrimary:hover,
.btn-primary.btnPrimary:focus,
.btn-primary.btnPrimary:active {
    background-color: #3a3a5a !important;
    border-color: #3a3a5a !important;
}

.CustomModal {
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.CustomModal .modal-dialog {
    margin: 0;
    float: right;
    height: 100%;
    width: 70%;
}

.CustomModal .modal-dialog .modal-content {
    border-radius: 0;
    height: 100%;
    border: none;
}

.CustomModal .modal-body {
    height: calc(100% - 56px);
    overflow-y: auto;
}

.leave-modal {
    padding: 20px 30px;
}

i.icon-user {
    font-size: 16px;
}

button.cross-icon {
    height: 35px;
    width: 35px;
    background-color: #fff;
    color: #ff0000;
    opacity: 1;
    border-radius: 50%;
    box-shadow: 0px 0px 4px 1px #c5c5c5;
}

button.cross-icon:hover {
    opacity: 1;
    color: #ff0000;
}

.input-group-text i.fa.fa-calendar {
    font-size: 17px;
}

.dropmenu a:focus {
    color: #000000;
    text-decoration: none;
}

.modal.fade.CustomModal .modal-dialog {
    -webkit-transform: translate(100%, 0%);
    -ms-transform: translate(100%, 0%);
    -o-transform: translate(100%, 0%);
    transform: translate(100%, 0%);
    -webkit-transition: 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
    -o-transition: 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.modal.fade.CustomModal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.TitleSec h3 {
    margin-top: 11px;
    font-weight: 900;
    opacity: 0.3;
    font-size: 19px;
}

.input-group {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}

.input-group > .custom-file,
.input-group > .custom-select,
.input-group > .form-control {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1% !important;
    margin-bottom: 0;
}

.form-group-item .input-group {
    margin: 0;
}

/* .input-group>.custom-file:focus,
.input-group>.custom-select:focus,
.input-group>.form-control:focus {
  z-index: 3
}

.input-group>.custom-file+.custom-file,
.input-group>.custom-file+.custom-select,
.input-group>.custom-file+.form-control,
.input-group>.custom-select+.custom-file,
.input-group>.custom-select+.custom-select,
.input-group>.custom-select+.form-control,
.input-group>.form-control+.custom-file,
.input-group>.form-control+.custom-select,
.input-group>.form-control+.form-control {
  margin-left: -1px
} */

.input-group > .custom-select:not(:last-child),
.input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .custom-select:not(:first-child),
.input-group > .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > .custom-file {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.input-group > .custom-file:not(:last-child) .custom-file-label,
.input-group > .custom-file:not(:last-child) .custom-file-label:before {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .custom-file:not(:first-child) .custom-file-label,
.input-group > .custom-file:not(:first-child) .custom-file-label:before {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group-append,
.input-group-prepend {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.input-group-append .btn,
.input-group-prepend .btn {
    position: relative;
    z-index: 2;
}

/* .input-group-append .btn+.btn,
.input-group-append .btn+.input-group-text,
.input-group-append .input-group-text+.btn,
.input-group-append .input-group-text+.input-group-text,
.input-group-prepend .btn+.btn,
.input-group-prepend .btn+.input-group-text,
.input-group-prepend .input-group-text+.btn,
.input-group-prepend .input-group-text+.input-group-text {
  margin-left: -1px
} */

.input-group-prepend {
    margin-right: -1px;
}

.input-group-append {
    margin-left: -1px;
}

.input-group-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.375rem 0.75rem;
    margin-bottom: 0;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.6;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.input-group-text input[type="checkbox"],
.input-group-text input[type="radio"] {
    margin-top: 0;
}

/* .input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle),
.input-group>.input-group-append:last-child>.input-group-text:not(:last-child),
.input-group>.input-group-append:not(:last-child)>.btn,
.input-group>.input-group-append:not(:last-child)>.input-group-text,
.input-group>.input-group-prepend>.btn,
.input-group>.input-group-prepend>.input-group-text {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0
} */

/* .input-group>.input-group-append>.btn,
.input-group>.input-group-append>.input-group-text,
.input-group>.input-group-prepend:first-child>.btn:not(:first-child),
.input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child),
.input-group>.input-group-prepend:not(:first-child)>.btn,
.input-group>.input-group-prepend:not(:first-child)>.input-group-text {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0
} */

.input-group {
    margin-bottom: 15px;
}

.logocontainer h1 {
    color: #fff;
}

.InlineLoader {
    position: relative;
    top: 6px;
}

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 30px;
}

.lds-ellipsis div {
    position: absolute;
    top: 10px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #ccc;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    left: 6px;
    animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
    left: 6px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
    left: 26px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
    left: 45px;
    animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(19px, 0);
    }
}

.th-center th {
    vertical-align: inherit !important;
}

.table th.col-th {
    border-left: 1px solid #ccc !important;
    border-bottom: 1px solid #ccc !important;
    text-align: center !important;
    border-right: 1px solid #ccc !important;
}

.table th.col-th-child {
    border-left: 1px solid #ccc !important;
    text-align: center !important;
}


.Scroller {
    overflow-y: auto;
}

.max-height-400 {
    max-height: 400px;
}

.ViewAttnLink {
    opacity: 0.3;
    color: #000;
}

.ViewAttnLink:hover {
    opacity: 0.9;
    text-decoration: none;
    color: #000;
}

.CancelLeaveBtn {
    float: left;
    width: 100%;
    color: #ff1b16;
    line-height: initial;
    margin-top: 5px;
    display: flex;
    align-items: center;
    font-size: 16px;
}

.fa.fa-trash.table-icon {
    font-size: 20px;
    margin-right: 6px;
}

.CancelLeaveBtn:hover {
    text-decoration: none;
    color: red;
}

.LeavePatches {
    display: flex;
    margin: 20px 0;
    margin-bottom: 30px;
}

.LeavePatch {
    box-shadow: inset 0 0 0 1px #dadce0;
    border-radius: 8px;
    padding: 2px 21px;
    margin-right: 15px;
    width: 100%;
    background: #f8f8f8;
}

.LeavePatch h5 {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 15px;
}

.LeavePatch p {
    font-size: 14px;
    opacity: 0.8;
}

.form-group-item .input-box.half {
    width: 33%;
}

.LeavePatch:last-child {
    margin: 0;
}

.HighlightIt {
    position: relative;
    width: 20px;
    height: 20px;
    float: left;
    margin-left: 4px;
    margin-top: -12px;
}

.innerCircle {
    width: 10px;
    height: 10px;
    background: #00cc8f;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    z-index: 3;
}

.outerCircle {
    width: 16px;
    height: 16px;
    background: #72ffd5;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    transform-origin: center;
    -webkit-animation-name: StandAlone;
    -webkit-animation-duration: 1.2s;
    /* Safari 4.0 - 8.0 */
    animation-iteration-count: infinite;
    animation-timing-function: ease-in;
}

@keyframes StandAlone {
    0% {
        transform: translate(-50%, -50%) scale(1, 1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.4, 1.4);
    }

    100% {
        transform: translate(-50%, -50%) scale(1, 1);
    }
}

.outerCircle2 {
    width: 15px;
    height: 15px;
    background: #4cf3c1;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    transform-origin: center;
    -webkit-animation-name: AnimateIt;
    -webkit-animation-duration: 1.2s;
    /* Safari 4.0 - 8.0 */
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes AnimateIt {
    0% {
        transform: translate(-50%, -50%) scale(1, 1);
        opacity: 1;
    }

    90% {
        transform: translate(-50%, -50%) scale(3, 3);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%) scale(1, 1);
        opacity: 0;
    }
}

.BigTable {
    white-space: nowrap;
}

.VerScrollable {
    overflow-x: auto;
}

.TimeLine .icon-s {
    float: left;
    width: 26px;
    height: 25px;
    background: #d9e2ff;
    color: #2e5bff;
    font-weight: bold;
    text-align: center;
    line-height: 26px;
    font-size: 14px;
    border-radius: 50%;
}

.TimeLine .txt {
    float: left;
    width: calc(100% - 26px);
    font-size: 19px;
    margin: 0;
    padding-left: 10px;
    margin-top: 3px;
}

.TimeLine .txt .time-s {
    font-size: 11px;
}

.TimeLine {
    margin-top: 8px;
}

.TitleSec img {
    width: 60px;
    margin-top: 5px;
    opacity: 0.2;
}

.TablesList {
    background: #f5f5f5;
    padding: 10px;
    margin-top: 20px;
    border-radius: 6px;
}

.TablesList a {
    color: #222;
    margin-bottom: 7px;
    float: left;
    width: 100%;
    position: relative;
}

.TablesList a:before {
    content: "+";
    margin-right: 6px;
    background: #ccc;
    width: 18px;
    display: inline-block;
    height: 18px;
    text-align: center;
    border-radius: 2px;
    line-height: 17px;
}

.logocontainer img {
    max-width: 100px;
}

.icon-sm {
    font-size: 12px;
}

.card.pad-sm {
    padding: 12px;
}

.QuoteLine {
    font-size: 16px;
    position: relative;
    border-radius: 5px;
    line-height: 30px;
    display: inline-block;
    color: #4c5460;
    text-align: left;
    margin: 0;
}

.QuoteLine img {
    float: left;
    width: 17px;
    position: absolute;
    top: -4px;
    opacity: 0;
    left: -9px;
    z-index: 0;
}

.QuoteLine span {
    font-size: 12px;
    font-style: italic;
    font-weight: 600;
    opacity: 0.6;
    color: #0000bd;
}

@keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

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

.btn-blue[disabled]:after,
.btn-success[disabled]:after {
    content: "\f110";
    font: normal normal normal 14px/1 FontAwesome;
    margin-left: 10px;
    animation: fa-spin 2s infinite linear;
    transition: all 0.3s ease;
    display: inline-block;
}

.dataTable .btn.btn-success.btn-sm[disabled]:after {
    content: "\f110";
    font: normal normal normal 14px/1 FontAwesome;
    margin-left: 10px;
    animation: fa-spin 2s infinite linear;
    transition: all 0.3s ease;
    display: inline-block;
}

.SearchNButtons .dataTables_filter {
    margin-right: 15px;
    margin-top: 0px;
}

.SearchNButtons .dataTables_filter input {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 4px 9px;
}

.SearchNButtons .dataTables_filter input:focus {
    outline: none;
    border-color: #373759;
}

div#posts_processing {
    background: rgba(255, 255, 255, 0.8);
    height: calc(100% - 19%);
    top: 14%;
    transition: all 0.3s ease;
    text-align: center;
}

.UpperLoader {
    position: absolute;
    top: 10px;
    width: 100%;
    text-align: center;
}

.BottomLoader {
    position: absolute;
    width: 100%;
    bottom: 10px;
}

.ratingRow .rateItem {
    float: left;
    padding-right: 9px;
    padding-left: 12px;
    padding-top: 12px;
    padding-bottom: 9px;
    cursor: pointer;
}

.ratingRow .rateItem i {
    font-size: 28px;
    color: #c4c4d2;
    transition: all 0.3s ease;
    display: inline-block;
}

.ratingRow .rateItem.active i {
    color: #3dd94a;
    transform: scale(1.5) rotate(360deg);
}

.ratingRow .rateItem:hover i {
    color: #3dd94a;
    transform: scale(1.5);
}

.ratingRow .rateItem.yellowHover:hover i,
.ratingRow .yellowHover.rateItem.active i {
    color: #ffd500;
}

.ratingRow .rateItem.redHover:hover i,
.ratingRow .redHover.rateItem.active i {
    color: #ff595e;
}

.ratingRow .rateItem.blueHover:hover i,
.ratingRow .blueHover.rateItem.active i {
    color: #41c4ff;
}

.form-group-item.ResponseSec {
    display: none !important;
}

.bg-blue-dark {
    background: linear-gradient(135deg, #289cf5, #4f8bb7) !important;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 20px;
}

.bg-purple {
    background: linear-gradient(135deg, #8e4cf1 0, #c554bc 100%) !important;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 20px;
}

.bg-green-dark {
    background: linear-gradient(135deg, #23bdb8 0, #65a986 100%) !important;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 20px;
}

.bg-orange-dark {
    background: linear-gradient(135deg, #f48665 0, #d68e41 100%) !important;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 20px;
}

.d-user {
    font-size: 40px !important;
    color: rgb(205, 205, 205);
    opacity: 0.4;
}

.add-btn:focus {
    color: #000000;
    text-decoration: none;
}

.icons {
    position: relative;
}

.eye {
    position: absolute;
    top: 10px;
    right: 10px;
}

img.p-img {
    margin-top: 12px;
}

.input-hight {
    height: 55px;
}

span.upload-file-name {
    font-size: 14px;
    color: #494949;
    font-weight: 600;
}

.detail-page {
    margin-top: 40px;
}

.Document-table .table-thead th {
    border: 1px solid rgb(175, 175, 175) !important;
    border-collapse: collapse !important;
}

.Document-table .table-tbody td {
    border: 1px solid rgb(175, 175, 175) !important;
    border-collapse: collapse !important;
}

thead.table-thead {
    background-color: gainsboro;
}

.table-thead th {
    font-family: "Lato";
    font-size: 16px;
    font-weight: 600;
    color: #000;
}

.table-tbody td {
    font-family: "Lato";
    font-size: 15px;
    font-weight: 400;
    color: #000;
}

p.Accept {
    margin: 0;
    color: #19aa19;
    width: 52%;
    padding: 4px 6px;
    text-align: center;
    font-weight: 600;
    border-radius: 12px;
    /* color: #ffff; */
}

p.Pending {
    margin: 0;
    color: #eea825;
    width: 52%;
    padding: 4px 6px;
    text-align: center;
    font-weight: 600;
    border-radius: 12px;
    /* color: #ffff; */
}

p.Reject {
    margin: 0;
    color: #e62323;
    width: 52%;
    padding: 4px 6px;
    font-weight: 600;
    text-align: center;
    border-radius: 12px;
}

.sidebar-padding {
    margin: 0;
    padding: 0;
}

/* Ankul css ****************************************/
.editView-icon {
    font-size: 20px !important;
    color: #337ab7 !important;
    margin-right: 10px;
    cursor: pointer;
}

.drop-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 10px;
}

.down-arro {
    font-size: 22px !important;
}

.multi-user {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.multi-user-name {
    margin: 0;
    background-color: rgb(241 241 241);
    padding: 3px 8px;
    border-radius: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
}

.vendorId {
    width: 80px !important;
    min-width: 80px !important;
}

.thead-th {
    width: 160px !important;
    min-width: 160px !important;
}

.thead-th-address {
    width: 200px !important;
    min-width: 200px !important;
}

.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.textareas {
    height: auto !important;
}

.action-box {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.deleteD-icon {
    font-size: 18px !important;
    color: red;
    cursor: pointer;
    margin-right: 10px;
}

.editP-icon {
    font-size: 18px !important;
    color: #337ab7;
    margin-right: 10px;
    cursor: pointer;
}

.select_box {
    position: relative;
}

.select-arro {
    font-size: 20px !important;
    position: absolute;
    right: 10px;
    top: 9px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #fff !important;
    border-radius: 6px;
    border: none !important;
    background: linear-gradient(to bottom, #2f305d 0%, #2f305d 100%) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #fff !important;
    border-radius: 6px;
    background: linear-gradient(to bottom, #2f305d 0%, #2f305d 100%) !important;
}

a.paginate_button.current {
    background-color: #2f305d !important;
    color: #fff !important;
}

.back-arro {
    display: flex;
    align-items: center;
}

.assigne-select {
    width: 86% !important;
    padding: 3px 10px !important;
    outline: none;
    font-weight: 400;
    font-size: 13px !important;
    line-height: normal !important;
    border: 1px solid #c3c3c3 !important;
    border-radius: 8px;
    box-shadow: none;
    color: gray;
    height: 32px !important;
}

input[type="file"] {
    display: block;
}

.imageThumb {
    max-height: 75px;
    border-radius: 6px;
    padding: 1px;
    cursor: pointer;
}

.pip {
    display: inline-block;
    margin: 10px 10px 0 0;
    position: relative;
}

.remove {
    display: block;
    background: #fff;
    color: rgb(255, 0, 0);
    text-align: center;
    cursor: pointer;
    position: absolute;
    top: -7px;
    font-size: 13px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-weight: 800;
    box-shadow: 0px 0px 5px 1px #dedede;
}

#action-box #menu-wrap {
    position: relative;
    height: 25px;
    width: 36px;
}

#action-box #menu-wrap .dots {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 1;
}

#action-box #menu-wrap .dots > div,
#action-box #menu-wrap .dots > div:after,
#action-box #menu-wrap .dots > div:before {
    height: 4px;
    width: 4px;
    background-color: rgba(49, 49, 49, 0.8);
    border-radius: 50%;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

#action-box #menu-wrap .dots > div {
    position: relative;
}

#action-box #menu-wrap .dots > div:after {
    content: "";
    position: absolute;
    bottom: calc((25px / 2) - (6px / 2));
    left: 0;
}

#action-box #menu-wrap .dots > div:before {
    content: "";
    position: absolute;
    top: calc((25px / 2) - (6px / 2));
    left: 0;
}

#action-box #menu-wrap .menu {
    position: absolute;
    right: -10px;
    top: calc(-12px + 50px);
    width: 0;
    height: 0;
    background-color: #fff;
    padding: 10px 15px;
    border-radius: 6px;
    -webkit-box-shadow: 0px 2px 6px rgba(49, 49, 49, 0.2);
    box-shadow: 0px 2px 6px rgba(49, 49, 49, 0.2);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    padding-bottom: 0;
}

#action-box #menu-wrap .menu ul {
    list-style: none;
    margin: 0;
    width: 100%;
}

#action-box #menu-wrap .menu ul li {
    margin: 7px 0;
    margin-top: 0;
    width: 100%;
    padding: 4px 10px;
}

#action-box #menu-wrap .menu ul li:hover {
    background-color: #ececec;
    border-radius: 6px;
}

#action-box #menu-wrap .menu ul li .link {
    text-decoration: none;
    color: rgba(49, 49, 49, 0.85);
    opacity: 0;
    visibility: hidden;
    font-size: 15px;
}

#action-box #menu-wrap .toggler {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    z-index: 2;
}

#action-box #menu-wrap .toggler:checked ~ .menu {
    opacity: 1;
    visibility: visible;
    width: 150px;
    height: 130px;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    z-index: 9;
}

#action-box #menu-wrap .toggler:checked ~ .menu ul .link {
    opacity: 1;
    visibility: visible;
    -webkit-transition: 0.5s ease 0.3s;
    -o-transition: 0.5s ease 0.3s;
    transition: 0.5s ease 0.3s;
}

.weekend_color {
    border-left-color: #9f1919 !important;
}
.holiday_colour {
    border-left-color: #ef0de6 !important;
}
span.status.st-holiday::before {
    background-color: #ef0de6 !important;
}
span.status.st-weekend::before {
    background-color: #9f1919 !important;
}
.pass-icon {
    position: absolute;
    right: 10px;
    z-index: 99;
    top: 8px;
    font-size: 18px;
}
.pass-icons {
    position: relative !important;
}

span.status.half-day-leaves::before {
    background: linear-gradient(
        90deg,
        #4dbd74,
        #4dbd74 50%,
        white 50%,
        white 50%,
        #4285f4 50%
    ) !important;
}
.text-info {
    color: #f7ad45;
    padding: 4px 8px;
    border-radius: 35px;
    border: 1px solid #ecc654;
}
.text-warning {
    border: 1px solid #ff90bb;
    color: #d50b8b;
    padding: 4px 8px;
    border-radius: 35px;
}
.text-success {
    padding: 4px 8px;
    border-radius: 35px;
    color: #3f7d58;
    border: 1px solid #99bc85;
}
.project-select-date {
    height: 40px;
}

.filters-btn {
    padding: 7px 10px;
    border-radius: 4px;
    margin-right: 10px;
    background-color: #67ae6e;
    color: #fff;
    border: none;
}

.reset-btns {
    padding: 7px 10px;
    background-color: #eb5b00;
    color: #fff;
    border: none;
    border-radius: 4px;
}

.reset-btns:hover {
    background-color: #ca3e07;
    color: #fff;
}

.filters-btn:hover {
    background-color: #139920 !important;
    color: #fff !important;
}
.icons-colors {
    color: #a9aaa9;
    margin-left: 8px;
    font-size: 18px !important;
    margin-right: 8px;
}
.project-icons {
    display: flex;
    align-items: center;
}
.icons-colors-view {
    color: #a9aaa9 !important;
    margin-left: 12px;
}
#project_timesheet_filter label input {
    border: 1px solid rgb(193, 193, 193);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 14px;
}
.sidebar-icons {
    width: 20px;
    height: 20px;
}
.datepicker {
    height: 40px;
}
.status-select {
    height: 40px !important;
}
select.form-control {
    height: 40px;
}
.info-icons {
    font-size: 18px !important;
}
i.icon-lock {
    font-size: 16px;
}
#clients_table_filter input {
    height: 34px;
    border: 1px solid rgb(193, 193, 193);
    border-radius: 8px;
}
.employe-icons {
    font-size: 20px !important;
    margin-right: 5px;
    color: #a9aaa9;
}
.employe-icons-delete {
    font-size: 20px !important;
    color: red;
    margin-right: 5px;
}
.menu-edit-icons {
    font-size: 18px !important;
    margin-right: 10px;
    color: #a9aaa9;
}
.input-group .datepicker{
    height: auto !important;
}
.datepicker, .table-condensed {
    height: auto !important;
}