@import url('bootstrap.min.css');

@font-face {
    font-family: Lato-Regular;
    src: url(../fonts/Montserrat/Montserrat-VariableFont_wght.ttf);
}

@font-face {
    font-family: Lato-Regular2;
    src: url(../fonts/Lato/Lato-Regular.ttf);
}

* {
    scrollbar-width: thin;
    scrollbar-color: #0b2051 rgba(255,255,255,0);
}

.nav-sub > li, .nav-sub > li > a {
    color: #0b2051;
}

.nav-sidebar > li > a {
    color: #0b2051;
}


.field-matched {
    background: #c2ffc2 !important;
}


.field-unmatched {
    background: #fdacac !important;
}

body {
    padding-top: 50px;
    background: #fff;
    letter-spacing: 1px;
    font-family: Lato-Regular, 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    /*overflow-y: auto !important;*/
}

.main-body {
    padding-left: 2.2%;
    padding-right: 2.2%;
    height: 100%;
}


#imgs-preview .img-box {
    display: inline-block;
    margin-bottom: 10px;
}

    #imgs-preview .img-box .button-box {
        transform: translate(10px, -32px);
    }


#imgs-preview img {
    height: 125px;
    width: 125px;
    margin-left: 4px;
    margin-right: 4px;
    object-fit: cover;
}

.registration-bg {
    background: url(../images/registration-bg-1.png) no-repeat center fixed;
    background-size: cover;
}

.rounded-button {
    border-radius: 50px;
    border-width: 2px;
}

