.field--body .step-content > ul {
    padding-left: 0;
    list-style: none;
}

.field--body .step {
    box-shadow: 0px 0px 20px rgb(0 0 0 / 15%);
    border-radius: .5rem;
}

.field--body .step > h3 {
    border-radius: .5rem .5rem 0 0;
    color: #fff;
    padding: 1rem;
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
}

.field--body .step.green > h3 {
    background-color: #85A801;
}

.field--body .step.brown > h3 {
    background-color: #4E7DA3;
}

.field--body .step .step-content {
    padding: 1rem;
}

.field--body .step .step-content ul:empty {
    display: none;
}

.field--body .step .step-content > ul li.clearfix {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.field--body .step .step-content > ul li.clearfix::after {
    display: none;
}

.field--body .step .step-content > ul li.clearfix .audio-player {
    width: 100%;
}

.btn.btn-success {
    display: inline-block;
    padding: 1em 2em;
    background: #DEF0FF;
    border-radius: 50px;
    color: #4E7DA2 !important;
    font-weight: bold;
}

.btn.btn-success:hover {
    background: #D0E9FF;
    opacity: 1;
}

.btn.btn-success:active,
.btn.btn-success:focus{
    background: #BDE1FF;
}

.btn.btn-success:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/*
|--------------------------------------------------------------------------
| Ableplayer
|--------------------------------------------------------------------------
*/
.audio-player-wrap {
    min-height: 100px;
}

.able-wrapper {
    margin: 0;
    width: 100% !important;
}

.able,
.able-player,
.able-controller,
.able-seekbar-loaded,
.able-volume-slider {
    background: transparent;
}

.able {
    box-shadow: none;
}

.able-wrapper [class^="icon-"], .able-wrapper [class*=" icon-"] {
    color: #284256 !important;
}

.able-seekbar {
    background: #D4D9DD;
}

.able-popup {
    background: #fff;
}

.able-seekbar-played {
    background: #284256;
}

.able-seekbar-head {
    background: #284256;
    top: -0.42em
}

.able-big-play-button:hover .icon-play,
.able-big-play-button:hover svg,
.able-controller div[role="button"]:hover,
div.able-modal-dialog input:hover,
div.able-modal-dialog button:hover,
.able-window-toolbar .able-button-handler-preferences:hover,
.able-window-toolbar input:hover,
.able-window-toolbar select:hover,
.able-controller input:hover,
.able-controller  div[role="button"]:hover,
.able-seekbar-head:hover {
    outline-style: none;
}

.able-tooltip,
.able-button-handler-restart,
.able-button-handler-captions,
.able-status {
    display: none !important;
}

.able-controller {
    border: none;
}

.icon-play::before,
.icon-pause::before,
.icon-rewind::before,
.icon-forward::before,
.icon-volume-mute::before,
.icon-volume-soft::before,
.icon-volume-medium::before,
.icon-volume-loud::before {
    font-family: "Font Awesome Kit";
}

.able-button-handler-play {
    background: #EDF2F5 !important;
    border-radius: 100%;
    width: 60px;
    height: 60px;
    display: flex !important;
    align-items: center;
    margin-left: 0 !important;
}

.icon-pause {
    width: auto !important;
}

.icon-play::before,
.icon-pause::before {
    /*background: #EDF2F5;*/
    /*padding: 1em;*/
    /*border-radius: 100%;*/
    /*margin-top: 1rem;*/
    /*display: block;*/
}

.icon-play::before {
    content: "\e001";
}

.icon-pause::before {
    content: "\e002";
}

.icon-rewind::before {
    content: "\e004";
}

.icon-forward::before {
    content: "\e003";
}

.icon-volume-mute,
.icon-volume-soft,
.icon-volume-medium,
.icon-volume-loud {
    font-size: 27px;
}

.icon-volume-mute::before,
.icon-volume-soft::before,
.icon-volume-medium::before,
.icon-volume-loud::before {
    content: "\e000";
}

.able-popup {
    padding-left: 0 !important;
    background: #fff;
    box-shadow: 0 0 20px rgb(0 0 0 / 15%);
    opacity: 1;
    border: none;
    border-radius: 10px;
}

.able-popup li {
    color: #333132;
}

.able-popup li.able-focus {
    background: #e8e8e8;
}

.able-transcript-area {
    width: 100%;
}

.able-transcript-container {
    max-width: 600px;
    margin: 0 auto;
}

.able-window-toolbar {
    background: #D4D9DD;
}

.able-window-toolbar label {
    color: #333132 !important;
}

.able-help-div, .able-prefs-form, .able-resize-form {
    border: none;
    border-radius: 10px;
    padding: 2rem;
}

.able-modal-dialog .modal-button {
    color: #fff;
    padding: .5rem 1.5rem;
    background: #4F7EA3;
    border-radius: 0.375rem;
    cursor: pointer;
}

.able-modal-dialog .modal-button:hover {
    background: #284256;
}

.able-modal-dialog h1[id^="modalTitle-"] {
    font-size: 48px !important;
    margin-top: 0;
    text-align: left !important;
}

.able-modal-dialog button.modalCloseButton {
    top: 20px;
    right: 20px;
}

.able-prefs-form div[role=group] > div {
    margin-bottom: 0.75rem;
}

.able-prefs-form div[role=group]>div>label {
    display: block;
    padding-left: 0;
}

div.able-skin-2020 div.able-seekbar-wrapper {
    margin: 10px 0;
}

.able-left-controls,
.able-right-controls {
    float: none;
}

.able-left-controls {
    display: flex;
    align-items: center;
}

.able-right-controls {
    margin-top: 15px;
}

@media (min-width: 640px){
    .able-left-controls {
        float: left;
    }

    .able-right-controls {
        float: right;
    }
}

.able-status-bar span.able-speed {
    display: inline !important;
    margin-left: 1rem;
    text-align: left;
}

.able-status-bar span.able-timer {
    width: auto !important;
}

/*
|--------------------------------------------------------------------------
| Admin Toolbar
|--------------------------------------------------------------------------
*/
.toolbar-oriented .toolbar-bar {
    z-index: 99999;
}

/*
|--------------------------------------------------------------------------
| General
|--------------------------------------------------------------------------
*/
html,
body {
    overflow-x: hidden;
}

/*
|--------------------------------------------------------------------------
| Commerce
|--------------------------------------------------------------------------
*/

#card-number.braintree-hosted-field {
    height: 27px;
    padding: 0px;
}