/*Font Size*/
.font-11 {
    font-size: 11px !important;
}

.font-12 {
    font-size: 12px !important;
}

.font-13 {
    font-size: 13px !important;
}

.font-14 {
    font-size: 14px !important;
}

.font-15 {
    font-size: 15px !important;
}

.font-16 {
    font-size: 16px !important;
}

.font-17 {
    font-size: 17px !important;
}

.font-18 {
    font-size: 18px !important;
}

.font-19 {
    font-size: 19px !important;
}

.font-20 {
    font-size: 20px !important;
}

.font-21 {
    font-size: 21px !important;
}

.font-22 {
    font-size: 22px !important;
}

.font-23 {
    font-size: 23px !important;
}

.font-24 {
    font-size: 24px !important;
}

.font-25 {
    font-size: 25px !important;
}

.font-26 {
    font-size: 26px !important;
}

.font-27 {
    font-size: 27px !important;
}

.font-28 {
    font-size: 28px !important;
}

.font-29 {
    font-size: 29px !important;
}

.font-30 {
    font-size: 30px !important;
}

.font-31 {
    font-size: 31px !important;
}

.font-32 {
    font-size: 32px !important;
}

.font-33 {
    font-size: 33px !important;
}

.font-34 {
    font-size: 34px !important;
}

.font-35 {
    font-size: 35px !important;
}

.font-36 {
    font-size: 36px !important;
}

.font-37 {
    font-size: 37px !important;
}

.font-38 {
    font-size: 38px !important;
}

.font-39 {
    font-size: 39px !important;
}

.font-40 {
    font-size: 40px !important;
}

.font-41 {
    font-size: 41px !important;
}

.font-42 {
    font-size: 42px !important;
}

.font-43 {
    font-size: 43px !important;
}

.font-44 {
    font-size: 44px !important;
}

.font-45 {
    font-size: 45px !important;
}

.font-46 {
    font-size: 46px !important;
}

.font-47 {
    font-size: 47px !important;
}

.font-48 {
    font-size: 48px !important;
}

.font-49 {
    font-size: 49px !important;
}

.font-50 {
    font-size: 50px !important;
}

@media (min-width: 576px) {
    .font-sm-11 {
        font-size: 11px !important;
    }

    .font-sm-12 {
        font-size: 12px !important;
    }

    .font-sm-13 {
        font-size: 13px !important;
    }

    .font-sm-14 {
        font-size: 14px !important;
    }

    .font-sm-15 {
        font-size: 15px !important;
    }

    .font-sm-16 {
        font-size: 16px !important;
    }

    .font-sm-17 {
        font-size: 17px !important;
    }

    .font-sm-18 {
        font-size: 18px !important;
    }

    .font-sm-19 {
        font-size: 19px !important;
    }

    .font-sm-20 {
        font-size: 20px !important;
    }

    .font-sm-21 {
        font-size: 21px !important;
    }

    .font-sm-22 {
        font-size: 22px !important;
    }

    .font-sm-23 {
        font-size: 23px !important;
    }

    .font-sm-24 {
        font-size: 24px !important;
    }

    .font-sm-25 {
        font-size: 25px !important;
    }

    .font-sm-26 {
        font-size: 26px !important;
    }

    .font-sm-27 {
        font-size: 27px !important;
    }

    .font-sm-28 {
        font-size: 28px !important;
    }

    .font-sm-29 {
        font-size: 29px !important;
    }

    .font-sm-30 {
        font-size: 30px !important;
    }

    .font-sm-31 {
        font-size: 31px !important;
    }

    .font-sm-32 {
        font-size: 32px !important;
    }

    .font-sm-33 {
        font-size: 33px !important;
    }

    .font-sm-34 {
        font-size: 34px !important;
    }

    .font-sm-35 {
        font-size: 35px !important;
    }

    .font-sm-36 {
        font-size: 36px !important;
    }

    .font-sm-37 {
        font-size: 37px !important;
    }

    .font-sm-38 {
        font-size: 38px !important;
    }

    .font-sm-39 {
        font-size: 39px !important;
    }

    .font-sm-40 {
        font-size: 40px !important;
    }

    .font-sm-41 {
        font-size: 41px !important;
    }

    .font-sm-42 {
        font-size: 42px !important;
    }

    .font-sm-43 {
        font-size: 43px !important;
    }

    .font-sm-44 {
        font-size: 44px !important;
    }

    .font-sm-45 {
        font-size: 45px !important;
    }

    .font-sm-46 {
        font-size: 46px !important;
    }

    .font-sm-47 {
        font-size: 47px !important;
    }

    .font-sm-48 {
        font-size: 48px !important;
    }

    .font-sm-49 {
        font-size: 49px !important;
    }

    .font-sm-50 {
        font-size: 50px !important;
    }
}

