﻿@charset "utf-8";

:root {
    /*
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;*/
    --dark: #000000;
    /*
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    */
}

/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 100;
    font-display: swap;
    src: url(../fonts/S6u-w4BMUTPHjxsIPx-mPCLQ7A.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 100;
    font-display: swap;
    src: url(../fonts/S6u-w4BMUTPHjxsIPx-oPCI.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/S6u_w4BMUTPHjxsI9w2_FQft1dw.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/S6u_w4BMUTPHjxsI9w2_Gwft.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/S6u8w4BMUTPHjxsAUi-qJCY.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/S6u8w4BMUTPHjxsAXC-q.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/S6u_w4BMUTPHjxsI5wq_FQft1dw.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/S6u_w4BMUTPHjxsI5wq_Gwft.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/S6u_w4BMUTPHjxsI3wi_FQft1dw.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/S6u_w4BMUTPHjxsI3wi_Gwft.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url(../fonts/S6u8w4BMUTPHh30AUi-qJCY.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url(../fonts/S6u8w4BMUTPHh30AXC-q.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/S6u9w4BMUTPHh7USSwaPGR_p.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/S6u9w4BMUTPHh7USSwiPGQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/S6u9w4BMUTPHh6UVSwaPGR_p.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/S6u9w4BMUTPHh50XSwaPGR_p.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/S6u9w4BMUTPHh50XSwiPGQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/*
@font-face {
    font-family: 'SegoeUI';
    src: local("Segoe UI Light"), url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff2) format("woff2"), url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff) format("woff"), url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.ttf) format("truetype");
    font-weight: 100;
}

@font-face {
    font-family: 'SegoeUI';
    src: local("Segoe UI Semilight"), url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff2) format("woff2"), url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff) format("woff"), url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.ttf) format("truetype");
    font-weight: 200;
}

@font-face {
    font-family: 'SegoeUI';
    src: local("Segoe UI"), url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2) format("woff2"), url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff) format("woff"), url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf) format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: 'SegoeUI';
    src: local("Segoe UI Semibold"), url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff2) format("woff2"), url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff) format("woff"), url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.ttf) format("truetype");
    font-weight: 600;
}

@font-face {
    font-family: 'SegoeUI';
    src: local("Segoe UI Bold"), url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff2) format("woff2"), url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff) format("woff"), url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.ttf) format("truetype");
    font-weight: 700;
}*/


@media (min-width: 1200px) {
    .container {
        max-width: 1346px;
    }
}
input.focus, select.focus, textarea.focus, .btn.focus,
input:focus, select:focus, textarea:focus, .btn:focus, .custom-control-label::before {
    box-shadow: none !important;
}

.form-control.is-loading {
    border-color: #80bdff;
    padding-right: calc(1.5em + .75rem) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 512 512'%3e%3cpath fill='%2380bdff' d='M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

html,
html > body {
    font-family: "Lato", sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: var(--dark);
}

    html[lang="it-IT"] > body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

h1, h2, h3, h4, h5, h6 {
    font-family: "Lato", sans-serif;
    font-weight: 300;
}

.lh-1 {
    line-height: 1em;
}

.lh-1_2 {
    line-height: 1.2em;
}

.fs-1_2 {
    font-size: 1.2em;
}

strong {
    font-weight: 700;
}

.navbar .navbar-brand img {
    height: 40px;
}

.main-content {
    min-height: 450px;
    min-height: calc(100vh - 366px - 3em);
}

.page-header {
    margin: 40px 0 40px;
}

.notactive {
    filter: grayscale(100);
    opacity: 0.9;
}

.disabled {
    filter: grayscale(100);
    opacity: 0.5;
}

.pointer {
    cursor: pointer;
}

.tooltip-inner {
    max-width: 300px;
}

    .tooltip-inner code {
        color: var(--yellow);
    }

.tr-spacer {
}

    .tr-spacer::before {
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: -1px;
        border-top: 1px solid #dee2e6;
        background-color: var(--white);
    }

/* Extend Bootstrap */
.table.bt-0 tr:first-child > td,
.table.bt-0 tr:first-child > th {
    border-top: none;
}

.bd-callout {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #eee;
    border-left-width: 1px;
    border-left-color: rgb(238, 238, 238);
    border-left-width: 5px;
    border-radius: .25rem;
}

.bd-callout-warning {
    border-left-color: #f0ad4e;
}

    .bd-callout-warning h4 {
        color: #f0ad4e;
    }

.bd-callout-success {
    border-left-color: #5cb85c;
}

    .bd-callout-success h4 {
        color: #5cb85c;
    }

.bd-callout-danger {
    border-left-color: #d9534f;
}

    .bd-callout-danger h4 {
        color: #d9534f;
    }

.bd-callout-primary {
    border-left-color: #0069d9;
}

.bg-yellow {
    background-color: rgba(255,193,7,0.2);
}

.bg-gray {
    background-color: #f0f0f0;
}

.card-tab {
    display: flex;
    position: relative;
    justify-content: start;
    align-items: stretch;
    width: fit-content;
    margin-bottom: -1px;
    z-index: 1;
    background-color: #fff;
    padding-right: 3.2em;
}

    .card-tab > * {
        margin: 0;
        border-left: 1px solid rgba(0,0,0,.125);
        border-top: 1px solid rgba(0,0,0,.125);
        border-top-left-radius: .25rem;
        border-top-right-radius: .25rem;
    }

    .card-tab i:not(.far,.fas,.fal,.fad) {
        transform: rotate(-43deg);
        position: absolute;
        right: 1.6em;
        height: 135%;
        top: -16%;
    }

    .card-tab + .card {
        border-top-left-radius: 0;
    }

.field-validation-error {
    line-height: 1;
    display: block;
    margin-top: 0.25em;
}

input.input-validation-error, input.input-validation-error:focus,
select.input-validation-error, select.input-validation-error:focus {
    border-color: var( --red );
    padding-right: calc(1.5em + 0.75rem) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.bootstrap-select > .dropdown-toggle {
    background-color: #fff;
    border: 1px solid #ced4da;
    color: #495057;
}

    .bootstrap-select > .dropdown-toggle.bs-placeholder {
        color: #495057;
        opacity: 1;
    }

/* ************************************ */
/* Stile grafico per il template vuoto */
.registration body {
    background-image: url('../images/login-bkg.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    margin: 0;
}
   
/* ************************************ */
/* Stile grafico per la pagina di Login */
#LoginPage {
    background-image: url('../images/login-bkg-colore.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin: 0;
    height: 100%;
}

#LoginPage body {
    background: none;
    margin-top: 20vh;
    margin-bottom: 20vh;
}
    #LoginPage body form {
        margin-top: 5vh;
        background-color: rgba(255,255,255,0.9);
        box-shadow: 0px 0px 5px 0px #eee;
        border-radius: 10px;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    #LoginPage body form .btn { min-width: 150px; }

/* ********************* */
/* Stile menu principale */

.navbar {
    padding-top: 0px;
    padding-bottom: 0px;
}

    .navbar .navbar-nav {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .navbar .navbar-nav > .sep { }

    .navbar .navbar-nav > .nav-item > .nav-link {
        padding: 0.4rem 1.5rem;
        color: #000;
    }

        .navbar .navbar-nav > .nav-item.active > .nav-link {
            color: #ff000b;
        }

    .navbar .dropdown-item.active, .navbar .dropdown-item:active {
        color: #ff000b;
        text-decoration: none;
        background-color: #f8f9fa;
    }

@media (min-width: 992px) {

    .navbar .navbar-nav {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .navbar .navbar-nav > .sep {
        border-left: 1px solid #e7e7e7;
    }

        .navbar .navbar-nav > .sep > .nav-link {
            padding-left: 0px;
            padding-right: 0px;
        }

    .navbar .navbar-nav > .nav-item > .nav-link {
        padding: 1.4rem 1.5rem;
    }
}


/* ***************** */
/* Stile lista corsi */
.course-list {
    margin-bottom: 30px;
}

    .course-list .card-title a {
        text-decoration: none;
        margin-bottom: 0.75em;
    }

    .course-list .card-footer {
        line-height: 1em;
    }

/* ************************************ */
/* Stile grafico lista utenti per corso */
#total-user.btn-default {
    border-left: 1px solid #eee;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

#_SearchCourseUsers {
    margin-bottom: 100px;
}

.course-users {
    margin-top: 60px;
    border-radius: .25rem;
}

    .course-users .card-body .col-auto.min-vw {
        min-width: 24%;
    }

    .course-users hr {
        margin-top: 15px;
        margin-bottom: 15px;
        margin-left: -15px;
        margin-right: -15px;
    }

    .course-users .badge {
        font-weight: normal;
    }
    
    .course-users .top {
        position: absolute;
        top: 0;
        left: 15px;
        right: 15px;
        margin-top: -28px;
    }

        .course-users .top .btn {
            padding-left: 1em;
            padding-right: 1em;
        }
        .course-users .top .btn-outline-body,
        .course-users .btn-certificate .btn-outline-body {
            border-color: #dfdfdf;
            border-bottom-color: #f2f2f2;
            height: 28px;
        }

            .course-users .top .btn-outline-body:hover,
            .course-users .btn-certificate .btn-outline-body:hover {
                color: #000;
                background: none;
                border-color: #000;
            }

        .course-users .top .btn text,
        .course-users .btn-certificate .btn-outline-body text {
            display: none;
        }

        .course-users .top .btn:hover text,
        .course-users .btn-certificate .btn-outline-body:hover text{
            display: inline;
        }

    .course-users.bd-warning {
        border-color: #f0ad4e;
    }
        .course-users.bd-warning .top .btn-outline-body {
            border-color: #f0ad4e;
            border-bottom-color: #fff1df;
        }

    .course-users.bd-danger {
        border-color: #dc3545;
    }
        .course-users.bd-danger .card-body {
            background-color: rgba(50,0,0,0.03);
        }

        .course-users.bd-danger .card-body .badge-warning {
            filter: grayscale(100);
        }

        .course-users.bd-danger .top .btn-outline-body {
            border-color: #dc3545;
            border-bottom-color: #fff1df;
            background-color: rgba(50,0,0,0.03);
        }

.course-users .card-body {
    padding: 15px;
}

    .course-users .c_name {
        border-top: 1px solid #dfdfdf;
        border-right: 1px solid #dfdfdf;
        border-top-right-radius: 0.25rem;
        padding: .25rem 15px;
        line-height: 1.3125rem;
    }

    .course-users .btn-command .btn {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom: 0;
        height: 28px;
    }

    .course-users .bd-danger {
        border-bottom: 1px solid #dc3545;
        border-left: 1px solid #dc3545;
        border-right: 1px solid #dc3545;
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 15px;
        padding-right: 15px;
    }

        .course-users .bd-danger .c_name {
            background-color: rgba(220, 53, 69, 0.1);
            border-top: 1px solid #dc3545;
            border-right: 1px solid #dc3545;
        }

        .course-users .bd-danger .row_status {
            background-color: rgba(220, 53, 69, 0.1);
            border-top: 1px solid #dc3545;
            border-left: 1px solid #dc3545;
            border-right: 1px solid #dc3545;
            margin-top: -1px;
            margin-left: -16px;
            margin-right: -16px;
        }

        .course-users .bd-danger .badge {
            color: #fff;
            background-color: #6c757d;
        }
        
        .course-users .bd-danger hr {
        }

.custom-progress {
    display: inline-block;
    vertical-align: sub;
    width: 50px;
    height: 15px;
    border-radius: 0.25rem;
    padding: 1px;
}

    .custom-progress > div,
    .custom-progress > span {
        border-radius: 0.2rem;
        display: block;
        height: 100%;
    }

#loading-certificate {
    position: fixed;
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.7) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.95) 50%,rgba(255,255,255,0.7) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.95) 50%,rgba(255,255,255,0.7) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3ffffff', endColorstr='#b3ffffff',GradientType=0 );
}

#loading-certificate > * {
    margin: 0;
    align-self: center;
}

#_SearchCourseUsers .fixed-bottom,
#_SearchUsersDetails .fixed-bottom,
#_SearchCertificates .fixed-bottom,
#cohort-list .fixed-bottom {
    border-top: 1px solid #f0f0f0;
    box-shadow: 0px 0px 25px 0px rgba(0,0,0,.125);
}

.pagination .page-link[data-page] {
    cursor: pointer;
    font-weight: 600;
    border: none;
    background: none;
    margin: 0 2px;
    color: #343a40;
    min-width: 2.3em;
    text-align: center;
}

.pagination .page-item.active .page-link {
    background-color: #343a40;
    border: none;
    border-radius: 50%;
    color: #fff;
}


/* ---------- Attestati  ---------- */
.search.active {
    position: relative;
}

    .search.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 10px;
        right: 10px;
        bottom: 0px;
        border: 1px solid rgba(0,0,0,.125);
        border-radius: 0.25rem;
        z-index: -1;
    }


