/* Define the Regular 400 weight */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-Regular.ttf') format('truetype'), url('../fonts/Poppins/Poppins-Regular.ttf') format('truetype');
    font-weight: 400; /* Regular */
    font-style: normal;
    font-display: swap; /* Tells the browser how to handle loading */
}

/* Define the Bold 700 weight */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-Bold.ttf') format('truetype'), url('../fonts/Poppins/Poppins-Bold.ttf') format('truetype');
    font-weight: 700; /* Bold */
    font-style: normal;
    font-display: swap;
}

/* ------------------------------------------------------------------- */
/* GSEC BRAND COLOR DEFINITIONS */
/* ------------------------------------------------------------------- */

:root {
    --gsec-navy: #012B50;
    --gsec-blue-dark: #0893FD;
    --gsec-blue-light: #31C6FD;
    --gsec-mint: #54F9D1;
    --gsec-green: #22BA41;
    --gsec-white: #FFFFFF;
}


.pagination-ys {
    /*display: inline-block;*/
    padding-left: 0;
    border-radius: 4px;
    position: relative;
    top: 5%;
}

    .pagination-ys table > tbody > tr > td {
        display: inline;
    }

        .pagination-ys table > tbody > tr > td > a,
        .pagination-ys table > tbody > tr > td > span {
            position: relative;
            float: left;
            padding: 8px 12px;
            line-height: 1.42857143;
            text-decoration: none;
            color: #278886;
            background-color: #ffffff;
            border: 1px solid #dddddd;
            margin-left: -1px;
        }

        .pagination-ys table > tbody > tr > td > span {
            position: relative;
            float: left;
            padding: 8px 12px;
            line-height: 1.42857143;
            text-decoration: none;
            margin-left: -1px;
            z-index: 0;
            color: #aea79f;
            background-color: #f5f5f5;
            border-color: #dddddd;
            cursor: default;
        }

        .pagination-ys table > tbody > tr > td:first-child > a,
        .pagination-ys table > tbody > tr > td:first-child > span {
            margin-left: 0;
            border-bottom-left-radius: 4px;
            border-top-left-radius: 4px;
        }

        .pagination-ys table > tbody > tr > td:last-child > a,
        .pagination-ys table > tbody > tr > td:last-child > span {
            border-bottom-right-radius: 4px;
            border-top-right-radius: 4px;
        }

        .pagination-ys table > tbody > tr > td > a:hover,
        .pagination-ys table > tbody > tr > td > span:hover,
        .pagination-ys table > tbody > tr > td > a:focus,
        .pagination-ys table > tbody > tr > td > span:focus {
            color: #032336;
            background-color: #eeeeee;
            border-color: #dddddd;
        }

/* ------------------------------------------------------------------- */
/* 1. STANDARD UTILITIES (bg-*, text-*, border-*) */
/* ------------------------------------------------------------------- */

/* BACKGROUNDS */
.bg-gsec-navy {
    background-color: var(--gsec-navy) !important;
}

.bg-gsec-blue-dark {
    background-color: var(--gsec-blue-dark) !important;
}

.bg-gsec-blue-light {
    background-color: var(--gsec-blue-light) !important;
}

.bg-gsec-mint {
    background-color: var(--gsec-mint) !important;
}

.bg-gsec-green {
    background-color: var(--gsec-green) !important;
}

/* TEXT COLORS */
.text-gsec-navy {
    color: var(--gsec-navy) !important;
}

.text-gsec-blue-dark {
    color: var(--gsec-blue-dark) !important;
}

.text-gsec-blue-light {
    color: var(--gsec-blue-light) !important;
}

.text-gsec-mint {
    color: var(--gsec-mint) !important;
}

.text-gsec-green {
    color: var(--gsec-green) !important;
}

.text-gsec-white {
    color: var(--gsec-white) !important;
}

/* BORDERS */
.border-gsec-navy {
    border-color: var(--gsec-navy) !important;
}

.border-gsec-blue-dark {
    border-color: var(--gsec-blue-dark) !important;
}

.border-gsec-blue-light {
    border-color: var(--gsec-blue-light) !important;
}