@media (min-width: 768px) {
    .font-md-11 {
        font-size: 11px !important;
    }

    .font-md-12 {
        font-size: 12px !important;
    }

    .font-md-13 {
        font-size: 13px !important;
    }

    .font-md-14 {
        font-size: 14px !important;
    }

    .font-md-15 {
        font-size: 15px !important;
    }

    .font-md-16 {
        font-size: 16px !important;
    }

    .font-md-17 {
        font-size: 17px !important;
    }

    .font-md-18 {
        font-size: 18px !important;
    }

    .font-md-19 {
        font-size: 19px !important;
    }

    .font-md-20 {
        font-size: 20px !important;
    }

    .font-md-21 {
        font-size: 21px !important;
    }

    .font-md-22 {
        font-size: 22px !important;
    }

    .font-md-23 {
        font-size: 23px !important;
    }

    .font-md-24 {
        font-size: 24px !important;
    }

    .font-md-25 {
        font-size: 25px !important;
    }

    .font-md-26 {
        font-size: 26px !important;
    }

    .font-md-27 {
        font-size: 27px !important;
    }

    .font-md-28 {
        font-size: 28px !important;
    }

    .font-md-29 {
        font-size: 29px !important;
    }

    .font-md-30 {
        font-size: 30px !important;
    }

    .font-md-31 {
        font-size: 31px !important;
    }

    .font-md-32 {
        font-size: 32px !important;
    }

    .font-md-33 {
        font-size: 33px !important;
    }

    .font-md-34 {
        font-size: 34px !important;
    }

    .font-md-35 {
        font-size: 35px !important;
    }

    .font-md-36 {
        font-size: 36px !important;
    }

    .font-md-37 {
        font-size: 37px !important;
    }

    .font-md-38 {
        font-size: 38px !important;
    }

    .font-md-39 {
        font-size: 39px !important;
    }

    .font-md-40 {
        font-size: 40px !important;
    }

    .font-md-41 {
        font-size: 41px !important;
    }

    .font-md-42 {
        font-size: 42px !important;
    }

    .font-md-43 {
        font-size: 43px !important;
    }

    .font-md-44 {
        font-size: 44px !important;
    }

    .font-md-45 {
        font-size: 45px !important;
    }

    .font-md-46 {
        font-size: 46px !important;
    }

    .font-md-47 {
        font-size: 47px !important;
    }

    .font-md-48 {
        font-size: 48px !important;
    }

    .font-md-49 {
        font-size: 49px !important;
    }

    .font-md-50 {
        font-size: 50px !important;
    }
}