/* ---------- Breadcrumb ---------- */
.breadcrumb {
    background: none;
    margin-bottom: 0;
    padding-left: 0;
}

    .breadcrumb .breadcrumb-item {
        position: relative;
        display: inline-block;
        background-color: #f2f2f2;
        text-decoration: none;
        margin-left: 12px;
        margin-right: 2px;
        margin-bottom: 4px;
        font-size: 11px;
        line-height: 12px;
        text-transform: uppercase;
        padding: 6px 6px;
        color: #888;
    }

        .breadcrumb .breadcrumb-item a {
            display: inline-block;
            color: #888;
            text-decoration: none;
        }

        .breadcrumb .breadcrumb-item::before {
            content: "";
            position: absolute;
            padding: 0;
            border-left: 12px solid transparent;
            border-top: 12px solid #f2f2f2;
            border-bottom: 12px solid #f2f2f2;
            height: 0;
            width: 0;
            margin-left: -12px;
            top: 0;
            left: 0;
        }

        .breadcrumb .breadcrumb-item::after {
            content: "";
            position: absolute;
            border-left: 12px solid #f2f2f2;
            border-top: 12px solid transparent;
            border-bottom: 12px solid transparent;
            width: 0;
            height: 0;
            margin-right: -12px;
            top: 0;
            right: 0;
        }

        .breadcrumb .breadcrumb-item:first-child::before {
            border-left: 12px solid #f2f2f2;
            border-top: none;
            border-bottom: none;
            width: 0px;
            height: 24px;
            margin-left: -12px;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }

        .breadcrumb .breadcrumb-item.active {
            background-color: #e2e2e2;
        }

            .breadcrumb .breadcrumb-item.active {
                color: #555;
            }

                .breadcrumb .breadcrumb-item.active::before {
                    border-top-color: #e2e2e2;
                    border-bottom-color: #e2e2e2;
                }

                .breadcrumb .breadcrumb-item.active::after {
                    border-left-color: #e2e2e2;
                }

