:root {
    --template-color: #1947ba;
    --template-color-userManagement: linear-gradient(to left, #1947ba, #002278);
    --template-color-sale: #c00000;
    --template-color-compute: #e049d8;
    --template-title-userManagement: #00b050;
    --template-title-sale: #ff0000;
    --template-table-userManagement-odd: #fff;
    --template-table-userManagement-even: #d8e0f3e3;
    --template-table-sale-odd: #f8d7cd;
    --template-table-sale-even: #fcece8;
    --template-table-compute-odd: #f9dbf7;
    --template-table-compute-even: #f6efff;
    --template-table-target-even: #e8ecf8;
    --template-table-disable: #a6a6a6;
    --template-balance-bg: linear-gradient(#7005ff, #5000b9);
    --template-compute-bg: linear-gradient(#e049d8, #5e07bc);
    --template-userManagement-bg: linear-gradient( #1947ba, #002278);
    --template-sale-bg: linear-gradient(#c70000, #830000);
    --template-disable-bg: linear-gradient(#a6a6a6, #d8d8d8);

    --first-color:#000000;
    --second-color:#9b9b9b;
    --third-color:#9b9b9b;
    --forth-color:#9b9b9b;
    --fifth-color:#9b9b9b;
    --template-bg: linear-gradient(to left, #1947ba, #002278);
    --template-bg-table: linear-gradient(to left, #284882, #142a52);
    --template-bg-disable: linear-gradient(to left, #9b9b9b, #626262);
    --template-bg-body-tbody: linear-gradient(to left, #1947ba, #002278);
}

.card {
    border: 0.12rem solid #9a8cff;
    padding-bottom: 10px;
}

.btn-warning {
    background-color: var(--template-color) !important;
}

.btn.compute{
    background: var(--template-compute-bg);
    color: #fff;
}

.form-control {
    border-radius: var(--tblr-border-radius-pill)!important;
    /* border-radius: 20px; */
    /* box-shadow: 15px 20px 10px -18px inset #00000070; */
}

.form-check-input {
    box-shadow: 8px 8px 8px -11px inset #000;
}


.template-page-card {
    height: calc(100vh - 190px);
    min-height: 300px;
    border: 1px solid #bfbfbf;
    border-radius: 5px;
    overflow-x: hidden;
}

.template-page-link {
    display: flex;
    flex-direction: column;
    /* gap: 1rem; */
    padding: 20px 10px;
}

.template-page-detail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    padding: 20px 10px;
    border-left: 1px solid #bfbfbf;
    overflow: auto;
}

.template-page-detail label {
    color: #000;
    font-weight: bolder;
}

.template-page-detail label input,
.template-page-detail label select {
    border: 1px solid #bfbfbf;
    font-weight: 600;
    color: #0b4b8e !important;
    margin-top: 5px;
    padding: .5625rem .75rem !important;
}

.template-page-detail label input:read-only {
    /* border: none;
    font-weight: 600;
    color: #0b4b8e !important;
    background-color: #e5ebf7 !important;
    margin-top: 5px; */
}

.template-page-link ul li {
    list-style-type: none;
    margin-top: 1rem;
}

.btn.template-item-link {
    display: block;
    white-space: normal;
    text-align: start;
    background-color: transparent;
    border: none;
    box-shadow: none;
    color: var(--tabler-primary);
    padding: var(--tblr-btn-padding-y) 0 var(--tblr-btn-padding-y) var(--tblr-btn-padding-y);
    font-size: clamp(.25rem, 0.8vw, 1.5rem);
}

.btn.template-item-link.active {
    font-weight: 600;
}

.btn.template-item-link::before {
    content: "";
    position: relative;
    display: block;
    width: 1rem;
    height: 1rem;
    border-radius: 50px;
    background-color: #fff;
    border: 1px solid var(--tblr-primary);
    float: left;
    margin-right: 7px;
}

.btn.template-item-link.active::before {
    background-color: var(--tblr-primary);
}

a.template-item-link {
    font-size: clamp(.75rem, .8vw, 1rem);
    font-weight: 500;
    line-height: 2;
}

a.template-item-link.active {
    font-weight: 800;
    text-decoration: underline;
}

.template-page-title {
    text-transform: uppercase;
}

.form-control.disabled,
.form-control:disabled,
input.form-control:read-only {
    background-color: #e5ebf7;
}

label select.form-control {
    padding: 0.5625rem 1rem;
}

ul.pagination {
    margin-bottom: 0 !important;
}

.template-page-wrapper .template-page-header,
.template-page-wrapper .template-page-body {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}
.bg-disable{
    background: var(--template-disable-bg) !important;
    color: #FFFFFF !important;
}
.bg-light {
    color: #000 !important;
    border: 1px solid #000;
}

.template-bg {
    color: #FFF !important;
    /* background: linear-gradient(#c34cfe, #561ee2); */
    background: var(--template-userManagement-bg) !important;
}


.flash-message {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    font-size: 20px;
    transition: all 0.2s ease-out;
}

.flash-message.success {
    background-color: #EFE;
    border: 1px solid #DED;
    color: #9A9;
}

.flash-message.danger {
    color: #A66;
    background-color: #FEE;
    border: 1px inset #EDD;
}

.flash-message.active {
    transform: translateY(100px);
    transition: all 0.2s ease-out;
    z-index: 5000;
}

.flash-card {
    position: absolute;
    top: -100px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100px;
    padding: 20px;
}
.text-tempate{
    color: var(--template-color) !important;
}

.btnUser{
    background: var(--template-color-userManagement) !important;
    color: #fff;
}