.required-condition-box {
    margin-top: 40px;
    margin-bottom: 40px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.required-condition p {
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
}


.required-condition-box .required-condition {
    width: 200px;
    margin-right: 20px;
    margin-left: 20px;
}


.required-condition p .glyphicon {
    color: #065df5;
}



.registration-page-content {
    width: 85%;
    margin: auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
}


    .registration-page-content .registration-banner {
        width: 100%;
        display: flex;
        align-items: flex-start;
        align-items: center;
        height: 100%;
    }


.registration-banner .left-side-box {
    width: 60%;
}


.registration-banner .right-side-box {
    width: 40%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.registration-banner-title-box {
    margin-bottom: 50px;
    margin-top: 50px;
}

    .registration-banner-title-box .banner-title {
        font-weight: bold;
        color: #fff;
    }


    .registration-banner-title-box .banner-sub-title {
        font-weight: bold;
        line-height: 1.5;
        font-size: 2.2rem;
        color: #0b2051;
        text-align: center;
    }


.registration-form-box {
    width: 450px;
    background-color: #fff;
    height: 90%;
    border-radius: 10px;
    padding: 20px;
    background: url(../images/activer-carte-bg.png);
    background-size: cover;
}

.registration-form-title {
    border-bottom: 1px solid #9cb4c4;
    margin-bottom: 10px;
}

.registration-form-title h1 {
    font-size: 2.1rem;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
}

.registration-form-progress-bar {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.progress-bar-frame {
    width: 100%;
    height: 6px;
    background: #e4e4e4;
    border-radius: 5px;
}

.progress-bar-value {
    height: 6px;
    border-radius: 5px;
}


.big-input-text {
    height: 50px !important;
    border-radius: 10px !important;
    overflow-x: auto;
}


.login-form-box {
    width: 460px;
    background: #fff;
    border-radius: 10px;
    padding: 30px;
}

.login-app-title {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid lightgrey;
    padding-bottom: 10px;
}

.login-form-app-name {
    display: inline-block;
    font-size: 1.6rem;
    font-weight: bold;
    color: #0b2051;
    margin-left: 20px;
}

.login-form-title h1 {
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
}

.login-form-box .form-group {
    padding: 0 !important;
}



.registration-form-content {
    height: 70%;
    overflow-y: auto;
}

    .registration-form-content form {
        height: 100%;
    }

    .registration-form-content .form {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

.flat-semi-rounded-button {
    border: none;
    border-radius: 10px;
}


.registration-app-title {
    display: flex;
    align-items: center;
    width: 100%;
}

.registration-form-app-name {
    display: inline-block;
    font-size: 1.1rem;
    font-weight: bold;
    color: #0b2051;
    margin-left: 5px;
}


.input-for-otp {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    width: 60%;
    margin: auto;
}

.criteria-icon {
    height: 20px;
    width: 20px;
    border: 1px solid lightgrey;
    border-radius: 50px;
    padding: 2px;
    color: #fff;
}

.criteria-pass {
    background: #07ac00;
}


.criteria-fail {
    background: #f10000;
}


.account-page-button-box {
    display: flex;
    justify-content: space-around;
}


    .account-page-button-box .button-box {
        width: 250px;
        text-align: center;
        padding: 20px;
        border-radius: 8px;
        background-color: #f0f8ff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        min-height: 300px;
    }

        .account-page-button-box .button-box img {
            margin-bottom: 10px;
        }


@media (orientation:portrait) and (min-width: 768px) {

    .registration-banner{
        align-items: center !important;
    }

    .registration-banner .right-side-box {
        width: 65%;
    }

    .registration-banner .left-side-box {
        width: 35%;
    }
}

@media (min-width: 768px) {
    body {
        overflow-y: hidden;
    }

    /* Set width on the form input elements since they're 100% wide by default */
    input,
    select,
    textarea {
        /*max-width: 280px;*/
    }

    .search-navbar {
        margin-left: 50px;
    }

    .navbar-brand {
        font-family: Helvetica,Arial,sans-serif !important;
        font-size: 1.2rem !important;
    }

    .body-content {
        left: 18.1%;
        width: 81.8%;
    }

    .main-menu {
        /* Set padding to keep content from hitting the edges */
        width: 18%;
        display: block !important;
        transition: width ease 0.3s;
    }

    #btn-main-menu {
        display: none;
    }

    .side-nav-header {
        height: 40px;
        padding-left: 16px;
        padding-top: 10px;
        padding-bottom: 15px;
        border-bottom: 1px solid #e6e6f6;
        margin-bottom: 40px;
    }

    .navbar-nav > li > a {
        padding-bottom: 10px;
    }

    .navbar-collapse.collapse {
        overflow-y: auto !important;
    }

    .header-buttons {
        float: right;
        display: inline-block;
    }

    .header-filter-control {
        margin-left: 200px;
    }


    .pn-container {
        position: absolute !important;
        width: 98% !important;
        height: 75% !important;
    }

    .pn {
        height: 100% !important;
    }

    .notif-icon.sm {
        display: none !important;
    }

    .notif-icon.md {
        display: block;
    }


    .current-user-info.sm {
        display: none !important;
    }

    .current-user-info.md {
        display: block;
    }

    .show-on-mobile {
        display: none !important;
    }

    .hide-on-mobile {
        display: inline;
    }

    .left-pan {
        background: url("../images/app-img.jpg") no-repeat center;
        background-size: cover;
        width: 40%;
        float: left;
        height: 100%;
        position: absolute;
        border-radius: 80px 0 0 8px;
    }

    .right-pan {
        width: 60%;
        float: right;
    }

    .table-responsive {
        overflow-x: unset !important;
        min-height: 100%;
    }
}

@media (min-height: 788px) {

    .pn-container {
        height: 80% !important;
    }
}


@media (max-width: 920px) {

    .search-navbar {
        display: none !important;
    }

    .navbar-right {
        display: inline;
    }
}



@media (max-width: 440px) {

    .landing-banner-title-box .banner-title {
        font-size: 3rem;
    }

    .landing-banner-title-box .banner-sub-title {
        font-size: 1.5rem;
    }

    #landing-section-1 .landing-section-content-box div {
        width: 100% !important;
        height: fit-content !important;
        margin-bottom: 20px;
    }


    .account-page-button-box {
        flex-direction: column;
    }

        .account-page-button-box .button-box {
            width: 98% !important;
            margin-bottom: 20px;
        }

            .account-page-button-box .button-box button {
                width: 98% !important;
            }

    #camera-video {
        width: 100% !important;
    }

    .form-group-mobile-render {
        width: 50% !important;
        padding-top: 0 !important;
    }

    .form-group-mobile-render-parent {
        width: 100% !important;
    }

    .mobile-scroll-content {
        overflow: auto !important;
    }

    .body-content table, .header-body .form-control, .header-body {
        font-size: 1.2rem !important;
    }

        .header-body .form-control, .header-body .btn {
            height: 28px;
        }

    .login-block {
        width: 80% !important;
    }

    .open-sm .dropdown-menu {
        transform: translateX(-72%);
    }

    .open-sm.usrsm .dropdown-menu {
        transform: translateX(-80%);
    }

    .left-pan {
        transform: translateY(-70px);
        height: 130px;
    }

        .left-pan .app-info {
            display: none !important;
        }

        .left-pan .credit-info {
            display: none !important;
        }

    .right-pan {
        transform: translateY(-130%);
    }

    .login-block {
        max-height: 60%;
    }

    .dropdown.sm {
        margin-right: 10px;
        padding: 8px;
    }

    .dropdown.usrsm {
        margin-left: 10px;
        padding: 10px;
        margin-right: 15px;
    }

    .notif-icon.sm {
        padding: 0;
    }

    .current-user-info.sm {
        padding: 0;
    }

    .header-body > p {
        width: 100%;
        text-align: justify;
        font-size: 1.3rem;
    }

    .header-body .param-control div {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .header-body .header-buttons {
        width: 100%;
        margin-top: 8px;
        padding-top: 5px;
        border-top: 1px solid lightgrey;
    }

    #modal-dialog-message.modal.in .modal-dialog {
        transform: translateY(50%);
    }

    .s-o-m-t {
        display: block !important;
        padding-bottom: 5px;
        margin-bottom: 5px;
    }

    .h-o-m-t {
        display: none;
    }

    .indicator {
        font-size: 1.2rem;
    }

    .modal-footer.row {
        padding-top: 5px;
    }

    .reduce-font-size-on-mobile {
        font-size: 1.07rem !important;
    }

    .header-body div.mobile-style {
        margin: 0 auto !important;
    }

    .page-scroll-content.mobile-style {
        margin: 0 auto !important;
        width: 96% !important;
    }

    .page-scroll-content .row-panel-mobile-style {
        height: auto !important;
    }


    .table-fixed-head-foot thead {
        display: table-header-group !important;
        table-layout: auto !important;
    }

    .table-fixed-head-foot tfoot {
        display: table-footer-group !important;
        table-layout: auto !important;
    }

    .table-fixed-head-foot tbody tr {
        display: table-row !important;
        table-layout: auto !important;
    }

    .table-fixed-head-foot tbody {
        display: table-row-group !important;
        height: auto !important;
    }


    .action-button-collapse {
        right: 0 !important;
    }

    .landing-navbar-content {
        width: 95%;
    }

    .landing-sign-in-btn {
        width: 50px;
        height: 50px;
        padding: 0;
    }

        .landing-sign-in-btn .btn-text {
            display: none;
        }


    .landing-sign-up-btn {
        width: 50px;
        height: 50px;
        padding: 0;
        min-width: unset;
    }

        .landing-sign-up-btn .btn-text {
            display: none;
        }


        .landing-sign-up-btn .glyphicon {
            display: inline !important;
        }

    .landing-navbar-app-name {
        font-size: 1.3rem;
        font-weight: bold;
    }

    .landing-page-content {
        width: 95%;
    }

        .landing-page-content .landing-banner {
            flex-direction: column;
        }

    .landing-banner .left-side-box, .landing-banner .right-side-box {
        width: 100%;
    }

    .landing-banner-title-box {
        margin-top: 0px;
        margin-bottom: 30px;
    }

    .landing-section-anchor-btn-box {
        margin-bottom: 30px;
    }

        .landing-section-anchor-btn-box button {
            margin-bottom: 8px;
        }

    .landing-app-access-btn-box button {
        width: 100%;
    }

    .landing-section-content-box {
        flex-direction: column;
    }

    .landing-section-content {
        width: 100%;
    }

    .required-condition-box {
        flex-direction: column;
        margin-bottom: 0;
        margin-top: 0;
    }


    .required-condition {
        width: 85% !important;
        margin-bottom: 20px;
    }

    #create-id-modal .modal-content {
        padding: 10px !important;
    }

    #create-id-modal .modal-header h4 {
        font-size: 1.5rem !important;
    }

        #create-id-modal .modal-header h4 span:first-child {
            font-size: 2rem !important;
            font-weight: normal !important;
        }

    .registration-banner .right-side-box {
        width: 100% !important;
    }


    .registration-banner .left-side-box {
        display: none;
    }

    .registration-page-content {
        width: 100%;
    }

    .registration-form-box {
        height: 100%;
        border-radius: 0;
        width: 100%;
    }
}


