@font-face {
    font-family: "OpenSans";
    src: url(../fonts/OpenSans-Regular.ttf);
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "OpenSansLight";
    src: url(../fonts/OpenSans-Light.ttf);
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "OpenSansMedium";
    src: url(../fonts/OpenSans-Medium.ttf);
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "MaterialSymbolsOutlined";
    src: url(../fonts/MaterialSymbolsOutlined.ttf);
    font-weight: 400;
    font-style: normal
}


:root {
    --rz-primary: #be35bf;
    --rz-on-primary-lighter: #be35bf;
    --rz-text-color: #3c3c3c;
    --rz-tabs-tab-color: #3c3c3c;
    --rz-panel-menu-icon-color: #3c3c3c;
    --bs-emphasis-color-rgb: 0,0,0;
    --bs-emphasis-color: #404040;
    --bs-body-color: #212529;
    --bs-body-color-rgb: 33,37,41;
    --bs-body-bg: #fff;
    --bs-body-bg-rgb: 255,255,255;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    --bs-border-radius-pill: 50rem;
    --rz-sidebar-width: 250px;
    --bs-table-color: #404040;
    --rz-dialog-title-color: #404040;
    --bs-font-monospace: 'Courier New', Courier, monospace;
    --rz-tabs-tab-font-weight: 400;
    --rz-grid-header-title-padding-inline: 1rem 1rem;
}
* {
    font-family: 'OpenSans', sans-serif;
    font-size: 14px;
    --rz-icon-font-family: 'MaterialSymbolsOutlined';
}
body {
background: url('/images/bg3.jpg') !important;
background-size: cover !important;
background-attachment: fixed !important;
}
i {
    font-family: 'MaterialFont';
}
a {
    text-decoration: none;
    color: var(--rz-primary);
}
p{
    margin: 5px 0px;
}
.noletterspacing {
    letter-spacing: 0 !important;
}

.row {
    margin-left: 0;
    margin-right: 0;
}

code {
    font-family: var(--bs-font-monospace);
    font-size: 1em;
    direction: ltr;
    unicode-bidi: bidi-override;
    font-size: 100%;
    color: #e83e8c;
    word-wrap: break-word;
}

.text-center{
    text-align: center;

}
.text-white {
    color: #ffffff !important;
}
.text-primary {
    color: var(--rz-primary) !important;
}
.text-success {
    color: #34c38f !important;
}

.text-warning {
    color: #e85500 !important;
}

.text-danger {
    color: #e20000 !important;
}

.text-red-purple {
    color: #d70b6f !important;
}

.text-light-gray {
    color: #989898 !important;
}

.text-blue {
    color: #0086e8 !important;
}

.text-teal {
    color: #00a4a4 !important;
}
.bg-success {
    background-color: #34c38f !important;
}
.bg-warning {
    background-color: #f1b44c !important;
}
.bg-light-warning {
    background-color: #f3d4a0 !important;
}
.bg-danger {
    background-color: #e10000 !important;
}
.bg-red-purple {
    background-color: #d70b6f !important;
}
.bg-light-gray {
    background-color: #989898 !important;
}
.bg-blue{
    background-color: #0086e8 !important;
}
.bg-teal {
    background-color: #00a4a4 !important;
}
.bg-purple {
    background-color: #b43fb5 !important;
}
.bg-orange {
    background-color: #b6702c !important;
}
.font-size-100{
    font-size:100% !important;
}
.text-right {
    text-align:right !important;
}

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

.font-site-10 {
    font-size: 10px !important;
}
.font-site-14 {
    font-size: 14px !important;
}
.font-site-16 {
    font-size: 16px !important;
}
.font-bold {
    font-weight: 600 !important;
}
.font-semi-bold {
    font-weight: 400 !important;
}
.font-light {
    font-weight: 200 !important;
}

/*Loading animation*/
/*Loading animation*/
/*Loading animation*/
/*Loading animation*/
/*Loading animation*/
div.loadingAnimation {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    margin: 0 auto;
}

    div.loadingAnimation > div {
        width: 15px;
        height: 15px;
        border-radius: 100%;
        margin: 4px;
        background-image: linear-gradient(145deg, rgba(255,255,255,0.5) 0%, rgba(0,0,0,0) 100%);
        animation: 2s linear 1s infinite bounce;
    }

.laY {
    background-color: #f987fa;
}

.laR {
    background-color: #d172d1;
    animation-delay: 1s;
}

