.sidebar_toggle a {
    margin-left: auto !important;
    margin-bottom: 10px !important;
}

.sidebar_toggle {
    display: inline-block !important;
    width: 100% !important;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

body {
    font-size: 1em;
}

#footerCP {
    margin-top: -40px;
}

#bPrinter {
    background-color: #354052 !important;
    border: none;
}

.scoop-inner-content {
    padding: 40px;
}

.scoop-content {
    margin-left: 0 !important;
}

td:hover .k-input-button {
    width: 2rem !important;
}

/*CSS NAVBAR*/

.scoop-left-header {
    text-align: center;
    width: 100% !important;
}

.scoop[theme-layout="vertical"][vertical-placement="left"][vertical-nav-type="collapsed"][vertical-effect="shrink"] .scoop-content {
    margin-left: 0 !important;
}

.logo-text {
    left: 0 !important;
    position: relative !important;
}

.scoop-left-item {
    display: grid !important;
    grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6% !important;
    margin-left: auto !important;
    background-color: #354052;
    border-top: 1px #ffffff;
    padding: 0 50px 0 80px !important;
}

.scoop-mtext {
    opacity: 1 !important;
    visibility: visible !important;
}

.scoop[theme-layout="vertical"] .scoop-navbar .scoop-item[item-border="true"][item-border-style="solid"] li > a, .scoop .scoop-navbar .scoop-item > li {
    width: 200px;
    text-align: center;
}

.scoop[theme-layout="vertical"][vertical-nav-type="collapsed"] .scoop-navbar .scoop-item > .scoop-hasmenu.scoop-trigger > .scoop-submenu {
    width: 200px;
    left: 0;
}

.scoop-mtext {
    position: unset !important;
}

.scoop-navbar {
    width: 100% !important;
    height: 100% !important;
}

.scoop-item {
    padding: 0 60px 0 80px !important;
    gap: 15px;
}

.nocollapsed {
    margin-bottom: 40px !important;
    background-color: #354052 !important;
}

.scoop[theme-layout="vertical"] .scoop-navbar .scoop-item > li:hover > a:before {
    height: 5px;
    width: 100%;
    background: #fff;
    top: 95%;
}

.scoop[theme-layout="vertical"][vertical-nav-type="collapsed"] .scoop-navbar .scoop-item > li.scoop-trigger > a .scoop-mtext {
    padding-left: 0;
}

/*STYLE IMPRIMANTA*/

#bPrinter {
    padding: 9px 15px !important;
    font-size: 1rem;
}

.container-imprimanta {
    margin-bottom: 10px;
}

    .container-imprimanta .k-i-print {
        padding-right: 10px;
        font-size: 1.2rem;
    }

#selected_printer {
    padding-bottom: 4px;
}

/*STYLE BUTOANE TOOLBAR*/

.k-toolbar .k-button-solid-base {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    background: transparent;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    height: auto;
}