@media (max-width: 768px) {

    .registration-form-app-name{
        text-align: center !important;
    }

    .registration-form-title h1{
        font-size: small;
    }

    a.sm {
        background-color: transparent !important;
    }

    body {
        overflow-y: auto;
    }

    .notif-icon.sm {
        display: block !important;
    }

    .notif-icon.md {
        display: none;
    }

    .current-user-info.sm {
        display: block !important;
    }

    .current-user-info.md {
        display: none;
    }

    #datatable_wrapper .row:first-child {
        display: none;
    }

    #datatableMS_wrapper .row:first-child {
        display: none;
    }

    .modal-body {
        padding: 5% !important;
    }

    input,
    select,
    textarea {
        max-width: 100%;
    }

    .table-responsive {
        border: none;
        overflow-x: unset;
    }

        .table-responsive::-webkit-scrollbar {
            height: 1px;
        }

        .table-responsive::-webkit-scrollbar-thumb {
        }


    .navbar {
        height: 50px;
    }


    .body-content {
        left: 0;
        width: 100%;
    }

    .indicator {
        left: 0 !important;
        width: 100% !important;
    }


    .choose-institution-form {
        width: 55% !important;
        margin: 0 auto !important;
    }

    .navbar-brand {
        font-size: 1rem !important;
    }

    #btn-main-menu {
        display: inline;
    }

    .main-menu {
        display: none !important;
        max-width: 70%;
        min-width: 30%;
        z-index: 200;
        left: 0 !important;
        margin: 0 !important;
    }

        .main-menu > .main-menu-menu {
            margin-top: 0 !important;
        }


    .btn-iconify-main-menu {
        display: none !important;
    }

    .user-info-header {
        position: relative;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center;
        bottom: 0 !important;
        margin-top: 50px !important;
    }

    .user-avatar {
        position: relative;
        margin: 0 auto;
        float: none !important;
        clear: both;
    }

    .user-profil-login-info {
        position: relative;
        margin: 0 auto;
        width: 100%;
        float: none !important;
        clear: both;
        max-width: inherit !important;
    }

    .user-profil-header {
        margin-left: -4.1% !important;
        margin-right: -4.1% !important;
    }

    .pn-container {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        margin-left: 0;
        margin-right: 0;
    }

    .pn {
        height: auto !important;
    }

    .show-on-mobile {
        display: inline !important;
    }

    .hide-on-mobile {
        display: none;
    }

    .show-table-on-mobile {
        display: block !important;
    }

    .hide-table-on-mobile {
        display: none !important;
    }

    .body-content::-webkit-scrollbar {
        display: none;
    }

    .page-scroll-content::-webkit-scrollbar {
        width: 1px;
    }
}

