[v-cloak] > * {
    display: none
}

[v-cloak]::before {
    content: "Loading Data...";
    display: block;
    text-align: center;
}

.body {
    font-family: 'PT Sans', sans-serif;
    font-size: 14px;
}

h1, h2, h3, h4, h5, h6, a, span, label, div {
    /*font-family: 'PT Sans', sans-serif;*/
}

#app {
    width: 100% !important;
}

.bg-primary {
    background: #1e77d5 !important;
}

.bg-secondary {
    background: #25a540 !important;
}

.at-login .q-card {
    border-radius: 8px !important;
}

.at-login .q-field--square .q-field__control {
    border-radius: 4px !important;
}

.q-drawer__content {
    background: linear-gradient(-45deg, #121212, #1e77d5);
    box-shadow: 0 0 25px rgba(0, 0, 0, .15);
}

.q-drawer__content .q-list .q-item {
    padding: 10px 15px;
}

.at-drawer .q-item__section--side, .at-drawer .q-item__section--main, .at-drawer .q-item__section--side > .q-icon {
    color: #fff !important;
}

.dashboard-card {
    padding-top: 15px;
}

.dashboard-card .q-item {
    position: relative;
}

.c-pos {
    position: absolute;
    left: 10px;
    top: -10px;
    border-radius: 4px;
    padding: 10px;
}

.dashboard-card .q-item .total-employee {
    background: #43a3b2;
}

.dashboard-card .q-item .present-total {
    background: #60bf64;
}

.dashboard-card .q-item .total-absent {
    background: #e23744;
}

.dashboard-card .q-item .on-leave {
    background: #f3c345;
}

.dashboard-card .q-item .late-in {
    background: #f1872d;
}

.dashboard-card .q-item .on-travel {
    background: #38a9cc;
}

.dashboard-card .q-item .total-dealer {
    background: #60bf64;
}

.dashboard-card .q-item .total-office {
    background: #f1872d;
}

.dashboard-card .q-item .approved-client {
    background: #38a9cc;
}

.dashboard-card .q-item .pending-client {
    background: #f3c345;
}

.pending-client, .pending-office {
    background: #f3c345;
}

.office-no {
    background: #60bf64;
}

.approved-office, .approved-client {
    background: #38a9cc;
}

.dashboard-table .q-card {
    margin: 10px 0;
}

.tb-title {
    background: #bbdefb;
    color: #000;
    display: inline-block;
    position: relative;
    top: -30px;
    left: 0px;
    padding: 10px 15px;
    margin-bottom: -10px;
}

.q-layout {
    background: #dce8f5 !important;
    padding: 20px;
}

.q-table td, .q-table th {
    padding: 2px 15px;
    background-color: inherit;
}

.q-table tbody td, .q-table thead tr {
    height: 38px;
}

.q-field--square .q-field__control {
    border-radius: 4px !important;
}

.q-field--auto-height .q-field__control {
    height: 40px;
}
.q-table tbody td {
    font-size: 12px;
}

#app .q-table .bg-info, #app .q-table .bg-primary, #app .q-table .bg-negative, #app .q-table .bg-dark {
    font-size: 9px !important;
}

.q-toggle__inner {
    font-size: 30px;
}

.q-btn-dropdown--simple * + .q-btn-dropdown__arrow {
    margin-left: 0px;
}

.at-avtar {
    margin-right: 10px;
    margin-left: 15px;
}

.at-avtar .q-btn__wrapper {
    padding: 3px 8px !important;
}

.language {
    padding: 4px 15px;
    border-radius: 4px;
    border-color: #cacaca;
}

.activity {
    position: relative;
    width: 100%;
    min-height: 711px !important;
}

.activity .q-field--filled .q-field__control {
    padding: 0 5px !important;
    height: 35px !important;
    font-size: 12px;
}

.activityBranch {
    position: relative;
    width: 100%;
    min-height: 610px !important;
}

.activityBranch .q-field--filled .q-field__control {
    padding: 0 5px !important;
    height: 35px !important;
    font-size: 12px;
}

.show-btn .q-btn {
    font-size: 10.5px;
    font-weight: 500;
    padding: 4px 0px;
    margin-left: 10px;
}

.at-logo img {
    width: 250px;
    height: auto;
}

.secondary-nav {
    padding: 20px;
}

.secondary-nav span {
    transition: .5s all;
}

.secondary-nav span:hover {
    color: #1e77d5;
    transition: .5s all;
    cursor: pointer;
}

.notify .q-item {
    padding: 10px 15px;
}

@media(min-width:1024px) and (max-width:1280px) {
    .dashboard-card .col-md-2 {
        width: 180px;
        margin-bottom: 10px;
    }
}

.sticky-th thead {
    position: sticky;
    top: 0;
    left: 0;
    background: white;
    z-index: 1;
    width: 100%;
}

.user-dashboard .q-table--dense .q-table tbody td, .q-table--dense .q-table tbody tr, .q-table--dense .q-table thead tr {
    height: 36px;
}

.user-dashboard .q-table--bordered {
    border: none !important;
}

.user-dashboard .ttl {
    background: #bbdefb;
    color: #000;
    display: inline-block;
    position: relative;
    top: -15px;
    left: 15px;
    padding: 10px 15px;
    margin-bottom: -10px;
}

.q-icon {
    height: auto;
}

.mdi-clock-outline, label i {
    font-size: 20px !important;
}

.q-drawer__content {
    background: #234e70;
    box-shadow: 0 0 25px rgba(0, 0, 0, .15);
}

.at-drawer .q-item__section--side, .at-drawer .q-item__section--main, .at-drawer .q-item__section--side > .q-icon {
    color: #fff !important;
}

