/*
    Created on : Oct 02, 2015, 4:18:27 AM
    Author     : phamtrong204
*/

body {
    --color-primary: #eb2129;
    --color-primary-rgb: 235, 33, 41;
    --color-primary-contrast: #ffffff;
    --color-primary-contrast-rgb: 255, 255, 255;
    --color-primary-shade: #cf1d24;
    --color-primary-tint: #ed373e;

    --margin: 15px;
    --padding: 15px;
}

body.realm-dev {
    --color-primary: #2196f3;
    --color-primary-rgb: 33, 150, 243;
    --color-primary-contrast: #fff;
    --color-primary-contrast-rgb: 255, 255, 255;
    --color-primary-shade: #1d84d6;
    --color-primary-tint: #37a1f4;
}

body.realm-local {
    --color-primary: #7E57C2;
    --color-primary-rgb: 126, 87, 194;
    --color-primary-contrast: #ffffff;
    --color-primary-contrast-rgb: 255, 255, 255;
    --color-primary-shade: #6f4dab;
    --color-primary-tint: #8b68c8;
}

body {
    --box-shadow-primary-1: 0 2px 2px 0 rgba(var(--color-primary-rgb), 0.14), 0 3px 1px -2px rgba(var(--color-primary-rgb), 0.12), 0 1px 5px 0 rgba(var(--color-primary-rgb), 0.2);
    --box-shadow-primary-2: 0 4px 5px 0 rgba(var(--color-primary-rgb), 0.14), 0 1px 10px 0 rgba(var(--color-primary-rgb), 0.12), 0 2px 4px -1px rgba(var(--color-primary-rgb), 0.3);
    --box-shadow-primary-3: 0 8px 17px 2px rgba(var(--color-primary-rgb), 0.14), 0 3px 14px 2px rgba(var(--color-primary-rgb), 0.12), 0 5px 5px -3px rgba(var(--color-primary-rgb), 0.2);
    --box-shadow-primary-4: 0 16px 24px 2px rgba(var(--color-primary-rgb), 0.14), 0 6px 30px 5px rgba(var(--color-primary-rgb), 0.12), 0 8px 10px -7px rgba(var(--color-primary-rgb), 0.2);
    --box-shadow-primary-5: 0 24px 38px 3px rgba(var(--color-primary-rgb), 0.14), 0 9px 46px 8px rgba(var(--color-primary-rgb), 0.12), 0 11px 15px -7px rgba(var(--color-primary-rgb), 0.2);

   /* font-family: "Chakra Petch", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;*/
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Chakra Petch", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.show_on_edit {
    display: none;
}

.is_edit_form .show_on_edit {
    display: initial;
}

.full-view {
    width: 100vw;
    height: calc(100vh - 45px);
}

.error-404-image {
    max-width: 600px;
    width: 100%;
    height: auto;
    display: block;
}

.divider.topbar-divider {
    margin: var(--dropdown-spacing, 6px) 0;
    border-top-color: #e0e0e0;
    background-color: #e0e0e0;
}

.divider.topbar-divider + li > a {
    border-top: none;
}

.bold {
    font-weight: 700;
}

.text-large {
    font-size: large;
}

img.img-brand {
    max-height: 40px;
}

.margin-center,
.margin-horizontal-auto {
    margin-left: auto;
    margin-right: auto;
}

.form-divider {
    margin-top: 20px;
    margin-bottom: 20px;
}

.form-divider:first-child {
    margin-top: 0;
}

.form-horizontal .control-label.form-divider {
    margin-bottom: 20px;
}

.form-control.text-lowercase::placeholder {
    text-transform: initial;
}

.form-control-height {
    height: 34px;
}

p.form-control-height,
code.form-control-height {
    line-height: 34px;
}

.form-control.form-control-lat-lng {
    width: 120px;
    display: inline-block;
    margin-right: 10px;
}

.form-control.form-control-tinyint {
    width: 100px;
    display: inline-block;
    margin-right: 10px;
}

@media screen and (max-width: 420px) {
    .form-control.form-control-tinyint {
        margin-top: 6px;
    }
}

.btn.btn-form-submit {
    width: 72px;
    transition: background-color 700ms;
}

/* region inner-loader */

.inner-loader {
    border-radius: 100%;
    position: relative;
    margin: 0 auto;
    --color: #fff;
    --dot-size: 8px;
    --padding-vertical: 0;
    --half-spacing: 2px;
}