.laB {
    background-color: #a254a3;
    animation-delay: 2s;
}

.laV {
    background-color: #754075;
    animation-delay: 3s;
}


@keyframes bounce {
    0%, 50%, 100% {
        transform: scale(1);
    }

    25% {
        transform: scale(0.6);
    }

    75% {
        transform: scale(1.4);
    }
}


/*Loading animation*/
/*Loading animation*/
/*Loading animation*/
/*Loading animation*/
/*Loading animation*/


.rz-layout {
    background: none;
    background-color: none;
}
.rz-header {
    background: #ffffff50;
    border: none;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12);
    color: #404040;
}
.rz-sidebar-toggle {
    color: #404040;
}
    .rz-sidebar-toggle:hover {
        background: none;
        color: #404040;
    }
.menu-title {
    color: #404040;
    font-weight: 600;
}
.rz-dialog-title, .rz-dialog-side-title {
    font-weight: 600;
    color: var(--rz-dialog-title-color);
}
.rz-panel-menu {
    background-color: none !important;
    background: none !important;
}
.rz-navigation-item-wrapper, .rz-navigation-item-wrapper-active {
    background: none !important;
    color: #404040 !important;
}
.rz-navigation-item-link:hover {
    color: #404040 !important;
    background: #ff90ff6c !important;
}
.rz-navigation-item-link.rz-navigation-item-link-active.active i, .rz-navigation-item-link.rz-navigation-item-link-active.active span {
    color: #be35bf !important;
    font-weight:600;
}
.rz-layout .rz-sidebar {
    background: #ffffff50;
    border: none;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    padding: 10px;
}
.rz-navigation-item-link:not(.rz-state-disabled)::before, .rz-menu-toggle:not(.rz-state-disabled)::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background-position: center;
    transition: none;
    background: none;
    pointer-events: none;
}
.rz-panel-menu .rz-navigation-item-link {
    background: none;
    transition: none;
    background: none;
    padding: 8px 0px;
}

.rz-navigation-item-wrapper, .rz-navigation-item-link, .rz-navigation-item-text {
    transition: none;
    font-weight:300;
}
ul.rz-profile-menu .rz-navigation-item-link:hover{
    background:none !important;
}
ul.rz-profile-menu .rz-navigation-item-icon-children {
    color: #404040 !important;
}

.rz-form-field.rz-state-focused .rz-form-field-content, .rz-numeric:focus-within:not(.rz-state-disabled), .rz-autocomplete:focus-within:not(.rz-state-disabled), .rz-colorpicker:not(:disabled):not(.rz-state-disabled):focus, .rz-lookup-search input:not(:disabled):not(.rz-state-disabled):focus, .rz-numeric:not(:disabled):not(.rz-state-disabled):focus, .rz-datepicker > .rz-inputtext:not(:disabled):not(.rz-state-disabled):focus, .rz-multiselect:not(:disabled):not(.rz-state-disabled):focus, .rz-dropdown:not(:disabled):not(.rz-state-disabled):focus, .mask:not(:disabled):not(.rz-state-disabled):focus, .rz-textarea:not(:disabled):not(.rz-state-disabled):focus, .rz-textbox:not(:disabled):not(.rz-state-disabled):focus {
    border: 1px solid #be35bf !important;
}
.rz-datatable {
    background: none;
}
.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(2n+1) > td {
    background: #ffffff91;
}
.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(2n) > td {
    background: #ffffffd6;
}
.rz-pager-element, .rz-button {
    border-radius: 2rem;
}
.rz-pager-page:hover {
    background: none;
}
.rz-pager-page.rz-state-active {
    background: none;
    font-weight:600;
}
.rz-panel-menu .rz-navigation-item {
  border-block-end: none;
  border-radius: var(--rz-panel-menu-item-border-radius);
  overflow: hidden;
}
.card {
    /*border-radius: 10px;
    border-top: 2px solid #be35bf;*/
    background: #ffffff50;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    position: relative;
    display: flex;
    flex-direction: column;
    word-wrap: break-word;
    margin-bottom: 1.5rem;
}
.card-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: #ffffff99;
}
    .card-header:first-child {
        border-radius: 10px 10px 0 0;
    }