.s-o-m-t {
    display: none;
}

.disabled-control {
    background-color: #dadada !important;
    pointer-events: none;
}

.open-sm > .dropdown-menu {
    display: block;
}

.body-content {
    position: absolute;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 3%;
    float: right;
    height: 95%;
    overflow-y: auto;
    background-color: #fff;
    transition: 0.3s;
    border-top: 1px solid #e6e6f6;
}

button:focus, .btn:focus {
    border: none !important;
    outline: none !important;
}

.input-search:focus {
    border: none !important;
    outline: none !important;
}

.nav-sidebar li.header {
    width: 100%;
    font-weight: normal;
    font-size: 14px;
}

    .nav-sidebar li.header .chevron {
        float: right;
    }

.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
    color: #fff;
    background-color: #428bca;
}

.display-inline-block {
    display: inline-block !important;
}

.side-nav-header {
    top: 3vmax;
    position: fixed;
    font-size: 14px;
    width: 14.9%;
    height: 50px;
    padding-top: 15px;
    background-color: #f4f4f4;
    border-bottom: 1px solid #e6e6f6;
}

    .side-nav-header a:hover,
    .side-nav-header a:focus {
        text-decoration: none;
    }


#modal-dialog-message .text-info {
    word-break: break-word;
}

.table-fixed-head-foot thead, .table-fixed-head-foot tfoot, .table-fixed-head-foot tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}


    .table-fixed-head-foot tbody tr td {
        word-break: break-word;
    }

.table-fixed-head-foot tbody {
    display: block;
    overflow-y: auto;
}

#current-user-info-dropdown-menu {
    position: absolute;
    display: none;
    background: rgba(255, 255, 255, 0.81);
    color: black;
    border-radius: 0 0 5px 5px;
    border: 1px solid lightgrey;
    padding: 0;
    top: 100%;
    right: 1%;
}

.show {
    display: block !important;
}

.hide {
    display: none;
}

.pn .dataTables_wrapper .row {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}


    .pn .dataTables_wrapper .row .col-sm-12 {
        padding-left: 0;
        padding-right: 0;
    }


.blur {
    filter: blur(3px);
    background-size: cover;
}


::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}


::-webkit-scrollbar-thumb {
    background: #0b2051;
    border-radius: 50px;
}

#logo-preview, #profile-photo-preview {
    text-align: center;
}


    #logo-preview img, #profile-photo-preview img {
        border: 1px solid lightgrey;
        padding: 2px;
    }

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

dd, dt {
    line-height: 30px;
}

.navbar-header a b,
.navbar-header span,
.dropdown-toggle span,
.btn-danger a,
.btn-success a,
.btn-warning a,
.btn-info a {
    color: #fff;
}


.modal-header {
    background: #0b2051 !important;
}

.nav .open > a, .nav .open > a:focus, .nav .open > a:hover, .nav .dropdown > a:focus, .nav .dropdown > a:hover {
    background-color: #0b1839;
}


.navbar-header {
    display: inline-block;
}

.cart-row {
    color: whitesmoke;
}

.login-link {
    float: right;
}

.left-pan .icon {
    background: url(../images/unlock-icon-4.png) no-repeat center;
    background-size: cover;
    width: 120px;
    height: 120px;
    display: block;
    margin: 0 auto;
    border-radius: 50%;
    margin-top: 10px;
}

.left-pan .app-info {
    display: block;
    text-align: center;
    color: #ffffff;
    text-shadow: 3px 2px 9px #00080c;
    margin-top: 25px;
    transform: translateY(-18%);
}

    .left-pan .app-info .app-name {
        display: block;
        font-size: 3.4rem;
    }

    .left-pan .app-info .app-version {
        display: block;
        font-size: 1rem;
    }

.left-pan .credit-info {
    position: absolute;
    display: block;
    width: 100%;
    bottom: 0;
    text-align: center;
    color: #ffffff;
    text-shadow: 3px 2px 4px #00080c;
    font-size: 0.65rem;
    white-space: normal;
    padding: 10px;
    letter-spacing: 2px;
}