.inner-loader span {
    display: inline-block;
    width: var(--dot-size, 8px);
    height: var(--dot-size, 8px);
    border-radius: 100%;
    background-color: var(--color, #fff);
    margin: var(--padding-vertical) var(--half-spacing);
    opacity: 0;
}

.inner-loader span:nth-child(1) {
    animation: opacityChange 1s ease-in-out infinite;
}

.inner-loader span:nth-child(2) {
    animation: opacityChange 1s ease-in-out 0.33s infinite;
}

.inner-loader span:nth-child(3) {
    animation: opacityChange 1s ease-in-out 0.66s infinite;
}

@keyframes opacityChange {
    0%, 100% {
        opacity: 0;
    }

    60% {
        opacity: 1;
    }
}

/* endregion */

.navbar-brand .img-brand {
    filter: brightness(0) invert(1);
}

.td-break-if-long {
    max-width: 360px;
    overflow-wrap: break-word;
}

/* region ace-overrider candidates */

.no-skin .nav-list li.active > a:after {
    display: none;
}

.dropdown-navbar {
    max-height: calc(100vh - 75px);
    overflow: auto;
}

.badge {
    padding: 3px 7px;
}

@media only screen and (max-width: 479px) {
    /* Override custom.css navbar-brand */
    .navbar .navbar-brand {
        display: initial;
    }

    .dropdown-navbar {
        position: fixed !important;
        top: 61px !important;
        left: 15px !important;
        right: 15px !important;
        width: auto !important;
    }
}

/* endregion */

/* region ace-custom candidates */

.columns-preferences-menu {
    max-height: 50vh;
    overflow: auto;
    min-width: 200px;
}

.vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.text-monospace {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}

.view-form-item {
    margin-top: 16px;
}

.table .action-buttons {
    text-align: right;
}

.table > tbody > tr > td.narrow,
.table > tbody > tr > th.narrow,
.table > tfoot > tr > td.narrow,
.table > tfoot > tr > th.narrow,
.table > thead > tr > td.narrow,
.table > thead > tr > th.narrow {
    padding: 4px;
}

/* endregion */

.table-striped > tbody > tr.selected {
    background-color:rgba(var(--color-primary-rgb), .125);;
   /* color: var(--color-success-shade, #28ba62);*/
    font-weight: 600;
}

.full-height {
    height: 100%;
}

.full-width {
    width: 100%;
}

.flex-vertical-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.align-items-center{
    align-items: center;
}
.flex-grid {
    display: flex;
    flex-wrap: wrap;
}

.flex-col,
.flex-col-6 {
    flex: 1 1 50%;
}

.flex-col-4 {
    flex: 1 1 33.33333%;
}

.flex-col-12 {
    flex: 1 1 100%;
}

.flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-1 {
    flex: 1 1 0;
}

.flex-auto {
    flex: 1 1 auto;
}

.justify-center {
    justify-content: center;
}

.justify-items-center {
    justify-items: center;
}

.nav .dropdown-toggle .dropdown-toggle-text {
    margin-left: 2px;
}

.ace-custom .ace-nav > li > a {
    min-width: 39px;
}

@media only screen and (max-width: 360px) {
    .ace-nav {
        white-space: nowrap;
        overflow-x: scroll;
    }
}

@media only screen and (min-width: 375px) {
    .ace-nav > li > a {
        min-width: 45px;
    }
}

@media only screen and (min-width: 414px) {
    .ace-nav > li > a {
        min-width: 50px;
    }
}

@media only screen and (min-width: 480px) {
    .ace-nav > li {
        margin-left: 10px;
    }
}

@media only screen and (min-width: 992px) {
    .ace-nav > li {
        margin-left: 3px;
    }
}

@media only screen and (min-width: 1024px) {
    .ace-nav > li {
        margin-left: 7px;
    }
}

@media only screen and (min-width: 1366px) {
    .nav .dropdown-toggle .dropdown-toggle-text {
        margin-left: 5px;
    }

    .ace-nav > li {
        margin-left: 20px;
    }
}

.dropdown-menu > li > a {
    position: relative;
}

.dropdown-menu .indicator {
    color: var(--color-medium, #92949c);
    position: absolute;
    right: 11px;
}

.dropdown-navbar > li > a .indicator {
    right: 2px;
}

.ace-custom .ace-nav > li > a,
.ace-custom .ace-nav > li > ul > li > a {
    position: relative;
}

.notif-indicator {
    padding: 0 4px;
    font-size: 11px;
    line-height: 14px;
    min-width: 22px;
    border-radius: 60px;
    text-align: center;
    background-color: var(--color-danger, #eb445a);
    color: var(--color-danger-contrast, #fff);
    position: absolute;
    top: 0;
    right: 0;
}

.notif-indicator.notif-indicator-dot {
    min-width: 14px;
}

.ace-custom .ace-nav .dropdown-toggle > .notif-indicator {
    background-color: var(--color-primary-contrast, #fff);
    color: var(--color-primary, #3880ff);
    box-shadow: var(--box-shadow-primary-1);
}

.ace-custom .ace-nav > li > ul > li > a > .notif-indicator {
    right: 1px;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

@media only screen and (max-width: 479px) {
    .ace-custom .ace-nav .dropdown-toggle > .notif-indicator {
        top: 5px;
    }
}

.table input[type=color], .table input[type=date], .table input[type=datetime-local],
.table input[type=datetime], .table input[type=email], .table input[type=month],
.table input[type=datepicker], .table input[type=datetimepicker],
.table input[type=number], .table input[type=password], .table input[type=search],
.table input[type=tel], .table input[type=text], .table input[type=time],
.table input[type=url], .table input[type=week], .table textarea {
    padding: 2px;
    width: 100%;
    border: none;
    border-bottom: 1px dashed #ccc;
    border-radius: 0 !important;
}

.data_table thead tr th,
.data_table tbody tr td {
    white-space: nowrap;
}

.container-event-detail .data_table tbody tr td[for_key="message"],
.data_table tbody tr td.message-cell {
    min-width: 360px;
    white-space: normal;
}

.horizontal-scrollable > .table {
    margin-bottom: 0;
}

.layout-manager .data_table .table-bordered > tbody:last-child > tr:last-child > td,
.layout-manager .data_table .table-bordered > tbody:last-child > tr:last-child > th,
.layout-manager .data_table .table-bordered > tfoot:last-child > tr:last-child > td,
.layout-manager .data_table .table-bordered > tfoot:last-child > tr:last-child > th,
.layout-manager .data_table .table-bordered > thead:last-child > tr:last-child > td,
.layout-manager .data_table .table-bordered > thead:last-child > tr:last-child > th {
    border-bottom: none;
}

.layout-manager .data_table .table-bordered > tbody:first-child,
.layout-manager .data_table .table-bordered > tfoot:first-child,
.layout-manager .data_table .table-bordered > thead:first-child,
.layout-manager .data_table .table-bordered > tbody:first-child > tr:first-child > td,
.layout-manager .data_table .table-bordered > tbody:first-child > tr:first-child > th,
.layout-manager .data_table .table-bordered > tfoot:first-child > tr:first-child > td,
.layout-manager .data_table .table-bordered > tfoot:first-child > tr:first-child > th,
.layout-manager .data_table .table-bordered > thead:first-child > tr:first-child > td,
.layout-manager .data_table .table-bordered > thead:first-child > tr:first-child > th {
    border-bottom: none;
    border-top: none;
    background-color: #fff;
}

.layout-manager .data_table .table.table-bordered {
    border: none;
}

.layout-manager .data_table .table thead {
    position: -webkit-sticky;
    position: sticky !important;
    top: 0;
    z-index: 300;
    border-bottom: 1px solid #ddd;
    box-shadow: rgba(2, 8, 20, 0.1) 0 0.175em 0.5em, rgba(2, 8, 20, 0.08) 0 0.085em 0.175em;
}

.layout-manager .data_table .horizontal-scrollable {
    max-height: calc(100vh - 178px);
    overflow-y: auto;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
}

.layout-manager .card .horizontal-scrollable {
    border-bottom: none;
    border-top: none;
}

.layout-manager .dataTables_paginate .pagination {
    margin: 0;
}

@media only screen and (max-height: 992px) {
    .layout-manager .data_table .horizontal-scrollable {
        max-height: calc(100vh - 118px);
    }

    .layout-manager .footer {
        padding-top: 15px;
    }

    .layout-manager .footer .footer-inner .footer-content {
        padding: 0;
        line-height: 1;
        font-size: 12px;
    }
}

@media only screen and (max-width: 767px) {
    .layout-manager .data_table .horizontal-scrollable {
        max-height: calc(100vh - 136px);
    }

    .layout-manager .dataTables_paginate,
    .layout-manager .dataTables_info {
        text-align: center;
    }
}

@media only screen and (max-width: 374px) {
    .layout-manager .dataTables_info {
        font-size: 12px;
    }

    .layout-manager .pagination > li > a,
    .layout-manager .pager > li > a {
        font-size: 11px;
        margin-left: 0;
        margin-right: 0;
        padding: 5px 10px;
    }
}

/* region Non-widget manager container */

.manager-container-header {
    width: 100%;
    position: fixed;
    z-index: 1000;
    padding-left: 10px;
    padding-right: 10px;
    background-color: var(--color-light, #f4f5f8);
}
.e_filter
{
    margin-top: 30px;
}
.manager-container-title {
    float: left;
    font-weight: 600;
    color: var(--color-primary-shade, #3171e0);
    padding-left: 5px;
}

.manager-container-toolbar {
    float: right;
}

.manager-container-toolbar .actions_content {
    display: inline-block;
    margin: 4px 5px;
}

.dataTables_wrapper .table tr th:first-child,
.dataTables_wrapper .table tr td:first-child {
    border-left: none;
}

.dataTables_wrapper .table tr th:last-child,
.dataTables_wrapper .table tr td:last-child {
    border-right: none;
}

@media only screen and (max-height: 992px) and (min-width: 768px) {
    .layout-manager .data_table .horizontal-scrollable {
        max-height: calc(100vh - 100px);
    }

    .layout-manager .e_data_table_detail .data_table .horizontal-scrollable {
        max-height: calc(100vh - 109px);
    }
}

/* endregion */

/* region narrow layout */

/* region e_manager_table_container */

.e_manager_table_container .no_record {
    border-bottom: 1px solid #ddd;
}

.e_manager_table_container .card .no_record,
.e_manager_table_container .widget-box .no_record {
    border-bottom: none;
}

.e_manager_table_container .card.card-outline > .table > thead,
.e_manager_table_container .card.card-outline > .table > thead > tr,
.e_manager_table_container .card.card-outline > .table > tfoot {
    background: #fff;
}

.e_manager_table_container .card.card-outline > .table > thead:first-child > tr:first-child > th {
    line-height: 1.45;
    padding-top: 6px;
    padding-bottom: 6px;
}

@media only screen and (min-width: 768px) {
    .e_manager_table_container .filter-footer {
        padding-top: 4px;
    }

    .e_manager_table_container .e_filter .form-group,
    .e_manager_table_container .e_filter_form .form-group,
    .e_manager_table_container .filter .form-group,
    .e_manager_table_container .filter-form .form-group {
        margin-bottom: 4px;
    }

    .e_manager_table_container,
    .e_manager_table_container .dataTables_info,
    .e_manager_table_container table,
    .e_manager_table_container label,
    .e_manager_table_container input,
    .e_manager_table_container .table_header .dropdown-toggle,
    .e_manager_table_container .form-control,
    .e_manager_table_container .select2-container .select2-selection,
    .e_manager_table_container .select2-container .select2-selection.select2-selection--single,
    .e_manager_table_container .select2-container .select2-selection.select2-selection--multiple,
    .e_manager_table_container .select2-container .select2-selection--multiple .select2-selection__choice,
    .e_manager_table_container .block-select-option {
        font-size: 12px;
    }

    .e_manager_table_container .form-control {
        line-height: 1.25;
    }

    .e_manager_table_container .select2-container .select2-selection--multiple .select2-selection__choice {
        line-height: 22px;
    }

    .e_manager_table_container .select2-container .select2-selection--multiple .select2-selection__choice__remove {
        line-height: 21px;
    }

    /*This will ensure that multiple select be displayed in single-line only*/
    /*.e_manager_table_container .filter-form .select2-container .select2-selection.select2-selection--multiple,*/
    /*.e_manager_table_container .e_filter_form .select2-container .select2-selection.select2-selection--multiple,*/
    .e_manager_table_container .select2-container .select2-selection.select2-selection--single,
    .e_manager_table_container .form-control,
    .e_manager_table_container .block-select-option {
        height: 30px;
    }

    .e_manager_table_container .select2-container .select2-selection.select2-selection--multiple {
        min-height: 30px;
    }

    .e_manager_table_container .select2-container .select2-selection.select2-selection--multiple .select2-selection__rendered {
        line-height: 26px;
    }

    .e_manager_table_container .table > tbody > tr > td,
    .e_manager_table_container .table > tbody > tr > th,
    .e_manager_table_container .table > tfoot > tr > td,
    .e_manager_table_container .table > tfoot > tr > th,
    .e_manager_table_container .table > thead > tr > td,
    .e_manager_table_container .table > thead > tr > th {
        line-height: 1.25;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .e_manager_table_container table input {
        margin: 0;
    }

    .e_manager_table_container.container-event-detail td[for_key="message"] {
        padding: 4px 8px;
        vertical-align: middle;
    }
}

/* endregion */

/* region navbar */

@media only screen and (min-width: 1200px) {
    body {
        --navbar-base-height: 42px;
    }

    .ace-nav > li {
        line-height: 34px;
        height: 34px;
        margin-top: 4px;
        margin-bottom: 4px;
    }

    .navbar .navbar-brand > img,
    .navbar .navbar-brand > svg {
        height: 22px;
    }

    .dropdown-menu.dropdown-navbar {
        --dropdown-spacing: 4px;
    }

    .dropdown-navbar > li, .dropdown-navbar > li > a {
        border-radius: 9px;
    }

    .dropdown-navbar > li > a {
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

/* endregion */

/* endregion */

.cursor-default {
    cursor: default;
}

.form-footer {
    position: sticky;
    bottom: var(--margin, 15px);
    left: auto;
    right: auto;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 10px;
    border-radius: var(--component-radius, 12px);
    width: fit-content;
    margin: var(--margin, 15px) auto;
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    .form-footer {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0.5);
    }
}

.badge.status-aged {
    background-color: #78350f;
    color: #fff;
}

.badge.status-checkout_automatic {
    background-color: #fde047;
}

.badge.status-checkout_manual {
    background-color: #ef4444;
    color: #fff;
}

.badge.status-reseller_stayed {
    background-color: #22c55e;
    color: #fff;
}

.badge.status-inactive {
    background-color: #e5e7eb;
    color: #6b7280;
}

.badge.status-default.variant-table,
tbody tr .badge.status-default {
    background-color: #525252;
    color: #fafafa;
}

tbody > tr.tr-secondary {
    background-color: var(--color-light, #f4f5f8);
}

.appbar {
    background-color: #ffdad6;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    padding-left: 4px;
    padding-right: 4px;
}

.appbar-content {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    position: relative;
}

@media only screen and (max-width: 479px) {
    .appbar-content {
        overflow-x: auto;
    }
}

.appbar-item {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    color: #cf1d24;
    padding: 6px 4px 4px;
    width: 54px;
}

.appbar-item:focus,
.appbar-item:hover,
.appbar-item:active,
.appbar-item.active {
    color: #cf1d24;
    text-decoration: none;
}

.appbar-item:focus .appbar-image,
.appbar-item:hover .appbar-image,
.appbar-item:active .appbar-image,
.appbar-item.active .appbar-image {
    background-color: #ffb3ac;
}

.appbar-image,
.appbar-title {
    text-align: center;
}

.appbar-image {
    font-size: 16px;
    border-radius: 12px;
    width: 50px;
}

.appbar-title {
    font-size: 10px;
}

.actionbar {
    position: sticky;
    bottom: var(--margin, 15px);
    left: auto;
    right: auto;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 10px;
    border-radius: var(--component-radius, 12px);
    width: fit-content;
    margin: var(--margin, 15px) auto;
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    .actionbar {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0.5);
    }
}

.text-pill {
    --color-rgb: var(--color-dark-rgb);

    background-color: rgba(var(--color-rgb), .15);
    color: rgba(var(--color-rgb), 1);
    padding: 0 0.375em;
    border-radius: var(--component-radius);
}

.text-pill.text-primary {
    --color-rgb: var(--color-primary-rgb);
}

.text-pill.text-success {
    --color-rgb: var(--color-success-rgb);
}

.text-pill.text-danger {
    --color-rgb: var(--color-danger-rgb);
}

.text-pill.text-warning {
    --color-rgb: var(--color-warning-rgb);
}
table > tfoot > tr.total > td {
    border: none;
}
.layout-manager .data_table .table-bordered > thead:first-child > tr > th {
    background-color: #fff;
}
table thead {
    inset-block-start: 0; /* "top" */
  }
  table tfoot {
    inset-block-end: 0; /* "bottom" */
  }
  tfoot {
    position: sticky;
    background-color: #fff;
}