.lds-ripple {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.lds-ripple div {
    position: absolute;
    border: 4px solid #fff;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}
@keyframes lds-ripple {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 0px;
        left: 0px;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}

/* Ranking */

.latest-results{
    padding: 15px;
}
.latest-results .users {
    display: flex;
    flex-wrap: wrap;
}
.latest-results .user {
    width: 50%;
    font-size: 15px;
    padding: 10px;
    background: #fff;
}
.latest-results .title {
    text-align: center;
}
.latest-results .user-details {
    padding-left: 10px;
    padding-right: 10px;
}

@media (max-width: 530px){
    .latest-results .user {
        width: 100%!important;
    }
}
.latest-results .username, .latest-results .iq-title{
    font-weight: bold;
}
.latest-results .username, .latest-results .created-at, .latest-results .iq-title, .latest-results .iq-score {
    height: 50%;
    display: flex;
    align-items: center;
}

/* Payment */
.payment .nav-item {
    text-align: left;
    display: block;
    width: 100%;
    border-bottom: 1px solid #eee;
}


.payment .nav-link {
    display: inline-block;
    vertical-align: middle;
    color: #323232;
    font-size: 18px;
    width: 100%;
    margin: 0!important;
    padding: 20px 0!important;
}
.payment .cb_circle {
    height: 23px;
    width: 23px;
    border-radius: 50%;
    border: 1px solid #9e9e9e;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    margin-left: 10px;
}
.payment .nav-link.active .cb_circle{
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxODlFNEM5RDE5MjA2ODExOEE2REJGMzlCRkIyMjcxMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5NUJGQjc1MjE0MTMxMUU5OUFDQ0Q2OTY5QzI4QTAwNSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5NUJGQjc1MTE0MTMxMUU5OUFDQ0Q2OTY5QzI4QTAwNSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5NTdFMDU1MzAyMDY4MTE4MzdBQkU1QUM1QzNFMzRDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE4OUU0QzlEMTkyMDY4MTE4QTZEQkYzOUJGQjIyNzEwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+cjpkcgAAAKlJREFUeNpi/P//PwOJYAEQ2zGANJKAA/5DwClGEmwUBuKrQCwIxMak2LYUals12DISnXgGiFmI1SgMxC+A+AcQ68DEQcRMIE7Ho3E11LZSZHEQ8RwqgU1zKFTuBBAzo2vUBeIPQPwXiKORJEWB+DXUiRrohsIY5kD8CYj/ALEfPieiawRhJyD+BsS/gLgXlxOxaQRhb6jG/7iciEsjLEC+A3EevmgCCDAAIUv3F5GqupUAAAAASUVORK5CYII=) no-repeat 4px center #028002;
    }
}
.payment .card-body {
    padding: 10px 0 0!important;
}
.payop {
    display: table;
    width: 100%;
    border-bottom: 3px solid #eee;
    padding-bottom: 10px;
}
.payop .title {
    display: table-cell;
    float: left;
    text-transform: uppercase;
    padding: 7px 0;
}
.payop .price {
    display: table-cell;
    float: right;
    font-weight: 700;
    border-radius: 5px;
    padding: 7px 15px;
    color: #000;
}
.paytotal {
    border-bottom: none;
    border-top: 1px solid #eee;
    padding: 10px 0;
}


.quiz-results .block {
     text-align: center;
     vertical-align: middle;
 }
.quiz-results .circle {
    background: #2fa360;
    border-radius: 200px;
    color: white;
    height: 200px;
    font-weight: bold;
    width: 200px;
    display: table;
    margin: 0 auto !important;
}
.quiz-results .circle p {
    font-size: 45px;
    vertical-align: middle;
    display: table-cell;
}