.k-grid-excel,
.k-grid-pdf,
.k-excel-button {
    width: 16rem;
}

    .k-grid-excel .k-i-excel,
    .k-excel-button .k-i-excel {
        background: #1d6f42;
    }


    .k-grid-pdf .k-i-pdf {
        background: #F40F02;
    }

    .k-toolbar .k-i-plus,
    .k-toolbar .k-i-pencil,
    .k-toolbar .k-i-print,
    #btnSave .k-i-save,
    #btnSaveUserLevel .k-i-save,
    #btnClear .k-i-close,
    .k-toolbar .k-i-edit,
    .k-grid-excel .k-i-excel,
    .k-excel-button .k-i-excel,
    .k-grid-pdf .k-i-pdf,
    .k-toolbar .k-i-upload,
    .k-toolbar .k-i-forward,
    .k-toolbar .k-i-hand,
    .k-toolbar .k-i-check,
    .k-toolbar .k-i-lock,
    .k-toolbar .k-i-paste-as-html,
    .k-toolbar .k-i-add,
    .k-toolbar .k-i-calendar {
        transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
        position: relative;
        display: block;
        margin: 0;
        width: 3rem;
        height: 3rem;
        border-radius: 1.625rem;
    }

    .k-toolbar .k-button-text,
    #btnSave .k-button-text,
    #btnSaveUserLevel .k-button-text,
    .k-grid-excel .k-button-text,
    .k-grid-pdf .k-button-text,
    .k-excel-button .k-button-text {
        transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0.80rem 0;
        color: #282936;
        font-weight: 700;
        line-height: 1.6;
        text-align: center;
        text-transform: uppercase;
    }

    .k-toolbar .k-i-plus::before,
    .k-toolbar .k-i-pencil::before,
    .k-toolbar .k-i-print::before,
    .k-toolbar .k-i-edit::before,
    .k-toolbar .k-i-upload::before,
    .k-toolbar .k-i-forward::before,
    .k-toolbar .k-i-hand::before,
    .k-toolbar .k-i-check::before,
    #btnSave .k-i-save::before,
    #btnSaveUserLevel .k-i-save::before,
    #btnClear .k-i-close::before,
    .k-grid-excel .k-i-excel::before,
    .k-excel-button .k-i-excel::before,
    .k-grid-pdf .k-i-pdf::before,
    .k-toolbar .k-i-lock::before,
    .k-toolbar .k-i-paste-as-html::before,
    .k-toolbar .k-i-add::before,
    .k-toolbar .k-i-calendar::before {
        transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
        left: 0.625rem;
        width: 1.8rem;
        height: 1rem;
        background: none;
        color: #fff;
        font-size: 1.5em;
        transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
        position: absolute;
        top: -.4rem;
        bottom: 0;
        margin: auto;
        background: transparent;
    }

    .k-toolbar .k-button-solid-base:hover .k-i-plus,
    .k-toolbar .k-button-solid-base:hover .k-i-pencil,
    .k-toolbar .k-button-solid-base:hover .k-i-print,
    .k-toolbar .k-button-solid-base:hover .k-i-edit,
    .k-toolbar .k-button-solid-base:hover .k-i-upload,
    .k-toolbar .k-button-solid-base:hover .k-i-forward,
    .k-toolbar .k-button-solid-base:hover .k-i-hand,
    .k-toolbar .k-button-solid-base:hover .k-i-check,
    .k-toolbar .k-button-solid-base:hover .k-i-lock,
    .k-toolbar .k-button-solid-base:hover .k-i-paste-as-html,
    .k-toolbar .k-button-solid-base:hover .k-i-add,
    .k-toolbar .k-button-solid-base:hover .k-i-calendar,
    #btnSave:hover .k-i-save,
    #btnSaveUserLevel:hover .k-i-save,
    #btnClear:hover .k-i-close,
    .k-grid-excel:hover .k-i-excel,
    .k-excel-button:hover .k-i-excel,
    .k-grid-pdf:hover .k-i-pdf {
        width: 90%;
        transform: translate(1rem, 0);
    }

.k-toolbar .k-button-solid-base:hover .k-button-text {
    color: #fff !important;
    transform: translate(1rem, 0);
}

/*STYLE BUTOANE GIRD*/

.k-command-cell {
    text-align: center !important;
}

.k-grid .k-command-cell {
    padding: 8px 12px;
}

td .k-button-solid-base, .k-actions-end .k-button-solid, center .k-button-solid-base {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    background: transparent;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    width: 2rem;
    height: auto;
    overflow: hidden;
}

td .k-i-track-changes,
td .k-i-print,
td .k-i-edit,
td .k-i-close,
td .k-i-delete,
td .k-i-gear,
td .k-i-hyperlink-open,
td .k-i-x,
td .k-i-redo,
td .k-i-eye,
td .k-i-cancel,
td .k-i-email,
td .k-i-cart,
td .k-i-detail-section,
td .k-i-plus,
td .k-i-search,
td .k-i-x-outline,
td .k-i-check-outline,
.k-actions-end .k-i-check,
.k-actions-end .k-i-cancel,
center .k-i-save {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: relative;
    display: block;
    margin: 0;
    width: 2rem;
    height: 2rem;
    background: #ff6358;
    border-radius: 1.625rem;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}