.modal {
    transition: ease-in-out 0.5s;
}

.modal-header > h4 {
    color: #fff;
}

#overlay-loading {
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(255,255,255,0.98);
    transition: 1s 0.4s;
    align-content: center;
}


.overlay-loading {
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(255,255,255,0.5);
    transition: 1s 0.4s;
    align-content: center;
}

    .overlay-loading img {
        display: block;
        position: absolute;
        top: 45%;
        left: 45%;
    }

.ly-overlay-loading {
    background: rgba(255,255,255,0.98);
}

    .ly-overlay-loading img {
        top: 45%;
        left: 50%;
    }

.form-overlay-loading {
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
}

    .form-overlay-loading img {
        display: block;
        position: absolute;
        top: 40%;
        left: 41%;
    }

.pointer-evt {
    pointer-events: none;
}

.action-button-collapse {
    position: absolute;
    z-index: 300;
    background: #f2f2f2;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid lightgrey;
    margin: 0 auto;
    margin-top: -7.6%;
    min-width: 140px;
    right: 8px;
}

    .action-button-collapse button {
        display: block;
        margin-bottom: 8px;
        width: 100%;
    }

.stretch-out-on-hover:hover {
    letter-spacing: 2px;
    transition: letter-spacing linear 0.3s;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
    outline: none !important;
    box-shadow: none !important;
}


.icon {
    width: 18px;
    color: #337ab7 !important;
    transform: translate(0, -4px);
    fill: #337ab7;
}

.button-processing {
    pointer-events: none;
    filter: grayscale(100%);
}

    .button-processing .loader {
        display: inline-block !important;
        animation: spin 0.8s linear infinite;
    }