@media (min-width: 992px) {
    .font-lg-11 {
        font-size: 11px !important;
    }

    .font-lg-12 {
        font-size: 12px !important;
    }

    .font-lg-13 {
        font-size: 13px !important;
    }

    .font-lg-14 {
        font-size: 14px !important;
    }

    .font-lg-15 {
        font-size: 15px !important;
    }

    .font-lg-16 {
        font-size: 16px !important;
    }

    .font-lg-17 {
        font-size: 17px !important;
    }

    .font-lg-18 {
        font-size: 18px !important;
    }

    .font-lg-19 {
        font-size: 19px !important;
    }

    .font-lg-20 {
        font-size: 20px !important;
    }

    .font-lg-21 {
        font-size: 21px !important;
    }

    .font-lg-22 {
        font-size: 22px !important;
    }

    .font-lg-23 {
        font-size: 23px !important;
    }

    .font-lg-24 {
        font-size: 24px !important;
    }

    .font-lg-25 {
        font-size: 25px !important;
    }

    .font-lg-26 {
        font-size: 26px !important;
    }

    .font-lg-27 {
        font-size: 27px !important;
    }

    .font-lg-28 {
        font-size: 28px !important;
    }

    .font-lg-29 {
        font-size: 29px !important;
    }

    .font-lg-30 {
        font-size: 30px !important;
    }

    .font-lg-31 {
        font-size: 31px !important;
    }

    .font-lg-32 {
        font-size: 32px !important;
    }

    .font-lg-33 {
        font-size: 33px !important;
    }

    .font-lg-34 {
        font-size: 34px !important;
    }

    .font-lg-35 {
        font-size: 35px !important;
    }

    .font-lg-36 {
        font-size: 36px !important;
    }

    .font-lg-37 {
        font-size: 37px !important;
    }

    .font-lg-38 {
        font-size: 38px !important;
    }

    .font-lg-39 {
        font-size: 39px !important;
    }

    .font-lg-40 {
        font-size: 40px !important;
    }

    .font-lg-41 {
        font-size: 41px !important;
    }

    .font-lg-42 {
        font-size: 42px !important;
    }

    .font-lg-43 {
        font-size: 43px !important;
    }

    .font-lg-44 {
        font-size: 44px !important;
    }

    .font-lg-45 {
        font-size: 45px !important;
    }

    .font-lg-46 {
        font-size: 46px !important;
    }

    .font-lg-47 {
        font-size: 47px !important;
    }

    .font-lg-48 {
        font-size: 48px !important;
    }

    .font-lg-49 {
        font-size: 49px !important;
    }

    .font-lg-50 {
        font-size: 50px !important;
    }
}

@media (min-width: 1200px) {
    .font-xl-11 {
        font-size: 11px !important;
    }

    .font-xl-12 {
        font-size: 12px !important;
    }

    .font-xl-13 {
        font-size: 13px !important;
    }

    .font-xl-14 {
        font-size: 14px !important;
    }

    .font-xl-15 {
        font-size: 15px !important;
    }

    .font-xl-16 {
        font-size: 16px !important;
    }

    .font-xl-17 {
        font-size: 17px !important;
    }

    .font-xl-18 {
        font-size: 18px !important;
    }

    .font-xl-19 {
        font-size: 19px !important;
    }

    .font-xl-20 {
        font-size: 20px !important;
    }

    .font-xl-21 {
        font-size: 21px !important;
    }

    .font-xl-22 {
        font-size: 22px !important;
    }

    .font-xl-23 {
        font-size: 23px !important;
    }

    .font-xl-24 {
        font-size: 24px !important;
    }

    .font-xl-25 {
        font-size: 25px !important;
    }

    .font-xl-26 {
        font-size: 26px !important;
    }

    .font-xl-27 {
        font-size: 27px !important;
    }

    .font-xl-28 {
        font-size: 28px !important;
    }

    .font-xl-29 {
        font-size: 29px !important;
    }

    .font-xl-30 {
        font-size: 30px !important;
    }

    .font-xl-31 {
        font-size: 31px !important;
    }

    .font-xl-32 {
        font-size: 32px !important;
    }

    .font-xl-33 {
        font-size: 33px !important;
    }

    .font-xl-34 {
        font-size: 34px !important;
    }

    .font-xl-35 {
        font-size: 35px !important;
    }

    .font-xl-36 {
        font-size: 36px !important;
    }

    .font-xl-37 {
        font-size: 37px !important;
    }

    .font-xl-38 {
        font-size: 38px !important;
    }

    .font-xl-39 {
        font-size: 39px !important;
    }

    .font-xl-40 {
        font-size: 40px !important;
    }

    .font-xl-41 {
        font-size: 41px !important;
    }

    .font-xl-42 {
        font-size: 42px !important;
    }

    .font-xl-43 {
        font-size: 43px !important;
    }

    .font-xl-44 {
        font-size: 44px !important;
    }

    .font-xl-45 {
        font-size: 45px !important;
    }

    .font-xl-46 {
        font-size: 46px !important;
    }

    .font-xl-47 {
        font-size: 47px !important;
    }

    .font-xl-48 {
        font-size: 48px !important;
    }

    .font-xl-49 {
        font-size: 49px !important;
    }

    .font-xl-50 {
        font-size: 50px !important;
    }
}

