@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

:root {
    /*===== Colors =====*/
    --rewad-orange: rgb(255, 165, 0);
    --rewad-orange-dark: rgb(245, 142, 51);
    --rewad-blue: rgb(45, 73, 157);
    --rewad-dark-blue: rgb(39, 46, 72);
    --rewad-light-blue: rgb(188, 208, 247);

    --rewad-shadow: 0 0 0 1px rgba(43, 45, 80, 0.1), 0 2px 5px 0 rgba(43, 45, 80, 0.08), 0 1px 1.5px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.08);
    --rewad-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);

    /*===== Font and typography =====*/
    --h1-font-size: 1.5rem;
    --large-font-size: 20pt;
    --bigger-font-size: 17pt;
    --big-font-size: 14pt;
    --normal-font-size: 12pt;
    --small-font-size: 10pt;
    --tiny-font-size: 7pt;
}


body {
    font-family: 'Varela Round', sans-serif;
}

a {
    text-decoration: none;
}

img {
    object-fit: cover;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
    color: #25396f;
}

loader {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 99vh;
    width: 99vw;
    z-index: 99;

    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.is-invalid.input-error {
    color: #dc3545;
    font-size: var(--small-font-size);
}


/*=== === === === === === === === === === === === === === === === === === === === ===  BY BOOTSTRAP  */
.text-sm{font-size:.875rem}

.text-orange {
    color: var(--rewad-orange) !important;
}
.text-purple {
    color: #9694ff!important;
}

.text-orange-dark {
    color: var(--rewad-orange-dark) !important;
}

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

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

.link-orange {
    color: rgb(245, 142, 51);
}

.link-orange:focus,
.link-orange:hover {
    color: rgb(225, 135, 0);
}

.link-orange-dark {
    color: #ff4500;
}

.link-orange-dark:hover,
.link-orange-dark:focus {
    color: rgb(230, 40, 0);
}

.bg-orange-light {
    background-color: var(--rewad-orange) !important;
}
.bg-orange-dark {
    background-color: var(--rewad-orange-dark) !important;
}
.bg-danger-trans {
    background-color: rgba(255, 0, 0, .3) !important;
}
.bg-blue-dark {
    background-color: var(--rewad-dark-blue) !important;
}
.bg-blue-light {
    background-color: var(--rewad-light-blue) !important;
}

.btn-orange {
    color: #fff !important;
    background-color: var(--rewad-orange) !important;
    border-color: var(--rewad-orange) !important;
}
.btn-orange:hover {
    color: #fff !important;
    background-color: rgb(255, 125, 0) !important;
    border-color: rgb(255, 125, 0) !important;
}
.btn-orange-dark {
    color: #fff !important;
    background-color: rgb(245, 142, 51) !important;
    border-color: rgb(245, 142, 51) !important;
}
.btn-orange-dark:hover {
    color: #fff !important;
    background-color: rgb(215, 59, 0) !important;
    border-color: rgb(215, 59, 0) !important;
}
.btn-blue-light {
    color: var(--rewad-dark-blue) !important;
    background-color: var(--rewad-light-blue) !important;
    border-color: var(--rewad-light-blue) !important;
}
.btn-blue-light:hover {
    color: var(--rewad-dark-blue) !important;
    background-color: rgb(220, 238, 255) !important;
    border-color: rgb(220, 238, 255) !important;
}
.btn-outline-orange {
    color: var(--rewad-orange) !important;
    border-color: var(--rewad-orange) !important;
}
.btn-outline-orange:hover {
    color: #fff !important;
    background-color: rgb(255, 135, 0);!important;
    border-color: rgb(255, 135, 0);!important;
}
.btn-outline-orange-dark {
    color: var(--rewad-orange-dark) !important;
    border-color: var(--rewad-orange-dark) !important;
}
.btn-outline-orange-dark:hover {
    color: #fff !important;
    background-color: rgb(245, 142, 51) !important;
    border-color: rgb(245, 142, 51) !important;
}
.btn-outline-blue-light {
    color: var(--rewad-light-blue) !important;
    border-color: var(--rewad-light-blue) !important;
}
.btn-outline-blue-light:hover {
    color: var(--rewad-dark-blue) !important;
    background-color: rgb(158, 178, 207) !important;
    border-color: rgb(158, 178, 207) !important;
}

.border-right-0 {
    border-right: 0 !important;
}


.fs-9 {
    font-size: 9px !important
}

.fs-10 {
    font-size: 10px !important
}

.fs-11 {
    font-size: 11px !important
}

.fs-12 {
    font-size: 12px !important
}

.fs-13 {
    font-size: 13px !important
}

.fs-14 {
    font-size: 14px !important
}

.fs-15 {
    font-size: 15px !important
}

.fs-16 {
    font-size: 16px !important
}

.fs-17 {
    font-size: 17px !important
}

.fs-18 {
    font-size: 18px !important
}

.fs-20 {
    font-size: 20px !important
}

.fs-22 {
    font-size: 22px !important
}

.fs-24 {
    font-size: 24px !important
}

.fw-medium {
    font-weight: 500
}

.fw-semibold {
    font-weight: 600
}


.alert-light-info{background-color:#e6fdff}

.divider {display: block;text-align: center;overflow: hidden;margin: 1rem 0}

.divider .divider-text {
    border: 0;
    position: relative;
    display: inline-block;
    padding: 0 1rem;
    background-color: #fff;
}

.divider .divider-text:after, .divider .divider-text:before {content: '';position: absolute;top: 50%;width: 9999px;border-top: 1px solid #dfe3e7}

.divider .divider-text:before {right: 100%}

.divider .divider-text:after {left: 100%}

.divider.divider-left .divider-text {left: 0;float: left;padding-left: 0}

.divider.divider-left-center .divider-text {left: -25%}

.divider.divider-right-center .divider-text {left: 25%}

.divider.divider-right .divider-text {float: right;padding-right: 0}

ul.leaders {
    max-width: 100%;
    padding: 0;
    overflow-x: hidden;
    list-style: none;
}
ul.leaders li:before {
    float: left;
    width: 0;
    white-space: nowrap;
    color: var(--rewad-orange);
    content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
}
ul.leaders span:first-child {
    padding-right: 0.33em;
    background: #272E48;
}
ul.leaders span + span {
    float: right;
    padding-left: 0.33em;
    background: #272E48;
}


#particles-js {
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 0;
    /*background: no-repeat, 50% 50%, linear-gradient(132deg, rgba(45, 73, 157, .3), var(--body-color), rgba(255, 69, 0, .3));
    background-size: 400% 400%;
    animation: Gradient 15s ease infinite;*/
}
@keyframes Gradient {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0 50%;
    }
}