.accordion-bral {
    min-height: 0;
    min-width: 220px;
    width: 100%;
    height: 100%;
    background-color: #FFF;
    margin: 0px !important;
}

    .accordion-bral .ac-label {
        font-family: Arial, sans-serif;
        padding: 5px 10px;
        position: relative;
        display: block;
        height: auto;
        cursor: pointer;
        color: #777;
        line-height: 25px;
        font-size: 15px;
        background: #EFEFEF;
        border: 1px solid #CCC;
    }

        .accordion-bral .ac-label:hover {
            background: #BBB;
        }

    .accordion-bral input + .ac-label {
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    .accordion-bral input:checked + .ac-label,
    .accordion-bral input:checked + .ac-label:active {
        background-color: rgba(79, 79, 79, 0.5) !important;
        color: #FFF;
        box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3), 0px 2px 2px rgba(0, 0, 0, 0.1);
    }

    .accordion-bral input.ac-input {
        display: none;
    }

    .accordion-bral .article {
        background: #fff;
        border-top-color: transparent !important;
        /*border-bottom-color: transparent !important;*/
        border: 1px solid #ddd;
        overflow: hidden;
        height: 0px;
        max-height: auto;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

        .accordion-bral .article p {
            color: #777;
            line-height: 23px;
            font-size: 14px;
            padding: 10px;
        }

    .accordion-bral input:checked ~ .article i {
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

    .accordion-bral input:checked ~ .article.ac-content {
        height: auto;
    }

    .accordion-bral i {
        position: absolute;
        transform: translate(-30px, 0);
        margin-top: 9px;
        right: 0;
    }

    .accordion-bral input:checked ~ .ac-label i:before {
        transform: translate(2px, 0) rotate(-45deg);
    }

    .accordion-bral input:checked ~ .ac-label i:after {
        transform: translate(-2px, 0) rotate(45deg);
    }

    .accordion-bral i:before, .accordion-bral i:after {
        content: "";
        position: absolute;
        background-color: #808080;
        width: 3px;
        height: 9px;
    }

    .accordion-bral i:before {
        transform: translate(-2px, 0) rotate(-45deg);
    }

    .accordion-bral i:after {
        transform: translate(2px, 0) rotate(45deg);
    }

ul.ac-list {
    padding-left: 40px;
    list-style-type: disc;
}

table.ac-table {
    margin: 20px 0 20px 20px;
}

    table.ac-table th {
        text-align: left;
    }

@media (max-width: 550px) {
    .accordion-bral .ac-label {
        font-family: Arial, sans-serif;
        padding: 5px 20px;
        position: relative;
        display: block;
        height: auto;
        padding-right: 40px;
        cursor: pointer;
        color: #777;
        line-height: 33px;
        font-size: 19px;
        background: #EFEFEF;
        border: 1px solid #CCC;
    }

    .accordion-bral i {
        position: absolute;
        transform: translate(-30px, 0);
        margin-top: 2%;
        right: 0;
    }
}

.accordion-bral p {
    padding-bottom: 5px !important;
    margin-bottom: 5px !important;
}
/* ---------- accordion style end --------------------------------------- */