/*Font Weight*/
.font-weight-400 {
    font-weight: 400 !important;
}

.font-weight-500 {
    font-weight: 500 !important;
}

.font-weight-600 {
    font-weight: 600 !important;
}

.font-weight-700 {
    font-weight: 700 !important;
}

.cards {
    border: none !important;
}

    .cards tbody tr {
        float: left;
        width: 20rem;
        margin: 0.5rem;
        border: 0.0625rem solid rgba(0,0,0,.125);
        border-radius: .25rem;
        box-shadow: 0.25rem 0.25rem 0.5rem rgba(0,0,0,0.25);
    }

    .cards tbody td {
        display: block;
    }

    .cards td:before {
        content: attr(data-label);
        display: inline;
        position: relative;
        font-size: 85%;
        top: -0.5rem;
        float: left;
        color: #808080;
        min-width: 4rem;
        margin-left: 0;
        margin-right: 1rem;
        text-align: left;
    }

tr.selected td:before {
    color: #404040;
}

.table .fa {
    font-size: 2.5rem;
    text-align: center;
}

.cards .fa {
    font-size: 7.5rem;
    color: darkgray;
}

.cards tbody td {
    border-top: none !important;
    padding: 8px 10px !important;
}

    .cards tbody td h3 {
        padding-top: 10px;
    }

.cards tbody tr > td.dataTables_empty {
    width: 100% !important;
}

.az-content-body-profile {
    flex: 1;
}

.h-45-px {
    height: 45px !important;
}


.avatar {
    font-size: 1rem;
    position: relative;
    display: inline-block;
    width: 3.875rem;
    height: 3.875rem;
}

    .avatar.avatar-sm {
        font-size: .9rem;
        width: 2.625rem;
        height: 2.625rem;
    }

    .avatar .avatar-img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

.user-activity .media {
    position: relative;
    padding-bottom: 20px;
    margin-left: 20px;
}

    .user-activity .media:after {
        content: "";
        position: absolute;
        width: 1px;
        height: calc(100% - 77px);
        background: #eaecec;
        top: 60px;
    }

    .user-activity .media .media-img-wrap {
        position: absolute;
        left: -20px;
    }

    .user-activity .media .media-body {
        border-bottom: 1px solid #eaecec;
        padding-bottom: 30px;
        margin-left: 40px;
        min-width: 0;
    }

.user-information div {
    position: relative;
    width: 100%;
    height: 30px;
}

    .user-information div:after {
        content: "";
        position: absolute;
        width: 1px;
        background: lightgray;
        top: 19px;
        left: 13px;
        height: 20px;
    }

.user-information p {
    position: absolute;
}

.form-group-right {
    float: right;
    width: 45%;
}

.form-group-left {
    float: left;
    width: 45%;
}

.form-group-right-details {
    float: right;
    width: 45%;
}

@media (max-width: 576px) {
    .form-group-right-details {
        float: none;
        width: 100%;
    }
}

.form-group-left-details {
    float: left;
    width: 45%
}

@media (max-width: 576px) {
    .form-group-left-details {
        float: none;
        width: 100%;
    }
}

