.wpc-badges input[type="submit"] {
    padding: 3px 6px !important;
    font-size: 14px!important;
}
.wpc-badge-term-name:after {
    content: ', ';
}
.wpc-badge-term-name:last-of-type:after {
    content: '';
}
.wpc-badge-pagination {
    border-top: 1px solid lightgray;
    padding-top: 15px;
    text-align: right;
}

.wpc-badge-design-option {
    margin-bottom: 5px;
}

.wpc-badge-options-wrapper {
    overflow: hidden;
}

.wpc-options-sidebar {
    float: left;
    width: calc(50% - 20px);
    padding: 20px;
    margin: 10px 20px 10px 0;
    border-right: 1px solid lightgray;
}

.wpc-options-content {
    width: 50%;
    float: left;
}

.wpc-delete-badge-requirement {
	float: right;
}

.wpc-badge-requirement {
    padding: 20px;
    border: 1px solid lightgray;
    margin-bottom: 11px;
    overflow: hidden;
}

.single-requirement-toolbar {
	overflow: hidden;
    margin: 20px -20px -20px -20px;
    padding: 10px;
    background: #f5f5f5;
    border-top: 1px solid #ddd;
}

.wpc-badges-courses-select, .wpc-badges-lesson-select {
	width: 160px;
}

.wpc-badge-times {
	max-width: 80px;
}

.wpc-badge-rules-list li {
    border-bottom: 1px solid lightgray;
    padding: 10px 20px;
}

.wpc-badge-rules-list li:first-of-type {
    border-top: 0;
}

.wpc-badge-rules-list li:last-of-type {
    border-bottom: 0;
}

.wpc-rule-true {
    background-color: #d4edda;
}

.wpc-rule-false {
    background-color: #f8d7da;
}

.wpc-badge-title {
    color: #444;
    font-size: 14px;
    margin: 10px 0 0;
    text-align: center;
}

.wpc-badge-container {
    position: relative;
    top: 0;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid lightgray;
    box-shadow: 3px 3px 10px lightgray;
    padding: 20px;
    border-radius: 60px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.wpc-badge-container:hover {
    top: -10px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.wpc-badge-wrapper {
    display: inline-block;
    margin: 10px 14px;
    width: 120px;
    vertical-align: top;
}

.wpc-badge {
    -webkit-mask-size:cover;
    -webkit-mask-position:center;
    mask-size:cover;
    -webkit-mask-position:center;
}

.wpc-badge i {
    font-size: 40px;
}

.wpc-badge span {
    text-align: center;
    height: 80px;
    width: 80px;
    vertical-align: middle;
    display: table-cell;
}

.wpc-no-badge {
    opacity: 0.3;
}

.wpc-circle {
    -webkit-mask-image: url("../svg/circle.svg");
    mask-image: url("../svg/circle.svg");
}

.wpc-circle-outline {
    -webkit-mask-image: url("../svg/circle-outline.svg");
    mask-image: url("../svg/circle-outline.svg");
}

.wpc-award {
    -webkit-mask-image: url("../svg/award.svg");
    mask-image: url("../svg/award.svg");
}

.wpc-heart {
    -webkit-mask-image: url("../svg/heart.svg");
    mask-image: url("../svg/heart.svg");
}

.wpc-pentagon {
    -webkit-mask-image: url("../svg/pentagon.svg");
    mask-image: url("../svg/pentagon.svg");
}

.wpc-wave {
    -webkit-mask-image: url("../svg/wave.svg");
    mask-image: url("../svg/wave.svg");
}

.wpc-24-badge {
    -webkit-mask-image: url("../svg/24-point-badge.svg");
    mask-image: url("../svg/wave.svg");
}

.wpc-24-ribbon {
    -webkit-mask-image: url("../svg/24-point-ribbon.svg");
    mask-image: url("../svg/wave.svg");
}

.wpc-24-ribbon i {
    position: relative;
    top: -7px;
}

.wpc-sun {
    -webkit-mask-image: url("../svg/sun.svg");
    mask-image: url("../svg/wave.svg");
}

.non-semantic-protector { 
    position: relative;
    z-index: 1; 
}

.wpc-ribbon {
 font-size: 16px !important;
 width: 180px;
 position: relative;
 background: #ba89b6;
 color: #fff;
 text-align: center;
 padding: 10px !important; /* Adjust to suit */
 margin: -25px auto 40px auto !important;
}

.wpc-ribbon:before, .wpc-ribbon:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -1em;
 border: 1.5em solid #986794;
 z-index: -1;
}
.wpc-ribbon:before {
 left: -2em;
 border-right-width: 1.5em;
 border-left-color: transparent;
}
.wpc-ribbon:after {
 right: -2em;
 border-left-width: 1.5em;
 border-right-color: transparent;
}
.wpc-ribbon .wpc-ribbon-content:before, .wpc-ribbon .wpc-ribbon-content:after {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: #804f7c transparent transparent transparent;
 bottom: -1em;
}
.wpc-ribbon .wpc-ribbon-content:before {
 left: 0;
 border-width: 1em 0 0 1em;
}
.wpc-ribbon .wpc-ribbon-content:after {
 right: 0;
 border-width: 1em 1em 0 0;
}