/* start elements  */
hr {
    border-color: var(--color-border-gray);
}

/* end elements  */

/* Start Buttons */

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: none !important;
    outline: 0;
    border-radius: 1000px;
    transition: var(--transition-base);
    font-weight: 500;
    width: fit-content;

    .icon {
        display: flex;
        color: inherit;
        font-size: 16px;
        transition: inherit;

        &.icon-sm {
            font-size: 14px;
        }
    }

    &.link {
        .icon {
            font-size: 14px;
            scale: var(--flip-item) 1;
            transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
            transform-style: preserve-3d;
        }

        &:is(:hover, :focus, :focus-visible, :active, :first-child:active) {
            .icon {
                transform: translate3d(2px, -2px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
            }
        }
    }
}

.btn.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);

    &:is(:hover, :focus, :focus-visible, :active, :first-child:active) {
        background-color: var(--color-primary-hover);
        border-color: var(--color-primary-hover);
    }
}

.btn.btn-outline-primary {
    border-color: var(--color-primary);
    color: var(--color-primary);
    width: fit-content;

    &:is(:hover, :focus, :focus-visible, :active, :first-child:active) {
        background-color: var(--color-primary);
        color: var(--color-white);
    }
}


.btn.btn-dark:not( :hover,
    :focus,
    :focus-visible,
    :active,
    :first-child:active) {
    background-color: var(--color-dark);
    color: var(--color-white);
}


.btn-link {
    text-decoration: none;
    color: var(--color-primary);
    transition: var(--transition-base);

    .icon {
        font-size: 14px;
        transition: var(--transition-base);
        color: var(--color-primary);
        transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    }

    &:is(:hover, :focus, :focus-visible, :active, :first-child:active) {
        color: var(--color-primary-hover);

        .icon {
            color: var(--color-primary-hover);
            transform: translate3d(4px, -4px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
            transform-style: preserve-3d;
        }
    }
}

.btn.dropdown-toggle {
    &:is(:hover, :focus, :focus-visible, :active, :first-child:active) {
        color: var(--color-dark);
    }
}


/* End Buttons */

/* start card  */
.card {
    border: 1px solid var(--color-border-light);
    border-radius: 1.5rem;
    padding: 1rem;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.02);

    @media (min-width: 768px) {
        padding: 1.5rem;
    }

    h1,
    .h1,
    h2,
    .h2,
    h3,
    .h3,
    h4,
    .h4,
    h5,
    .h5,
    h6,
    .h6 {
        font-family: var(--main-font);
    }
}

.card.card-link {
    transform-style: preserve-3d;
    text-decoration: none;
    transition: border-color var(--transition-base), transform var(--transition-base);
    overflow: hidden;
}

.card.card-link:hover {
    border-color: var(--color-dark);
    transform: scale3d(.99, .99, 1.01);
}

/* end card   */

/* start input  */
.form-control {
    border: none;
    border-bottom: 1px solid var(--color-border-gray);
    border-radius: 0;
    color: var(--color-dark);
    min-height: 38px;
    padding: 0 0 20px;
    color: var(--neutral--800);
    background-color: #0000;
    border-radius: 0;
    font-size: 14px;
    line-height: 1.143em;
    transition: color var(--transition-base), border-color var(--transition-base);
}

.form-control:focus {
    border-color: var(--color-border);
    outline: 0;
    box-shadow: none;
}

/* end input  */


/* start accordion  */

.accordion {
    --bs-accordion-bg: transparent;
}

.accordion-item {
    border: none;
    border-bottom: 1px solid var(--color-border-gray);
    border-radius: 0 !important;
    overflow: hidden;
    padding-bottom: 32px;

    &:not(:last-child) {
        margin-block-end: 16px;
    }
}

.accordion-item:first-of-type .accordion-button {
    border-radius: 0;
}

.accordion-button:not(.collapsed) {
    color: inherit;
    background-color: unset;
    box-shadow: none;
    border: none;
}

.accordion-button {
    color: var(--color-dark);
    border: none;
    font-weight: 500;

    &:is(:hover, :focus, :focus-visible, :active, :first-child:active) {
        box-shadow: none;
    }

    &::after {
        width: 1rem;
        height: 1rem;
        background-size: 1rem;
        opacity: .6;
    }
}

.accordion-body {
    color: var(--color-muted);
}

/* end accordion  */

/* start nav/tabs  */
.nav-link {
    color: var(--color-muted);

    &:is(.active, :hover, :focus, :focus-visible, :active, :first-child:active) {
        color: var(--color-primary);
    }
}

.offcanvas {
    --bs-offcanvas-width: 300px;
}

/* end  nav/tabs   */

/* start classes  */
.text-primary {
    color: var(--color-primary) !important;
}


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

.bg-primary-subtle {
    background-color: var(--color-primary-subtle) !important;
}

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

.shadow {
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.075) !important;
}

.container {
    max-width: 792px;
}

/* end classes  */