:root {
    --color-primary: #23767C;
    --color-light: rgba(248, 249, 250, 1);
    --color-whitesmoke: #F5F5F5FF;
    --color-secondary: #F7A768;
    --color-tertiary: #F8D9A3;
    --color-primary-light-2: #ebf8f9;
    --color-primary-light-1: #38bdc7;
    --color-danger-light: rgba(220, 53, 69, 0.05);
    --color-success-light: rgba(40, 167, 69, 0.05);
    --color-info-light: rgba(23, 162, 184, 0.05);
    --color-warning-light: rgba(255, 193, 7, 0.05);
    --color-primary-light: rgba(35, 118, 124, 0.05);
}

.pc-container {
    /*height: 150vh;*/
    /*margin-bottom: 500px;*/
}

.text-s-primary {
    color: var(--color-primary) !important;
}

.text-s-whitesmoke {
    color: var(--color-whitesmoke) !important;
}

.bg-s-whitesmoke {
    background-color: var(--color-whitesmoke) !important;
}

.bg-s-primary {
    background-color: var(--color-primary) !important;
}

.text-s-secondary {
    color: var(--color-secondary) !important;
}

.bg-s-secondary {
    background-color: var(--color-secondary) !important;
}

.text-s-tertiary {
    color: var(--color-tertiary) !important;
}

.bg-s-tertiary {
    background-color: var(--color-tertiary) !important;
}

.text-s-primary-light-2 {
    color: var(--color-primary-light-2) !important;
}

.bg-s-primary-light-2 {
    background-color: var(--color-primary-light-2) !important;
}

.text-s-primary-light-1 {
    color: var(--color-primary-light-1) !important;
}

.bg-s-primary-light-1 {
    background-color: var(--color-primary-light-1) !important;
}

.border-s-primary {
    border-color: var(--color-primary) !important;
}

.border-s-secondary {
    border-color: var(--color-secondary) !important;
}

.border-s-tertiary {
    border-color: var(--color-tertiary) !important;
}

.border-s-whitesmoke {
    border-color: var(--color-whitesmoke) !important;
}

.border-s-primary-light-2 {
    border-color: var(--color-primary-light-2) !important;
}

.border-s-primary-light-1 {
    border-color: var(--color-primary-light-1) !important;
}

.btn-outline-s-primary {
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    background: transparent;
}
.btn-outline-s-primary:hover, .btn-outline-s-primary:focus {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.shadow-sm-hover, .shadow-md-hover, .shadow-lg-hover {
    box-shadow: none !important;
}

.shadow-sm-hover:hover {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.shadow-md-hover:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.shadow-lg-hover:hover {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

.hide {
    display: none !important;
}

.pointer {
    cursor: pointer !important;
}

.text-bold-hover:hover {
    font-weight: bold !important;
}

.bold {
    font-weight: bold !important;
}

.text-underline {
    text-decoration: underline !important;
}

.large-textarea {
    width: 100%;
    height: 150px;
}

.font-x-small {
    font-size: x-small !important;
}

.font-small {
    font-size: small !important;
}

.font-medium {
    font-size: medium !important;
}

.font-large {
    font-size: large !important;
}

.font-x-large {
    font-size: x-large !important;
}

.font-xx-large {
    font-size: xx-large !important;
}

.font-xxx-large {
    font-size: xxx-large !important;
}

.w-49 {
    width: 49% !important;
}

.w-45 {
    width: 45% !important;
}

.w-99 {
    width: 99% !important;
}

.badge-pulse {
    overflow: visible;
    position: relative;
}

.badge-pulse:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: inherit;
    border-radius: inherit;
    transition: opacity .3s, transform .3s;
    animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
    z-index: -1;
}

@keyframes pulse-animation {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0;
        transform: scale(1.5);
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

.file-preview-iframe {
    width: 100% !important;
    height: 80vh !important;
}

.card-hover-action:hover {
    border: 3px solid var(--color-primary) !important;
}

.menu-option-margin {
    margin-top: -5px;
}

.float-menu-option-left {
    /*direction: rtl;*/
}

/*Notice Alerts*/
.notice {
    padding: 15px;
    /*background-color: #fafafa;*/
    border-left: 6px solid #7f7f84;
    margin-bottom: 10px;
    /*-webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);*/
    /*-moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);*/
    /*box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);*/
}

.notice-sm {
    padding: 10px;
    font-size: 80%;
}

.notice-lg {
    padding: 35px;
    font-size: large;
}

.notice-primary {
    border-color: #23767C;
    background: var(--color-primary-light);
}

.notice-success {
    border-color: #80D651;
    background: var(--color-success-light);
}

.notice-success > strong {
    color: #80D651;
}

.notice-info {
    border-color: #45ABCD;
    background: var(--color-info-light);
}

.notice-info > strong {
    color: #45ABCD;
}

.notice-light {
    border-color: #4d4d4d;
    background: var(--color-light);
}

.notice-light > strong {
    color: #4d4d4d;
}

.notice-warning {
    border-color: #FEAF20;
    background: var(--color-warning-light);
}

.notice-warning > strong {
    color: #FEAF20;
}

.notice-danger {
    border-color: #d73814;
    background: var(--color-danger-light);

}

.notice-danger > strong {
    color: #d73814;
}

/* ===== Custom scrollbars (system-wide) ===== */
:root {
    --scrollbar-track: #eef1f2;
    --scrollbar-thumb: #b9c4c6;
    --scrollbar-thumb-hover: var(--color-primary);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* WebKit / Chromium / Edge */
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background-color 0.2s ease;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

/* Subtle track on the main scroll containers */
body::-webkit-scrollbar-track,
.pc-container::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.dataTables_scrollBody::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 10px;
}