/*
    Nofication Bell Animation
*/
.bell-ring-animation {
    animation: ring 1.5s infinite linear;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes ring {
    0% {
        transform: rotate(-10deg);
    }

    12.5% {
        transform: rotate(15deg);
    }

    25% {
        transform: rotate(-20deg);
    }

    37.5% {
        transform: rotate(30deg);
    }

    50% {
        transform: rotate(10deg);
    }

    62.5% {
        transform: rotate(-20deg);
    }

    75% {
        transform: rotate(15deg);
    }

    100% {
        transform: rotate(-15deg);
    }
}



/* Pure CSS (SCSS) Bootstrap compatible circular progress bar
*/
.progress {
    width: 150px;
    height: 150px;
    line-height: 150px;
    background: none;
    margin: 0 auto;
    box-shadow: none;
    position: relative;
}

    .progress:after {
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 7px solid #eee;
        position: absolute;
        top: 0;
        left: 0;
    }

    .progress > span {
        width: 50%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        z-index: 1;
    }

    .progress .progress-left {
        left: 0;
    }

    .progress .progress-bar {
        width: 100%;
        height: 100%;
        background: none;
        border-width: 7px;
        border-style: solid;
        position: absolute;
        top: 0;
        border-color: #ffb43e;
    }

    .progress .progress-left .progress-bar {
        left: 100%;
        border-top-right-radius: 75px;
        border-bottom-right-radius: 75px;
        border-left: 0;
        -webkit-transform-origin: center left;
        transform-origin: center left;
    }

    .progress .progress-right {
        right: 0;
    }

        .progress .progress-right .progress-bar {
            left: -100%;
            border-top-left-radius: 75px;
            border-bottom-left-radius: 75px;
            border-right: 0;
            -webkit-transform-origin: center right;
            transform-origin: center right;
        }

    .progress .progress-value {
        display: flex;
        border-radius: 50%;
        font-size: 36px;
        text-align: center;
        line-height: 20px;
        align-items: center;
        justify-content: center;
        height: 100%;
        font-weight: 300;
    }

        .progress .progress-value div {
            margin-top: 10px;
        }

        .progress .progress-value span {
            font-size: 12px;
            text-transform: uppercase;
        }

    /* This for loop creates the 	necessary css animation names 
Due to the split circle of progress-left and progress right, we must use the animations on each side. 
*/
    .progress[data-percentage="1"] .progress-right .progress-bar {
        animation: loading-1 1.5s linear forwards;
    }

    .progress[data-percentage="1"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="2"] .progress-right .progress-bar {
        animation: loading-2 1.5s linear forwards;
    }

    .progress[data-percentage="2"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="3"] .progress-right .progress-bar {
        animation: loading-3 1.5s linear forwards;
    }

    .progress[data-percentage="3"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="4"] .progress-right .progress-bar {
        animation: loading-4 1.5s linear forwards;
    }

    .progress[data-percentage="4"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="5"] .progress-right .progress-bar {
        animation: loading-5 1.5s linear forwards;
    }

    .progress[data-percentage="5"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="6"] .progress-right .progress-bar {
        animation: loading-6 1.5s linear forwards;
    }

    .progress[data-percentage="6"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="7"] .progress-right .progress-bar {
        animation: loading-7 1.5s linear forwards;
    }

    .progress[data-percentage="7"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="8"] .progress-right .progress-bar {
        animation: loading-8 1.5s linear forwards;
    }

    .progress[data-percentage="8"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="9"] .progress-right .progress-bar {
        animation: loading-9 1.5s linear forwards;
    }

    .progress[data-percentage="9"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="10"] .progress-right .progress-bar {
        animation: loading-10 1.5s linear forwards;
    }

    .progress[data-percentage="10"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="11"] .progress-right .progress-bar {
        animation: loading-11 1.5s linear forwards;
    }

    .progress[data-percentage="11"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="12"] .progress-right .progress-bar {
        animation: loading-12 1.5s linear forwards;
    }

    .progress[data-percentage="12"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="13"] .progress-right .progress-bar {
        animation: loading-13 1.5s linear forwards;
    }

    .progress[data-percentage="13"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="14"] .progress-right .progress-bar {
        animation: loading-14 1.5s linear forwards;
    }

    .progress[data-percentage="14"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="15"] .progress-right .progress-bar {
        animation: loading-15 1.5s linear forwards;
    }

    .progress[data-percentage="15"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="16"] .progress-right .progress-bar {
        animation: loading-16 1.5s linear forwards;
    }

    .progress[data-percentage="16"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="17"] .progress-right .progress-bar {
        animation: loading-17 1.5s linear forwards;
    }

    .progress[data-percentage="17"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="18"] .progress-right .progress-bar {
        animation: loading-18 1.5s linear forwards;
    }

    .progress[data-percentage="18"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="19"] .progress-right .progress-bar {
        animation: loading-19 1.5s linear forwards;
    }

    .progress[data-percentage="19"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="20"] .progress-right .progress-bar {
        animation: loading-20 1.5s linear forwards;
    }

    .progress[data-percentage="20"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="21"] .progress-right .progress-bar {
        animation: loading-21 1.5s linear forwards;
    }

    .progress[data-percentage="21"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="22"] .progress-right .progress-bar {
        animation: loading-22 1.5s linear forwards;
    }

    .progress[data-percentage="22"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="23"] .progress-right .progress-bar {
        animation: loading-23 1.5s linear forwards;
    }

    .progress[data-percentage="23"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="24"] .progress-right .progress-bar {
        animation: loading-24 1.5s linear forwards;
    }

    .progress[data-percentage="24"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="25"] .progress-right .progress-bar {
        animation: loading-25 1.5s linear forwards;
    }

    .progress[data-percentage="25"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="26"] .progress-right .progress-bar {
        animation: loading-26 1.5s linear forwards;
    }

    .progress[data-percentage="26"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="27"] .progress-right .progress-bar {
        animation: loading-27 1.5s linear forwards;
    }

    .progress[data-percentage="27"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="28"] .progress-right .progress-bar {
        animation: loading-28 1.5s linear forwards;
    }

    .progress[data-percentage="28"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="29"] .progress-right .progress-bar {
        animation: loading-29 1.5s linear forwards;
    }

    .progress[data-percentage="29"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="30"] .progress-right .progress-bar {
        animation: loading-30 1.5s linear forwards;
    }

    .progress[data-percentage="30"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="31"] .progress-right .progress-bar {
        animation: loading-31 1.5s linear forwards;
    }

    .progress[data-percentage="31"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="32"] .progress-right .progress-bar {
        animation: loading-32 1.5s linear forwards;
    }

    .progress[data-percentage="32"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="33"] .progress-right .progress-bar {
        animation: loading-33 1.5s linear forwards;
    }

    .progress[data-percentage="33"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="34"] .progress-right .progress-bar {
        animation: loading-34 1.5s linear forwards;
    }

    .progress[data-percentage="34"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="35"] .progress-right .progress-bar {
        animation: loading-35 1.5s linear forwards;
    }

    .progress[data-percentage="35"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="36"] .progress-right .progress-bar {
        animation: loading-36 1.5s linear forwards;
    }

    .progress[data-percentage="36"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="37"] .progress-right .progress-bar {
        animation: loading-37 1.5s linear forwards;
    }

    .progress[data-percentage="37"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="38"] .progress-right .progress-bar {
        animation: loading-38 1.5s linear forwards;
    }

    .progress[data-percentage="38"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="39"] .progress-right .progress-bar {
        animation: loading-39 1.5s linear forwards;
    }

    .progress[data-percentage="39"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="40"] .progress-right .progress-bar {
        animation: loading-40 1.5s linear forwards;
    }

    .progress[data-percentage="40"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="41"] .progress-right .progress-bar {
        animation: loading-41 1.5s linear forwards;
    }

    .progress[data-percentage="41"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="42"] .progress-right .progress-bar {
        animation: loading-42 1.5s linear forwards;
    }

    .progress[data-percentage="42"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="43"] .progress-right .progress-bar {
        animation: loading-43 1.5s linear forwards;
    }

    .progress[data-percentage="43"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="44"] .progress-right .progress-bar {
        animation: loading-44 1.5s linear forwards;
    }

    .progress[data-percentage="44"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="45"] .progress-right .progress-bar {
        animation: loading-45 1.5s linear forwards;
    }

    .progress[data-percentage="45"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="46"] .progress-right .progress-bar {
        animation: loading-46 1.5s linear forwards;
    }

    .progress[data-percentage="46"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="47"] .progress-right .progress-bar {
        animation: loading-47 1.5s linear forwards;
    }

    .progress[data-percentage="47"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="48"] .progress-right .progress-bar {
        animation: loading-48 1.5s linear forwards;
    }

    .progress[data-percentage="48"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="49"] .progress-right .progress-bar {
        animation: loading-49 1.5s linear forwards;
    }

    .progress[data-percentage="49"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="50"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="50"] .progress-left .progress-bar {
        animation: 0;
    }

    .progress[data-percentage="51"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="51"] .progress-left .progress-bar {
        animation: loading-1 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="52"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="52"] .progress-left .progress-bar {
        animation: loading-2 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="53"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="53"] .progress-left .progress-bar {
        animation: loading-3 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="54"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="54"] .progress-left .progress-bar {
        animation: loading-4 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="55"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="55"] .progress-left .progress-bar {
        animation: loading-5 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="56"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="56"] .progress-left .progress-bar {
        animation: loading-6 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="57"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="57"] .progress-left .progress-bar {
        animation: loading-7 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="58"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="58"] .progress-left .progress-bar {
        animation: loading-8 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="59"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="59"] .progress-left .progress-bar {
        animation: loading-9 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="60"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="60"] .progress-left .progress-bar {
        animation: loading-10 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="61"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="61"] .progress-left .progress-bar {
        animation: loading-11 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="62"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="62"] .progress-left .progress-bar {
        animation: loading-12 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="63"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="63"] .progress-left .progress-bar {
        animation: loading-13 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="64"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="64"] .progress-left .progress-bar {
        animation: loading-14 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="65"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="65"] .progress-left .progress-bar {
        animation: loading-15 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="66"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="66"] .progress-left .progress-bar {
        animation: loading-16 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="67"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="67"] .progress-left .progress-bar {
        animation: loading-17 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="68"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="68"] .progress-left .progress-bar {
        animation: loading-18 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="69"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="69"] .progress-left .progress-bar {
        animation: loading-19 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="70"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="70"] .progress-left .progress-bar {
        animation: loading-20 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="71"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="71"] .progress-left .progress-bar {
        animation: loading-21 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="72"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="72"] .progress-left .progress-bar {
        animation: loading-22 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="73"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="73"] .progress-left .progress-bar {
        animation: loading-23 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="74"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="74"] .progress-left .progress-bar {
        animation: loading-24 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="75"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="75"] .progress-left .progress-bar {
        animation: loading-25 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="76"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="76"] .progress-left .progress-bar {
        animation: loading-26 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="77"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="77"] .progress-left .progress-bar {
        animation: loading-27 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="78"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="78"] .progress-left .progress-bar {
        animation: loading-28 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="79"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="79"] .progress-left .progress-bar {
        animation: loading-29 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="80"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="80"] .progress-left .progress-bar {
        animation: loading-30 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="81"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="81"] .progress-left .progress-bar {
        animation: loading-31 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="82"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="82"] .progress-left .progress-bar {
        animation: loading-32 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="83"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="83"] .progress-left .progress-bar {
        animation: loading-33 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="84"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="84"] .progress-left .progress-bar {
        animation: loading-34 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="85"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="85"] .progress-left .progress-bar {
        animation: loading-35 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="86"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="86"] .progress-left .progress-bar {
        animation: loading-36 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="87"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="87"] .progress-left .progress-bar {
        animation: loading-37 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="88"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="88"] .progress-left .progress-bar {
        animation: loading-38 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="89"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="89"] .progress-left .progress-bar {
        animation: loading-39 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="90"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="90"] .progress-left .progress-bar {
        animation: loading-40 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="91"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="91"] .progress-left .progress-bar {
        animation: loading-41 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="92"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="92"] .progress-left .progress-bar {
        animation: loading-42 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="93"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="93"] .progress-left .progress-bar {
        animation: loading-43 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="94"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="94"] .progress-left .progress-bar {
        animation: loading-44 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="95"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="95"] .progress-left .progress-bar {
        animation: loading-45 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="96"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="96"] .progress-left .progress-bar {
        animation: loading-46 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="97"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="97"] .progress-left .progress-bar {
        animation: loading-47 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="98"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="98"] .progress-left .progress-bar {
        animation: loading-48 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="99"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="99"] .progress-left .progress-bar {
        animation: loading-49 1.5s linear forwards 1.5s;
    }

    .progress[data-percentage="100"] .progress-right .progress-bar {
        animation: loading-50 1.5s linear forwards;
    }

    .progress[data-percentage="100"] .progress-left .progress-bar {
        animation: loading-50 1.5s linear forwards 1.5s;
    }

@keyframes loading-1 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(3.6);
        transform: rotate(3.6deg);
    }
}

