/*
    Its a CSS file for the Application. It contains styles for the entire application, including layout, typography, colors, and other visual elements. The styles defined in this file are applied globally across all pages of the application to ensure a consistent look and feel.
    Its new Implementation of the Application.css file, which is used to style the web application. It includes various CSS rules and properties that define the appearance of different elements on the web pages. The styles in this file are applied globally, meaning they affect all pages and components of the application, ensuring a consistent and cohesive design throughout the user interface.
    its for one place very common css
    */



/* ========================================================================== */
/* BUTTONS - SUCCESS */
/* ========================================================================== */

.btn-success {
    background: linear-gradient(135deg, #3f6b4c 0%, #2d4a35 100%);
    color: white;
    border: none;
    padding: 6px 16px;
    border-radius: 18px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.3px;
    transition: all 0.25s ease;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(63, 107, 76, 0.3);
}

    .btn-success:hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(63, 107, 76, 0.4);
    }
    .btn-success:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(63, 107, 76, 0.3);
    }



/* ========================================================================== */
/* BUTTONS - light */
/* ========================================================================== */
.btn-light {
    background: linear-gradient(135deg, #ffffff 0%, #e8e8e8 100%);
    color: #2d2d2d;
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 6px 16px;
    border-radius: 18px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.3px;
    transition: all 0.25s ease;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

    .btn-light:hover {
        background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(0, 0, 0, 0.12);
    }
    .btn-light:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }



/* ========================================================================== */
/* BUTTONS - warning */
/* ========================================================================== */
.btn-warning {
    background: linear-gradient(135deg, #e0a52c 0%, #b8791f 100%);
    color: white;
    border: none;
    padding: 6px 16px;
    border-radius: 18px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.3px;
    transition: all 0.25s ease;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(224, 165, 44, 0.3);
}

    .btn-warning:hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(224, 165, 44, 0.4);
    }
    .btn-warning:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(224, 165, 44, 0.3);
    }


/* ========================================================================== */
/* BUTTONS - primary */
/* ========================================================================== */
.btn-primary {
    background: linear-gradient(135deg, #3f6ba5 0%, #2d4a75 100%);
    color: white;
    border: none;
    padding: 6px 16px;
    border-radius: 18px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.3px;
    transition: all 0.25s ease;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(63, 107, 165, 0.3);
}

    .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(63, 107, 165, 0.4);
    }
    .btn-primary:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(63, 107, 165, 0.3);
    }


/* ========================================================================== */
/* BUTTONS - dark */
/* ========================================================================== */
.btn-dark {
    background: linear-gradient(135deg, #3a3a3a 0%, #1a1a1a 100%);
    color: white;
    border: none;
    padding: 6px 16px;
    border-radius: 18px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.3px;
    transition: all 0.25s ease;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

    .btn-dark:hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(0, 0, 0, 0.4);
    }
    .btn-dark:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }



/* ========================================================================== */
/* BUTTONS - secondary */
/* ========================================================================== */
.btn-secondary {
    background: linear-gradient(135deg, #7a828e 0%, #5a616b 100%);
    color: white;
    border: none;
    padding: 6px 16px;
    border-radius: 18px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.3px;
    transition: all 0.25s ease;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(90, 97, 107, 0.3);
}

    .btn-secondary:hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(90, 97, 107, 0.4);
    }
    .btn-secondary:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(90, 97, 107, 0.3);
    }


/* ========================================================================== */
/* BUTTONS - info */
/* ========================================================================== */
.btn-info {
    background: linear-gradient(135deg, #2f9bb0 0%, #1f6f80 100%);
    color: white;
    border: none;
    padding: 6px 16px;
    border-radius: 18px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.3px;
    transition: all 0.25s ease;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(31, 111, 128, 0.3);
}

    .btn-info:hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(31, 111, 128, 0.4);
    }
    .btn-info:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(31, 111, 128, 0.3);
    }



/* ========================================================================== */
/* BUTTONS - danger */
/* ========================================================================== */
.btn-danger {
    background: linear-gradient(135deg, #c0392b 0%, #8e2a20 100%);
    color: white;
    border: none;
    padding: 6px 16px;
    border-radius: 18px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.3px;
    transition: all 0.25s ease;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(192, 57, 43, 0.3);
}

    .btn-danger:hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(192, 57, 43, 0.4);
    }
    .btn-danger:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(192, 57, 43, 0.3);
    }





/* ========================================================================== */
/* btn-outline-primary */
/* ========================================================================== */
.btn-outline-primary {
    background: transparent;
    color: #3f6ba5;
    border: 1.5px solid #3f6ba5;
    padding: 6px 16px;
    border-radius: 18px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.3px;
    transition: all 0.25s ease;
    cursor: pointer;
    box-shadow: none;
}

    .btn-outline-primary:hover {
        background: linear-gradient(135deg, #3f6ba5 0%, #2d4a75 100%);
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(63, 107, 165, 0.4);
    }

    .btn-outline-primary:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(63, 107, 165, 0.3);
    }


