:root {
    --bg-theme-50: #eff6ff;
    --bg-theme-100: #c3dbfd;
    --bg-theme-200: #0bb1fd;
    --bg-theme-300: #188af2;
    --bg-theme-400: #0e6bb8;
    --bg-theme-500: #0b4f8c;
    --bg-theme-600: #0a3d6b;
    --bg-theme-700: #0a2b4c;
    --bg-theme-800: #0a1b3a;
    --bg-theme-900: #0a0d2b;
    --bg-theme-950: #0a0b1e;
    /* --bg-theme-400: #0e2148;
    --primaryColor: #0031a0; */
}
.btn-theme {
    background-color: var(--bg-theme-300);
    color: #fff;
    border: 1px solid var(--bg-theme-300);
}

body {
    /* background-color: #f1f5f9; */
    background-color: var(--bg-theme-50);
}

.text-theme {
    color: var(--bg-theme-400) !important;
}

/* .btn-theme {
    background-color: var(--bg-theme-300) !important;
    color: white !important;
}

.btn-theme:focus, .btn-theme:active, .btn-theme:hover {
    background-color: var(--bg-theme-400) !important;
} */

.btn-outline-theme {
    background-color: transparent;
    color: var(--bg-theme-300) !important;
    border: 2px solid var(--bg-theme-400) !important;
}

.btn-outline-theme:hover {
    background-color: var(--bg-theme-300) !important;
    color: white;
}

.btn-outline-theme:focus, .btn-outline-theme:active {
    background-color: var(--bg-theme-300) !important;
    border-color: var(--bg-theme-400) !important;
    color: white;
}

.bg-theme-50 {
    background-color: var(--bg-theme-50) !important;
}
.bg-theme-100 {
    background-color: var(--bg-theme-100) !important;
}
.bg-theme-200 {
    background-color: var(--bg-theme-200) !important;
}
.bg-theme-300 {
    background-color: var(--bg-theme-300) !important;
}
.bg-theme-400 {
    background-color: var(--bg-theme-400) !important;
}
.bg-theme-500 {
    background-color: var(--bg-theme-500) !important;
}
.bg-theme-600 {
    background-color: var(--bg-theme-600) !important;
}
.bg-theme-700 {
    background-color: var(--bg-theme-700) !important;
}
.bg-theme-800 {
    background-color: var(--bg-theme-800) !important;
}
.bg-theme-900 {
    background-color: var(--bg-theme-900) !important;
}
.bg-theme-950 {
    background-color: var(--bg-theme-950) !important;
}


.btn-theme {
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    outline: 0px;
    border: 0px;
    margin: 0px;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    appearance: none;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.75;
    min-width: 64px;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(rgb(93, 233, 232) 0%, rgb(10, 174, 255) 50%, rgb(32, 146, 255) 100%);
    color: rgb(255, 255, 255);
    fill: rgb(255, 255, 255);
    z-index: 1;
    overflow: hidden;
    transition: 0.3s ease-in-out;
    border-radius: 12px;
    text-transform: uppercase;
    box-shadow: none;
}

.btn-theme:hover, .btn-theme:focus, .btn-theme:active {
    background: linear-gradient(rgb(10, 174, 255) 0%, rgb(32, 146, 255) 50%, rgb(93, 233, 232) 100%);
    color: rgb(255, 255, 255);
    fill: rgb(255, 255, 255);
    z-index: 1;
    overflow: hidden;
    transition: 0.3s ease-in-out;
}