.control-label {
    font-weight: bold;
}
/*navbar*/
.az-content-breadcrumb {
    padding-top: 40px;
}
/*checkbox*/
.form-check-input {
    margin-left: 4.5rem !important;
    margin-top: 0.1rem
}

.form-check-client-input {
    margin-left: 5px !important;
    margin-top: 0.1rem
}

.status-details {
    margin-bottom: 0 !important;
    margin-top: 3px;
}

.az-content-left-profile {
    width: 140px !important;
}

.select-list {
    height: 38px !important;
}

.modal-project{
    max-width: 700px;
}

/*tracking*/
@media (min-width: 992px){
    .modal-tracking {
        max-width: 950px !important;
    }
    .tracking-hours {
        max-width: 21% !important;
    }    
}


.notes-tracking {
    height: 280px !important;
}

.col-tracking {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.details-options {
    background-color: white !important;
}

.date-options {
    background-color: white !important;
}

.table thead th, .table thead td {
    padding-top: 9px !important;
    padding-right: 15px !important;
    padding-bottom: 5px !important;
    padding-left: 15px !important;
}

.btn-export {
    background-color: #f8f9fa !important;
    color: black !important;
    display: initial !important;
}

.fromstartdate {
    background-color: #007bff;
    color: white;
}

.body-message {
    height: 200px !important;
}

/*bulletins*/
.message-unread {
    background: rgba(255,255,255,0.902) !important;
}

.message-read {
    background: rgba(242,245,250,0.8) !important;
}

.message-readed {
    background-color: lightsteelblue !important;
}
/*bulletins images*/

.img-bulletin {
    max-width: 20% !important;
    max-height: 20% !important;
}

.box {
    width: 200px;
    height: 130px;
    background: #CCC;
    overflow: hidden;
}

    .box img {
        width: 100%;
        height: auto;
    }

@supports(object-fit: cover) {
    .box img {
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }
}

/*scrollbar report*/
.custom-scrollbar {
    position: relative;
    max-height: 600px;
    overflow: auto
}

.table-wrapper-scroll {
    display: block;
}


.center-content {
    display: block !important;
    max-width: 1200px;
}

.items-center {
    padding-left: 15%;
}
/*reports*/
.btn-to-export {
    background-color: white;
    padding-left: 5px;
    padding-right: 5px;
}

.items-employees-report {
    background-color: white !important;
}

.containerProfile {
    padding-left: 20%;
}

@media (max-width: 576px) {
    .containerProfile {
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media (min-width: 768px) {
    .containerProfile {
        padding-left: 10%;
        padding-right: 0px;
    }
}

@media (min-width: 1110px) {
    .containerProfile {
        padding-left: 10%;
        padding-right: 0px;
    }
}

/*weekly report*/
.week-ending {
    background-color: #e9ecef !important;
}

.bar-report {
    display: none;
}

.sub-menu {
    margin-left: 20px;
}

.week-sub-row {
    padding-left: 4em !important;
}

.employee-weekly-report {
    background-color: #e9ecef !important;
}

.project-weekly-report {
    background-color: white;
}
/*button employee details*/
/*.detailsbuttn {
    float: right;
}

@media (max-width: 576px) {
    .detailsbuttn {
        margin-left: 5px;
        /*float: right;
    }
}*/

.btn-default-container {
    width: 60%;
}

.btn-reset-container {
    width: 40%;
}


@media (max-width: 710px) {
    .btn-default-container, .btn-reset-container {
        width: 100%;
        padding-top: 5px;
    }
}

@media (max-width: 970px) {
    .btn-default-container, .btn-reset-container {
        padding-top: 5px;
    }
}

.btn-reset {
    width: 95%;
}

.detailsbuttn {
    width: 95%;
}
/*btn reset password*/
/*.btn-reset {
    margin-right: 10px;
    margin-left: 150px;
}@media (max-width: 576px) {
    .btn-reset {
        margin-left: 0px;
        margin-right: 10px;
    }
}
@media (max-width: 1680px) {
    .btn-reset {
        margin-left: 0px;
        margin-right: 0px;
        float: none;
    }
}
@media (max-width: 1500px) {
    .btn-reset {
        margin-left: 100px;
        float: right;
    }
}
@media (max-width: 1250px) {
    .btn-reset {
        margin-left:0px;
        margin-right: 10px;
        float: right;
    }
}
@media (max-width: 1200px) {
    .btn-reset {
        margin-left: 0px;
        margin-right: 0px;
        float: none;
    }
}*/

/*Icons employees-details*/
.iconMargin {
    margin-right: 5px;
}

/*Header*/
.navlink-Menu {
    margin-left: 5px;
}

.nav-linkHeader {
    font-weight: bold;
}

/*Vacation table of Years in service in the profile*/
.titleVacation {
    background-color: #ced4da;
    text-align: center !important;
    font-weight: bold;
    font-size: medium !important;
}

.profileVacation {
    text-align: center;
}
/*thead table items by employees*/
.thead-itemsEmployees {
    color: #fff;
    background-color: #212229;
    border-color: #32343e;
}

.btn-export-excel {
    color: black !important;
    display: initial !important;
}

.iconExcel {
    color: green !important;
}

/*forms*/
.field-vacationYear {
    width: 41%;
    align-content: center;
}

.span-vacationYear {
    width: 100%;
    align-content: center;
}


.field-employee {
    width: 43%;
}
@media (max-width: 1010px) {
    .field-employee {
        width: 51%;
    }
}

.span-employee {
    width: 100%;
}

.modal-client {
    max-width: 1050px !important;
}

.field-client {
    width: 35%;
}

@media (max-width: 415px) {
    .field-client {
        width: 45%;
    }
}

.field-profile-client {
    width: 35%;
}

@media (max-width: 415px) {
    .field-profile-client {
        width: 50%;
    }
}


.span-client {
    width: 100%;
}

.field-project {
    width: 30%;
}
.field-project-assign {
    width: 25%;
}

@media (max-width: 415px) {
    .field-project{
        width: 45% !important;
    }
}
@media (max-width: 415px) {
    .field-project-assign {
        width: 40% !important;
    }
}
@media (max-width: 768px) {
    .field-project-assign {
        width: 35% !important;
    }
}
@media (max-width: 1024px) {
    .field-project-assign {
        width: 30%;
    }
}

.field-details-project {
    width: 30%;
}

@media (max-width: 415px) {
    .field-details-project {
        width: 50%;
    }
}

.span-project {
    width: 100%;
}

.field-pettycash-type {
    width: 25%;
}

@media (max-width: 415px) {
    .field-pettycash-type {
        width: 45%;
    }
}

.span-pettycash-type {
    width: 100%;
}

.field-pettycash {
    width: 28%;
}

@media (max-width: 415px) {
    .field-pettycash {
        width: 45%;
    }
}

.span-pettycash {
    width: 100%;
}

.field-items-employee {
    width: 24%;
}

.span-items-employee {
    width: 100%;
}

.field-inventory {
    width: 30%;
}

.span-inventory {
    width: 100%;
}

.field-profile {
    width: 25%;
}

@media (max-width: 910px) {
    .field-profile {
        width: 42%;
    }
}

@media (max-width: 415px) {
    .field-profile {
        width: 50%;
    }
}

.span-profile {
    width: 100%;
}

.field-attendance {
    width: 25%;
}

@media (max-width: 910px) {
    .field-attendance {
        width: 40%;
    }
}

@media (max-width: 415px) {
    .field-attendance {
        width: 45%;
    }
}

.span-attendance {
    width: 100%;
}

.field-checkbox {
    width: 65px;
}

.line-breaks {
    white-space: pre-line;
}

.div-employeeInactive {
    display: none;
}

.request-access {
    padding-top: 100px;
}