/* ========================================================================== */
/* btn-outline-info */
/* ========================================================================== */
.btn-outline-info {
    background: transparent;
    color: #1f6f80;
    border: 1.5px solid #1f6f80;
    padding: 6px 16px;
    border-radius: 18px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.3px;
    transition: all 0.25s ease;
    cursor: pointer;
    box-shadow: none;
}

    .btn-outline-info:hover {
        background: linear-gradient(135deg, #2f9bb0 0%, #1f6f80 100%);
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(31, 111, 128, 0.4);
    }
    
    .btn-outline-info:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(31, 111, 128, 0.3);
    }



/* ========================================================================== */
/* BUTTONS - secondary */
/* ========================================================================== */
.btn-outline-success {
    background: transparent;
    color: #3f6b4c;
    border: 1.5px solid #3f6b4c;
    padding: 6px 16px;
    border-radius: 18px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.3px;
    transition: all 0.25s ease;
    cursor: pointer;
    box-shadow: none;
}

    .btn-outline-success:hover {
        background: linear-gradient(135deg, #3f6b4c 0%, #2d4a35 100%);
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(63, 107, 76, 0.4);
    }

    .btn-outline-success:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(63, 107, 76, 0.3);
    }


/* ========================================================================== */
/* BUTTONS - secondary */
/* ========================================================================== */
.btn-outline-warning {
    background: transparent;
    color: #b8791f;
    border: 1.5px solid #b8791f;
    padding: 6px 16px;
    border-radius: 18px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.3px;
    transition: all 0.25s ease;
    cursor: pointer;
    box-shadow: none;
}

    .btn-outline-warning:hover {
        background: linear-gradient(135deg, #e0a52c 0%, #b8791f 100%);
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(224, 165, 44, 0.4);
    }

    .btn-outline-warning:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(224, 165, 44, 0.3);
    }


/* ========================================================================== */
/* btn-outline-danger */
/* ========================================================================== */
.btn-outline-danger {
    background: transparent;
    color: #c0392b;
    border: 1.5px solid #c0392b;
    padding: 6px 16px;
    border-radius: 18px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.3px;
    transition: all 0.25s ease;
    cursor: pointer;
    box-shadow: none;
}

    .btn-outline-danger:hover {
        background: linear-gradient(135deg, #c0392b 0%, #8e2a20 100%);
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(192, 57, 43, 0.4);
    }
    
    .btn-outline-danger:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(192, 57, 43, 0.3);
    }



/* ========================================================================== */
/* BUTTONS - secondary */
/* ========================================================================== */
.btn-outline-secondary {
    background: transparent;
    color: #5a616b;
    border: 1.5px solid #5a616b;
    padding: 6px 16px;
    border-radius: 18px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.3px;
    transition: all 0.25s ease;
    cursor: pointer;
    box-shadow: none;
}

    .btn-outline-secondary:hover {
        background: linear-gradient(135deg, #7a828e 0%, #5a616b 100%);
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(90, 97, 107, 0.4);
    }

    .btn-outline-secondary:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(90, 97, 107, 0.3);
    }




/* ========================================================================== */
/* btn-outline-dark */
/* ========================================================================== */
.btn-outline-dark {
    background: transparent;
    color: #1a1a1a;
    border: 1.5px solid #1a1a1a;
    padding: 4px 13px !important;
    border-radius: 18px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.3px;
    transition: all 0.25s ease;
    cursor: pointer;
    box-shadow: none;
}

    .btn-outline-dark:hover {
        background: linear-gradient(135deg, #3a3a3a 0%, #1a1a1a 100%);
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(0, 0, 0, 0.4);
    }

    .btn-outline-dark:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }




/* ========================================================================== */
/* form-control */
/* ========================================================================== */

/*.form-control {
    background: #f0f7f2;
    color: #2d2d2d;
    border: 1.5px solid #3f6b4c;
    padding: 5px 16px;    Reduced from 8px to 4px 
    border-radius: 15px;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0.2px;
    transition: all 0.25s ease;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

    .form-control:hover {
        border-color: #2d4a35;
    }

    .form-control:focus {
        background: #ffffff;
        border-color: #2d4a35;
        box-shadow: 0 0 0 3px rgba(63, 107, 76, 0.15);
    }

    .form-control::placeholder {
        color: #7a9182;
    }

    .form-control:disabled {
        background: #f5f5f5;
        color: #a0a0a0;
        cursor: not-allowed;
    }*/