@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800;900&display=swap');

:root {
    /* --color-primary: #2c3e50; */
    /* --color-primary: #355A9D; */
    --color-primary: #395950;
    --color-primary-t: #294940cc;
    --color-primary-dark: #388E3C;
    --color-primary-dark-t: #287E2Ccc;
    --color-primary-alt: #046262;
    --color-primary-alt-2:#318768;
    /* --color-secondary: #E67E22; */
    --color-secondary: #ffcf83;
    /* --color-secondary: #FFD580; */
    --color-secondary-light: #ffcf8333;
    --color-secondary-dark: #8f5f23;
    --color-accent: #ECF0F1;
    --text-primary: #2C3E50;
    --text-secondary: #5F6C6D;
    --text-secondary-light: #7F8C8D11;
    --white: #FFFFFF;
    --error: #E74C3C;
    --success: #27AE60;
    --success-light: #27AE6022;
    /* --success: #34C759; */

    --color-text: #333333;
    --color-text-light: #666666;
    --color-background: #F5F5F5;
    --color-white: #FFFFFF;
    --color-gray: #EEEEEE;
    --color-border: #DDDDDD;
    --color-error: #F44336;
    --color-success: #4CAF50;
}

.success{
    color: var(--success);
}

.color-primary{
    color: var(--color-primary);
}

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

* {
   
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

body {
    margin: 0;
    background-color: rgb(248 249 250);
    color: var(--text-primary);
    line-height: 1.6;
}

.text-center{
    text-align:center;
}

.full{
    width:100%;
}

.btn {
    padding: 8px 24px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    color: var(--white);
    text-align:center;
}

.btn:hover {
    filter:brightness(90%)
}

.btn.primary {
    background-color: var(--color-primary);
}


.btn.secondary {
    background-color: var(--color-secondary);
    border:0.5px solid #ddd;
    color:var(--color-primary);
}

a{
    cursor:pointer;
    color:inherit;
    text-decoration:none;
}

.row{
    display:flex;
}

.col{
    display:flex;
    flex-direction:column;
}

.flex-center{
    display:flex;
    align-items:center;
    justify-content:center;
}

.i-flex{
    display:inline-flex;
}

.ai-c{
    align-items:center;
}

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

.jc-sb{
    justify-content:space-between;
}


.jc-se{
    justify-content:space-evenly;
}

.g-02{
    gap:0.2em;
}
.g-05{
    gap:0.5em;
}
.g-1{
    gap:1em;
}
.g-2{
    gap:2em;
}
.g-3{
    gap:2em;
}

/* Margin xy */
.m-0{
    margin:0;
}

/* Margin top */
.mt-1{
    margin-top:1em;
}

.mt-2{
    margin-top:2em;
}

.mt-3{
    margin-top:3em;
}


 /*Horizontal margin*/
.hm-1
{
    margin:0 1em;
}

/* Vertical margin */
.vm-1
{
    margin:1em 0;
}

/* Vertical padding */
.vp-1
{
    padding:1em 0;
}

.p-1{
    padding:1em;
}

.ls{
    letter-spacing:0.15em;
}

.lgs{
    display:none !important;
}

.clickable{
    cursor:pointer;
}

select, input:not(input[type="checkbox"]){
    /* height:3em; */
    /* width:100%; */
    color:inherit;
    /* padding-left:2em; */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

@media screen and (min-width: 768px) {
    .sms{
        display:none !important;
    }
    .lgs{
        display:block !important;
    }
}


.toggleSwitch{
    width:var(--width, 3em);
    aspect-ratio:2/1;
    background: grey;
    position:relative;
    border-radius:3em;
    transition:0.5s all;
}

.toggleSwitchBall{
    background: #fff;
    border-radius:100%;
    height:85%;
    aspect-ratio:1;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left:3%;
    transition:0.5s all;
}

.toggleSwitch.on{
    background:var(--color-primary);
}

.toggleSwitch.on .toggleSwitchBall{
    left:auto;
    right:3%;
}

.notificationSwitch small{
    width:50%;
}

/* Add styles for pagination and disabled items */
.admin-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
    gap: 0.5rem;
}

.admin-pagination-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--color-primary);
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.admin-pagination-item:hover:not(.active, .disabled, .dots) {
    background-color: var(--color-primary-light);
}

.admin-pagination-item.active {
    background-color: var(--color-primary);
    color: white;
    cursor: default;
}

.admin-pagination-item.disabled {
    color: #ccc;
    cursor: not-allowed;
}

.admin-pagination-item.dots {
    cursor: default;
}

/* Add styles for clickable elements */
.clickable {
    cursor: pointer;
}