td .k-button-text, .k-actions-end .k-button-text, center .k-button-text {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.30rem 0;
    margin-right: -20px;
    color: #282936;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    text-transform: uppercase;
    transform: translate(4rem);
    opacity: 0;
}

td .k-i-track-changes::before,
td .k-i-print::before,
td .k-i-edit::before,
td .k-i-close::before,
td .k-i-delete::before,
td .k-i-gear::before,
td .k-i-hyperlink-open::before,
td .k-i-x::before,
td .k-i-eye::before,
td .k-i-cancel::before,
td .k-i-email::before,
td .k-i-cart::before,
td .k-i-detail-section::before,
td .k-i-plus::before,
td .k-i-search::before,
td .k-i-redo::before,
td .k-i-x-outline::before,
td .k-i-check-outline:before,
.k-actions-end .k-i-check::before,
.k-actions-end .k-i-cancel::before,
center .k-i-save::before {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    left: .4rem;
    width: 0rem;
    height: 1rem;
    background: none;
    color: #fff;
    font-size: 1.2rem;
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: -.3rem;
    bottom: 0;
    margin: auto;
    background: transparent;
}

td .k-button-solid-base:hover .k-i-track-changes,
td .k-button-solid-base:hover .k-i-print,
td .k-button-solid-base:hover .k-i-edit,
td .k-button-solid-base:hover .k-i-close,
td .k-button-solid-base:hover .k-i-delete,
td .k-button-solid-base:hover .k-i-gear,
td .k-button-solid-base:hover .k-i-hyperlink-open,
td .k-button-solid-base:hover .k-i-x,
td .k-button-solid-base:hover .k-i-eye,
td .k-button-solid-base:hover .k-i-cancel,
td .k-button-solid-base:hover .k-i-email,
td .k-button-solid-base:hover .k-i-cart,
td .k-button-solid-base:hover .k-i-detail-section,
td .k-button-solid-base:hover .k-i-plus,
td .k-button-solid-base:hover .k-i-search,
td .k-button-solid-base:hover .k-i-redo,
td .k-button-solid-base:hover .k-i-x-outline,
td .k-button-solid-base:hover .k-i-check-outline,
.k-actions-end .k-button-solid:hover .k-i-check,
.k-actions-end .k-button-solid:hover .k-i-cancel,
center .k-button-solid-base:hover .k-i-save {
    width: 100%;
    transform: translate(0rem, 0);
}

td .k-button-solid-base:hover .k-button-text,
.k-actions-end .k-button-solid:hover .k-button-text,
center .k-button-solid-base:hover .k-button-text {
    transform: translate(0);
    opacity: 1;
    color: #fff;
}

td:hover .k-button-solid-base {
    width: 90%;
}

td:hover .k-input-button {
    width: 2rem !important;
}

.k-input .k-clear-value .k-i-x {
    background: transparent;
}

    .k-input .k-clear-value .k-i-x::before {
        color: #000;
    }

.k-actions-end .k-i-check {
    background: #5ec232;
}

.k-actions-end {
    justify-content: center;
}

    .k-actions-end .k-button-solid {
        width: 8rem;
    }

/*TOGGLE STYLE*/
.toggleWrapper p {
    margin-top: auto;
    margin-bottom: auto;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    margin-left: .5rem;
    text-wrap: nowrap;
}

.beforeAnimation {
    -moz-transition: .2s cubic-bezier(.24,0,.5,1);
    -o-transition: .2s cubic-bezier(.24,0,.5,1);
    -webkit-transition: .2s cubic-bezier(.24,0,.5,1);
    transition: .2s cubic-bezier(.24,0,.5,1);
}

