// Collapse menu
@include media-breakpoint-down(sm) {
    #wrapwrap {
        header {
            .navbar-toggle {
                display: block;
            }
            .navbar-fixed-top {
                top: 0;
                border-width: 0 0 1px;
            }
            .navbar-collapse.collapse {
                display: none!important;
            }
            .navbar-nav {
                float: none!important;
            }
            .navbar-nav > li {
                float: none;
            }
            .collapse.show {
                  display:block !important;
                  height: auto !important;
            }
            .container {
                padding-left: $grid-gutter-width/2;
                padding-right: $grid-gutter-width/2;
            }
        }
    }
}

@include o-theme-cfa-btn-style();

main > :not(.o_portal_wrap):not(.o_portal) {
    background-color: white;
}

#wrap {
    margin: 80px auto;

    .text-muted:after {
        color: rgba(0, 0, 0, 0);
    }
}

h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
}
@include o-theme-cfa-header-shadows();
@include o-theme-cfa-header-responsive-sizes();

address {
    // Made to counter the center-aligned panels (in ecommerce for example).
    // This was made as a 10.0 fix but should be reviewed in master.
    text-align: left;
}

.breadcrumb {
    background: rgba(0, 0, 0, 0);
    border-radius: 0px;
}

@include o-theme-cfa-card-classes(20px);

@include o-theme-cfa-nav-pills-styles($active-color: theme-color('alpha'), $active-bg: theme-color('epsilon'),
    $badge-color: theme-color('epsilon'), $badge-bg: theme-color('alpha'));

@include o-theme-cfa-bg-img-classes($bg-img-01, $bg-img-02, $bg-img-03, $bg-img-04, $bg-img-05, $bg-img-06, $bg-img-07);

/* ========== Navigation =========== */

.navbar {
    border: none;
    background-color: theme-color('alpha');
    border-bottom: 1px solid gray('200');

    .container {
        margin-top: 5px;

        &::before {
            content: '';
            @include o-position-absolute(0, 0, auto, 0);
            height: 5px;
            background: linear-gradient(to left, theme-color('beta'), theme-color('epsilon'));
        }

        li > .dropdown-menu {
            margin-top: 9px;
            border: none;
        }
        .navbar-toggler {
            top: 4px;
            right: -25px;
            border-color: gray('700');
            border-radius: 30px;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 2;
            padding: 7px 15px;
            transition: background-color 0.2s ease-out;
            &:hover, &:focus {
                background-color: rgba(0, 0, 0, 0);
                background-color: rgba(0, 0, 0, 0.5);
            }
        }
        .navbar-collapse {
            border-color: rgba(0, 0, 0, 0);
            display: inline-block !important;
            vertical-align: middle;
            @include media-breakpoint-down(sm) {
                width: auto;
            }
        }
    }
}

#top_menu {
    @include o-theme-cfa-top-menu-style($font-size: 12px, $dropdown-item-color: theme-color('epsilon'),
        $dropdown-item-hover-color: gray('700'), $nav-link-color: theme-color('epsilon') !important, $text-transform: uppercase, $nav-link-font-size: 12px);

    li {
        &:hover {
            @include media-breakpoint-down(sm) {
                border: none;
            }
        }
        a {
            text-transform: uppercase;
            &.nav-link.active {
                font-weight: normal;
            }
        }
    }
    .dropdown-menu {
        left: 0;
        right: auto;
        @include media-breakpoint-down(sm) {
            position: relative;
        }
    }
}

#wrapwrap > footer {
    @include o-theme-cfa-footer-style($padding: 20px 0px, $h4-padding: 0, $text-transform: none);
    .container {
        @include media-breakpoint-up(lg) {
            padding: 8px 65px;
        }
        .js_language_selector .dropdown-toggle {
            padding: 3px 20px;
        }
    }
    #footer {
        border-top: 1px solid gray('200');

        .col-lg-3, .col-lg-5 {
            padding: 20px 0px;
            h2 { // social icons in footer
                text-transform: uppercase;
                font-size: 25px;
                color: theme-color('beta');
                a {
                    display: inline;
                }
            }
        }
    }
}

/* ====================== form style ======================== */

#wrapwrap .form-control:not(.quantity) {
    @include o-theme-cfa-custom-form-control();
}

/* =====================  BLOG ===================== */

@include o-theme-cfa-website-blog-styles();

/* =====================  FORUM ===================== */
@include o-theme-cfa-forum-style($padding: 0);
.website_forum {
    .navbar .navbar-brand {
        color: rgba(0, 0, 0, 0.9);
    }
    .navbar-right input {
        background-color: rgba(255, 255, 255, 0.5);
        &:focus {
            background-color: rgba(255, 255, 255, 1);
        }
    }
}
.website_forum + #wrap .col-md-3 .btn-block .btn {
    background-color: inherit;
    color: inherit;
}

@if ($o-theme-layout == 'boxed') {
    #wrapwrap {
        padding: 0 !important;

        #wrap {
            width: 992px;
            margin-bottom: 0;
            @include media-breakpoint-down(md) {
                width: 100%;
                margin: 0 auto;
            }
        }
        .navbar > .container {
            max-width: 100%;
        }
        .container {
            max-width: 992px;
        }

        .s_color_blocks_2 [class*="col-lg-"] {
            padding-top: 992px * 8 / 100;
            padding-bottom: 992px * 8 / 100;
        }
    }
    .navbar {
        width: 100%;
        margin: 0 auto;
    }
    footer:not(.modal-footer) > :not(#footer):last-child {
        margin-bottom: 80px;
    }
    #footer, footer:not(.modal-footer) > :not(#footer):not(.o_footer_copyright):last-child {
        width: 992px;
    }
    footer:not(.modal-footer) > .oe_structure {
        margin: 0 auto;
    }
    @include media-breakpoint-down(md) {
        #footer, footer:not(.modal-footer) > :not(#footer):last-child {
            width: 100%;
        }
        footer:not(.modal-footer) > :not(#footer):last-child {
            margin-bottom: 0;
        }
        #wrapwrap .container {
            max-width: 100%;
        }
    }
} @else {
    @include o-theme-cfa-full-width-styles();
    #wrapwrap > footer .container {
        max-width: 100%;
    }
}