.border-gsec-mint {
    border-color: var(--gsec-mint) !important;
}

.border-gsec-green {
    border-color: var(--gsec-green) !important;
}

.border-gsec-white {
    border-color: var(--gsec-white) !important;
}


/* ------------------------------------------------------------------- */
/* 2. SUBTLE VARIATIONS (-subtle) */
/* ------------------------------------------------------------------- */

/* SUBTLE BACKGROUNDS (Uses RGBA transparency for a light pastel effect) */
.bg-gsec-navy-subtle {
    background-color: rgba(1, 43, 80, 0.08) !important;
}

.bg-gsec-blue-dark-subtle {
    background-color: rgba(8, 147, 253, 0.1) !important;
}

.bg-gsec-blue-light-subtle {
    background-color: rgba(49, 198, 253, 0.15) !important;
}

.bg-gsec-mint-subtle {
    background-color: rgba(84, 249, 209, 0.2) !important;
}

.bg-gsec-green-subtle {
    background-color: rgba(34, 186, 65, 0.12) !important;
}

/* SUBTLE TEXT COLORS (Primary color with lower opacity for text on subtle backgrounds) */
.text-gsec-navy-subtle {
    color: var(--gsec-navy) !important;
    opacity: 0.7;
}

.text-gsec-blue-dark-subtle {
    color: var(--gsec-blue-dark) !important;
    opacity: 0.7;
}

.text-gsec-blue-light-subtle {
    color: var(--gsec-blue-light) !important;
    opacity: 0.7;
}

.text-gsec-mint-subtle {
    color: var(--gsec-mint) !important;
    opacity: 0.7;
}

.text-gsec-green-subtle {
    color: var(--gsec-green) !important;
    opacity: 0.7;
}

/* SUBTLE BORDERS */
.border-gsec-navy-subtle {
    border-color: rgba(1, 43, 80, 0.2) !important;
}

.border-gsec-blue-dark-subtle {
    border-color: rgba(8, 147, 253, 0.3) !important;
}

.border-gsec-blue-light-subtle {
    border-color: rgba(49, 198, 253, 0.4) !important;
}

.border-gsec-mint-subtle {
    border-color: rgba(84, 249, 209, 0.5) !important;
}

.border-gsec-green-subtle {
    border-color: rgba(34, 186, 65, 0.35) !important;
}


/* ------------------------------------------------------------------- */
/* 3. ALERT VARIATIONS (e.g., .alert-gsec-green) */
/* This is necessary for full integration of brand colors into Alert components. */
/* ------------------------------------------------------------------- */

.alert-gsec-navy {
    color: var(--gsec-navy);
    background-color: var(--gsec-navy-subtle, rgba(1, 43, 80, 0.08));
    border-color: var(--gsec-navy-subtle, rgba(1, 43, 80, 0.2));
}

.alert-gsec-blue-dark {
    color: var(--gsec-blue-dark);
    background-color: var(--gsec-blue-dark-subtle, rgba(8, 147, 253, 0.1));
    border-color: var(--gsec-blue-dark-subtle, rgba(8, 147, 253, 0.3));
}

.alert-gsec-blue-light {
    color: var(--gsec-blue-light);
    background-color: var(--gsec-blue-light-subtle, rgba(49, 198, 253, 0.15));
    border-color: var(--gsec-blue-light-subtle, rgba(49, 198, 253, 0.4));
}

.alert-gsec-mint {
    color: var(--gsec-mint);
    background-color: var(--gsec-mint-subtle, rgba(84, 249, 209, 0.2));
    border-color: var(--gsec-mint-subtle, rgba(84, 249, 209, 0.5));
}

.alert-gsec-green {
    color: var(--gsec-green);
    background-color: var(--gsec-green-subtle, rgba(34, 186, 65, 0.12));
    border-color: var(--gsec-green-subtle, rgba(34, 186, 65, 0.35));
}


/* ------------------------------------------------------------------- */
/* 4. BUTTON VARIATIONS (.btn-gsec-* and .btn-outline-gsec-*) */
/* ------------------------------------------------------------------- */

/* --- Base Button Styles (Solid) --- */