.afterAnimation {
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 4px 0px 0 rgba(0,0,0,0.04), 0 4px 9px rgba(0,0,0,0.13), 0 3px 3px rgba(0,0,0,0.05);
    -moz-transition: .35s cubic-bezier(.54,1.60,.5,1);
    -o-transition: .35s cubic-bezier(.54,1.60,.5,1);
    -webkit-transition: .35s cubic-bezier(.54,1.60,.5,1);
    transition: .35s cubic-bezier(.54,1.60,.5,1);
}

.toggleWrapper {
    margin-top: auto !important;
    margin-bottom: auto;
    padding: 20px;
    width: 55px;
    border: 1px solid lightgray;
    margin-top: 20px;
    border-radius: 5px;
    background: transparent;
    padding: 0;
    border: 0;
}

    .toggleWrapper input.k-checkbox {
        opacity: 0;
        position: absolute;
    }

        .toggleWrapper input.k-checkbox + label {
            position: relative;
            display: inline-block;
            user-select: none;
            -moz-transition: .4s ease;
            -o-transition: .4s ease;
            -webkit-transition: .4s ease;
            transition: .4s ease;
            -webkit-tap-highlight-color: transparent;
            height: 30px;
            width: 50px;
            border: 1px solid #e4e4e4;
            border-radius: 60px;
        }

            .toggleWrapper input.k-checkbox + label:before {
                content: "";
                position: absolute;
                display: block;
                -moz-transition: .2s cubic-bezier(.24,0,.5,1);
                -o-transition: .2s cubic-bezier(.24,0,.5,1);
                -webkit-transition: .2s cubic-bezier(.24,0,.5,1);
                transition: .2s cubic-bezier(.24,0,.5,1);
                height: 30px;
                width: 51px;
                top: 0;
                left: 0;
                border-radius: 30px;
            }

            .toggleWrapper input.k-checkbox + label:after {
                content: "";
                position: absolute;
                display: block;
                box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 4px 0px 0 rgba(0,0,0,0.04), 0 4px 9px rgba(0,0,0,0.13), 0 3px 3px rgba(0,0,0,0.05);
                -moz-transition: .35s cubic-bezier(.54,1.60,.5,1);
                -o-transition: .35s cubic-bezier(.54,1.60,.5,1);
                -webkit-transition: .35s cubic-bezier(.54,1.60,.5,1);
                transition: .35s cubic-bezier(.54,1.60,.5,1);
                background: whitesmoke;
                height: 28px;
                width: 28px;
                top: 1px;
                left: 0px;
                border-radius: 60px;
            }

        .toggleWrapper input.k-checkbox:checked + label:before {
            background: #ff6358;
            -moz-transition: width .2s cubic-bezier(0,0,0,.1);
            -o-transition: width .2s cubic-bezier(0,0,0,.1);
            -webkit-transition: width .2s cubic-bezier(0,0,0,.1);
            transition: width .2s cubic-bezier(0,0,0,.1);
        }

        .toggleWrapper input.k-checkbox:checked + label:after {
            left: 24px;
        }

/*STYLE DROPDROPDOWN ARROWS*/

.tabstrip {
    margin-top: 2%;
}

.tabstrip-tab {
    width: 49%;
    text-align: center;
}

    .tabstrip-tab p {
        font-weight: bold;
    }

.k-tabstrip-items {
    gap: 5rem;
}

    .k-tabstrip-items,
    .k-tabstrip-items .k-link {
        justify-content: center;
    }

#rotateButton1, #rotateButton2 {
    width: 20%;
}

    #rotateButton1 .k-i-chevron-right::before, #rotateButton2 .k-i-chevron-right::before {
        transform-origin: top left;
    }

.k-tabstrip-items .k-link p {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-right: 1rem;
}

.rotate {
    -moz-transition: all .2s linear;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}

    .rotate.down {
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }


/*STYLE DATEPICKER & FILTER*/

.textLine {
    margin-top: auto;
    margin-bottom: auto;
    margin-right: .5rem;
    margin-left: .5rem;
    text-transform: uppercase;
    text-wrap: nowrap;
}