@keyframes loading-2 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(7.2);
        transform: rotate(7.2deg);
    }
}

@keyframes loading-3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(10.8);
        transform: rotate(10.8deg);
    }
}

@keyframes loading-4 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(14.4);
        transform: rotate(14.4deg);
    }
}

@keyframes loading-5 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(18);
        transform: rotate(18deg);
    }
}

@keyframes loading-6 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(21.6);
        transform: rotate(21.6deg);
    }
}

@keyframes loading-7 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(25.2);
        transform: rotate(25.2deg);
    }
}

@keyframes loading-8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(28.8);
        transform: rotate(28.8deg);
    }
}

@keyframes loading-9 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(32.4);
        transform: rotate(32.4deg);
    }
}

@keyframes loading-10 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(36);
        transform: rotate(36deg);
    }
}

@keyframes loading-11 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(39.6);
        transform: rotate(39.6deg);
    }
}

@keyframes loading-12 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(43.2);
        transform: rotate(43.2deg);
    }
}

@keyframes loading-13 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(46.8);
        transform: rotate(46.8deg);
    }
}

@keyframes loading-14 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(50.4);
        transform: rotate(50.4deg);
    }
}

@keyframes loading-15 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(54);
        transform: rotate(54deg);
    }
}

@keyframes loading-16 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(57.6);
        transform: rotate(57.6deg);
    }
}