h4.card-header {
    margin:0;
}
.card-body {
    /*padding: .95rem;*/
}
.rz-pager.rz-density-compact .rz-pager-element, .rz-fileupload .rz-button, .rz-button-sm {
    font-weight: 300;
}
.listSitee {
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
    justify-content: flex-start
}
.listSitee .card{
    flex: 0 1 calc(33.33333% - 1rem);
}
.rz-tabview-panel {
    display: flex;
    flex-flow: row wrap;
}
.unit-item {
    flex: 16.66667%;
    max-width: 16.66667%;
    background: none;
    padding: 5px;
}
.unit-item-holder {
    background: #fff;
    text-align: center;
    border-radius: 10px;
    padding: 5px 10px;
    width: 100%;
    height: 100%;
}
.unit-item-holder:hover {
    background: #ff90ff34;
}
.unit-item h5 {
    margin: 0 0 5px 0;
    text-align: center;
    font-size: 16px;
    color: var(--rz-primary);
}
.ready-status{
    padding: 0 3px;
    margin: 0 0 5px 0;
    display:inline-block;
    text-align: center;
    font-size: 12px;
    text-transform:capitalize;
}
    .ready-status.ready {
        color: #36a749 !important;
    }
    .ready-status.not-ready {
        color: #e59400 !important;
    }
    .ready-status.have-guest {
        color: #ff0000 !important;
    }
.guest-name{
    font-size: 14px;
    color: #404040;
    margin: 0 0 4px 0;
    text-align: left;
}
.rent-time, .rent-price, .contract-number {
    font-size: 12px;
    color: #404040;
    margin: 0 0 4px 0;
    text-align: left;
    display: flex;
    align-items: center;
}
    .rent-time i, .rent-price i, .contract-number i {
        margin-right: 5px;
    }
.guest-name{
    text-transform: uppercase;
    text-align:center;
}
.rent-time {
    text-transform: capitalize;
}
.chi-tiet-can-ho .rz-tabview-nav {
    background: rgba(255,255,255) !important;
    flex-flow: row wrap;
}

.block-item{
    border-radius: 15px;
    padding: 1rem;
}
.block-item h4{
    margin:0 0 10px 0;
}
.badge {
    display: inline;
    padding: .25em .6em;
    font-size: 75%;
    font-weight: 500;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    border-radius: 1px;
}
.rz-grid-table thead th .rz-column-title-content {
    font-weight: 600;
    color: var(--rz-fieldset-legend-color);
}
.rz-datatable-data td .rz-cell-data, .rz-grid-table td .rz-cell-data {
    overflow: unset;
    text-overflow: unset;
    white-space: wrap;
}
.form-control {
    display: block;
    width: 100%;
    height: 2rem;
    padding: 0.375rem 0.75rem;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: var(--rz-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
    .form-control::-webkit-file-upload-button {
        padding: .375rem .75rem;
        margin: -.375rem -.75rem;
        -webkit-margin-end: .75rem;
        margin-inline-end: .75rem;
        color: var(--bs-body-color);
        background-color: var(--bs-tertiary-bg);
        pointer-events: none;
        border-color: inherit;
        border-style: solid;
        border-width: 0;
        border-inline-end-width: var(--bs-border-width);
        border-radius: 0;
        -webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
    }

    .form-control::file-selector-button {
        padding: .375rem .75rem;
        margin: -.375rem -.75rem;
        -webkit-margin-end: .75rem;
        margin-inline-end: .75rem;
        color: var(--bs-body-color);
        background-color: var(--bs-tertiary-bg);
        pointer-events: none;
        border-color: inherit;
        border-style: solid;
        border-width: 0;
        border-inline-end-width: var(--bs-border-width);
        border-radius: 0;
        transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
    }
.rz-dialog-confirm-message {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
.rz-tabview-nav li a, .rz-tabview-nav li a:not([href]):not([class]) {
    letter-spacing: 0;
    text-transform: capitalize;
}
.rz-state-focused .rz-tabview-title {
    font-weight: 600;
}

.card-chart-dashboard .rz-series-data-label {
    fill: #484848;
}

@media (max-width:1500px) {
    .card-chart-dashboard {
        width: 1000px !important;
    }

    .unit-item {
        flex: 25%;
        background: none;
        padding: 5px;
        max-width: 25%;
    }
}
@media (max-width:1000px) {

    .unit-item {
        flex: 50%;
        max-width: 50%;
        background: none;
        padding: 5px;
    }
}
@media (max-width: 800px) {
    .unit-item {
      flex: 50%;
      max-width: 50%;
      background: none;
      padding: 5px;
    }
  }
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media (max-width: 600px) {
    .unit-item {
      flex: 50%;
      background: none;
      padding: 5px;
    }
  }