.k-datepicker .k-input-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    padding: 5px;
}

    .k-datepicker .k-input-button:hover {
    }

    .k-datepicker .k-input-button .k-i-calendar {
        width: 2rem;
        height: 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto;
    }

        .k-datepicker .k-input-button .k-i-calendar::before {
            color: #000;
            left: 0;
            width: auto;
            height: auto;
            position: relative;
            top: 0;
        }

    .k-datepicker .k-input-button:hover {
        transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
        color: #fff;
        background: #ff6358;
    }


    .k-datepicker .k-input-button:hover .k-i-calendar {
        transform: translate(0rem);
        transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    }


        .k-datepicker .k-input-button:hover .k-i-calendar::before {
            color: #fff;
            transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
        }


.k-grid-header .k-grid-filter:hover {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    color: #fff;
    background-color: #ff6358;
}

/*MEDIA QUERY*/

@media screen and (max-width: 1440px) {
    .scoop-item {
        padding: 0 80px 0 40px !important;
        gap: 15px;
    }


    .scoop-hasmenu:nth-child(3).scoop-trigger > .scoop-submenu, .scoop-hasmenu:nth-child(4).scoop-trigger > .scoop-submenu, .scoop-hasmenu:nth-child(5).scoop-trigger > .scoop-submenu {
        height: 240px !important;
        overflow-y: auto;
    }
}

@media screen and (max-width: 1024px) {
    .scoop-item {
        padding: 0 20px 0 20px !important;
        gap: 0;
    }

    .scoop[theme-layout="vertical"] .scoop-navbar .scoop-item[item-border="true"][item-border-style="solid"] li > a, .scoop .scoop-navbar .scoop-item > li {
        width: 100% !important;
    }

    .scoop[theme-layout="vertical"][vertical-nav-type="collapsed"] .scoop-navbar .scoop-item > .scoop-hasmenu.scoop-trigger > .scoop-submenu {
        width: 100% !important;
    }
}

