.panel-custom {
    border-color: #d4d6d8;
}

    .panel-custom > .panel-heading {
        color: #414042;
        background-color: #f7f6f6;
        border-color: #d4d6d8;
    }

        .panel-custom > .panel-heading + .panel-collapse > .panel-body {
            border-top-color: #d4d6d8;
        }

        .panel-custom > .panel-heading .badge {
            color: #d4d6d8;
            background-color: #414042;
        }

    .panel-custom > .panel-footer + .panel-collapse > .panel-body {
        border-bottom-color: #d4d6d8;
    }

.accordian-arrow {
    color: #B8E50C;
}


.panel-custom-commodity {
    border-color: #d4d6d8;
}

    .panel-custom-commodity > .panel-heading {
        color: #414042;
        background-color: #ffffff;
        border-color: #d4d6d8;
    }

        .panel-custom-commodity > .panel-heading + .panel-collapse > .panel-body {
            border-top-color: #d4d6d8;
        }

        .panel-custom-commodity > .panel-heading .badge {
            color: #d4d6d8;
            background-color: #414042;
        }

    .panel-custom-commodity > .panel-footer + .panel-collapse > .panel-body {
        border-bottom-color: #d4d6d8;
    }


/* Custom Accordian */
.panel-custom-directive {
    border-color: #d4d6d8;
}

.panel-custom-directive > .panel-heading {
    color: #414042;
    background-color: #f7f6f6;
    border-color: #d4d6d8;
}

.panel-custom-directive > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #d4d6d8;
}

.panel-custom-directive > .panel-heading .badge {
    color: #d4d6d8;
    background-color: #414042;
}

.panel-custom-directive > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #d4d6d8;
}

/* Custom Accordian Arrow */
div.panel-custom-directive.panel h4::before  {
    content: "\f105";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    display: inline-block;
    -webkit-transform: rotate(0deg) !important;
    transform: rotate(0deg) !important;
    -webkit-transition: -webkit-transform 0.3s ease-in-out !important;
    transition: transform 0.3s ease-in-out !important;
}

div.panel-custom-directive.panel.panel-open h4::before {
    display: inline-block;
    -webkit-transform: rotate(90deg) !important;
    transform: rotate(90deg) !important;
    -webkit-transition: -webkit-transform 0.3s ease-in-out !important;
    transition: transform 0.3s ease-in-out !important;
}