@import url('open.iconic/font/css/open-iconic-bootstrap.min.css');
@import url('switcher-resources/themes.css');
@import url('switcher-resources/theme-switcher.css');

/*Khai báo màu chủ đạo theo theme*/
/*https://www.color-hex.com/color-palette/70954*/
:root {
    --mauNenChuDao: #d4a17f;
    --mauChuChuDao: white;
    --coChuChuDao: 14px;
    --inDamChuan: 600;
    --mauButtonConfirm: #3085d6;
    --mauButtonCancel: #d33;
    --mauButtonEdit: #3085d6;
    --mauButtonFinish: #26b050;
    --mauButtonDelete: #d33;
    --mauButtonActive: #79AC78;
    --mauButtonDeactive: #FF8989;
    --mauButtonResetPass: #EFD595;
    --mauButtonPhanQuyen: #E6B325;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
    overflow: hidden;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
/*
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}*/

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/*.dxbs-fl .row {
    width: 100%;
}*/
.dxbl-fl .row {
    width: 100%;
}


.tieuDe {
    color: var(--mauNenChuDao) !important;
    padding-top: 10px;
    padding-left: 10px;
}

.tieuDe2 {
    color: var(--mauNenChuDao) !important;
    padding-left: 4px;
    font-weight: 500;
    font-size: medium;
}

.canh-giua {
    display: flex;
    align-items: center;
    /*justify-content: left;*/
}

.canh-phai {
    display: flex;
    align-items: flex-start;
    justify-content: right;
}

.show {
    display: flex;
}

.hide {
    display: none !important;
}

.va-btn-container {
    margin-left: auto;
}

    .va-btn-container::after {
        box-sizing: border-box;
    }

.va-btn-icon-brand,
.va-btn-icon-storegrp,
.va-btn-icon-home,
.va-btn-icon-card,
.va-btn-icon-cash,
.va-btn-icon-member,
.va-btn-icon-oms,
.va-btn-icon-pricetag,
.va-btn-icon-user,
.va-btn-icon-language,
.va-btn-icon-moon,
.va-btn-icon-list,
.va-btn-icon-people,
.va-btn-icon-login,
.va-btn-icon-logout,
.va-btn-icon-changepass,
.va-btn-icon-scan,
.va-btn-icon-goback,
.va-btn-icon-edit,
.va-btn-icon-finish,
.va-btn-icon-phanquyen,
.va-btn-icon-active,
.va-btn-icon-deactive,
.va-btn-icon-resetPass,
.va-btn-icon-delete,
.va-btn-icon-config,
.va-btn-icon-add,
.va-btn-icon-save,
.va-btn-icon-eye,
.va-btn-icon-shopee,
.va-btn-icon-cskh {
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    margin-right: 1rem;
    opacity: 1;
    width: 18px;
    height: 18px;
}

.va-btn-icon-brand {
    -webkit-mask-image: url("../images/brand.svg");
    mask-image: url("../images/brand.svg");
}
.va-btn-icon-storegrp {
    -webkit-mask-image: url("../images/city.svg");
    mask-image: url("../images/city.svg");
}


.va-btn-icon-home {
    -webkit-mask-image: url("../images/home.svg");
    mask-image: url("../images/home.svg");
}

.va-btn-icon-card {
    -webkit-mask-image: url("../images/card.svg");
    mask-image: url("../images/card.svg");
}

.va-btn-icon-cash {
    -webkit-mask-image: url("../images/cash.svg");
    mask-image: url("../images/cash.svg");
}

.va-btn-icon-member {
    -webkit-mask-image: url("../images/member.svg");
    mask-image: url("../images/member.svg");
}

.va-btn-icon-oms {
    -webkit-mask-image: url("../images/planet-outline.svg");
    mask-image: url("../images/planet-outline.png");
}

.va-btn-icon-pricetag {
    -webkit-mask-image: url("../images/pricetag.svg");
    mask-image: url("../images/pricetag.svg");
}

.va-btn-icon-user {
    -webkit-mask-image: url("../images/person-sharp.svg");
    mask-image: url("../images/person-sharp.svg");
}

.va-btn-icon-language {
    -webkit-mask-image: url("../images/language.svg");
    mask-image: url("../images/language.svg");
}

.va-btn-icon-moon {
    -webkit-mask-image: url("../images/moon.svg");
    mask-image: url("../images/moon.svg");
}

.va-btn-icon-list {
    -webkit-mask-image: url("../images/list.svg");
    mask-image: url("../images/list.svg");
}

.va-btn-icon-people {
    -webkit-mask-image: url("../images/person-circle-outline.svg");
    mask-image: url("../images/person-circle-outline.svg");
}

.va-btn-icon-login {
    -webkit-mask-image: url("../images/log-in.svg");
    mask-image: url("../images/log-in.svg");
}

.va-btn-icon-logout {
    -webkit-mask-image: url("../images/log-out.svg");
    mask-image: url("../images/log-out.svg");
}

.va-btn-icon-changepass {
    -webkit-mask-image: url("../images/lock-open.svg");
    mask-image: url("../images/lock-open.svg");
}

.va-btn-icon-scan {
    -webkit-mask-image: url("../images/scan-sharp.svg");
    mask-image: url("../images/scan-sharp.svg");
}

.va-btn-icon-cskh {
    -webkit-mask-image: url("../images/people.svg");
    mask-image: url("../images/people.svg");
}

.va-btn-icon-add {
    -webkit-mask-image: url("../images/add-outline.svg");
    mask-image: url("../images/add-outline.svg");
}

.va-btn-icon-save {
    -webkit-mask-image: url("../images/save-outline.svg");
    mask-image: url("../images/save-outline.svg");
}

.va-btn-icon-eye {
    -webkit-mask-image: url("../images/eye-sharp.svg");
    mask-image: url("../images/eye-sharp.svg");
}

.va-btn-icon-shopee {
    -webkit-mask-image: url("../images/shopee.png");
    mask-image: url("../images/shopee.png");
}

.va-btn-icon-config {
    -webkit-mask-image: url("../images/settings.svg");
    mask-image: url("../images/settings.svg");
    margin-right: 0;
    width: 25px;
    height: 25px;
    background-color: var(--mauNenChuDao);
}

.va-btn-icon-goback {
    -webkit-mask-image: url("../images/arrow-back-circle-outline.svg");
    mask-image: url("../images/arrow-back-circle-outline.svg");
    width: 25px;
    height: 25px;
}
.va-btn-icon-edit {
    -webkit-mask-image: url("../images/edit.png");
    mask-image: url("../images/edit.png");
    width: 25px;
    height: 25px;
    margin-right: 0;
}
.va-btn-icon-finish {
    -webkit-mask-image: url("../images/finish.png");
    mask-image: url("../images/finish.png");
    width: 25px;
    height: 25px;
    margin-right: 0;
}
.va-btn-icon-phanquyen {
    -webkit-mask-image: url("../images/people.svg");
    mask-image: url("../images/people.svg");
    width: 25px;
    height: 25px;
    margin-right: 0;
}
.va-btn-icon-active {
    -webkit-mask-image: url("../images/lock-open.svg");
    mask-image: url("../images/lock-open.svg");
    width: 25px;
    height: 25px;
    margin-right: 0;
}
.va-btn-icon-deactive {
    -webkit-mask-image: url("../images/lock-closed.svg");
    mask-image: url("../images/lock-closed.svg");
    width: 25px;
    height: 25px;
    margin-right: 0;
}
.va-btn-icon-resetPass {
    -webkit-mask-image: url("../images/resetPass.svg");
    mask-image: url("../images/resetPass.svg");
    width: 25px;
    height: 25px;
    margin-right: 0;
}
.va-btn-icon-delete {
    -webkit-mask-image: url("../images/delete.png");
    mask-image: url("../images/delete.png");
    width: 25px;
    height: 25px;
    margin-right: 0;
}

.va-popup-layout-item {
    display: flex;
    align-items: center;
    margin-left: 6px;
}

.va-popup-image {
    flex-shrink: 0;
}

.va-popup-caption {
    margin-left: calc(21px + 1rem) !important;
    font-weight: var(--inDamChuan) !important;
}

.va-popup-title {
    font-weight: var(--inDamChuan);
    font-size: .875rem;
    color: black;
    opacity: 0.7;
}

/* dùng cho load các control nhỏ*/
.va-loader {
    border: 12px solid #f3f3f3; /* Light grey */
    border-top: 12px solid var(--mauNenChuDao); /* Blue */
    border-radius: 50%;
    width: 16px;
    height: 16px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}
/* dùng cho load các control lớn*/
.va-spiner {
    border: 16px solid silver;
    border-top: 16px solid var(--mauNenChuDao);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    -webkit-animation: spin 2000ms linear infinite; /* Safari */
    animation: spin 2000ms linear infinite;
    top: 60%;
    left: 50%;
    position: relative;
    margin-top: 100px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/*.mylist {
    border-radius: 10px;
    overflow: hidden;
    background-color: white;
    box-shadow: inherit;
    width:100%;
    height:100%;
}*/


.myPopUpHeader {
    background-color: var(--mauNenChuDao) !important;
    color: var(--mauChuChuDao) !important;
    font-weight: var(--inDamChuan) !important;
}


/* Css cho DxGrid dành cho dev -----> 22.1 */
/*.myGrid {
    font-size: var(--coChuChuDao);
}

    .myGrid .dxbs-grid-header-content {
        justify-content: center;
    }

.myGrid2 .card .dxbs-scroll-viewer .dxbs-scroll-viewer-content .dxbs-grid-table{
    table-layout: unset !important;
}
*/

/* Css cho DxGrid dành cho dev -----> 23.1 */
.myGrid {
    font-size: var(--coChuChuDao) !important;
}

    .myGrid .dxbl-grid-header-content {
        justify-content: center;
    }

.myGrid2 .card .dxbl-scroll-viewer .dxbl-scroll-viewer-content .dxbl-grid-table {
    table-layout: unset !important;
}



/*header -----> 22.1 */
/*.dxbs-grid .dxbs-grid-table > thead .dxbs-grid-header-row > th:not(.dxbs-grid-empty-cell) {
    background-color: var(--mauNenChuDao) !important;
    color: var(--mauChuChuDao) !important;
}*/
/*footer -----> 22.1 */
/*.dxbs-grid .dxbs-grid-table > tfoot .dxbs-grid-footer-row {
    background-color: var(--mauNenChuDao) !important;
    color: var(--mauChuChuDao) !important;
}*/

/*header -----> 23.1 */
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th:not(.dxbl-grid-empty-cell) {
    background-color: var(--mauNenChuDao) !important;
    color: var(--mauChuChuDao) !important;
}
/*footer -----> 23.1 */
.dxbl-grid .dxbl-grid-table > tfoot .dxbl-grid-footer-row {
    background-color: var(--mauNenChuDao) !important;
    color: var(--mauChuChuDao) !important;
}


/* Css cho DxDataGrid */
.myDataGrid {
    font-size: 12px;
}

    /*header*/
    .myDataGrid th {
        background-color: var(--mauNenChuDao);
        text-align: center;
    }

        .myDataGrid th span {
            color: var(--mauChuChuDao);
        }
    /*TotalSummary*/
    .myDataGrid .dx-grid-summary-cell {
        background-color: var(--mauNenChuDao);
        color: var(--mauChuChuDao);
    }

/* Css bổ sung thêm cho Card */
.card {
    box-shadow: 0 0.46875rem 2.1875rem rgb(4 9 20 / 3%), 0 0.9375rem 1.40625rem rgb(4 9 20 / 3%), 0 0.25rem 0.53125rem rgb(4 9 20 / 5%), 0 0.125rem 0.1875rem rgb(4 9 20 / 3%);
    border-width: 0;
    transition: all .2s;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(26,54,126,.125);
    border-radius: 0.25rem;
}

/* css cho trang login */
.login-bg {
    background-color: var(--mauChuChuDao);
}

    .login-bg h2 {
        color: var(--mauNenChuDao);
    }

    .login-bg .form-control {
        color: var(--mauNenChuDao);
        border-radius: 20px;
        text-align: center;
    }

/* css cho DxButton -----> 22.1 */
/*.dx-btn, .btn.dx-btn {
    border-radius: 20px;
}*/
/* css cho DxButton -----> 23.1 */
.dxbl-btn {
    border-radius: 20px;
}


/* chỉnh nút chuyển dashboard */
.customChart {
    position: relative;
    overflow: hidden;
}

.va-btn-ChuyenChart {
    position: absolute;
    z-index: 1;
    right: -10px;
    top: -10px;
}

    .va-btn-ChuyenChart span {
        margin-top: 8px;
        margin-right: 6px;
    }

@media screen and (max-width: 420px) {
    .va-btn-ChuyenChart {
        width: 45px;
        height: 45px;
    }

        .va-btn-ChuyenChart span {
            display: none;
        }

        .va-btn-ChuyenChart::after {
            content: "⇆";
            font-size: 1.5rem;
            font-weight: 800;
            margin-top: 5px;
            margin-right: 8px;
        }
}

.footer-popup {
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.footer-popup-btn-cancel {
    background-color: var(--mauButtonCancel);
    color: var(--mauChuChuDao);
    font-weight: var(--inDamChuan);
    margin: 5px;
    border-radius: 5px;
    border: none;
    font-size: 1.1rem;
    padding: 10px 20px;
}

.footer-popup-btn-confirm {
    background-color: var(--mauButtonConfirm);
    color: var(--mauChuChuDao);
    font-weight: var(--inDamChuan);
    margin: 5px;
    border-radius: 5px;
    border: none;
    font-size: 1.1rem;
    padding: 10px 20px;
}

/*.align-second td:nth-child(2),
.align-second th:nth-child(2) {
    text-align: center;
}*/
.can-chinh-dropdown th,
.can-chinh-dropdown td:nth-child(1) {
    text-align: center;
}

.can-chinh-dropdown th {
    background-color: var(--mauNenChuDao);
    color: var(--mauChuChuDao);
    font-weight: var(--inDamChuan);
}

.can-chinh-dropdown th,
.can-chinh-dropdown td {
    font-size: var(--coChuChuDao);
}
.member-title {
    font-size: 1.5rem;
    color: var(--mauNenChuDao);
    font-weight: var(--inDamChuan);
}
.user-title {
/*    font-size: 1.5rem;
    color: var(--mauNenChuDao) !important;
    font-weight: var(--inDamChuan) !important;*/
}

    .user-title .dxbl-modal-header-default {
        font-size: 1.5rem;
        color: var(--mauNenChuDao) !important;
        font-weight: var(--inDamChuan) !important;
    }

/*
    .user-title .modal-header {
        justify-content: left;
    }
    */
.user-form .col-form-label {
    color: var(--mauNenChuDao);
    font-size: var(--coChuChuDao);
    font-weight: var(--inDamChuan);
}
.user-form .col-form-label-sm {
    color: var(--mauNenChuDao);
    font-size: var(--coChuChuDao);
    font-weight: var(--inDamChuan);
}

.user-form input {
    font-size: var(--coChuChuDao);
}

.user-form textarea {
    font-size: var(--coChuChuDao);
}

.user-form{
    display: flex;
    align-items: center;
}


.margin-top-bottom-20px {
    margin-top: 20px;
    margin-bottom: 10px;
}

.user-form input,
.user-form textarea,
.user-form span {
    font-size: var(--coChuChuDao);
}

.user-form-container-btn{
    display: flex;
    gap: 10px;
}

.mem-search-btn {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}
.mem-search-btn-view {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--mauNenChuDao);
    border: 3px solid var(--mauNenChuDao);
    border-radius: 5px;
    padding: 2px 5px;
    color: var(--white);
    font-weight: var(--inDamChuan);
    box-shadow: 2px 2px 5px var(--bs-gray-500);
}
.mem-search-btn-save {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: royalblue;
    border: 3px solid royalblue;
    border-radius: 5px;
    padding: 2px 5px;
    color: var(--white);
    font-weight: var(--inDamChuan);
    box-shadow: 2px 2px 5px var(--bs-gray-500);
}
.mem-search-btn-add {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: lightcoral;
    border: 3px solid lightcoral;
    border-radius: 5px;
    padding: 2px 5px;
    color: var(--white);
    font-weight: var(--inDamChuan);
    box-shadow: 2px 2px 5px var(--bs-gray-500);
}

.mem-sex {
    font-weight: var(--inDamChuan);
    text-align: left;
    padding: 4px;
}

.mem-status {
    color: white;
    font-weight: var(--inDamChuan);
    text-align: center;
    padding: 4px;
}

.mem-status-active {
    background-color: green;
}

.mem-status-cancel {
    background-color: red;
}

.mem-status-new {
    background-color: blue;
}

.user-button {
    display: flex;
    justify-content: space-between;
    margin: 10px 0 10px 0;
}

.user-button-add {
    padding: 5px 10px;
    border: solid 1px var(--mauNenChuDao);
    border-radius: 0.25rem; /*10px;*/
    background-color: var(--white);
    font-size: 1rem;
    font-weight: var(--inDamChuan);
    display: flex;
    justify-content: center;
    text-decoration: none;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

    .user-button-add:hover {
        background-color: var(--mauNenChuDao);
        text-decoration: none;
        color: var(--white);
    }

.action-button-container {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.action-button-forall {
    padding: 5px 10px;
    color: white;
    border: solid 1px var(--mauNenChuDao);
    border-radius: 0.25rem;
    font-size: var(--coChuChuDao);
    font-weight: var(--inDamChuan);
    display: flex;
    justify-content: center;
    text-decoration: none;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
    .action-button-forall:hover {
        text-decoration: none;
        color: var(--white);
    }

.action-button-edit {
    background-color: var(--mauButtonEdit);
}
.action-button-finish {
    background-color: var(--mauButtonFinish);
}
.action-button-delete {
    background-color: var(--mauButtonDelete);
}
.action-button-active {
    background-color: var(--mauButtonActive);
}
.action-button-deactive {
    background-color: var(--mauButtonDeactive);
}
.action-button-resetPass {
    background-color: var(--mauButtonResetPass);
}
.action-button-phanquyen {
    background-color: var(--mauButtonPhanQuyen);
}

.status-active {
    color: var(--mauButtonActive);
    font-weight: var(--inDamChuan);
}
.status-deactive {
    color: var(--mauButtonDeactive);
    font-weight: var(--inDamChuan);
}

/* Css cho DxTreeView dành cho dev -----> 23.1 */
.treeview-icon {
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    background-size: contain;
    background-position: center center;
}

.treeview-icon-folder {
    background-image: url("images/icons/folder-color.svg");
}

.treeview-icon-image {
    background-image: url("images/icons/image-colors.svg");
}

.treeview-icon-video {
    background-image: url("images/icons/video-colors.svg");
}

.treeview-icon-music {
    background-image: url("images/icons/music-colors.svg");
}

.treeview-icon-document {
    background-image: url("images/icons/document-color.svg");
}

.nodeParent {
    color: var(--mauNenChuDao);
    font-weight: var(--inDamChuan);
}
.nodeChild {
    color: var(--mauButtonDeactive);
}
.nodeChildChild {
    color: black;
}

.scan-form {
    display: block;
}
.scan-label {
    font-weight: var(--inDamChuan);
    padding-top: 10px;
    padding-bottom: 10px;
}
.scan-result{
    background-color: var(--mauNenChuDao);
    color: var(--mauChuChuDao);
    padding: 5px 10px 5px 10px;
}