.btn-gsec-navy {
    color: var(--gsec-white);
    background-color: var(--gsec-navy);
    border-color: var(--gsec-navy);
}

    .btn-gsec-navy:hover, .btn-gsec-navy:active, .btn-gsec-navy:focus {
        color: var(--gsec-white);
        background-color: #001e3b; /* Slightly darker shade for hover/active */
        border-color: #001e3b;
    }
/* Repeat for all other standard colors (Dark Blue, Light Blue, Mint, Green) */

.btn-gsec-blue-dark {
    color: var(--gsec-white);
    background-color: var(--gsec-blue-dark);
    border-color: var(--gsec-blue-dark);
}

    .btn-gsec-blue-dark:hover, .btn-gsec-blue-dark:active, .btn-gsec-blue-dark:focus {
        color: var(--gsec-white);
        background-color: #0077dd;
        border-color: #0077dd;
    }

.btn-gsec-blue-light {
    color: var(--gsec-navy); /* Use high-contrast navy text */
    background-color: var(--gsec-blue-light);
    border-color: var(--gsec-blue-light);
}

    .btn-gsec-blue-light:hover, .btn-gsec-blue-light:active, .btn-gsec-blue-light:focus {
        color: var(--gsec-navy);
        background-color: #00b0ff;
        border-color: #00b0ff;
    }

.btn-gsec-mint {
    color: var(--gsec-navy);
    background-color: var(--gsec-mint);
    border-color: var(--gsec-mint);
}

    .btn-gsec-mint:hover, .btn-gsec-mint:active, .btn-gsec-mint:focus {
        color: var(--gsec-navy);
        background-color: #27d4b0;
        border-color: #27d4b0;
    }

.btn-gsec-green {
    color: var(--gsec-white);
    background-color: var(--gsec-green);
    border-color: var(--gsec-green);
}

    .btn-gsec-green:hover, .btn-gsec-green:active, .btn-gsec-green:focus {
        color: var(--gsec-white);
        background-color: #1a9034;
        border-color: #1a9034;
    }


/* --- Outline Button Styles --- */

.btn-outline-gsec-navy {
    color: var(--gsec-navy);
    border-color: var(--gsec-navy);
}

    .btn-outline-gsec-navy:hover, .btn-outline-gsec-navy:active, .btn-outline-gsec-navy:focus {
        color: var(--gsec-white);
        background-color: var(--gsec-navy);
        border-color: var(--gsec-navy);
    }

.btn-outline-gsec-blue-dark {
    color: var(--gsec-blue-dark);
    border-color: var(--gsec-blue-dark);
}

    .btn-outline-gsec-blue-dark:hover, .btn-outline-gsec-blue-dark:active, .btn-outline-gsec-blue-dark:focus {
        color: var(--gsec-white);
        background-color: var(--gsec-blue-dark);
        border-color: var(--gsec-blue-dark);
    }

.btn-outline-gsec-blue-light {
    color: var(--gsec-blue-light);
    border-color: var(--gsec-blue-light);
}

    .btn-outline-gsec-blue-light:hover, .btn-outline-gsec-blue-light:active, .btn-outline-gsec-blue-light:focus {
        color: var(--gsec-navy);
        background-color: var(--gsec-blue-light);
        border-color: var(--gsec-blue-light);
    }

.btn-outline-gsec-mint {
    color: var(--gsec-mint);
    border-color: var(--gsec-mint);
}

    .btn-outline-gsec-mint:hover, .btn-outline-gsec-mint:active, .btn-outline-gsec-mint:focus {
        color: var(--gsec-navy);
        background-color: var(--gsec-mint);
        border-color: var(--gsec-mint);
    }

.btn-outline-gsec-green {
    color: var(--gsec-green);
    border-color: var(--gsec-green);
}

    .btn-outline-gsec-green:hover, .btn-outline-gsec-green:active, .btn-outline-gsec-green:focus {
        color: var(--gsec-white);
        background-color: var(--gsec-green);
        border-color: var(--gsec-green);
    }

* {
    outline: none;
}

body {
    font-family: 'Poppins', sans-serif !important;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}