/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hubot+Sans:ital,wght@0,200..900;1,200..900&display=swap');

/* Font Variables */
:root {
    --font-nunito: 'Nunito', sans-serif;
    --font-montserrat: 'Montserrat', sans-serif;
    --font-opensans: 'Open Sans', sans-serif;
    --font-notosans: 'Noto Sans', sans-serif;
    /* --font-ubuntu: 'Ubuntu', sans-serif; */
    --font-ubuntu: 'Hubot Sans', sans-serif;
    --font-hostgrotesk: 'Host Grotesk', sans-serif;
    --font-roboto: 'Roboto', sans-serif;
    --font-hubot: 'Hubot Sans', sans-serif;
    --font-webfont: webfont;
    --card-description-color: #495057;
    --input-bg-color: #f8f9fa;
    /* Standardized border radius values */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-pill: 50px;
    --border-radius-circle: 50%;
    --app-border-radius: 8px;
}

div, .searchBar{
    border-radius: var(--app-border-radius);
}

/* btn-secondary styling to match secondarybtnstyle */
.btn-secondary {
    border-radius: var(--app-border-radius) !important;
    background-color: #fff !important;
    margin: 5px auto;
    color: var(--bluelevel01);
    border: 1px solid var(--bluelevel01);
    font-weight: 500;
    min-width: 150px;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    font-weight: bold;
    color: var(--bluelevel01);
    background-color: #fff !important;
    border-color: var(--bluelevel01);
    transform: translateY(-1px);
}

.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:focus:active {
    background-color: #fff !important;
    color: var(--bluelevel01);
    border: 1px solid var(--bluelevel01);
    box-shadow: 0 0 0 0.2rem rgba(13, 52, 81, 0.10);
}

/* btn-primary styling to match btnstyle */
.btn-primary {
    border-radius: var(--app-border-radius) !important;
    background-color: rgba(13, 52, 81, 1) !important;
    margin: 5px auto;
    color: #ffffff;
    border: 1px solid rgba(13, 52, 81, 1);
    font-weight: 500;
    min-width: 150px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: rgba(13, 52, 81, 0.9) !important;
    color: #ffffff;
    border-color: rgba(13, 52, 81, 1);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(13, 52, 81, 0.3);
}

/* Simple grey background for all inputs */
input,
textarea,
select,
.form-control,
.form-select,
.input,
.loginInput,
.searchInputFeild,
.custom-file-input,
.dateinput {
    background-color: var(--input-bg-color) !important;
}


/* Target the search field within the Select2 dropdown */
#lang + .select2-container .select2-selection--multiple .select2-search .select2-search__field {
    background: white !important;
}