#footer { }
    #footer .footer-logo img {
        max-width: 200px;
    }
    #footer a {
        color: #212529;
    }
        #footer a:hover {
            text-decoration: none;
            border-bottom: 1px solid #888;
        }

    #footer .footer-bottom {
        background-color: #292a2b;
        color: #eee;
        font-size: 12px;
    }

    #footer .footer-bottom a {
        color: #eee;
    }

@-webkit-keyframes pulse {
    0%, 50%, 100% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

@keyframes pulse {
    0%, 50%, 100% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0.1;
    }
}
.pulse {
    animation: pulse 3s infinite;
}


/* Cerchietti con le percentuali */
.progress-circle {
    position: relative;
    width: 80px;
    height: 80px;
    background-color: #eeeeee;
    border-radius: 50%;
}

.progress-circle:after{
    border: none;
    position: absolute;
    top: 10px;
    left: 10px;
    text-align: center;
    display: block;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    background-color: white;
    content: " ";
}
/* Text inside the control */
.progress-circle span {
    position: absolute;
    line-height: 80px;
    width: 80px;
    text-align: center;
    display: block;
    color: #555555;
    z-index: 2;
	font-size: 20px;
	font-weight: 900;
}
.progress-circle .left-half-clipper {
    /* a round circle */
    border-radius: 50%;
    width: 80px;
    height: 80px;
    position: absolute; /* needed for clipping */
    clip: rect(0, 80px, 80px, 40px); /* clips the whole left half*/
}
/* when p>50, don't clip left half*/
.progress-circle.over50 .left-half-clipper {
   clip: rect(auto,auto,auto,auto);
}
.progress-circle .value-bar {
    /*This is an overlayed square, that is made round with the border radius,
   then it is cut to display only the left half, then rotated clockwise
   to escape the outer clipping path.*/
    position: absolute; /*needed for clipping*/
    clip: rect(0px, 40px, 80px, 0px);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 10px solid #555555; /*The border is 0.35 but making it larger removes visual artifacts */
    /* for debug */
    box-sizing: border-box;
}
/* Progress bar filling the whole right half for values above 50% */
.progress-circle.over50 .first50-bar {
   /*Progress bar for the first 50%, filling the whole right half*/
   position: absolute; /*needed for clipping*/
   clip: rect(0, 80px, 80px, 40px);
   background-color: #555555;
   border-radius: 50%;
   width: 80px;
   height: 80px;
}
.progress-circle:not(.over50) .first50-bar{ display: none; }

