/* 
    Created on : Mar 3, 2019, 11:35:34 PM
    Author     : luu
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

:root {
    --bien-dam: #000df7;
    --bien-nhạt: #c6d9fa;
    --do-dam: #da1f24;
    --do-nhat: #f9e7e7;
    --den: #000;
    --ghi-xam: #efefef;
    --ghi-xam-vien: #c0c0c0;
    --ghi-dam: #676e75;
    --vang: #feff91;
    --la-nhat: #e4f7fd;
}

body {
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    background-color: var(--ghi-xam);
}

.header-1 {
    background: #000df7;
}

@media (min-width: 992px) {
    .header-1 .navbar-brand {
        border-right: 1px solid #fff;
        padding-right: 15px;
        font-weight: bold;
    }
}

.header-1 .nav-link {
    padding: .7rem 0;
    color: #fff;
}

.nav-item {
    padding: 0px;
}

.nav .nav-link.active {
    border-bottom: 2px solid #fff;
    font-weight: bold;
}

.icon-th-solid {
    width: 20px;
    margin-right: 15px;
    filter: invert(100%);
}

.header-2 {
    border-bottom: 1px solid #eee;
}

.header-2 .nav-link {
    color: #333;
    padding: .7rem 0;
    margin: 0 1rem;
}

.header-2 .nav-link.active {
    border-bottom: 2px solid #3e5997;
    font-weight: bold;
}

.header-2 .nav-link.disabled {
    color: #6c757d;
}

.vb-page-content {
    padding: 15px 0;
}

[v-cloak] {
    display: none;
}

.vb-loading {
    position: fixed;
    top: 20px;
    text-align: center;
    margin: 5% auto;
    width: 100px;
    display: block;
    left: 0;
    right: 0;
    z-index: 1051;
}

.vb-loading>span {
    background: #fff04b;
    color: #333;
    padding: 4px 15px 4px 10px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 95%;
    box-shadow: 1px 1px 5px #333;
}

.vb-loading>span:after {
    content: ' . ';
    animation: dots 1s steps(5, end) infinite;
}

@keyframes dots {

    0%,
    20% {
        color: rgba(0, 0, 0, 0);
        text-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0);
    }

    40% {
        color: black;
        text-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0);
    }

    60% {
        text-shadow: .25em 0 0 black, .5em 0 0 rgba(0, 0, 0, 0);
    }

    80%,
    100% {
        text-shadow: .25em 0 0 black, .5em 0 0 black;
    }
}

.static-button {
    position: fixed;
    width: 60px;
    line-height: 60px;
    height: 60px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
    font-size: 2.5em;
    box-shadow: 0px 0px 10px 1px #aaa;
    font-weight: 100;
    padding: 0;
}

.static-button:hover {
    box-shadow: 0px 0px 5px 2px #666;
    text-decoration: none;
}

.sb-bottom-right {
    bottom: 30px;
    right: 30px;
}

.sb-primary,
.sb-primary:hover,
.sb-primary:active {
    background: var(--bien-dam);
    color: white !important;
}

.show-grooming-item[data-id],
.show-hotel-item[data-id],
.show-motel-item[data-id] {
    color: var(--bien-dam);
    cursor: pointer;
}

.show-grooming-item[data-id]:hover,
.show-hotel-item[data-id]:hover,
.show-motel-item[data-id]:hover {
    color: #0056b3;
    text-decoration: underline;
}

.my-form fieldset {
    padding: 10px 15px 0px 15px;
}

.my-form fieldset+fieldset {
    border-top: 1px solid #ccc;
}

.my-counter-group {
    position: relative;
}

.my-counter-group .form-control {
    padding-right: 40px;
}

.my-counter-text {
    position: absolute;
    top: 7px;
    right: 10px;
    color: #999;
    font-size: .8em;
    min-width: 20px;
    text-align: right;
}

.is-valid+.my-counter-text {
    display: none;
}

.my-form label {
    margin-bottom: 0;
}

.custom-checkbox label {
    padding-top: 3px;
}

.faq-pin,
.faq-content,
.faq-list {
    font-size: 14px;
}

.faq-pin-item {
    padding: 5px;
    display: block;
}

.faq-pin-item:hover {
    background: #f5f5f5;
    cursor: pointer;
}

.faq-list {
    border-top: 2px solid #eee;
}

.faq-content img {
    max-width: 100%;
}

.bg-primary>option:disabled {
    color: #bbb;
}

.grooming-tooltip-inner {
    max-width: 350px;
    text-align: left;
}

.hotel-tooltip-inner {
    text-align: left;
}

.text-uppercase::placeholder {
    text-transform: none !important;
}

.sidebar .sidebar-heading {
    border-left: 3px solid #4578e4;
    background: #edf3ff;
    color: #4578e4;
    text-transform: uppercase;
    padding: 15px;
    font-size: 20px;
}

.sidebar .sidebar-heading i {
    margin-right: 10px;
}

.sidebar-body {
    padding: 15px;
}

.sidebar-form-group+.sidebar-form-group {
    margin-top: 15px;
}

.sidebar {
    min-height: 100%;
}

@media (min-width: 768px) {
    .sidebar {
        min-height: 84vh;
    }

    .sidebar .sidebar-heading {
        margin: 0 -15px 0 0;
    }

    .sidebar-body {
        padding-right: 0;
    }
}

.customer-card {
    border-radius: 3px;
    box-sizing: border-box;
    padding: 15px 0;
    margin-right: 5px;
}

.customer-card ul {
    list-style: none;
    padding: 0px;
    margin: 0;
}

.customer-card ul li {
    padding: 0;
    margin: 0;
}

.customer-card ul li+li {
    margin-top: 10px;
}

.customer-item-view,
.customer-item-edit textarea,
.customer-item-queue {
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 1px 1px 3px rgba(9, 45, 66, .25);
    cursor: pointer;
    display: block;
    min-height: 20px;
    position: relative;
    text-decoration: none;
    z-index: 0;
    padding: 5px 10px;
    position: relative;
    font-size: 14px;
}

.customer-item-view,
.customer-item-queue {
    background-color: #fff;
}

.customer-item-view button,
.customer-item-queue button {
    display: none;
    position: absolute;
    right: 5px;
    top: 5px;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.01);
    box-shadow: none;
    border: none;
    outline: none;
}

.customer-item-view:hover,
.customer-item-queue:hover {
    background-color: #f5f5f5;
    cursor: pointer;
}

.customer-item-edit {
    background: #eee;
    display: none;
    padding: 10px;
}

.customer-item-edit textarea {
    border: none;
    display: block;
    width: 100%;
}

.customer-item-editable .customer-item-edit {
    display: block;
    margin: 0;
    background-color: #fff;
}

.customer-item-editable .customer-item-view,
.customer-item-editable .customer-item-add {
    display: none;
}

.customer-item-add+.customer-item-edit {
    margin-bottom: 20px;
}

ul.customer-card-list {
    margin-bottom: 10px;
}

.customer-item-remove {}

.customer-item-edit-switch {}

.customer-item-action {
    padding-top: 10px;
}

.customer-item-queue+.customer-item-queue {
    margin-top: 10px;
}

@media (min-width: 768px) {
    .my-menu {
        max-height: 80vh;
        overflow: auto;
        min-width: 300px;
    }
}

.my-menu .dropdown-header {
    background: #edf3ff;
    color: #4578e4;
    text-transform: uppercase;
}


/*
    SCROLLBAR
*/

