/*New design for the Expandable Tile*/
.expandableTileBox .slideDown {
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
}

.expandableTileBox .navTextContainer:hover {
    background-color: transparent !important;
}

.expandableTileBox div.gradientHeadlineColors.selected {
    border-bottom: 0px solid transparent !important;
}

.expandable .slideDownMenu .toggle{
    background: #FFFFFF !important;
    border-radius: 8px !important;
}

.expandableTileBox .expand-arrow.positioned.icon-abb_down_24.down {
    transform: none !important;
    top: 10px;
    right: 20px;
}

.expandableTileBox .icon-abb_down_24:before {
    content: "\e989";
    background: #FFFFFF;
    border-radius: 20px;
    padding-bottom: 0px !important;
    color: #FF000F;
}

.expandableTileBox .expand-arrow.positioned.icon-abb_up_24.up {
    transform: none !important;
    top: 10px;
    right: 20px;
}

.expandableTileBox  .icon-abb_up_24:before {
    content: "\e974";
    background: #FFFFFF;
    border-radius: 20px;
    padding-bottom: 0px !important;
    color: #FF000F;
}

.expandableTileBox .navTextContainer {
    padding: 20px;
}

.expandableTileBox .notExpanded {
    background: rgba(110, 110, 110, 0.41) !important;
    background-blend-mode: difference;
    border-radius: 8px;
}

.expandableTileBox .notExpanded .imageContainer {
        opacity: 0.41;
}

/*Four and six column Layout CSS for Mobile View*/
@media all and (max-width: 768px) {
    .expandable .menuWrapper .navWrapper {
            display: flex;
            flex-direction: column;
            width: 100% !important;
            height: auto !important;
            padding-right: 21px;
        }

         .expandable .menuWrapper .navWrapper .lo_colsOut {
             width:100% !important;
        }

        .expandable .menuWrapper .navWrapper .expandableTileBox .slideDown {
            display: flex;
            flex-direction: row;
            height: auto !important;
            min-height: auto !important;
            align-items: center;
            padding: 10px;
        }

        .expandable .menuWrapper .navWrapper .expandableTileBox .slideDown .imageContainer {
                  width: 35%;
                  height: auto !important;
        }

       .expandable .menuWrapper .navWrapper .expandableTileBox .slideDown .navTextContainer {
                padding: 0px 8px 8px 11px;
                width: 65%;
       }

        .expandable .menuWrapper .navWrapper .expandableTileBox .slideDown .gradientHeadlineColors:before {
                border-top: none;
        }

        .expandable .menuWrapper .navWrapper .expandableTileBox .slideDown .gradientHeadlineColors.selected {
                border-bottom: 0px;
        }
        .expandable .menuWrapper .navWrapper .expandableTileBox .slideDown .navTextContainer h3 {
             font-size: 20px !important;
            padding: 0px 20px 0px 0px;
        }
        .expandable .menuWrapper .navWrapper .expandableTileBox .slideDown .navTextContainer div {
            right: 6%;
            top: 50%;
            transform: translateY(-50%) !important;
        }
}