/* Color Variables */
:root {
    --bg-color: #ECECEC;
    --text-color: #525A4D;
    --blue-color: #2E90FA;
    --orange-color: #F79009;
    --red-color: #F04438;
    --gray-color: #C7C8CA;
    --heading-color: #86878B;
    --green-color: #12B76A;
}

/* Global Styles */
* {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
}

a:hover {
    text-decoration: none;
}

/* Form Styles */
body .form-control:disabled {
    background-color: var(--bg-color);
}

body[data-bs-theme="dark"] .form-control:disabled {
    background-color: #233041;
    color: #d2d8de;
}
/* font-style */
.f-12{
    font-size: 12px;
}
/* Custom Color Classes */
.c-bg-color {
    background-color: var(--bg-color);
}

.c-text-color {
    color: var(--text-color);
}

.c-blue-color {
    color: var(--blue-color);
}

.c-orange-color {
    color: var(--orange-color);
}

.c-red-color {
    color: var(--red-color);
}

.c-gray-color {
    color: var(--gray-color);
}

.c-heading-color {
    color: var(--heading-color);
}
.c-green-color {
    color: var(--green-color);
}


/* Background and Border Styles */
.bg-color {
    background-color: var(--bg-color);
}
.bg-gray-color {
    background-color: var(--gray-color);
}
.bg-seccond-icon {
    background-color: var(--bg-color);
}
.bg-greend-color {
    background-color: var(--green-color);
}
.bg-blue-color {
    background-color: var(--blue-color);
}
.border-c-gray-color {
    border-color: var(--bg-color);
}

/* Button Styles */
.custom-button,
.custom-button-seccond,
.custom-button-blue,
.custom-button-orange,
.custom-button-green,
.custom-button-red {
    display: inline-block;
    border: none;
    border-radius: 12px;
    padding: 10px 20px;
}

.custom-button {
    background-color: var(--text-color);
    padding: 11px 20px;
    color: white;
}

.custom-button-seccond {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.custom-button span svg,
.custom-button-seccond span svg {
    position: relative;
    left: -5px;
    top: -1.5px;
}

.custom-button-blue {
    padding: 10px;
    background-color: var(--blue-color);
}

.custom-button-orange,
.custom-button-green,
.custom-button-red {
    padding: 10px;
    border-radius: 12px;
    width: 100%;
    display: inline-block;
    text-align: center;
    border: 0;
}

.custom-button-orange {
    background-color: var(--orange-color);
}
.custom-button-green {
    background-color: var(--green-color);
}


.custom-button-red {
    background-color: var(--red-color);
}

/* Title Navigation Styles */
.custom-titlenav {
    font-size: 12px;
    padding-right: var(--tblr-navbar-nav-link-padding-x);
    padding-left: var(--tblr-navbar-nav-link-padding-x);
}

/* Modal Styles */
.modal {
    z-index: 9999;
}

/* Navbar Styles */
.side-navbar {
    top: 60px !important;
}

.red-bullet {
    width: 10px;
    height: 10px;
    display: inline-block;
    background: red;
    position: absolute;
    border-radius: 50px;
    top: -3px;
    right: -3px;
}

.table-detail-invoice td,
.table-detail-invoice b{
    font-size: 12px;
}
/* List style */
.list-style-none{
    list-style: none;
    padding: 0;
}
.list-style-none li{
    padding: 10px 0;
    display: flex;
}

.bedge-red{
    width: fit-content;
    padding: 5px 10px;
    color: white;
    background: #F04438;
    border-radius: 4px;
}
.icon-dashboard{
    background: #BEDDFD;
    border-radius: 50pc;
    margin: 0 auto;
    width: 40px;
    height: 40px;
}
.icon-dashboard svg{
    margin: 10px;
}
.icon-dashboard-blue{
    background: #BEDDFD;
}
.icon-dashboard-brown{
    background: #FDDDB3;
}
.icon-dashboard-green{
    background: #B6E9D1;
}
.dashboard-count h2{
    font-size: 32px;
}
.sidebar-right{
    position: fixed;
}
.list-event li{
    list-style: none;
}

/* Responsive Styles */

@media only screen and (max-width: 1200px) {
    .side-navbar {
        top: 0px !important;
    }
    .sidebar-right{
        position: relative;
    }
}

@media only screen and (min-width: 1200px) {
    .page-wrapper {
        margin-top: 64px;
    }
}