.vb-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.vb-scroll::-webkit-scrollbar {
    background: transparent;
    width: 8px;
    position: absolute;
    background-color: #f5f5f5;
    border-radius: 4px;
}

.vb-scroll::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}

/* Custom bootstrap */
.btn-outline-secondary {
    border-color: #ced4da !important;
}

.select-element {
    cursor: pointer;
}

@media (min-width: 1430px) {
    .nav-item {
        padding: 0px 8px !important;
    }
}

.boxCalendar {
    width: 100%;
}

.my-input-group {
    position: relative;
}

.my-input-group .my-input-group-icon {
    position: absolute;
    top: 10px;
    left: 8px;
}

.my-input-group .my-input-group-icon,
.my-input-group .my-input-group-icon image {
    width: 16px;
    height: 16px;
    filter: contrast(0%);
    z-index: 3;

}

.my-input-group input:not(.text-center),
.my-input-group select:not(.text-center),
.my-input-group textarea:not(.text-center) {
    padding-left: 32px;
}

.my-fake-input {
    position: relative;
    height: 38px;
}

.my-fake-input.disabled .placeholder {
    background-color: #e9ecef;
}

.my-fake-input input,
.my-fake-input input:disabled,
.my-fake-input input:focus {
    position: absolute;
    left: 0;
    z-index: 2;
    background-color: transparent;
    color: transparent;
}

.my-fake-input .placeholder {
    position: absolute;
    left: 0;
    z-index: 1;
    padding-left: 32px;
}

.my-input-group-lg .my-input-group-icon,
.my-input-group-lg .my-input-group-icon image {
    width: 24px;
    height: 24px;
}

.my-input-group-sm .my-input-group-icon {
    top: 8px;
}

.custom-select {
    background-image: url('../svg/select-caret.svg');
    background-size: 16px;
}

.custom-select.bg-dark {
    background-image: url('../svg/select-caret-white.svg');
}

.bg-bien-dam {
    background-color: var(--bien-dam) !important;
}

.text-bien-dam {
    color: var(--bien-dam) !important;
}

.bg-bien-nhat {
    background-color: var(--bien-nhạt) !important;
}

.text-bien-nhat {
    color: var(--bien-nhạt) !important;
}

.bg-do-dam {
    background-color: var(--do-dam) !important;
}

.text-do-dam {
    color: var(--do-dam) !important;
}

.bg-ghi-xam {
    background-color: var(--ghi-xam) !important;
}

.text-ghi-xam {
    color: var(--ghi-xam) !important;
}

.border-ghi-xam {
    border-color: var(--ghi-xam) !important;
}

.bg-ghi-dam {
    background-color: var(--ghi-dam) !important;
}

.text-ghi-dam {
    color: var(--ghi-dam) !important;
}

