/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.light-style .menu .app-brand.demo {
    height: 64px;
}

.dark-style .menu .app-brand.demo {
    height: 64px;
}

.app-brand-logo.demo {
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -ms-flexbox;
    display: flex;
    /*width: 34px;
  height: 24px;*/
}

    .app-brand-logo.demo img {
        width: 8.8888888889rem;
        height: auto;
    }

    .app-brand-logo.demo svg {
        width: 35px;
        height: 24px;
    }

.app-brand-text.demo {
    font-size: 1.375rem;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
    padding-top: 64px !important;
}

.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
    padding-top: 72px !important;
}
/* Navbar page z-index issue solution */
.content-wrapper .navbar {
    z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
    display: block !important;
}

.demo-inline-spacing > * {
    margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
}

.demo-vertical-spacing.demo-only-element > :first-child {
    margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
    margin-top: 1.875rem !important;
    margin-bottom: 0 !important;
}

.demo-vertical-spacing-lg.demo-only-element > :first-child {
    margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
    margin-top: 5rem !important;
    margin-bottom: 0 !important;
}

.demo-vertical-spacing-xl.demo-only-element > :first-child {
    margin-top: 0 !important;
}

.rtl-only {
    display: none !important;
    text-align: left !important;
    direction: ltr !important;
}

[dir='rtl'] .rtl-only {
    display: block !important;
}

/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
    #dropdown-variation-demo .btn-group .text-truncate {
        width: 254px;
        position: relative;
    }

        #dropdown-variation-demo .btn-group .text-truncate::after {
            position: absolute;
            top: 45%;
            right: 0.65rem;
        }
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 1rem;
}

.layout-demo-placeholder img {
    width: 900px;
}

.layout-demo-info {
    text-align: center;
    margin-top: 1rem;
}

.layout-navbar {
    height: 4.0rem;
}

.fs-10px {
    font-size: 10px
}

.fs-11px {
    font-size: 11px
}

.fs-12px {
    font-size: 12px
}

.fs-13px {
    font-size: 13px
}

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

.fs-16px {
    font-size: 16px
}

.fs-18px {
    font-size: 18px
}

.table-list-small td {
    font-size: 12px;
}

.table-list-small > :not(caption) > * > * {
    padding: 0.3rem 0.45rem;
}

.page-title h2 {
    font-size: 1.5rem;
}

.breadcrumb {
    margin-bottom: 0px;
}

.require {
    color: red;
}

.form-label {
    text-transform: uppercase;
}

.table-striped .form-control {
    background-color: white;
}

.tableFixHead thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: white;
}

.tableFixHead tbody th {
    position: sticky;
    left: 0;
}

.btn-expand-filter {
    position: absolute;
    right: 0;
    top: 0;
}

.filter-row {
    margin: 0px;
    padding: 0px;
}
    .filter-row > div {
        margin: 0px;
        padding: 0px;
    }
    .filter-row .row {
        margin: 0px;
        padding: 0px;
    }

.center-table-value td {
    text-align: center;
}

.center-table-value th {
    text-align: center;
}

.table-list-small td {
    font-size: 0.85rem;
}

.table-list-small th {
    font-size: 0.85rem;
}

.table-list-small thead tr th {
    padding: 0.3rem 0.45rem;
    padding-block: 0.65rem !important;
}

.page-title h2 {
    font-size: 1.5rem;
}

.breadcrumb {
    margin-bottom: 0px;
}

.small-column-block {
    padding-block: 0.25rem !important;
    padding: 0.3rem 0.45rem !important;
}

.form-select {
    background-color: white;
}

.table.table-sm thead tr th {
    vertical-align: baseline;
    
    font-weight: 700;
    font-size: 0.85rem;
}

.form-select-sm {
    font-size: 0.85rem;
}

.form-control-sm {
    font-size: 0.85rem;
}

.table.table-sm tbody tr td {
    font-size: 0.85rem;
}

.table-sm > :not(caption) > * > * {
    padding: 0.3rem 0.5rem;
}

.number {
    text-align: right;
}

.required {
    color: red;
}

.text-notes {
    font-size: 1rem;
    color: red;
}

input[type="checkbox"][readonly] {
    pointer-events: none;
    opacity: 0.5;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}

.light-style .swal2-popup .swal2-title {
    font-size: 2rem !important;
}

@-webkit-keyframes invalid-row {
    from {
        background-color: red;
    }

    to {
        background-color: inherit;
    }
}

@-moz-keyframes invalid-row {
    from {
        background-color: red;
    }

    to {
        background-color: inherit;
    }
}

@-o-keyframes invalid-row {
    from {
        background-color: red;
    }

    to {
        background-color: inherit;
    }
}

@keyframes invalid-row {
    from {
        background-color: red;
    }

    to {
        background-color: inherit;
    }
}

.invalid-row td {
    --bs-table-bg-type: var( --bs-table-bg) !important;
    -webkit-animation: invalid-row 7s infinite; /* Safari 4+ */
    -moz-animation: invalid-row 7s infinite; /* Fx 5+ */
    -o-animation: invalid-row 7s infinite; /* Opera 12+ */
    animation: invalid-row 7s infinite; /* IE 10+ */
}
.bootstrap-select .dropdown-toggle {
    min-height: calc(1.625em + 0.43rem + calc(var(--bs-border-width) * 2)) !important;
    background-size: 20px 20px;
    padding: calc(0.215rem - var(--bs-border-width)) calc(0.75rem - var(--bs-border-width)) !important;
    padding-inline-end: calc(2.25rem - var(--bs-border-width)) !important;
}
input:read-only {
 
    color: #acaab1;
    background-color: #f3f2f3;
    border-color: #cdccd0;
}
/*
    .form-select.form-select-sm:focus, .was-validated .form-select.form-select-sm {
        padding: calc(0.215rem - 2px) calc(2.25rem - 2px) calc(0.215rem - 2px) calc(0.75rem - 2px);
    }
    */