@media only screen and (max-width: 881px) {
    .scoop[theme-layout="vertical"] .scoop-navbar .scoop-item[item-border="true"][item-border-style="solid"] li > a {
        display: grid !important;
        grid-template-rows: 50% 50% !important;
    }

    .scoop .scoop-navbar .scoop-item > li > a > .scoop-micon {
        padding: 0;
    }

    .scoop-item {
        padding: 0 !important;
    }

    .nocollapsed {
        margin-bottom: 60px !important;
    }

    .container-fluid {
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 767px) {
    .scoop-left-item {
        margin-top: -23px !important;
        display: block !important;
        grid-template-columns: none !important;
        max-height: 400px;
        overflow: scroll;
    }

    .scoop-inner-content {
        padding: 0px;
    }

    .scoop-navbar {
        width: 235px !important;
        height: 100% !important;
    }

    .scoop-item {
        background-color: #354052;
    }

    .logo-text {
        z-index: 3040 !important;
    }

    .scoop[theme-layout="vertical"] .scoop-header {
        height: 0;
    }

    .nocollapsed {
        margin-bottom: 0;
    }

    .scoop[theme-layout="vertical"] .scoop-navbar .scoop-item[item-border="true"][item-border-style="solid"] li > a {
        display: block !important;
    }

    .scoop-left-item {
        margin-top: -22px !important;
    }

    .scoop[theme-layout="vertical"] .scoop-navbar .scoop-item > li:hover > a:before {
        height: 100%;
        width: 5px;
        background: #fff;
        top: 0;
    }

    /*fingerprint style*/
    .circle-loader {
        margin: 0 0 0px 0px;
        border: 5px solid rgba(0, 0, 0, 0.2);
        border-left-color: #228ae6;
        animation-name: loader-spin;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        position: relative;
        display: inline-block;
        vertical-align: top;
    }

        .circle-loader,
        .circle-loader:after {
            border-radius: 50%;
            width: 10em;
            height: 10em;
        }

    .checkmark {
        display: none;
    }

        .checkmark.draw:after {
            animation-duration: 1.2s;
            animation-timing-function: ease;
            animation-name: checkmark;
            transform: scaleX(-1) rotate(135deg);
        }

        .checkmark:after {
            opacity: 1;
            height: 5em;
            width: 2.5em;
            transform-origin: left top;
            border-right: 5px solid #396f3a;
            border-top: 5px solid #396f3a;
            content: "";
            left: 2.5em;
            top: 5em;
            position: absolute;
        }

    .alert {
        display: none;
    }

        .alert.draw:after {
            animation-duration: 1.2s;
            animation-timing-function: ease;
            animation-name: alert;
            transform: scaleX(-1) rotate(135deg);
        }

        .alert.draw:before {
            animation-duration: 1.2s;
            animation-timing-function: ease;
            animation-name: alert;
            left: 6em;
            transform: scaleX(1) rotate(135deg);
        }

        .alert:before, .alert:after {
            opacity: 1;
            height: 6.25em;
            width: 6.25em;
            transform-origin: left top;
            border-top: 5px solid #c92a2a;
            content: "";
            left: 1.5em;
            top: 1.5em;
            position: absolute;
        }

    .load-failure:before, .load-failure:after {
        display: block;
        content: "";
        height: 2px;
        background: #c92a2a;
        width: 50%;
        position: absolute;
        top: 2em;
        left: 1em;
    }

    .load-failure:before {
        transform: rotate(45deg);
    }

    .load-failure:after {
        transform: rotate(-45deg);
    }

    .load-complete {
        -webkit-animation: none;
        animation: none;
        transition: border 500ms ease-out;
    }

        .load-complete.load-success {
            border-color: #396f3a;
        }

        .load-complete.load-failure {
            border-color: #c92a2a;
        }

        .load-complete.load-info {
            border-color: #c92a2a;
        }

    .errorTxt {
        color: #c92a2a;
    }

    .successTxt {
        color: #396f3a;
    }

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

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

    @keyframes checkmark {
        0% {
            height: 0;
            width: 0;
            opacity: 1;
        }

        20% {
            height: 0;
            width: 2.5em;
            opacity: 1;
        }

        40% {
            height: 5em;
            width: 2.5em;
            opacity: 1;
        }

        100% {
            height: 5em;
            width: 2.5em;
            opacity: 1;
        }
    }

    @keyframes alert {
        0% {
            height: 0;
            width: 0;
            opacity: 1;
        }

        20% {
            height: 0;
            width: 6.25em;
            opacity: 1;
        }

        40% {
            height: 6.25em;
            width: 6.25em;
            opacity: 1;
        }

        100% {
            height: 6.25em;
            width: 6.25em;
            opacity: 1;
        }
    }

    .fpArray {
        stroke-dasharray: 50;
        stroke-dashoffset: 50;
    }

    .fprSuccess {
        stroke: #396f3a;
        stroke-dashoffset: 0;
        -webkit-transition: stroke-dashoffset 1s;
        -moz-transition: stroke-dashoffset 1s;
        -o-transition: stroke-dashoffset 1s;
        transition: stroke-dashoffset 1s;
    }

    .fprFail {
        stroke: #c92a2a;
        stroke-dashoffset: 0;
        -webkit-transition: stroke-dashoffset 0.2s;
        -moz-transition: stroke-dashoffset 0.2s;
        -o-transition: stroke-dashoffset 0.2s;
        transition: stroke-dashoffset 0.2s;
    }

    .circ {
        opacity: 0;
        stroke-dasharray: 130;
        stroke-dashoffset: 130;
        -webkit-transition: all 1s;
        -moz-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s;
    }

    .tick, .cross {
        stroke-dasharray: 50;
        stroke-dashoffset: 50;
        -webkit-transition: stroke-dashoffset 1s 0.5s ease-out;
        -moz-transition: stroke-dashoffset 1s 0.5s ease-out;
        -o-transition: stroke-dashoffset 1s 0.5s ease-out;
        transition: stroke-dashoffset 1s 0.5s ease-out;
    }

    .drawn .path {
        opacity: 1;
        stroke-dashoffset: 0;
    }
}