.at-drawer .q-item__section--side {
    font-size: 14px;
}

/*new changes css */

.at-logo img {
    width: 200px;
}

.at-logo {
    text-align: center;
}

.q-drawer__content .q-item__section--avatar {
    min-width: 40px;
}

.q-item__section--side > .q-icon {
    font-size: 20px;
}

.q-drawer__content .q-list .q-item {
    margin: 0px 15px;
}

.list-s-menu-q {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .3px;
}

.active-d-q {
    background-color: #607d8b;
    border-radius: 5px;
}

.q-layout {
    background: #ffffff !important;
    padding: 20px;
}

.top-nav-q {
    border-bottom: 1px solid rgba(0,0,0,0.12);
    box-shadow: 0 0 25px rgba(0, 0, 0, .15);
}



.c-pos {
    position: relative;
    left: 0;
    top: 0px;
    border-radius: 4px;
}

.dashboard-card .q-item {
    box-shadow: 0 0 25px rgba(0, 0, 0, .15);
    border-radius: 4px;
}

.dashboard-card {
    padding-top: 0px;
}

.tb-title {
    background: #bbdefb00;
    color: #000;
    display: block;
    position: relative;
    top: 0px;
    left: 0px;
    padding: 15px 24px;
    margin-bottom: 0px;
    border-bottom: 1px solid #ccc;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 13px;
}

.dashboard-card .q-card__section--vert {
    padding: 16px;
    padding: 0px;
}

.q-card__section--vert tr th:first-child {
    padding-inline-start: 24px;
}

.q-card__section--vert tr th:last-child {
    padding-inline-end: 24px;
}

.q-card__section--vert tr td:first-child {
    padding-inline-start: 24px;
}

.q-card__section--vert tr td:last-child {
    padding-inline-end: 24px;
}

.dashboard-card .q-item .total-employee {
    border-radius: 50%;
}

.dashboard-card .q-item .present-total {
    border-radius: 50%;
}

.dashboard-card .q-item .total-absent {
    border-radius: 50%;
}

.dashboard-card .q-item .on-leave {
    border-radius: 50%;
}

.dashboard-card .q-item .on-travel {
    border-radius: 50%;
}

.dashboard-card .q-item .late-in {
    border-radius: 50%;
}

.q-page-title-b {
    font-size: 14px;
}

.q-field--dense .q-field__label {
    font-size: 13px;
}

.q-underline-c {
    border-bottom: 1px solid #ccc;
}

.q-mr-lg {
    display: inline-block
}

.q-btn--round {
    border-radius: 50%;
}

.q-btn--round .q-btn__wrapper {
    min-width: 2.5em;
    min-height: 2.5em;
}

.size-icon-q {
    font-size: 9px !important;
}

.q-bg-filter {
    background: #ffffff;
    padding: 20px;
}

.q-field__control.relative-position.row.no-wrap {
    background: white;
}

.title-q-s {
    padding: 0 0px;
    min-height: 30px;
    margin-bottom: 20px;
}

thead {
    background: #edeff6;
    color: #000;
    line-height: 40px;
}
.info-color {
    color: #31ccec;
}
.primary-color {
    color: #1976d2;
}
.danger-color {
    color: #c10015;
}
.lang-d-flex{
    display:flex;
    align-items:center;
}
.primary-bg-q {
    background: #607D8B;
    color: #fff;
}
.border-radius-all{
    border-radius:4px;
}
.q-tab__label {
    font-weight: 400;
}
.q-table th.thead-fs {
    font-weight: 500;
    font-size: 13px;
    color: #2e2e2e;
}
.filter-card-q {
    height: 667px;
}
/*login page css */
.at-bg .login img {
    height: 100vh;
    width: 100%;
    object-fit: cover;
}

.q-login-section {
    width: 70%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.login-header {
    margin-bottom: 35px;
}

.q-login-section p {
    font-size: 16px;
    color: #707070;

}

.q-login-section .q-field__control {
    height: 50px;
}

.login-btn-text {
    font-size: 17px;
    background: #234e70 !important;
}

.login-title {
    color: #2196F3;
    font-size: 30px;
}

.forgot-password {
    color: #2196F3;
    font-size: 16px;
}
.q-table-profile tbody tr td {
    padding: 2px 0px !important;
}
.q-n-s{
    font-size:16px;
}
/*// new changes setting pages*/
.q-field--outlined .q-field__control:hover:before {
    border-color: #868686;
}
.q-field__control {
    color: #3a4b53;
}
.a-card-d-none{
    padding:0px;
}

.border-all {
    border: 1px solid rgb(237 239 246) !important;
}
.border-bottom {
    border-bottom: 1px solid rgba(0,0,0,0.12) !important;
}
.q-table td, .q-table th, .q-table thead, .q-table tr {
    border-color: rgb(237 239 246);
}
.q-table__bottom {
    border-top: 1px solid rgb(237 239 246);
}
@media (max-width: 1440px) {
    .filter-card-q {
        height: auto;
    }
}
@media (max-width: 1198.98px) {
    .filter-card-q {
        height: auto;
    }
}
@media (max-width: 991.98px) {
    .filter-card-q {
        height: auto;
    }
}

@media (max-width: 599.99px) {
    .at-bg .login img {
        height: 50vh;
    }
    .q-login-section {
        width: 98%;
        position: absolute;
        top: 50%;
        left: 50%;
        background: white;
        transform: translate(-50%, -50%);
        padding: 30px;
        box-shadow: 0.3em 0.3em 1em rgba(200, 0, 0, 0.6);
    }
    .filter-card-q {
        height: auto;
        padding-bottom:20px;
    }
}