.bg-vang {
    background-color: var(--vang) !important;
}

.text-vang {
    color: var(--vang) !important;
}

.bg-la-nhat {
    background-color: var(--la-nhat) !important;
}

.text-la-nhat {
    color: var(--la-nhat) !important;
}


.bg-hong,
.bg-pink {
    background-color: #f9e7e7 !important;
}

.hotel-pet-item {
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}


.form-input-bold input,
.form-input-bold textarea,
.form-input-bold select {
    font-weight: bold;
}

.form-input-bold input::placeholder {
    font-weight: normal;
}


.btn-group.rounded-pill>.btn:first-child {
    border-top-left-radius: 50rem !important;
    border-bottom-left-radius: 50rem !important;
}

.btn-group.rounded-pill>.btn:last-child {
    border-top-right-radius: 50rem !important;
    border-bottom-right-radius: 50rem !important;
}

.btn-default {
    border-color: #ced4da !important;
    color: #495057;
}


.btn-default:hover {
    background: #eee;
}

.btn-primary {
    background: var(--bien-dam) !important;
}

/* Đã về: Xanh lam */
.grooming-status-2,
.shuttle-service-1-status-2,
.shuttle-service-2-status-2 {
    background: var(--bien-dam) !important;
    border: none !important;
    color: white !important;
}

/* Giảm giá + đã về */
.grooming-status-2.grooming-coupon {
    background: #68bd44 !important;
    border: 1px solid #68bd44 !important;
}

/* Đã đến */
.grooming-status-1,
.shuttle-service-1-status-1,
.shuttle-service-2-status-1 {
    background: var(--do-dam) !important;
    border: none !important;
    color: white !important;
}

/* Chưa đến */
.grooming-status-0,
.shuttle-service-1-status-0,
.shuttle-service-2-status-0,
.grooming-status-3,
.shuttle-service-1-status-3,
.shuttle-service-2-status-3 {
    background: var(--ghi-xam) !important;
    border: 1px solid var(--den) !important;
    color: var(--den) !important;
}

/* Hủy */
.grooming-status--1,
.shuttle-service-1-status--1,
.shuttle-service-2-status--1 {
    background: var(--ghi-xam) !important;
    border: none !important;
    color: #ccc !important;
}

/* Đã xong & đang đi trả */
.grooming-status-13,
.shuttle-service-1-status-13,
.grooming-status-4,
.shuttle-service-1-status-4,
.shuttle-service-2-status-4 {
    background: var(--vang) !important;
    border: 1px solid var(--den) !important;
    color: var(--den) !important;
}

ul.my-menu-list {
    list-style-type: none;
    /* Loại bỏ marker mặc định */
}

ul.my-menu-list li,
ul.my-menu-list li a {
    color: var(--den);
}

ul.my-menu-list li a:hover {
    font-weight: bold;
    text-decoration: none;
}

ul.my-menu-list li:has(> a.active),
ul.my-menu-list li a.active {
    font-weight: bold;
    color: var(--bien-dam);
}

ul.my-menu-list li::before {
    content: "— ";
    /* Sử dụng dấu gạch ngang dài (em dash) */
}

ul.my-menu-list ul {
    list-style-type: none;
    /* Loại bỏ marker mặc định cho các mục con */
}

ul.my-menu-list ul li::before {
    content: "+ ";
    /* Sử dụng dấu cộng cho các mục con */
}

.text-black {
    color: #000000;
}

.col-md-1_5 {
    width: 12.5%;
}

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

.left-side {
    flex: 0 0 200px;
    max-width: 200px;
}

.form-control:focus,
.custom-control-input:focus,
.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
    box-shadow: 0px 0px 3px 3px #cbddfe;
    border: 1px solid #000df7;
}

.custom-control-input:checked~.custom-control-label::before {
    border-color: #000df7;
    background-color: #000df7;
}

.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: #000df7;
    background-image: url('../svg/valid.svg');
}


.bootstrap-datetimepicker-widget table td {
    line-height: 25px !important;
}


.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    border-radius: 50%;
    background-color: var(--bien-dam) !important;
    font-weight: bold;
}


.bootstrap-datetimepicker-widget table td.today {
    font-weight: bold;
}

select>option {
    background-color: white;
}

select option:checked {
    background-color: #d1e7fd; /* Màu nền của option được chọn */
}

textarea.auto-resize {
    overflow: hidden;
    resize: none;
}

.glyphicon-chevron-up:before,
.glyphicon-chevron-down:before,
.glyphicon-chevron-left:before,
.glyphicon-chevron-right:before,
.fa-chevron-left:before,
.fa-chevron-right:before
{
    color: transparent;
    background-size: 16px 16px;
    background-position:center;
}
.glyphicon-chevron-up:before{
    background-image: url(../svg/chevron-up.svg);
}
.glyphicon-chevron-down:before{
    background-image: url(../svg/chevron-down.svg);
}
.glyphicon-chevron-left:before,
.fa-chevron-left:before
{
    background-image: url(../svg/chevron-left.svg);
}
.glyphicon-chevron-right:before,
.fa-chevron-right:before
{
    background-image: url(../svg/chevron-right.svg);
}