@keyframes loading-17 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(61.2);
        transform: rotate(61.2deg);
    }
}

@keyframes loading-18 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(64.8);
        transform: rotate(64.8deg);
    }
}

@keyframes loading-19 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(68.4);
        transform: rotate(68.4deg);
    }
}

@keyframes loading-20 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(72);
        transform: rotate(72deg);
    }
}

@keyframes loading-21 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(75.6);
        transform: rotate(75.6deg);
    }
}

@keyframes loading-22 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(79.2);
        transform: rotate(79.2deg);
    }
}

@keyframes loading-23 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(82.8);
        transform: rotate(82.8deg);
    }
}

@keyframes loading-24 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(86.4);
        transform: rotate(86.4deg);
    }
}

@keyframes loading-25 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(90);
        transform: rotate(90deg);
    }
}

@keyframes loading-26 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(93.6);
        transform: rotate(93.6deg);
    }
}

@keyframes loading-27 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(97.2);
        transform: rotate(97.2deg);
    }
}

@keyframes loading-28 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(100.8);
        transform: rotate(100.8deg);
    }
}

@keyframes loading-29 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(104.4);
        transform: rotate(104.4deg);
    }
}

@keyframes loading-30 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(108);
        transform: rotate(108deg);
    }
}

@keyframes loading-31 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(111.6);
        transform: rotate(111.6deg);
    }
}

@keyframes loading-32 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(115.2);
        transform: rotate(115.2deg);
    }
}

@keyframes loading-33 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(118.8);
        transform: rotate(118.8deg);
    }
}

@keyframes loading-34 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(122.4);
        transform: rotate(122.4deg);
    }
}

@keyframes loading-35 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(126);
        transform: rotate(126deg);
    }
}

@keyframes loading-36 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(129.6);
        transform: rotate(129.6deg);
    }
}

@keyframes loading-37 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(133.2);
        transform: rotate(133.2deg);
    }
}

@keyframes loading-38 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(136.8);
        transform: rotate(136.8deg);
    }
}

@keyframes loading-39 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(140.4);
        transform: rotate(140.4deg);
    }
}

@keyframes loading-40 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(144);
        transform: rotate(144deg);
    }
}

@keyframes loading-41 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(147.6);
        transform: rotate(147.6deg);
    }
}

@keyframes loading-42 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(151.2);
        transform: rotate(151.2deg);
    }
}

@keyframes loading-43 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(154.8);
        transform: rotate(154.8deg);
    }
}

@keyframes loading-44 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(158.4);
        transform: rotate(158.4deg);
    }
}

@keyframes loading-45 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(162);
        transform: rotate(162deg);
    }
}

@keyframes loading-46 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(165.6);
        transform: rotate(165.6deg);
    }
}

@keyframes loading-47 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(169.2);
        transform: rotate(169.2deg);
    }
}

@keyframes loading-48 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(172.8);
        transform: rotate(172.8deg);
    }
}

@keyframes loading-49 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(176.4);
        transform: rotate(176.4deg);
    }
}

@keyframes loading-50 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(180);
        transform: rotate(180deg);
    }
}

.progress {
    margin-bottom: 1em;
}