.AccordionContainer {
    padding: 0 15px;
    margin-bottom: 40px;
}

.usmcRedModuleTitleWrapper {
    width: 279px;
    position: relative;
    background-color: #940000;
    color: #FFF;
    z-index: 999;
}

.usmcRedModuleTitleLink {
    font: 18px Arial,Hevetica,Sans-Serif;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    padding: 10px 15px;
    font-weight: bold;
    display: inline-block;
}

.usmcRedAccordionMenu {
    display: none;
    background-color: #940000;
    font: 18px Arial,Hevetica,Sans-Serif;
    line-height: 1.2;
    color: #FFF;
    text-decoration: none;
    cursor: pointer;
    position: relative;
}

.usmcRedAccordionMenuEdit {
    display: block;
}

/* Manage css from dnn's default.css */
ul.usmcRedAccordionMenu,
.usmcRedAccordionMenu ul {
    margin: 0;
}

.usmcRedModuleTitleWrapper a,
.usmcRedModuleTitleWrapper a:hover,
.usmcRedModuleTitleWrapper a:focus,
.usmcRedModuleTitleWrapper a:visited,
.usmcRedModuleTitleWrapper a:active {
    color: #FFF;
    text-decoration: none;
}

.usmcRedAccordionMenu, .usmcRedAccordionMenuSubMenu, .usmcRedAccordionMenu li {
    list-style: none;
}

.usmcRedAccordionMenuListItem {
    position: relative;
    background-color: #940000;
}

li.usmcRedAccordionMenuSubMenu,
.usmcRedAccordionMenuSubMenu .usmcRedAccordionMenuListItem {
    background-color: #600;
}


li.usmcRedAccordionMenuSubMenu,
.usmcRedAccordionMenuSubMenu .usmcRedMenuLinkHeader {
    font-weight: 100;
}

li.usmcRedAccordionMenuSubMenu:hover,
.usmcRedAccordionMenuSubMenu .usmcRedAccordionMenuListItem:hover {
    background-color: #940000;
}

.usmcRedAccordionMenuSubMenu .usmcRedAccordionMenuListItem {
    border: none;
}

.usmcRedAccordionMenuLastListItem {
    border-bottom: none;
}

.usmcRedAccordionMenuListItem div.listItem {
    padding: 7px 15px;
}

.usmcRedAccordionMenu div.paddedHeader {
    display: inline-block;
    max-width: 90%;
}

.usmcRedAccordionMenu div.usmcRedAccordionRootNode {
    font: 18px Arial,Hevetica,Sans-Serif;
    line-height: 1.2;
    color: #FFF;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.usmcRedAccordionMenu div.usmcRedAccordionRootNode ~ .htmlSection {
    padding: 20px;
    padding: 40px 10.5rem;
    border: 1px solid #C6CCD0;
}

.usmcRedAccordionMenu div.usmcRedAccordionRootNode > div[class^="lvl"] {
    overflow: hidden;
}

.usmcRedAccordionMenu div.lvl0 {
    font-weight: 700;
    overflow: hidden;
    line-height: initial;
}

.usmcRedAccordionMenu div.lvl1 { padding-left: 15px; }
.usmcRedAccordionMenu div.lvl2 { padding-left: 30px; }
.usmcRedAccordionMenu div.lvl3 { padding-left: 45px; }
.usmcRedAccordionMenu div.lvl4 { padding-left: 60px; }
.usmcRedAccordionMenu div.lvl5 { padding-left: 75px; }

.usmcRedMenuLinkHeader {
    font-weight: bold;
    overflow: hidden;
}

.usmcRedMenuLinkDetail {
    font-weight: normal;
    text-transform: none;
}

.htmlSection {
    max-height: 400px;
    overflow: auto;
}
.usmcRedModuleTitleCollapsed,
.usmcRedAccordionMenuCollapsed {
    display: inline-block;
    color: #fff;
}

.usmcRedModuleTitleCollapsed:after,
.usmcRedAccordionMenuCollapsed::after {
    /* stylelint-disable font-family-no-missing-generic-family-keyword */
    font-family: "Font Awesome 5 Free";
    /* stylelint-enable */
    font-weight: 900;
    margin-left: 4.5px;
    content: "\f078";
}

.usmcRedModuleTitleCollapsed.usmcRedModuleTitleExpanded::after,
.usmcRedAccordionMenuCollapsed.usmcRedAccordionMenuExpanded::after {
    /*content: "\f077";*/
}

@media screen and (max-width: 992px) {

    .AccordionContainer {
        padding: 0 !important;
    }

    .usmcRedModuleTitleWrapper {
        width: 100%;

    }
    .usmcRedModuleTitleInnerWrapper {
        text-align: center;
        padding: 30px;
    }
    .usmcRedAccordionMenu {
        width:100%;
        margin:auto;
    }

    .usmcRedAccordionMenu div.lvl1 { padding-left: 15px; }
    .usmcRedAccordionMenu div.lvl2 { padding-left: 30px; }
    .usmcRedAccordionMenu div.lvl3 { padding-left: 45px; }
    .usmcRedAccordionMenu div.lvl4 { padding-left: 60px; }
    .usmcRedAccordionMenu div.lvl5 { padding-left: 75px; }

    li.usmcRedAccordionMenuSubMenu, 
    .usmcRedAccordionMenuSubMenu .usmcRedMenuLinkHeader,
    .usmcRedAccordionMenu div.usmcRedAccordionRootNode {
        padding-left: 15%;
    }

    .usmcRedAccordionMenu div.usmcRedAccordionRootNode ~ .htmlSection {
        padding: 40px 5.5rem;
    }

    li.usmcRedAccordionMenuSubMenu:hover,
    .usmcRedAccordionMenuSubMenu .usmcRedAccordionMenuListItem:hover {
        background-color: #600;
    }
}

@media screen and (max-width: 767px) {
    .usmcRedAccordionMenu div.usmcRedAccordionRootNode ~ .htmlSection {
        padding: 40px 1.5rem;
    }
}

@media screen and (min-width: 990px) {
    .usmcRedAccordionMenu {
        position: absolute;
        z-index:10;
        left:0;
        right:0;
    }
}


/* help in edit mode */
.menuPreviewContainer .AccordionContainer {
    padding: 0;
}

.menuPreviewContainer .usmcRedModuleTitleWrapper {
    width: 100%;
}

.menuPreviewContainer .usmcRedAccordionMenu {
    position: relative;
}