/**
 *
 * Referral theme
 *
 * @author Akhil Kokani
 */

:root {
    --jo-primary-rgb: rgb(0, 33, 92);
    --jo-primary-dark-rgb: rgb(11, 26, 52);
    --jo-secondary-rgb: rgb(255, 162, 62);
    --jo-secondary-dark-rgb: rgb(220, 116, 4);
    --jo-yellow-rgb: rgb(248, 192, 0);

    --jo-primary-rgb-1: rgba(0, 33, 92, 0.1);
    --jo-primary-rgb-2: rgba(0, 33, 92, 0.2);
    --jo-primary-rgb-3: rgba(0, 33, 92, 0.3);
    --jo-primary-rgb-4: rgba(0, 33, 92, 0.4);
    --jo-primary-rgb-5: rgba(0, 33, 92, 0.5);
    --jo-primary-rgb-6: rgba(0, 33, 92, 0.6);
    --jo-primary-rgb-7: rgba(0, 33, 92, 0.7);
    --jo-primary-rgb-8: rgba(0, 33, 92, 0.8);
    --jo-primary-rgb-9: rgba(0, 33, 92, 0.9);

    --jo-secondary-rgb-1: rgba(255, 162, 62, 0.1);
    --jo-secondary-rgb-2: rgba(255, 162, 62, 0.2);
    --jo-secondary-rgb-3: rgba(255, 162, 62, 0.3);
    --jo-secondary-rgb-4: rgba(255, 162, 62, 0.4);
    --jo-secondary-rgb-5: rgba(255, 162, 62, 0.5);
    --jo-secondary-rgb-6: rgba(255, 162, 62, 0.6);
    --jo-secondary-rgb-7: rgba(255, 162, 62, 0.7);
    --jo-secondary-rgb-8: rgba(255, 162, 62, 0.8);
    --jo-secondary-rgb-9: rgba(255, 162, 62, 0.9);

    --jo-yellow-rgb-1: rgba(248, 192, 0, 0.1);
    --jo-yellow-rgb-2: rgba(248, 192, 0, 0.2);
    --jo-yellow-rgb-3: rgba(248, 192, 0, 0.3);
    --jo-yellow-rgb-4: rgba(248, 192, 0, 0.4);
    --jo-yellow-rgb-5: rgba(248, 192, 0, 0.5);
    --jo-yellow-rgb-6: rgba(248, 192, 0, 0.6);
    --jo-yellow-rgb-7: rgba(248, 192, 0, 0.7);
    --jo-yellow-rgb-8: rgba(248, 192, 0, 0.8);
    --jo-yellow-rgb-9: rgba(248, 192, 0, 0.9);

    --jo-secondary-grad: var(--jo-yellow-rgb)
        linear-gradient(
            90deg,
            var(--jo-secondary-rgb) 0%,
            var(--jo-yellow-rgb) 100%
        );

    --jo-base-border-radius: 10px;
}

/*----------  Typography  ----------*/
h1, h2, h3, h4, h5, h6, p, li, label, span, th, td, small {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
}

button, p, .btn {
    font-size: 15px;
}

/*----------  Bootstrap Overrides  ----------*/
.text-primary {
    color: var(--jo-primary-rgb) !important;
}

.btn-primary {
    background-color: var(--jo-primary-rgb) !important;
    border-color: var(--jo-primary-rgb);
}
.btn-primary:focus {
    box-shadow: 0 0 0 0.25rem var(--jo-primary-rgb-3);
    background-color: var(--jo-primary-dark-rgb);
    border-color: var(--jo-primary-dark-rgb);
}
.btn-primary:active {
    background-color: var(--jo-primary-dark-rgb);
    border-color: var(--jo-primary-dark-rgb);
}
.btn-primary:active:focus {
    box-shadow: 0 0 0 0.25rem var(--jo-primary-rgb-3);
}
.btn-primary:hover {
    background-color: var(--jo-primary-dark-rgb) !important;
    border-color: var(--jo-primary-dark-rgb);
    box-shadow: 0px 1px 2px #717171;
}
.btn-primary.disabled, .btn-primary:disabled {
    background-color: var(--jo-primary-rgb);
    border-color: var(--jo-primary-rgb);
}

.btn-outline-secondary {
    color: var(--jo-primary-rgb);
    border-color: var(--jo-yellow-rgb);
}
.btn-outline-secondary:hover {
    color: var(--jo-primary-dark-rgb);
    background-color: var(--jo-yellow-rgb);
    border-color: var(--jo-yellow-rgb);
}
.btn-outline-secondary:active {
    color: var(--jo-yellow-rgb);
    border-color: var(--jo-yellow-rgb);
}
.btn-outline-secondary:focus {
    box-shadow: 0 0 0 0.25rem var(--jo-yellow-rgb-3);
}
.btn-outline-secondary:active:focus {
    box-shadow: 0 0 0 0.25rem var(--jo-yellow-rgb-3);
}

.form-control {
    color: var(--jo-primary-rgb);
    padding: .5rem 1rem;
    border-radius: .5rem;
}
.form-control:focus {
    border-color: var(--jo-secondary-rgb-5);
    box-shadow: 0 0 0 0.25rem var(--jo-yellow-rgb-4);
}

.form-control::placeholder {
    font-size: .9rem;
}

/*----------  Cutom utilities  ----------*/
.btn-pill {
    border-radius: 25px;
    font-weight: 500;
    padding: .375rem 1.3rem;
}

.bg-secondary-grad {
    background: var(--jo-secondary-grad);
}

.text-yellow {
    color: var(--jo-yellow-rgb);
}

.fs-7 {
    font-size: .875rem;
}

.dragged-underline.dragged-underline-primary::before {
    border-color: var(--jo-primary-rgb);
}
.dragged-underline.dragged-underline-primary::after {
    color: var(--jo-primary-rgb);
}

.dragged-underline.dragged-underline-secondary::before {
    border-color: var(--jo-secondary-rgb);
}
.dragged-underline.dragged-underline-secondary::after {
    color: var(--jo-secondary-rgb);
}

.dragged-underline::before {
    content: "";
    position: absolute;
    width: 20%;
    left: 16px;
    bottom: 16px;
    border-bottom: #fff solid 2px;
}
.dragged-underline::after {
    content: "...";
    position: absolute;
    width: 16px;
    left: calc(24% + 1px);
    bottom: 21px;
    font-size: 21px;
    line-height: 0;
    color: #fff;
    height: 2px;
}

.section-title {
    position: relative;
}
.section-title .title {
    margin-bottom: 2rem;
    padding-bottom: 1.15rem;
}
.section-title > .dragged-underline::before {
    width: 15%;
    bottom: 0px;
}
.section-title > .dragged-underline::after {
    bottom: 5px;
}
.section-title > .title.text-center.dragged-underline::before {
    left: 42%;
}
.section-title > .title.text-center.dragged-underline::after {
    left: 57.1%;
}

.alert {
    font-size: .9rem;
    padding: .5rem 1rem;
}

.link-primary {
    color: var(--jo-primary-rgb);
    text-decoration: none;
}
.link-primary:hover {
    color: var(--jo-primary-dark-rgb);
    text-decoration: underline;
}

.link-secondary {
    color: var(--jo-secondary-rgb);
    text-decoration: none;
}
.link-secondary:hover {
    color: var(--jo-secondary-dark-rgb);
    text-decoration: underline;
}