.progress-circle-container { text-align:center; display:inline-block; min-width:150px; max-width:250px; vertical-align:top; padding-left:15px; padding-right:15px; }
.progress-circle-container .progress-circle-center {display:inline-block; position:relative; }

.progress-circle-container .text { font-size:1.25rem; line-height:1.2; margin-bottom:0.75rem; }

.progress-circle-equals {
    display:inline-block;
    height:80px;
    line-height: 80px;
}

.progress-circle.danger span {
    color: #de4438;
}
.progress-circle.danger .first50-bar {background-color:#de4438;}
.progress-circle.danger .value-bar {border-color:#de4438;}

.progress-circle.warning span { color:#f0ad4e; }
.progress-circle.warning .first50-bar {background-color:#f0ad4e;}
.progress-circle.warning .value-bar {border-color:#f0ad4e;}

.progress-circle.success span { color:#28a745; }
.progress-circle.success .first50-bar {background-color:#28a745;}
.progress-circle.success .value-bar {border-color:#28a745;}

.progress-circle.info span { color:#007bff; }
.progress-circle.info .first50-bar {background-color:#007bff;}
.progress-circle.info .value-bar {border-color:#007bff;}

.progress-circle.gray span { color:#999; }
.progress-circle.gray .first50-bar {background-color:#999;}
.progress-circle.gray .value-bar {border-color:#999;}

.progress-circle-container[type="1"] span { color: #999; }
.progress-circle-container[type="1"] .first50-bar { background-color: #999; }
.progress-circle-container[type="1"] .value-bar { border-color: #999; }

.progress-circle-container[type="2"] span { color: #323663; }
.progress-circle-container[type="2"] .first50-bar { background-color: #323663; }
.progress-circle-container[type="2"] .value-bar { border-color: #323663; }

.progress-circle-container[type="3"] span { color: #7083ad; }
.progress-circle-container[type="3"] .first50-bar { background-color: #7083ad; }
.progress-circle-container[type="3"] .value-bar { border-color: #7083ad; }

.progress-circle-container[type="4"] span { color: #a2b3cf; }
.progress-circle-container[type="4"] .first50-bar { background-color: #a2b3cf; }
.progress-circle-container[type="4"] .value-bar { border-color: #a2b3cf; }

.progress-circle-container[type="5"] span { color: #bfc2c6; }
.progress-circle-container[type="5"] .first50-bar { background-color: #bfc2c6; }
.progress-circle-container[type="5"] .value-bar { border-color: #bfc2c6; }

.progress-circle-container[type="6"] span { color: #4c9069; }
.progress-circle-container[type="6"] .first50-bar { background-color: #4c9069; }
.progress-circle-container[type="6"] .value-bar { border-color: #4c9069; }

/* Versione small */
.progress-circle-container.progress-circle-small {
    height: 30px;
    line-height: 30px;
    min-width: inherit;
    max-width: inherit;
    padding-left: unset;
    padding-right: unset;
}

    .progress-circle-container.progress-circle-small .progress-circle {
        width: 30px;
        height: 30px;
    }

    .progress-circle-container.progress-circle-small .progress-circle::after {
        top: 5px;
        left: 5px;
        width: 20px;
        height: 20px;
    }

    .progress-circle-container.progress-circle-small .progress-circle .left-half-clipper {
        width: 30px;
        height: 30px;
        clip: rect(0, 30px, 30px, 15px);
    }

        .progress-circle-container.progress-circle-small .progress-circle.over50 .first50-bar {
            clip: rect(0, 30px, 30px, 15px);
            width: 30px;
            height: 30px;
        }

        .progress-circle-container.progress-circle-small .progress-circle.over50 .left-half-clipper {
            clip: rect(auto,auto,auto,auto);
        }

        .progress-circle-container.progress-circle-small .progress-circle .value-bar {
            clip: rect(0px, 15px, 30px, 0px);
            width: 30px;
            height: 30px;
            border-width: 5px;
        }


/* Progress bar rotation position */
.progress-circle.p0 .value-bar { display: none; }
.progress-circle.p1 .value-bar { transform: rotate(4deg); }
.progress-circle.p2 .value-bar { transform: rotate(7deg); }
.progress-circle.p3 .value-bar { transform: rotate(11deg); }
.progress-circle.p4 .value-bar { transform: rotate(14deg); }
.progress-circle.p5 .value-bar { transform: rotate(18deg); }
.progress-circle.p6 .value-bar { transform: rotate(22deg); }
.progress-circle.p7 .value-bar { transform: rotate(25deg); }
.progress-circle.p8 .value-bar { transform: rotate(29deg); }
.progress-circle.p9 .value-bar { transform: rotate(32deg); }
.progress-circle.p10 .value-bar { transform: rotate(36deg); }
.progress-circle.p11 .value-bar { transform: rotate(40deg); }
.progress-circle.p12 .value-bar { transform: rotate(43deg); }
.progress-circle.p13 .value-bar { transform: rotate(47deg); }
.progress-circle.p14 .value-bar { transform: rotate(50deg); }
.progress-circle.p15 .value-bar { transform: rotate(54deg); }
.progress-circle.p16 .value-bar { transform: rotate(58deg); }
.progress-circle.p17 .value-bar { transform: rotate(61deg); }
.progress-circle.p18 .value-bar { transform: rotate(65deg); }
.progress-circle.p19 .value-bar { transform: rotate(68deg); }
.progress-circle.p20 .value-bar { transform: rotate(72deg); }
.progress-circle.p21 .value-bar { transform: rotate(76deg); }
.progress-circle.p22 .value-bar { transform: rotate(79deg); }
.progress-circle.p23 .value-bar { transform: rotate(83deg); }
.progress-circle.p24 .value-bar { transform: rotate(86deg); }
.progress-circle.p25 .value-bar { transform: rotate(90deg); }
.progress-circle.p26 .value-bar { transform: rotate(94deg); }
.progress-circle.p27 .value-bar { transform: rotate(97deg); }
.progress-circle.p28 .value-bar { transform: rotate(101deg); }
.progress-circle.p29 .value-bar { transform: rotate(104deg); }
.progress-circle.p30 .value-bar { transform: rotate(108deg); }
.progress-circle.p31 .value-bar { transform: rotate(112deg); }
.progress-circle.p32 .value-bar { transform: rotate(115deg); }
.progress-circle.p33 .value-bar { transform: rotate(113deg); }
.progress-circle.p34 .value-bar { transform: rotate(122deg); }
.progress-circle.p35 .value-bar { transform: rotate(126deg); }
.progress-circle.p36 .value-bar { transform: rotate(130deg); }
.progress-circle.p37 .value-bar { transform: rotate(133deg); }
.progress-circle.p38 .value-bar { transform: rotate(137deg); }
.progress-circle.p39 .value-bar { transform: rotate(140deg); }
.progress-circle.p40 .value-bar { transform: rotate(144deg); }
.progress-circle.p41 .value-bar { transform: rotate(148deg); }
.progress-circle.p42 .value-bar { transform: rotate(151deg); }
.progress-circle.p43 .value-bar { transform: rotate(155deg); }
.progress-circle.p44 .value-bar { transform: rotate(158deg); }
.progress-circle.p45 .value-bar { transform: rotate(162deg); }
.progress-circle.p46 .value-bar { transform: rotate(166deg); }
.progress-circle.p47 .value-bar { transform: rotate(169deg); }
.progress-circle.p48 .value-bar { transform: rotate(173deg); }
.progress-circle.p49 .value-bar { transform: rotate(176deg); }
.progress-circle.p50 .value-bar { transform: rotate(180deg); }
.progress-circle.p51 .value-bar { transform: rotate(184deg); }
.progress-circle.p52 .value-bar { transform: rotate(187deg); }
.progress-circle.p53 .value-bar { transform: rotate(191deg); }
.progress-circle.p54 .value-bar { transform: rotate(194deg); }
.progress-circle.p55 .value-bar { transform: rotate(198deg); }
.progress-circle.p56 .value-bar { transform: rotate(202deg); }
.progress-circle.p57 .value-bar { transform: rotate(205deg); }
.progress-circle.p58 .value-bar { transform: rotate(209deg); }
.progress-circle.p59 .value-bar { transform: rotate(212deg); }
.progress-circle.p60 .value-bar { transform: rotate(216deg); }
.progress-circle.p61 .value-bar { transform: rotate(220deg); }
.progress-circle.p62 .value-bar { transform: rotate(223deg); }
.progress-circle.p63 .value-bar { transform: rotate(227deg); }
.progress-circle.p64 .value-bar { transform: rotate(230deg); }
.progress-circle.p65 .value-bar { transform: rotate(234deg); }
.progress-circle.p66 .value-bar { transform: rotate(238deg); }
.progress-circle.p67 .value-bar { transform: rotate(241deg); }
.progress-circle.p68 .value-bar { transform: rotate(245deg); }
.progress-circle.p69 .value-bar { transform: rotate(248deg); }
.progress-circle.p70 .value-bar { transform: rotate(252deg); }
.progress-circle.p71 .value-bar { transform: rotate(256deg); }
.progress-circle.p72 .value-bar { transform: rotate(259deg); }
.progress-circle.p73 .value-bar { transform: rotate(263deg); }
.progress-circle.p74 .value-bar { transform: rotate(266deg); }
.progress-circle.p75 .value-bar { transform: rotate(270deg); }
.progress-circle.p76 .value-bar { transform: rotate(274deg); }
.progress-circle.p77 .value-bar { transform: rotate(277deg); }
.progress-circle.p78 .value-bar { transform: rotate(281deg); }
.progress-circle.p79 .value-bar { transform: rotate(284deg); }
.progress-circle.p80 .value-bar { transform: rotate(288deg); }
.progress-circle.p81 .value-bar { transform: rotate(292deg); }
.progress-circle.p82 .value-bar { transform: rotate(295deg); }
.progress-circle.p83 .value-bar { transform: rotate(299deg); }
.progress-circle.p84 .value-bar { transform: rotate(302deg); }
.progress-circle.p85 .value-bar { transform: rotate(306deg); }
.progress-circle.p86 .value-bar { transform: rotate(310deg); }
.progress-circle.p87 .value-bar { transform: rotate(313deg); }
.progress-circle.p88 .value-bar { transform: rotate(317deg); }
.progress-circle.p89 .value-bar { transform: rotate(320deg); }
.progress-circle.p90 .value-bar { transform: rotate(324deg); }
.progress-circle.p91 .value-bar { transform: rotate(328deg); }
.progress-circle.p92 .value-bar { transform: rotate(331deg); }
.progress-circle.p93 .value-bar { transform: rotate(335deg); }
.progress-circle.p94 .value-bar { transform: rotate(338deg); }
.progress-circle.p95 .value-bar { transform: rotate(342deg); }
.progress-circle.p96 .value-bar { transform: rotate(346deg); }
.progress-circle.p97 .value-bar { transform: rotate(349deg); }
.progress-circle.p98 .value-bar { transform: rotate(353deg); }
.progress-circle.p99 .value-bar { transform: rotate(356deg); }
.progress-circle.p100 .value-bar { transform: rotate(360deg); }

.progress-circle.p1.inverse { transform: rotate(356deg); }
.progress-circle.p2.inverse { transform: rotate(353deg); }
.progress-circle.p3.inverse { transform: rotate(349deg); }
.progress-circle.p4.inverse { transform: rotate(346deg); }
.progress-circle.p5.inverse { transform: rotate(342deg); }
.progress-circle.p6.inverse { transform: rotate(338deg); }
.progress-circle.p7.inverse { transform: rotate(335deg); }
.progress-circle.p8.inverse { transform: rotate(331deg); }
.progress-circle.p9.inverse { transform: rotate(328deg); }
.progress-circle.p10.inverse { transform: rotate(324deg); }
.progress-circle.p11.inverse { transform: rotate(320deg); }
.progress-circle.p12.inverse { transform: rotate(317deg); }
.progress-circle.p13.inverse { transform: rotate(313deg); }
.progress-circle.p14.inverse { transform: rotate(310deg); }
.progress-circle.p15.inverse { transform: rotate(306deg); }
.progress-circle.p16.inverse { transform: rotate(302deg); }
.progress-circle.p17.inverse { transform: rotate(299deg); }
.progress-circle.p18.inverse { transform: rotate(295deg); }
.progress-circle.p19.inverse { transform: rotate(292deg); }
.progress-circle.p20.inverse { transform: rotate(288deg); }
.progress-circle.p21.inverse { transform: rotate(284deg); }
.progress-circle.p22.inverse { transform: rotate(281deg); }
.progress-circle.p23.inverse { transform: rotate(277deg); }
.progress-circle.p24.inverse { transform: rotate(274deg); }
.progress-circle.p25.inverse { transform: rotate(270deg); }
.progress-circle.p26.inverse { transform: rotate(266deg); }
.progress-circle.p27.inverse { transform: rotate(263deg); }
.progress-circle.p28.inverse { transform: rotate(259deg); }
.progress-circle.p29.inverse { transform: rotate(256deg); }
.progress-circle.p30.inverse { transform: rotate(252deg); }
.progress-circle.p31.inverse { transform: rotate(248deg); }
.progress-circle.p32.inverse { transform: rotate(245deg); }
.progress-circle.p33.inverse { transform: rotate(247deg); }
.progress-circle.p34.inverse { transform: rotate(238deg); }
.progress-circle.p35.inverse { transform: rotate(234deg); }
.progress-circle.p36.inverse { transform: rotate(230deg); }
.progress-circle.p37.inverse { transform: rotate(227deg); }
.progress-circle.p38.inverse { transform: rotate(223deg); }
.progress-circle.p39.inverse { transform: rotate(220deg); }
.progress-circle.p40.inverse { transform: rotate(216deg); }
.progress-circle.p41.inverse { transform: rotate(212deg); }
.progress-circle.p42.inverse { transform: rotate(209deg); }
.progress-circle.p43.inverse { transform: rotate(205deg); }
.progress-circle.p44.inverse { transform: rotate(202deg); }
.progress-circle.p45.inverse { transform: rotate(198deg); }
.progress-circle.p46.inverse { transform: rotate(194deg); }
.progress-circle.p47.inverse { transform: rotate(191deg); }
.progress-circle.p48.inverse { transform: rotate(187deg); }
.progress-circle.p49.inverse { transform: rotate(184deg); }
.progress-circle.p50.inverse { transform: rotate(180deg); }
.progress-circle.p51.inverse { transform: rotate(176deg); }
.progress-circle.p52.inverse { transform: rotate(173deg); }
.progress-circle.p53.inverse { transform: rotate(169deg); }
.progress-circle.p54.inverse { transform: rotate(166deg); }
.progress-circle.p55.inverse { transform: rotate(162deg); }
.progress-circle.p56.inverse { transform: rotate(158deg); }
.progress-circle.p57.inverse { transform: rotate(155deg); }
.progress-circle.p58.inverse { transform: rotate(151deg); }
.progress-circle.p59.inverse { transform: rotate(148deg); }
.progress-circle.p60.inverse { transform: rotate(144deg); }
.progress-circle.p61.inverse { transform: rotate(140deg); }
.progress-circle.p62.inverse { transform: rotate(137deg); }
.progress-circle.p63.inverse { transform: rotate(133deg); }
.progress-circle.p64.inverse { transform: rotate(130deg); }
.progress-circle.p65.inverse { transform: rotate(126deg); }
.progress-circle.p66.inverse { transform: rotate(122deg); }
.progress-circle.p67.inverse { transform: rotate(119deg); }
.progress-circle.p68.inverse { transform: rotate(115deg); }
.progress-circle.p69.inverse { transform: rotate(112deg); }
.progress-circle.p70.inverse { transform: rotate(108deg); }
.progress-circle.p71.inverse { transform: rotate(104deg); }
.progress-circle.p72.inverse { transform: rotate(101deg); }
.progress-circle.p73.inverse { transform: rotate(97deg); }
.progress-circle.p74.inverse { transform: rotate(94deg); }
.progress-circle.p75.inverse { transform: rotate(90deg); }
.progress-circle.p76.inverse { transform: rotate(86deg); }
.progress-circle.p77.inverse { transform: rotate(83deg); }
.progress-circle.p78.inverse { transform: rotate(79deg); }
.progress-circle.p79.inverse { transform: rotate(76deg); }
.progress-circle.p80.inverse { transform: rotate(72deg); }
.progress-circle.p81.inverse { transform: rotate(68deg); }
.progress-circle.p82.inverse { transform: rotate(65deg); }
.progress-circle.p83.inverse { transform: rotate(61deg); }
.progress-circle.p84.inverse { transform: rotate(58deg); }
.progress-circle.p85.inverse { transform: rotate(54deg); }
.progress-circle.p86.inverse { transform: rotate(50deg); }
.progress-circle.p87.inverse { transform: rotate(47deg); }
.progress-circle.p88.inverse { transform: rotate(43deg); }
.progress-circle.p89.inverse { transform: rotate(40deg); }
.progress-circle.p90.inverse { transform: rotate(36deg); }
.progress-circle.p91.inverse { transform: rotate(32deg); }
.progress-circle.p92.inverse { transform: rotate(29deg); }
.progress-circle.p93.inverse { transform: rotate(25deg); }
.progress-circle.p94.inverse { transform: rotate(22deg); }
.progress-circle.p95.inverse { transform: rotate(18deg); }
.progress-circle.p96.inverse { transform: rotate(14deg); }
.progress-circle.p97.inverse { transform: rotate(11deg); }
.progress-circle.p98.inverse { transform: rotate(7deg); }
.progress-circle.p99.inverse { transform: rotate(4deg); }
.progress-circle.p100.inverse { transform: rotate(0deg); }

@keyframes animatedgradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}